/* =========================================================================
   QUADRONET Layout - Echolot: Lotprotokoll fuer die ganze Website
   -------------------------------------------------------------------------
   26.10.2026. Markup: Overrides/A11yChecker/Partials/Report/Crawl.html
   (vom CheckerController gerendert, von checker.js eingesetzt).
   Kopf, Zahl, Lotleine, Plakette und Zonen zeichnet 90-echolot.css
   (gleiche Klassen a11y-report__* wie beim Bericht einer Seite) - hier nur,
   was die Mehrseiten-Fassung zusaetzlich braucht: Kicker und Seitenliste.
   Eingebunden von Templates/Checker/Index.html direkt nach 90-echolot.css;
   nutzt dessen Variablen (--e-*).

   Seitenliste: echte Tabelle (Vorlesesoftware liest Zeile/Spalte), in
   einem beschrifteten, per Tastatur scrollbaren Bereich - am Telefon
   wischt man seitlich, statt dass die Seite querrollt.

   BEWUSST OHNE @layer und alles unter .lq-echolot - wie 90-echolot.css.
   ========================================================================= */

/* Kicker ueber dem Titel */
.lq-echolot .a11y-report--crawl .a11y-report__head::before {
  content: "Lotprotokoll · ganze Website";
  content: "Lotprotokoll · ganze Website" / "";
}

/* Der alte, von checker.js gebaute Bericht hatte einen eigenen Rahmen -
   die Mehrseiten-Fassung ist jetzt ein normales Lotprotokoll. */
.lq-echolot .a11y-report--crawl .a11y-report__findings-title { margin-top: .4rem; }

/* ----- Seitenliste ------------------------------------------------------- */
.lq-echolot .lq-lotliste {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--e-linie);
  border-radius: 3px;
  background: rgba(10, 16, 21, .3);
  -webkit-overflow-scrolling: touch;
}
.lq-echolot .lq-lotliste:focus { outline: none; }
.lq-echolot .lq-lotliste:focus-visible { outline: 3px solid var(--e-fokus); outline-offset: 3px; }

.lq-echolot .lq-lotliste__tabelle {
  width: 100%;
  min-width: 34rem;
  margin: 0;
  border-collapse: collapse;
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}
.lq-echolot .lq-lotliste__tabelle th,
.lq-echolot .lq-lotliste__tabelle td {
  padding: .6rem .75rem;
  border: 0;
  border-bottom: 1px solid var(--e-linie);
  text-align: right;
  vertical-align: top;
  background: none;
}
.lq-echolot .lq-lotliste__tabelle tbody tr:last-child > * { border-bottom: 0; }

.lq-echolot .lq-lotliste__tabelle thead th {
  position: sticky;
  top: 0;
  background: #17242F;
  font: 600 .64rem/1.3 var(--e-schrift);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--e-leise);
  hyphens: manual;
}
.lq-echolot .lq-lotliste__tabelle thead .lq-lotliste__kopf-seite { text-align: left; }
.lq-echolot .lq-lotliste__zone { border-top: 3px solid var(--_z) !important; }
.lq-echolot .lq-lotliste__zone--critical { --_z: var(--e-kritisch); }
.lq-echolot .lq-lotliste__zone--serious  { --_z: var(--e-schwer); }
.lq-echolot .lq-lotliste__zone--moderate { --_z: var(--e-moderat); }
.lq-echolot .lq-lotliste__zone--minor    { --_z: var(--e-gering); }

/* Seite: Pfad links, mit Ampel-Kante */
.lq-echolot .lq-lotliste__pfad {
  position: relative;
  padding-left: 1rem !important;
  text-align: left !important;
  font: 400 .8rem/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--e-text);
  overflow-wrap: anywhere;
}
.lq-echolot .lq-lotliste__pfad::before {
  content: "";
  position: absolute;
  left: 0; top: .45rem; bottom: .45rem;
  width: 3px;
  background: var(--_a, var(--e-leise));
}
.lq-echolot .lq-lotliste__zeile--good     { --_a: var(--e-gut); }
.lq-echolot .lq-lotliste__zeile--moderate { --_a: var(--e-moderat); }
.lq-echolot .lq-lotliste__zeile--poor     { --_a: var(--e-kritisch); }
.lq-echolot .lq-lotliste__zeile--fehler   { --_a: var(--e-leise); }
.lq-echolot .lq-lotliste__zeile:hover > * { background: rgba(255, 136, 0, .04); }

.lq-echolot .lq-lotliste__punkte {
  font: 400 1.35rem/1 var(--e-titel);
  color: var(--_a, var(--e-text));
}
.lq-echolot .lq-lotliste__zahl { font-weight: 600; }
.lq-echolot .lq-lotliste__zahl--critical { color: var(--e-kritisch); }
.lq-echolot .lq-lotliste__zahl--serious  { color: var(--e-schwer); }
.lq-echolot .lq-lotliste__zahl--moderate { color: var(--e-moderat); }
.lq-echolot .lq-lotliste__zahl--minor    { color: var(--e-gering); }
.lq-echolot .lq-lotliste__zahl.is-null   { color: var(--e-leise); font-weight: 400; }
.lq-echolot .lq-lotliste__grund { text-align: left !important; font-style: italic; color: var(--e-leise); }

/* Zahlenspalten mittig - die Zonen-Kanten oben stehen ueber der Zahl */
.lq-echolot .lq-lotliste__tabelle .lq-lotliste__zone,
.lq-echolot .lq-lotliste__tabelle .lq-lotliste__zahl { text-align: center; }

/* ----- Telefon: jede Seite eine Karte -------------------------------------
   Pfad oben, Punkte rechts daneben, darunter die vier Zonen mit Namen
   (data-label). Die Tabelle behaelt per role ihre Semantik. Kein
   Querwischen mehr noetig - vorher lagen die Zahlen rechts ausserhalb. */
@media (max-width: 36rem) {
  .lq-echolot .lq-lotliste { overflow: visible; }
  .lq-echolot .lq-lotliste__tabelle { min-width: 0; }
  .lq-echolot .lq-lotliste__tabelle,
  .lq-echolot .lq-lotliste__tabelle tbody { display: block; }
  .lq-echolot .lq-lotliste__tabelle thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .lq-echolot .lq-lotliste__zeile {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: .35rem .4rem;
    padding: .75rem .75rem .8rem 1rem;
    border-bottom: 1px solid var(--e-linie);
    position: relative;
  }
  .lq-echolot .lq-lotliste__zeile:last-child { border-bottom: 0; }
  .lq-echolot .lq-lotliste__zeile::before {
    content: "";
    position: absolute;
    left: 0; top: .6rem; bottom: .6rem;
    width: 3px;
    background: var(--_a, var(--e-leise));
  }
  .lq-echolot .lq-lotliste__tabelle .lq-lotliste__zeile > * { padding: 0; border: 0; }
  .lq-echolot .lq-lotliste__pfad { grid-column: 1 / 5; grid-row: 1; padding-left: 0 !important; }
  .lq-echolot .lq-lotliste__pfad::before { content: none; }
  .lq-echolot .lq-lotliste__tabelle .lq-lotliste__punkte { grid-column: 5; grid-row: 1; text-align: right; }
  .lq-echolot .lq-lotliste__tabelle .lq-lotliste__zahl {
    grid-row: 2;
    display: grid;
    gap: .1rem;
    padding: .35rem .2rem !important;
    border-top: 2px solid var(--_z) !important;
    background: rgba(10, 16, 21, .35);
    text-align: center;
  }
  .lq-echolot .lq-lotliste__zahl::before {
    content: attr(data-label);
    font: 600 .58rem/1.2 var(--e-schrift);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--e-leise);
  }
  .lq-echolot .lq-lotliste__zahl--critical { --_z: var(--e-kritisch); }
  .lq-echolot .lq-lotliste__zahl--serious  { --_z: var(--e-schwer); }
  .lq-echolot .lq-lotliste__zahl--moderate { --_z: var(--e-moderat); }
  .lq-echolot .lq-lotliste__zahl--minor    { --_z: var(--e-gering); }
  .lq-echolot .lq-lotliste__grund { grid-column: 1 / -1; grid-row: 2; }
}

/* ----- Kontrast, Druck ---------------------------------------------------- */
@media (forced-colors: active) {
  .lq-echolot .lq-lotliste,
  .lq-echolot .lq-lotliste__tabelle thead th { background: Canvas; border-color: CanvasText; }
  .lq-echolot .lq-lotliste__pfad::before { forced-color-adjust: none; background: CanvasText; }
}
@media print {
  .lq-echolot .lq-lotliste { overflow: visible; border-color: #999; background: #fff; }
  .lq-echolot .lq-lotliste__tabelle { min-width: 0; color: #000; }
  .lq-echolot .lq-lotliste__tabelle thead th { position: static; background: #eee; color: #000; }
}