/* LMG Produktseite - der Rahmen um den Zaunplaner
 *
 * Verbindlich ist Kontext/Brandkit/BRAND.md. Die Seite laeuft auf dem Blog
 * im Namespace .fa-page und bringt hier nur das mit, was das Blog-Kit
 * nicht abdeckt: das Sektionsraster, den Hero und die Bausteine dieser
 * einen Seite.
 *
 * Warum ein eigener Namensraum .lmgs- und nicht .fa-:
 * Das Child-Theme belegt 115 .fa-*-Klassen. Ein zweiter Satz unter
 * demselben Praefix waere eine Kollision, die erst live auffaellt.
 *
 * Warum eine eigene Datei und nicht konfigurator.css:
 * Der Planer ist ein Baustein, der auch woanders stehen kann. Die Seite
 * ist die Seite. Beide werden getrennt ausgeliefert und getrennt geladen -
 * wer nur den Shortcode [fa_lmg_konfigurator] einbaut, bekommt diese
 * Datei gar nicht erst.
 *
 * Token-Herkunft: Live liefert blog-kit.css die Werte als --kit-*, die
 * Entwicklungsumgebung ueber docker/mu-plugins/dev-brandkit.php. Der
 * Ableitungsblock unten liest zuerst das Kit und faellt sonst auf die
 * Werte aus BRAND.md zurueck. Die Fallbacks sind kein Ersatzdesign,
 * sondern dieselben Zahlen - sie verhindern nur, dass eine Seite ohne
 * Kit unlesbar wird.
 */

.lmgs {
  /* --- Flaechen und Text (BRAND.md 2) --- */
  --lmgs-bg: var(--kit-bg, var(--bg, #FFFFFF));
  --lmgs-surf: var(--kit-surf, var(--surf, #F7F5F3));
  --lmgs-fg: var(--kit-fg, var(--fg, #232125));
  --lmgs-mut: var(--kit-mut, var(--mut, #626262));
  --lmgs-line: var(--kit-line, var(--line, #DDDAD6));
  --lmgs-line-2: var(--kit-line-2, var(--line-2, #B8B7B8));

  /* --- Marke --- */
  --lmgs-acc: var(--kit-acc, var(--acc, #A2601F));
  --lmgs-acc-ink: var(--kit-acc-ink, var(--acc-ink, #FFFFFF));
  --lmgs-acc-deep: var(--kit-acc-deep, var(--acc-deep, #C4672F));
  --lmgs-brand: var(--kit-brand, var(--brand, #3B6443));
  --lmgs-brand-dark: var(--kit-brand-dark, var(--brand-dark, #3A5940));
  --lmgs-neg: var(--kit-neg, var(--neg, #A32C1E));

  /* --- Schrift (BRAND.md 3) ---
     Vollstaendige Stacks als Fallback, nicht "sans-serif": Sonst laeuft
     die Seite ohne Kit in der Systemschrift und sieht nach nichts aus. */
  --lmgs-display: var(--kit-display, var(--display, "Archivo Narrow", "Arial Narrow", Arial, sans-serif));
  --lmgs-body: var(--kit-body, var(--body, "IBM Plex Sans", "Segoe UI", Arial, sans-serif));
  --lmgs-mono: var(--kit-mono, var(--mono, "IBM Plex Mono", Consolas, ui-monospace, monospace));

  /* --- Formen (BRAND.md 4) ---
     Fest, nicht aus dem Kit: Das Blog-Kit liefert in seiner jetzigen Stufe
     ausdruecklich keine Raster- und Formtokens. */
  --lmgs-r: 10px;
  --lmgs-r-card: 14px;
  --lmgs-r-btn: 10px;
  --lmgs-r-pill: 999px;
  --lmgs-sh-1: 0 1px 2px rgba(35, 33, 37, .06), 0 2px 8px rgba(35, 33, 37, .06);
  --lmgs-sh-2: 0 12px 28px rgba(35, 33, 37, .10);

  /* --- Raster --- */
  --lmgs-wrap: 1180px;
  --lmgs-measure: 68ch;
  --lmgs-pad-x: 24px;
  --lmgs-sektion: 96px;

  color: var(--lmgs-fg);
  font-family: var(--lmgs-body);
  font-size: 17px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .lmgs {
    --lmgs-pad-x: 16px;
    --lmgs-sektion: 56px;
    font-size: 16px;
  }
}

/* ---------- Sektionsraster ----------
 *
 * Eine Sektion setzt den vertikalen Abstand, .lmgs-wrap die Breite. Beide
 * getrennt, damit der Planer ausbrechen kann, ohne den Rhythmus zu
 * verlieren.
 */

.lmgs-sektion { padding-block: var(--lmgs-sektion); }
.lmgs-sektion--eng { padding-block: 48px; }
.lmgs-sektion--soft { background: var(--lmgs-surf); }

.lmgs-wrap {
  max-width: var(--lmgs-wrap);
  margin-inline: auto;
  padding-inline: var(--lmgs-pad-x);
}

/* Der Planer braucht 1280 px, sonst wird die mittlere Spalte zerdrueckt.
   Kein margin-left:50% mit translateX(-50%) - das rechnet gegen die Breite
   des Elternelements und schiebt den Planer halb aus dem Bild, sobald der
   Elternteil selbst schon zentriert und schmal ist. Den Container
   aufweiten genuegt. */
.lmgs-wrap--planer {
  max-width: 1280px;
}

/* ---------- Typografie (BRAND.md 3) ---------- */

.lmgs h1,
.lmgs h2,
.lmgs h3 {
  font-family: var(--lmgs-display);
  color: var(--lmgs-fg);
  margin: 0;
  text-wrap: balance;
}

.lmgs h1 { font-size: 52px; font-weight: 700; line-height: 1.1; }
.lmgs h2 { font-size: 36px; font-weight: 600; line-height: 1.2; }
.lmgs h3 { font-size: 24px; font-weight: 600; line-height: 1.3; }

@media (max-width: 768px) {
  .lmgs h1 { font-size: 34px; }
  .lmgs h2 { font-size: 26px; }
  .lmgs h3 { font-size: 20px; }
}

.lmgs p { margin: 0; }
.lmgs p + p { margin-top: 16px; }
.lmgs-bilder h3 + p { margin-top: 16px; }
.lmgs-bilder + p { margin-top: 32px; }
.lmgs-hero .lmgs-autor { margin-top: 32px; }
.lmgs .lmgs-hero__aktionen { margin-bottom: 24px; }
/* Elementor-Texteditor färbt Links sonst wie die orange Schaltflächenfläche. */
.lmgs a.lmgs-btn,
.lmgs a.lmgs-btn:hover,
.lmgs a.lmgs-btn:focus-visible { color: var(--lmgs-acc-ink) !important; }

/* Lesebreite. Laengere Zeilen werden im Blog nicht gelesen. */
.lmgs-lese { max-width: var(--lmgs-measure); }

.lmgs-kicker {
  display: block;
  margin-bottom: 16px;
  font-family: var(--lmgs-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lmgs-mut);
}

.lmgs-klein { font-size: 14px; line-height: 1.5; color: var(--lmgs-mut); }

/* Masse, Nummern, Belegnummern - immer Mono mit stehenden Spalten. */
.lmgs-val {
  font-family: var(--lmgs-mono);
  font-variant-numeric: tabular-nums;
}

/* Der Kopf einer Sektion. Ueberschrift plus ein Absatz, mehr nicht. */
.lmgs-kopf { margin-bottom: 48px; }
.lmgs-kopf p { margin-top: 16px; color: var(--lmgs-mut); }

/* ---------- Hero ----------
 *
 * Situation vor Werkzeug: erst das Foto der Anwendung, dann der Planer.
 * Orange traegt hier genau eine Flaeche - den Knopf. Der Rest ist Text
 * auf Weiss, damit das Foto die Farbe setzt.
 */

.lmgs-hero { padding-block: 64px 0; }

@media (max-width: 768px) {
  .lmgs-hero { padding-block: 32px 0; }
}

.lmgs-hero h1 { max-width: 18ch; }

.lmgs-hero__text {
  max-width: var(--lmgs-measure);
  margin-top: 24px;
  color: var(--lmgs-mut);
}

.lmgs-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  margin-top: 32px;
}

.lmgs-hero__bild {
  margin-top: 48px;
  border-radius: var(--lmgs-r-card);
  overflow: hidden;
  background: var(--lmgs-surf);
}

.lmgs-hero__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Der Zaun steht im unteren Bilddrittel, das Wohnmobil darueber. Ein
     mittiger Crop wuerde den Zaun anschneiden. */
  object-position: center 58%;
}

@media (max-width: 600px) {
  .lmgs-hero__bild img { aspect-ratio: 4 / 3; }
}

/* Die Bildunterschrift sagt, was wirklich abgebildet ist. Die Fotos
   zeigen die Bestandslinie mit 110 cm langer Kante, der Planer die neue
   Groesse - das gehoert dazugeschrieben, nicht verschwiegen. */
.lmgs-bildtext {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lmgs-mut);
}

/* ---------- Knoepfe ----------
 *
 * Orange handelt. Auf dieser Seite gibt es genau zwei Handlungen: zum
 * Planer springen und im Planer bestellen. Alles andere ist Sekundaer.
 */

.lmgs-btn {
  display: inline-block;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--lmgs-r-btn);
  background: var(--lmgs-acc);
  color: var(--lmgs-acc-ink);
  font-family: var(--lmgs-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.lmgs-btn:hover,
.lmgs-btn:focus-visible {
  background: var(--lmgs-acc-deep);
  color: var(--lmgs-acc-ink);
  text-decoration: none;
}

/* Sekundaer ist ein Textlink mit Pfeil, keine zweite Flaeche. Zwei
   gleichwertige Knoepfe nebeneinander heben sich gegenseitig auf. */
.lmgs-link {
  color: var(--lmgs-acc);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.lmgs-link:hover { color: var(--lmgs-acc-deep); }

/* ---------- Schritte ---------- */

.lmgs-schritte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  counter-reset: lmgs-schritt;
}

@media (max-width: 768px) {
  .lmgs-schritte { grid-template-columns: 1fr; gap: 24px; }
}

.lmgs-schritt { counter-increment: lmgs-schritt; }

/* Gruen kennzeichnet: die Nummer ist eine Auszeichnung, keine Handlung
   und kein Status. Deshalb Markenfarbe, nicht Orange. */
.lmgs-schritt::before {
  content: counter(lmgs-schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: var(--lmgs-r-pill);
  background: var(--lmgs-brand);
  /* Grundflaechenfarbe auf Markenflaeche - kein roher Hexwert im Layout
     (BRAND.md Pruefliste 1). Weiss auf #3B6443 traegt 6,80:1. */
  color: var(--lmgs-bg);
  font-family: var(--lmgs-mono);
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.lmgs-schritt h3 { margin-bottom: 8px; }
.lmgs-schritt p { color: var(--lmgs-mut); }

/* ---------- Bildreihe ---------- */

.lmgs-bilder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.lmgs-bilder--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 768px) {
  .lmgs-bilder,
  .lmgs-bilder--zwei { grid-template-columns: 1fr; }
}

/* Die Karten stehen nebeneinander und muessen unten auf einer Linie
   enden. Die Bilder sind gleich hoch, die Bildunterschriften nicht -
   ohne Flex endet jede Karte woanders und die Reihe franst aus. */
.lmgs-bild {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--lmgs-r-card);
  overflow: hidden;
  background: var(--lmgs-surf);
}

.lmgs-bild figcaption { flex: 1; }

.lmgs-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.lmgs-bild figcaption {
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lmgs-mut);
  background: var(--lmgs-bg);
}

/* Ein Bild, das die Anwendung zeigt, darf breiter stehen als eins, das
   ein Bauteil zeigt. */
.lmgs-bild--breit { grid-column: span 2; }
.lmgs-bild--breit img { aspect-ratio: 16 / 9; }

@media (max-width: 768px) {
  .lmgs-bild--breit { grid-column: auto; }
  .lmgs-bild--breit img { aspect-ratio: 4 / 3; }
}

/* ---------- Masstabelle (BRAND.md 6) ---------- */

.lmgs-tabelle-rahmen { overflow-x: auto; }

/* Nicht ueber die volle Containerbreite: Bei 1180 px stuenden Bezeichnung
   und Wert so weit auseinander, dass die Zeile nicht mehr zu lesen ist. */
.lmgs-tabelle {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
}

.lmgs-tabelle caption {
  padding-bottom: 12px;
  text-align: left;
  caption-side: top;
}

.lmgs-tabelle th,
.lmgs-tabelle td {
  padding: 0 16px;
  height: 40px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--lmgs-line);
  vertical-align: middle;
}

/* Die Tabelle hat keinen thead: Jede Zeile ist ein Merkmal, das th ist
   der Zeilenkopf. Deshalb hier Brotschrift - die Label-Geometrie aus
   BRAND.md (Mono, Versalien, .18em) gehoert an Spaltenkoepfe, und die
   gibt es hier nicht. Mono traegt der Wert, nicht die Bezeichnung. */
.lmgs-tabelle th {
  font-weight: 400;
  color: var(--lmgs-fg);
  white-space: nowrap;
}

/* Alle Zahlenspalten in Mono mit tabular-nums, damit die Spalten stehen. */
.lmgs-tabelle td {
  font-family: var(--lmgs-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lmgs-tabelle tr:last-child th,
.lmgs-tabelle tr:last-child td { border-bottom: 0; }

/* ---------- Kartenraster ---------- */

.lmgs-karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 768px) {
  .lmgs-karten { grid-template-columns: 1fr; }
}

.lmgs-karte {
  padding: 24px;
  border-radius: var(--lmgs-r-card);
  background: var(--lmgs-surf);
  box-shadow: var(--lmgs-sh-1);
}

.lmgs-karte h3 { margin-bottom: 12px; }
.lmgs-karte p { color: var(--lmgs-mut); }

/* Die Marke kennzeichnet, sie meldet nichts. Eine gruene Kante hebt eine
   Karte hervor, ohne sie zu einem Statusfeld zu machen. */
.lmgs-karte--marke { border-left: 3px solid var(--lmgs-brand); }

/* ---------- Grenzen ----------
 *
 * Was das Produkt nicht kann, steht hier - nicht im Kleingedruckten.
 * Status ueber Symbol plus Text, nie ueber Farbe allein (BRAND.md 2).
 */

.lmgs-grenzen { display: grid; gap: 16px; }

.lmgs-grenze {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 24px;
  border: 1px solid var(--lmgs-line);
  border-radius: var(--lmgs-r);
  background: var(--lmgs-bg);
}

.lmgs-grenze__zeichen {
  flex: none;
  font-family: var(--lmgs-mono);
  font-weight: 500;
  color: var(--lmgs-mut);
}

.lmgs-grenze p { font-size: 15px; }
.lmgs-grenze b { font-weight: 500; }

/* Der Haftungshinweis ist die eine echte Warnung auf der Seite. Rot ist
   laut Brand ausschliesslich fuer so etwas da - und auch hier traegt das
   Wort, nicht die Farbe. */
.lmgs-grenze--warnung { border-color: var(--lmgs-neg); }
.lmgs-grenze--warnung .lmgs-grenze__zeichen { color: var(--lmgs-neg); }

/* ---------- FAQ ---------- */

.lmgs-faq { display: grid; gap: 0; }

.lmgs-faq__item {
  border-bottom: 1px solid var(--lmgs-line);
}

.lmgs-faq__item:first-child { border-top: 1px solid var(--lmgs-line); }

.lmgs-faq__item summary {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 24px 0;
  font-family: var(--lmgs-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.lmgs-faq__item summary::-webkit-details-marker { display: none; }

/* Das Zeichen wechselt mit dem Zustand - Symbol plus sichtbarer Text,
   nicht Farbe. */
.lmgs-faq__item summary::after {
  content: "+";
  flex: none;
  font-family: var(--lmgs-mono);
  font-weight: 500;
  color: var(--lmgs-acc);
}

.lmgs-faq__item[open] summary::after { content: "\2212"; }

.lmgs-faq__antwort {
  max-width: var(--lmgs-measure);
  padding-bottom: 24px;
  color: var(--lmgs-mut);
}

/* ---------- Autor ----------
 *
 * Pflicht laut Kontext/Schreibstil.md. Die Klassen des Blog-Kits heissen
 * .fa-author-card; hier steht nur, was fehlt, wenn das Kit nicht greift.
 */

.lmgs-autor {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--lmgs-r-card);
  background: var(--lmgs-surf);
}

@media (max-width: 600px) {
  .lmgs-autor { flex-direction: column; gap: 16px; }
}

.lmgs-autor img {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: var(--lmgs-r-pill);
  object-fit: cover;
}

.lmgs-autor__name {
  font-family: var(--lmgs-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.lmgs-autor__name small {
  display: block;
  margin-top: 4px;
  font-family: var(--lmgs-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--lmgs-mut);
}

.lmgs-autor__text { margin-top: 12px; color: var(--lmgs-mut); }

/* ---------- Bedienbarkeit ----------
 *
 * Sichtbarer Fokus ist Pflicht. outline:none ohne Ersatz ist der
 * haeufigste Barrierefehler.
 */

.lmgs :focus-visible {
  outline: 2px solid var(--lmgs-acc);
  outline-offset: 2px;
}

/* Der Sprung zum Planer darf nicht unter dem Woodmart-Header landen. Der
   ist zwar 197 px hoch, klebt beim Scrollen aber praktisch nicht mit:
   --wd-header-sticky-h rechnet sich aus lauter .00001px plus Rahmen. Ein
   Wert aus der Abstandsleiter genuegt, 120 px waeren geraten. */
.lmgs [id] { scroll-margin-top: 32px; }

@media (prefers-reduced-motion: no-preference) {
  .lmgs { scroll-behavior: smooth; }
}

/* ---------- Gegenregeln zum Blog-Kit ----------
 *
 * Das Blog-Kit setzt blogweit mit !important:
 *   body, button, input, select, textarea { font-family: var(--kit-body) }
 *   h1..h6, .entry-title, .title            { font-family: var(--kit-display) }
 *
 * Der zweite Teil ist erwuenscht. Der erste trifft die Knoepfe dieser
 * Seite, die laut BRAND.md Display 600 tragen. Deshalb hier gezielt
 * zurueckgeholt - mit derselben Waffe, aber engerem Selektor.
 */

.fa-page .lmgs .lmgs-btn,
.lmgs .lmgs-btn { font-family: var(--lmgs-display) !important; }

.fa-page .lmgs .lmgs-faq__item summary,
.lmgs .lmgs-faq__item summary { font-family: var(--lmgs-display) !important; }

/* Woodmart setzt auf Tabellen eigene Rahmen und Hintergruende. Die Seite
   bringt ihre eigene Masstabelle mit, sonst stehen die Zahlen in einem
   fremden Raster. */
.fa-page .lmgs .lmgs-tabelle,
.fa-page .lmgs .lmgs-tabelle th,
.fa-page .lmgs .lmgs-tabelle td {
  background: transparent;
}