/* LMG Zaunplaner
 *
 * Verbindlich ist Kontext/Brandkit/BRAND.md. Deshalb hier:
 *   - keine eigenen Markenfarben, nur Tokens des Brand Kits
 *     Ausnahme sind drei Materialfarben fuer die Zeichnung (--lmg-alu,
 *     --lmg-alu-kante, --lmg-teil) - dafuer hat das Kit keine Tokens, und
 *     das ist richtig so: Alu und 3D-Druckteile sind Materialdarstellung,
 *     keine Markenflaeche.
 *   - keine eigenen Schriften
 *   - keine Verlaeufe, kein Glas, kein Glow
 *   - hell, kein Dark Mode
 *   - Orange handelt, Gruen kennzeichnet
 *   - Masse, Nummern und Preise in Mono mit tabular-nums
 *
 * ---------------------------------------------------------------------
 * Warum die Tokens hier abgeleitet und nicht direkt benutzt werden
 * ---------------------------------------------------------------------
 *
 * Das Kit heisst an beiden Orten anders. Der Blog liefert es unter
 * PRAEFIGIERTEN Namen (--kit-acc, --kit-fg, --kit-mono, ...), die
 * Entwicklungsumgebung lieferte lange nur die unpraefigierten (--acc,
 * --fg, --mono, ...). Wer im Rumpf direkt var(--acc, #A2601F) schreibt,
 * bekommt live also immer den Fallback.
 *
 * Bei den Farben faellt das nicht auf, weil die Fallbacks zufaellig die
 * richtigen Hexwerte sind. Bei den SCHRIFTEN faellt es auf: aus
 * var(--display, sans-serif) wurde live Arial statt Archivo Narrow, aus
 * var(--mono, ui-monospace, monospace) Consolas statt IBM Plex Mono -
 * und die Mono-Zahlen sind laut BRAND.md Abschnitt 3 und 6 das
 * Signature-Element. Genau das Element ist live nie angekommen.
 *
 * Deshalb steht die Namensfrage jetzt an genau einer Stelle: der
 * Ableitungsblock in .fa-lmg. Er liest zuerst --kit-*, dann den
 * unpraefigierten Namen, und erst zuletzt den Wert aus BRAND.md. Der
 * Rumpf benutzt danach ausschliesslich die eigenen --lmg-*-Namen ohne
 * Fallback. Eine Variable darf sich dabei nicht selbst referenzieren -
 * --lmg-acc und --acc sind verschiedene Namen, das traegt (in Chrome
 * gegengeprueft, samt Kontrollprobe mit echter Selbstreferenz).
 *
 * In der Entwicklungsumgebung setzt docker/mu-plugins/dev-brandkit.php
 * beide Namensformen und bindet die WOFF2 des Live-Kits ein - ohne die
 * waere dort jede Farb- und Schriftbeurteilung wertlos.
 */

/* Aufteilung wie im Mockup: Bedienung links, Buehne in der Mitte, Ergebnis
 * rechts. Peter hat sich am 08.09.2026 fuer dieses Layout entschieden.
 *
 * Damit die mittlere Spalte nicht zerdrueckt wird, braucht der Container
 * Platz - auf dem Blog gibt Elementor 1200 px her. Fehlt der Platz, greift
 * der Breakpoint unten und die Buehne rueckt nach oben.
 */
.fa-lmg {
  /* ---------- Brand-Kit-Tokens ableiten ----------
   *
   * Reihenfolge: erst der Live-Name (--kit-*), dann der Name aus der
   * Entwicklungsumgebung (--*), zuletzt der Wert aus BRAND.md. Alle
   * Hexwerte stammen aus BRAND.md Abschnitt 2, die Schriftstapel aus
   * Abschnitt 3, Radien und Schatten aus Abschnitt 4 - nichts geraten.
   */

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

  /* Marke - Orange handelt, Gruen kennzeichnet */
  --lmg-acc:       var(--kit-acc,       var(--acc,       #A2601F));
  --lmg-acc-ink:   var(--kit-acc-ink,   var(--acc-ink,   #FFFFFF));
  --lmg-acc-deep:  var(--kit-acc-deep,  var(--acc-deep,  #C4672F));
  --lmg-acc-soft:  var(--kit-acc-soft,  var(--acc-soft,  #D67E29));

  --lmg-brand:      var(--kit-brand,      var(--brand,      #3B6443));
  --lmg-brand-dark: var(--kit-brand-dark, var(--brand-dark, #3A5940));
  --lmg-olive:      var(--kit-olive,      var(--olive,      #8EAC41));
  --lmg-lime:       var(--kit-lime,       var(--lime,       #B6C939));
  --lmg-lime-soft:  var(--kit-lime-soft,  var(--lime-soft,  #DCE189));

  /* Nur echte Fehler und Akutmeldungen. Es gibt bewusst keine
     Statusfarbe fuer "erledigt/OK" - Gruen ist Markenfarbe. */
  --lmg-neg: var(--kit-neg, var(--neg, #A32C1E));

  /* Schrift - BRAND.md Abschnitt 3. Die Fallbacks sind die vollen
     Stapel, nicht "sans-serif": greift der Fallback, soll immer noch
     Arial Narrow und Consolas dastehen und nicht irgendetwas. */
  --lmg-display: var(--kit-display, var(--display, 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif));
  --lmg-body:    var(--kit-body,    var(--body,    'IBM Plex Sans', 'Segoe UI', Arial, sans-serif));
  --lmg-mono:    var(--kit-mono,    var(--mono,    'IBM Plex Mono', Consolas, ui-monospace, monospace));

  /* Formen - BRAND.md Abschnitt 4. Fest gesetzt, nicht abgeleitet: das
     Blog-Kit liefert diese fuenf Namen nicht (nachgesehen in
     blog-kit.css, dort gibt es nur --fa-radius und --fa-shadow auf
     .fa-page). Ein var(--kit-r, ...) waere hier nur Zierde. */
  --lmg-r:      10px;
  --lmg-r-card: 14px;
  --lmg-r-btn:  10px;
  --lmg-sh-1: 0 1px 2px rgba(35, 33, 37, .06), 0 2px 8px rgba(35, 33, 37, .06);
  --lmg-sh-2: 0 12px 28px rgba(35, 33, 37, .10);

  /* Materialfarben der Zeichnung. Das Brand Kit hat dafuer keine Tokens,
     und das ist richtig so: Alu und die 3D-Druckteile sind
     Materialdarstellung, keine Markenflaeche. Bewusst unbunt gehalten,
     damit die Folienfarbe daneben wirkt - genauso, wie die Grundflaeche
     weiss bleibt, damit Folienfarben echt aussehen. */
  --lmg-alu: #C9C9CB;
  --lmg-alu-kante: #8F9092;
  --lmg-teil: #3A383C;

  display: grid;
  grid-template-columns: 256px minmax(0, 1fr) 296px;
  gap: 24px;
  align-items: start;
  color: var(--lmg-fg);
}

@media (max-width: 1200px) {
  .fa-lmg {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .fa-lmg__ergebnis { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .fa-lmg { grid-template-columns: 1fr; gap: 16px; }
}

.fa-lmg__steuerung,
.fa-lmg__buehne,
.fa-lmg__ergebnis {
  min-width: 0;
}

/* ---------- Karte ---------- */

.lmg-karte {
  background: var(--lmg-surf);
  border-radius: var(--lmg-r-card);
  box-shadow: var(--lmg-sh-1);
  overflow: hidden;
}

.lmg-karte > * + * { border-top: 1px solid var(--lmg-line); }

.lmg-kartenkopf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--lmg-bg);
}

.lmg-kartenkopf h2 {
  margin: 0;
  font-family: var(--lmg-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.lmg-val {
  font-family: var(--lmg-mono);
  font-variant-numeric: tabular-nums;
  color: var(--lmg-mut);
}

.lmg-klein { font-size: 14px; }

.lmg-block--hell { background: var(--lmg-bg); }

/* ---------- Bausteine ---------- */

.lmg-block { padding: 24px; }
.lmg-block + .lmg-block { border-top: 1px solid var(--lmg-line); }

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

.lmg-hint {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lmg-mut);
}

.lmg-hint b { color: var(--lmg-fg); font-weight: 500; }

/* ---------- Segmentwaehler ---------- */

.lmg-seg {
  display: flex;
  border: 1px solid var(--lmg-line-2);
  border-radius: var(--lmg-r-btn);
  overflow: hidden;
  background: var(--lmg-bg);
}

.lmg-seg button {
  flex: 1;
  padding: 12px 4px;
  border: 0;
  background: var(--lmg-bg);
  color: var(--lmg-fg);
  font-family: var(--lmg-mono);
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}

.lmg-seg button + button { border-left: 1px solid var(--lmg-line-2); }

/* Orange handelt: der aktive Zustand ist eine Handlungsflaeche. */
.lmg-seg button[aria-pressed="true"] {
  background: var(--lmg-acc);
  color: #fff;
  font-weight: 500;
}

.lmg-seg--hoch { flex-direction: column; }
.lmg-seg--hoch button { text-align: left; padding: 12px 16px; font-family: var(--lmg-body); font-size: 16px; }
.lmg-seg--hoch button + button { border-left: 0; border-top: 1px solid var(--lmg-line-2); }

/* ---------- Stepper ---------- */

.lmg-stepper {
  display: flex;
  border: 1px solid var(--lmg-line-2);
  border-radius: var(--lmg-r-btn);
  overflow: hidden;
  background: var(--lmg-bg);
}

.lmg-stepper button {
  width: 48px;
  border: 0;
  background: var(--lmg-surf);
  color: var(--lmg-fg);
  font-family: var(--lmg-mono);
  font-size: 20px;
  cursor: pointer;
}

.lmg-stepper button:hover { background: var(--lmg-acc); color: #fff; }

.lmg-stepper-zahl {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  background: var(--lmg-bg);
}

.lmg-stepper-zahl b {
  font-family: var(--lmg-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lmg-stepper-zahl span {
  margin-top: 4px;
  font-family: var(--lmg-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lmg-mut);
}

/* ---------- Presets ---------- */

.lmg-presets { display: grid; gap: 8px; }

.lmg-preset {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border: 1px solid var(--lmg-line-2);
  border-radius: var(--lmg-r);
  background: var(--lmg-bg);
  cursor: pointer;
  font-family: inherit;
}

.lmg-preset:hover { border-color: var(--lmg-acc); }
.lmg-preset b { display: block; font-size: 16px; color: var(--lmg-fg); }
.lmg-preset span { display: block; margin-top: 4px; font-size: 14px; color: var(--lmg-mut); }

/* ---------- Kontrollkaestchen ---------- */

.lmg-checks { display: flex; flex-direction: column; gap: 4px; }

.lmg-check {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 12px;
  margin: 0 -12px;
  border-radius: var(--lmg-r);
  font-size: 16px;
  cursor: pointer;
}

.lmg-check:hover { background: var(--lmg-bg); }
.lmg-check input { accent-color: var(--lmg-acc); flex: none; width: 16px; height: 16px; }

/* ---------- Buehne ---------- */

.fa-lmg__vorschau {
  overflow-x: auto;
  background: var(--lmg-surf);
  border-radius: var(--lmg-r-card);
  padding: 24px;
}

.lmg-svg { display: block; height: 320px; width: auto; }

/* Der Hinweis bleibt stehen, waehrend die Zeichnung darueber wegscrollt. */
.lmg-schiebe { position: sticky; left: 0; margin-top: 8px; }
.lmg-schiebe span { margin-right: 6px; color: var(--lmg-brand); }

.lmg-boden { stroke: var(--lmg-line-2); stroke-width: 3; }
.lmg-boden-schraffur { stroke: var(--lmg-line); stroke-width: 2; }

.lmg-rohr { fill: var(--lmg-alu); stroke: var(--lmg-alu-kante); stroke-width: 1.5; }
.lmg-eck { fill: var(--lmg-teil); }
.lmg-arm { stroke: var(--lmg-teil); stroke-width: 10; stroke-linecap: round; }
.lmg-clip { fill: var(--lmg-teil); }
.lmg-flex { fill: var(--lmg-teil); }
.lmg-stift { fill: var(--lmg-alu-kante); }
.lmg-oese { fill: var(--lmg-surf); stroke: var(--lmg-teil); stroke-width: 3; }
.lmg-tuchkante { fill: none; stroke: var(--lmg-alu-kante); stroke-width: 2; }
.lmg-mesh-gitter { stroke: rgba(35, 33, 37, .15); stroke-width: 1; fill: none; }

.lmg-nummer {
  font-family: var(--lmg-mono);
  font-size: 28px;
  fill: var(--lmg-mut);
}

.lmg-muster-grund { fill: var(--lmg-lime-soft); }
.lmg-muster-boden { fill: var(--lmg-olive); }
.lmg-muster-baum { fill: var(--lmg-brand); }
.lmg-muster-baum2 { fill: var(--lmg-brand-dark); }

.lmg-pano-himmel { fill: var(--lmg-lime-soft); }
.lmg-pano-fern { fill: var(--lmg-olive); }
.lmg-pano-mittel { fill: var(--lmg-brand); }
.lmg-pano-nah { fill: var(--lmg-brand-dark); }

/* ---------- Bespannung ---------- */

.fa-lmg__buehne { display: grid; gap: 24px; }

.lmg-farbgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

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

.lmg-farbspalte { display: flex; flex-direction: column; gap: 12px; }

.lmg-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.lmg-sw {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--lmg-line-2);
  border-radius: 4px;
  cursor: pointer;
}

.lmg-sw[aria-pressed="true"] {
  border-color: var(--lmg-acc);
  box-shadow: 0 0 0 2px var(--lmg-acc);
}

/* Farbchip nach BRAND.md Abschnitt 6 - das Signature-Element der Marke. */
.lmg-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }

.lmg-chip i {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--lmg-line-2);
  border-radius: 4px;
}

.lmg-chip-nr {
  font-family: var(--lmg-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--lmg-fg);
}

.lmg-chip-name { color: var(--lmg-mut); }

.lmg-hint--klein { font-size: 13px; }

/* ---------- Ergebnis ---------- */

.lmg-kopf {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 24px;
  background: var(--lmg-bg);
}

.lmg-gross {
  flex: none;
  font-family: var(--lmg-mono);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lmg-kopf-text { font-size: 14px; line-height: 1.4; color: var(--lmg-mut); }

.lmg-kopf-text b {
  display: block;
  font-family: var(--lmg-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lmg-fg);
}

.lmg-zeilen { display: flex; flex-direction: column; }

.lmg-zeile {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  font-size: 14px;
  line-height: 40px;
}

.lmg-zeile + .lmg-zeile { border-top: 1px solid var(--lmg-line); }
.lmg-k { color: var(--lmg-mut); }

.lmg-v {
  font-family: var(--lmg-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--lmg-fg);
}

.lmg-summe { border-top: 2px solid var(--lmg-fg); }
.lmg-summe .lmg-k { font-family: var(--lmg-display); font-weight: 600; font-size: 17px; color: var(--lmg-fg); }
.lmg-summe .lmg-v { font-size: 24px; font-weight: 500; }

/* Status ueber Symbol plus Text, nie ueber Farbe allein. */
.lmg-note {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lmg-mut);
  background: var(--lmg-bg);
  border-top: 1px solid var(--lmg-line);
}

.lmg-note-zeichen {
  flex: none;
  font-family: var(--lmg-mono);
  font-weight: 500;
  color: var(--lmg-brand);
}

.lmg-note--fehler { color: var(--lmg-fg); }
.lmg-note--fehler .lmg-note-zeichen { color: var(--lmg-neg); }

/* ---------- Bedienbarkeit ---------- */

/* Sichtbarer Fokus ist Pflicht. outline:none ohne Ersatz ist der
   haeufigste Barrierefehler in Konfiguratoren. */
.fa-lmg :focus-visible {
  outline: 2px solid var(--lmg-acc);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fa-lmg * { animation: none !important; transition: none !important; }
}

/* ---------- Motiv je Modul ---------- */

.lmg-motivgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  background: var(--lmg-bg);
}

@media (max-width: 992px) {
  .lmg-motivgrid { grid-template-columns: 1fr; }
  .lmg-picker { border-left: 0 !important; border-top: 1px solid var(--lmg-line); }
}

.lmg-modulstreifen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  padding: 24px;
}

.lmg-modulchip {
  width: 56px;
  padding: 8px 0;
  border: 1px solid var(--lmg-line-2);
  border-radius: var(--lmg-r);
  background: var(--lmg-bg);
  cursor: pointer;
}

.lmg-modulchip b {
  font-family: var(--lmg-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--lmg-mut);
}

.lmg-modulchip[aria-pressed="true"] {
  border-color: var(--lmg-acc);
  box-shadow: 0 0 0 2px var(--lmg-acc);
}

.lmg-modulchip[aria-pressed="true"] b { color: var(--lmg-acc); }
.lmg-modulchip:disabled { opacity: .55; cursor: default; }

.lmg-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-left: 1px solid var(--lmg-line);
}

.lmg-swatches--motiv { grid-template-columns: repeat(4, 1fr); }

.lmg-check--rand {
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--lmg-line);
  border-radius: 0;
}

/* ---------- Musterflaechen ----------
 *
 * Die Farben kommen aus den Flaechen-Tokens des Kits. --olive, --lime und
 * --lime-soft sind laut BRAND.md ausdruecklich "nur Flaeche" - genau dafuer.
 * Laut Konzept sind Muster Vorlagen mit Farbvariante; die Varianten kommen
 * mit dem Motiv-Designer.
 */
.lmg-mu-hell { fill: var(--lmg-lime-soft); }
.lmg-mu-mittel { fill: var(--lmg-olive); }
.lmg-mu-dunkel { fill: var(--lmg-brand); }
.lmg-mu-tief { fill: var(--lmg-brand-dark); }
.lmg-mu-flaeche { fill: var(--lmg-surf); }
.lmg-mu-akzent { fill: var(--lmg-acc-deep); }
.lmg-mu-linie-dunkel { fill: none; stroke: var(--lmg-brand); stroke-width: 3; }
.lmg-mu-linie-mittel { fill: none; stroke: var(--lmg-olive); stroke-width: 3; }
.lmg-mu-schraffur { stroke: var(--lmg-line-2); stroke-width: 5; }

.lmg-sw--muster { overflow: hidden; background: var(--lmg-bg); }
.lmg-sw--muster svg { display: block; width: 100%; height: 100%; }

/* Miniatur im Modulchip: zeigt die Motivverteilung ueber die Kette. */
.lmg-modulchip { padding: 0; overflow: hidden; }
.lmg-modulchip svg,
.lmg-modulchip-pano { display: block; width: 100%; height: 36px; }
.lmg-modulchip-pano { background: var(--lmg-olive); }

.lmg-modulchip b {
  display: block;
  padding: 4px 0;
  border-top: 1px solid var(--lmg-line);
  background: var(--lmg-surf);
}

/* ---------- Ansichtsumschalter ---------- */

.lmg-ansicht {
  display: flex;
  flex: none;
  border: 1px solid var(--lmg-line-2);
  border-radius: var(--lmg-r-btn);
  overflow: hidden;
}

.lmg-ansicht button {
  padding: 8px 16px;
  border: 0;
  background: var(--lmg-bg);
  color: var(--lmg-mut);
  font-family: var(--lmg-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

.lmg-ansicht button + button { border-left: 1px solid var(--lmg-line-2); }
.lmg-ansicht button[aria-pressed="true"] { background: var(--lmg-acc); color: #fff; }

/* ---------- Bemassung ---------- */

.lmg-mass { stroke: var(--lmg-acc); stroke-width: 2.5; }

.lmg-masstext {
  font-family: var(--lmg-mono);
  font-size: 24px;
  fill: var(--lmg-mut);
}

.lmg-masstext--gross { font-size: 32px; font-weight: 500; fill: var(--lmg-fg); }
.lmg-masstext--akzent { font-size: 22px; fill: var(--lmg-acc); }

/* ---------- Verschnittbalken ---------- */

.lmg-balken {
  display: flex;
  height: 8px;
  margin-top: 12px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--lmg-line);
}

.lmg-balken i { display: block; height: 100%; }
/* Gruen kennzeichnet - hier den genutzten Anteil, nicht einen Status. */
.lmg-balken-genutzt { background: var(--lmg-brand); }
.lmg-balken-rest { background: var(--lmg-line-2); }

/* ---------- Bestellen ---------- */

.fa-lmg__ergebnis { display: grid; gap: 24px; }

.lmg-karte--bestellen { padding: 24px; }

/* Orange handelt: der Weg in den Warenkorb ist die Handlung auf dieser Seite. */
.lmg-knopf {
  display: block;
  width: 100%;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--lmg-r-btn);
  background: var(--lmg-acc);
  color: var(--lmg-acc-ink);
  font-family: var(--lmg-display);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

.lmg-knopf:hover { background: var(--lmg-acc-deep); }

.lmg-knopf:disabled {
  background: var(--lmg-line-2);
  cursor: not-allowed;
}

.lmg-bestellen { display: grid; gap: 16px; }

/* ---------- Eigenes Motiv ---------- */

.lmg-upload { display: grid; gap: 8px; }

.lmg-upload-feld {
  display: block;
  padding: 12px 16px;
  border: 1px dashed var(--lmg-line-2);
  border-radius: var(--lmg-r);
  background: var(--lmg-bg);
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}

.lmg-upload-feld:hover { border-color: var(--lmg-acc); }

/* Sichtbar fuer Hilfstechnik, unsichtbar im Layout - nicht display:none,
   sonst ist es mit der Tastatur nicht mehr erreichbar. */
.lmg-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lmg-upload-feld:focus-within {
  outline: 2px solid var(--lmg-acc);
  outline-offset: 2px;
}

.lmg-upload-feld { position: relative; }
.lmg-upload-text { display: block; color: var(--lmg-fg); }

.lmg-upload .lmg-note {
  padding: 12px 0 0;
  border-top: 0;
  background: transparent;
}

.lmg-modulchip-eigen {
  display: block;
  padding: 10px 0;
  font-family: var(--lmg-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lmg-mut);
  background: var(--lmg-bg);
}

.lmg-eigen { fill: var(--lmg-surf); stroke: var(--lmg-line-2); stroke-width: 2; stroke-dasharray: 12 8; }

.lmg-eigen-text {
  font-family: var(--lmg-mono);
  font-size: 32px;
  fill: var(--lmg-mut);
}

.lmg-modulchip-bild { display: block; width: 100%; height: 36px; object-fit: cover; }

/* ---------- Bogen-Ansicht ----------
 *
 * Klick auf die flache Vorschau oeffnet den Zaun aufgestellt. Dieselben
 * SVG-Module wie in der flachen Ansicht, nur im Raum gestellt - deshalb
 * stimmen Muster und Farben in beiden Ansichten ueberein.
 *
 * Kein Verlauf, kein Glas, kein Glow (BRAND.md Abschnitt 9). Die
 * Perspektive stellt das Produkt dar, sie ist keine Zierde.
 */

.fa-lmg__vorschau--klickbar { cursor: zoom-in; }

.fa-lmg__vorschau--klickbar:focus-visible {
  outline: 2px solid var(--lmg-acc);
  outline-offset: 2px;
}

.lmg-bogen {
  width: min(1200px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--lmg-r-card);
  background: var(--lmg-bg);
  box-shadow: var(--lmg-sh-2);
  color: var(--lmg-fg);
  overflow: auto;
}

.lmg-bogen::backdrop { background: rgba(35, 33, 37, .55); }

.lmg-bogen__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--lmg-line);
}

.lmg-bogen__titel {
  margin: 0;
  font-family: var(--lmg-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

/* Sekundaerknopf: Handlungsfarbe bleibt dem Bestellen vorbehalten. */
.lmg-bogen__zu {
  padding: 8px 16px;
  border: 1px solid var(--lmg-line-2);
  border-radius: var(--lmg-r-btn);
  background: transparent;
  color: var(--lmg-fg);
  font-family: var(--lmg-body);
  font-size: 14px;
  cursor: pointer;
}

.lmg-bogen__zu:hover { border-color: var(--lmg-fg); }

.lmg-bogen__buehne {
  --lmg-skala: 0.1;
  --lmg-buehne-hoehe: 320px;
  display: grid;
  place-items: center;
  height: var(--lmg-buehne-hoehe);
  padding: 24px;
  /* Etwas von schraeg oben - so sieht man den Bogen ueberhaupt als Bogen.
     Naeher herangeholt seit dem staerkeren Bogen (140 Grad): sonst laege die
     Tiefe zwar da, waere aber kaum abzulesen. */
  perspective: 1900px;
  perspective-origin: 50% 38%;
  overflow: hidden;
}

.lmg-bogen__szene {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(6deg);
}

.lmg-bogen__modul {
  position: absolute;
  top: calc(var(--lmg-h) * var(--lmg-skala) / -2 * 1px);
  left: calc(var(--lmg-b) * var(--lmg-skala) / -2 * 1px);
  width: calc(var(--lmg-b) * var(--lmg-skala) * 1px);
  height: calc(var(--lmg-h) * var(--lmg-skala) * 1px);
  transform:
    translate3d(
      calc(var(--lmg-x) * var(--lmg-skala) * 1px),
      0,
      calc(var(--lmg-z) * var(--lmg-skala) * 1px)
    )
    rotateY(var(--lmg-grad));
  transform-style: preserve-3d;
}

.lmg-bogen__svg { display: block; width: 100%; height: 100%; }

.lmg-bogen__fuss {
  margin: 0;
  padding: 0 24px 24px;
  border-top: 1px solid var(--lmg-line);
  padding-top: 16px;
}

@media (max-width: 768px) {
  .lmg-bogen { width: 96vw; }
  .lmg-bogen__kopf { padding: 12px 16px; }
  .lmg-bogen__buehne { padding: 16px; }
  .lmg-bogen__fuss { padding: 16px 16px 16px; }
}

/* Wer Bewegung reduziert haben will, bekommt die Ansicht flach - die
   Perspektive ist Beiwerk, der Inhalt bleibt derselbe. */
@media (prefers-reduced-motion: reduce) {
  .lmg-bogen__szene { transform: none; }
}

/* ---------- Gegenregel zum globalen !important des Blog-Kits ----------
 *
 * blog-kit.css Abschnitt 13 setzt die Schriftrollen fuer den ganzen Blog
 * ueber Elementselektoren mit !important:
 *
 *   body, button, input, select, textarea, ... { font-family: var(--kit-body) !important }
 *   h1..h6, ...                               { font-family: var(--kit-display) !important }
 *
 * Das ist dort richtig - der Rahmen des Themes laeuft sonst weiter auf
 * Lato und Poppins von Google. Es trifft aber jedes button-Element im
 * Konfigurator und zieht ihm seine Schrift ab. Betroffen waeren die
 * Mono-Knoepfe (Segmentwaehler, Stepper, Ansichtsumschalter) und der
 * Bestellknopf, der laut BRAND.md Abschnitt 3 Display 600 traegt.
 *
 * Author-!important gegen Author-!important entscheidet die Spezifitaet.
 * Der Elementselektor button hat 0,0,1 - der Klassenselektor unter
 * .fa-lmg liegt darueber, also genuegt hier !important mit .fa-lmg davor.
 *
 * Die h2 im Konfigurator (Kartenkopf, Bogen-Titel) brauchen nichts: das
 * Kit gibt ihnen Display, und Display ist genau das, was sie wollen.
 *
 * Nicht aufgefuehrt, weil das Kit dort dasselbe liefert, was hier steht:
 * .lmg-preset (font-family: inherit -> Body) und .lmg-bogen__zu (Body).
 * .lmg-sw und .lmg-modulchip tragen selbst keine Schrift; die Mono-Zahl
 * im Modulchip sitzt auf einem b, und b steht nicht in der Kit-Liste.
 */

.fa-lmg .lmg-seg button,
.fa-lmg .lmg-stepper button,
.fa-lmg .lmg-ansicht button {
  font-family: var(--lmg-mono) !important;
}

/* Muss NACH der Mono-Regel stehen: gleiche Spezifitaet, und der hohe
   Segmentwaehler traegt bewusst Brotschrift statt Mono. Ohne diese Zeile
   wuerde ihm das !important von oben die Mono aufzwingen. */
.fa-lmg .lmg-seg--hoch button {
  font-family: var(--lmg-body) !important;
}

.fa-lmg .lmg-knopf {
  font-family: var(--lmg-display) !important;
}

/* --- Farbwelten -----------------------------------------------------
   Ein Feld zeigt alle drei Toene einer Welt auf einmal: die Grundflaeche
   gross, Band und Zier als schmale Streifen darunter. Drei getrennte
   Punkte nebeneinander waeren drei Farben, keine Welt. */
.lmg-sw--welt,
.lmg-sw--eigen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: auto;
  min-width: 62px;
  padding: 4px 4px 5px;
  background: var(--bg, #fff);
  border: 1px solid var(--line-2, #B8B7B8);
  border-radius: 6px;
  cursor: pointer;
}

.lmg-sw--welt.lmg-sw--an,
.lmg-sw--eigen.lmg-sw--an {
  border-color: var(--acc-deep, #C4672F);
  box-shadow: inset 0 0 0 1px var(--acc-deep, #C4672F);
}

.lmg-sw__welt {
  display: block;
  width: 52px;
  height: 34px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.lmg-sw__welt span {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
}

.lmg-sw__welt span:first-child { bottom: 0; height: 11px; }
.lmg-sw__welt span:last-child { bottom: 12px; height: 3px; }

.lmg-sw__name {
  font-size: 11px;
  line-height: 1.2;
  color: var(--ink-2, #5C5C5C);
}

.lmg-sw--eigen {
  justify-content: center;
  font-size: 12px;
  color: var(--ink-2, #5C5C5C);
  min-height: 55px;
}

/* --- Die Vorschau bleibt stehen -------------------------------------
   Bespannung, Bodenform und Zeichenreihe stehen unter der Zeichnung.
   Wer dort etwas umstellt, hatte die Wirkung nicht im Blick - er musste
   erst wieder hochscrollen. Jetzt klebt die Zeichnung oben, und jede
   Aenderung ist sofort zu sehen.

   Nur bei genug Hoehe: Auf einem flachen Fenster nimmt eine haftende
   Zeichnung den Platz weg, den die Bedienung braucht. */
@media (min-width: 769px) and (min-height: 700px) {
  .lmg-karte--haftend {
    position: sticky;
    top: 12px;
    z-index: 3;
  }
}

/* Etwas flacher, sobald sie haftet - so bleibt unter ihr Platz fuer die
   Bedienung. Der Zaun bleibt in voller Hoehe im Bogen-Dialog. */
@media (min-width: 769px) and (max-height: 900px) {
  .lmg-karte--haftend .lmg-svg { height: 240px; }
}

/* Farbwelten kompakter: Sieben Felder sollen in eine Reihe passen,
   sonst schiebt die Auswahl allein schon die halbe Bedienung nach unten. */
.lmg-sw--welt,
.lmg-sw--eigen { min-width: 54px; padding: 3px 3px 4px; }
.lmg-sw__welt { width: 44px; height: 28px; }
.lmg-sw--eigen { min-height: 47px; }

/* --- Bodenform und Zeichen nebeneinander ----------------------------
   Untereinander schoben die drei Bloecke die Zeichnung so weit nach oben,
   dass man beim Umstellen nicht mehr sah, was passiert. Nebeneinander
   passt die ganze Bedienung unter die Vorschau. */
@media (min-width: 900px) {
  .lmg-bespannraster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .lmg-bespannraster > * + * { border-left: 1px solid var(--lmg-line); }
}

/* Die Knopfreihen umbrechen lassen, sonst quetscht sich "Hund, sitzend"
   in eine Spalte, die dafuer zu schmal ist. */
.lmg-bespannraster .lmg-seg { flex-wrap: wrap; }

/* Die Farbfelder stehen in einem festen Fuenferraster - richtig fuer
   Oracal-Punkte, falsch fuer sieben verschieden breite Weltfelder. Sie
   fliessen stattdessen und brechen erst um, wenn es eng wird. */
.lmg-swatches--welten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lmg-swatches--welten .lmg-sw { aspect-ratio: auto; }

/* Planer v2: approved standalone design integrated with the existing theme tokens.
 * Contrast against white: foreground 15.96:1, secondary 6.10:1,
 * orange 4.97:1, brand green 6.80:1. Product colors remain catalog data. */
.fa-lmg.lmg-v2 {
  grid-template-columns:minmax(0,1fr) 360px;
  gap:32px;
  max-width:1200px;
  margin:0 auto 120px;
  font-family:var(--lmg-body);
  font-size:16px;
  line-height:1.5}

.lmg-v2 * {
  box-sizing:border-box}
.lmg-v2 button,.lmg-v2 input,.lmg-v2 select {
  font-family:var(--lmg-body)}
.lmg-v2 button {
  text-transform:none;
  letter-spacing:normal;
  font-weight:400;
  font-style:normal;
  min-height:44px;
  cursor:pointer;
  touch-action:manipulation}
.lmg-v2 button:disabled {
  opacity:.45;
  cursor:not-allowed}
.lmg-v2 :focus-visible {
  outline:3px solid var(--lmg-acc);
  outline-offset:4px}
.lmg-v2 h2 {
  font-family:var(--lmg-display);
  font-weight:600;
  line-height:1.2}
.lmg-intro {
  grid-column:1/-1;
  padding:0 0 8px}
.lmg-intro h2 {
  font-size:52px;
  margin:8px 0 12px}
.lmg-intro p {
  color:var(--lmg-mut);
  margin:0}
.lmg-eyebrow {
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--lmg-brand)}

.lmg-v2 .fa-lmg__buehne {
  position:sticky;
  top:24px}
.lmg-v2 .lmg-karte--haftend {
  position:static;
  box-shadow:none;
  border:1px solid var(--lmg-line);
  overflow:hidden}
.lmg-v2 .lmg-kartenkopf {
  background:var(--lmg-surf);
  padding:24px 24px 16px}
.lmg-v2 .lmg-kartenkopf h2 {
  font-size:26px}
.lmg-v2 .lmg-kartenkopf [data-lmg-buehne-meta] {
  font-size:12px}
.lmg-v2 .lmg-karte>*+* {
  border-top:0}
.lmg-v2 .fa-lmg__vorschau {
  overflow:hidden;
  padding:0;
  cursor:default;
  min-width:0}
.lmg-v2 .lmg-plan-svg {
  display:block;
  width:100%;
  height:352px;
  overflow:hidden}
.lmg-plan-svg text {
  fill:var(--lmg-mut);
  font:14px var(--lmg-body)}
.lmg-plan-svg .lmg-val {
  font-family:var(--lmg-mono)}
.lmg-plan-linie {
  stroke:var(--lmg-brand);
  stroke-width:7;
  stroke-linecap:round;
  fill:none}
.lmg-plan-linie--aktiv {
  stroke:var(--lmg-acc)}
.lmg-plan-knoten {
  fill:var(--lmg-bg);
  stroke:var(--lmg-fg)}
.lmg-plan-schatten {
  fill:var(--lmg-line);
  opacity:.3}
.lmg-plan-auswahl {
  stroke:var(--lmg-acc);
  stroke-width:3;
  fill:none}
.lmg-ohne {
  fill:none}
.lmg-stift-hell {
  fill:white}
.lmg-plan-caption {
  text-align:center;
  font-size:12px;
  color:var(--lmg-mut);
  margin:8px 16px 16px}
.lmg-plan-seg {
  display:flex;
  gap:8px}
.lmg-plan-seg button {
  flex:1;
  border:1px solid var(--lmg-line-2);
  border-radius:10px;
  background:var(--lmg-bg);
  color:var(--lmg-fg);
  font-size:13px;
  padding:8px;
  line-height:1.3}
.lmg-plan-seg button[aria-pressed=true],.fa-lmg.lmg-v2 .lmg-designkarte[aria-pressed=true],.lmg-plan-module button[aria-pressed=true] {
  border-color:var(--lmg-acc);
  box-shadow:inset 0 0 0 1px var(--lmg-acc)}
.lmg-plan-seg button[aria-pressed=true]:after {
  content:' ✓';
  color:var(--lmg-acc)}
.lmg-v2 button:hover:not(:disabled) {
  border-color:var(--lmg-acc)}
[data-lmg-ansichten] {
  padding:0 24px}
[data-lmg-ansichten] .lmg-plan-seg {
  padding:4px;
  background:var(--lmg-bg);
  border:1px solid var(--lmg-line);
  border-radius:10px;
  gap:4px}
[data-lmg-ansichten] button {
  border-color:transparent;
  min-height:40px;
  padding:8px}
[data-lmg-ansichten] button[aria-pressed=true] {
  box-shadow:none;
  border-color:var(--lmg-line-2);
  background:var(--lmg-surf)}
[data-lmg-ansichten] button:after {
  display:none}
.lmg-plan-module {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  padding:0 16px 24px}
.lmg-plan-module button {
  width:44px;
  min-width:44px;
  padding:0;
  border:1px solid var(--lmg-line-2);
  border-radius:10px;
  background:var(--lmg-bg);
  font:14px var(--lmg-mono)}
[data-lmg-formen] {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 24px;
  background:var(--lmg-bg);
  border-top:1px solid var(--lmg-line)!important}
[data-lmg-formen]>span {
  font-size:14px;
  font-weight:500}
.lmg-kennzahlen {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:24px 0;
  border-bottom:1px solid var(--lmg-line)}
.lmg-kennzahlen>div {
  border-left:1px solid var(--lmg-line);
  padding:0 16px}
.lmg-kennzahlen>div:first-child {
  border:0;
  padding-left:0}
.lmg-kennzahlen strong {
  font:24px var(--lmg-mono);
  display:block}
.lmg-kennzahlen small {
  font-size:13px;
  color:var(--lmg-mut)}

.lmg-abschnitt {
  border-top:1px solid var(--lmg-line);
  scroll-margin-top:24px}
.lmg-abschnitt>summary {
  display:flex;
  align-items:center;
  gap:12px;
  list-style:none;
  cursor:pointer;
  min-height:72px}
.lmg-abschnitt>summary::-webkit-details-marker {
  display:none}
.lmg-abschnitt>summary>span {
  background:var(--lmg-surf);
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--lmg-mut);
  font:13px var(--lmg-mono)}
.lmg-abschnitt>summary h2 {
  font-size:24px;
  margin:0;
  flex:1}
.lmg-abschnitt>summary:after {
  content:'+';
  font-size:24px;
  color:var(--lmg-mut)}
.lmg-abschnitt[open]>summary:after {
  content:'−'}
.lmg-v2 .lmg-block {
  padding:0 0 24px;
  border:0;
  background:transparent}
.lmg-v2 .lmg-lbl {
  font:500 15px var(--lmg-body);
  letter-spacing:0;
  text-transform:none;
  margin-bottom:8px}
.lmg-v2 .lmg-hint {
  font-size:13px;
  line-height:1.5}
.lmg-v2 .lmg-seg {
  gap:8px;
  border:0;
  overflow:visible;
  flex-wrap:wrap;
  background:transparent}
.lmg-v2 .lmg-seg button {
  border:1px solid var(--lmg-line-2);
  border-radius:10px;
  font:14px var(--lmg-body);
  background:var(--lmg-bg);
  color:var(--lmg-fg);
  padding:8px;
  min-height:44px;
  flex:1}
.lmg-v2 .lmg-seg button[aria-pressed=true] {
  border-color:var(--lmg-acc);
  box-shadow:inset 0 0 0 1px var(--lmg-acc);
  background:var(--lmg-bg);
  color:var(--lmg-fg)}
.lmg-v2 .lmg-seg button[aria-pressed=true]:after {
  content:' ✓';
  color:var(--lmg-acc)}
.lmg-v2 .lmg-seg--hoch {
  flex-direction:row}
.lmg-v2 .lmg-stepper {
  max-width:200px}
.lmg-v2 .lmg-stepper button {
  background:var(--lmg-bg)}
.lmg-v2 .lmg-stepper button:hover {
  background:var(--lmg-surf);
  color:var(--lmg-fg)}
.lmg-v2 .lmg-stepper-zahl b {
  font-size:20px}
.lmg-v2 .lmg-stepper-zahl span {
  display:none}
.lmg-v2 .lmg-bespannraster {
  display:block}
.lmg-icon-mini {
  display:block;
  width:48px;
  height:32px;
  fill:var(--lmg-brand);
  margin:0 auto 8px}
.lmg-v2 .lmg-swatches--welten {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px}
.lmg-v2 .lmg-sw--welt {
  width:100%;
  height:auto;
  padding:4px;
  border-radius:10px}
.lmg-v2 .lmg-sw__welt {
  height:40px}
.lmg-designgrid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px}
.fa-lmg.lmg-v2 .lmg-designkarte {
  display:block;
  border:1px solid var(--lmg-line-2);
  border-radius:10px;
  padding:8px;
  background:var(--lmg-bg);
  color:var(--lmg-fg);
  text-align:left}
.lmg-designkarte svg {
  display:block;
  width:100%;
  height:88px;
  margin-bottom:8px}
.lmg-designkarte span {
  font-size:13px}
.lmg-uebernehmen {
  background:var(--lmg-surf);
  padding:12px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:13px}
.lmg-uebernehmen button {
  padding:8px;
  border:1px solid var(--lmg-line-2);
  border-radius:10px;
  background:var(--lmg-bg);
  font-size:13px}
.lmg-weitere {
  margin-bottom:16px}
.lmg-weitere summary {
  min-height:44px;
  cursor:pointer}
.lmg-v2 .lmg-motivgrid {
  display:block}
.lmg-v2 .lmg-modulstreifen {
  display:none}
.lmg-v2 .lmg-picker {
  padding:0}
.lmg-foto-editor .lmg-swatches--motiv,.lmg-foto-editor .lmg-picker>.lmg-lbl {
  display:none}
.lmg-v2 .lmg-upload {
  background:var(--lmg-surf);
  border:1px dashed var(--lmg-line-2);
  border-radius:10px;
  padding:16px}
.lmg-v2 select {
  display:block;
  width:100%;
  min-height:44px;
  background:var(--lmg-bg);
  color:var(--lmg-fg);
  padding:8px;
  border:1px solid var(--lmg-line-2);
  border-radius:8px}
.lmg-v2 .lmg-note {
  margin:12px 0;
  font-size:14px}
.lmg-v2 .lmg-karte--bestellen {
  box-shadow:none;
  background:var(--lmg-surf);
  margin-top:24px}
.fa-lmg.lmg-v2 .lmg-knopf {
  background:var(--lmg-acc);
  color:var(--lmg-acc-ink);
  border:0;
  border-radius:var(--lmg-r-btn);
  box-shadow:none;
  font-weight:600;
}
.lmg-v2 .lmg-knopf {
  font-size:16px;
  padding:12px 24px}
.fa-lmg.lmg-v2 .lmg-knopf:hover:not(:disabled) {
  background:var(--lmg-brand-dark);
  color:var(--lmg-bg)}
.fa-lmg.lmg-v2 .lmg-knopf:disabled {
  background:var(--lmg-line-2);
  color:var(--lmg-fg);
}
.lmg-dock {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:50;
  background:var(--lmg-bg);
  border-top:1px solid var(--lmg-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px max(24px,calc((100vw - 1200px)/2));
  box-shadow:0 -4px 16px rgba(35,33,37,.06)}
.lmg-dock strong {
  font-size:26px;
  font-weight:400}
.lmg-dock small {
  display:block;
  color:var(--lmg-mut);
  font-size:12px}
.lmg-dock .lmg-knopf {
  min-width:240px}
.lmg-pruefung {
  width:min(560px,calc(100% - 32px));
  max-height:calc(100dvh - 48px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:24px;
  border:1px solid var(--lmg-line);
  border-radius:14px;
  color:var(--lmg-fg);
  background:var(--lmg-bg)}
.lmg-pruefung::backdrop {
  background:rgba(35,33,37,.4)}
.lmg-pruefung h2 {
  font-size:32px;
  margin:8px 0 24px}
.lmg-schliessen {
  float:right;
  width:44px;
  border:1px solid var(--lmg-line-2);
  border-radius:10px;
  background:var(--lmg-bg);
  color:var(--lmg-fg);
  font-size:24px}
.lmg-dialog-preis {
  font-size:28px}
.lmg-v2 .lmg-pruefung .lmg-karte--bestellen {
  padding:16px}
.lmg-v2 .lmg-bestellen {
  padding:0}
.lmg-v2 .lmg-check {
  min-height:44px}

@media(max-width:992px) {
  .fa-lmg.lmg-v2 {
  grid-template-columns:minmax(0,1fr) 320px;
  gap:24px}
.lmg-v2 .lmg-kartenkopf {
  padding:16px}
.lmg-v2 .lmg-kartenkopf h2 {
  font-size:24px}
[data-lmg-ansichten] {
  padding:0 16px}
[data-lmg-ansichten] .lmg-plan-seg {
  display:grid;
  grid-template-columns:1fr 1fr}
.lmg-kennzahlen strong {
  font-size:20px}
[data-lmg-formen] {
  display:block;
  padding:16px}
[data-lmg-formen]>span {
  display:block;
  margin-bottom:8px}
}

@media(max-width:768px) {
  .fa-lmg.lmg-v2 {
  grid-template-columns:1fr;
  gap:24px;
  margin-bottom:120px}
.lmg-intro h2 {
  font-size:34px}
.lmg-intro p {
  font-size:14px}
.lmg-v2 .fa-lmg__buehne {
  position:static}
.lmg-v2 .lmg-plan-svg {
  height:248px}
.lmg-plan-module {
  gap:4px;
  padding:0 12px 16px}
.lmg-plan-module button {
  width:32px;
  min-width:32px;
  min-height:44px}
.lmg-kennzahlen {
  padding:16px 0}
.lmg-kennzahlen>div {
  padding:0 8px}
.lmg-kennzahlen strong {
  font-size:19px}
.lmg-kennzahlen small {
  font-size:11px}
.lmg-dock {
  padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.lmg-dock strong {
  font-size:20px}
.lmg-dock small {
  font-size:10px}
.lmg-dock .lmg-knopf {
  min-width:0;
  font-size:14px;
  padding:12px 16px}
.lmg-abschnitt>summary {
  min-height:64px}
}

@media(prefers-reduced-motion:reduce) {
  .lmg-v2 * {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}

.lmg-design-sand-0 {
  fill:#d1c7b7;
  }

.lmg-design-sand-1 {
  color:#626262;
  }

.lmg-design-sand-2 {
  fill:currentColor;
  }

.lmg-design-sand-3 {
  stroke:currentColor;
  }

.lmg-design-sage-0 {
  fill:#abb5a1;
  }

.lmg-design-sage-1 {
  color:#3B6443;
  }

.lmg-design-sage-2 {
  fill:currentColor;
  }

.lmg-design-sage-3 {
  stroke:currentColor;
  }

.lmg-design-graphite-0 {
  fill:#727675;
  }

.lmg-design-graphite-1 {
  color:#d1c7b7;
  }

.lmg-design-graphite-2 {
  stroke:currentColor;
  }

.lmg-design-graphite-3 {
  fill:currentColor;
  }

.lmg-design-coast-0 {
  fill:#b0bec2;
  }

.lmg-design-coast-1 {
  color:#637d86;
  }

.lmg-design-coast-2 {
  fill:currentColor;
  }

.lmg-design-coast-3 {
  stroke:currentColor;
  }

.lmg-design-linen-0 {
  fill:#e7e2d9;
  }

.lmg-design-linen-1 {
  color:#626262;
  }

.lmg-design-linen-2 {
  stroke:currentColor;
  }

.lmg-design-linen-3 {
  fill:currentColor;
  }

.lmg-design-olive-0 {
  fill:#999e86;
  }

.lmg-design-olive-1 {
  color:#555e48;
  }

.lmg-design-olive-2 {
  fill:currentColor;
  }

.lmg-design-olive-3 {
  stroke:currentColor;
  }

.lmg-design-contour-0 {
  fill:#d1c7b7;
  }

.lmg-design-contour-1 {
  color:#626262;
  }

.lmg-design-contour-2 {
  stroke:currentColor;
  }

.lmg-design-contour-3 {
  fill:currentColor;
  }

.lmg-design-nature-0 {
  fill:#abb5a1;
  }

.lmg-design-nature-1 {
  color:#3B6443;
  }

.lmg-design-nature-2 {
  fill:currentColor;
  }

.lmg-design-nature-3 {
  stroke:currentColor;
  }

.lmg-design-waves-0 {
  fill:#727675;
  }

.lmg-design-waves-1 {
  color:#d1c7b7;
  }

.lmg-design-waves-2 {
  stroke:currentColor;
  }

.lmg-design-waves-3 {
  fill:currentColor;
  }

/* Keep the WordPress page heading for assistive technology;
   the planner has its own introduction. */
main:has(.lmg-v2) {
  margin-top:24px!important}
main:has(.lmg-v2)> .wp-block-group {
  padding-top:0!important}
main:has(.lmg-v2) .wp-block-post-title {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%)}

.lmg-v2 .lmg-dock .lmg-knopf {
  width:auto;
  flex:none}
.lmg-dock>div {
  flex-shrink:0}
.lmg-v2 .lmg-dock small {
  max-width:none}
.lmg-v2 .lmg-plan-svg .lmg-rohr {
  stroke:none;
  fill-rule:evenodd}

/* Motivserie: ruhige Linien, gleich grosse Auswahlfelder. */
.lmg-icon-mini { color:var(--lmg-brand); }
.lmg-v2 .lmg-motivwahl {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.lmg-v2 .lmg-motivwahl button {
  position:relative;
  min-width:0;
  min-height:104px;
  padding:16px 5px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  line-height:1.3;
}
.lmg-v2 .lmg-motivwahl .lmg-icon-mini {
  width:80px;
  max-width:100%;
  height:40px;
  margin:0;
}
.lmg-v2 .lmg-motivwahl button[aria-pressed=true]:after {
  position:absolute;
  top:3px;
  right:7px;
  font-size:12px;
}
.lmg-v2 .lmg-motivwahl button[data-icon=""] {
  grid-column:1 / -1;
  min-height:44px;
  padding:10px;
}

/* Woodmart: Der globale Nach-oben-Pfeil verdeckt mobil den Planungsbutton. */
@media (max-width:768px) {
  body:has([data-fa-lmg] .lmg-dock) .scrollToTop {
    display:none !important;
  }
}

/* Real Cookie Banner 5.3: Präfix und Klassenzähler wechseln bei jedem Laden.
   Das Sticky-Widget über seinen Fokusanker und direkt folgendes Icon erkennen.
   Nur den äußeren Widget-Container verschieben, nicht den Einwilligungsdialog. */
@media (max-width:1200px) {
  body:has([data-fa-lmg] .lmg-dock) > div.animate__animated[class*="-ext-0"]:has(> div[id*="-ext-"] > a[aria-label="focus"] + div > svg) {
    bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}