/* =========================================================================
   QUADRONET Elemente (qn_elements) - Stile aller zehn Elemente
   -------------------------------------------------------------------------
   28.10.2026. BEWUSST OHNE @layer und alles unter .qne - wie
   referenzen.css und 72-werkzeugwand.css. Eingebunden per f:asset.css nur
   auf Seiten mit einem dieser Elemente.

   Farben kommen aus dem Theme (layout_quadronet, 20-marke.css) mit
   Ersatzwerten, damit die Elemente auch ohne Theme lesbar bleiben.
   Material Papier (frame-m-paper) schaltet unten auf dunkle Schrift.

   Kontraste (geprueft): Text #EAF4FF auf Karte #22384A 10,9:1, leise
   #9FC0D8 6,3:1, Akzent #FFA94D 6,4:1; auf Papier Akzent #A35700 4,9:1,
   leise #4C6072 6,0:1; Schrift auf Orange #141A1F 7,3:1.
   ========================================================================= */

.qne {
  --e-text:    var(--qn-schrift, #EAF4FF);
  --e-leise:   var(--qn-schrift-leise, #9FC0D8);
  --e-orange:  var(--orange, #FF8800);
  --e-akzent:  var(--orange-hell, #FFA94D);
  --e-auf-orange: var(--auf-orange, #141A1F);
  --e-linie:   var(--qn-linie-fein, rgba(190, 215, 235, .18));
  --e-linie-2: var(--qn-linie, rgba(190, 215, 235, .28));
  --e-fokus:   var(--qn-fokus, #FFD9A8);
  --e-karte:   linear-gradient(160deg, #22384A 0%, #1B2B38 60%, #17242F 100%);
  --e-feld:    rgba(10, 18, 25, .45);
  --e-schatten: var(--sch-blatt, 0 10px 30px -14px rgba(0, 0, 0, .66));
  --e-schrift: var(--qn-schriftfamilie, "IBM Plex Sans", system-ui, sans-serif);
  --e-titel:   var(--qn-schriftfamilie-ueberschrift, "Bebas Neue", "IBM Plex Sans", sans-serif);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2rem);
  color: var(--e-text);
  font-family: var(--e-schrift);
}
.qne *,
.qne *::before,
.qne *::after { box-sizing: border-box; }
.qne [hidden] { display: none !important; }

.qne-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.qne__einleitung { max-width: 62ch; }
.qne__einleitung > :first-child { margin-top: 0; }
.qne__einleitung > :last-child { margin-bottom: 0; }
.qne__abschluss { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Kicker: kleine Zeile mit gedrehtem Quadrat (8-Grad-Achse) */
.qne-kicker {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0;
  font: 500 .72rem/1.5 var(--e-schrift);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--e-leise);
}
.qne-kicker__marke {
  display: inline-block;
  flex: none;
  width: .6em;
  height: .6em;
  background: var(--e-orange);
  transform: rotate(8deg);
}

/* Ersatz-Knopf (nur ohne Theme sichtbar) */
.qne-knopf {
  display: inline-block;
  padding: .8em 1.3em;
  background: var(--e-orange);
  color: var(--e-auf-orange);
  font-weight: 600;
  text-decoration: none;
}

/* =========================================================================
   Schieber: Lack und Motor, Vorher/Nachher
   ========================================================================= */
.qne-schieber { margin: 0; }
.qne-schieber__buehne {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--e-linie);
  border-radius: 3px;
  background: var(--e-karte);
  box-shadow: var(--e-schatten);
}
.qne-schieber__griff { display: none; }
.qne-schieber__steuer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-top: .9rem;
}
.qne-schieber__etikett {
  font: 500 .72rem/1.5 var(--e-schrift);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--e-leise);
}
.qne-schieber__regler {
  flex: 1 1 14rem;
  min-width: 0;
  height: 2.75rem;            /* Ziel 44 px */
  margin: 0;
  accent-color: var(--e-orange);
  background: transparent;
  cursor: ew-resize;
}
.qne-schieber__regler:focus-visible { outline: 2px solid var(--e-fokus); outline-offset: 2px; }
.qne-schieber__unterschrift {
  margin-top: .6rem;
  font-size: .86rem;
  color: var(--e-leise);
}

/* Mit Skript: Ebenen uebereinander, die obere ist bis --pos sichtbar */
.qne-schieber--aktiv .qne-schieber__buehne {
  cursor: ew-resize;
  touch-action: pan-y;         /* senkrecht scrollen bleibt moeglich */
  user-select: none;
  -webkit-user-select: none;
}
.qne-schieber--aktiv .qne-schieber__buehne > * { grid-area: 1 / 1; }
.qne-schieber--aktiv .qne-schieber__oben {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.qne-schieber--aktiv .qne-schieber__griff {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  display: block;
  width: 2px;
  margin-left: -1px;
  background: var(--e-orange);
  box-shadow: 0 0 0 1px rgba(20, 26, 31, .35), 0 0 18px rgba(255, 136, 0, .45);
  pointer-events: none;
}
.qne-schieber__knauf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid var(--e-orange);
  border-radius: 50%;
  background: #141A1F;
  transform: translate(-50%, -50%);
  box-shadow: var(--sch-nah, 0 1px 3px rgba(0, 0, 0, .3));
}
.qne-schieber__knauf::before,
.qne-schieber__knauf::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-top: 2px solid var(--e-akzent);
  border-left: 2px solid var(--e-akzent);
}
.qne-schieber__knauf::before { left: .55rem;  transform: translateY(-50%) rotate(-45deg); }
.qne-schieber__knauf::after  { right: .55rem; transform: translateY(-50%) rotate(135deg); }

/* ----- Lack und Motor ---------------------------------------------------- */
.qne-lm__lack { position: relative; order: -1; background: #fff; }
.qne-lm__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.qne-schieber--aktiv .qne-lm__lack { align-self: stretch; }
.qne-lm__marke {
  position: absolute;
  z-index: 1;
  top: .8rem;
  left: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin: 0;
  padding: .3em .7em;
  font: 600 .7rem/1.4 var(--e-schrift);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--e-text);
  background: rgba(20, 26, 31, .82);
  border-radius: 2px;
}
.qne-lm__motor {
  position: relative;
  display: grid;
  align-content: center;
  gap: 1rem;
  min-height: 100%;
  padding: clamp(3.2rem, 6vw, 4.4rem) clamp(1rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(234, 244, 255, .05) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(234, 244, 255, .05) 31px 32px),
    linear-gradient(160deg, #1F3140 0%, #17242F 100%);
  color: #EAF4FF;
}
.qne-lm__motor .qne-lm__marke { left: auto; right: .8rem; }
/* Die Marke der unteren Ebene liegt ueber der oberen Ebene (die untere
   bildet keinen eigenen Stapelkontext) - sonst schneidet der Schieber sie an. */
.qne-schieber--aktiv .qne-lm__motor .qne-lm__marke,
.qne-schieber--aktiv .qne-vn__marke--rechts { z-index: 3; }
.qne-lm__werte { display: grid; gap: 0; margin: 0; }
.qne-lm__wert {
  display: grid;
  justify-items: end;
  gap: .15rem;
  text-align: right;
  padding: .7rem 0;
  border-bottom: 1px dashed rgba(190, 215, 235, .22);
}
.qne-lm__wert:last-child { border-bottom: 0; }
.qne-lm__wert dt {
  font: 500 .78rem/1.4 var(--e-schrift);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9FC0D8;
}
.qne-lm__wert dd {
  display: grid;
  justify-items: end;
  margin: 0;
  text-align: right;
}
.qne-lm__wert strong {
  font: 400 clamp(1.5rem, 3.2vw, 2.2rem)/1 var(--e-titel);
  letter-spacing: .02em;
  color: #FFA94D;
}
.qne-lm__erkl { font-size: .78rem; color: #9FC0D8; }

/* ----- Vorher/Nachher ----------------------------------------------------- */
.qne-vn .qne-schieber__buehne { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--e-linie); }
.qne-vn__seite { position: relative; margin: 0; }
.qne-vn__seite--vorher { order: -1; }
.qne-vn__bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.qne-vn__marke {
  position: absolute;
  bottom: .8rem;
  left: .8rem;
  margin: 0;
  padding: .3em .75em;
  font: 600 .72rem/1.4 var(--e-schrift);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #EAF4FF;
  background: rgba(20, 26, 31, .82);
  border-radius: 2px;
}
.qne-vn__marke--rechts { left: auto; right: .8rem; }
.qne-schieber--aktiv.qne-vn__figur .qne-schieber__buehne { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* =========================================================================
   Suchradar
   ========================================================================= */
.qne-radar { --qne-radar-tempo: 9s; }
.qne-radar__inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .qne-radar__inhalt { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.qne-radar__text { display: grid; gap: 1rem; align-content: start; }
.qne-radar__liste {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: qne-ort;
}
.qne-radar__ort {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  margin: 0;
  padding: .55rem 0;
  border-bottom: 1px solid var(--e-linie);
  counter-increment: qne-ort;
}
.qne-radar__ort + .qne-radar__ort { margin: 0; }
.qne-radar__name::before {
  content: counter(qne-ort, decimal-leading-zero);
  display: inline-block;
  min-width: 2.2em;
  font: 500 .7rem/1 var(--e-schrift);
  letter-spacing: .12em;
  color: var(--e-akzent);
}
.qne-radar__wo { color: var(--e-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qne-radar__wo abbr { text-decoration: none; color: var(--e-text); font-weight: 600; }
.qne-radar__ort--fern .qne-radar__wo::after { content: " · fern"; }

.qne-radar__schirm {
  position: relative;
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  aspect-ratio: 1;
}
.qne-radar__svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.qne-radar__strahlrahmen {
  position: absolute;
  inset: 6.06%;                 /* Kreis r=58 im viewBox 132 */
  overflow: hidden;             /* der gedrehte Strahl ragt sonst als Quadrat heraus (Querscrollen am Telefon) */
  border-radius: 50%;
}
.qne-radar__strahl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 136, 0, 0) 0deg, rgba(255, 136, 0, 0) 300deg, rgba(255, 136, 0, .22) 356deg, rgba(255, 136, 0, .5) 360deg);
  opacity: 0;
}
.qne-radar--laeuft .qne-radar__strahl {
  opacity: 1;
  animation: qne-dreh var(--qne-radar-tempo) linear infinite;
}
@keyframes qne-dreh { to { transform: rotate(360deg); } }

.qne-radar__achse { stroke: var(--e-linie); stroke-width: .3; }
.qne-radar__ring { fill: none; stroke: var(--e-linie-2); stroke-width: .35; stroke-dasharray: 1.2 1.2; }
.qne-radar__ring--aussen { stroke-dasharray: none; stroke: var(--e-akzent); stroke-opacity: .55; stroke-width: .45; }
.qne-radar__km { fill: var(--e-leise); font: 500 2.4px var(--e-schrift); letter-spacing: .06em; }
.qne-radar__himmel { fill: var(--e-akzent); font: 600 3px var(--e-schrift); }
.qne-radar__kern { fill: var(--e-orange); }
.qne-radar__ping { fill: none; stroke: var(--e-orange); stroke-width: .4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.qne-radar--laeuft .qne-radar__ping { animation: qne-ping var(--qne-radar-tempo) linear infinite; animation-delay: var(--verz, 0s); }
@keyframes qne-ping {
  0%  { opacity: .9; transform: scale(1); }
  9%  { opacity: 0;  transform: scale(4.2); }
  100% { opacity: 0; transform: scale(4.2); }
}
.qne-radar__ortname { fill: var(--e-text); font: 500 2.7px var(--e-schrift); paint-order: stroke; stroke: rgba(20, 26, 31, .7); stroke-width: .6px; }
.qne-radar__punkt--fern .qne-radar__kern { fill: none; stroke: var(--e-orange); stroke-width: .4; }
.qne-radar__marke { fill: var(--e-orange); }
.qne-radar__mpuls { fill: none; stroke: var(--e-orange); stroke-width: .4; opacity: .6; }
.qne-radar__mname { fill: var(--e-text); font: 600 3px var(--e-schrift); letter-spacing: .04em; paint-order: stroke; stroke: rgba(20, 26, 31, .7); stroke-width: .6px; }

/* =========================================================================
   Ablauf heute / mit Anwendung
   ========================================================================= */
.qne-ablauf__schalter {
  display: inline-flex;
  flex-wrap: wrap;
  justify-self: start;
  gap: 0;
  border: 1px solid var(--e-linie-2);
  border-radius: 3px;
  overflow: hidden;
}
.qne-ablauf__knopf {
  min-height: 2.75rem;
  padding: .6rem 1.2rem;
  border: 0;
  background: transparent;
  color: var(--e-text);
  font: 600 .82rem/1.2 var(--e-schrift);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.qne-ablauf__knopf + .qne-ablauf__knopf { border-left: 1px solid var(--e-linie-2); }
.qne-ablauf__knopf[aria-pressed="true"] { background: var(--e-orange); color: var(--e-auf-orange); }
.qne-ablauf__knopf:focus-visible { outline: 2px solid var(--e-fokus); outline-offset: -4px; }

.qne-ablauf__ansicht { display: grid; gap: 1rem; }
.qne-ablauf__titel { margin: 0; font-size: var(--qn-groesse-h3, 1.4rem); }
.qne-ablauf__zahl { color: var(--e-leise); font-family: var(--e-schrift); font-size: .8rem; letter-spacing: .1em; }
.qne-ablauf--schalter .qne-ablauf__ansicht > .qne-ablauf__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.qne-ablauf__kette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.qne-ablauf__schritt {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: none;
  margin: 0;
  padding: .8rem 1rem;
  border: 1px solid var(--e-linie);
  border-left: 3px solid var(--e-orange);
  border-radius: 3px;
  background: var(--e-karte);
  box-shadow: var(--e-schatten);
}
.qne-ablauf__kette > li + li { margin: 0; }
.qne-ablauf__kette--heute .qne-ablauf__schritt { border-left-color: var(--e-leise); }
.qne-ablauf__nr {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--e-akzent);
  border-radius: 50%;
  font: 600 .78rem/1 var(--e-schrift);
  color: var(--e-akzent);
}
.qne-ablauf__text { font-size: .98rem; line-height: 1.4; }

.qne-ablauf__weg { display: grid; gap: .5rem; padding-top: .4rem; border-top: 1px dashed var(--e-linie-2); }
.qne-ablauf__wegtitel {
  margin: 0;
  font: 500 .72rem/1.5 var(--e-schrift);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--e-leise);
}
.qne-ablauf__wegliste { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.qne-ablauf__wegliste li { margin: 0; color: var(--e-leise); }
.qne-ablauf__wegliste del { text-decoration-color: var(--e-akzent); text-decoration-thickness: 2px; }

@media (max-width: 40rem) {
  .qne-ablauf__kette { gap: 1.2rem; }
  .qne-ablauf__schritt + .qne-ablauf__schritt::before { content: ""; position: absolute; top: -1.2rem; left: 1.85rem; width: 2px; height: 1.2rem; background: var(--e-linie-2); }
}

/* =========================================================================
   Rundgang als Kopfbild
   ========================================================================= */
.qne-tour__rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 16rem;
  overflow: hidden;
  border: 1px solid var(--e-linie);
  border-radius: 3px;
  background: #141A1F;
  box-shadow: var(--sch-tief, 0 26px 60px -26px rgba(0, 0, 0, .78));
}
@media (max-width: 40rem) { .qne-tour__rahmen { aspect-ratio: 4 / 5; } }
.qne-tour__vorschau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qne-tour__vorhang {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .8rem;
  padding: 1.4rem;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(20, 26, 31, .15) 0%, rgba(20, 26, 31, .62) 100%);
}
.qne-tour__knopf {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.4rem;
  padding: .7rem 1.6rem .7rem .8rem;
  border: 0;
  border-radius: 999px;
  background: var(--e-orange);
  color: var(--e-auf-orange);
  font: 400 clamp(1.3rem, 2.6vw, 1.7rem)/1 var(--e-titel);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7);
  transition: transform .18s ease;
}
.qne-tour__knopf:hover { transform: translateY(-2px); }
.qne-tour__knopf:focus-visible { outline: 3px solid #FFD9A8; outline-offset: 4px; }
.qne-tour__spiel {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #141A1F;
}
.qne-tour__spiel::before {
  content: "";
  margin-left: .2rem;
  border-style: solid;
  border-width: .45rem 0 .45rem .75rem;
  border-color: transparent transparent transparent var(--e-orange);
}
.qne-tour__hinweis,
.qne-tour__fremd {
  max-width: 40ch;
  margin: 0;
  padding: .3rem .7rem;
  border-radius: 2px;
  background: rgba(20, 26, 31, .78);
  color: #EAF4FF;
  font-size: .86rem;
}
.qne-tour__fremd { color: #9FC0D8; font-size: .78rem; }
.qne-tour__ecke { position: absolute; z-index: 3; width: 1.6rem; height: 1.6rem; border: 0 solid var(--e-orange); pointer-events: none; }
.qne-tour__ecke--lo { top: .8rem; left: .8rem; border-top-width: 2px; border-left-width: 2px; }
.qne-tour__ecke--ro { top: .8rem; right: .8rem; border-top-width: 2px; border-right-width: 2px; }
.qne-tour__ecke--lu { bottom: .8rem; left: .8rem; border-bottom-width: 2px; border-left-width: 2px; }
.qne-tour__ecke--ru { bottom: .8rem; right: .8rem; border-bottom-width: 2px; border-right-width: 2px; }
.qne-tour--offen .qne-tour__ecke { display: none; }
.qne-tour__fenster { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; background: #141A1F; }
.qne-tour__extra { margin: 0; font-size: .9rem; }
.qne-tour__neu { color: var(--qn-schrift-link, var(--e-orange)); }

/* =========================================================================
   Zeitfresser-Rechner
   ========================================================================= */
.qne-rechner__pult {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  margin: 0;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--e-linie);
  border-left: 3px solid var(--e-orange);
  border-radius: 3px;
  background: var(--e-karte);
  box-shadow: var(--e-schatten);
}
@media (min-width: 900px) {
  .qne-rechner__pult { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
}
.qne-rechner__felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 1rem; }
.qne-rechner__feld { display: grid; gap: .35rem; }
.qne-rechner__feld label {
  font: 500 .74rem/1.4 var(--e-schrift);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9FC0D8;
}
.qne-rechner__feld input {
  width: 100%;
  min-height: 2.9rem;
  padding: .5rem .8rem;
  border: 1px solid rgba(190, 215, 235, .35);
  border-radius: 3px;
  background: var(--e-feld);
  color: #EAF4FF;
  font: 400 1.5rem/1 var(--e-titel);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.qne-rechner__feld input:focus-visible { outline: 2px solid #FFD9A8; outline-offset: 1px; border-color: var(--e-orange); }
.qne-rechner__anzeige { display: grid; gap: .3rem; padding-left: clamp(0rem, 2vw, 1.4rem); border-left: 1px dashed rgba(190, 215, 235, .25); }
.qne-rechner__label { margin: 0; font: 500 .72rem/1.5 var(--e-schrift); letter-spacing: .19em; text-transform: uppercase; color: #9FC0D8; }
.qne-rechner__ergebnis { display: grid; gap: .3rem; color: #EAF4FF; font-size: 1.05rem; }
.qne-rechner__stunden { font: 400 clamp(3rem, 8vw, 5rem)/.9 var(--e-titel); color: #FFA94D; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.qne-rechner__tage { color: #9FC0D8; font-size: .9rem; }
.qne-rechner__hinweis { margin: 0; font-size: .82rem; color: var(--e-leise); }

/* =========================================================================
   Aufklapper
   ========================================================================= */
.qne-auf__liste { display: grid; gap: 0; border-top: 1px solid var(--e-linie-2); }
.qne-auf__eintrag { border-bottom: 1px solid var(--e-linie-2); }
.qne-auf__frage {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.2rem;
  padding: .9rem .2rem;
  cursor: pointer;
  list-style: none;
}
.qne-auf__frage::-webkit-details-marker { display: none; }
.qne-auf__frage::marker { content: ""; }
.qne-auf__frage:focus-visible { outline: 2px solid var(--e-fokus); outline-offset: 2px; }
.qne-auf__nr { flex: none; min-width: 2em; font: 500 .74rem/1 var(--e-schrift); letter-spacing: .14em; color: var(--e-akzent); }
.qne-auf__titel { flex: 1 1 auto; margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.1; }
.qne-auf__zeichen { position: relative; flex: none; width: 1.4rem; height: 1.4rem; border: 1px solid var(--e-linie-2); border-radius: 50%; transition: transform .2s ease; }
.qne-auf__zeichen::before,
.qne-auf__zeichen::after { content: ""; position: absolute; top: 50%; left: 50%; width: .62rem; height: 2px; background: var(--e-orange); transform: translate(-50%, -50%); }
.qne-auf__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
.qne-auf__eintrag[open] .qne-auf__zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }
.qne-auf__frage:hover .qne-auf__titel { color: var(--e-akzent); }
.qne-auf__antwort { max-width: 68ch; padding: 0 .2rem 1.2rem 3.2em; }
.qne-auf__antwort > :first-child { margin-top: 0; }
.qne-auf__antwort > * + * { margin-top: .8em; }
@media (max-width: 30rem) { .qne-auf__antwort { padding-left: .2rem; } }

/* =========================================================================
   Kennzahlen
   ========================================================================= */
.qne-zahlen__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin: 0;
}
.qne-zahlen__feld {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.1rem 1.1rem;
  border-left: 3px solid var(--e-orange);
  background: linear-gradient(90deg, rgba(255, 136, 0, .07), transparent 70%);
}
.qne-zahlen__feld dd { margin: 0; }
.qne-zahlen__wert { order: -1; font: 400 clamp(2.6rem, 6vw, 4.2rem)/.9 var(--e-titel); letter-spacing: .01em; color: var(--e-akzent); font-variant-numeric: tabular-nums; }
.qne-zahlen__titel { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.qne-zahlen__text { font-size: .92rem; line-height: 1.5; color: var(--e-leise); }
.qne-zahlen__stand { margin-top: auto; padding-top: .4rem; font-size: .74rem; letter-spacing: .06em; color: var(--e-leise); }
.qne-zahlen__stand::before { content: "Stand: "; }

/* =========================================================================
   Karten
   ========================================================================= */
.qne-karten__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.qne-karte {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--e-linie);
  border-top: 3px solid var(--e-orange);
  border-radius: 3px;
  background: var(--e-karte);
  box-shadow: var(--e-schatten);
  transition: transform .18s ease, box-shadow .18s ease;
}
.qne-karten__raster > li + li { margin: 0; }
.qne-karte__bild { aspect-ratio: 16 / 9; overflow: hidden; }
.qne-karte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qne-karte__inhalt { display: grid; align-content: start; gap: .6rem; padding: 1.1rem 1.2rem 1.3rem; }
.qne-karte__nr { font: 500 .7rem/1 var(--e-schrift); letter-spacing: .16em; color: #FFA94D; }
.qne-karte__zeile { margin: 0; font: 500 .72rem/1.4 var(--e-schrift); letter-spacing: .16em; text-transform: uppercase; color: #FFA94D; }

/* Personen (Team, Netzwerk): ein Bild ist hier ein Logo - ganze Kartenbreite,
   nichts abgeschnitten (contain), Seitenverhaeltnis wie geliefert */
.qne-karten__raster--personen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.qne-karten__raster--personen .qne-karte__bild {
  aspect-ratio: auto;
  margin: 1.3rem 1.2rem 0;
  border: 1px solid var(--e-linie-2);
  border-radius: 3px;
  background: #fff;
}
.qne-karten__raster--personen .qne-karte__bild img { height: auto; object-fit: contain; }
/* Personen ohne Foto: Figur als Strichzeichnung */
.qne-karte__figur {
  width: 5.5rem;
  aspect-ratio: 1;
  margin: 1.3rem 1.2rem 0;
  padding: .6rem;
  border: 1px solid var(--e-linie-2);
  border-radius: 3px;
  color: #FFA94D;
}
.qne-karte__figur svg { display: block; width: 100%; height: 100%; }
.qne-karte__titel { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.05; color: #EAF4FF; }
.qne-karte__link { color: inherit; text-decoration: none; }
.qne-karte__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.qne-karte__pfeil { color: #FFA94D; }
.qne-karte__text { font-size: .94rem; line-height: 1.55; color: #9FC0D8; }
.qne-karte__text > * { margin: 0; }
.qne-karte__web { margin: .2rem 0 0; font: 500 .8rem/1.4 var(--e-schrift); letter-spacing: .04em; color: #FFA94D; overflow-wrap: anywhere; }
.qne-karte__text > * + * { margin-top: .6em; }
.qne-karte__text a { position: relative; z-index: 2; }
.qne-karte--link:hover { transform: translateY(-3px); box-shadow: var(--sch-tief, 0 26px 60px -26px rgba(0, 0, 0, .78)); }
.qne-karte--link:hover .qne-karte__titel { color: #FFA94D; }
.qne-karte:focus-within { outline: 2px solid #FFD9A8; outline-offset: 3px; }
.qne-karte__link:focus-visible { outline: none; }

/* Karte mit Zeichen (29.10.2026): Kopfzeile Nummer links, Zeichen rechts.
   Das Zeichen (Partial Zeichen/Bereich) bringt seine Stile selbst mit;
   hier nur Groesse und Farbe. Rueckweg: diesen Block entfernen. */
.qne-karte__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .1rem;
}
.qne-karte__zeichen {
  flex: none;
  width: clamp(4rem, 7vw, 4.75rem);
  height: auto;
  aspect-ratio: 1;
  margin: -.2rem -.2rem 0 0;
  color: #EAF4FF;
  pointer-events: none;
}
.frame-m-paper .qne-karte__zeichen { color: var(--ink, #16242F); }

/* =========================================================================
   Logowand
   ========================================================================= */
.qne-logos__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(30%, 8.5rem), 1fr));
  gap: clamp(.6rem, 1.4vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.qne-logos__tafel {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: .5rem;
  max-width: none;
  margin: 0;
  padding: .35rem;
  aspect-ratio: 1;
  border: 1px solid rgba(22, 36, 47, .1);
  border-radius: 3px;
  background: #fff;
}
.qne-logos__raster > li + li { margin: 0; }
.qne-logos__raster--namen .qne-logos__tafel { aspect-ratio: auto; padding-bottom: .6rem; }
.qne-logos__bild { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.qne-logos__name { font-size: .72rem; line-height: 1.3; text-align: center; color: #4C6072; hyphens: auto; }

/* =========================================================================
   Material Papier (frame-m-paper)
   ========================================================================= */
.frame-m-paper .qne {
  --e-akzent: var(--orange-ink, #A35700);
  --e-linie:  rgba(22, 36, 47, .16);
  --e-linie-2: rgba(22, 36, 47, .26);
  --e-fokus:  var(--orange-ink, #A35700);
  --e-karte:  #fff;
  --e-schatten: 0 10px 30px -18px rgba(22, 36, 47, .4);
}
.frame-m-paper .qne-radar__ortname,
.frame-m-paper .qne-radar__mname { stroke: rgba(247, 245, 242, .85); }
.frame-m-paper .qne-karte__titel { color: var(--ink, #16242F); }
.frame-m-paper .qne-karte__text { color: var(--dunkel-2, #4C6072); }
.frame-m-paper .qne-karte__nr,
.frame-m-paper .qne-karte__zeile,
.frame-m-paper .qne-karte__figur,
.frame-m-paper .qne-karte__web,
.frame-m-paper .qne-karte__pfeil,
.frame-m-paper .qne-karte--link:hover .qne-karte__titel { color: var(--orange-ink, #A35700); }
.frame-m-paper .qne-karte:focus-within { outline-color: var(--orange-ink, #A35700); }
.frame-m-paper .qne-rechner__pult { background: linear-gradient(160deg, #22384A 0%, #1B2B38 60%, #17242F 100%); }
.frame-m-paper .qne-rechner__hinweis { color: var(--dunkel-2, #4C6072); }
.frame-m-paper .qne-ablauf__schritt { background: #fff; }
.frame-m-paper .qne-logos__tafel { border-color: rgba(22, 36, 47, .14); box-shadow: 0 6px 18px -14px rgba(22, 36, 47, .5); }
.frame-m-paper .qne-zahlen__feld { background: linear-gradient(90deg, rgba(163, 87, 0, .08), transparent 70%); border-left-color: var(--orange-ink, #A35700); }

/* =========================================================================
   Bewegung, Kontrast, Druck
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .qne *, .qne *::before, .qne *::after { animation: none !important; transition: none !important; }
}
@media (prefers-contrast: more) {
  .qne { --e-leise: var(--e-text); --e-linie: currentColor; --e-linie-2: currentColor; }
}
@media (forced-colors: active) {
  .qne-schieber__griff { background: Highlight; }
  .qne-radar__strahl { display: none; }
  .qne-ablauf__knopf[aria-pressed="true"] { outline: 2px solid Highlight; }
  .qne-karte, .qne-rechner__pult { border: 1px solid CanvasText; }
}
@media print {
  .qne-schieber__steuer, .qne-schieber__griff, .qne-radar__strahl, .qne-ablauf__schalter, .qne-tour__vorhang { display: none !important; }
  .qne-ablauf__ansicht[hidden] { display: grid !important; }
  .qne-karte, .qne-rechner__pult, .qne-schieber__buehne { box-shadow: none; }
}