/* =========================================================================
   QUADRONET Layout - Inhaltselement "Werkzeug-Wand"
   -------------------------------------------------------------------------
   26.10.2026. Markup: Resources/Private/ContentElements/Werkzeugwand.html.
   Erste Verwendung: Seite "Hilfe" - je Werkzeug ein Garagentor, darunter
   die Werkstatt mit dem Anfrage-Tor.

   Idee: eine Hallenwand mit Toren. Die Wand ist eine Karte wie das Pult der
   Checker (Verlauf, orange Kante, Passermarke), darin feine Fugen; die Tore
   stehen im Raster, ueber jedem eine Hausnummer (01, 02 ...), darunter ein
   Satz zum Werkzeug. Die Tore selbst kommen aus 55-garagentor.css.

   BEWUSST OHNE @layer und alles unter .lq-wand - wie 90-echolot.css.
   Eingebunden per f:asset.css nur auf Seiten mit dem Element.

   Kontraste auf dem hellsten Punkt der Wand (#22384A): Text #EAF4FF 10,9:1,
   leise #9FC0D8 6,3:1, Nummer #FFA94D 6,4:1.
   ========================================================================= */

.lq-wand {
  --w-text:   var(--hell, #EAF4FF);
  --w-leise:  var(--hell-2, #9FC0D8);
  --w-orange: var(--orange, #FF8800);
  --w-akzent: var(--orange-hell, #FFA94D);
  --w-linie:  var(--qn-linie-fein, rgba(190, 215, 235, .18));
  --w-schrift: var(--qn-schriftfamilie, "IBM Plex Sans", system-ui, sans-serif);
  --w-titel:  var(--qn-schriftfamilie-ueberschrift, "Bebas Neue", sans-serif);
  --w-karte:  linear-gradient(160deg, #22384A 0%, #1B2B38 60%, #17242F 100%);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--w-text);
  font-family: var(--w-schrift);
}
.lq-wand *,
.lq-wand *::before,
.lq-wand *::after { box-sizing: border-box; }

.lq-wand__einleitung { max-width: 62ch; }
.lq-wand__einleitung > :first-child { margin-top: 0; }
.lq-wand__einleitung > :last-child { margin-bottom: 0; }

/* ----- Die Wand --------------------------------------------------------- */
.lq-wand__wand {
  position: relative;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--w-linie);
  border-left: 3px solid var(--w-orange);
  border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, transparent 0 47px, rgba(234, 244, 255, .035) 47px 48px),
    var(--w-karte);
  box-shadow: var(--sch-blatt, 0 10px 30px -14px rgba(0, 0, 0, .66));
}
.lq-wand__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-wand__tore {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(1.2rem, 2.6vw, 1.8rem) clamp(1rem, 2.4vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lq-wand__feld {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: .55rem;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}
.lq-wand__feld::before { content: none; }

/* Hausnummer ueber dem Tor */
.lq-wand__nr {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font: 500 .66rem/1.2 var(--w-schrift);
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
  color: var(--w-akzent);
}
.lq-wand__nr::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--w-linie), transparent);
}

/* Tore: volle Feldbreite, alle gleich hoch (mit und ohne Zeile hinter dem
   Tor waeren sie sonst verschieden), Beschriftung darf umbrechen und lange
   Woerter ("Barrierefreiheit") trennen - sonst ragt das Tor am Telefon
   aus der Wand. */
.lq-wand .lq-wand__feld .gt { width: 100%; }
.lq-wand .lq-wand__feld .gt__buehne { min-height: 8.2rem; }
.lq-wand .gt__tor-schild,
.lq-wand .gt__mass { white-space: normal; text-align: center; hyphens: auto; overflow-wrap: break-word; }

.lq-wand__text {
  max-width: none;
  margin: 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--w-leise);
  hyphens: auto;
}

/* ----- Werkstatt (Anfrage) ---------------------------------------------- */
.lq-wand__werkstatt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 2rem;
  padding: 1.3rem 0 0;
  border-top: 1px solid var(--w-linie);
}
.lq-wand__werkstatt-text { flex: 1 1 22rem; min-width: 0; }
.lq-wand__kicker {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 .4rem;
  font: 500 .72rem/1.5 var(--w-schrift);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--w-leise);
}
.lq-wand__kicker::before {
  content: "";
  width: .6em;
  height: .6em;
  background: var(--w-orange);
  transform: rotate(8deg);
}
.lq-wand__satz {
  max-width: 52ch;
  margin: 0;
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  line-height: 1.6;
  color: var(--w-text);
  text-wrap: pretty;
}
.lq-wand__werkstatt-tore { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ----- Papier-Abschnitt (frame-m-paper) ---------------------------------- */
.frame-m-paper .lq-wand { --w-text: var(--ink, #16242F); --w-leise: var(--dunkel-2, #4C6072); --w-akzent: var(--orange-ink, #A35700); --w-linie: rgba(22, 36, 47, .16); }
.frame-m-paper .lq-wand__wand { background: repeating-linear-gradient(180deg, transparent 0 47px, rgba(22, 36, 47, .05) 47px 48px), #fff; box-shadow: 0 10px 30px -18px rgba(22, 36, 47, .4); }

/* ----- Telefon ------------------------------------------------------------ */
@media (max-width: 30rem) {
  .lq-wand .gt { --gt-luft-x: 1.2em; letter-spacing: .03em; }
  .lq-wand__werkstatt-tore,
  .lq-wand__werkstatt-tore .gt { width: 100%; }
}

/* ----- Kontrast, Druck ------------------------------------------------------ */
@media (prefers-contrast: more) {
  .lq-wand { --w-leise: var(--hell, #EAF4FF); --w-linie: rgba(234, 244, 255, .55); }
}
@media (forced-colors: active) {
  .lq-wand__wand { background: Canvas; border-color: CanvasText; }
  .lq-wand__passer { display: none; }
}
@media print {
  .lq-wand__wand { background: #fff; box-shadow: none; border-color: #999; }
  .lq-wand__werkstatt { display: none; }
}