/* =========================================================================
   QUADRONET Layout - Barrierefreiheits-Check "Echolot" (a11y_checker)
   -------------------------------------------------------------------------
   25.10.2026. Markup: Resources/Private/Overrides/A11yChecker/Templates/
   Checker/Index.html (ersetzt die Vorlage der Extension); der Bericht kommt
   als HTML aus ReportGeneratorService (Klassen a11y-report__*, a11y-finding__*).

   Idee: Der Eisberg der Startseite. Was ueber der Wasserlinie glaenzt, sieht
   jeder - ob alle die Seite nutzen koennen, entscheidet sich darunter. Der
   Checker lotet aus: Pult im Stil der Zielkarte (Verlauf, orange Kante,
   Passermarke), Feld als Nische wie im Kontaktformular, daneben das
   Echolot-Profil mit Wasserlinie, Tiefenskala (wie die Eisberg-Legende) und
   Schallboegen. Das Ergebnis ist ein Lotprotokoll: grosse Zahl, Lotleine mit
   10 Gliedern, BFSG-Einschaetzung als Pruefplakette, vier Tiefenzonen.

   Zustaende: .is-busy am .a11y-checker (setzt checker.js) - Boegen laufen
   schneller, Echos blinken. Knoepfe: Garagentor (seit 25.10.2026). Ohne Bewegungswunsch
   (prefers-reduced-motion) steht alles still.

   BEWUSST OHNE @layer und alles unter .lq-echolot - wie 75-anfahrt.css.

   Kontraste (hellster Punkt der Karten #22384A): Text #EAF4FF 10,9:1,
   leise #9FC0D8 6,3:1, Kritisch #FF8A7A 5,3:1, Schwer #FFA94D 6,4:1,
   Moderat #D9A441 5,4:1, Gering #79B0C0 5,1:1, Gut #4FBE8B 5,2:1,
   Schrift auf Orange #141A1F 7,3:1.
   ========================================================================= */

.lq-echolot {
  --e-text:     var(--hell, #EAF4FF);
  --e-leise:    var(--hell-2, #9FC0D8);
  --e-orange:   var(--orange, #FF8800);
  --e-akzent:   var(--orange-hell, #FFA94D);
  --e-auf:      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-schrift:  var(--qn-schriftfamilie, "IBM Plex Sans", system-ui, sans-serif);
  --e-titel:    var(--qn-schriftfamilie-ueberschrift, "Bebas Neue", sans-serif);
  --e-karte:    linear-gradient(160deg, #22384A 0%, #1B2B38 60%, #17242F 100%);
  --e-kritisch: #FF8A7A;
  --e-schwer:   #FFA94D;
  --e-moderat:  #D9A441;
  --e-gering:   #79B0C0;
  --e-gut:      #4FBE8B;
  --e-rot:      var(--rot, #E5372C);
  --e-wand-rgb: 52 82 103;
  --e-feld-rgb: 20 26 31;
  --e-osd:      500 .64rem/1.2 var(--e-schrift);

  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* Garagentor-Beschriftung (nowrap) darf den Block nicht aufweiten */
  gap: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 64rem;
  color: var(--e-text);
  font-family: var(--e-schrift);
}
.lq-echolot *,
.lq-echolot *::before,
.lq-echolot *::after { box-sizing: border-box; }

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


/* ===================================================================
   1. Pult
   =================================================================== */
.lq-echolot__pult {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  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(--sch-blatt, 0 10px 30px -14px rgba(0, 0, 0, .66));
}
@media (min-width: 56rem) {
  .lq-echolot__pult { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; gap: 2rem; }
}
/* Passermarke oben rechts */
.lq-echolot__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-echolot__form { align-self: center; min-width: 0; margin: 0; }

.lq-echolot__label {
  display: block;
  margin: 0 0 .55rem;
  padding: 0;
  font: 600 .78rem/1.3 var(--e-schrift);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--e-text);
}

.lq-echolot__zeile { display: flex; flex-wrap: wrap; gap: .8rem; align-items: stretch; }

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

.lq-echolot__eingabe {
  display: block;
  width: 100%;
  min-height: 3.1rem;
  margin: 0;
  padding: .8em 1em;
  font: 400 1.05rem/1.4 var(--e-schrift);
  color: #fff;
  background: linear-gradient(180deg, rgb(var(--e-feld-rgb) / .95), rgb(var(--e-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(--e-wand-rgb) / .55);
  border-bottom-color: rgb(var(--e-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-echolot__eingabe::placeholder { color: rgba(234, 244, 255, .5); font-style: italic; opacity: 1; }
.lq-echolot__eingabe:focus,
.lq-echolot__eingabe:focus-visible {
  outline: none;
  border-color: var(--e-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-echolot__nische:focus-within::before,
.lq-echolot__nische:focus-within::after { border-color: var(--e-orange); }
.lq-echolot__eingabe:-webkit-autofill,
.lq-echolot__eingabe:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: inset 0 0 0 1000px rgb(var(--e-feld-rgb)) !important;
  caret-color: #fff;
}
.lq-echolot__eingabe[disabled] { opacity: .6; cursor: progress; }

/* Knopf "Ausloten" = Garagentor (Partial Knopf/Garagentor, 55-garagentor.css),
   25.10.2026 - vorher Schraegknopf. Einpassung wie im Pruefstand: flacher
   als das Standard-Tor, damit es neben das Feld passt. */
.lq-echolot__zeile .gt { flex: 0 0 auto; --gt-luft-y: 1em; --gt-luft-x: 1.9em; --gt-tiefe: 80px; }
.lq-echolot__nische { display: flex; flex-basis: 13rem; }
.lq-echolot__eingabe { flex: 1 1 auto; height: auto; }
@media (max-width: 30rem) {
  .lq-echolot__zeile .gt { flex: 1 1 100%; }
}

.lq-echolot__hinweis {
  margin: .9rem 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--e-leise);
}
.lq-echolot__hinweis strong { color: var(--e-akzent); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Optionen (nur angemeldet) */
.lq-echolot__optionen { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--e-linie); }
.lq-echolot__umfang { margin: 0; padding: 0; border: 0; min-width: 0; }
.lq-echolot__wahlen { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.lq-echolot__wahl {
  position: relative;
  display: grid;
  gap: .2rem;
  padding: .75rem .9rem .75rem 2.5rem;
  border: 1px solid var(--e-linie);
  border-radius: 3px;
  background: rgba(10, 16, 21, .28);
  cursor: pointer;
  transition: border-color .2s ease;
}
.lq-echolot__wahl:has(input:checked) { border-color: rgba(255, 136, 0, .6); }
.lq-echolot__wahl input { position: absolute; left: .9rem; top: .95rem; width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--e-orange); }
.lq-echolot__wahl-titel { font-weight: 600; font-size: .92rem; }
.lq-echolot__wahl-hinweis { font-size: .78rem; color: var(--e-leise); }
.lq-echolot__kasten { display: flex; gap: .6rem; align-items: center; margin-top: .9rem; font-size: .9rem; cursor: pointer; }
.lq-echolot__kasten input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--e-orange); }


/* ===================================================================
   2. Echolot-Profil
   =================================================================== */
.lq-echolot__profil {
  position: relative;
  align-self: center;
  aspect-ratio: 5 / 3;       /* = viewBox 400 x 240: nichts wird abgeschnitten, Skala sitzt genau */
  overflow: hidden;
  border: 1px solid var(--e-linie);
  border-radius: 3px;
  background: radial-gradient(120% 90% at 60% 20%, #1A3446 0%, #12202B 55%, #0C151C 100%);
}
.lq-echolot__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.lq-echolot__skala line { stroke: rgba(234, 244, 255, .08); stroke-width: .8; stroke-dasharray: 2 4; }
.lq-echolot__linie { stroke: var(--e-akzent); stroke-width: 1.2; }
.lq-echolot__boot { fill: #3B5263; stroke: rgba(234, 244, 255, .35); stroke-width: .8; }
.lq-echolot__geber { fill: var(--e-orange); }
.lq-echolot__kegel { fill: rgba(255, 169, 77, .05); }
.lq-echolot__grund { fill: #0A1117; stroke: rgba(121, 176, 192, .45); stroke-width: 1; }
.lq-echolot__echos circle { fill: var(--e-akzent); opacity: .85; }

/* Schallboegen: Kreise um den Geber, oben an der Wasserlinie abgeschnitten */
.lq-echolot__bogen {
  fill: none;
  stroke: rgba(255, 169, 77, .55);
  stroke-width: 1.4;
  transform-box: view-box;
  transform-origin: 236px 70px;
  opacity: .35;
}
.lq-echolot__bogen:nth-child(2) { transform: scale(1.7); opacity: .22; }
.lq-echolot__bogen:nth-child(3) { transform: scale(2.6); opacity: .12; }

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

/* Tiefenskala rechts - wie die Legende im Eisberg */
.lq-echolot__tiefe {
  position: absolute;
  top: 29.2%;              /* = Wasserlinie (70 von 240) */
  bottom: 4.2%;            /* = -40 (230 von 240) */
  right: .9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font: var(--e-osd);
  letter-spacing: .1em;
  color: var(--e-leise);
}
.lq-echolot__tiefe span { transform: translateY(-50%); }
.lq-echolot__tiefe span:first-child { color: var(--e-akzent); }

/* Lotung laeuft */
.is-busy .lq-echolot__punkt { background: var(--e-orange); box-shadow: 0 0 8px var(--e-orange); }
.is-busy .lq-echolot__bereit { display: none; }
.is-busy .lq-echolot__lotung { display: inline; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes lq-echo-bogen {
    from { transform: scale(.25); opacity: .65; }
    to   { transform: scale(3.4); opacity: 0; }
  }
  @keyframes lq-echo-blink { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
  @keyframes lq-echo-punkt { 50% { opacity: .25; } }

  /* Ruhe: langsamer Puls */
  .lq-echolot__bogen { animation: lq-echo-bogen 4.8s cubic-bezier(.2, .6, .4, 1) infinite; }
  .lq-echolot__bogen:nth-child(2) { animation-delay: 1.6s; }
  .lq-echolot__bogen:nth-child(3) { animation-delay: 3.2s; }
  .lq-echolot__punkt { animation: lq-echo-punkt 2s steps(1) infinite; }

  /* Lotung: schnell, Echos antworten */
  .is-busy .lq-echolot__bogen { animation-duration: 1.5s; }
  .is-busy .lq-echolot__bogen:nth-child(2) { animation-delay: .5s; }
  .is-busy .lq-echolot__bogen:nth-child(3) { animation-delay: 1s; }
  .is-busy .lq-echolot__echos circle { animation: lq-echo-blink 1.5s ease-in-out infinite; }
  .is-busy .lq-echolot__echos circle:nth-child(2) { animation-delay: .3s; }
  .is-busy .lq-echolot__echos circle:nth-child(3) { animation-delay: .6s; }
  .is-busy .lq-echolot__punkt { animation-duration: .8s; }
}


/* ===================================================================
   3. Status, Fehler, Fortschritt
   =================================================================== */
.lq-echolot__status { margin: -.6rem 0 0; min-height: 1.4em; font-size: .88rem; color: var(--e-leise); }
.lq-echolot__status:empty { display: none; }

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

.lq-echolot__fortschritt {
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--e-linie);
  border-radius: 3px;
  background: var(--e-karte);
}
.lq-echolot__fortschritt[hidden] { display: none; }
.lq-echolot__fortschritt-kopf { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.lq-echolot__fortschritt-kopf span { color: var(--e-akzent); }
.lq-echolot__leine {
  position: relative;
  height: .5rem;
  margin-top: .8rem;
  background: repeating-linear-gradient(90deg, rgba(234, 244, 255, .18) 0 2px, transparent 2px 10%);
  border-bottom: 1px solid var(--e-linie-2);
}
.lq-echolot__leine-fill { width: 0; height: 100%; background: var(--e-orange); transition: width .4s ease; }
/* "Zuletzt gelotet: /sehr/langer/pfad" (Sofortstart, 25.10.2026): langer
   Pfad bricht um statt die Karte am Telefon aufzuschieben. */
.lq-echolot__fortschritt .lq-echolot__hinweis { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }


/* ===================================================================
   4. Lotprotokoll (Bericht aus ReportGeneratorService)
   =================================================================== */
.lq-echolot__ergebnis[hidden] { display: none; }

/* Das Grundgeruest begrenzt Absaetze und Listen auf Lesebreite - im
   Bericht sollen Karten und Zeilen die volle Breite nutzen. */
.lq-echolot .a11y-report :is(p, ol, ul, li, details, figure, pre) { max-width: none; }
.lq-echolot .a11y-report .a11y-finding__description,
.lq-echolot .a11y-report .a11y-finding__fix-text { max-width: 75ch; }

.lq-echolot .a11y-report {
  position: relative;
  display: grid;
  gap: 1.3rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--e-linie);
  border-top: 3px solid var(--e-moderat);
  border-radius: 3px;
  background: var(--e-karte);
  box-shadow: var(--sch-tief, 0 26px 60px -26px rgba(0, 0, 0, .78));
  scroll-margin-top: calc(var(--qn-ankerabstand, 90px) + 1rem);
}
.lq-echolot .a11y-report--good { border-top-color: var(--e-gut); }
.lq-echolot .a11y-report--poor { border-top-color: var(--e-kritisch); }
.lq-echolot .a11y-report:focus { outline: none; }
.lq-echolot .a11y-report:focus-visible { outline: 3px solid var(--e-fokus); outline-offset: 4px; }

/* Kopf mit Kicker "Lotprotokoll" (Alternativtext leer) */
.lq-echolot .a11y-report__head::before {
  content: "Lotprotokoll";
  content: "Lotprotokoll" / "";
  display: block;
  margin-bottom: .5rem;
}
.lq-echolot .a11y-report__title {
  margin: 0;
  font: 400 clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem)/.95 var(--e-titel);
  font-synthesis: none;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--e-text);
  overflow-wrap: anywhere;
}
.lq-echolot .a11y-report__host { color: var(--e-akzent); }
.lq-echolot .a11y-report__meta { margin: .6rem 0 0; font-size: .84rem; line-height: 1.6; color: var(--e-leise); overflow-wrap: anywhere; }
.lq-echolot .a11y-report__url { color: var(--e-leise); text-decoration-color: rgba(159, 192, 216, .45); text-underline-offset: .25em; }
.lq-echolot .a11y-report__url:hover { color: var(--e-akzent); }
.lq-echolot .a11y-report__sep { margin: 0 .35em; }

/* Zusammenfassung: Zahl | Plakette | Zonen */
.lq-echolot .a11y-report__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem 2rem;
  align-items: center;
  padding: 1.2rem 0;
  border-block: 1px solid var(--e-linie);
}
/* Zahl + Plakette nebeneinander, die vier Zonen immer in eigener Zeile
   (dreispaltig wurden die Kacheln zu schmal fuer "Schwerwiegend") */
@media (min-width: 40rem) {
  .lq-echolot .a11y-report__summary { grid-template-columns: auto minmax(0, 1fr); }
  .lq-echolot .a11y-report__counts { grid-column: 1 / -1; }
}

.lq-echolot .a11y-report__score-figure { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.lq-echolot .a11y-report__score-value {
  font: 400 clamp(4rem, 3rem + 4vw, 5.6rem)/.8 var(--e-titel);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: var(--e-moderat);
}
.lq-echolot .a11y-report--good .a11y-report__score-value { color: var(--e-gut); }
.lq-echolot .a11y-report--poor .a11y-report__score-value { color: var(--e-kritisch); }
.lq-echolot .a11y-report__score-max { font-size: .84rem; letter-spacing: .06em; color: var(--e-leise); }

/* Lotleine: 10 Glieder */
.lq-echolot .a11y-report__knots { display: flex; gap: 4px; margin-top: .7rem; }
.lq-echolot .a11y-report__knot {
  width: 1.15rem;
  height: .5rem;
  background: rgba(234, 244, 255, .1);
  transform: skewX(-8deg);
}
.lq-echolot .a11y-report__knot.is-on { background: var(--e-moderat); }
.lq-echolot .a11y-report--good .a11y-report__knot.is-on { background: var(--e-gut); }
.lq-echolot .a11y-report--poor .a11y-report__knot.is-on { background: var(--e-kritisch); }

/* BFSG-Einschaetzung als Pruefplakette */
.lq-echolot .a11y-report__status {
  display: grid;
  gap: .35rem;
  justify-items: start;
  margin: 0;
}
.lq-echolot .a11y-report__status-label {
  font: 600 .66rem/1.4 var(--e-schrift);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--e-leise);
}
.lq-echolot .a11y-report__status-value {
  display: inline-block;
  padding: .45rem .75rem;
  border: 1px dashed currentColor;
  border-radius: 3px;
  font: 600 .78rem/1.2 var(--e-schrift);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--e-moderat);
  transform: rotate(-2deg);
}
.lq-echolot .a11y-report__status--compliant .a11y-report__status-value { color: var(--e-gut); }
.lq-echolot .a11y-report__status--non-compliant .a11y-report__status-value { color: var(--e-kritisch); }

/* Vier Tiefenzonen */
.lq-echolot .a11y-report__counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lq-echolot .a11y-report__count {
  display: grid;
  gap: .15rem;
  padding: .7rem .75rem .65rem;
  border-top: 3px solid var(--_z);
  background: rgba(10, 16, 21, .32);
}
.lq-echolot .a11y-report__count::before { content: none; }
.lq-echolot .a11y-report__count--critical { --_z: var(--e-kritisch); }
.lq-echolot .a11y-report__count--serious  { --_z: var(--e-schwer); }
.lq-echolot .a11y-report__count--moderate { --_z: var(--e-moderat); }
.lq-echolot .a11y-report__count--minor    { --_z: var(--e-gering); }
.lq-echolot .a11y-report__count-value {
  font: 400 2rem/1 var(--e-titel);
  font-variant-numeric: tabular-nums;
  color: var(--_z);
}
.lq-echolot .a11y-report__count.is-zero { border-top-color: rgba(234, 244, 255, .14); }
.lq-echolot .a11y-report__count.is-zero .a11y-report__count-value { color: var(--e-leise); }
.lq-echolot .a11y-report__count-label {
  font: 600 .64rem/1.3 var(--e-schrift);
  hyphens: manual;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--e-leise);
  overflow-wrap: anywhere;
}

.lq-echolot .a11y-report__note { margin: 0; font-size: .82rem; color: var(--e-leise); }

/* Keine Befunde */
.lq-echolot .a11y-report__clean { padding: 1rem 1.2rem; border-left: 3px solid var(--e-gut); background: rgba(79, 190, 139, .07); }
.lq-echolot .a11y-report__clean p { margin: .3rem 0 0; color: var(--e-text); line-height: 1.55; }
.lq-echolot .a11y-report__clean-title { margin: 0 !important; font: 400 1.5rem/1 var(--e-titel); text-transform: uppercase; color: var(--e-gut) !important; }

/* Befunde */
.lq-echolot .a11y-report__findings-title {
  margin: .4rem 0 0;
  font: 400 1.7rem/1 var(--e-titel);
  font-synthesis: none;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--e-text);
}
.lq-echolot .a11y-report__findings-count { color: var(--e-akzent); }
.lq-echolot .a11y-report__findings-hint { margin: -.7rem 0 0; font-size: .84rem; color: var(--e-leise); }

.lq-echolot .a11y-report__findings { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.lq-echolot .a11y-finding { margin: 0; padding: 0; }
.lq-echolot .a11y-finding::before { content: none; }
.lq-echolot .a11y-finding--critical { --_s: var(--e-kritisch); }
.lq-echolot .a11y-finding--serious  { --_s: var(--e-schwer); }
.lq-echolot .a11y-finding--moderate { --_s: var(--e-moderat); }
.lq-echolot .a11y-finding--minor    { --_s: var(--e-gering); }
.lq-echolot .a11y-finding--info     { --_s: var(--e-leise); }

.lq-echolot .a11y-finding__details {
  border: 1px solid var(--e-linie);
  border-left: 3px solid var(--_s);
  border-radius: 3px;
  background: rgba(10, 16, 21, .3);
  transition: border-color .2s ease, background-color .2s ease;
}
.lq-echolot .a11y-finding__details[open] { background: rgba(10, 16, 21, .45); border-color: var(--e-linie-2); border-left-color: var(--_s); }

.lq-echolot .a11y-finding__summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .7rem;
  min-height: 3rem;
  padding: .8rem 3rem .8rem 1rem;
  cursor: pointer;
  list-style: none;
}
.lq-echolot .a11y-finding__summary::-webkit-details-marker { display: none; }
/* Auf/zu-Winkel */
.lq-echolot .a11y-finding__summary::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--e-akzent);
  border-bottom: 2px solid var(--e-akzent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.lq-echolot .a11y-finding__details[open] > .a11y-finding__summary::after { transform: translateY(-30%) rotate(225deg); }
.lq-echolot .a11y-finding__summary:hover { background: rgba(255, 136, 0, .05); }
.lq-echolot .a11y-finding__summary:focus-visible { outline: 3px solid var(--e-fokus); outline-offset: -3px; }

.lq-echolot .a11y-finding__severity {
  padding: .22rem .5rem;
  border: 1px solid var(--_s);
  border-radius: 2px;
  font: 600 .64rem/1.2 var(--e-schrift);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--_s);
}
.lq-echolot .a11y-finding__wcag {
  font: 500 .72rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--e-leise);
}
.lq-echolot .a11y-finding__title { flex: 1 1 16rem; font-weight: 600; line-height: 1.4; color: var(--e-text); }
.lq-echolot .a11y-finding__location {
  max-width: 100%;
  padding: .15rem .45rem;
  border-radius: 2px;
  background: rgba(234, 244, 255, .07);
  font: 400 .72rem/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--e-leise);
  overflow-wrap: anywhere;
}

.lq-echolot .a11y-finding__body {
  display: grid;
  gap: .9rem;
  padding: .2rem 1rem 1.1rem;
  border-top: 1px solid var(--e-linie);
}
.lq-echolot .a11y-finding__description { margin: .9rem 0 0; line-height: 1.6; color: var(--e-text); max-width: 72ch; }

.lq-echolot .a11y-finding__code { margin: 0; border: 1px solid var(--e-linie); border-radius: 3px; background: #0D151B; overflow: hidden; }
.lq-echolot .a11y-finding__code figcaption {
  padding: .4rem .8rem;
  border-bottom: 1px solid var(--e-linie);
  font: 600 .64rem/1.3 var(--e-schrift);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lq-echolot .a11y-finding__code--bad figcaption { color: var(--e-kritisch); }
.lq-echolot .a11y-finding__code--good figcaption { color: var(--e-gut); }
.lq-echolot .a11y-finding__code pre { margin: 0; padding: .8rem; border: 0; border-radius: 0; background: none; box-shadow: none; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.lq-echolot .a11y-finding__code code { font: 400 .8rem/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #D6E4F0; background: none; }

.lq-echolot .a11y-finding__fix {
  display: grid;
  gap: .6rem;
  padding: .9rem 1rem;
  border-left: 3px solid var(--e-gut);
  background: rgba(79, 190, 139, .06);
}
.lq-echolot .a11y-finding__fix-title {
  margin: 0;
  font: 600 .7rem/1.3 var(--e-schrift);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--e-gut);
}
.lq-echolot .a11y-finding__fix-text { margin: 0; line-height: 1.6; color: var(--e-text); }

/* Aktionen (angemeldet) */
.lq-echolot .a11y-report__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.lq-echolot .a11y-report__action {
  min-height: 2.9rem;
  padding: .7rem 1.3rem;
  border: 2px solid var(--e-text);
  border-radius: 3px;
  background: transparent;
  color: var(--e-text);
  font: 600 .78rem/1.2 var(--e-schrift);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.lq-echolot .a11y-report__action--pdf { border-color: var(--e-orange); background: var(--e-orange); color: var(--e-auf); }
.lq-echolot .a11y-report__action:hover { border-color: var(--e-akzent); background: var(--e-akzent); color: var(--e-auf); }
.lq-echolot .a11y-report__action:focus-visible { outline: 3px solid var(--e-fokus); outline-offset: 3px; }

/* Mehrseiten-Bericht (baut checker.js) */
.lq-echolot .a11y-crawl-report { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--e-linie); border-radius: 3px; background: var(--e-karte); }
.lq-echolot .a11y-crawl-report h3 { margin: 0 0 .4rem; font: 400 2rem/1 var(--e-titel); text-transform: uppercase; }
.lq-echolot .a11y-crawl-report__meta { color: var(--e-leise); font-size: .85rem; }
.lq-echolot .a11y-crawl-report__summary { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin: 1rem 0; }
.lq-echolot .a11y-crawl-report__score-value { font: 400 3.6rem/.85 var(--e-titel); color: var(--e-akzent); margin-right: .4rem; }
.lq-echolot .a11y-crawl-report__score-label { color: var(--e-leise); font-size: .8rem; }
.lq-echolot .a11y-crawl-report__table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.lq-echolot .a11y-crawl-report__table th,
.lq-echolot .a11y-crawl-report__table td { padding: .5rem .6rem; border-bottom: 1px solid var(--e-linie); text-align: left; }
.lq-echolot .a11y-crawl-report__table th { font: 600 .66rem/1.3 var(--e-schrift); letter-spacing: .12em; text-transform: uppercase; color: var(--e-leise); }
.lq-echolot .a11y-crawl-report__url { overflow-wrap: anywhere; }
.lq-echolot .a11y-crawl-report__score-cell--good { color: var(--e-gut); }
.lq-echolot .a11y-crawl-report__score-cell--moderate { color: var(--e-moderat); }
.lq-echolot .a11y-crawl-report__score-cell--poor { color: var(--e-kritisch); }


/* ===================================================================
   5. Kundenkonto, BFSG
   =================================================================== */
.lq-echolot__konto {
  display: grid;
  gap: .9rem;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--e-linie);
}
.lq-echolot__konto-titel {
  margin: 0;
  font: 400 1.6rem/1 var(--e-titel);
  font-synthesis: none;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--e-text);
}
.lq-echolot__plaketten { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.lq-echolot__plaketten li {
  margin: 0;
  padding: .4rem .7rem;
  border: 1px dashed rgba(255, 169, 77, .75);
  border-radius: 3px;
  font: 600 .66rem/1.2 var(--e-schrift);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--e-akzent);
}
.lq-echolot__plaketten li::before { content: none; }
.lq-echolot__konto-link { margin: 0; }
.lq-echolot__konto-link a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  color: var(--e-akzent);
  text-underline-offset: .3em;
}
.lq-echolot__konto-link a::after { content: "→" / ""; text-decoration: none; }
.lq-echolot__konto-link a:hover { color: var(--e-orange); }
.lq-echolot__konto-link a:focus-visible { outline: 3px solid var(--e-fokus); outline-offset: 3px; }

.lq-echolot__bfsg { border-top: 1px solid var(--e-linie); padding-top: .9rem; }
.lq-echolot__bfsg summary {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--e-akzent);
  cursor: pointer;
  list-style: none;
}
.lq-echolot__bfsg summary::-webkit-details-marker { display: none; }
.lq-echolot__bfsg summary::before {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.lq-echolot__bfsg[open] summary::before { transform: rotate(45deg); }
.lq-echolot__bfsg summary:focus-visible { outline: 3px solid var(--e-fokus); outline-offset: 3px; }
.lq-echolot__bfsg-text p { max-width: 68ch; margin: .4rem 0 .8rem; line-height: 1.65; color: var(--e-text); }


/* ===================================================================
   6. Telefon
   =================================================================== */
@media (max-width: 36rem) {
  .lq-echolot__osd--or { display: none; }
  .lq-echolot .a11y-report__counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lq-echolot .a11y-finding__summary { padding-right: 2.6rem; }
  .lq-echolot__lead { hyphens: manual; }
}


/* ===================================================================
   7. Hoher Kontrast / Windows-Kontrastmodus / Druck
   =================================================================== */
@media (prefers-contrast: more) {
  .lq-echolot { --e-leise: var(--hell, #EAF4FF); --e-linie: rgba(234, 244, 255, .55); --e-linie-2: rgba(234, 244, 255, .8); }
}
@media (forced-colors: active) {
  .lq-echolot__pult,
  .lq-echolot .a11y-report,
  .lq-echolot .a11y-finding__details { background: Canvas; border-color: CanvasText; }
  .lq-echolot__profil,
  .lq-echolot__passer { display: none; }
  .lq-echolot .a11y-report__knot.is-on { forced-color-adjust: none; background: Highlight; }
  .lq-echolot .a11y-report__knot { forced-color-adjust: none; background: GrayText; }
}
@media print {
  .lq-echolot__pult,
  .lq-echolot__konto,
  .lq-echolot__bfsg,
  .lq-echolot__status { display: none; }
  .lq-echolot .a11y-report { box-shadow: none; background: #fff; color: #000; border-color: #999; }
  .lq-echolot .a11y-finding__body { display: grid !important; }
}


/* ===================================================================
   Aktionen unter dem Lotprotokoll als Garagentore (25.10.2026)
   Partial Overrides/A11yChecker/Partials/Report/Aktionen.html.
   Meldungen in [data-a11y-action-status] statt alert().
   =================================================================== */
.lq-echolot .lq-echolot__tore { display: flex; flex-wrap: wrap; align-items: stretch; gap: .7rem .8rem; }
/* Garagentore unter dem Lotprotokoll kompakt - wie Pruefstand, Leuchtfeuer
   und Fadenzaehler (25.10.2026). "Ausloten" oben im Pult bleibt gross.
   Rueckweg: diesen Block entfernen. */
.lq-echolot .lq-echolot__tore .gt {
  --gt-schrift: .78rem;
  --gt-luft-y: .55em;
  --gt-luft-x: 1.35em;
  --gt-wand: 6px;
  --gt-tiefe: 46px;
}
.lq-echolot .lq-echolot__tor { display: flex; }
.lq-echolot .a11y-report__action-hinweis,
.lq-echolot .a11y-report__action-status { flex: 1 1 100%; margin: 0; font-size: .84rem; line-height: 1.5; color: var(--e-leise); }
.lq-echolot .a11y-report__action-hinweis:empty,
.lq-echolot .a11y-report__action-status:empty { display: none; }
.lq-echolot .a11y-report__action-hinweis strong { color: var(--e-text); font-weight: 600; overflow-wrap: anywhere; }
.lq-echolot .a11y-report__action-status { color: var(--e-text); }
.lq-echolot .a11y-report__action-status.is-error { padding-left: .8rem; border-left: 3px solid var(--e-kritisch); color: var(--e-kritisch); }
.lq-echolot .gt.is-loading { cursor: progress; }
@media (max-width: 30rem) {
  .lq-echolot .lq-echolot__tor { flex: 1 1 100%; }
  .lq-echolot .lq-echolot__tor .gt { width: 100%; }
  .lq-echolot .gt { --gt-luft-x: 1.1em; }
  .lq-echolot .gt__mass,
  .lq-echolot .gt__tor-schild { white-space: normal; text-align: center; }
}