/* =========================================================================
   QUADRONET Layout - PageSpeed-Check "Pruefstand" (qn_page_audit)
   -------------------------------------------------------------------------
   25.10.2026. Markup: Resources/Private/Overrides/QnPageAudit/Templates/
   PageSpeed/Index.html (ersetzt die Vorlage der Extension). Die Ergebnisse
   kommen als HTML aus den Partials der Extension (Klassen qnpa-teil*,
   qnpa-tacho*, qnpa-messwert*, qnpa-empfehlung*, qnpa-abschluss*) und
   werden hier eingefaerbt. Die neutrale pagespeed.css der Extension wird
   mit dieser Vorlage NICHT geladen.

   Geschwister des Echolot (90-echolot.css): gleiches Pult, gleiche Nische,
   gleiche Palette. Statt Echolot ein Instrument:
   Tacho 0-100 mit Googles Ampel. Waehrend der Messung (.is-busy an .qnpa,
   setzt pagespeed.js) pendelt die Nadel.
   Knoepfe: Garagentor (55-garagentor.css), nicht der Schraegknopf des
   Echolot - Dirk, 25.10.2026.

   Falle (geloest): Die Nadel im Ergebnis steht per SVG-Attribut
   transform="rotate(g 100 100)". transform-origin darf dort NICHT gesetzt
   sein - es wirkt auch auf das Attribut und verschiebt den Drehpunkt.
   Deshalb transform-origin nur am pendelnden Wartebild.

   BEWUSST OHNE @layer und alles unter .lq-pruefstand - wie 90-echolot.css.

   Kontraste auf der Karte (hellster Punkt #22384A): Text #EAF4FF 10,9:1,
   leise #9FC0D8 6,3:1, Schlecht #FF8A7A 5,3:1, Mittel #FFA94D 6,4:1,
   Gut #4FBE8B 5,2:1, Schrift auf Orange #141A1F 7,3:1.
   ========================================================================= */

.lq-pruefstand {
  --p-text:     var(--hell, #EAF4FF);
  --p-leise:    var(--hell-2, #9FC0D8);
  --p-orange:   var(--orange, #FF8800);
  --p-akzent:   var(--orange-hell, #FFA94D);
  --p-auf:      var(--auf-orange, #141A1F);
  --p-linie:    var(--qn-linie-fein, rgba(190, 215, 235, .18));
  --p-linie-2:  var(--qn-linie, rgba(190, 215, 235, .28));
  --p-fokus:    var(--qn-fokus, #FFD9A8);
  --p-schrift:  var(--qn-schriftfamilie, "IBM Plex Sans", system-ui, sans-serif);
  --p-titel:    var(--qn-schriftfamilie-ueberschrift, "Bebas Neue", sans-serif);
  --p-karte:    linear-gradient(160deg, #22384A 0%, #1B2B38 60%, #17242F 100%);
  --p-schlecht: #FF8A7A;
  --p-mittel:   #FFA94D;
  --p-gut:      #4FBE8B;
  --p-ohne:     #9FC0D8;
  --p-wand-rgb: 52 82 103;
  --p-feld-rgb: 20 26 31;
  --p-osd:      500 .64rem/1.2 var(--p-schrift);

  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 64rem;
  color: var(--p-text);
  font-family: var(--p-schrift);
}
.lq-pruefstand *,
.lq-pruefstand *::before,
.lq-pruefstand *::after { box-sizing: border-box; }
/* Eine Spalte, die nicht mitwaechst: ein langes Garagentor (Beschriftung
   nowrap) haette sonst den ganzen Block am Telefon breiter als den
   Bildschirm gemacht - abgeschnitten, weil body overflow-x:hidden hat. */
.lq-pruefstand { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 30rem) {
  .lq-pruefstand .gt { --gt-luft-x: 1.1em; }
  .lq-pruefstand .gt__mass,
  .lq-pruefstand .gt__tor-schild { white-space: normal; text-align: center; }
}

/* Grundgeruest begrenzt Absaetze/Listen auf Lesebreite - in den Karten nicht */
.lq-pruefstand :is(.qnpa-teil, .qnpa-abschluss) :is(p, ol, ul, li, dl) { max-width: none; }

.lq-pruefstand .qnpa-nur-vorlesen {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.lq-pruefstand .qnpa-honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Kicker mit 8-Grad-Raute (wie Echolot / qh-kapitel) */
.lq-pruefstand__kicker {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 .7rem;
  font: 500 .72rem/1.5 var(--p-schrift);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--p-leise);
}
.lq-pruefstand__kicker::before {
  content: "";
  width: .6em;
  height: .6em;
  background: var(--p-orange);
  transform: rotate(8deg);
}
.lq-pruefstand__lead {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  line-height: 1.65;
  text-wrap: pretty;
}


/* ===================================================================
   1. Pult
   =================================================================== */
.lq-pruefstand__pult {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--p-linie);
  border-left: 3px solid var(--p-orange);
  border-radius: 3px;
  background: var(--p-karte);
  box-shadow: var(--sch-blatt, 0 10px 30px -14px rgba(0, 0, 0, .66));
}
@media (min-width: 56rem) {
  .lq-pruefstand__pult { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; gap: 2rem; }
}
.lq-pruefstand__passer {
  position: absolute;
  top: .9rem; right: .9rem;
  width: 1.1rem; height: 1.1rem;
  border: 1px solid rgba(255, 169, 77, .7);
  border-radius: 50%;
  background:
    linear-gradient(rgba(255, 169, 77, .7), rgba(255, 169, 77, .7)) center / 1px 160% no-repeat,
    linear-gradient(rgba(255, 169, 77, .7), rgba(255, 169, 77, .7)) center / 160% 1px no-repeat;
  pointer-events: none;
}

.lq-pruefstand__form { align-self: center; min-width: 0; margin: 0; }
.lq-pruefstand__label {
  display: block;
  margin: 0 0 .55rem;
  font: 600 .78rem/1.3 var(--p-schrift);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lq-pruefstand__zeile { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; }

/* Feld = Nische mit Sucher-Ecken (wie Echolot / 65-formular.css) */
.lq-pruefstand__nische { position: relative; flex: 1 1 16rem; min-width: 0; }
.lq-pruefstand__nische::before,
.lq-pruefstand__nische::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: .9rem; height: .9rem;
  border: 0 solid var(--p-akzent);
  pointer-events: none;
  transition: border-color .2s ease;
}
.lq-pruefstand__nische::before { top: -.4rem; left: -.4rem; border-width: 2px 0 0 2px; }
.lq-pruefstand__nische::after  { bottom: -.4rem; right: -.4rem; border-width: 0 2px 2px 0; }
.lq-pruefstand__nische:focus-within::before,
.lq-pruefstand__nische:focus-within::after { border-color: var(--p-orange); }

.lq-pruefstand__eingabe {
  display: block;
  width: 100%;
  min-height: 3.1rem;
  margin: 0;
  padding: .8em 1em;
  font: 400 1.05rem/1.4 var(--p-schrift);
  color: #fff;
  background: linear-gradient(180deg, rgb(var(--p-feld-rgb) / .95), rgb(var(--p-feld-rgb) / .8));
  border: 6px solid;
  border-top-color: rgba(15, 20, 24, .95);
  border-left-color: rgba(22, 28, 33, .95);
  border-right-color: rgb(var(--p-wand-rgb) / .55);
  border-bottom-color: rgb(var(--p-wand-rgb) / .7);
  border-radius: 2px;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.lq-pruefstand__eingabe::placeholder { color: rgba(234, 244, 255, .5); font-style: italic; opacity: 1; }
.lq-pruefstand__eingabe:focus,
.lq-pruefstand__eingabe:focus-visible {
  outline: none;
  border-color: var(--p-orange);
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .45), 0 0 0 3px rgb(255 136 0 / .28), 0 0 22px -4px rgb(255 136 0 / .55);
}
.lq-pruefstand__eingabe:-webkit-autofill,
.lq-pruefstand__eingabe:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: inset 0 0 0 1000px rgb(var(--p-feld-rgb)) !important;
  caret-color: #fff;
}
.lq-pruefstand__eingabe[readonly] { opacity: .7; cursor: progress; }

/* Knopf "Messen" = Garagentor (Partial Knopf/Garagentor, 55-garagentor.css).
   Hier nur die Einpassung: Feld und Tor gleich hoch, das Tor waechst nicht.
   Waehrend der Messung ist es disabled -> 55-garagentor.css graut es aus.
   Flacher als das Standard-Tor, damit es neben das Feld passt. */
.lq-pruefstand__zeile .gt { flex: 0 0 auto; --gt-luft-y: 1em; --gt-luft-x: 1.9em; --gt-tiefe: 80px; }
.lq-pruefstand__nische { display: flex; flex-basis: 13rem; }
.lq-pruefstand__eingabe { flex: 1 1 auto; height: auto; }
@media (max-width: 30rem) {
  .lq-pruefstand__zeile .gt { flex: 1 1 100%; }
  .lq-pruefstand__zeile .gt .gt__buehne { width: 100%; }
}

.lq-pruefstand__hinweis { margin: .9rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--p-leise); }
.lq-pruefstand__hinweis--leise { margin-top: .35rem; font-size: .78rem; }
.lq-pruefstand__hinweis strong { color: var(--p-akzent); font-weight: 600; font-variant-numeric: tabular-nums; }
.lq-pruefstand a { color: var(--p-akzent); text-underline-offset: .2em; }
.lq-pruefstand a:hover { color: #fff; }
.lq-pruefstand a:focus-visible { outline: 3px solid var(--p-fokus); outline-offset: 2px; border-radius: 2px; }


/* ===================================================================
   2. Instrument
   =================================================================== */
.lq-pruefstand__instrument {
  position: relative;
  align-self: center;
  aspect-ratio: 5 / 3;       /* = viewBox 400 x 240 */
  overflow: hidden;
  border: 1px solid var(--p-linie);
  border-radius: 3px;
  background: radial-gradient(120% 90% at 50% 100%, #1A3446 0%, #12202B 55%, #0C151C 100%);
}
.lq-pruefstand__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.lq-pruefstand__ring { fill: none; stroke: rgb(var(--p-wand-rgb) / .9); stroke-width: 6; }
.lq-pruefstand__zone { fill: none; stroke-width: 8; }
.lq-pruefstand__zone--schlecht { stroke: var(--p-schlecht); opacity: .8; }
.lq-pruefstand__zone--mittel   { stroke: var(--p-mittel); opacity: .8; }
.lq-pruefstand__zone--gut      { stroke: var(--p-gut); opacity: .9; }
.lq-pruefstand__teilung { fill: none; stroke: #0C151C; stroke-width: 10; }
.lq-pruefstand__zahlen text {
  font: 400 15px/1 var(--p-titel);
  letter-spacing: .04em;
  fill: var(--p-leise);
  text-anchor: middle;
}
.lq-pruefstand__einheit { font: 500 9px/1 var(--p-schrift); letter-spacing: .3em; fill: rgba(234, 244, 255, .4); text-anchor: middle; }
.lq-pruefstand__zeiger { fill: var(--p-orange); }
.lq-pruefstand__nabe { fill: #3B5263; stroke: rgba(234, 244, 255, .35); stroke-width: 1; }
.lq-pruefstand__nabe-punkt { fill: var(--p-orange); }
.lq-pruefstand__boden { stroke: var(--p-akzent); stroke-width: 1.2; opacity: .6; }

/* Ruhe: Nadel bei ca. 8 Uhr; Lauf: pendelt ueber die Skala */
.lq-pruefstand__nadel { transform-box: view-box; transform-origin: 200px 176px; transform: rotate(-78deg); transition: transform .8s cubic-bezier(.34, 1.3, .5, 1); }

.lq-pruefstand__osd {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .5em;
  font: var(--p-osd);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--p-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.lq-pruefstand__osd--ol { top: .9rem; left: 1rem; }
.lq-pruefstand__osd--or { top: .9rem; right: 1rem; color: var(--p-akzent); }
.lq-pruefstand__osd--ul { bottom: .8rem; left: 1rem; color: var(--p-leise); letter-spacing: .08em; }
.lq-pruefstand__osd--ur { bottom: .8rem; right: 1rem; color: var(--p-leise); letter-spacing: .08em; }
.lq-pruefstand__punkt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--p-gut); box-shadow: 0 0 8px var(--p-gut); }
.lq-pruefstand__lauf { display: none; }

.is-busy .lq-pruefstand__punkt { background: var(--p-orange); box-shadow: 0 0 8px var(--p-orange); }
.is-busy .lq-pruefstand__bereit { display: none; }
.is-busy .lq-pruefstand__lauf { display: inline; }
.is-busy .lq-pruefstand__nadel { transform: rotate(40deg); }

/* Ergebnis im Instrument (25.10.2026, pruefstand.js): Hauptzeiger =
   Smartphone, Schleppzeiger = Desktop. Winkel kommen als Variablen
   (--lq-mobil, --lq-desktop; 0 Punkte = -90deg, 100 = +90deg) per CSSOM -
   kein style-Attribut im Markup, CSP-tauglich.
   Rueckweg: diesen Block entfernen (und die Skriptzeile in der Vorlage). */
.lq-pruefstand__instrument.ist-gemessen .lq-pruefstand__nadel { transform: rotate(var(--lq-mobil, -78deg)); }
.is-busy .lq-pruefstand__instrument.ist-gemessen .lq-pruefstand__nadel { transform: rotate(40deg); }
.lq-pruefstand__schlepp {
  transform-box: view-box; transform-origin: 200px 176px;
  transform: rotate(var(--lq-desktop, -90deg));
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.34, 1.3, .5, 1) .15s, opacity .3s ease;
}
.lq-pruefstand__schlepp-zeiger { fill: var(--p-text); opacity: .8; }
.lq-pruefstand__instrument.hat-desktop .lq-pruefstand__schlepp { opacity: 1; }
.is-busy .lq-pruefstand__schlepp { opacity: 0 !important; }
.lq-pruefstand__fertig { display: none; }
.ist-gemessen .lq-pruefstand__bereit { display: none; }
.ist-gemessen .lq-pruefstand__fertig { display: inline; color: var(--p-akzent); }
.is-busy .lq-pruefstand__fertig { display: none !important; }
.is-busy .ist-gemessen .lq-pruefstand__lauf { display: inline; }
/* Legende unten links: Strich in Zeigerfarbe + Wert */
.lq-pruefstand__osd--ul { gap: 1em; }
.lq-pruefstand__legende { display: inline-flex; align-items: center; gap: .45em; }
.lq-pruefstand__legende::before { content: ""; width: .9em; height: 3px; border-radius: 1px; background: var(--p-orange); }
.lq-pruefstand__legende--desktop::before { background: var(--p-text); opacity: .8; }
.lq-pruefstand__wert { font-weight: 600; color: var(--p-text); }
.lq-pruefstand__wert:empty { display: none; }

@media (max-width: 26rem) {
  .lq-pruefstand__osd--ur { display: none; }
}


/* ===================================================================
   3. Fehler, Ergebnisplaetze
   =================================================================== */
.lq-pruefstand__fehler {
  display: grid;
  gap: .3rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255, 138, 122, .45);
  border-left: 3px solid var(--p-schlecht);
  border-radius: 3px;
  background: rgba(229, 55, 44, .08);
  line-height: 1.5;
}
.lq-pruefstand__fehler[hidden],
.lq-pruefstand__ergebnis[hidden] { display: none; }
.lq-pruefstand__fehler-titel {
  font: 600 .72rem/1.4 var(--p-schrift);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-schlecht);
}

.lq-pruefstand__teile {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 52rem) {
  .lq-pruefstand__teile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lq-pruefstand__platz:empty { display: none; }


/* ===================================================================
   4. Ergebnis je Geraet (Partial PageSpeed/Teil der Extension)
   =================================================================== */
.lq-pruefstand .qnpa-stufe--gut      { --_s: var(--p-gut); }
.lq-pruefstand .qnpa-stufe--mittel   { --_s: var(--p-mittel); }
.lq-pruefstand .qnpa-stufe--schlecht { --_s: var(--p-schlecht); }
.lq-pruefstand .qnpa-stufe--ohne     { --_s: var(--p-ohne); }

.lq-pruefstand .qnpa-teil {
  display: grid;
  gap: .2rem;
  min-width: 0;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--p-linie);
  border-top: 3px solid var(--_s, var(--p-linie-2));
  border-radius: 3px;
  background: var(--p-karte);
  box-shadow: var(--sch-tief, 0 26px 60px -26px rgba(0, 0, 0, .78));
}
.lq-pruefstand .qnpa-teil--wait { border-top-color: var(--p-orange); }
.lq-pruefstand .qnpa-teil--error { border-top-color: var(--p-schlecht); }

.lq-pruefstand .qnpa-teil__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .3rem 1rem;
}
.lq-pruefstand .qnpa-teil__titel {
  margin: 0;
  font: 400 clamp(1.7rem, 1.4rem + 1vw, 2.2rem)/1 var(--p-titel);
  font-synthesis: none;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--p-text);
}
.lq-pruefstand .qnpa-teil__zeit {
  margin: 0;
  font: var(--p-osd);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--p-leise);
}
.lq-pruefstand .qnpa-teil__warte { margin: .2rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--p-leise); text-align: center; }

/* Tacho mit Zahl */
.lq-pruefstand .qnpa-teil__anzeige { position: relative; width: min(100%, 17rem); margin: .9rem auto .2rem; text-align: center; }
.lq-pruefstand .qnpa-tacho { display: block; width: 100%; height: auto; overflow: visible; }
.lq-pruefstand .qnpa-tacho__spur { fill: none; stroke: rgba(10, 16, 21, .55); stroke-width: 14; }
.lq-pruefstand .qnpa-tacho__zone { fill: none; stroke-width: 3; opacity: .85; }
.lq-pruefstand .qnpa-tacho__zone--schlecht { stroke: var(--p-schlecht); }
.lq-pruefstand .qnpa-tacho__zone--mittel   { stroke: var(--p-mittel); }
.lq-pruefstand .qnpa-tacho__zone--gut      { stroke: var(--p-gut); }
.lq-pruefstand .qnpa-tacho__wert { fill: none; stroke: var(--_s, var(--p-orange)); stroke-width: 14; }
.lq-pruefstand .qnpa-tacho__striche path { stroke: rgba(234, 244, 255, .3); stroke-width: 1.4; }
.lq-pruefstand .qnpa-tacho__zeiger { fill: var(--p-text); }
.lq-pruefstand .qnpa-tacho__nabe { fill: #3B5263; stroke: rgba(234, 244, 255, .4); stroke-width: 1; }
.lq-pruefstand .qnpa-teil--wait .qnpa-tacho__zeiger { fill: var(--p-orange); }

.lq-pruefstand .qnpa-teil__zahl {
  display: grid;
  justify-items: center;
  margin: .5rem 0 0;          /* unter dem Tacho - nicht ueber Nadel und Nabe */
  line-height: 1;
}
.lq-pruefstand .qnpa-teil__wert {
  font: 400 clamp(3.4rem, 2.8rem + 2vw, 4.4rem)/.85 var(--p-titel);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: var(--_s, var(--p-text));
}
.lq-pruefstand .qnpa-teil__von { margin-top: .3rem; font-size: .74rem; letter-spacing: .08em; color: var(--p-leise); }
.lq-pruefstand .qnpa-teil__stufe {
  margin-top: .55rem;
  padding: .3rem .6rem;
  border: 1px dashed var(--_s, currentColor);
  border-radius: 3px;
  font: 600 .7rem/1.2 var(--p-schrift);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--_s, var(--p-text));
  transform: rotate(-2deg);
}
.lq-pruefstand .qnpa-teil__was {
  margin: .7rem 0 0;
  font: var(--p-osd);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--p-leise);
}

/* Drei Nebenwerte */
.lq-pruefstand .qnpa-teil__neben {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.lq-pruefstand .qnpa-wert {
  display: grid;
  gap: .15rem;
  margin: 0;
  padding: .65rem .7rem .6rem;
  border-top: 3px solid var(--_s);
  background: rgba(10, 16, 21, .32);
}
.lq-pruefstand .qnpa-wert::before { content: none; }
.lq-pruefstand .qnpa-wert__zahl { order: -1; font: 400 1.9rem/1 var(--p-titel); font-variant-numeric: tabular-nums; color: var(--_s); }
.lq-pruefstand .qnpa-wert__label {
  font: 600 .62rem/1.3 var(--p-schrift);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--p-leise);
  hyphens: auto;              /* "Barriere-freiheit" statt "Barrierefre|iheit" */
  overflow-wrap: break-word;
}

.lq-pruefstand .qnpa-teil__unter {
  margin: 1.5rem 0 .4rem;
  font: 600 .72rem/1.4 var(--p-schrift);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-akzent);
}
.lq-pruefstand .qnpa-teil__hinweis { margin: .5rem 0 0; font-size: .84rem; line-height: 1.55; color: var(--p-leise); overflow-wrap: anywhere; }
.lq-pruefstand .qnpa-teil__hinweis strong { color: var(--p-text); font-weight: 600; }
.lq-pruefstand .qnpa-teil__urteil { margin: 0 0 .4rem; font-size: .92rem; line-height: 1.5; }
.lq-pruefstand .qnpa-teil__urteil strong { color: var(--_s); font-weight: 600; }
.lq-pruefstand .qnpa-teil__bereich { display: block; font-size: .78rem; color: var(--p-leise); }

/* Messwerte: Zeilen mit Ampelpunkt */
.lq-pruefstand .qnpa-messwerte { display: grid; margin: 0; }
.lq-pruefstand .qnpa-messwert {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .4rem 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--p-linie);
}
.lq-pruefstand .qnpa-messwert:last-child { border-bottom: 0; }
.lq-pruefstand .qnpa-messwert dt { margin: 0; min-width: 0; font-size: .86rem; color: var(--p-leise); }
.lq-pruefstand .qnpa-messwert dt abbr {
  display: inline-block;
  min-width: 2.8em;
  font: 600 .74rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--p-text);
  text-decoration: none;
  cursor: help;
}
.lq-pruefstand .qnpa-messwert dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--p-text);
}
.lq-pruefstand .qnpa-ampel {
  /* Stufe kommt von der ZEILE (.qnpa-messwert), nicht von der Karte -
     die Karte traegt die Stufe des Gesamtwerts. */
  display: inline-block;
  width: .6rem; height: .6rem;
  margin-right: .5rem;
  background: var(--_s);
  transform: rotate(8deg);
}
.lq-pruefstand .qnpa-messwert.qnpa-stufe--mittel .qnpa-ampel { width: .52rem; height: .52rem; margin-right: .58rem; transform: rotate(45deg); }
.lq-pruefstand .qnpa-messwert.qnpa-stufe--gut .qnpa-ampel { border-radius: 50%; }
/* Form traegt die Stufe mit (nicht nur die Farbe): Kreis = gut,
   Raute = mittel, Dreieck = schlecht. */
.lq-pruefstand .qnpa-messwert.qnpa-stufe--schlecht .qnpa-ampel {
  width: .7rem;
  background: none;
  border-left: .35rem solid transparent;
  border-right: .35rem solid transparent;
  border-bottom: .6rem solid var(--_s);
  transform: none;
}

/* Empfehlungen */
.lq-pruefstand .qnpa-empfehlungen { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: lqp; }
.lq-pruefstand .qnpa-empfehlung {
  position: relative;
  display: grid;
  gap: .15rem;
  margin: 0;
  padding: .6rem .8rem .6rem 2.6rem;
  border-left: 3px solid var(--_s);
  background: rgba(10, 16, 21, .3);
  counter-increment: lqp;
}
.lq-pruefstand .qnpa-empfehlung::before {
  content: counter(lqp, decimal-leading-zero);
  position: absolute;
  left: .75rem;
  top: .55rem;
  font: 400 1.1rem/1 var(--p-titel);
  color: var(--p-akzent);
}
.lq-pruefstand .qnpa-empfehlung__titel { font-size: .9rem; font-weight: 600; line-height: 1.4; }
.lq-pruefstand .qnpa-empfehlung__wert { font-size: .78rem; color: var(--p-leise); overflow-wrap: anywhere; }

/* Fehler im Teil */
.lq-pruefstand .qnpa-teil__fehler { margin-top: .9rem; padding: .9rem 1rem; border-left: 3px solid var(--p-schlecht); background: rgba(229, 55, 44, .08); }
.lq-pruefstand .qnpa-teil__fehler p { margin: 0; line-height: 1.5; }
.lq-pruefstand .qnpa-teil__fehler-titel {
  margin-bottom: .3rem !important;
  font: 600 .72rem/1.4 var(--p-schrift);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-schlecht);
}


/* ===================================================================
   5. Abschluss (Partial PageSpeed/Abschluss)
   =================================================================== */
.lq-pruefstand .qnpa-abschluss {
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--p-linie);
  border-left: 3px solid var(--p-orange);
  border-radius: 3px;
  background: rgba(10, 16, 21, .32);
}
.lq-pruefstand .qnpa-abschluss__url { margin: 0 0 .8rem; font-size: .86rem; color: var(--p-leise); overflow-wrap: anywhere; }
.lq-pruefstand .qnpa-abschluss__url strong { color: var(--p-text); font-weight: 600; }
.lq-pruefstand .qnpa-abschluss__einordnung { display: grid; gap: .45rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.lq-pruefstand .qnpa-abschluss__einordnung li {
  position: relative;
  margin: 0;
  padding-left: 1.3rem;
  font-size: .9rem;
  line-height: 1.55;
}
.lq-pruefstand .qnpa-abschluss__einordnung li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: .45rem; height: .45rem;
  background: var(--p-orange);
  transform: rotate(8deg);
}
.lq-pruefstand .qnpa-abschluss__wege { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.lq-pruefstand .qnpa-abschluss__wege li { margin: 0; }
.lq-pruefstand .qnpa-abschluss__wege li::before { content: none; }
/* Wege als Garagentore (Override Abschluss.html, 25.10.2026) */
.lq-pruefstand .lq-pruefstand__tore { gap: .7rem .8rem; align-items: stretch; }
/* Garagentore im Abschluss kompakt - wie Leuchtfeuer und Fadenzaehler
   (25.10.2026). Der "Messen"-Knopf oben im Pult bleibt gross.
   Rueckweg: diesen Block entfernen. */
.lq-pruefstand .qnpa-abschluss .gt {
  --gt-schrift: .78rem;
  --gt-luft-y: .55em;
  --gt-luft-x: 1.35em;
  --gt-wand: 6px;
  --gt-tiefe: 46px;
}
.lq-pruefstand .lq-pruefstand__tore > li { display: flex; }
@media (max-width: 30rem) {
  .lq-pruefstand .lq-pruefstand__tore > li { flex: 1 1 100%; }
  .lq-pruefstand .lq-pruefstand__tore .gt { width: 100%; }
}

/* Neutrale Links (falls der Abschluss der Extension greift) */
.lq-pruefstand .qnpa-weg {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .55rem 1rem;
  border: 1px solid var(--p-linie-2);
  border-radius: 2px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--p-text);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.lq-pruefstand .qnpa-weg:hover { border-color: var(--p-akzent); color: var(--p-akzent); }
.lq-pruefstand .qnpa-weg--haupt { border-color: var(--p-orange); background: var(--p-orange); color: var(--p-auf); }
.lq-pruefstand .qnpa-weg--haupt:hover { background: var(--p-akzent); color: var(--p-auf); }


/* ===================================================================
   6. Erklaerung
   =================================================================== */
.lq-pruefstand__info {
  border: 1px solid var(--p-linie);
  border-radius: 3px;
  background: rgba(10, 16, 21, .25);
}
.lq-pruefstand__info > summary {
  position: relative;
  padding: .95rem 3rem .95rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.lq-pruefstand__info > summary::-webkit-details-marker { display: none; }
.lq-pruefstand__info > summary::after {
  content: "";
  position: absolute;
  right: 1.2rem; top: 50%;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--p-akzent);
  border-bottom: 2px solid var(--p-akzent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.lq-pruefstand__info[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.lq-pruefstand__info > summary:focus-visible { outline: 3px solid var(--p-fokus); outline-offset: -3px; }
.lq-pruefstand__info-text { padding: 0 1.2rem 1.1rem; }
.lq-pruefstand__info-text p { margin: 0 0 .8rem; max-width: 70ch; line-height: 1.6; color: var(--p-text); }
.lq-pruefstand__info-text p:last-child { margin-bottom: 0; color: var(--p-leise); }


/* ===================================================================
   7. Bewegung - nur mit Bewegungswunsch
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes lq-pst-pendel {
    0%   { transform: rotate(-80deg); }
    55%  { transform: rotate(72deg); }
    70%  { transform: rotate(58deg); }
    100% { transform: rotate(-80deg); }
  }
  @keyframes lq-pst-punkt { 50% { opacity: .25; } }

  .is-busy .lq-pruefstand__nadel { animation: lq-pst-pendel 2.4s cubic-bezier(.45, .05, .35, 1) infinite; }
  .is-busy .lq-pruefstand__punkt { animation: lq-pst-punkt .8s steps(1) infinite; }

  /* Wartebild: Nadel pendelt. transform-origin NUR hier (siehe Kopf). */
  .lq-pruefstand .qnpa-tacho--sucht .qnpa-tacho__nadel {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: lq-pst-pendel 2.4s cubic-bezier(.45, .05, .35, 1) infinite;
  }
  .lq-pruefstand__platz:nth-child(2) .qnpa-tacho--sucht .qnpa-tacho__nadel { animation-delay: -.9s; }

  /* Ergebnis: Karte faehrt ein */
  @keyframes lq-pst-ein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .lq-pruefstand .qnpa-teil--done,
  .lq-pruefstand .qnpa-teil--error { animation: lq-pst-ein .45s ease-out both; }
}


/* ===================================================================
   8. Bericht als PDF / per E-Mail (nur Kundenkonto), 25.10.2026
   Block .qnpa-bericht im Abschluss-Override, Tore in Huellen mit
   data-qnpa-action. Meldungen in [data-qnpa-report-status].
   =================================================================== */
.lq-pruefstand .qnpa-bericht {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem 1.2rem;
  margin: 0 0 1.4rem;
  padding: 0 0 1.4rem;
  border-bottom: 1px solid var(--p-linie);
}
.lq-pruefstand .lq-pruefstand__tor { display: flex; }
.lq-pruefstand .qnpa-bericht__hinweis,
.lq-pruefstand .qnpa-bericht__status { flex: 1 1 100%; margin: 0; font-size: .84rem; line-height: 1.5; color: var(--p-leise); }
.lq-pruefstand .qnpa-bericht__hinweis strong { color: var(--p-text); font-weight: 600; overflow-wrap: anywhere; }
.lq-pruefstand .qnpa-bericht__status { color: var(--p-text); }
.lq-pruefstand .qnpa-bericht__status:empty { display: none; }
.lq-pruefstand .qnpa-bericht__status.is-error { padding-left: .8rem; border-left: 3px solid var(--p-schlecht); color: var(--p-schlecht); }
.lq-pruefstand .qnpa-abschluss > .qnpa-bericht__hinweis { margin: 0 0 1.2rem; }
.lq-pruefstand .gt.is-loading { cursor: progress; }
@media (max-width: 30rem) {
  .lq-pruefstand .lq-pruefstand__tor { flex: 1 1 100%; }
  .lq-pruefstand .lq-pruefstand__tor .gt { width: 100%; }
}