/* =========================================================
   lipla light 2.0 – Oberflaeche
   Typografie, Farben und Formensprache an den greenius Energiesparrechner
   angeglichen, damit beide Rechner optisch ein Paar bilden: Schrift Jost,
   Primaerfarbe #a1c214, Text #5c5c5c, dezent abgerundete Ecken (8px, aeussere
   Box 16px) mit leichtem Schatten statt komplett eckig. Struktur und
   Klassen unveraendert.
========================================================= *//* ---------- Schrift: Jost, wie auf der greenius Website (lokal) ---------- */



@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/jost-medium.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/jost-bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}.lp-page {
  /* Markenfarben der greenius Website */
  --lp-green:       #a1c214;
  --lp-green-dark:  #616e2d;
  --lp-green-soft:  #f2f5e9;
  --lp-green-line:  #e7f0c4;

  --lp-ink:         #4a4a4a;
  --lp-ink-soft:    #5c5c5c;
  --lp-muted:       #999999;
  --lp-line:        #e5e5e5;
  --lp-line-soft:   #eeeeee;
  --lp-surface:     #ffffff;
  --lp-canvas:      #fcfdf8;
  --lp-danger:      #b1301c;
  --lp-warm:        #c07a24;
  --lp-warm-line:   #e8d6bd;
  --lp-warm-soft:   #fbf5ec;
  --lp-panel:       #fcfdf8;   /* Hintergrund Schritt 1 + 2 */
  --lp-panel-hl:    #f2f6df;   /* Hintergrund Schritt 3 (hervorgehoben) */

  /* Leicht abgerundete Ecken (Eingabefelder, Buttons, Karten) statt komplett
     eckig – gleiches Mass wie beim greenius Energiesparrechner, damit beide
     Tools optisch ein Paar bilden. Ueber die Einstellungsseite (Custom CSS)
     jederzeit ueberschreibbar. */
  --lp-radius:      8px;
  --lp-radius-lg:   16px;   /* Aeussere Ecken des gesamten Rechner-Containers */
  /* Eine Staerke fuer ALLE Rahmen im Tool (Felder, Buttons, Karten, das
     Modul selbst) – sorgt dafuer, dass nichts "aus Versehen" staerker
     wirkt als der Rest. Ueber die Einstellungsseite anpassbar. */
  --lp-border-width: 1px;
  /* Fokus-Ring: gleiche Staerke ueberall, ohne Abstand zum Rahmen –
     sonst entsteht eine sichtbare Doppellinie (Rahmen + Ring mit Luecke). */
  --lp-focus-width: 2px;

  /* Eine Schriftfamilie, zwei Schnitte */
  --lp-font: "Jost", "Jost Medium", "Century Gothic", "Avenir Next", system-ui, sans-serif;

  /* Typografisches System – vier Ebenen, keine Einzelgroessen je Bereich.
       Ebene 1  Hauptueberschrift des Tools          --fs-h1
       Ebene 2  Bereichsueberschriften im Tool       --fs-lvl2
       Ebene 3  Produktnamen                         --fs-lvl3
       Ebene 4  Hilfstexte und Hinweise              --fs-lvl4 / --fs-xs
     Daten (Stueckzahlen, Eingabewerte) sind keine Textebene, sondern
     bewusst hervorgehobene Werte. */
  --fs-h1:    clamp(22px, 2.7vw, 30px);
  --fs-lvl2:  16px;
  --fs-lvl3:  14.5px;
  --fs-lvl4:  13px;
  --fs-xs:    12px;   /* Kennzeichnungen, Fussnoten */
  --fs-md:    14.5px; /* Fliesstext, Buttons */
  --fs-data:  20px;   /* Stueckzahlen */
  --fs-input: 18px;   /* Eingabewerte */

  /* Einheitlicher Abstand unter jeder Bereichsueberschrift */
  --heading-gap: 12px;

  /* Abstandsstufen */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
}/* Als WordPress-Plugin auf ".lp-page" begrenzt statt auf "body"/"*", damit
   das Design des Rechners nicht in den Rest der Seite ausstrahlt. */
.lp-page, .lp-page *, .lp-page *::before, .lp-page *::after { box-sizing: border-box; }.lp-page {
  margin: 0;
  background: none;
  color: var(--lp-ink);
  font: 500 var(--fs-md)/1.55 var(--lp-font);
  -webkit-font-smoothing: antialiased;
}
/* Die Kopfzeile (Ueberschrift) liegt direkt auf dem Seitenhintergrund –
   kein eigener (fast weisser) Flaechenton, damit sie sichtbar ausserhalb
   des weiss umrandeten Rechner-Kastens (".lp-shell") steht. */.lp-page .lp-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}/* Kein eigenes max-width/margin/padding auf .lp-page: das Tool wird als
   Baustein in eine bestehende Seite eingebettet (z. B. WPBakery-Container),
   der Aussenabstand und die Breite kommen von dort. *//* ---------- Kopfbereich (flach) ---------- */
.lp-page .lp-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 18px;
}.lp-page .lp-kicker {
  margin: 0;
  flex: 0 0 100%;
  font-size: var(--fs-lvl4);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--lp-green-dark);
}.lp-page .lp-claim {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--lp-ink-soft);
}.lp-page .lp-lead {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--lp-muted);
}/* ---------- Grundraster: Eingabe / Ergebnis ---------- */
.lp-page .lp-shell {
  display: grid;
  gap: 0;
  align-items: stretch;
  background: var(--lp-surface);
  /* Wie beim greenius Energiesparrechner: kein sichtbarer Rahmen, die
     abgerundeten Aussenecken + ein dezenter Schatten tragen die Flaeche.
     !important, da manche Theme-/Seitenbau-Vorgaben sonst border-radius
     wieder aushebeln. */
  border: 0;
  border-radius: var(--lp-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}/* Container statt Viewport: das Tool kann in einer schmalen Spalte neben
   einer Sidebar stecken, obwohl der Bildschirm insgesamt breit ist. Die
   Zweispalten-Aufteilung und die Eingabe-/Kartenraster reagieren deshalb
   auf ihre eigene Kastenbreite, nicht auf die Fensterbreite. */
.lp-page { container: lp-page   / inline-size; }.lp-page .lp-panel { container: lp-panel  / inline-size; }.lp-page .lp-result { container: lp-result / inline-size; }/* Sobald ein Ergebnis vorliegt, ruecken Eingabe und Ergebnis
   auf breiten Schirmen nebeneinander – "alles auf einen Blick".
   Der Rechner nutzt immer die volle Breite seines Containers. *//* Eingabe, Ergebnis und Aktionsleiste bilden EIN Modul –
   dazwischen jeweils nur eine Trennlinie. */
/* Keine Trennlinie zwischen Eingabe und Ergebnis – wie beim greenius
   Energiesparrechner trennt allein der Farbwechsel (Panel/Panel-hl) die
   Bereiche, kein zusaetzlicher Rahmen (der wuerde neben der Farbe wie eine
   doppelte Naht wirken). */
.lp-page .lp-shell.has-result .lp-panel { border: 0; }.lp-page .lp-shell.has-result .lp-result { padding: clamp(20px, 2.4vw, 28px); }

@media (min-width: 1080px) {.lp-page .lp-shell.has-result {
    /* Eingabe bekommt spuerbar mehr Luft, das Ergebnis bleibt breiter.
       !important: diese Regel reagiert (bewusst als Fallback) auf die
       Fensterbreite, nicht auf die tatsaechliche Breite von .lp-page. Sitzt
       das Tool neben einer Sidebar (Fenster breit, .lp-page-Spalte aber
       schmal), MUSS die @container-Gegenregel weiter unten (misst .lp-page
       selbst) das hier zuverlaessig wieder aufheben koennen – siehe dort. */
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr) !important;
  }
}/* ---------- Eingabe-Panel ---------- *//* Beide Hauptspalten sind Flex-Spalten: Inhalt oben, Aktionen als Footer.
   Da beide Rasterzellen auf gleiche Hoehe gestreckt werden, schliessen die
   Footer automatisch auf derselben Linie ab. */
.lp-page .lp-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--lp-panel);
}
/* Ergebnis-Spalte hervorgehoben – gleiche Mechanik wie beim greenius
   Energiesparrechner (Schritt 3 bekommt eine eigene, gruenlich getoente
   Flaeche statt nur einer Trennlinie zu Schritt 1/2). */
.lp-page .lp-shell.has-result .lp-result { background: var(--lp-panel-hl); }
.lp-page .lp-block + .lp-block { margin-top: var(--sp-5); }/* EBENE 2 – Bereichsueberschriften.
   "Wofür planen Sie?", "Raum und Beleuchtungsstärke", "Ihre Lichtlösung",
   "Ihre Vergleichslösung", "Passende greenius® Lösungen" und die
   Dialogtitel liegen auf derselben Ebene: gleiche Groesse, Gewichtung,
   Farbe und derselbe Abstand nach unten. */
.lp-page .lp-block-title, .lp-page .lp-result-heading, .lp-page .lp-result-title, .lp-page .lp-advisory-title, .lp-page .lp-dialog-title {
  margin: 0 0 var(--heading-gap);
  font-size: var(--fs-lvl2);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--lp-ink-soft);
}
/* Schrittueberschriften (1 / 2 / 3) – gleiche Mechanik wie beim greenius
   Energiesparrechner: runde, gefuellte Nummer vor dem Titeltext. Eigene
   Modifier-Klasse (statt die Basisregel oben zu aendern), damit nur die
   drei tatsaechlichen Schritte (nicht Dialogtitel o.ae.) den Kreis
   bekommen. */
.lp-page .lp-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.lp-page .lp-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lp-ink-soft);
  color: #fff;
  font: 700 15px/1 var(--lp-font);
}
/* ---------- Nutzungsauswahl (flache Chips) ---------- */
.lp-page .lp-usage { border: 0; margin: 0; padding: 0; }/* Sechs Hauptbereiche als ruhiges 3x2-Raster */
.lp-page .lp-usage-main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}/* "Anderer Bereich" – bewusst nachgeordnet, nicht gleichwertig */
.lp-page .lp-usage-alt { margin-top: 7px; }.lp-page .lp-usage-option { position: relative; display: block; }.lp-page .lp-usage-option--alt { display: inline-block; }.lp-page .lp-usage-option input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0; cursor: pointer;
}.lp-page .lp-usage-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 8px;
  text-align: center;
  border: var(--lp-border-width) solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: var(--lp-surface);
  font-size: var(--fs-lvl4);
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: anywhere;
  color: var(--lp-ink-soft);
  transition: border-color .14s, background .14s, color .14s;
}.lp-page .lp-usage-option:hover span { border-color: var(--lp-green); color: var(--lp-ink); }.lp-page .lp-usage-option input:focus-visible + span {
  outline: var(--lp-focus-width) solid var(--lp-green-dark);
  outline-offset: 0;
}.lp-page .lp-usage-option input:checked + span {
  background: var(--lp-green);
  border-color: var(--lp-green);
  color: #1a1e12;
  font-weight: 700;
}.lp-page .lp-usage-option--alt span {
  min-height: 0;
  padding: 6px 13px;
  border-style: dashed;
  font-size: var(--fs-xs);
  color: var(--lp-muted);
}.lp-page .lp-usage-option--alt input:checked + span {
  border-style: solid;
  color: #1a1e12;
}/* ---------- Eingabefelder ---------- */
.lp-page .lp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}.lp-page .lp-field label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-lvl4);
  font-weight: 500;
  color: var(--lp-muted);
}.lp-page .lp-input-unit { position: relative; }.lp-page .lp-input-unit input {
  width: 100%;
  height: 48px;
  /* Rechts Platz fuer Einheit UND die nativen Pfeile von type="number". */
  padding: 0 58px 0 12px;
  border: var(--lp-border-width) solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: var(--lp-surface);
  color: var(--lp-ink);
  font: 700 var(--fs-input)/1 var(--lp-font);
  transition: border-color .14s, outline-color .14s;
}.lp-page .lp-input-unit input::placeholder { color: #c8ccc2; font-weight: 400; }.lp-page .lp-input-unit input:focus {
  outline: var(--lp-focus-width) solid var(--lp-green);
  outline-offset: 0;
  border-color: var(--lp-green);
}.lp-page .lp-input-unit input.is-invalid { border-color: var(--lp-danger); }.lp-page .lp-unit {
  position: absolute;
  right: 34px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: var(--fs-lvl4);
  color: var(--lp-muted);
}.lp-page .lp-field--lux .lp-input-unit input { border-color: var(--lp-green-line); }.lp-page .lp-error {
  margin: 5px 0 0;
  font-size: var(--fs-lvl4);
  color: var(--lp-danger);
}/* EBENE 4 – Hilfstexte und Hinweise: eine Groesse, eine Farbe. */
.lp-page .lp-recommend, .lp-page .lp-asr, .lp-page .lp-own-hint, .lp-page .lp-own-toggle, .lp-page .lp-pick, .lp-page .lp-result-summary, .lp-page .lp-footer {
  font-size: var(--fs-lvl4);
  line-height: 1.5;
  color: var(--lp-muted);
}.lp-page .lp-recommend, .lp-page .lp-asr {
  margin: 8px 0 0;
}.lp-page .lp-recommend { margin-top: 9px; }.lp-page .lp-recommend button {
  border: 0; background: none; padding: 0;
  margin-left: 5px;
  font: inherit;
  color: var(--lp-green-dark);
  text-decoration: underline;
  cursor: pointer;
}.lp-page .lp-asr { margin-top: 3px; }/* ---------- Eigene / fremde Leuchte (Nebenstrecke) ---------- */
.lp-page .lp-own-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: var(--sp-4);
}.lp-page .lp-own-toggle button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--lp-green-dark);
  text-decoration: underline;
  cursor: pointer;
}.lp-page .lp-own-toggle button:hover { color: var(--lp-ink); }.lp-page .lp-own-toggle button:focus-visible { outline: var(--lp-focus-width) solid var(--lp-green-dark); outline-offset: 0; }.lp-page .lp-own-panel { margin-top: var(--sp-3); max-width: 230px; }.lp-page .lp-own-hint { margin: 6px 0 0; }/* ---------- Erklaerungs-Links ---------- *//* greenius setzt Links in der Primaerfarbe – hier ruhig unterstrichen. */
.lp-page .lp-link {
  border: 0;
  background: none;
  padding: 0;
  font: 500 var(--fs-lvl4)/1.5 var(--lp-font);
  color: var(--lp-green-dark);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--lp-green-line);
}.lp-page .lp-link:hover { color: var(--lp-ink-soft); text-decoration-color: var(--lp-green); }.lp-page .lp-link:focus-visible { outline: var(--lp-focus-width) solid var(--lp-green-dark); outline-offset: 0; }.lp-page .lp-own-why { margin: var(--sp-2) 0 0; }.lp-page .lp-info {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: var(--lp-border-width) solid var(--lp-line-soft);
}.lp-page .lp-link--info { font-weight: 700; }
/* Kleines "i" im gefuellten Kreis hinter "Wie wird berechnet?" – gleiche
   Mechanik wie beim greenius Energiesparrechner: signalisiert auf den
   ersten Blick, dass sich dahinter weitere Informationen verbergen. */
.lp-page .lp-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  background: var(--lp-green-dark);
  color: var(--lp-surface) !important;
  border-radius: 50%;
  font: 700 10px/1 var(--lp-font);
  text-decoration: none;
  vertical-align: 4px;
}
/* ---------- Dialoge ---------- */
.lp-page .lp-dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: min(80vh, 620px);
  padding: 0;
  border: var(--lp-border-width) solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: var(--lp-surface);
  color: var(--lp-ink);
  overflow: hidden;
}.lp-page .lp-dialog::backdrop { background: rgba(28, 31, 25, .42); }.lp-page .lp-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}.lp-page .lp-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 12px;
  border-bottom: var(--lp-border-width) solid var(--lp-line);
}/* Im Dialogkopf uebernimmt die Trennlinie den Abstand. */
.lp-page .lp-dialog-title { flex: 1; margin-bottom: 0; }.lp-page .lp-dialog-close {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: var(--lp-radius);
  background: none;
  color: var(--lp-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}.lp-page .lp-dialog-close:hover { background: var(--lp-canvas); color: var(--lp-ink); }.lp-page .lp-dialog-close:focus-visible { outline: var(--lp-focus-width) solid var(--lp-green-dark); outline-offset: 0; }.lp-page .lp-dialog-body {
  padding: var(--sp-4) 18px var(--sp-5);
  overflow-y: auto;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--lp-ink-soft);
}.lp-page .lp-dialog-body p { margin: 0 0 11px; }.lp-page .lp-dialog-body p:last-child { margin-bottom: 0; }.lp-page .lp-dialog-body .lp-info-note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--lp-border-width) solid var(--lp-line-soft);
  font-size: var(--fs-lvl4);
  color: var(--lp-muted);
}/* ---------- Hauptaktion ---------- *//* Alle Buttons: gleiche Hoehe, gleiche Schrift. */
/* Reset gegen Theme-/Browser-Vorgaben speziell fuer <button type="submit">
   ("Lichtlösung berechnen") – manche Themes stylen Submit-Buttons eigens
   und ueberschreiben sonst unsere Farben. */
.lp-page button.lp-btn {
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--lp-font);
}
.lp-page .lp-btn {
  height: 50px;
  padding: 0 24px;
  /* !important aus demselben Grund wie beim Rahmen/der Farbe direkt darunter:
     manche Themes stylen button[type="submit"] eigens und ueberschreiben
     sonst gezielt den Radius von "Lichtlösung berechnen", waehrend die
     uebrigen Buttons (kein type="submit") unangetastet bleiben. */
  border-radius: var(--lp-radius) !important;
  font: 700 var(--fs-md)/1 var(--lp-font);
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}/* Zwei Primaeraktionen – die Schritte 2 und 4 der Nutzerfuehrung:
   "Lichtlösung berechnen" schliesst die Eingabe links ab,
   "Angebot anfragen" das Ergebnis rechts. Beide sind IMMER identisch
   gestylt, deshalb hier mit !important gegen Theme-Vorgaben abgesichert.
   Zusaetzlich ueber die IDs (#lp-submit / #lp-request) angesprochen: eine
   ID schlaegt in der Spezifitaet jede Klassen-/Attribut-Kombination, wie
   sie manche Theme-Buttonstile verwenden (z. B. [type=submit]:not(...)). */
.lp-page .lp-btn--cta, .lp-page .lp-btn--primary,
.lp-page #lp-submit, .lp-page #lp-request {
  border: var(--lp-border-width) solid var(--lp-green) !important;
  background: var(--lp-green) !important;
  color: #fff !important;
}.lp-page .lp-btn--cta:hover, .lp-page .lp-btn--primary:hover,
.lp-page #lp-submit:hover, .lp-page #lp-request:hover { background: var(--lp-green-dark) !important; border-color: var(--lp-green-dark) !important; }/* Zuruecksetzen – kleiner, warmer Akzent, bewusst kein Fehlerzustand *//* Gleiche Grundhoehe und Schriftgroesse wie die uebrigen Buttons –
   zurueckhaltend wirkt er ueber Breite, Gewicht und Farbe. */
.lp-page .lp-btn--reset, .lp-page #lp-reset {
  padding: 0 18px;
  border: var(--lp-border-width) solid var(--lp-warm-line) !important;
  background: var(--lp-surface) !important;
  color: var(--lp-warm) !important;
  font-weight: 500;
}.lp-page .lp-btn--reset:hover, .lp-page #lp-reset:hover {
  background: var(--lp-warm-soft) !important;
  border-color: var(--lp-warm) !important;
}/* Sekundaer: neutrale Dokumentation des Ergebnisses */
.lp-page .lp-btn--ghost, .lp-page #lp-pdf {
  border: var(--lp-border-width) solid #cdcdcd !important;
  background: var(--lp-surface) !important;
  color: var(--lp-ink-soft) !important;
}.lp-page .lp-btn--ghost:hover, .lp-page #lp-pdf:hover { border-color: var(--lp-ink-soft) !important; color: var(--lp-ink) !important; }/* Manche Theme-Buttonstile zeichnen ihren Rahmen/ihre Fuellung nicht ueber
   border-color, sondern per Klick-/Hover-Animation aus einem ::before/::after
   -Pseudoelement oder einem box-shadow-Ring – das blitzt dann kurz auf und
   verschwindet wieder, auch wenn border-color selbst schon ueberschrieben ist.
   Hier fuer alle vier Buttons deaktiviert, inkl. :active/:focus. */
.lp-page .lp-btn::before, .lp-page .lp-btn::after {
  content: none !important;
  display: none !important;
}
.lp-page .lp-btn,
.lp-page .lp-btn:hover,
.lp-page .lp-btn:active,
.lp-page .lp-btn:focus,
.lp-page .lp-btn:focus-visible {
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s, border-color .14s, color .14s !important;
}/* ---------- Ergebnis ---------- */
.lp-page .lp-result {
  display: flex;
  flex-direction: column;
  min-width: 0;
}/* display: flex wuerde das hidden-Attribut sonst aushebeln */
.lp-page .lp-result[hidden] { display: none; }.lp-page .lp-result-head { margin-bottom: var(--sp-6); }/* Hauptueberschrift des Ergebnisses – eine Stufe ueber den Bereichen. */
.lp-page .lp-result-summary { margin: 0; }.lp-page .lp-result-summary .lp-sep { color: var(--lp-green); padding: 0 2px; }/* ---------- Produktkarten (kompakte Loesungsvorschlaege) ---------- */
.lp-page .lp-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}.lp-page .lp-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 76px;
  padding: 10px 12px 10px 10px;
  background: var(--lp-surface);
  border: var(--lp-border-width) solid var(--lp-line);
  border-radius: var(--lp-radius);
  cursor: pointer;
  transition: border-color .16s, background .16s, outline-color .16s;
  animation: lp-rise .32s both;
}.lp-page .lp-card:hover { border-color: var(--lp-green); }.lp-page .lp-card:focus-within { outline: var(--lp-focus-width) solid var(--lp-green-dark); outline-offset: 0; }.lp-page .lp-card.is-selected {
  /* Gleiche Sprache wie die Nutzungsauswahl oben: Farb-/Hintergrundwechsel,
     keine zusaetzliche Outline – sonst wirkt der Rahmen an dieser Stelle
     staerker als ueberall sonst im Tool. */
  border-color: var(--lp-green);
  background: var(--lp-green-soft);
}.lp-page .lp-card-check {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}/* Auswahlkreis – dezent, ohne zusaetzlichen Button */
.lp-page .lp-card-mark {
  flex: 0 0 auto;
  position: relative;
  width: 17px; height: 17px;
  border: var(--lp-border-width) solid #cdcdcd;
  background: var(--lp-surface);
  transition: border-color .14s, background .14s;
}.lp-page .lp-card:hover .lp-card-mark { border-color: var(--lp-green); }.lp-page .lp-card.is-selected .lp-card-mark {
  background: var(--lp-green);
  border-color: var(--lp-green);
}.lp-page .lp-card-mark::after {
  content: "";
  position: absolute;
  left: 5px; top: 1.5px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .14s;
}.lp-page .lp-card.is-selected .lp-card-mark::after { transform: rotate(45deg) scale(1); }/* Hinweis ueber den Karten */
.lp-page .lp-pick { margin: 0 0 var(--sp-2); }

@keyframes lp-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}/* Bild dient nur der schnellen Wiedererkennung */
.lp-page .lp-card-media {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  background: var(--lp-canvas);
  border-radius: var(--lp-radius);
  overflow: hidden;
}.lp-page .lp-card-media img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
}.lp-page .lp-card-body { display: block; min-width: 0; flex: 1; }/* EBENE 3 – Produktnamen. */
.lp-page .lp-card-name {
  display: block;
  margin: 0;
  font-size: var(--fs-lvl3);
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--lp-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}.lp-page .lp-card-count {
  margin: 2px 0 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
}.lp-page .lp-card-count b {
  font-size: var(--fs-data);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--lp-green-dark);
}.lp-page .lp-card-count span { font-size: var(--fs-lvl4); color: var(--lp-muted); }.lp-page .lp-card-link {
  display: inline-block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--lp-green-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--lp-green-line);
}.lp-page .lp-card-link:hover { border-bottom-color: var(--lp-green); }/* ---------- Eigene Produktloesung im Ergebnis ---------- */
.lp-page .lp-own-result {
  margin-bottom: var(--sp-4);
  max-width: 62%;
}.lp-page .lp-own-result .lp-card {
  padding: 7px 12px 7px 8px;
  gap: 9px;
}.lp-page .lp-own-result .lp-card-count b { font-size: 18px; }/* eine Stufe unter --fs-data */
.lp-page .lp-own-cube { width: 34px; height: 34px; }.lp-page .lp-card-media--own { width: 40px; height: 40px; }.lp-page .lp-card--own {
  cursor: default;
  border-style: dashed;
  background: var(--lp-canvas);
  animation: none;
}.lp-page .lp-card--own:hover {
  border-color: var(--lp-line);
}.lp-page .lp-card-media--own {
  background: transparent;
  color: #9aa192;
}.lp-page .lp-own-cube {
  width: 42px;
  height: 42px;
  display: block;
}.lp-page .lp-own-note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--lp-muted);
}/* ---------- Hinweise ---------- */
.lp-page .lp-notice {
  margin: 0 0 var(--sp-2);
  padding: 11px 14px;
  background: var(--lp-green-soft);
  border-radius: var(--lp-radius);
  font-size: var(--fs-lvl4);
  line-height: 1.55;
  color: var(--lp-ink-soft);
}.lp-page .lp-notices { margin-bottom: var(--sp-3); }.lp-page .lp-empty {
  padding: var(--sp-5);
  border: 1px dashed var(--lp-line);
  border-radius: var(--lp-radius);
  color: var(--lp-ink-soft);
  font-size: var(--fs-md);
}/* ---------- Ergebniszustand ohne Produktempfehlung ---------- */
.lp-page .lp-advisory {
  padding: var(--sp-4) 18px;
  background: var(--lp-green-soft);
  border-left: 3px solid var(--lp-green);
  border-radius: var(--lp-radius);
  margin-bottom: 14px;
}.lp-page .lp-advisory-text {
  margin: 0;
  font-size: var(--fs-lvl4);
  line-height: 1.6;
  color: var(--lp-ink-soft);
  max-width: 66ch;
}/* ---------- Folgeaktionen ---------- *//* Aktionen bleiben in ihrem Funktionsbereich:
   links Eingabe und Berechnung, rechts Ergebnis und naechste Schritte. */
.lp-page .lp-panel-actions, .lp-page .lp-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}/* margin-top: auto schiebt den Footer an die Unterkante der Spalte;
   padding-top haelt den Mindestabstand zum Inhalt. */
.lp-page .lp-panel-actions {
  margin-top: auto;
  padding-top: var(--sp-5);
}/* Feste Breitenverhaeltnisse (die 4px sind der halbe Spaltenabstand).
   min-width verhindert, dass ein Text jemals abgeschnitten wird. */
.lp-page .lp-panel-actions .lp-btn--cta { flex: 0 1 calc(75% - 4px); min-width: fit-content; }.lp-page .lp-panel-actions .lp-btn--reset { flex: 0 1 calc(25% - 4px); min-width: fit-content; }.lp-page .lp-result-actions .lp-btn--primary { flex: 0 1 calc(65% - 4px); min-width: fit-content; }.lp-page .lp-result-actions .lp-btn--ghost { flex: 0 1 calc(35% - 4px); min-width: fit-content; }.lp-page .lp-result-actions {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: var(--lp-border-width) solid var(--lp-line);
}/* display: flex wuerde das hidden-Attribut sonst aushebeln */
.lp-page .lp-result-actions[hidden] { display: none; }.lp-page .lp-btn:focus-visible { outline: var(--lp-focus-width) solid var(--lp-ink-soft); outline-offset: 0; }.lp-page .lp-actions-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-lvl4);
  color: var(--lp-danger);
}.lp-page .lp-actions-hint:empty { display: none; }/* ---------- Fuss ---------- */
.lp-page .lp-footer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: var(--lp-border-width) solid var(--lp-line-soft);
  font-size: var(--fs-lvl4);
  color: var(--lp-muted);
}.lp-page .lp-footer p { margin: 0; }/* ---------- Tablet ---------- */



@media (max-width: 860px) {.lp-page .lp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}/* ---------- Mobil: kompakt, aber gross genug zum Tippen ---------- */



@media (max-width: 620px) {.lp-page .lp-usage-main { gap: 7px; }.lp-page .lp-usage-option span { min-height: 46px; }.lp-page .lp-usage-option--alt span { min-height: 38px; }.lp-page .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.lp-page .lp-input-unit input { height: 52px; padding-right: 46px; font-size: 16px; }.lp-page .lp-unit { right: 26px; }.lp-page .lp-cards { grid-template-columns: 1fr; }.lp-page .lp-own-result { max-width: none; }.lp-page .lp-dialog { width: calc(100vw - 20px); max-height: 86vh; }.lp-page .lp-dialog-close { width: 40px; height: 40px; }.lp-page .lp-panel-actions, .lp-page .lp-result-actions { flex-direction: column; align-items: stretch; margin-top: var(--sp-4); }/* In Spaltenrichtung steuert flex-basis die Hoehe – deshalb zuruecksetzen. */
.lp-page .lp-panel-actions .lp-btn, .lp-page .lp-result-actions .lp-btn { flex: 0 0 auto; min-width: 0; }.lp-page .lp-btn { width: 100%; height: 54px; }
}

@media (max-width: 400px) {.lp-page .lp-usage-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {.lp-page .lp-card { animation: none; }.lp-page, .lp-page * { transition-duration: .01ms !important; }
}/* =========================================================
   Container-Anfragen (statt Viewport)

   Die Regeln oben (@media) reagieren auf die Fensterbreite. Das Tool
   kann aber z. B. neben einer Sidebar in einer schmalen Spalte eines
   an sich breiten Bildschirms sitzen - dann bleibt @media wirkungslos,
   obwohl die Eingabefelder laengst zu eng sind (Werte werden
   abgeschnitten). Die folgenden @container-Regeln pruefen stattdessen
   die tatsaechliche Breite von .lp-page/.lp-panel/.lp-result selbst und
   greifen zusaetzlich zu den @media-Regeln - in Browsern ohne
   Container-Query-Unterstuetzung werden sie einfach ignoriert, dann
   gilt weiter nur @media.
========================================================= *//* Zweispalten-Aufteilung: misst die Breite von .lp-page (dem Shell-
   Elternkasten), nicht die Fensterbreite. */




@container lp-page (min-width: 760px) {.lp-page .lp-shell.has-result {
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr) !important;
  }
}
@container lp-page (max-width: 759.98px) {/* Unterhalb der Container-Schwelle bleibt die urspruengliche,
     gestapelte Darstellung erhalten, selbst wenn das Browserfenster
     breit genug fuer @media (min-width:1080px) waere. !important auf
     beiden @container-Regeln, damit sie sich untereinander (per
     Quellreihenfolge) UND gegen die @media-Regel oben zuverlaessig
     durchsetzen – ohne !important gewinnt bei gleicher Spezifitaet zwar
     ebenfalls die spaetere Regel, aber sobald irgendeine Theme-/Page-
     Builder-Vorgabe mit eigenem !important oder hoeherer Spezifitaet
     dazwischenfunkt, faellt das sonst wieder auf die falsche Spalten-
     aufteilung zurueck (vermutlich die Ursache des gemeldeten "Design
     neben einer Sidebar kaputt"-Falls). */
.lp-page .lp-shell.has-result {
    grid-template-columns: none !important;
  }
}/* Eingabe-Raster: misst die Breite von .lp-panel selbst - genau die
   Spalte, die beim Ergebnis links schmaler wird. */


@container lp-panel (max-width: 480px) {.lp-page .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.lp-page .lp-input-unit input { height: 52px; padding-right: 46px; font-size: 16px; }.lp-page .lp-unit { right: 26px; }
}
@container lp-panel (max-width: 300px) {.lp-page .lp-usage-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container lp-panel (max-width: 240px) {.lp-page .lp-grid { grid-template-columns: 1fr; }
}/* Kartenraster im Ergebnis: misst die Breite von .lp-result selbst. */


@container lp-result (max-width: 420px) {.lp-page .lp-cards { grid-template-columns: 1fr; }
}