/* =========================================================================
   QUADRONET Layout - Favicon-Check & -Generator "Fadenzaehler" (qn_favicon_check)
   -------------------------------------------------------------------------
   25.10.2026. Markup: Resources/Private/Overrides/QnFaviconCheck/
   (Templates Check/Index.html, Generator/Index.html, Partials Check/Bericht.html,
   Fadenzaehler/Instrument.html). Die neutrale favicon-check.css der Extension
   wird mit diesen Vorlagen NICHT geladen - auch die Vorschauen (Partial
   Check/Vorschau der Extension) werden hier gestaltet.

   Geschwister von Echolot (90), Pruefstand (92) und Leuchtfeuer (93):
   gleiches Pult, gleiche Nische, gleiche Palette, Knoepfe als Garagentor
   (55-garagentor.css). Instrument: der Fadenzaehler - Lupe auf einer
   Messplatte mit 16er-Skala, darunter das Favicon in 16 x 16 Pixeln
   (fadenzaehler.js), seit 26.10.2026 wahlweise das Original in voller
   Aufloesung (.zeigt-original). .is-busy (setzt favicon-check.js an .qnfc) = die
   Zeile laeuft Pixelreihe fuer Pixelreihe durch.

   BEWUSST OHNE @layer und alles unter .lq-fadenzaehler - wie 90/92/93.

   Kontraste auf der Karte (hellster Punkt #22384A): Text #EAF4FF 10,9:1,
   leise #9FC0D8 6,3:1, Fehler #FF8A7A 5,3:1, verbesserbar #FFA94D 6,4:1,
   Hinweis #79B0C0 5,1:1, in Ordnung #4FBE8B 5,2:1, Schrift auf Orange
   #141A1F 7,3:1. Vorschauen sind Nachbildungen echter Oberflaechen (Tab,
   Google, iPhone, Android) mit deren Farben: Google-Titel #1A0DAB auf Weiss
   10,6:1, Adresse #4D5156 8,1:1; App-Namen Weiss mit Schatten auf #2B3A75
   bzw. #1D5470 (Mitte der Verlaeufe) ueber 7:1.
   ========================================================================= */

.lq-fadenzaehler {
  --f-text:     var(--hell, #EAF4FF);
  --f-leise:    var(--hell-2, #9FC0D8);
  --f-orange:   var(--orange, #FF8800);
  --f-akzent:   var(--orange-hell, #FFA94D);
  --f-auf:      var(--auf-orange, #141A1F);
  --f-linie:    var(--qn-linie-fein, rgba(190, 215, 235, .18));
  --f-linie-2:  var(--qn-linie, rgba(190, 215, 235, .28));
  --f-fokus:    var(--qn-fokus, #FFD9A8);
  --f-schrift:  var(--qn-schriftfamilie, "IBM Plex Sans", system-ui, sans-serif);
  --f-titel:    var(--qn-schriftfamilie-ueberschrift, "Bebas Neue", sans-serif);
  --f-mono:     ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-karte:    linear-gradient(160deg, #22384A 0%, #1B2B38 60%, #17242F 100%);
  --f-mulde:    rgba(10, 16, 21, .32);
  --f-error:    #FF8A7A;
  --f-warn:     #FFA94D;
  --f-info:     #79B0C0;
  --f-ok:       #4FBE8B;
  --f-wand-rgb: 52 82 103;
  --f-feld-rgb: 20 26 31;
  --f-osd:      500 .64rem/1.25 var(--f-schrift);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 64rem;
  color: var(--f-text);
  font-family: var(--f-schrift);
}
.lq-fadenzaehler *,
.lq-fadenzaehler *::before,
.lq-fadenzaehler *::after { box-sizing: border-box; }
.lq-fadenzaehler [hidden] { display: none !important; }
@media (max-width: 30rem) {
  .lq-fadenzaehler .gt { --gt-luft-x: 1.1em; }
  .lq-fadenzaehler .gt__mass,
  .lq-fadenzaehler .gt__tor-schild { white-space: normal; text-align: center; }
}

/* Grundgeruest begrenzt Absaetze/Listen auf Lesebreite - in den Karten nicht */
.lq-fadenzaehler :is(.qnfc-bericht, .lq-fadenzaehler__paket, .lq-fadenzaehler__schritt) :is(p, ol, ul, li) { max-width: none; }

.lq-fadenzaehler .qnfc-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-fadenzaehler .qnfc-honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.lq-fadenzaehler a { color: var(--f-akzent); text-underline-offset: .2em; }
.lq-fadenzaehler a:hover { color: #fff; }
.lq-fadenzaehler a.gt,
.lq-fadenzaehler a.gt:hover { color: inherit; }
.lq-fadenzaehler a:focus-visible,
.lq-fadenzaehler summary:focus-visible,
.lq-fadenzaehler [tabindex]:focus-visible { outline: 3px solid var(--f-fokus); outline-offset: 2px; border-radius: 2px; }
.lq-fadenzaehler .qnfc-bericht__titel:focus { outline: none; }
.lq-fadenzaehler .qnfc-bericht__titel:focus-visible { outline: 3px solid var(--f-fokus); outline-offset: 4px; }
.lq-fadenzaehler code { font: .92em/1.4 var(--f-mono); color: var(--f-text); background: rgb(var(--f-feld-rgb) / .7); padding: .05em .35em; border-radius: 2px; }

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


/* ===================================================================
   1. Pult
   =================================================================== */
.lq-fadenzaehler__pult {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--f-linie);
  border-left: 3px solid var(--f-orange);
  border-radius: 3px;
  background: var(--f-karte);
  box-shadow: var(--sch-blatt, 0 10px 30px -14px rgba(0, 0, 0, .66));
}
@media (min-width: 56rem) {
  .lq-fadenzaehler__pult { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; gap: 2rem; }
}
.lq-fadenzaehler__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-fadenzaehler__form { align-self: center; min-width: 0; margin: 0; }
.lq-fadenzaehler__label {
  display: block; margin: 0 0 .55rem; padding: 0;
  font: 600 .78rem/1.3 var(--f-schrift);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--f-text);
}

.lq-fadenzaehler__zeile { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; }
.lq-fadenzaehler__nische { position: relative; display: flex; flex: 1 1 13rem; min-width: 0; }
.lq-fadenzaehler__nische::before,
.lq-fadenzaehler__nische::after {
  content: ""; position: absolute; z-index: 1;
  width: .9rem; height: .9rem;
  border: 0 solid var(--f-akzent);
  pointer-events: none; transition: border-color .2s ease;
}
.lq-fadenzaehler__nische::before { top: -.4rem; left: -.4rem; border-width: 2px 0 0 2px; }
.lq-fadenzaehler__nische::after  { bottom: -.4rem; right: -.4rem; border-width: 0 2px 2px 0; }
.lq-fadenzaehler__nische:focus-within::before,
.lq-fadenzaehler__nische:focus-within::after { border-color: var(--f-orange); }
.lq-fadenzaehler__eingabe {
  display: block; flex: 1 1 auto; width: 100%; min-height: 3.1rem; height: auto; margin: 0;
  padding: .8em 1em;
  font: 400 1.05rem/1.4 var(--f-schrift); color: #fff;
  background: linear-gradient(180deg, rgb(var(--f-feld-rgb) / .95), rgb(var(--f-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(--f-wand-rgb) / .55);
  border-bottom-color: rgb(var(--f-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-fadenzaehler__eingabe--mono { font-family: var(--f-mono); font-size: .98rem; }
.lq-fadenzaehler__eingabe::placeholder { color: rgba(234, 244, 255, .5); font-style: italic; opacity: 1; }
.lq-fadenzaehler__eingabe:focus,
.lq-fadenzaehler__eingabe:focus-visible {
  outline: none; border-color: var(--f-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-fadenzaehler__eingabe:-webkit-autofill,
.lq-fadenzaehler__eingabe:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: inset 0 0 0 1000px rgb(var(--f-feld-rgb)) !important;
  caret-color: #fff;
}
.lq-fadenzaehler__eingabe[readonly]:not(.lq-fadenzaehler__eingabe--mono) { opacity: .7; cursor: progress; }

/* Auswahlliste in der Nische: eigener Pfeil */
.lq-fadenzaehler__nische--auswahl select.lq-fadenzaehler__eingabe {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.6em; cursor: pointer;
  font-size: .98rem;
}
.lq-fadenzaehler__nische--auswahl select option { color: #141A1F; background: #fff; }
.lq-fadenzaehler__nische--auswahl select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--f-akzent) 50%),
    linear-gradient(-45deg, transparent 50%, var(--f-akzent) 50%),
    linear-gradient(180deg, rgb(var(--f-feld-rgb) / .95), rgb(var(--f-feld-rgb) / .8));
  background-size: .42em .42em, .42em .42em, 100% 100%;
  background-position: calc(100% - 1.25em) 50%, calc(100% - .83em) 50%, 0 0;
  background-repeat: no-repeat;
}

/* Knopf "Pruefen" = Garagentor, wie bei Pruefstand und Leuchtfeuer eingepasst */
.lq-fadenzaehler__zeile .gt { flex: 0 0 auto; --gt-luft-y: 1em; --gt-luft-x: 1.9em; --gt-tiefe: 80px; }
@media (max-width: 30rem) {
  .lq-fadenzaehler__zeile .gt { flex: 1 1 100%; }
  .lq-fadenzaehler__zeile .gt .gt__buehne { width: 100%; }
}
.lq-fadenzaehler .gt[aria-busy="true"] { cursor: progress; }

.lq-fadenzaehler__hinweis { margin: .9rem 0 0; font-size: .84rem; line-height: 1.55; color: var(--f-leise); }
.lq-fadenzaehler__hinweis--leise { margin-top: .35rem; font-size: .78rem; }
.lq-fadenzaehler__hinweis strong { color: var(--f-akzent); font-weight: 600; font-variant-numeric: tabular-nums; }


/* ===================================================================
   2. Instrument: Fadenzaehler auf dem Leuchttisch
   -------------------------------------------------------------------
   Platte = 80 % der Hoehe, steht bei 62 % der Breite. Links davon die
   Seite mit Status, vier Stationen und den 1:1-Feldern.
   =================================================================== */
.lq-fz {
  position: relative;
  align-self: center;
  aspect-ratio: 5 / 3;
  min-height: 12rem;
  overflow: hidden;
  border: 1px solid var(--f-linie);
  border-radius: 3px;
  background:
    radial-gradient(ellipse 40% 55% at 62% 50%, rgba(255, 217, 168, .16), transparent 70%),
    linear-gradient(180deg, #0B1218 0%, #12202B 70%, #0F1C26 100%);
  color: var(--f-text);
}
/* Druckraster unter der Lupe (Rasterpunkte, 15 Grad gedreht) */
.lq-fz__raster {
  position: absolute; inset: -30%;
  background: radial-gradient(circle, rgba(159, 192, 216, .26) 0 1.1px, transparent 1.7px) 0 0 / 9px 9px;
  transform: rotate(15deg);
  -webkit-mask-image: radial-gradient(ellipse 45% 50% at 50% 50%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 45% 50% at 50% 50%, #000 20%, transparent 75%);
  opacity: .8;
}
.lq-fz__licht {
  position: absolute; left: 62%; top: 50%;
  width: 70%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 169, 77, .12), transparent 62%);
  pointer-events: none;
}

/* Messplatte */
.lq-fz__lupe {
  position: absolute; top: 10%; left: 62%;
  height: 80%; aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .1), transparent 40%),
    linear-gradient(145deg, #3B5263 0%, #22384A 45%, #17242F 100%);
  box-shadow:
    0 22px 34px -14px rgba(0, 0, 0, .85),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -2px 0 rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .35);
}
/* 16er-Skala oben und links, jeder vierte Strich lang */
.lq-fz__skala { position: absolute; opacity: .75; }
.lq-fz__skala--x {
  top: 2.2%; left: 15%; right: 15%; height: 4.5%;
  background:
    repeating-linear-gradient(90deg, rgba(234, 244, 255, .7) 0 1px, transparent 1px 25%) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(234, 244, 255, .5) 0 1px, transparent 1px 6.25%) 0 0 / 100% 55% no-repeat;
}
.lq-fz__skala--y {
  left: 2.2%; top: 15%; bottom: 15%; width: 4.5%;
  background:
    repeating-linear-gradient(180deg, rgba(234, 244, 255, .7) 0 1px, transparent 1px 25%) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(234, 244, 255, .5) 0 1px, transparent 1px 6.25%) 0 0 / 55% 100% no-repeat;
}
.lq-fz__niete {
  position: absolute; width: 5%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C9D6E0, #5C7486 55%, #22384A 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.lq-fz__niete--1 { top: 4%; right: 4%; }
.lq-fz__niete--2 { bottom: 4%; right: 4%; }
.lq-fz__niete--3 { bottom: 4%; left: 4%; }
.lq-fz__niete--4 { top: 4%; left: 4%; display: none; }
.lq-fz__gravur {
  position: absolute; left: 0; right: 0; bottom: 1.6%;
  font: 600 .52rem/1 var(--f-schrift); letter-spacing: .2em; text-transform: uppercase; text-align: center;
  color: rgba(234, 244, 255, .62);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}

/* Linse: Fassung, Glas, Leuchttisch darunter */
.lq-fz__linse {
  position: absolute; inset: 9%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, #F4F7F9 0 50%, #D8E1E8 70%, #9FB3C2 100%);
  box-shadow:
    0 0 0 3px #0F1820,
    0 0 0 5px var(--_ring, #5C7486),
    0 0 0 6px #0F1820,
    0 6px 16px rgba(0, 0, 0, .6),
    inset 0 0 24px rgba(0, 0, 0, .42);
  transition: box-shadow .4s ease;
}
.lq-fz__feld {
  position: absolute; inset: 15%;
  overflow: hidden;
  /* Transparenz wie in der Bildbearbeitung */
  background: conic-gradient(#E3E9EE 25%, #fff 0 50%, #E3E9EE 0 75%, #fff 0) 0 0 / 12.5% 12.5%;
  box-shadow: 0 0 0 1px rgba(15, 24, 32, .55);
}
.lq-fz__motiv,
.lq-fz__pixel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lq-fz__motiv-grund { fill: #1B2B38; }
.lq-fz__motiv-q { fill: var(--f-orange); }
.lq-fz__pixel { image-rendering: pixelated; image-rendering: crisp-edges; opacity: 0; }
.lq-fz.hat-pixel .lq-fz__pixel { opacity: 1; }
.lq-fz.hat-pixel .lq-fz__motiv,
.lq-fz.is-leer .lq-fz__motiv { opacity: 0; }
/* Original in voller Aufloesung (26.10.2026): groesste gefundene Fassung,
   Klick auf die Linse schaltet zum 16-px-Raster und zurueck */
.lq-fz__original { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.lq-fz__original.ist-klein { image-rendering: pixelated; image-rendering: crisp-edges; }
.lq-fz.zeigt-original .lq-fz__original { opacity: 1; }
.lq-fz.zeigt-original :is(.lq-fz__pixel, .lq-fz__gitter) { opacity: 0; }
.is-busy .lq-fz.zeigt-original .lq-fz__original { opacity: 0; }
.is-busy .lq-fz.zeigt-original :is(.lq-fz__pixel, .lq-fz__gitter) { opacity: 1; }
.lq-fz.hat-original .lq-fz__linse { cursor: zoom-in; }
.lq-fz.hat-original.zeigt-original .lq-fz__linse { cursor: zoom-out; }
.lq-fz__gravur-original { display: none; }
.lq-fz.zeigt-original .lq-fz__gravur-raster { display: none; }
.lq-fz.zeigt-original .lq-fz__gravur-original { display: inline; }
.lq-fz__gitter {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 24, 32, .38) 1px, transparent 1px) 0 0 / 6.25% 100%,
    linear-gradient(180deg, rgba(15, 24, 32, .38) 1px, transparent 1px) 0 0 / 100% 6.25%;
  pointer-events: none;
}
.lq-fz__scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 6.25%;
  background: rgba(255, 136, 0, .5);
  box-shadow: 0 0 10px 2px rgba(255, 136, 0, .55);
  opacity: 0;
}
.is-busy .lq-fz__scan { opacity: 1; }
.lq-fz__stempel {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%; rotate: -8deg;
  padding: .25em .55em .15em;
  border: 2px dashed #C22F22;
  font: 400 clamp(.95rem, .7rem + 1vw, 1.35rem)/1 var(--f-titel);
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
  color: #B3261E;
  background: rgba(255, 255, 255, .88);
  opacity: 0;
}
.lq-fz.is-leer .lq-fz__stempel { opacity: 1; }
.lq-fz__glanz {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
}
/* Note faerbt die Fassung */
.lq-fz.is-befund[data-note="gut"]      { --_ring: var(--f-ok); }
.lq-fz.is-befund[data-note="mittel"]   { --_ring: var(--f-warn); }
.lq-fz.is-befund[data-note="schlecht"] { --_ring: var(--f-error); }
.is-busy .lq-fz.lq-fz { --_ring: var(--f-orange); }

/* Seite links: Status, Stationen, 1:1 */
.lq-fz__seite {
  position: absolute; left: 1rem; top: .9rem; bottom: .85rem;
  width: calc(38% - 1.8rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: .5rem;
  font: var(--f-osd);
  letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.lq-fz__osd { display: flex; align-items: center; gap: .5em; }
.lq-fz__osd--status { align-items: flex-start; }
.lq-fz__punkt { flex: 0 0 auto; width: .5rem; height: .5rem; margin-top: .2em; border-radius: 50%; background: var(--f-ok); box-shadow: 0 0 8px var(--f-ok); }
.lq-fz__lauf,
.lq-fz__fertig { display: none; }
.lq-fz.is-befund .lq-fz__bereit,
.lq-fz.hat-pixel .lq-fz__bereit { display: none; }
.lq-fz.is-befund .lq-fz__fertig,
.lq-fz.hat-pixel .lq-fz__fertig { display: inline; color: var(--f-akzent); }
.is-busy .lq-fz__bereit,
.is-busy .lq-fz__fertig { display: none !important; }
.is-busy .lq-fz__lauf { display: inline; }
.is-busy .lq-fz__punkt { background: var(--f-orange); box-shadow: 0 0 8px var(--f-orange); }

.lq-fz__stationen { display: grid; gap: .35rem; color: var(--f-leise); letter-spacing: .1em; }
.lq-fz__station { display: flex; align-items: center; gap: .55em; }
.lq-fz__station::before {
  content: ""; flex: 0 0 auto; width: .5rem; height: .5rem;
  border: 1px solid rgba(159, 192, 216, .55);
  transform: rotate(8deg);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.lq-fz__station[data-status] { color: var(--f-text); }
.lq-fz__station[data-status="ok"]::before    { background: var(--f-ok);    border-color: var(--f-ok);    box-shadow: 0 0 7px var(--f-ok); }
.lq-fz__station[data-status="info"]::before  { background: var(--f-info);  border-color: var(--f-info);  box-shadow: 0 0 7px var(--f-info); }
.lq-fz__station[data-status="warn"]::before  { background: var(--f-warn);  border-color: var(--f-warn);  box-shadow: 0 0 7px var(--f-warn); }
.lq-fz__station[data-status="error"]::before { background: var(--f-error); border-color: var(--f-error); box-shadow: 0 0 7px var(--f-error); }

.lq-fz__osd--echt { color: var(--f-leise); gap: .45rem; }
.lq-fz__echt {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.lq-fz__echt--hell { background: #fff; }
.lq-fz__echt--dunkel { background: #35363A; }
.lq-fz__echt canvas { display: block; width: 16px; height: 16px; opacity: 0; }
.lq-fz.hat-pixel .lq-fz__echt canvas { opacity: 1; }
.lq-fz:not(.hat-pixel) .lq-fz__echt::before {
  content: ""; width: 16px; height: 16px; grid-area: 1 / 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%231B2B38'/%3E%3Cpath fill='%23FF8800' d='M5 1h6v1H5zM4 2h8v1H4zM3 3h3v1H3zM10 3h3v1h-3zM2 4h3v1H2zM11 4h3v1h-3zM2 5h2v5H2zM12 5h2v5h-2zM8 9h2v1H8zM2 10h3v1H2zM9 10h4v1H9zM3 11h3v1H3zM10 11h3v1h-3zM4 12h9v1H4zM5 13h6v1H5zM12 13h3v1h-3zM13 14h2v1h-2z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.lq-fz:not(.hat-pixel) .lq-fz__echt canvas { grid-area: 1 / 1; }
.lq-fz.is-leer .lq-fz__echt::before { background: none; border: 1px dashed #8B96A1; }

/* Schmale Instrumente: Stationen weg, Seite bekommt Luft */
@container lqfz (max-width: 24rem) {
  .lq-fz__stationen { display: none; }
}
.lq-fz { container: lqfz / inline-size; }


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


/* ===================================================================
   4. Bericht (Partial Check/Bericht aus dem Theme)
   =================================================================== */
.lq-fadenzaehler .qnfc-status--error { --_s: var(--f-error); }
.lq-fadenzaehler .qnfc-status--warn  { --_s: var(--f-warn); }
.lq-fadenzaehler .qnfc-status--info  { --_s: var(--f-info); }
.lq-fadenzaehler .qnfc-status--ok    { --_s: var(--f-ok); }
.lq-fadenzaehler [data-note="gut"]      { --_n: var(--f-ok); }
.lq-fadenzaehler [data-note="mittel"]   { --_n: var(--f-warn); }
.lq-fadenzaehler [data-note="schlecht"] { --_n: var(--f-error); }

.lq-fadenzaehler .qnfc-bericht,
.lq-fadenzaehler__paket { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 2.6vw, 1.6rem); min-width: 0; }

.lq-fadenzaehler .qnfc-bericht__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .8rem 1.4rem;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--f-linie);
  border-top: 3px solid var(--_n, var(--f-orange));
  border-radius: 3px;
  background: var(--f-karte);
  box-shadow: var(--sch-tief, 0 26px 60px -26px rgba(0, 0, 0, .78));
}
.lq-fadenzaehler .qnfc-bericht__name { min-width: 0; }
.lq-fadenzaehler .qnfc-bericht__titel {
  margin: 0;
  font: 400 clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem)/1 var(--f-titel);
  font-synthesis: none; letter-spacing: .02em; text-transform: uppercase;
  color: var(--f-text);
  overflow-wrap: anywhere;
}
.lq-fadenzaehler .qnfc-bericht__umleitung { margin: .5rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--f-leise); overflow-wrap: anywhere; }
.lq-fadenzaehler .qnfc-bericht__umleitung .qnfc-url { color: var(--f-text); }
/* Urteil als Stempel */
.lq-fadenzaehler .qnfc-bericht__urteil {
  margin: .2rem 0 0; padding: .35rem .7rem .25rem;
  border: 2px dashed var(--_n, var(--f-akzent)); border-radius: 3px;
  font: 400 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1 var(--f-titel);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--_n, var(--f-akzent));
  transform: rotate(-3deg);
  white-space: nowrap;
}
.lq-fadenzaehler .qnfc-zaehler {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 4px;
  margin: .3rem 0 0; padding: 0; list-style: none;
}
.lq-fadenzaehler .qnfc-zaehler__eintrag {
  display: grid; gap: .1rem; margin: 0;
  padding: .7rem .8rem .65rem;
  border-top: 3px solid var(--_s);
  background: var(--f-mulde);
}
.lq-fadenzaehler .qnfc-zaehler__eintrag::before { content: none; }
.lq-fadenzaehler .qnfc-zaehler__zahl { font: 400 2.2rem/1 var(--f-titel); font-variant-numeric: tabular-nums; color: var(--_s); }
.lq-fadenzaehler .qnfc-zaehler__label { font: 600 .66rem/1.35 var(--f-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--f-leise); }
@media (max-width: 30rem) {
  .lq-fadenzaehler .qnfc-bericht__kopf { grid-template-columns: minmax(0, 1fr); }
  .lq-fadenzaehler .qnfc-bericht__urteil { justify-self: start; }
  .lq-fadenzaehler .qnfc-zaehler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lq-fadenzaehler .qnfc-teil__titel {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 0 .8rem;
  font: 400 clamp(1.4rem, 1.2rem + .8vw, 1.9rem)/1.05 var(--f-titel);
  font-synthesis: none; letter-spacing: .03em; text-transform: uppercase;
  color: var(--f-text);
}
.lq-fadenzaehler .qnfc-teil__titel label { cursor: default; }

/* ---------- Vorschauen: Nachbildungen echter Oberflaechen ---------- */
.lq-fadenzaehler .qnfc-vorschau { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.lq-fadenzaehler .qnfc-vs { margin: 0; display: grid; gap: .5rem; }
.lq-fadenzaehler .qnfc-vs figcaption {
  font: 600 .66rem/1.3 var(--f-schrift); letter-spacing: .14em; text-transform: uppercase;
  color: var(--f-leise); text-align: center;
}
.lq-fadenzaehler .qnfc-vs__buehne {
  position: relative; display: grid; place-items: center;
  min-height: 7.5rem; padding: 1rem;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .35);
}
.lq-fadenzaehler .qnfc-leer {
  display: inline-block;
  border: 1.5px dashed #8B96A1; border-radius: 3px;
  background: linear-gradient(45deg, transparent 46%, #8B96A1 46%, #8B96A1 54%, transparent 54%);
}
.lq-fadenzaehler .qnfc-vs__buehne--browser { place-items: end start; padding: 1.2rem 0 0 .6rem; background: #DEE1E6; }
.lq-fadenzaehler .qnfc-tab {
  display: flex; align-items: center; gap: .5rem;
  width: min(100%, 13rem); height: 2.2rem; padding: 0 .7rem;
  border-radius: 8px 8px 0 0;
  background: #fff; color: #202124;
  font: 400 .78rem/1 system-ui, sans-serif;
}
.lq-fadenzaehler .qnfc-tab__icon { flex: 0 0 16px; width: 16px; height: 16px; object-fit: contain; }
.lq-fadenzaehler .qnfc-tab__titel { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lq-fadenzaehler .qnfc-tab__x { color: #5F6368; }
.lq-fadenzaehler .qnfc-tab-leiste { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #fff; }
.lq-fadenzaehler .qnfc-tab-leiste--farbe { background: var(--qnfc-theme, #fff); }
.lq-fadenzaehler .qnfc-vs__buehne--dunkel { background: #202124; }
.lq-fadenzaehler .qnfc-vs__buehne--dunkel .qnfc-tab { background: #35363A; color: #E8EAED; }
.lq-fadenzaehler .qnfc-vs__buehne--dunkel .qnfc-tab__x { color: #9AA0A6; }
.lq-fadenzaehler .qnfc-vs__buehne--google {
  place-items: center start; align-content: center; gap: .35rem;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
.lq-fadenzaehler .qnfc-serp { display: flex; align-items: center; gap: .6rem; min-width: 0; max-width: 100%; }
.lq-fadenzaehler .qnfc-serp__kreis { flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #DADCE0; border-radius: 50%; background: #F1F3F4; }
.lq-fadenzaehler .qnfc-serp__icon { width: 18px; height: 18px; object-fit: contain; border-radius: 2px; }
.lq-fadenzaehler .qnfc-serp__quelle { display: grid; min-width: 0; line-height: 1.3; }
.lq-fadenzaehler .qnfc-serp__name { font-size: .82rem; color: #202124; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lq-fadenzaehler .qnfc-serp__url { font-size: .72rem; color: #4D5156; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lq-fadenzaehler .qnfc-serp__titel {
  margin: 0; max-width: 100%;
  font-size: 1rem; line-height: 1.3; color: #1A0DAB;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lq-fadenzaehler .qnfc-vs__buehne--ios { background: linear-gradient(160deg, #3E5AA3 0%, #2B3A75 55%, #1B2240 100%); }
.lq-fadenzaehler .qnfc-vs__buehne--android { background: linear-gradient(160deg, #19756C 0%, #1D5470 60%, #17324A 100%); }
.lq-fadenzaehler .qnfc-app { display: grid; justify-items: center; gap: .35rem; width: 5.2rem; }
.lq-fadenzaehler .qnfc-app__icon { display: block; object-fit: cover; }
/* iOS: abgerundetes Quadrat; Transparenz wird schwarz gefuellt - wie auf dem iPhone */
.lq-fadenzaehler .qnfc-app--ios .qnfc-app__icon { width: 60px; height: 60px; border-radius: 22.5%; background: #000; }
/* Android: Kreis-Maske */
.lq-fadenzaehler .qnfc-app--android .qnfc-app__icon { width: 56px; height: 56px; border-radius: 50%; background: #fff; }
.lq-fadenzaehler .qnfc-app .qnfc-leer { border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .12); }
.lq-fadenzaehler .qnfc-app__name {
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 500 .72rem/1.2 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

/* ---------- Gruppen und Pruefungen ---------- */
/* Zwei Spalten als Mauerwerk (columns): ungleich hohe Karten ohne Loecher.
   Lesereihenfolge bleibt die des Quelltexts - erst links, dann rechts. */
.lq-fadenzaehler .qnfc-gruppen { column-gap: clamp(.9rem, 2vw, 1.2rem); margin-bottom: calc(-1 * clamp(.9rem, 2vw, 1.2rem)); }
@media (min-width: 56rem) {
  .lq-fadenzaehler .qnfc-gruppen { columns: 2; }
}
.lq-fadenzaehler .qnfc-gruppe {
  break-inside: avoid;
  margin: 0 0 clamp(.9rem, 2vw, 1.2rem);
  min-width: 0;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  border: 1px solid var(--f-linie);
  border-top: 3px solid var(--_s);
  border-radius: 3px;
  background: var(--f-karte);
}
.lq-fadenzaehler .qnfc-gruppe__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.lq-fadenzaehler .qnfc-gruppe__titel {
  margin: 0;
  font: 400 clamp(1.35rem, 1.15rem + .7vw, 1.75rem)/1.05 var(--f-titel);
  font-synthesis: none; letter-spacing: .03em; text-transform: uppercase;
  color: var(--f-text);
}
.lq-fadenzaehler .qnfc-marke {
  margin: 0; padding: .25rem .55rem;
  border: 1px dashed var(--_s); border-radius: 3px;
  font: 600 .66rem/1.2 var(--f-schrift); letter-spacing: .12em; text-transform: uppercase;
  color: var(--_s);
  transform: rotate(-2deg);
  white-space: nowrap;
}
.lq-fadenzaehler .qnfc-gruppe__intro { margin: .3rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--f-leise); }
.lq-fadenzaehler .qnfc-pruefungen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: .9rem 0 0; padding: 0; list-style: none; }
.lq-fadenzaehler .qnfc-pruefung {
  display: block; margin: 0;
  padding: .7rem .9rem .75rem;
  border-left: 3px solid var(--_s);
  background: var(--f-mulde);
}
.lq-fadenzaehler .qnfc-pruefung::before { content: none; }
.lq-fadenzaehler .qnfc-pruefung .qnfc-symbol { display: none; }
.lq-fadenzaehler .qnfc-pruefung__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; min-width: 0; }
.lq-fadenzaehler .qnfc-pruefung__stufe {
  font: 600 .64rem/1.3 var(--f-schrift); letter-spacing: .14em; text-transform: uppercase;
  color: var(--_s);
}
.lq-fadenzaehler .qnfc-pruefung__titel { font-weight: 600; font-size: .95rem; line-height: 1.4; color: var(--f-text); overflow-wrap: anywhere; }
.lq-fadenzaehler .qnfc-pruefung__erklaerung { font-size: .86rem; line-height: 1.55; color: var(--f-leise); overflow-wrap: anywhere; }

/* ---------- Quelltext ---------- */
.lq-fadenzaehler .qnfc-quelltext { border: 1px solid var(--f-linie); border-radius: 3px; background: var(--f-mulde); }
.lq-fadenzaehler .qnfc-quelltext > summary {
  position: relative; padding: .95rem 3rem .95rem 1.2rem;
  font-weight: 600; cursor: pointer; list-style: none;
}
.lq-fadenzaehler .qnfc-quelltext > summary::-webkit-details-marker { display: none; }
.lq-fadenzaehler .qnfc-quelltext > summary::after,
.lq-fadenzaehler__info > summary::after {
  content: ""; position: absolute; right: 1.2rem; top: 50%;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--f-akzent); border-bottom: 2px solid var(--f-akzent);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.lq-fadenzaehler .qnfc-quelltext[open] > summary::after,
.lq-fadenzaehler__info[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.lq-fadenzaehler .qnfc-quelltext pre {
  margin: 0; padding: 0 1.2rem 1.1rem;
  overflow-x: auto;
  font: .78rem/1.65 var(--f-mono); color: var(--f-leise);
  background: none;
}
.lq-fadenzaehler .qnfc-quelltext code { padding: 0; background: none; color: inherit; font: inherit; }

/* ---------- Abschluss mit Garagentoren ---------- */
.lq-fadenzaehler .qnfc-abschluss {
  display: grid; gap: 1.2rem;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--f-linie);
  border-left: 3px solid var(--f-orange);
  border-radius: 3px;
  background: var(--f-mulde);
}
.lq-fadenzaehler .qnfc-abschluss__einordnung { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.lq-fadenzaehler .qnfc-abschluss__einordnung li { position: relative; margin: 0; padding-left: 1.3rem; font-size: .9rem; line-height: 1.55; }
.lq-fadenzaehler .qnfc-abschluss__einordnung li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .45rem; height: .45rem;
  background: var(--f-orange); transform: rotate(8deg);
}
.lq-fadenzaehler__tore { display: flex; flex-wrap: wrap; align-items: stretch; gap: .7rem .8rem; margin: 0; padding: 0; list-style: none; }
/* Garagentore im Abschluss kompakt - wie Leuchtfeuer (25.10.2026). Die
   Hauptknoepfe (Pruefen, Paket erzeugen, ZIP) bleiben gross. */
.lq-fadenzaehler .qnfc-abschluss .gt {
  --gt-schrift: .78rem;
  --gt-luft-y: .55em;
  --gt-luft-x: 1.35em;
  --gt-wand: 6px;
  --gt-tiefe: 46px;
}
.lq-fadenzaehler__tore > li { display: flex; margin: 0; }
.lq-fadenzaehler__tore > li::before { content: none; }
.lq-fadenzaehler__tore:empty { display: none; }
@media (max-width: 30rem) {
  .lq-fadenzaehler__tore > li { flex: 1 1 100%; }
  .lq-fadenzaehler__tore .gt { width: 100%; }
}


/* ===================================================================
   5. Generator
   =================================================================== */
.lq-fadenzaehler__schritte { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.4rem); margin: 0; }
.lq-fadenzaehler__schritt {
  min-width: 0; margin: 0;
  padding: clamp(1.1rem, 2.6vw, 1.5rem);
  border: 1px solid var(--f-linie);
  border-top: 3px solid var(--f-linie-2);
  border-radius: 3px;
  background: var(--f-karte);
}
.lq-fadenzaehler__schritt:focus-within { border-top-color: var(--f-orange); }
/* Im Pult: ohne eigene Karte */
.lq-fadenzaehler__schritt--offen,
.lq-fadenzaehler__schritt--offen:focus-within { padding: 0; border: 0; background: none; align-self: center; }
/* legend schwebt sonst auf der Kante: float holt sie in die Karte */
.lq-fadenzaehler__legende {
  float: left; width: 100%;
  display: flex; align-items: center; gap: .65rem;
  margin: 0 0 1.1rem; padding: 0;
  font: 400 clamp(1.35rem, 1.15rem + .7vw, 1.75rem)/1.05 var(--f-titel);
  font-synthesis: none; letter-spacing: .03em; text-transform: uppercase;
  color: var(--f-text);
}
.lq-fadenzaehler__legende + * { clear: both; }
.lq-fadenzaehler__nr {
  padding-top: .08em;
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 1.75rem; height: 1.75rem;
  background: var(--f-orange); color: var(--f-auf);
  font: 400 1.15rem/1 var(--f-titel);
  transform: rotate(8deg);
}
.lq-fadenzaehler__raster { display: grid; gap: 1.2rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: start; }
.lq-fadenzaehler__feld { min-width: 0; }
.lq-fadenzaehler__feld .lq-fadenzaehler__nische { display: flex; }

/* Ablage: Schneidematte mit Schnittmarken */
.lq-fadenzaehler__ablage {
  position: relative;
  padding: 1.2rem 1.2rem 1.1rem;
  border: 2px dashed rgba(159, 192, 216, .45);
  border-radius: 3px;
  background:
    linear-gradient(rgba(159, 192, 216, .07) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
    linear-gradient(90deg, rgba(159, 192, 216, .07) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
    rgb(var(--f-feld-rgb) / .55);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.lq-fadenzaehler__ablage.is-drag,
.lq-fadenzaehler__ablage:focus-within { border-color: var(--f-orange); box-shadow: 0 0 22px -6px rgb(255 136 0 / .55); }
.lq-fadenzaehler__ablage.is-drag { background-color: rgb(255 136 0 / .08); }
.lq-fadenzaehler__datei {
  display: block; width: 100%; max-width: 100%;
  font: 400 .9rem/1.4 var(--f-schrift); color: var(--f-text);
  cursor: pointer;
}
.lq-fadenzaehler__datei::file-selector-button {
  margin-right: .9rem; padding: .7rem 1.1rem;
  border: 1px solid var(--f-orange); border-radius: 2px;
  background: var(--f-orange); color: var(--f-auf);
  font: 600 .82rem/1.2 var(--f-schrift); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.lq-fadenzaehler__datei:hover::file-selector-button { background: var(--f-akzent); }
.lq-fadenzaehler__datei:focus-visible { outline: 3px solid var(--f-fokus); outline-offset: 3px; }
.lq-fadenzaehler__dateiinfo { margin: .8rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--f-text); }
.lq-fadenzaehler__dateiinfo:empty { display: none; }
.lq-fadenzaehler__dateiinfo .is-warn { color: var(--f-warn); font-weight: 600; }

/* Farbwaehler als Farbmuster in der Nische */
.lq-fadenzaehler__farbe {
  display: block; width: 5.5rem; height: 3.1rem; padding: 4px;
  border: 6px solid;
  border-top-color: rgba(15, 20, 24, .95);
  border-left-color: rgba(22, 28, 33, .95);
  border-right-color: rgb(var(--f-wand-rgb) / .55);
  border-bottom-color: rgb(var(--f-wand-rgb) / .7);
  border-radius: 2px;
  background: rgb(var(--f-feld-rgb));
  cursor: pointer;
}
.lq-fadenzaehler__farbe::-webkit-color-swatch-wrapper { padding: 0; }
.lq-fadenzaehler__farbe::-webkit-color-swatch { border: 0; border-radius: 1px; }
.lq-fadenzaehler__farbe::-moz-color-swatch { border: 0; border-radius: 1px; }
.lq-fadenzaehler__farbe:focus-visible { outline: 3px solid var(--f-fokus); outline-offset: 2px; border-color: var(--f-orange); }

/* Regler */
.lq-fadenzaehler__regler {
  display: block; width: 100%; height: 2.75rem; margin: 0;
  background: none; cursor: pointer;
  accent-color: var(--f-orange);
  -webkit-appearance: none; appearance: none;
}
.lq-fadenzaehler__regler::-webkit-slider-runnable-track { height: .5rem; background: rgb(var(--f-feld-rgb) / .95); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); border-radius: 0; }
.lq-fadenzaehler__regler::-moz-range-track { height: .5rem; background: rgb(var(--f-feld-rgb) / .95); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); }
.lq-fadenzaehler__regler::-moz-range-progress { height: .5rem; background: var(--f-orange); }
.lq-fadenzaehler__regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.3rem; height: 1.3rem; margin-top: -.4rem;
  background: var(--f-orange); border: 2px solid var(--f-auf);
  transform: rotate(8deg);
}
.lq-fadenzaehler__regler::-moz-range-thumb {
  width: 1.1rem; height: 1.1rem; border-radius: 0;
  background: var(--f-orange); border: 2px solid var(--f-auf);
  transform: rotate(8deg);
}
.lq-fadenzaehler__regler:focus-visible { outline: 3px solid var(--f-fokus); outline-offset: 2px; }
.lq-fadenzaehler__label output { color: var(--f-akzent); font-variant-numeric: tabular-nums; }

/* Haken: Quadrat in der 8-Grad-Achse */
.lq-fadenzaehler__feld--haken { position: relative; display: flex; align-items: flex-start; gap: .75rem; padding-top: 1.75rem; font-size: .92rem; line-height: 1.5; }
.lq-fadenzaehler__haken {
  flex: 0 0 auto;
  width: 1.35rem; height: 1.35rem; margin: .1rem 0 0;
  -webkit-appearance: none; appearance: none;
  border: 2px solid var(--f-leise); border-radius: 0;
  background: rgb(var(--f-feld-rgb));
  transform: rotate(8deg);
  cursor: pointer;
  display: grid; place-content: center;
}
.lq-fadenzaehler__haken::before {
  content: ""; width: .7rem; height: .7rem;
  background: var(--f-auf);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0); transition: transform .15s ease;
}
.lq-fadenzaehler__haken:checked { background: var(--f-orange); border-color: var(--f-orange); }
.lq-fadenzaehler__haken:checked::before { transform: scale(1); }
.lq-fadenzaehler__haken:focus-visible { outline: 3px solid var(--f-fokus); outline-offset: 3px; }
.lq-fadenzaehler__feld--haken label { cursor: pointer; }
@media (max-width: 40rem) { .lq-fadenzaehler__feld--haken { padding-top: 0; } }

.lq-fadenzaehler__aktion { display: flex; flex-wrap: wrap; gap: 1rem; }
.lq-fadenzaehler__aktion .gt { --gt-luft-y: 1.05em; --gt-luft-x: 2.1em; }
@media (max-width: 30rem) {
  .lq-fadenzaehler__aktion .gt,
  .lq-fadenzaehler__download .gt { width: 100%; }
}

/* Paket */
.lq-fadenzaehler__download {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem;
  padding: clamp(1.1rem, 2.6vw, 1.5rem);
  border: 1px solid var(--f-linie);
  border-left: 3px solid var(--f-orange);
  border-radius: 3px;
  background: var(--f-karte);
}
.lq-fadenzaehler__dateien,
.lq-fadenzaehler__stueckliste { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 18rem; margin: 0; padding: 0; list-style: none; }
.lq-fadenzaehler__dateien li,
.lq-fadenzaehler__stueckliste li {
  margin: 0; padding: .3rem .55rem;
  border: 1px solid var(--f-linie-2); border-radius: 2px;
  background: var(--f-mulde);
  font-size: .78rem; line-height: 1.4; color: var(--f-leise);
}
.lq-fadenzaehler__dateien li::before,
.lq-fadenzaehler__stueckliste li::before { content: none; }
.lq-fadenzaehler .lq-fadenzaehler__dateien code,
.lq-fadenzaehler .lq-fadenzaehler__stueckliste code { padding: 0; background: none; color: var(--f-text); }
.lq-fadenzaehler__stueckliste { margin: 1.1rem 0 .3rem; }

.lq-fadenzaehler__code { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.4rem); }
.lq-fadenzaehler__code-schritt {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; min-width: 0;
  padding: clamp(1.1rem, 2.6vw, 1.5rem);
  border: 1px solid var(--f-linie);
  border-radius: 3px;
  background: var(--f-karte);
}
.lq-fadenzaehler__code-schritt .qnfc-teil__titel { margin: 0; }
.lq-fadenzaehler__code-schritt .lq-fadenzaehler__hinweis { margin: 0; }
.lq-fadenzaehler__oder { font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); color: var(--f-leise); }
.lq-fadenzaehler__codefeld {
  display: block; width: 100%; margin: 0;
  padding: .9rem 1rem;
  font: .8rem/1.6 var(--f-mono); color: #DCEBF7;
  background: rgb(var(--f-feld-rgb) / .95);
  border: 6px solid;
  border-top-color: rgba(15, 20, 24, .95);
  border-left-color: rgba(22, 28, 33, .95);
  border-right-color: rgb(var(--f-wand-rgb) / .55);
  border-bottom-color: rgb(var(--f-wand-rgb) / .7);
  border-radius: 2px;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .75);
  resize: vertical;
}
.lq-fadenzaehler__codefeld:focus-visible { outline: none; border-color: var(--f-orange); box-shadow: 0 0 0 3px rgb(255 136 0 / .28); }
.lq-fadenzaehler__kopieren {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 2.75rem; padding: .55rem 1.1rem;
  border: 1px solid var(--f-linie-2); border-radius: 2px;
  background: transparent;
  font: 600 .82rem/1.3 var(--f-schrift); letter-spacing: .08em; text-transform: uppercase;
  color: var(--f-text);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.lq-fadenzaehler__kopieren::before { content: ""; width: .55em; height: .55em; background: var(--f-orange); transform: rotate(8deg); }
.lq-fadenzaehler__kopieren:hover { border-color: var(--f-akzent); color: var(--f-akzent); }
.lq-fadenzaehler__kopieren:focus-visible { outline: 3px solid var(--f-fokus); outline-offset: 2px; }

.lq-fadenzaehler__paket .qnfc-bericht__kopf { grid-template-columns: minmax(0, 1fr); }

/* Zugang fuer Gaeste */
.lq-fadenzaehler--zugang .lq-fadenzaehler__tore { margin-top: 1.3rem; }
.lq-fadenzaehler--zugang .lq-fadenzaehler__kicker { margin-bottom: .9rem; }


/* ===================================================================
   6. Erklaerung
   =================================================================== */
.lq-fadenzaehler__info { border: 1px solid var(--f-linie); border-radius: 3px; background: rgba(10, 16, 21, .25); }
.lq-fadenzaehler__info > summary { position: relative; padding: .95rem 3rem .95rem 1.2rem; font-weight: 600; cursor: pointer; list-style: none; }
.lq-fadenzaehler__info > summary::-webkit-details-marker { display: none; }
.lq-fadenzaehler__info-text { padding: 0 1.2rem 1.1rem; }
.lq-fadenzaehler__info-text p { margin: 0 0 .8rem; max-width: 70ch; line-height: 1.6; color: var(--f-text); }
.lq-fadenzaehler__info-text p:last-child { margin-bottom: 0; color: var(--f-leise); }


/* ===================================================================
   7. Bewegung - nur mit Bewegungswunsch
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Lauf: die Zeile springt Pixelreihe fuer Pixelreihe nach unten */
  @keyframes lq-fz-zeile { from { transform: translateY(0); } to { transform: translateY(1600%); } }
  @keyframes lq-fz-flimmern { 50% { opacity: .55; } }
  @keyframes lq-fz-punkt { 50% { opacity: .25; } }
  /* Ruhe: das Licht unter der Lupe atmet */
  @keyframes lq-fz-licht { 50% { opacity: .55; } }
  @keyframes lq-fz-ein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  .lq-fz__licht { animation: lq-fz-licht 6s ease-in-out infinite; }
  .lq-fz__pixel,
  .lq-fz__original,
  .lq-fz__gitter { transition: opacity .35s ease; }
  .is-busy .lq-fz__scan { animation: lq-fz-zeile 1.6s steps(16, end) infinite; }
  .is-busy :is(.lq-fz__pixel, .lq-fz__motiv) { animation: lq-fz-flimmern .4s steps(2) infinite; }
  .is-busy .lq-fz__punkt { animation: lq-fz-punkt .8s steps(1) infinite; }
  .lq-fadenzaehler .qnfc-bericht,
  .lq-fadenzaehler__paket:not([hidden]) { animation: lq-fz-ein .45s ease-out both; }
}


/* ===================================================================
   8. Erzwungene Farben (Windows-Kontrastmodus)
   =================================================================== */
@media (forced-colors: active) {
  .lq-fadenzaehler__nr,
  .lq-fadenzaehler__haken,
  .lq-fadenzaehler__kopieren,
  .lq-fadenzaehler .qnfc-marke,
  .lq-fadenzaehler .qnfc-bericht__urteil { border: 1px solid CanvasText; forced-color-adjust: auto; }
  .lq-fadenzaehler__haken:checked { background: Highlight; }
}