/* =====================================================================
   OPTIMaiZEx · Einstiegsformel · Sektionen unter dem Hero (29.09.2026)
   Grundlage: Formeln 4.1 Sektionsraster, 4.2 Bento, 4.5 Bild, 4.7 Text,
   5.4 Knoepfe, 5.5 Segmentumschalter, 6.1 Flugkinetik, 6.5 Eintritt,
   6.6 Hover, 7.1 Konversionssektion, 7.6 Risikoumkehr, 7.7 Handlung,
   7.11 Fragen. Kein Inhalt, keine Branche, Farben nur aus tokens.css.
   Flaechen: Weiss und Hellblau im Wechsel, genau eine Tiefensektion.
   Gold ausschliesslich als Flaeche der einen Handlung je Sektion.
   ===================================================================== */
:root{
  --lx-tinte:var(--navy,#002B49);
  --lx-leise:color-mix(in srgb,var(--navy,#002B49) 68%,#fff);
  --lx-linie:color-mix(in srgb,var(--navy,#002B49) 11%,transparent);
  --lx-alt:var(--hellblau,#F4F8FC);
  --lx-karte:#FFFFFF;
  --lx-akzent:var(--dunkelgold,#8F6300);
  --lx-breite:1240px;
  --lx-rand:clamp(16px,4.4vw,64px);
  --lx-abstand:clamp(64px,8.5vw,128px);
  --lx-r:20px; --lx-r-k:14px;
  --lx-schatten:0 1px 2px color-mix(in srgb,var(--navy) 6%,transparent),0 10px 30px color-mix(in srgb,var(--navy) 7%,transparent);
  --lx-schatten-hoch:0 2px 4px color-mix(in srgb,var(--navy) 8%,transparent),0 24px 48px color-mix(in srgb,var(--navy) 13%,transparent);
  --lx-titel:'Barlow Condensed','HT Barlow Condensed','Arial Narrow',var(--satz);
  --lx-text:'Barlow','HT Barlow',var(--satz);
  --lx-weich:cubic-bezier(.16,1,.3,1);
}

/* ---------- Flaechen, Raster, Typografie (4.1, 4.7) ---------- */
html body #lp > section{ position:relative; margin:0; padding:var(--lx-abstand) 0; background:var(--lx-karte)!important; background-image:none!important;
  color:var(--lx-tinte)!important; font:400 17px/1.6 var(--lx-text); overflow:clip; scroll-margin-top:72px; border:0 }
html body #lp > section::before, html body #lp > section::after{ content:none!important }
html body #lp > section.lx-alt, html body #lp > section#werkzeug, html body #lp > section#abwicklung, html body #lp > section#weg{ background:var(--lx-alt)!important }
html body #lp > section.lx-tief{ background:var(--lx-tinte)!important; color:#fff!important }
html body #lp .lx-in, html body #lp > section > .fx-breite{ box-sizing:border-box; max-inline-size:var(--lx-breite); margin-inline:auto; padding-inline:var(--lx-rand) }
html body #lp :is(.lx-auge,.fx-auge,.lp-aug){ display:block; margin:0 0 14px!important; font:800 12px/1 var(--lx-text)!important; letter-spacing:.14em!important; text-transform:uppercase; color:var(--lx-akzent)!important }
html body #lp :is(.lx-h2,.fx-h2,.lx-kopf h2){ margin:0!important; font:900 clamp(38px,4.6vw,64px)/1!important; font-family:var(--lx-titel)!important; letter-spacing:-.012em!important; color:var(--lx-tinte)!important;
  text-wrap:balance; background:none!important; -webkit-text-fill-color:currentColor!important }
html body #lp :is(.lx-lead,.fx-lead){ margin:18px 0 0!important; max-inline-size:62ch; font:500 clamp(18px,1.5vw,21px)/1.5 var(--lx-text)!important; color:var(--lx-leise)!important; text-wrap:pretty }
html body #lp :is(.lx-kopf,.fx-kopf){ max-inline-size:860px; margin:0 0 clamp(36px,4.4vw,60px)!important }
html body #lp .lx-kopf-zeile{ max-inline-size:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap }
html body #lp h3{ color:var(--lx-tinte); font-family:var(--lx-text) }
html body #lp p{ color:var(--lx-leise) }
html body #lp > section.lx-tief :is(h2,h3,.lx-h2){ color:#fff!important }
html body #lp > section.lx-tief p{ color:color-mix(in srgb,#fff 78%,transparent) }
html body #lp > section.lx-tief .lp-aug{ color:var(--gold)!important }

/* ---------- Handlung und Entlastung (5.4, 7.6, 7.7) ---------- */
html body #lp .lx-handlung{ display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; margin-top:clamp(32px,4vw,52px) }
html body #lp .lx-knopf{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-block-size:52px; padding:0 26px; border-radius:calc(52px * var(--r-logo)); border:1px solid var(--lx-akzent);
  background:var(--gold); color:var(--lx-tinte)!important; font:800 17px/1 var(--lx-text); text-decoration:none; cursor:pointer; transition:transform var(--zeit-an) var(--feder), background-color var(--zeit-schalt) var(--kurve) }
html body #lp .lx-knopf *{ color:inherit!important }
html body #lp .lx-knopf svg{ inline-size:18px; block-size:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--zeit-schalt) var(--kurve) }
html body #lp .lx-knopf:hover{ background:color-mix(in srgb,var(--gold) 88%,var(--navy)) }
html body #lp .lx-knopf:hover svg{ transform:translateX(3px) }
html body #lp .lx-knopf:active{ transform:scale(.98) }
html body #lp .lx-knopf:focus-visible, html body #lp .lx-knopf-2:focus-visible{ outline:2px solid var(--lx-tinte); outline-offset:3px }
html body #lp .lx-knopf-2{ display:inline-flex; align-items:center; gap:8px; min-block-size:52px; padding:0 22px; border-radius:calc(52px * var(--r-logo)); border:2px solid var(--lx-tinte); background:transparent;
  color:var(--lx-tinte)!important; font:800 16px/1 var(--lx-text); text-decoration:none }
html body #lp .lx-knopf-2 *{ color:inherit!important }
html body #lp .lx-knopf-2 svg{ inline-size:16px; block-size:16px; fill:none; stroke:currentColor; stroke-width:2.2 }
html body #lp .lx-knopf-2:hover{ background:var(--lx-tinte); color:#fff!important }
html body #lp .lx-entl{ display:inline-flex; align-items:center; gap:8px; margin:0; font:600 14px/1.35 var(--lx-text); color:var(--lx-leise)!important }
html body #lp .lx-entl::before{ content:""; inline-size:16px; block-size:16px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v5c0 5-3.4 8.4-7 10-3.6-1.6-7-5-7-10V6l7-3z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v5c0 5-3.4 8.4-7 10-3.6-1.6-7-5-7-10V6l7-3z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat }

/* ---------- Karten und Bento (4.2, 4.5, 6.6) ---------- */
html body #lp .lx-karte{ position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--lx-linie); border-radius:var(--lx-r); background:var(--lx-karte);
  box-shadow:var(--lx-schatten); color:var(--lx-tinte); transition:transform .45s var(--lx-weich), box-shadow .45s var(--lx-weich) }
@media (hover:hover) and (pointer:fine){
  html body #lp .lx-karte:hover{ transform:translateY(-4px); box-shadow:var(--lx-schatten-hoch) }
  html body #lp .lx-karte:hover .lx-bild img{ transform:scale(1.045) }
}
html body #lp .lx-bild{ position:relative; margin:0; overflow:hidden; background:var(--lx-alt) }
html body #lp .lx-bild img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; transition:transform 1s var(--lx-weich) }
html body #lp .lx-karte-text{ display:grid; gap:10px; padding:22px 24px 26px }
html body #lp .lx-karte h3{ margin:0; font:800 clamp(21px,1.7vw,26px)/1.15 var(--lx-text); letter-spacing:-.01em; color:var(--lx-tinte) }
html body #lp .lx-karte p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--lx-leise) }
html body #lp .lx-heute{ display:flex; gap:8px; align-items:baseline; margin:0; font:600 13px/1.4 var(--lx-text); color:var(--lx-leise) }
html body #lp .lx-heute em{ flex:none; font-style:normal; font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--lx-akzent) }
html body #lp .lx-heute span{ text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--navy) 35%,transparent) }

/* Vorteile: Segmentumschalter und Bento je Rolle */
html body #lp .lx-rollen{ display:inline-flex; gap:4px; padding:5px; margin:0 0 14px; border-radius:16px; background:var(--lx-karte); border:1px solid var(--lx-linie); box-shadow:var(--lx-schatten); max-inline-size:100%; overflow-x:auto; scrollbar-width:none }
html body #lp .lx-rollen::-webkit-scrollbar{ display:none }
html body #lp .lx-rollen button{ display:inline-flex; align-items:center; gap:10px; flex:none; min-block-size:48px; padding:6px 18px 6px 6px; border:0; border-radius:12px; background:transparent;
  color:var(--lx-tinte)!important; font:700 15px/1.2 var(--lx-text); cursor:pointer; transition:background-color var(--zeit-schalt) var(--kurve), color var(--zeit-schalt) var(--kurve) }
html body #lp .lx-rollen button img{ inline-size:36px!important; block-size:36px!important; border-radius:10px; object-fit:cover }
html body #lp .lx-rollen button span{ color:inherit!important }
html body #lp .lx-rollen button:hover{ background:var(--lx-alt) }
html body #lp .lx-rollen button[aria-selected="true"]{ background:var(--lx-tinte); color:#fff!important }
html body #lp .lx-fuer{ margin:0 0 28px; font:500 15px/1.5 var(--lx-text); color:var(--lx-leise) }
html body #lp .lx-bento4{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:minmax(0,auto); gap:20px; margin:0; padding:0; list-style:none }
html body #lp .lx-bento4 > li:nth-child(1){ grid-column:1/8; grid-row:1/3 }
html body #lp .lx-bento4 > li:nth-child(2){ grid-column:8/13 }
html body #lp .lx-bento4 > li:nth-child(3){ grid-column:8/13 }
html body #lp .lx-bento4 > li:nth-child(4){ grid-column:1/13; flex-direction:row }
html body #lp .lx-bento4 > li .lx-bild{ aspect-ratio:16/9 }
html body #lp .lx-bento4 > li:nth-child(1) .lx-bild{ aspect-ratio:auto; flex:1 1 auto; min-block-size:300px }
html body #lp .lx-bento4 > li:nth-child(1) h3{ font-size:clamp(26px,2.4vw,36px) }
html body #lp .lx-bento4 > li:nth-child(2) .lx-bild, html body #lp .lx-bento4 > li:nth-child(3) .lx-bild{ aspect-ratio:21/9 }
html body #lp .lx-bento4 > li:nth-child(4) .lx-bild{ flex:0 0 42%; aspect-ratio:auto; min-block-size:240px }
html body #lp .lx-bento4 > li:nth-child(4) .lx-karte-text{ align-content:center; padding:32px 40px }

/* Sortiment: Bento mit Leitkachel */
html body #lp .lx-waren{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:clamp(200px,19vw,270px); gap:20px }
html body #lp .lx-ware{ display:grid; grid-template-rows:minmax(0,1fr) auto; text-decoration:none }
html body #lp .lx-ware .lx-bild{ block-size:100% }
html body #lp .lx-ware-text{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 20px 16px }
html body #lp .lx-ware-text b{ font:800 19px/1.2 var(--lx-text); color:var(--lx-tinte) }
html body #lp .lx-ware-text small{ font:600 13px/1.3 var(--lx-text); color:var(--lx-leise) }
html body #lp .lx-ware-text i{ font-style:normal; color:var(--lx-tinte); transition:transform var(--zeit-schalt) var(--kurve) }
html body #lp .lx-ware:hover .lx-ware-text i{ transform:translateX(4px) }
html body #lp .lx-waren > :nth-child(1){ grid-column:1/7; grid-row:span 2 }
html body #lp .lx-waren > :nth-child(1) .lx-ware-text{ display:grid; gap:4px; padding:20px 24px 22px }
html body #lp .lx-waren > :nth-child(1) .lx-ware-text b{ font-size:26px }
html body #lp .lx-waren > :nth-child(2){ grid-column:7/10 } html body #lp .lx-waren > :nth-child(3){ grid-column:10/13 }
html body #lp .lx-waren > :nth-child(4){ grid-column:7/10 } html body #lp .lx-waren > :nth-child(5){ grid-column:10/13 }
html body #lp .lx-waren > :nth-child(6){ grid-column:1/5 }
html body #lp .lx-waren > :nth-child(7){ grid-column:5/13; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:32px 40px; border-style:dashed; border-width:2px; background:var(--lx-alt); box-shadow:none }
html body #lp .lx-waren > :nth-child(7) b{ font:900 clamp(26px,2.4vw,34px)/1.05 var(--lx-titel); color:var(--lx-tinte) }
html body #lp .lx-waren > :nth-child(7) small{ font:500 16px/1.5 var(--lx-text); color:var(--lx-leise); max-inline-size:52ch }
html body #lp .lx-waren > :nth-child(7) .lx-plus{ display:grid; place-items:center; inline-size:44px; block-size:44px; border-radius:12px; background:var(--lx-karte); border:1px solid var(--lx-linie); font:700 24px/1 var(--lx-text); color:var(--lx-tinte) }

/* Beweisband: Anlagen in Betrieb */
html body #lp .lx-anlagen{ margin-top:clamp(40px,5vw,64px) }
html body #lp .lx-anlagen h3{ margin:0 0 18px; font:800 20px/1.2 var(--lx-text) }
html body #lp .lx-band{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding-bottom:6px; scrollbar-width:thin }
html body #lp .lx-band figure{ scroll-snap-align:start; margin:0; border-radius:var(--lx-r-k); overflow:hidden; border:1px solid var(--lx-linie); background:var(--lx-karte) }
html body #lp .lx-band img{ display:block; inline-size:100%; aspect-ratio:4/3; object-fit:cover }
html body #lp .lx-band figcaption{ display:grid; gap:2px; padding:12px 16px 14px }
html body #lp .lx-band figcaption b{ font:900 24px/1 var(--lx-titel); color:var(--lx-tinte) }
html body #lp .lx-band figcaption span{ font:600 13px/1.3 var(--lx-text); color:var(--lx-leise) }

/* Ohne Lager: Rechner (7.3) */
html body #lp .lx-zwei{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center }
html body #lp .lx-nullen{ display:grid; gap:12px; margin:28px 0 0; padding:0; list-style:none }
html body #lp .lx-nullen li{ display:flex; align-items:center; gap:14px; font:700 17px/1.3 var(--lx-text); color:var(--lx-tinte) }
html body #lp .lx-nullen li::before{ content:"0"; display:grid; place-items:center; flex:none; inline-size:40px; block-size:40px; border-radius:12px; background:var(--lx-alt); border:1px solid var(--lx-linie);
  font:900 20px/1 var(--lx-titel); color:var(--lx-tinte); text-decoration:line-through }
html body #lp .lx-klein{ margin:22px 0 0; font-size:14px; line-height:1.5; color:var(--lx-leise) }
html body #lp .lx-rechner{ padding:clamp(24px,3vw,36px); border:1px solid var(--lx-linie); border-radius:var(--lx-r); background:var(--lx-karte); box-shadow:var(--lx-schatten-hoch) }
html body #lp .lx-rechner h3{ margin:0 0 20px; font:900 28px/1 var(--lx-titel) }
html body #lp .lx-rechner .lp-regler{ display:grid; gap:8px; margin:0 0 18px }
html body #lp .lx-rechner .lp-regler > span{ display:flex; justify-content:space-between; font:600 14px/1.3 var(--lx-text); color:var(--lx-leise) }
html body #lp .lx-rechner output{ font:800 15px/1 var(--lx-text); color:var(--lx-tinte) }
html body #lp .lx-rechner .lp-k-erg{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px }
html body #lp .lx-rechner .lp-k-erg > div{ display:grid; gap:6px; padding:16px 18px; border-radius:var(--lx-r-k); background:var(--lx-alt); border:1px solid var(--lx-linie) }
html body #lp .lx-rechner .lp-k-erg span{ font:600 13px/1.2 var(--lx-text); color:var(--lx-leise) }
html body #lp .lx-rechner .lp-k-erg b{ font:900 clamp(28px,2.6vw,36px)/1 var(--lx-titel); color:var(--lx-tinte) }
html body #lp .lx-rechner .lp-k-erg .lp-k-wir{ background:var(--lx-tinte); border-color:var(--lx-tinte) }
html body #lp .lx-rechner .lp-k-erg .lp-k-wir span{ color:color-mix(in srgb,#fff 75%,transparent) }
html body #lp .lx-rechner .lp-k-erg .lp-k-wir b{ color:#fff }
html body #lp .lx-rechner .lp-klein{ margin:14px 0 0; font-size:13px; color:var(--lx-leise) }

/* Werkzeug: helle Buehne fuer die echte Oberflaeche (E13) */
html body #lp #werkzeug .fx-story{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr); gap:clamp(28px,4vw,72px) }
html body #lp #werkzeug .fx-story-schritte{ margin:0; padding:0; list-style:none }
html body #lp #werkzeug .fx-story-schritt{ min-block-size:48vh; display:flex; flex-direction:column; justify-content:center; opacity:.32; transition:opacity .5s var(--lx-weich) }
html body #lp #werkzeug .fx-story-schritt.fx-aktiv{ opacity:1 }
html body #lp #werkzeug .fx-story-schritt em{ font:900 18px/1 var(--lx-titel); font-style:normal; letter-spacing:.1em; color:var(--lx-akzent) }
html body #lp #werkzeug .fx-story-schritt h3{ margin:12px 0 0; font:900 clamp(30px,3vw,44px)/1.02 var(--lx-titel); color:var(--lx-tinte) }
html body #lp #werkzeug .fx-story-schritt p{ margin:14px 0 0; font-size:17px; color:var(--lx-leise); max-inline-size:42ch }
html body #lp #werkzeug .fx-story-buehne{ position:sticky; inset-block-start:calc(50vh - min(30vw,420px) / 2); block-size:min(30vw,420px) }
html body #lp #werkzeug .fx-story-rahmen{ position:relative; block-size:100%; border-radius:18px; overflow:hidden; background:var(--lx-karte); border:1px solid var(--lx-linie); box-shadow:var(--lx-schatten-hoch); transform:none }
html body #lp #werkzeug .fx-story-rahmen::before{ content:""; position:absolute; inset:0 0 auto; block-size:28px; z-index:2; background:var(--lx-alt); border-bottom:1px solid var(--lx-linie) }
html body #lp #werkzeug .fx-story-bild{ position:absolute; inset:28px 0 0; margin:0; opacity:0; transform:scale(1.04); transition:opacity .6s var(--lx-weich), transform 1s var(--lx-weich) }
html body #lp #werkzeug .fx-story-bild.fx-aktiv{ opacity:1; transform:none }
html body #lp #werkzeug .fx-story-bild img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; object-position:top left }
html body #lp #werkzeug .fx-story-mobilbild{ display:none }
html body #lp #werkzeug .fx-buendel{ position:absolute; inset:0; display:grid; align-content:center; gap:12px; padding:32px 40px; background:var(--lx-karte) }
html body #lp #werkzeug :is(.fx-b-teil,.fx-b-summe,.fx-b-stufe){ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-radius:12px; border:1px solid var(--lx-linie); background:var(--lx-alt); color:var(--lx-tinte) }
html body #lp #werkzeug .fx-b-teil{ inline-size:calc(var(--fx-w,1) * 100%) }
html body #lp #werkzeug :is(.fx-b-teil,.fx-b-summe,.fx-b-stufe) *{ color:inherit!important; font:700 15px/1 var(--lx-text) }
html body #lp #werkzeug .fx-b-summe{ background:var(--lx-tinte); border-color:var(--lx-tinte); color:#fff }
html body #lp #werkzeug .fx-b-stufe{ justify-content:flex-start; gap:12px; background:var(--lx-karte) }
html body #lp #werkzeug .fx-b-stufe svg{ inline-size:28px; block-size:28px; color:var(--lx-tinte) }

/* Wer dahinter steht */
html body #lp .fx-wir{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,4.5vw,80px); align-items:center }
html body #lp .fx-wir-bild{ margin:0; border-radius:var(--lx-r); overflow:hidden; aspect-ratio:4/3; background:var(--lx-alt) }
html body #lp .fx-wir-bild img{ display:block; inline-size:100%; block-size:100%; object-fit:cover }
html body #lp .fx-wir-karten{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px }
html body #lp .fx-wir-karten li{ padding:22px 24px; border-radius:var(--lx-r-k); background:var(--lx-alt); border:1px solid var(--lx-linie) }
html body #lp .fx-wir-karten small{ display:block; font:800 11px/1 var(--lx-text); letter-spacing:.14em; text-transform:uppercase; color:var(--lx-akzent) }
html body #lp .fx-wir-karten li > b{ display:block; margin-top:10px; font:900 clamp(22px,2vw,28px)/1.05 var(--lx-titel); color:var(--lx-tinte) }
html body #lp .fx-wir-karten p{ margin:8px 0 0; font-size:15px; color:var(--lx-leise) }

/* Weg: Schritte, Gebietspruefung, Handlung */
html body #lp .lx-schritte{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; counter-reset:lx }
html body #lp .lx-schritte li{ display:grid; gap:8px; padding:26px 26px 28px; border-radius:var(--lx-r); border:1px solid var(--lx-linie); background:var(--lx-karte); box-shadow:var(--lx-schatten) }
html body #lp .lx-schritte li em{ display:grid; place-items:center; inline-size:40px; block-size:40px; margin-bottom:8px; border-radius:12px; background:var(--lx-tinte); color:#fff; font:900 20px/1 var(--lx-titel); font-style:normal }
html body #lp .lx-schritte li b{ font:800 20px/1.2 var(--lx-text); color:var(--lx-tinte) }
html body #lp .lx-schritte li span{ font-size:15px; color:var(--lx-leise) }
html body #lp .lx-fuer-weg{ margin:16px 0 0!important; font:600 14px/1.4 var(--lx-text); color:var(--lx-leise) }
html body #lp .lx-fuer-weg b{ color:var(--lx-tinte) } html body #lp .lx-fuer-weg a{ color:var(--lx-tinte); font-weight:800; text-decoration:underline; text-underline-offset:3px }
html body #lp .fx-weg-pruef{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(18px,3vw,48px); align-items:center; margin:20px 0 0; padding:clamp(22px,2.6vw,34px);
  border-radius:var(--lx-r); background:var(--lx-karte); border:1px solid var(--lx-linie); box-shadow:var(--lx-schatten) }
html body #lp .fx-weg-pruef h3{ margin:0; font:900 clamp(26px,2.4vw,34px)/1 var(--lx-titel); color:var(--lx-tinte) }
html body #lp .fx-weg-pruef p{ margin:10px 0 0; font-size:15px; color:var(--lx-leise) }
html body #lp .fx-pruef{ display:grid; grid-template-columns:1fr auto; gap:10px; margin:0 }
html body #lp .fx-pruef label{ display:block }
html body #lp .fx-pruef-feld{ display:flex; align-items:center; gap:10px; min-block-size:52px; padding:0 16px; border:1.5px solid color-mix(in srgb,var(--navy) 22%,transparent); border-radius:12px; background:#fff; color:var(--lx-tinte) }
html body #lp .fx-pruef-feld:focus-within{ border-color:var(--lx-tinte); box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 12%,transparent) }
html body #lp .fx-pruef-feld svg{ inline-size:20px; block-size:20px; flex:none }
html body #lp .fx-pruef input{ flex:1; min-inline-size:0; min-block-size:44px; border:0; outline:0; background:transparent; font:600 16px/1 var(--lx-text); color:var(--lx-tinte) }
html body #lp .fx-pruef button{ min-block-size:52px; padding:0 22px; border:2px solid var(--lx-tinte); border-radius:12px; background:var(--lx-karte); color:var(--lx-tinte)!important; font:800 16px/1 var(--lx-text); cursor:pointer }
html body #lp .fx-pruef button *{ color:inherit!important }
html body #lp .fx-pruef button:hover{ background:var(--lx-tinte); color:#fff!important }
html body #lp .fx-pruef-antwort{ grid-column:1/-1; margin:2px 0 0!important; min-block-size:1.4em; font:700 15px/1.4 var(--lx-text); color:var(--lx-tinte)!important }
html body #lp .fx-sr{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
html body #lp .lp-direkt{ margin-top:20px; padding:26px; border-radius:var(--lx-r); background:var(--lx-karte); border:1px solid var(--lx-linie) }
html body #lp .lp-direkt h3{ margin:0 0 8px; font:800 20px/1.2 var(--lx-text) }

/* Fragen: zweispaltig, Akkordeon (7.11, E22) */
html body #lp .lx-fragen{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,96px); align-items:start }
html body #lp .lx-fragen .fx-kopf{ position:sticky; top:96px; margin:0!important }
html body #lp .fx-fragen{ border-top:1px solid var(--lx-linie) }
html body #lp .fx-fragen details{ border-bottom:1px solid var(--lx-linie) }
html body #lp .fx-fragen summary{ display:flex; align-items:center; gap:16px; min-block-size:64px; padding:10px 0; cursor:pointer; list-style:none }
html body #lp .fx-fragen summary::-webkit-details-marker{ display:none }
html body #lp .fx-frage{ flex:1; font:700 18px/1.35 var(--lx-text); color:var(--lx-tinte) }
html body #lp .fx-frage-kurz{ flex:none; padding:5px 10px; border-radius:8px; background:var(--lx-alt); font:800 13px/1 var(--lx-text); color:var(--lx-tinte) }
html body #lp .fx-plus{ position:relative; flex:none; inline-size:18px; block-size:18px }
html body #lp .fx-plus::before, html body #lp .fx-plus::after{ content:""; position:absolute; inset:8px 0 auto; block-size:2px; background:var(--lx-tinte); transition:transform var(--zeit-schalt) var(--kurve) }
html body #lp .fx-plus::after{ transform:rotate(90deg) }
html body #lp .fx-fragen details[open] .fx-plus::after{ transform:rotate(0deg) }
html body #lp .fx-fragen details p{ margin:0 0 20px; max-inline-size:62ch; font-size:16px; line-height:1.6; color:var(--lx-leise) }
@supports (interpolate-size:allow-keywords){ html body #lp .fx-fragen details::details-content{ block-size:0; overflow:clip; transition:block-size .3s var(--kurve), content-visibility .3s allow-discrete } html body #lp .fx-fragen details[open]::details-content{ block-size:auto } html body #lp .fx-fragen{ interpolate-size:allow-keywords } }

/* Kontakt: die eine Tiefensektion */
html body #lp > section#kontakt{ background:var(--lx-tinte)!important }
html body #lp > section#kontakt .lp-innen{ max-inline-size:var(--lx-breite); margin-inline:auto; padding-inline:var(--lx-rand); box-sizing:border-box }
html body #lp > section#kontakt :is(h2){ font:900 clamp(38px,4.6vw,64px)/1 var(--lx-titel)!important; color:#fff!important }
html body #lp > section#kontakt form{ border-radius:var(--lx-r)!important; box-shadow:0 30px 60px color-mix(in srgb,#000 25%,transparent)!important }
html body #lp > section#kontakt form :is(label,span,b,small,p,legend){ color:var(--lx-tinte)!important }
html body #lp > section#kontakt form .lp-knopf-gold{ background:var(--gold)!important; border:1px solid var(--lx-akzent)!important }
html body #lp > section#kontakt form .lp-knopf-gold :is(span,svg){ color:var(--lx-tinte)!important }

/* Beweis und Herstellerband: ruhige Flaechen */
html body #lp > section#beweis{ padding-block:clamp(40px,5vw,64px) }
html body #lp > section#zertifikate{ padding-block:clamp(36px,4vw,56px); border-block:1px solid var(--lx-linie) }
html body #lp #beweis .fx-zahl b, html body #lp #beweis .fx-zahl b *{ color:var(--lx-tinte)!important; background:none!important; -webkit-text-fill-color:currentColor!important }
html body #lp #zertifikate .fx-band-marke{ color:var(--lx-tinte)!important }
html body #lp #zertifikate .fx-band-marke span{ color:var(--lx-tinte)!important }

/* ---------- Flugkinetik zwischen den Sektionen (6.1, E06, E12) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html body #lp > section > :is(.lx-in,.fx-breite){ animation:lx-ein linear both, lx-aus linear both; animation-timeline:view(), view();
      animation-range:entry 0% entry 80%, exit 0% exit 100%; transform-origin:50% 40% }
    html body #lp .lx-karte, html body #lp .lx-schritte li, html body #lp .lx-band figure{ animation:lx-auf linear both; animation-timeline:view(); animation-range:entry 5% entry 70% }
  }
}
@keyframes lx-ein{ from{ opacity:.25; transform:scale(.94) translateY(48px) } to{ opacity:1; transform:none } }
@keyframes lx-aus{ from{ opacity:1; transform:none } to{ opacity:.35; transform:scale(1.035) } }
@keyframes lx-auf{ from{ opacity:0; transform:translateY(28px) scale(.97) } to{ opacity:1; transform:none } }

/* ---------- Rollenweiche behaelt Vorrang ---------- */
html[data-rolle="gh"] body #lp :is(section,div,ul,li,p,span,h2,h3,a,aside,ol)[data-nur]:not([data-nur~="gh"]),
html[data-rolle="epc"] body #lp :is(section,div,ul,li,p,span,h2,h3,a,aside,ol)[data-nur]:not([data-nur~="epc"]),
html[data-rolle="inst"] body #lp :is(section,div,ul,li,p,span,h2,h3,a,aside,ol)[data-nur]:not([data-nur~="inst"]),
html[data-rolle="ek"] body #lp :is(section,div,ul,li,p,span,h2,h3,a,aside,ol)[data-nur]:not([data-nur~="ek"]){ display:none!important }

/* ---------- Mobil bis 1024 px ---------- */
@media (max-width:1024px){
  html body #lp .lx-bento4, html body #lp .lx-waren{ grid-template-columns:1fr; grid-auto-rows:auto }
  html body #lp .lx-bento4 > li, html body #lp .lx-waren > *{ grid-column:auto!important; grid-row:auto!important }
  html body #lp .lx-bento4 > li:nth-child(4){ flex-direction:column }
  html body #lp .lx-bento4 > li .lx-bild, html body #lp .lx-bento4 > li:nth-child(1) .lx-bild, html body #lp .lx-bento4 > li:nth-child(4) .lx-bild{ display:block; flex:none; aspect-ratio:16/9; min-block-size:0 }
  html body #lp .lx-bento4 > li:nth-child(4) .lx-karte-text{ padding:22px 24px 26px }
  html body #lp .lx-waren{ grid-template-columns:1fr 1fr }
  html body #lp .lx-waren > :nth-child(1), html body #lp .lx-waren > :nth-child(7){ grid-column:1/-1!important }
  html body #lp .lx-ware .lx-bild{ aspect-ratio:1/1 }
  html body #lp .lx-waren > :nth-child(1) .lx-bild{ aspect-ratio:16/10 }
  html body #lp .lx-ware-text{ padding:12px 14px 14px } html body #lp .lx-ware-text small{ display:none }
  html body #lp .lx-waren > :nth-child(1) .lx-ware-text small{ display:block }
  html body #lp .lx-waren > :nth-child(7){ padding:24px }
  html body #lp .lx-zwei, html body #lp .fx-wir, html body #lp .lx-fragen, html body #lp .fx-weg-pruef{ grid-template-columns:1fr }
  html body #lp .lx-fragen .fx-kopf{ position:static }
  html body #lp .lx-schritte{ grid-template-columns:1fr }
  html body #lp .fx-wir-karten{ grid-template-columns:1fr }
  html body #lp .fx-pruef{ grid-template-columns:1fr }
  html body #lp #werkzeug .fx-story{ grid-template-columns:1fr }
  html body #lp #werkzeug .fx-story-buehne{ display:none }
  html body #lp #werkzeug .fx-story-schritt{ min-block-size:0; opacity:1; padding-block:16px }
  html body #lp #werkzeug .fx-story-mobilbild{ display:block; margin-top:18px; border-radius:16px; overflow:hidden; border:1px solid var(--lx-linie); box-shadow:var(--lx-schatten); aspect-ratio:16/10; background:var(--lx-karte) }
  html body #lp #werkzeug .fx-story-mobilbild:empty{ display:none }
  html body #lp #werkzeug .fx-story-mobilbild img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; object-position:top left }
  html body #lp .lx-handlung{ flex-direction:column; align-items:stretch }
  html body #lp .lx-knopf{ min-block-size:56px }
  html body #lp .lx-entl{ justify-content:center }
  html body #lp .lx-rollen{ display:grid; grid-template-columns:1fr 1fr; inline-size:100% }
  html body #lp .lx-rollen button{ font-size:13.5px; padding-right:10px }
}
@media (prefers-reduced-motion:reduce){
  html body #lp *{ transition:none!important; animation:none!important }
}
@media (max-width:1024px){
  html body #lp .lx-bento4{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,84%); overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--lx-rand)); padding:4px var(--lx-rand) 12px; scroll-padding-inline:var(--lx-rand); scrollbar-width:none }
  html body #lp .lx-bento4::-webkit-scrollbar{ display:none }
  html body #lp .lx-bento4 > li{ scroll-snap-align:start }
  html body #lp .lx-band{ margin-inline:calc(-1 * var(--lx-rand)); padding-inline:var(--lx-rand); grid-auto-columns:minmax(0,72%) }
}
html body #lp .lx-fuer-weg{ display:flex; align-items:center; flex-wrap:wrap; gap:0 8px }
html body #lp .lx-fuer-weg a{ display:inline-flex; align-items:center; min-block-size:44px; padding:0 4px }