/** Shopify CDN: Minification failed

Line 837:18 Unexpected "{"
Line 837:27 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:jlc-announcement-bar (INDEX:22) */
.jlc-anno{background:var(--navy);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;gap:12px;height:46px;font-weight:500}
.jlc-anno .jlc-cd{display:inline-flex;gap:2px;align-items:center;background:var(--red);border-radius:4px;padding:3px 8px;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.04em}
.jlc-anno .jlc-cd i{display:flex;flex-direction:column;align-items:center;font-style:normal;line-height:1}
.jlc-anno .jlc-cd i b{font-size:13px}
.jlc-anno .jlc-cd i em{font-style:normal;font-size:9px;font-weight:500;opacity:.85;letter-spacing:.06em;margin-top:1px}
/* END_SECTION:jlc-announcement-bar */

/* START_SECTION:jlc-benefit-overlay (INDEX:23) */
@media(min-width:900px){
  /* Vorlage: die vier Punkte als 2x2-Raster, kein Bild daneben */
  .jl .jlc-bo{max-width:960px}
  .jl .jlc-ba{grid-template-columns:1fr 1fr;gap:14px;align-items:start}
}
.jlc-ba{display:grid;gap:10px}
/* Der Button ist nur noch die Buehne (perspective); Karte und Rueckseite sind die beiden Flaechen.
   Hoehe der Buehne setzt das Skript, damit sie beim Umdrehen auf die Rueckseite mitwaechst. */
.jl .jlc-ba-item{display:block;width:100%;padding:0;background:none;box-shadow:none;border-radius:var(--r-card);text-align:left;perspective:1200px;-webkit-tap-highlight-color:transparent}
.jl .jlc-flip{position:relative;display:block;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,.15,.2,1),height .3s ease}
.jl .jlc-ba-item[aria-pressed=true] .jlc-flip{transform:rotateY(180deg)}
.jl .jlc-flip__front,.jl .jlc-flip__back{display:flex;align-items:center;gap:12px;background:var(--karte);border:1px solid var(--line);border-radius:var(--r-card);padding:10px;box-shadow:var(--shadow-karte);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.jl .jlc-flip__front{position:relative;transition:box-shadow .15s}
@media(hover:hover){.jl .jlc-ba-item:hover .jlc-flip__front{box-shadow:var(--shadow-hoch)}}
.jl .jlc-flip__back{position:absolute;inset:0;transform:rotateY(180deg);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;padding:14px 48px 14px 14px;overflow:visible;background:var(--blue-50);border:1.5px solid var(--blue-800)}
/* Bild wie bei Elare "Carefully Crafted": 84 px mobil, 112 px ab Desktop (vorher 66) */
.jlc-ba-item .jlc-ph{width:84px;height:84px;flex:none;font-size:8px;border-radius:8px;object-fit:cover}
@media(min-width:900px){.jlc-ba-item .jlc-ph{width:112px;height:112px}}
.jlc-ba-item .jlc-t{flex:1;min-width:0}
.jlc-ba-item .jlc-t b{display:block;font-family:Poppins,system-ui,sans-serif;font-size:16px}
.jlc-ba-item .jlc-t span{font-size:14px;color:var(--ink-60)}
.jlc-circ{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:19px;flex:none;background:#fff;transition:background .15s,color .15s}
@media(hover:hover){.jl .jlc-ba-item:hover .jlc-circ{background:var(--blue);color:#fff}}
.jl .jlc-circ--back{position:absolute;top:10px;right:10px}
.jl .jlc-flip__title{display:block;font-family:Poppins,system-ui,sans-serif;font-size:18px;line-height:1.2;margin-top:2px}
.jl .jlc-flip__line{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.jl .jlc-flip__text{display:block;font-size:14px;line-height:1.5;color:var(--ink-80);margin-top:4px}
@media(prefers-reduced-motion:reduce){.jl .jlc-flip{transition:none}}
/* END_SECTION:jlc-benefit-overlay */

/* START_SECTION:jlc-bundle-repeat (INDEX:24) */
/* Das Markup des Kaufblocks wird aus dem <template> in jlc-main-product geklont, sein CSS
   steht auch dort. Hier stand eine zweite Kopie des Mobil-Blocks — und weil Shopify alle
   Section-Stylesheets in eine Datei baut, hat sie das Packbild in BEIDEN Kaufbloecken
   ausgeblendet, auch nachdem die Regel drueben entfernt war. Keine Regel zum Kaufblock
   dupliziert hier hinein (die .jlc-atc-note-Regel steht in jlc-main-product). */
/* END_SECTION:jlc-bundle-repeat */

/* START_SECTION:jlc-callouts (INDEX:25) */
/* Mobil: Karte oben, Produktbild darunter. Elare loest das mit column-reverse,
   die Quellreihenfolge bleibt dadurch Bild zuerst (Screenreader, Ladereihenfolge). */
.jl .jlc-co{display:flex;flex-direction:column-reverse;gap:16px}
.jl .jlc-co-media{border-radius:20px;overflow:hidden;display:flex}
.jl .jlc-co-media .jlc-ph{width:100%;aspect-ratio:1;border-radius:0;border:0;object-fit:cover}
.jl .jlc-co-card{background:var(--karte);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:20px}
/* Headline (17.09.): der kursive Anfang steht auf eigener Zeile, sonst bricht die Zeile mitten
   im Schriftwechsel ("Knoblauchpillen ist" mobil, "ist" allein am Zeilenende am Desktop).
   text-wrap:balance verteilt den fetten Teil gleichmaessig, Browser ohne Support ignorieren es. */
.jl .jlc-co-card h2{text-wrap:balance}
.jl .jlc-co-card h2 .jlc-alt{display:block;margin-bottom:2px}
/* Buehne: einziger Bezugspunkt fuer die absolut gesetzten Callouts und das Detailbild */
.jl .jlc-co-stage{position:relative;min-height:350px}
.jl .jlc-co-pt{position:absolute;left:0;width:169px;max-width:54%;z-index:2}
/* Mobil steht das Detailbild rechts und ueberlappt die Textspalte. Bei Elare geht das
   auf, weil deren Callout-Texte kurz sind; deutsche Copy ist laenger. Deshalb liegt der
   Text ueber dem Bild (z-index) und die Spalte endet vor dem Bild (max-width). */
.jl .jlc-co-pt--1{top:35px}
.jl .jlc-co-pt--2{top:235px}
/* Linie mit Punkt. Der Punkt zeigt zum Detailbild, deshalb dreht Callout 1 auf
   Desktop die Richtung um (row-reverse) statt eine zweite Klasse zu brauchen. */
.jl .jlc-co-line{display:flex;align-items:center;height:4px;margin-bottom:10px}
.jl .jlc-co-line i{flex:1;height:1px;background:var(--blue-400)}
.jl .jlc-co-line b{flex:none;width:4px;height:4px;border-radius:50%;background:var(--blue-400)}
.jl .jlc-co-pt strong{display:block;font-family:Poppins,system-ui,sans-serif;font-weight:600;font-size:14px;line-height:1.2;margin-bottom:4px;color:var(--ink)}
.jl .jlc-co-pt p{font-size:12px;line-height:1.4;color:var(--ink-60)}
/* Das Detailbild sitzt rechts, leicht ueber dem Kartenrand wie bei Elare, aber vertikal
   mittig zwischen den beiden Callout-Linien (Linie 1 bei 35px, Linie 2 bei 235px, Mitte 137).
   Elare haengt es unten rechts; mit unserer laengeren Copy rutschte es dann unter die
   zweite Linie, deshalb hier die Mitte. */
.jl .jlc-co-pill{position:absolute;right:-18px;top:137px;transform:translateY(-50%);width:169px;height:169px;z-index:1}
.jl .jlc-co-pill .jlc-ph{width:100%;height:100%;border-radius:0;border:0;object-fit:contain}
@media(min-width:900px){
  .jl .jlc-co{flex-direction:row;gap:30px;align-items:stretch}
  .jl .jlc-co-media{flex:0 0 34%}
  .jl .jlc-co-media .jlc-ph{aspect-ratio:auto;height:100%}
  .jl .jlc-co-card{flex:1 1 auto;min-width:0;min-height:550px;padding:26px}
  /* Elares Buehne ist 518 breit und sitzt rechts in der Karte. Unsere Karte ist breiter,
     und ohne diese Begrenzung zog sich die Buehne auf 710 auseinander: das Detailbild lag
     dann zu weit von den Callout-Linien weg, die Striche zeigten ins Leere. */
  /* Feste 400px, nicht flex:1. Die Buehne ist der Bezugspunkt fuer drei absolut gesetzte
     Elemente: Callout 1 haengt oben, Callout 2 unten, das Bild bei 50 Prozent. Waechst die
     Buehne mit der Karte mit, laufen die drei auseinander und das Bild rutscht unter die
     zweite Linie. Bei Elare ist die Flaeche ebenfalls fest 400 hoch. */
  .jl .jlc-co-stage{flex:0 0 400px;height:400px;max-width:518px;margin-left:auto;width:100%}
  .jl .jlc-co-pt{width:207px;max-width:none}
  .jl .jlc-co-pt--1{top:60px;left:auto;right:0}
  .jl .jlc-co-pt--1 .jlc-co-line{flex-direction:row-reverse}
  .jl .jlc-co-pt--2{top:auto;bottom:60px;left:0;right:auto}
  /* Elares Tropfen ist rund 115px hoch in einer 400px-Buehne und sitzt damit zwischen den
     beiden Callouts. Ein Motiv, das die vollen 200px fuellt, haengt unter der zweiten Linie
     heraus. Deshalb sitzt das Bild mittig im Feld und nimmt 58 Prozent der Feldhoehe ein.
     Mobil bleibt es gross, dort ist die Buehne enger und das Motiv traegt die Flaeche. */
  /* left/top 50% setzen die linke obere Ecke in die Mitte; translate schiebt das Bild um die
     halbe eigene Groesse zurueck, sonst haengt es unten rechts statt mittig im Feld. */
  .jl .jlc-co-pill{left:50%;right:auto;top:50%;transform:translate(-50%,-50%);width:200px;height:200px;padding:42px}
  .jl .jlc-co-pill .jlc-ph{object-fit:contain}
}
/* END_SECTION:jlc-callouts */

/* START_SECTION:jlc-compare-3 (INDEX:26) */
.jlc-c3-wrap{max-width:var(--wrap);margin:0 auto;text-align:center}
.jlc-c3-head{margin:0 0 10px}
.jlc-c3-sub{margin:0 auto 28px;max-width:52ch;color:var(--ink-60)}
.jlc-c3-foot{margin:18px auto 0;max-width:60ch;font-size:13px;color:var(--ink-40)}

/* gemeinsames Raster, damit alle Zeilen buendig bleiben */
.jlc-c3-table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 6px;text-align:left;padding-top:16px}
.jlc-c3-corner{display:none}
@media(min-width:900px){
  .jlc-c3-table{grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:6px 10px;padding-top:0}
  .jlc-c3-corner{display:block}
}

/* Kopfzellen */
.jlc-c3-h{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px 14px;border-radius:var(--r-card) var(--r-card) 0 0;background:var(--blue-50);position:relative}
.jlc-c3-h img{width:56px;height:56px;object-fit:contain}
.jlc-c3-h b{font-size:15px;line-height:1.2;text-align:center;color:var(--ink)}
.jlc-c3-hsub{font-size:12px;color:var(--ink-40);text-align:center}
.jlc-c3-h--mine{background:var(--karte);box-shadow:var(--shadow-karte);z-index:1;padding-top:26px}
.jlc-c3-h--mine b{color:var(--blue-800)}
.jlc-c3-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--cta-bg);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:999px}

/* Zeilenbeschriftung */
.jlc-c3-label{grid-column:1 / -1;font-weight:700;font-size:14px;color:var(--ink);padding:16px 2px 2px}
@media(min-width:900px){
  .jlc-c3-label{grid-column:auto;display:flex;align-items:center;padding:14px 6px;font-size:15px}
}

/* Wertzellen */
.jlc-c3-cell{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 10px;background:var(--blue-50);font-size:13px;line-height:1.35;color:var(--ink-80)}
@media(min-width:900px){.jlc-c3-cell{flex-direction:row;align-items:center;gap:9px;padding:14px 12px;font-size:14px}}
.jlc-c3-cell--mine{background:var(--karte);box-shadow:var(--shadow-karte);color:var(--blue-800);font-weight:600;z-index:1}
.jlc-c3-cell--last{border-radius:0 0 var(--r-card) var(--r-card)}
.jlc-c3-table>.jlc-c3-cell:nth-last-child(-n+2){border-radius:0 0 var(--r-card) var(--r-card)}

.jlc-c3-cell .jlc-ico-circle{flex:0 0 auto;width:22px;height:22px;background:var(--blue-100);color:var(--blue-800)}
.jlc-c3-cell--mine .jlc-ico-circle{background:var(--blue-800);color:#fff}
/* END_SECTION:jlc-compare-3 */

/* START_SECTION:jlc-compare-cards (INDEX:27) */
/* Mobil eine Spalte: Headline, Tabelle, Text. Elare: 30px Abstand. */
.jl .jlc-cc{display:flex;flex-direction:column;gap:30px}
.jl .jlc-cc-head h2{margin:0}
/* Beide Karten unten buendig, damit die schmalere Karte oben Platz fuer ihre
   Ueberschrift laesst — so macht es die Vorlage. */
.jl .jlc-cc-table{display:flex;gap:8px;align-items:flex-end}
.jl .jlc-cc-side{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.jl .jlc-cc-side--ours{flex:1.19 1 0}
.jl .jlc-cc-side--theirs{flex:1 1 0}
.jl .jlc-cc-pack{text-align:center;margin-bottom:-6px}
.jl .jlc-cc-pack img{width:58%;max-width:150px;height:auto;margin:0 auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.jl .jlc-cc-card{border-radius:5px;padding-bottom:22px;overflow:hidden}
/* Heller als das Band, nicht dunkler — so hebt sich unsere Spalte ab, egal wie
   dunkel die Section eingestellt ist. */
.jl .jlc-cc-side--ours .jlc-cc-card{background:rgba(255,255,255,.13)}
.jl .jlc-cc-side--theirs .jlc-cc-card{background:#fff;border:1px solid #EAEAEA}
/* 15px auf Mobil: die rechte Spalte ist dort nur ~147px breit, und ein langes
   Wort wie "Knoblauchkapseln" lief sonst aus der Karte. break-word als Netz. */
.jl .jlc-cc-name{display:block;text-align:center;font-family:Poppins,system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1.25;padding:12px 8px;overflow-wrap:break-word;hyphens:auto}
.jl .jlc-cc-side--ours .jlc-cc-name{color:#fff}
.jl .jlc-cc-side--theirs .jlc-cc-name{color:#fff;padding-bottom:10px}
.jl .jlc-cc-card ul{list-style:none;margin:0;padding:0}
.jl .jlc-cc-card li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;min-height:100px;padding:10px;font-size:14px;line-height:1.3}
.jl .jlc-cc-side--ours li{color:#fff;border-bottom:1px solid rgba(255,255,255,.55)}
.jl .jlc-cc-side--ours li:last-child{border-bottom:0}
.jl .jlc-cc-side--theirs li{color:var(--ink);border-bottom:1px solid #EAEAEA}
.jl .jlc-cc-side--theirs li:last-child{border-bottom:0}
.jl .jlc-cc-side--ours li .jlc-ico{color:#fff}
.jl .jlc-cc-side--theirs li .jlc-ico{color:#B9B9B9}
.jl .jlc-cc-checks{list-style:none;margin:0 0 22px;padding:0}
.jl .jlc-cc-checks li{display:flex;gap:12px;align-items:flex-start;color:#fff;font-size:16px;line-height:1.4;margin-bottom:14px}
.jl .jlc-cc-checks li .jlc-ico{flex:none;margin-top:3px;color:#fff}
@media(min-width:900px){
  /* Elare: Tabelle 565 zu Textspalte 475, 8 Prozent Abstand, mittig ausgerichtet.
     Drei Kinder in zwei Spalten: Tabelle links ueber beide Zeilen, rechts
     Headline oben und Text darunter. Mobil bleibt es die Flex-Spalte oben. */
  .jl .jlc-cc{display:grid;grid-template-columns:minmax(0,565fr) minmax(0,475fr);column-gap:8%;row-gap:14px;align-items:center;grid-template-areas:"table head" "table body"}
  .jl .jlc-cc-head{grid-area:head;align-self:end;text-align:left}
  .jl .jlc-cc-table{grid-area:table}
  .jl .jlc-cc-body{grid-area:body;align-self:start}
  .jl .jlc-cc-card li{min-height:85px;font-size:15px}
  .jl .jlc-cc-name{font-size:23px;padding:18px 12px}
  .jl .jlc-cc-pack img{width:50%}
}
/* END_SECTION:jlc-compare-cards */

/* START_SECTION:jlc-comparison-table (INDEX:28) */
.jlc-cmp-flex{display:grid;gap:36px;align-items:center;max-width:var(--wrap);margin:0 auto}
@media(min-width:900px){.jlc-cmp-flex{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px}}
.jlc-cmp-table{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:dense;gap:0 8px;padding-top:44px;max-width:640px}
.jlc-cmp-col{display:contents}                          /* Zellen sitzen im gemeinsamen Raster, Zeilen bleiben bündig */
.jlc-cmp-col--jello>*{grid-column:1;background:var(--karte);color:var(--blue-800)}
.jlc-cmp-col--andere>*{grid-column:2;background:rgba(255,255,255,.10);color:rgba(255,255,255,.75)}
.jlc-cmp-col>.jlc-cmp-h{border-radius:var(--r-card) var(--r-card) 0 0}
.jlc-cmp-col>.jlc-cmp-cell:last-child{border-radius:0 0 var(--r-card) var(--r-card)}
.jlc-cmp-h{text-align:center;padding:0 12px 14px;border-bottom:1px solid var(--line)}
.jlc-cmp-col--andere .jlc-cmp-h{border-bottom-color:rgba(255,255,255,.18)}
.jlc-cmp-h .jlc-ph{width:112px;height:124px;margin:-44px auto 10px;font-size:9px;background:#fff;border-color:#E0C4BF;color:#9A7B80}
.jlc-cmp-h b{font-family:Poppins;font-size:16px;display:flex;gap:6px;align-items:center;justify-content:center}
.jlc-cmp-col--andere .jlc-cmp-h b{color:#fff}
.jlc-cmp-h span{font-size:12px;display:block;margin-top:2px}
.jlc-cmp-cell{display:flex;gap:10px;align-items:center;min-height:54px;padding:10px 14px;font-size:14px;line-height:1.3;border-bottom:1px solid var(--line)}
.jlc-cmp-col--andere .jlc-cmp-cell{border-bottom-color:rgba(255,255,255,.18)}
.jlc-cmp-cell:last-child{border-bottom:0}
.jlc-cmp-col--jello .jlc-cmp-cell{font-weight:700}
/* gefüllte Kreis-Icons: Jello blau, Andere hellblau, Argumente rechts hellblau mit dunklem Haken */
.jlc-ico-circle{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.jlc-ico-circle .jlc-ico{width:13px;height:13px;stroke-width:2.4}
.jlc-cmp-col--jello .jlc-ico-circle{background:var(--blue-800);color:#fff}
.jlc-cmp-col--andere .jlc-ico-circle{background:var(--blue-200);color:var(--blue-800)}
.jlc-cmp-right h2{color:#fff;margin-bottom:20px}
.jlc-cmp-bullets{list-style:none;padding:0;margin:0}
.jlc-cmp-bullets li{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;color:rgba(255,255,255,.85);font-size:15px;line-height:1.55}
.jlc-cmp-bullets .jlc-ico-circle{width:24px;height:24px;margin-top:1px;background:var(--blue-100);color:var(--navy)}
.jlc-cmp-bullets li b{color:#fff}
.jlc-cmp-right .jlc-cta-block{margin-top:26px;text-align:left}
.jlc-cmp-right .jlc-cta-block .jlc-btn{margin-inline:0}
.jlc-cmp-right .jlc-guar{justify-content:flex-start}
@media(max-width:599px){.jlc-cmp-cell{flex-direction:column;text-align:center;gap:6px;padding:12px 8px;font-size:13px}}
@media(max-width:899px){.jlc-cmp-table{max-width:none}.jlc-cmp-right .jlc-cta-block .jlc-btn{margin-inline:auto}.jlc-cmp-right .jlc-guar{justify-content:center}}
/* END_SECTION:jlc-comparison-table */

/* START_SECTION:jlc-editorial (INDEX:29) */
.jl .jlc-ed-art{max-width:680px}
.jl .jlc-ed-bar{display:flex;justify-content:space-between;align-items:center;padding:0 0 10px;margin:0 0 18px;border-bottom:1px solid var(--line)}
.jl .jlc-ed-brand{font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:14px;color:var(--navy)}
.jl .jlc-ed-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40)}
.jl .jlc-ed .jlc-eyebrow.jlc-small{margin-bottom:8px}
.jl .jlc-ed-h{font-size:26px;line-height:1.2;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.jl .jlc-ed-by{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.4;color:var(--ink-60);margin:0 0 18px}
.jl .jlc-ed-av{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover}
.jl .jlc-ed-img{margin:0 0 20px;border-radius:var(--r-card);overflow:hidden}
.jl .jlc-ed-img .jlc-ph,.jl .jlc-ed-img img{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover;border-radius:0}
.jl .jlc-ed-lead p,.jl .jlc-ed-p p{font-size:17px;line-height:1.75;color:var(--ink-80);margin:0 0 22px}
.jl .jlc-ed-lead p:first-child::first-line{font-weight:500}
.jl .jlc-ed-lead p strong,.jl .jlc-ed-p p strong{color:var(--ink);font-weight:700}
.jl .jlc-ed-h3{font-size:22px;line-height:1.22;letter-spacing:-.015em;margin:30px 0 12px;text-wrap:balance}
.jl .jlc-ed-h3 .jlc-alt{color:var(--blue);font-family:var(--font-alt);font-weight:700;font-style:italic;letter-spacing:0}
.jl .jlc-ed-pull{margin:22px 0 24px;padding:14px 0 14px 20px;border-left:4px solid var(--blue);font-family:var(--font-alt);font-style:italic;font-size:20px;line-height:1.45;color:var(--navy)}
.jl .jlc-ed-close{font-size:18px;line-height:1.5;font-weight:700;color:var(--ink);margin:26px 0 0}
.jl .jlc-ed .jlc-cta-block{margin-top:26px}
.jl .jlc-ed .jlc-btn{white-space:normal;text-align:center;line-height:1.25}
@media(min-width:900px){
  .jl .jlc-ed-h{font-size:36px}
  .jl .jlc-ed-h3{font-size:26px}
  .jl .jlc-ed-lead p,.jl .jlc-ed-p p{font-size:18px}
  .jl .jlc-ed-pull{font-size:22px;padding-left:24px}
  .jl .jlc-ed-close{font-size:20px}
}
/* END_SECTION:jlc-editorial */

/* START_SECTION:jlc-faq (INDEX:30) */
.jl .jlc-faq .jlc-sub{margin-bottom:22px}
.jl .jlc-faq-list{text-align:left;display:grid;gap:10px}
.jl .jlc-faq-item{border:1px solid var(--line);border-radius:var(--r-card);background:var(--karte);overflow:hidden}
.jl .jlc-faq-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;width:100%;text-align:left;background:transparent;border:0;color:var(--ink);cursor:pointer;font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:15px;line-height:1.35;transition:background .15s}
@media(hover:hover){.jl .jlc-faq-head:hover{background:var(--blue-50)}}
.jl .jlc-faq-sign{flex:none;font-size:22px;color:var(--blue);line-height:1}
.jl .jlc-faq-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
@media(prefers-reduced-motion:reduce){.jl .jlc-faq-body{transition:none}}
.jl .jlc-faq-in{padding:0 16px 16px;font-size:15px;line-height:1.6;color:var(--ink-80)}
.jl .jlc-faq-in strong,.jl .jlc-faq-in b{color:var(--ink)}
.jl .jlc-faq-in p{margin:0}
.jl .jlc-faq-in p+p{margin-top:12px}
.jl .jlc-faq .jlc-cta-block{margin-top:26px}
@media(min-width:900px){
  .jl .jlc-faq-head{font-size:16px;padding:18px 20px}
  .jl .jlc-faq-in{padding:0 20px 20px;font-size:16px}
}
/* END_SECTION:jlc-faq */

/* START_SECTION:jlc-guarantee (INDEX:31) */
/* Bild quadratisch, auf Desktop rechts neben dem Text */
.jl .jlc-seal-img .jlc-ph,.jl .jlc-seal-img img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto}
@media(min-width:900px){
  .jl .jlc-gr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;max-width:1000px;text-align:left}
  .jl .jlc-gr .jlc-sub{margin-left:0;margin-right:0}
  .jl .jlc-gr .jlc-btn{margin-inline:0}
  .jl .jlc-gr .jlc-seal-img{margin-top:0}
}
/* Angebotsmodus: Bild links, Liste, Angebotszeile, Sicherheitszeile, Zitat auf dem Bild */
/* Bild links: mobil steht das Bild ueber dem Text (wie bei Resilia), Desktop links daneben */
.jl .jlc-gr-left{display:flex;flex-direction:column}
.jl .jlc-gr-left .jlc-seal-img{order:1;margin-top:0;margin-bottom:22px}
.jl .jlc-gr-left .jlc-gr-text{order:2}
@media(min-width:900px){
  .jl .jlc-gr-left{display:grid}
  .jl .jlc-gr-left .jlc-seal-img{margin-bottom:0}
}
.jl .jlc-gl-title{font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:15px;margin:14px 0 8px}
.jl .jlc-gl{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px;text-align:left}
.jl .jlc-gl li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.jl .jlc-gl-tick{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;background:#fff;color:var(--blue-800);display:grid;place-items:center;border:1px solid var(--line)}
.jl .jlc-gl-offer{font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:17px;margin:0 0 14px}
.jl .jlc-gl-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;font-size:13px;color:var(--ink-60)}
@media(min-width:900px){.jl .jlc-gr .jlc-gl-secure{justify-content:flex-start}.jl .jlc-gr .jlc-gl{margin-inline:0}}
.jl .jlc-gq{position:absolute;left:14px;right:14px;top:14px;margin:0;padding:14px 16px;background:rgba(255,255,255,.92);border-radius:var(--r-card);box-shadow:var(--shadow-karte);text-align:left}
.jl .jlc-gq p{margin:0;font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:16px;line-height:1.3;color:var(--ink)}
.jl .jlc-gq cite{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--ink-60)}
.jlc-seal{width:104px;height:104px;margin:0 auto 16px;position:relative;color:var(--blue)}
.jlc-seal svg{width:100%;height:100%;display:block}
.jlc-seal .jlc-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:Poppins;font-weight:700;line-height:1}
.jlc-seal .jlc-txt b{font-size:27px}
.jlc-seal .jlc-txt span{font-size:9px;letter-spacing:.2em}
.jlc-seal-img{position:relative;margin-top:24px}
.jlc-seal-img .jlc-ph{height:260px}
.jlc-seal-img .jlc-mini{position:absolute;right:14px;bottom:-18px;width:78px;height:78px;color:var(--navy)}
.jlc-seal-img .jlc-mini .jlc-txt b{font-size:20px}
.jlc-seal-img .jlc-mini .jlc-txt span{font-size:7.5px}
/* END_SECTION:jlc-guarantee */

/* START_SECTION:jlc-ingredient-cards (INDEX:32) */
/* Dosis-Pille steht jetzt unter dem Namen; leer lassen blendet sie aus */
.jl .jlc-wirkstoffe .jlc-cbody h3{margin-bottom:6px}
.jl .jlc-wirkstoffe .jlc-pill{margin-bottom:10px}
.jlc-wirkstoffe .jlc-card{padding:14px;text-align:center;background:var(--karte)}
.jlc-wirkstoffe .jlc-card p{text-align:left}
.jlc-wirkstoffe .jlc-card .jlc-ph{aspect-ratio:1/1;border-radius:10px;border:1px solid #E0C4BF}
.jlc-wirkstoffe .jlc-cbody{padding:16px 6px 6px}
/* END_SECTION:jlc-ingredient-cards */

/* START_SECTION:jlc-journey-timeline (INDEX:33) */
/* Bild-Logo statt Wortmarke: ohne Icon, Breite ueber die Section einstellbar */
.jl .jlc-lg--img img{width:var(--lg-w,35%);max-width:320px;height:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
/* Ohne Bannerbild traegt die linke Spalte sich selbst: Wortmarke klein ueber der Headline */
.jlc-jr-eyebrow{margin:0 0 12px;font-family:Poppins;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.jlc-jr-mark img{width:120px;max-width:45%;height:auto;margin-bottom:16px}
.jlc-banner{position:relative;border-radius:var(--r-card);overflow:hidden;margin-bottom:26px}
.jlc-banner .jlc-ph{height:200px;border-radius:0;border:0}
.jlc-banner .jlc-lg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--navy) 55%,transparent);color:#fff;font-family:Poppins;font-weight:700;font-size:24px;gap:8px}
.jlc-tl{--tl-pad:22px;position:relative;padding-left:var(--tl-pad);margin-top:26px}
.jlc-tl:before{content:"";position:absolute;left:5px;top:8px;bottom:12px;width:2px;background:var(--sky-2)}
/* aufleuchtende Linie: waechst beim Scrollen mit, gesteuert ueber --tl-fill.
   transform:scaleY statt height — height animiert das Layout bei jedem Scroll-Event. */
.jlc-tl:after{content:"";position:absolute;left:5px;top:8px;width:2px;height:calc(100% - 20px);background:var(--blue);transform:scaleY(var(--tl-fill,0));transform-origin:top;transition:transform .25s linear}
@media(prefers-reduced-motion:reduce){.jlc-tl:after{transform:none;transition:none}}
.jlc-tl-step{position:relative;margin-bottom:22px}
/* Punktmitte = Linienmitte (6px in .jlc-tl), gerechnet gegen den Innenabstand --tl-pad,
   die Position gilt damit auf Mobile (22px) und Desktop (26px) gleichermassen.
   Damit ist die Position unabhaengig von Randbreite und box-sizing. */
.jlc-tl-step:before{content:"";box-sizing:border-box;position:absolute;left:calc(6px - var(--tl-pad));top:9px;transform:translateX(-50%);width:13px;height:13px;z-index:2;border-radius:50%;background:#fff;border:2px solid var(--sky-2);box-shadow:none;transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
/* erreichte Stufe: leuchtet auf */
.jlc-tl-step.jlc-on:before{background:var(--blue);border-color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent),0 0 12px 2px color-mix(in srgb,var(--blue) 45%,transparent);transform:translateX(-50%) scale(1.12)}
.jlc-tl-step.jlc-on:last-child:before{background:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 22%,transparent),0 0 12px 2px color-mix(in srgb,var(--navy) 45%,transparent)}
.jlc-tl-lbl{display:inline-block;background:var(--navy);transition:background .3s;color:#fff;font-family:Poppins;font-weight:700;font-size:13px;padding:5px 14px;border-radius:6px;margin-bottom:9px}
/* erreichte Stufe: Lasche wechselt von Dunkelblau auf Hellblau */
.jlc-tl-step.jlc-on .jlc-tl-lbl{background:var(--blue-600)}
.jlc-tl ul{margin:0;padding:0}
.jlc-tl li{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin-bottom:5px;list-style:none}
.jlc-tl li .jlc-ico{width:16px;height:16px;color:var(--blue);margin-top:4px}
/* Mobile: Reihenfolge Bild -> Headline -> Zeitleiste -> CTA.
   display:contents loest die linke Spalte auf, damit der CTA per order hinter die Leiste rutscht. */
@media(max-width:899px){
  .jlc-jr{display:flex;flex-direction:column}
  .jlc-jr-left{display:contents}
  .jlc-jr-eyebrow,.jlc-jr-mark{text-align:center}
  .jlc-jr-mark img{margin-left:auto;margin-right:auto}
  .jlc-jr .jlc-tl{order:2}
  .jlc-jr .jlc-cta-block{order:3;width:100%;margin-left:auto;margin-right:auto}
}
@media(min-width:900px){
  /* Desktop wie in der Vorlage: Bild, Headline und CTA links, Zeitleiste rechts */
  .jlc-jr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
  .jlc-jr .jlc-center{text-align:left}
  .jlc-jr .jlc-sub{margin-left:0;margin-right:0}
  .jlc-jr .jlc-banner .jlc-ph{height:280px}
  .jlc-tl{--tl-pad:26px;margin-top:0;max-width:none}
}
/* END_SECTION:jlc-journey-timeline */

/* START_SECTION:jlc-main-product (INDEX:34) */
/* `.jl` davor ist Pflicht: das Element traegt `jlc-sec jlc-hero`, und `.jlc-sec` aus
   jlc-base.css wird spaeter geladen. Bei gleicher Spezifitaet gewinnt die spaetere Regel,
   deshalb galt hier jahrelang das padding:34px der Basis und nicht diese Zeile.
   Rundum 0: das Bild steht direkt unter dem Header und laeuft von Rand zu Rand, wie in der
   nativen Galerie (Wim, 10.09.2026). Der Seitenrand --gut faellt hier bewusst weg. */
.jl .jlc-hero{padding:0}
.jlc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* minmax(0,1fr) statt auto: sonst zieht ein 1200px breites Produktbild die Spalte auf seine
   Eigenbreite auf und die Galerie laeuft ueber die Kaufspalte. Mit Platzhaltern faellt das nicht auf. */
.jlc-gal{min-width:0}
/* overflow:hidden, damit das einfahrende Bild nicht kurz neben der Galerie steht.
   Die Galerie ist ein Kind der sticky Spalte, kein Vorfahre — hidden ist hier gefahrlos. */
.jlc-gal{position:relative;overflow:hidden}
.jlc-gal .jlc-ph{aspect-ratio:1/1;border-radius:var(--r-card)}
/* Die Galerie ist ein waagerechter Scrollbereich mit Snap-Punkten, kein selbstgebautes
   Karussell mehr (Umbau 10.09.2026). Wischen, Bremskurve und Gestenerkennung macht die
   Browser-Engine, so wie in der nativen Galerie des Themes (`base.css`, `.slider--mobile`).
   Das Skript liest nur noch die Position ab und schreibt sie beim Springen.

   Vorher lag hier eine transform-Spur mit eigenem Drag-Handler. Beim schnellen Wischen fuhr
   sie eine Slidebreite zu weit und sprang danach ohne Uebergang zurueck, weil die Reihenfolge
   zur Laufzeit umgebaut und spaeter wieder geradegerueckt wurde. Nicht wiederholen.

   `touch-action` steht bewusst NICHT mehr auf .jlc-gal: pan-y auf einem Vorfahren verbietet
   dem Browser das waagerechte Wischen im ganzen Teilbaum und legt den Scrollbereich lahm.

   --peek: auf dem Handy ist der Slide schmaler als die Spalte, dadurch schauen das vorige und
   das naechste Bild seitlich hervor, hier 34px.
   In px, nicht in rem: dieses Theme setzt `html{font-size:10px}` (62.5%-Reset), 2rem waeren
   also 20px statt 32 gewesen. Die lokale Vorschau hat den Reset nicht und zeigt das nicht.
   --gg ist 0: die Bilder haengen aneinander wie in der nativen Galerie, ohne Fuge dazwischen
   (Wim, 10.09.2026). Am Desktop beides 0, dort fuehren die Thumbnails.
   Peek 10px: die Galerie laeuft bis an den Bildschirmrand, das Bild soll so gross wie moeglich
   sein. Auf dem iPhone 16 Pro (393px) ergibt das 373px Bildbreite, der Standard liegt bei 374. */
.jlc-gal-track{
  --peek:10px;--gg:0px;
  display:flex;gap:var(--gg);padding-inline:var(--peek);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.jlc-gal-track::-webkit-scrollbar{display:none}
/* scroll-snap-stop:always — ein Wisch blaettert genau ein Bild weiter, egal wie kraeftig.
   Ohne diese Zeile (Standard `normal`) darf der Schwung ueber mehrere Snap-Punkte hinweg
   fliegen; auf dem Handy uebersprang ein fester Wisch dadurch ein bis zwei Bilder
   (gemeldet 10.09.2026). Die alte Transform-Spur hatte dieselbe Regel von Hand gebaut. */
.jlc-gal-track>[data-hero]{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always}
.jlc-gal img{-webkit-user-drag:none}
@media(prefers-reduced-motion:reduce){.jlc-gal-track{scroll-behavior:auto}}
/* Thumbnail-Leiste: auf dem Handy gar nicht, auf dem Desktop genau fuenf Kacheln pro
   Seite. Die Kachel ist ein Fuenftel der Leiste, hoechstens 136 px — dadurch ist nie
   eine angeschnitten, egal wie breit die Spalte gerade ist. Die Pfeile liegen ueber der
   Leiste statt daneben; geblaettert wird ueber scrollLeft, das Blaettern selbst steuert
   das Skript aus der Bildauswahl heraus. */
/* Auf dem Handy ersetzen Wischen und Punkte die Thumbnail-Leiste. Ohne diesen Ersatz
   haengt das Hauptbild fest, weil die Leiste dort ausgeblendet ist. */
.jlc-gal-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.jlc-gal-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .15s,width .15s}
.jlc-gal-dots i.jlc-on{width:18px;border-radius:3px;background:var(--blue)}
.jlc-thumbs-wrap{display:none;position:relative;margin-top:6px}
.jlc-thumbs{--tg:8px;display:flex;gap:var(--tg);overflow:hidden;scroll-behavior:smooth;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.jlc-thumbs.jlc-drag{cursor:grabbing}
.jlc-thumbs img{-webkit-user-drag:none}
/* 32px sichtbar, 44px Trefferflaeche ueber ::before */
.jlc-thumb-arw{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--blue);font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px color-mix(in srgb,var(--navy) 16%,transparent);transition:background .15s}
.jlc-thumb-arw::before{content:"";position:absolute;inset:-6px;border-radius:50%}
@media(hover:hover){.jlc-thumb-arw:not(:disabled):hover{background:var(--blue-50)}}
.jlc-thumb-arw--l{left:-6px}
.jlc-thumb-arw--r{right:-6px}
.jlc-thumb-arw:disabled{opacity:.55}
.jlc-thumb{flex:0 0 calc((100% - 4*var(--tg))/5);max-width:136px;aspect-ratio:1/1;padding:0;overflow:hidden;border-radius:8px;border:1.5px solid var(--line);background:var(--sky-3);font-size:9px;color:#9A7B80;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;transition:border-color .15s}
@media(hover:hover){.jlc-thumb:hover{border-color:var(--blue-400)}}
.jlc-thumb[aria-current=true]{border-color:var(--blue);border-width:2px}

/* Videostreifen unter der Galerie: nur Desktop, genau drei Kacheln im Blick.
   Die Kachel ist ein Drittel der Spalte, hoechstens 217 px breit. */
.jlc-hv-head{display:none;margin:22px 0 10px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.jlc-hero-vids{--vg:12px;display:none;gap:var(--vg);margin-top:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.jlc-hero-vids::-webkit-scrollbar{display:none}
/* .jl davor: .jlc-rail-nav aus der Basis wird spaeter geladen und wuerde display:none sonst schlagen */
.jl .jlc-hv-nav{display:none;margin:18px 0 30px}
.jlc-hvid{position:relative}
.jlc-hvid .jlc-ph{aspect-ratio:217/386;border-radius:12px;font-size:8.5px;display:flex;align-items:center;justify-content:center}

/* Sternezeile nach Elare (18.09.): Sterne gelb 16px, Text 14px, fette Teile in Ink. Am Handy bleiben neben
   den Sternen 257px; "4,8 von 5 | 100.000+ verkauft" braucht 198px, Elares Wortlaut mit "Bewertet mit" 380px. */
.jlc-rating{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:14px;line-height:1.3;color:var(--ink-80);padding:12px 0 6px}
.jlc-rating .jlc-stars{color:var(--stern-rating,#F4B400);font-size:16px;letter-spacing:.04em;line-height:1}
.jlc-rating b{font-weight:700;color:var(--ink)}
/* Titel nach Elare (18.09.): Poppins 900, Zeile 1.22. Elare hat 26/31px, deutsch ist laenger:
   24px gibt am Handy drei Zeilen, 28px am Desktop zwei, wie das Vorbild. Die Farbe ist wie bei
   Elare ein Textverlauf (57deg, Ink 13% > Burgunder 36% > Ink 71%), welche Woerter rot werden,
   ergibt sich aus dem Umbruch. [Wort] im Setting haelt nur zusammen (kein Umbruch am Bindestrich). */
.jlc-title h1{font-size:24px;line-height:1.22;font-weight:900;letter-spacing:.01em;margin:2px 0 8px;text-wrap:balance;background:linear-gradient(57deg,var(--ink) 13%,var(--blue-800) 36%,var(--ink) 71%);-webkit-background-clip:text;background-clip:text;color:var(--ink);-webkit-text-fill-color:transparent}
.jlc-title h1 .jlc-alt{white-space:nowrap}
.jlc-offer{display:inline-block;margin:16px 0 0;padding:7px 11px;font-size:13px;font-weight:700;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:#fff;background:var(--blue-800);border-radius:6px}
.jlc-benefits6{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;margin:15px 0 0;background:none;border-radius:0;padding:0}
/* Eine Spalte, linksbuendig (Resilia-Muster), per Setting b6_columns */
.jlc-benefits6--one{grid-template-columns:1fr;gap:9px}
.jlc-benefits6--one .jlc-b6{align-items:flex-start}
.jlc-benefits6--one .jlc-b6 .jlc-ico{margin-top:2px}
.jlc-b6{display:flex;align-items:center;gap:6px;font-size:var(--jlc-b6-txt,14px);font-weight:500;line-height:1.21;min-width:0}
/* Gefuellte Scheibe mit weissem Haken: das SVG traegt selbst den Hintergrund, der
   Haken ist ein Strichpfad in currentColor und wird ueber color:#fff weiss. Kein
   zusaetzliches Element noetig. Ein eigenes Icon-Bild bleibt davon ausgenommen. */
.jlc-b6 svg.jlc-ico{width:var(--jlc-b6-ico,14px);height:var(--jlc-b6-ico,14px);flex:none;color:#fff;background:var(--blue-800);border-radius:50%;padding:3px;box-sizing:border-box}
.jlc-b6 img.jlc-ico{width:var(--jlc-b6-ico,14px);height:var(--jlc-b6-ico,14px);flex:none}
.jlc-b6 .jlc-ico--img{object-fit:contain;border-radius:0;background:none;padding:0}
/* Mobil brechen die zweispaltigen Punkte auf 2-3 Zeilen. Der Zeilenabstand innerhalb eines
   Punktes war dann groesser als der Abstand zum naechsten Punkt: die Liste las sich als Block.
   Mehr Luft zwischen den Zeilen des Rasters, Haken an die erste Textzeile statt mittig. */
@media(max-width:560px){
  .jlc-benefits6{gap:15px 10px}
  .jlc-b6{align-items:flex-start;gap:7px;line-height:1.33}
  .jlc-b6 .jlc-ico{margin-top:3px}
}

.jlc-scar{display:flex;align-items:center;gap:16px;margin:16px 0 0;background:var(--karte);border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);padding:16px 18px}
.jlc-bar{flex:1;height:8px;border-radius:4px;background:var(--bar-track,#E8E8E8)}
/* Glow: nicht mehr box-shadow animieren (Repaint jeden Frame), sondern die Opacity eines
   festen Schattens auf dem inneren span. Laeuft nur, solange der Block im Bild ist (jlc-anim, JS). */
.jlc-bar i{display:block;position:relative;height:100%;width:93%;border-radius:4px;background:var(--red)}
.jlc-bar i span{position:absolute;inset:0;border-radius:4px;box-shadow:0 0 12px 2px rgba(217,69,59,.7);opacity:.3}
.jlc-scar.jlc-anim .jlc-bar i span{animation:jlc-scar-pulse 2s ease-in-out infinite}
@keyframes jlc-scar-pulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes jlc-scar-text{0%,100%{opacity:1}50%{opacity:.62}}
.jlc-scar b{color:var(--red);font-size:15px;font-weight:600;min-width:75px;text-align:right;white-space:nowrap}
.jlc-scar.jlc-anim b{animation:jlc-scar-text 2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.jlc-scar.jlc-anim .jlc-bar i span,.jlc-scar.jlc-anim b{animation:none}.jlc-bar i span{opacity:.6}}

/* 08 preis */
/* nowrap: mit flex-wrap ist das Aktions-Badge auf schmalen Handys unter den Preis
   gerutscht. Es darf stattdessen schrumpfen. */
.jlc-price{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:100%;padding:11px 0 12px;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);margin:16px 0}
.jlc-price .jlc-now,.jlc-price .jlc-was{flex:none}
.jlc-price .jlc-now{font-family:Poppins;font-size:18px;line-height:1.34;font-weight:700}
.jlc-price .jlc-was{color:var(--ink-40);text-decoration:line-through;font-size:18px;line-height:1.34}
.jlc-badge-save{background:var(--blue);color:#fff;font-size:12px;font-weight:700;padding:7px 10px;border-radius:6px;letter-spacing:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 09b Abo als Checkbox-Zeile nach Elare: gestrichelter Rahmen in --blue-800, Haken links,
   Titel in Markenfarbe. Die echte Checkbox ist unsichtbar, der Haken daneben zeigt den Zustand. */
.jlc-refill{position:relative;display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:12px 14px;border:1.5px dashed var(--blue-800);border-radius:var(--r-card);background:#fff;cursor:pointer}
.jlc-refill-box{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.jlc-refill-check{flex:none;width:24px;height:24px;border:1.5px solid var(--blue-800);border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--blue-800);background:#fff}
.jlc-refill-check .jlc-ico{width:16px;height:16px;opacity:0;transition:opacity .12s}
.jlc-refill-box:checked~.jlc-refill-check .jlc-ico{opacity:1}
.jlc-refill-box:focus-visible~.jlc-refill-check{outline:3px solid var(--blue-800);outline-offset:2px}
.jlc-refill-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.jlc-refill-txt b{font-family:Poppins;font-size:15px;line-height:1.3;color:var(--blue-800)}
.jlc-refill-txt small{font-size:13px;line-height:1.4;color:var(--ink-80)}

/* 09 bundles */
.jlc-bundles{display:grid;gap:12px}
.jlc-bundle--tagged{margin-top:10px}   /* Platz für die Lasche; Klasse aus Liquid statt :has() (Safari < 15.4, Firefox < 121) */
.jlc-bundle{position:relative;border:1.5px solid var(--line);border-radius:var(--r-card);padding:11.5px;background:var(--blue-50);cursor:pointer;transition:border-color .15s,background .15s}
@media(hover:hover){.jlc-bundle:hover{border-color:var(--blue-400)}}
/* role=radio: der Zustand heisst aria-checked, nicht aria-selected — sonst liest der Screenreader keine Auswahl */
.jlc-bundle[aria-checked=true]{border:2px solid var(--blue-800);background:var(--blue-100);padding:11px}
.jlc-bundle[aria-checked=true] .jlc-pr b{color:var(--blue-800)}
.jlc-bundle .jlc-radio{display:none}   /* Resilia zeigt die Auswahl nur über Fuellung + Rahmen */
.jlc-bundle[aria-checked=true] .jlc-radio{border-color:var(--blue-800)}
.jlc-bundle[aria-checked=true] .jlc-radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--blue-800)}
.jlc-bundle-row{display:flex;align-items:center;gap:12px}
/* Alles in der Bundle-Karte auf 14 px, wie in der Referenz gemessen — vorher
   Titel 15, Preis 16, Unterzeile und Streichpreis 13. Nur das Bild bleibt aussen vor. */
.jlc-bundle .jlc-ph{width:81px;height:54px;flex:none;font-size:8px;border-radius:8px}
.jlc-bundle img.jlc-ph--img{object-fit:contain}
.jlc-bundle .jlc-nm{flex:1;min-width:0}
.jlc-bundle .jlc-nm b{display:block;font-family:Poppins;font-size:14px;line-height:1.3}
.jlc-bundle .jlc-nm span{display:block;font-size:14px;line-height:1.4;color:var(--ink-60)}
.jlc-bundle .jlc-pr{text-align:right;flex:none}
.jlc-bundle .jlc-pr b{display:block;font-family:Poppins;font-size:14px;line-height:1.3}
.jlc-bundle .jlc-pr s{font-size:14px;line-height:1.4;color:var(--ink-60)}
/* Mobil ist die Namensspalte nur ~142px breit, die Meta-Zeile lief auf drei Zeilen.
   Schmaleres Bild, engere Abstaende und 13px geben ihr zwei Zeilen mit Luft. */
@media(max-width:560px){
  .jlc-bundle-row{gap:10px}
  .jlc-bundle .jlc-ph{width:64px;height:48px}
  .jlc-bundle .jlc-nm span{font-size:13px;line-height:1.45}
  .jlc-bundle .jlc-pr s{font-size:13px}
}
/* 09b bundles als Zeilen (bundle_style = rows), Entwurf C Schnurrkraft 25.09.2026 */
.jlc-bundles--rows .jlc-bundle{background:#fff;border:1.5px solid var(--line);padding:14px}
.jlc-bundles--rows .jlc-bundle[aria-checked=true]{border:2px solid var(--ink);background:#fff;padding:13.5px;box-shadow:6px 6px 0 var(--blue-800)}
.jlc-bundles--rows .jlc-bundle--tagged{margin-top:12px}
.jlc-br-n{flex:none;width:42px;text-align:center;font-family:Poppins,system-ui,sans-serif;font-size:30px;font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.jlc-bundles--rows .jlc-bundle[aria-checked=true] .jlc-br-n{color:var(--blue-800)}
.jlc-bundles--rows .jlc-nm b{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.jlc-bundles--rows .jlc-nm span{font-size:12.5px;line-height:1.4}
.jlc-bundles--rows .jlc-pr b{font-size:18px;font-weight:800}
.jlc-bundles--rows .jlc-bundle[aria-checked=true] .jlc-pr b{color:var(--ink)}
.jlc-bundles--rows .jlc-pr small{display:block;font-size:12px;line-height:1.4;color:var(--ink-60);white-space:nowrap}
.jlc-bundles--rows .jlc-tag,.jlc-bundles--rows .jlc-bundle[aria-checked=true] .jlc-tag{bottom:auto;top:-11px;right:10px;margin:0;border-radius:0;background:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px}
@media(max-width:560px){.jlc-bundles--rows .jlc-nm span{font-size:12.5px}.jlc-br-n{width:36px;font-size:27px}}
/* Lasche wie Resilia: sitzt auf der Kartenkante, nicht im Preis */
.jlc-tag{position:absolute;right:-1.5px;bottom:100%;margin-bottom:-1px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.01em;color:#fff;background:var(--blue);padding:5px 10px;border-radius:6px 6px 0 0}
.jlc-bundle[aria-checked=true] .jlc-tag{right:-2px}
.jlc-tag.jlc-alt{background:var(--navy)}
.jlc-gift-line{display:none;align-items:flex-start;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.jlc-bundle[aria-checked=true] .jlc-gift-line{display:flex}
.jlc-gift-line .jlc-ico{width:18px;height:18px;color:var(--blue);margin-top:2px}
.jlc-gift-line small{display:block;color:var(--ink-60);font-size:12px}

/* 10 gifts — kompakter, kraeftige Umrandung */
.jlc-gifts{position:relative;background:var(--karte);border:1.5px solid var(--blue-800);box-shadow:var(--shadow-karte);border-radius:var(--r-card);padding:18px 12px 12px;margin-top:16px}
.jlc-gifts>.jlc-lbl{position:absolute;top:-8px;left:12px;background:var(--karte);padding:1px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-800);border:1.5px solid var(--blue-800);border-radius:3px}
.jlc-gift-row{display:flex;align-items:flex-start;gap:6px}
.jlc-gift{min-width:0}
/* four tiles plus three plus-signs have to fit a 360 px viewport, so both shrink below 420 px */

.jlc-gift{flex:1;text-align:center;position:relative}
.jlc-gift-media{position:relative;display:block;width:76px;height:76px;margin:0 auto 5px}
.jlc-gift .jlc-ph{width:76px;height:76px;aspect-ratio:1/1;border-radius:8px;font-size:8px;margin:0;transition:filter .2s}
.jlc-gift s{display:block;font-size:12px;color:var(--ink-60);line-height:1.3;height:1.3em;white-space:nowrap}   /* fixed single line: a wrapping value line pushed the labels below out of alignment */
.jlc-gift b{display:block;font-size:12px;line-height:1.3;color:var(--red);font-weight:700}
.jlc-gift .jlc-lock,.jlc-gift .jlc-lock-ico{display:none}
.jlc-gift b,.jlc-gift .jlc-lock{margin-top:1px}
/* locked: blurred artwork, padlock on top, name replaced by the locked label, value blurred */
.jlc-gift.jlc-locked .jlc-ph{filter:blur(4px) saturate(.75);opacity:.85}
.jlc-gift.jlc-locked .jlc-lock-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--blue-800);filter:none}
.jlc-gift.jlc-locked .jlc-lock-ico .jlc-ico{width:22px;height:22px;filter:drop-shadow(0 1px 2px rgba(255,255,255,.9))}
.jlc-gift.jlc-locked b{display:none}
.jlc-gift.jlc-locked .jlc-lock{display:block;font-size:12px;line-height:1.3;font-weight:600;color:var(--blue-800)}
.jlc-gift.jlc-locked s{filter:blur(3px);opacity:.6}
.jlc-plus{align-self:flex-start;margin-top:26px;width:18px;height:18px;flex:none;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-40);font-size:12px;line-height:1;background:#fff}
/* Rechnung fuer das schmalste Geraet (360px): 360 - 2*14 Seitenrand - 2*12 Kartenrand = 308.
   Davon 3 Plus-Kreise (48) und 6 Abstaende (24) ab -> 236 / 4 = 59px pro Kachel.
   Deshalb 54px Bild bis 560px Breite; darueber ist genug Platz fuer 76px. */
@media(max-width:560px){
  .jlc-gift-row{gap:4px}
  .jlc-gift-media,.jlc-gift .jlc-ph{width:54px;height:54px}
  .jlc-gift.jlc-locked .jlc-lock-ico .jlc-ico{width:17px;height:17px}
  .jlc-plus{margin-top:18px;width:16px;height:16px;font-size:11px}
  .jlc-gift s,.jlc-gift b,.jlc-gift .jlc-lock{font-size:11px}
  .jlc-gifts{padding:16px 10px 10px}
}
.jlc-gift-note{text-align:center;font-size:12px;color:var(--ink-60);margin-top:8px}
.jlc-gift-note.jlc-done{color:var(--blue);font-weight:700}
/* 10b gifts als Liste (gifts_style = list), Entwurf C Schnurrkraft 25.09.2026 */
.jlc-gifts.jlc-gifts--list{background:#fff;border:1.5px solid var(--ink);box-shadow:none;border-radius:var(--r-card);padding:14px 16px}
.jlc-gifts--list>.jlc-lbl{position:static;display:block;border:0;padding:0;margin:0 0 10px;background:none;color:var(--ink);font-size:11px;letter-spacing:.16em}
.jlc-gl-list{display:flex;flex-direction:column;gap:9px}
.jlc-gifts--list .jlc-gift{display:flex;align-items:center;gap:12px;text-align:left;flex:none}
.jlc-gl-ico{width:28px;height:28px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue-800);color:#fff}
.jlc-gl-ico .jlc-ico{width:16px;height:16px}
.jlc-gl-lock{display:none}
.jlc-gl-name{flex:1;min-width:0;font-size:14.5px;line-height:1.35;color:var(--ink)}
.jlc-gifts--list .jlc-gift b{display:inline;font-size:inherit;line-height:inherit;color:inherit;font-weight:700}
.jlc-gifts--list .jlc-gift s{display:block;height:auto;flex:none;font-size:14px;color:var(--ink-60)}
.jlc-gl-hint{display:none}
.jlc-gifts--list .jlc-gift.jlc-locked .jlc-gl-ico{background:none;border:1.5px dashed var(--ink-40);color:var(--ink-60)}
.jlc-gifts--list .jlc-gift.jlc-locked .jlc-gl-ok{display:none}
.jlc-gifts--list .jlc-gift.jlc-locked .jlc-gl-lock{display:block;width:14px;height:14px}
.jlc-gifts--list .jlc-gift.jlc-locked .jlc-gl-name{color:var(--ink-60)}
.jlc-gifts--list .jlc-gift.jlc-locked b{display:inline;font-weight:400}
.jlc-gifts--list .jlc-gift.jlc-locked .jlc-gl-hint{display:inline}
.jlc-gifts--list .jlc-gift.jlc-locked s{filter:none;opacity:1}
@media(max-width:560px){.jlc-gifts.jlc-gifts--list{padding:14px}.jlc-gifts--list .jlc-gift s{font-size:13.5px}.jlc-gifts--list .jlc-gift b{font-size:inherit}.jlc-gl-name{font-size:14px}}

/* 11-12 */
.jlc-deliv{display:flex;gap:9px;align-items:flex-start;margin:16px 0;font-size:14px}
.jlc-dot{width:8px;height:8px;border-radius:50%;background:#2FA84F;margin-top:7px;flex:none}
.jlc-deliv small{display:block;color:var(--ink-60);font-size:14px}
.jlc-atc-note{display:flex;justify-content:center;gap:10px;font-size:14px;color:var(--ink-60);margin-top:9px}
/* Vertrauensblock unter dem Kaufbutton (Elare). Mittig, damit er den Button stuetzt
   statt ihn zu ueberladen; die Zahlungs-Icons brechen auf schmalen Geraeten um. */
.jlc-bt{margin-top:12px;text-align:center}
/* Praefix jlc-bt- (buy trust), NICHT jlc-tb-: das gehoert JLC 28 Trust badges.
   Shopify fasst die Stylesheet-Bloecke aller Sections zu einer Datei zusammen, auch von
   Sections, die gar nicht im Template stehen. Deren Regeln gelten also hier mit, und
   .jl .jlc-tb-list ist spezifischer als .jlc-tb-list. Vor einem neuen Praefix pruefen,
   ob er im Theme schon vergeben ist.
   Schlichte Liste untereinander: Haken im Kreis, eine Zeile Text, linksbuendig.
   Keine Karten, kein Hintergrund. Ist eine Unterzeile gefuellt, erscheint sie klein
   darunter; bleibt sie leer, ist es eine einzeilige Zeile. */
/* display:flex statt inline-flex: der Block darueber steht auf text-align:center, und ein
   inline-flex-Element wuerde davon mittig gesetzt. Als Block-Flex fuellt die Liste die
   Breite und die Zeilen beginnen links. Die Zahlungsreihe bleibt mittig. */
.jlc-bt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left}
.jlc-bt-list li{display:flex;align-items:flex-start;gap:10px}
.jlc-bt-ico{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;border:1.5px solid var(--blue-800);color:var(--blue-800);display:grid;place-items:center}
.jlc-bt-ico .jlc-ico{width:11px;height:11px}
.jlc-bt-txt{min-width:0}
.jlc-bt-txt b{display:block;font-weight:400;font-size:14.5px;line-height:1.35;color:var(--ink)}
.jlc-bt-txt small{display:block;margin-top:1px;font-size:13px;line-height:1.35;color:var(--ink-60)}
.jlc-bt-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;margin:0 0 14px}
.jlc-bt-pay svg,.jlc-bt-payico{height:24px;width:auto;display:block;border-radius:3px}

/* Ausgeblendet ist die Leiste auch fuer Tab und Screenreader weg (visibility), nicht nur aus dem
   Bild geschoben. Safe-Area: auf iPhones mit Home-Balken sass der Button direkt auf der Geste. */
.jlc-sticky{box-sizing:border-box;position:fixed;left:0;right:0;bottom:0;z-index:70;max-width:100vw;background:var(--white);border-top:1px solid var(--line);box-shadow:0 -6px 24px color-mix(in srgb,var(--navy) 10%,transparent);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:center;transform:translateY(120%);visibility:hidden;transition:transform .2s ease-out,visibility 0s linear .2s}
.jlc-sticky.jlc-show{transform:none;visibility:visible;transition-delay:0s}
@media(prefers-reduced-motion:reduce){.jlc-sticky{transition:none}}
/* Solange die Leiste steht, bekommt die Seite unten Platz, damit sie den Footer nicht verdeckt */
body.jlc-sticky-on{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.jlc-sticky .jlc-ph{width:57px;height:38px;font-size:7px;border-radius:6px}
.jlc-sticky img.jlc-ph--img{object-fit:contain}
.jlc-sticky .jlc-info{flex:1;line-height:1.25}
.jlc-sticky .jlc-info b{font-family:Poppins;font-size:16px;white-space:nowrap}
.jlc-sticky .jlc-info span{display:block;font-size:12px;color:var(--ink-60)}
.jlc-sticky-in{display:flex;gap:12px;align-items:center;width:100%;max-width:var(--wrap);margin:0 auto;min-width:0}
/* kein overflow:hidden auf .jlc-sticky — das hat das Dropup der Paketwahl weggeschnitten.
   Gegen zu breite Inhalte stattdessen der Produktname mit Ellipse. */
.jlc-sticky-prod,.jlc-sticky-prod>div{min-width:0}
.jlc-sticky-prod b,.jlc-sticky-prod span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jlc-sticky-prod{display:none;align-items:center;gap:12px;margin-right:auto}
.jlc-sticky-prod b{font-family:Poppins;font-size:15px;display:block;line-height:1.2}
.jlc-sticky-prod span{font-size:12px;color:var(--ink-60)}
/* Paketwahl als eigenes Dropup, kein natives Select: öffnet immer direkt über der Leiste */
.jlc-sticky-sel{position:relative;flex:none}
.jlc-sticky-sel__btn{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-input);background:#fff;color:var(--ink);font:700 14px/1 Poppins,system-ui,sans-serif;cursor:pointer}
.jlc-sticky-sel__btn::after{content:"";width:8px;height:8px;border-right:2px solid var(--blue-800);border-bottom:2px solid var(--blue-800);transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.jlc-sticky-sel.jlc-open .jlc-sticky-sel__btn{border-color:var(--blue-800)}
.jlc-sticky-sel.jlc-open .jlc-sticky-sel__btn::after{transform:translateY(2px) rotate(-135deg)}
.jlc-sticky-sel__menu{position:absolute;left:0;bottom:calc(100% + 8px);min-width:280px;max-height:60vh;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-hoch);display:none;z-index:80}
.jlc-sticky-sel.jlc-open .jlc-sticky-sel__menu{display:block}
.jlc-sticky-sel__menu li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;border-radius:8px;font-size:14px;cursor:pointer}
@media(hover:hover){.jlc-sticky-sel__menu li:hover{background:var(--blue-50)}}
.jlc-sticky-sel__menu li:focus-visible{outline:2px solid var(--blue-800);outline-offset:-2px}
.jlc-sticky-sel__menu li[aria-selected=true]{background:var(--blue-50);color:var(--blue-800);font-weight:700}
.jlc-sticky-sel__menu li span{font-family:Poppins;font-weight:700;white-space:nowrap}
.jlc-sticky-sel__menu li small{display:block;font-weight:400;color:var(--ink-60);font-size:12px}
.jlc-sticky .jlc-btn{width:auto;flex:none;margin-inline:0;min-height:46px;padding:0 16px;font-size:15px}
.jlc-sticky .jlc-info{min-width:0}
.jlc-sticky .jlc-info b{overflow:hidden;text-overflow:ellipsis}

.jlc-acc{display:grid;gap:0}
.jlc-acc-item{border:1px solid var(--line);border-radius:var(--r-card);background:var(--karte);overflow:hidden}
.jlc-acc-item+.jlc-acc-item{margin-top:10px}
.jlc-acc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:15px;width:100%;text-align:left;transition:background .15s}
@media(hover:hover){.jlc-acc-head:hover{background:var(--blue-50)}}
.jlc-acc-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
@media(prefers-reduced-motion:reduce){.jlc-acc-body{transition:none}}
.jlc-acc-body .jlc-in{padding:0 16px 16px;font-size:15px;line-height:1.6;color:var(--ink-80)}
.jlc-acc-body .jlc-in strong,.jlc-acc-body .jlc-in b{color:var(--ink)}
.jlc-acc-sign{font-size:22px;color:var(--blue);line-height:1}
.jlc-slot{background:transparent;border:none;padding:0}


.jlc-gal img.jlc-hero-img{aspect-ratio:1/1;border-radius:var(--r-card);object-fit:cover;width:100%;max-width:100%;height:auto}.jlc-gal [data-hero][hidden]{display:none}
.jlc-thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.jlc-form{display:none}
@media(min-width:900px){
  .jlc-buy-wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px;align-items:start;max-width:var(--wrap);margin:0 auto;padding:28px var(--gut) 0}
  .jlc-buy-wrap .jlc-sec{padding:0}
  /* --jlc-col-top setzt das Skript: ist die Spalte hoeher als der Viewport, rastet sie mit ihrer
     Unterkante ein statt oben — sonst war der Videostreifen auf Laptops nie zu sehen. */
  .jlc-buy-wrap>div:first-child{position:sticky;top:var(--jlc-col-top,100px);align-self:start}
  .jl .jlc-hero{padding:0}
  .jlc-hv-head{display:block}
  .jlc-hero-vids{display:flex}
  .jl .jlc-hv-nav{display:flex}
  .jlc-hvid{flex:0 0 calc((100% - 2*var(--vg))/3);max-width:217px;scroll-snap-align:start}
  .jlc-gal-dots{display:none}
  /* Kein Peek am Desktop: dort fuehren die Thumbnails, das Bild fuellt die Spalte */
  .jlc-gal-track{--peek:0;--gg:0}
  .jlc-thumbs-wrap{display:block}
  .jlc-thumbs{--tg:10px}
  .jlc-title h1{font-size:28px}
  .jlc-sticky-prod{display:flex}
  .jlc-sticky .jlc-info{flex:none}
  .jlc-sticky .jlc-btn{min-width:240px}
}
@media(max-width:480px){.jlc-btn.jlc-glow{font-size:16px;padding:12px 16px;gap:10px}
.jlc-sticky .jlc-info span{display:none}.jlc-sticky .jlc-ph{display:none}.jlc-sticky .jlc-info{min-width:0}.jlc-sticky .jlc-btn{white-space:nowrap;font-size:14px;padding:0 12px}.jlc-sticky{gap:8px}.jlc-sticky .jlc-info{flex:none}.jlc-sticky-sel__btn{padding:0 10px;font-size:13px;gap:8px}.jlc-sticky-sel__menu{position:fixed;left:var(--gut);right:var(--gut);bottom:76px;min-width:0}.jlc-sticky .jlc-info b{font-size:14px}.jlc-atc-note{flex-direction:column;gap:2px;align-items:center}.jlc-atc-note span:nth-child(2){display:none}}
.jlc-acc-body .jlc-in p+p{margin-top:12px}
/* Kundenstimme (Resilia-Karte): dunkler Rahmen, Sterne, Zitat, Avatar + Name, Haken rechts */
.jlc-quote{margin:18px 0 0;padding:16px 18px;border:1.5px solid var(--ink);border-radius:10px;background:#fff}
.jlc-quote .jlc-stars{color:var(--stern-rating,#F4B400);font-size:16px;letter-spacing:.04em;line-height:1} /* wie .jlc-rating */
.jlc-quote blockquote{margin:10px 0 0;padding:0;border:0;font-size:15px;line-height:1.6;font-style:normal;color:var(--ink-80)}
.jlc-quote figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:13px}
.jlc-quote-who{display:flex;align-items:center;gap:10px}
.jlc-quote-who img,.jlc-quote-who i{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.jlc-quote-who i{display:grid;place-items:center;background:var(--blue-100);color:var(--blue);font:700 14px/1 Poppins,system-ui,sans-serif;font-style:normal}
.jlc-quote-who b{color:var(--ink)}
.jlc-quote-ok{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.jlc-quote-ok svg{width:18px;height:18px;fill:var(--blue);stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jlc-quote-ok svg circle{stroke:none}
.jlc-quote-ok svg path{fill:none}
.jlc-quote-desk{display:none}
.jlc-quote-mob .jlc-quote{margin-top:22px}
@media(min-width:900px){.jlc-quote-desk{display:block}.jlc-quote-mob{display:none}}
.jlc-quote-fb{margin-top:18px}
.jlc-quote-mob .jlc-quote-fb{margin-top:22px}

/* Trusted pill unter dem Kaufbutton; erscheint nur mit trusted_headline */
.jlc-tp{display:flex;align-items:center;gap:12px;margin-top:14px;background:var(--karte);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-karte);padding:8px 20px 8px 10px}
.jlc-tp-faces{position:relative;display:flex;align-items:center;flex:0 0 auto;padding-right:14px}
.jlc-tp-face{width:34px;height:34px;border-radius:50%;overflow:hidden;border:2px solid #fff;margin-left:-12px;background:var(--blue-50);flex:0 0 auto}
.jlc-tp-face:first-child{margin-left:0}
.jlc-tp-face img{width:100%;height:100%;object-fit:cover;display:block}
.jlc-tp-check{position:absolute;right:0;top:-1px;display:flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--blue);color:#fff;border:2px solid #fff}
.jlc-tp-check .jlc-ico{width:10px;height:10px}
.jlc-tp-txt{display:block;min-width:0}
.jlc-tp-txt b{display:block;font-family:Poppins;font-weight:700;font-size:14px;line-height:1.3;color:var(--ink)}
.jlc-tp-txt span{display:block;font-size:12.5px;line-height:1.35;color:var(--ink-60)}
@media(max-width:599px){
  .jlc-tp{gap:10px;padding:8px 16px 8px 8px}
  .jlc-tp-face{width:28px;height:28px;margin-left:-10px;border-width:2px}
  .jlc-tp-faces{padding-right:11px}
  .jlc-tp-check{width:15px;height:15px}
  .jlc-tp-check .jlc-ico{width:9px;height:9px}
  .jlc-tp-txt b{font-size:13px}
  .jlc-tp-txt span{font-size:11.5px;line-height:1.3}
}
/* END_SECTION:jlc-main-product */

/* START_SECTION:jlc-reasons-carousel (INDEX:35) */
.jlc-hpill{display:inline-block;background:var(--blue);color:#fff;font-family:Poppins;font-weight:700;font-size:13px;line-height:1;padding:8px 16px;border-radius:999px;margin-bottom:12px}
/* .jl davor, weil jlc-base.css nach diesem Stylesheet geladen wird und sonst bei
   gleicher Spezifitaet gewinnt (.jlc-rail>* vs .jlc-rs-rail>*) */
.jl .jlc-rs-rail{scroll-snap-type:x mandatory}
.jl .jlc-rs-rail>*{scroll-snap-align:start}
@media(min-width:900px){
  .jl .jlc-rs-rail{margin:0;padding:2px 0 4px}
  /* 10px = der Gap aus .jlc-rail in jlc-base.css; mit 12px gerechnet blieb rechts ein Rand */
  .jl .jlc-rs-rail>*{width:calc((100% - 2 * 10px) / 3);max-width:none}
}
@media(max-width:899px){
  /* Vorlage: mobil steht der Kopf mittig und die Pille faellt weg */
  .jl .jlc-rs-head{text-align:center}
  .jl .jlc-rs-head .jlc-hpill{display:none}
  .jl .jlc-rs-head .jlc-sub{margin-inline:auto}
  /* mobil eine Karte in der Mitte, die naechste schaut rechts an — ohne den Anschnitt
     merkten viele gar nicht, dass es weitergeht */
  .jl .jlc-rs-rail>*{width:88%;max-width:none;scroll-snap-align:center}
}

/* Karten quadratisch statt 16/11 aus jlc-base.css */
.jl .jlc-rs-rail .jlc-card .jlc-ph{aspect-ratio:1/1;width:100%}
/* END_SECTION:jlc-reasons-carousel */

/* START_SECTION:jlc-results (INDEX:36) */
.jlc-grid4{display:grid;grid-template-columns:1fr 1fr;gap:26px 16px;margin:26px 0 10px;text-align:center}
/* Groessen kommen aus den Section-Einstellungen (--jlc-g4-ico / --jlc-g4-txt, mobil und Desktop getrennt) */
.jlc-g4 .jlc-ico{color:#fff;margin:0 auto 12px;width:var(--jlc-g4-ico,60px);height:var(--jlc-g4-ico,60px);stroke-width:1.4}
.jlc-g4 .jlc-ico--img{object-fit:contain;border-radius:0;filter:brightness(0) invert(1)}
.jlc-g4 b{display:block;font-family:Poppins,system-ui,sans-serif;font-size:var(--jlc-g4-txt,21px);line-height:1.25;margin-bottom:3px}
.jlc-g4 span{font-size:14px;color:rgba(255,255,255,.7)}
/* Die Ringe stecken im Bild, nicht mehr im CSS — deshalb kein overflow und keine .jlc-ring mehr */
.jlc-halo{display:flex;justify-content:center;align-items:flex-end;padding:22px 0 0}
.jlc-halo .jlc-ph{width:min(var(--jlc-pack-w),100%);height:auto;aspect-ratio:16/15;font-size:10px}
.jlc-halo img.jlc-ph{width:min(var(--jlc-pack-w),100%);height:auto;aspect-ratio:auto;object-fit:contain;display:block}
/* Vorlage: die Flaeche wird von oben nach unten dunkler. Der Verlauf endet exakt auf
   var(--navy), weil die Welle darunter in genau diesem Ton gezeichnet wird — sonst
   entsteht an der Kante eine sichtbare Naht. */
#shopify-section-{{ section.id }} .jlc-sch-dunkel--navy{background:linear-gradient(180deg,#A8454E 0%,#9C3A43 45%,#8A2F3B 82%)}
.jlc-rs-cols{display:grid;gap:10px;margin-top:18px}
@media(min-width:900px){
  /* Vorlage: die vier Punkte als 2x2 links, das Produkt rechts, unten buendig */
  .jl .jlc-rs-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:end;text-align:left}
  .jl .jlc-rs-cols .jlc-grid4{grid-template-columns:1fr 1fr;gap:46px 34px;margin:0 0 52px;text-align:left;max-width:none}
  .jl .jlc-rs-cols .jlc-g4 .jlc-ico{margin:0 0 14px}
  .jl .jlc-rs-cols .jlc-halo{padding-top:0;justify-content:center}
}
/* END_SECTION:jlc-results */

/* START_SECTION:jlc-review-list (INDEX:37) */
.jlc-rev-list{display:grid;gap:12px}
.jlc-more-count{text-align:center;font-size:14px;color:var(--ink-60);margin-top:7px}
.jlc-more-wrap{display:flex;justify-content:center;margin-top:18px}
.jlc-more-btn{min-height:44px;border:1.5px solid var(--blue);border-radius:999px;background:#fff;color:var(--blue);font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:14.5px;padding:11px 24px;transition:background .15s,color .15s}
@media(hover:hover){.jlc-more-btn:hover{background:var(--blue);color:#fff}}
.jlc-rev:focus{outline:none}
.jlc-rev:focus-visible{outline:2px solid var(--blue-800);outline-offset:2px}
.jlc-more-wrap[hidden],.jlc-more-btn[hidden]{display:none}
/* Namenszeile unter den Chips, Haken wie in der Buybox-Kundenstimme */
.jl .jlc-rev-name{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0 0;font-size:13px;color:var(--ink)}
.jl .jlc-rev-name span{display:flex;align-items:center;gap:6px;font-weight:600}
.jl .jlc-rev-name svg{width:16px;height:16px;fill:var(--blue);stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jl .jlc-rev-name svg circle{stroke:none}.jl .jlc-rev-name svg path{fill:none}
/* END_SECTION:jlc-review-list */

/* START_SECTION:jlc-social-posts (INDEX:38) */
.jlc-fb-grau{background:#F0F2F5}
@media(min-width:900px){
  .jlc-fb-row.jlc-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;overflow:visible;margin:0 auto;padding:0;max-width:1040px;align-items:start;cursor:auto}
  .jlc-fb-row.jlc-rail>*{width:auto;max-width:none}
  .jlc-fb-nav{display:none}
}
/* END_SECTION:jlc-social-posts */

/* START_SECTION:jlc-stats (INDEX:39) */
/* Mit Hintergrundbild wird die Welle in die Section hineingeschnitten, statt als eigene
   Flaeche darueberzuliegen. Sonst steht eine einfarbige Welle ueber einem Foto. */
/* Die Section selbst wird transparent: das Blau kommt aus ::after, das Foto aus ::before, beide
   sind maskiert. Sonst schaut in der Wellenkerbe der blaue Section-Hintergrund durch. */
.jl .jlc-st-cut{padding-top:74px;background:transparent}
.jl .jlc-st-cut::before,.jl .jlc-st-cut::after{
  -webkit-mask-image:var(--st-wave),linear-gradient(#000,#000);
  mask-image:var(--st-wave),linear-gradient(#000,#000);
  -webkit-mask-size:100% 64px,100% calc(100% - 63px);
  mask-size:100% 64px,100% calc(100% - 63px);
  -webkit-mask-position:top,bottom;mask-position:top,bottom;
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
}
.jl .jlc-st-sec{--st-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,40 C320,72 640,8 960,28 C1200,44 1340,52 1440,24 L1440,64 L0,64 Z'/%3E%3C/svg%3E")}

/* Hintergrundbild mit blauer Lasur darueber; Staerke kommt aus den Section-Einstellungen */
.jl .jlc-st-sec{position:relative;isolation:isolate}
.jl .jlc-st-sec::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--st-bg-m,none);background-size:cover;background-position:center}
@media(min-width:900px){.jl .jlc-st-sec::before{background-image:var(--st-bg-d,var(--st-bg-m,none))}}
.jl .jlc-st-sec::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue-800);opacity:var(--st-op,1)}

@media(min-width:900px){
  /* Vorlage: Zahlen links im 2x2-Raster, Headline, Subline und Button rechts */
  .jl .jlc-st{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;max-width:var(--wrap);margin:0 auto;text-align:left}
  .jl .jlc-st .jlc-stats-wrap{order:1;margin:0;max-width:none}
  .jl .jlc-st-text{order:2;margin:0;max-width:none}
  .jl .jlc-st-cta{order:3;grid-column:2;margin:0;max-width:none}
  .jl .jlc-st .jlc-sub{margin-left:0;margin-right:0}
  .jl .jlc-st .jlc-cta-block{align-items:flex-start}
  .jl .jlc-st .jlc-btn{margin-inline:0}
}
.jlc-stats-wrap{max-width:900px;margin:0 auto}
.jlc-stats{display:grid;grid-template-columns:1fr;margin-top:26px;text-align:left}
.jlc-stat{padding:18px 0;border-top:1px solid var(--line-dark)}
.jlc-stat:first-child{border-top:0}
.jlc-stat b{display:block;font-family:Poppins;font-size:34px;line-height:1;letter-spacing:-.03em;white-space:nowrap}
.jlc-stat span{display:block;margin:7px 0 0;max-width:260px;font-size:14px;line-height:1.35;color:rgba(255,255,255,.72)}
@media(min-width:900px){
  .jlc-stats{grid-template-columns:1fr 1fr;margin-top:34px}
  .jlc-stat{padding:26px 0 26px 34px;border-top:1px solid var(--line-dark);border-left:0}
  .jlc-stat:nth-child(odd){padding-left:0;padding-right:34px}
  .jlc-stat:nth-child(-n+2){border-top:0}
  .jlc-stat:nth-child(even){border-left:1px solid var(--line-dark)}
  .jlc-stat b{font-size:48px}
  .jlc-stat span{max-width:280px;font-size:14px;margin-top:9px}
}
/* Heller Modus (09.09.2026, v2): hellblaue Flaeche, Zahlen in Markenblau, kein Overlay */
.jl .jlc-st-light::after{display:none}
.jl .jlc-st-light .jlc-stat{border-color:var(--line)}
.jl .jlc-st-light .jlc-stat b{color:var(--blue-800)}
.jl .jlc-st-light .jlc-stat span{color:var(--ink-60)}
.jl .jlc-st-light .jlc-sub{color:var(--ink-60)}
/* Liste (layout = list), Entwurf C Schnurrkraft 25.09.2026 */
.jlc-stl-sec .jlc-eyebrow{margin-bottom:8px}
.jlc-stl-sec h2{margin-bottom:4px}
.jlc-stl{display:flex;flex-direction:column}
.jlc-stl-row{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-bottom:1.5px solid var(--ink)}
.jlc-stl-row b{display:block;font-family:Poppins,system-ui,sans-serif;font-size:56px;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--blue-800);white-space:nowrap}
.jlc-stl-row span{display:block;font-size:15px;line-height:1.5;color:var(--ink)}
.jlc-stl-foot{margin-top:12px;font-size:12px;color:var(--ink-60)}
@media(min-width:900px){
  .jlc-stl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
  .jlc-stl-row{border-bottom:0;border-top:1.5px solid var(--ink)}
  .jlc-stl-row b{font-size:64px}
}
/* END_SECTION:jlc-stats */

/* START_SECTION:jlc-story-cards (INDEX:40) */
.jl .jlc-sc .jlc-sub{margin-bottom:22px}
.jl .jlc-sc-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:780px;margin:0 auto;text-align:left}
.jl .jlc-sc-card{background:var(--karte);color:var(--ink);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-karte)}
.jl .jlc-sch-dunkel .jlc-sc-card{box-shadow:0 16px 40px color-mix(in srgb,var(--navy) 26%,transparent)}
.jl .jlc-sc-media .jlc-ph,.jl .jlc-sc-media img{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover;border-radius:0;border:0}
.jl .jlc-sc-body{padding:18px 18px 22px}
.jl .jlc-sc-stamp{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.jl .jlc-sc-stamp i{width:26px;height:26px;border-radius:50%;background:var(--blue-800);color:#fff;flex:none;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700;font-family:Poppins,system-ui,sans-serif}
.jl .jlc-sc-stamp span{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-800)}
.jl .jlc-sc-card h3{font-size:20px;line-height:1.22;letter-spacing:-.015em;margin:0 0 8px;text-wrap:balance}
.jl .jlc-sc-card h3 .jlc-alt{color:var(--blue);font-family:var(--font-alt);font-weight:700;font-style:italic;letter-spacing:0}
.jl .jlc-sc-text p{font-size:16px;line-height:1.6;color:var(--ink-80);margin:0}
.jl .jlc-sc-text p+p{margin-top:10px}
.jl .jlc-sc .jlc-cta-block{margin-top:28px}
@media(min-width:900px){
  .jl .jlc-sc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:var(--wrap)}
  .jl .jlc-sc-grid--one{grid-template-columns:1fr;max-width:780px;gap:26px}
  .jl .jlc-sc-grid--one .jlc-sc-body{padding:26px 30px 30px}
  .jl .jlc-sc-grid--one .jlc-sc-card h3{font-size:26px}
  .jl .jlc-sc-grid--one .jlc-sc-text p{font-size:17.5px;line-height:1.7}
  .jl .jlc-sc-body{padding:22px 22px 26px}
  .jl .jlc-sc-card h3{font-size:22px}
}
/* END_SECTION:jlc-story-cards */

/* START_SECTION:jlc-supplement-facts (INDEX:41) */
.jl .jlc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.jl .jlc-sf-grid{display:flex;flex-direction:column;gap:32px}
/* Tafel: weiss, schwarzer Rahmen, dicke Balken wie das US-Panel, Ziffern tabellarisch */
.jl .jlc-sf-panel{background:#fff;border:2px solid var(--ink);border-radius:6px;padding:14px 16px 12px;font-variant-numeric:tabular-nums;box-shadow:var(--shadow-karte);max-width:440px;width:100%;margin:0 auto}
.jl .jlc-sf-title{font-family:Poppins,system-ui,sans-serif;font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.02em;margin:0 0 8px;padding-bottom:6px;border-bottom:8px solid var(--ink)}
.jl .jlc-sf-serving p{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:1.4;margin:0}
.jl .jlc-sf-serving p+p{border-top:1px solid var(--ink)}
.jl .jlc-sf-serving{padding:4px 0 6px;border-bottom:4px solid var(--ink)}
.jl .jlc-sf-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.35}
.jl .jlc-sf-table th{font-weight:700;font-size:12px;text-align:right;padding:6px 0 4px;border-bottom:1px solid var(--ink)}
.jl .jlc-sf-table th:first-child{text-align:left}
.jl .jlc-sf-table td{padding:7px 0;border-bottom:1px solid rgba(26,26,26,.18);vertical-align:top}
.jl .jlc-sf-table td:first-child{font-weight:600;color:var(--ink)}
.jl .jlc-sf-table td:first-child small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-60)}
.jl .jlc-sf-table td:nth-child(2),.jl .jlc-sf-table td:nth-child(3){text-align:right;white-space:nowrap;padding-left:12px}
.jl .jlc-sf-table tbody tr:last-child td{border-bottom:4px solid var(--ink)}
.jl .jlc-sf-other{font-size:12.5px;line-height:1.5;margin:8px 0 0;color:var(--ink-80)}
.jl .jlc-sf-foot{font-size:11.5px;line-height:1.5;margin:8px 0 0;color:var(--ink-60)}
/* Textspalte */
.jl .jlc-sf-text .jlc-sub{margin:10px 0 18px;max-width:none}
.jl .jlc-sf-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.jl .jlc-sf-points li{display:flex;gap:14px;align-items:flex-start}
.jl .jlc-sf-ico{flex:none;width:44px;height:44px;border-radius:50%;background:var(--blue-50);color:var(--blue-800);display:grid;place-items:center;border:1px solid var(--line)}
.jl .jlc-sf-points b{display:block;font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:16px;line-height:1.3;color:var(--ink)}
.jl .jlc-sf-points p{margin:2px 0 0;font-size:15px;line-height:1.5;color:var(--ink-80)}
.jl .jlc-sf-text .jlc-cta-block{align-items:flex-start;text-align:left}
.jl .jlc-sf-text .jlc-btn{margin-inline:0}
@media(min-width:900px){
  .jl .jlc-sf-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:64px;align-items:center;max-width:1040px;margin:0 auto}
  .jl .jlc-sf-panel{margin:0}
  .jl .jlc-sf-title{font-size:30px}
  .jl .jlc-sf-table{font-size:15.5px}
  .jl .jlc-sf-points b{font-size:17px}
}
/* END_SECTION:jlc-supplement-facts */

/* START_SECTION:jlc-survey (INDEX:42) */
.jl .jlc-sv .jlc-sub{margin-bottom:8px}
.jl .jlc-sv-rows{max-width:760px;margin:0 auto;text-align:left}
.jl .jlc-sv-row{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.jl .jlc-sv-row:first-child{border-top:0}
.jl .jlc-sv-num{font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:38px;line-height:1;letter-spacing:-.03em;color:var(--blue-800);text-align:right;white-space:nowrap}
.jl .jlc-sv-num span{font-size:.6em}
.jl .jlc-sv-body p{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink)}
.jl .jlc-sv-bar{height:8px;margin-top:9px;background:var(--blue-50);border-radius:999px;overflow:hidden}
.jl .jlc-sv-bar span{display:block;height:100%;background:var(--cta-bg);border-radius:999px;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){.jl .jlc-sv-bar span{transition:none}}
.jl .jlc-sv-fn{max-width:60ch;margin:18px auto 0;font-size:12.5px;line-height:1.5;color:var(--ink-60)}
.jl .jlc-sv .jlc-cta-block{margin-top:26px}
@media(min-width:900px){
  .jl .jlc-sv-row{grid-template-columns:150px 1fr;gap:24px;padding:22px 0}
  .jl .jlc-sv-num{font-size:56px}
  .jl .jlc-sv-body p{font-size:17px}
}
/* END_SECTION:jlc-survey */

/* START_SECTION:jlc-testimonials (INDEX:43) */
.jl .jlc-av--img{object-fit:cover;border-radius:50%;padding:0;background:none}
.jlc-strip{overflow:hidden;margin:0 calc(-1*var(--gut)) 16px}
.jlc-strip-track{display:flex;gap:8px;width:max-content;animation:jlc-strip-run 42s linear infinite}
/* nur mit Maus: auf Touch blieb :hover nach dem Tippen haengen und die Spur stand still */
@media(hover:hover){.jlc-strip:hover .jlc-strip-track{animation-play-state:paused}}
/* die Fotos stehen zweimal im Markup, deshalb reicht -50% fuer einen nahtlosen Umlauf */
@keyframes jlc-strip-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}   /* -50% = zwei der vier Kopien */
@media(prefers-reduced-motion:reduce){.jlc-strip-track{animation:none}.jlc-strip{overflow-x:auto;scrollbar-width:none}}
.jlc-strip .jlc-ph{flex:none;width:100px;height:100px;font-size:9px;border-radius:8px}
@media(min-width:900px){
  .jlc-strip .jlc-ph{width:100px;height:100px}
}
/* END_SECTION:jlc-testimonials */

/* START_SECTION:jlc-text-checklist (INDEX:44) */
.jl .jlc-tc{position:relative;isolation:isolate}
.jl .jlc-tc-bg::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--tc-bg-m,none);background-size:cover;background-position:center}
@media(min-width:900px){.jl .jlc-tc-bg::before{background-image:var(--tc-bg-d,var(--tc-bg-m,none))}}
.jl .jlc-tc-bg::after{content:"";position:absolute;inset:0;z-index:-1;background:#fff;opacity:var(--tc-op,.85)}
.jl .jlc-tc-col{position:relative;z-index:1}
.jl .jlc-tc-col .jlc-sub{margin-bottom:18px}
.jl .jlc-tc-col:not(.jlc-center) .jlc-sub{margin-left:0}
.jl .jlc-tc-p p{font-size:17px;line-height:1.75;color:var(--ink-80);margin:0 0 22px}
.jl .jlc-tc-p p strong{color:var(--ink)}
.jl .jlc-tc-h3{font-size:21px;line-height:1.25;margin:26px 0 12px}
.jl .jlc-tc-list{list-style:none;margin:6px 0 22px;padding:0;display:grid;gap:10px;text-align:left}
.jl .jlc-tc-list li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:var(--ink)}
.jl .jlc-tc-tick{flex:none;width:26px;height:26px;margin-top:2px;border-radius:50%;background:var(--blue-50);color:var(--blue-800);display:grid;place-items:center}
.jl .jlc-tc-close{font-size:17px;line-height:1.6;font-weight:500;color:var(--ink);margin:4px 0 0}
.jl .jlc-tc .jlc-cta-block{margin-top:26px}
.jl .jlc-tc-col:not(.jlc-center) .jlc-cta-block{align-items:flex-start}
.jl .jlc-tc-col:not(.jlc-center) .jlc-btn{margin-inline:0}
@media(min-width:900px){
  .jl .jlc-tc-p p{font-size:18px}
  .jl .jlc-tc-list li{font-size:17px}
  .jl .jlc-tc-h3{font-size:22px}
}
/* Dunkles Scheme (nach Elare "Why Trust"): Text weiss, Haken als helle Scheibe, Overlay dunkel statt weiss */
.jl .jlc-tc-dark .jlc-eyebrow.jlc-small{color:var(--sky-2)}
.jl .jlc-tc-dark .jlc-tc-p p{color:rgba(255,255,255,.82)}
.jl .jlc-tc-dark .jlc-tc-p p strong,.jl .jlc-tc-dark .jlc-tc-list li,.jl .jlc-tc-dark .jlc-tc-close,.jl .jlc-tc-dark .jlc-tc-h3{color:#fff}
.jl .jlc-tc-dark .jlc-tc-tick{background:rgba(255,255,255,.14);color:#fff}
.jl .jlc-tc-dark.jlc-tc-bg::after{background:var(--blue-800)}
/* Wellen als Maske statt als Band. Drei Masken-Ebenen: oben die Wellenform, in der Mitte
   eine volle Flaeche, unten die gespiegelte Wellenform. Sie werden bewusst um je 1px
   ueberlappt: bei krummen Sectionhoehen rundet der Browser die Kanten unterschiedlich, und
   an der Stossstelle blieb sonst eine haarduenne unmaskierte Linie stehen, die als weisser
   Strich quer durch die Section lief. Ueberlappen statt anstossen. */
.jl .jlc-tc-wavemask{
  --wv-h:36px;
  --wv-flat:linear-gradient(#000,#000);
  --wv-shape-top:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'><path d='M0,40 C320,72 640,8 960,28 C1200,44 1340,52 1440,24 L1440,64 L0,64 Z' fill='%23000'/></svg>");
  --wv-shape-bot:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'><g transform='scale(1,-1) translate(0,-64)'><path d='M0,40 C320,72 640,8 960,28 C1200,44 1340,52 1440,24 L1440,64 L0,64 Z' fill='%23000'/></g></svg>");
  -webkit-mask-image:var(--wv-top),var(--wv-flat),var(--wv-bot);
  -webkit-mask-size:100% calc(var(--wv-h) + 1px),100% calc(100% - var(--wv-h) * 2 + 2px),100% calc(var(--wv-h) + 1px);
  -webkit-mask-position:top center,center,bottom center;
  -webkit-mask-repeat:no-repeat;
  mask-image:var(--wv-top),var(--wv-flat),var(--wv-bot);
  mask-size:100% calc(var(--wv-h) + 1px),100% calc(100% - var(--wv-h) * 2 + 2px),100% calc(var(--wv-h) + 1px);
  mask-position:top center,center,bottom center;
  mask-repeat:no-repeat;
}
@media(min-width:900px){.jl .jlc-tc-wavemask{--wv-h:64px}}
/* Zweispaltig nach Elares "Why Customers Choose": Haken links, Headline und Button rechts.
   Drei Grid-Bereiche, die Liste spannt ueber beide Zeilen und steht damit mittig zur Textspalte. */
@media(min-width:900px){
  .jl .jlc-tc-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:56px;row-gap:16px;align-items:center;grid-template-areas:"list head" "list cta"}
  .jl .jlc-tc-split .jlc-tc-head{grid-area:head;align-self:end;text-align:left}
  .jl .jlc-tc-split .jlc-tc-listwrap{grid-area:list}
  .jl .jlc-tc-split .jlc-tc-ctawrap{grid-area:cta;align-self:start}
  .jl .jlc-tc-split .jlc-tc-list{grid-template-columns:1fr 1fr;column-gap:36px;row-gap:18px;margin-bottom:0}
  .jl .jlc-tc-split .jlc-sub{margin-left:0;max-width:44ch}
  .jl .jlc-tc-split .jlc-cta-block{margin-top:0;align-items:flex-start}
  .jl .jlc-tc-split .jlc-btn{margin-inline:0}
}
/* Sechs Haken nebeneinander wie bei Elare: ab Tablet zwei Spalten, zentrierte Variante bekommt breitere Spalte */
@media(min-width:640px){.jl .jlc-tc-list{grid-template-columns:1fr 1fr;column-gap:28px}}
@media(min-width:900px){.jl .jlc-tc-col.jlc-center{max-width:820px}}
/* Bild und Text (layout = mitbild), Entwurf C Schnurrkraft 25.09.2026 */
.jl .jlc-tc-media{display:flex;flex-direction:column;gap:22px}
.jl .jlc-tc-mimg .jlc-ph,.jl .jlc-tc-mimg img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-card);margin:0}
.jl .jlc-tc-media .jlc-tc-list{grid-template-columns:1fr}
@media(min-width:900px){
  .jl .jlc-tc-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;max-width:1040px}
}
/* END_SECTION:jlc-text-checklist */

/* START_SECTION:jlc-ticker (INDEX:45) */
.jlc-ticker{overflow:hidden;background:var(--sky-3);border-bottom:1px solid var(--line)}
.jlc-ticker.jlc-dark{background:var(--bg-ticker-dark,var(--navy));border-color:transparent;color:#fff}
.jlc-tick-track{display:flex;gap:28px;padding:10px 0;width:max-content;animation:tick 22s linear infinite}
.jlc-ticker.jlc-dark .jlc-tick-track{animation-duration:28s}
.jlc-tick-item{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--blue)}
.jlc-ticker.jlc-dark .jlc-tick-item{color:#fff}
.jlc-tick-item .jlc-ico{width:19px;height:19px}
.jlc-tick-item .jlc-ico--img{object-fit:contain;border-radius:0;filter:brightness(0) invert(1)}
@keyframes tick{to{transform:translateX(-50%)}}   /* -50% = zwei der vier Kopien */
@media(prefers-reduced-motion:reduce){.jlc-tick-track{animation:none}}
.jlc-ticker.jlc-dark .jlc-tick-track{animation-duration:var(--tick-speed,28s)}
/* END_SECTION:jlc-ticker */

/* START_SECTION:jlc-topic-rail (INDEX:46) */
.jl .jlc-tr-head{margin-bottom:22px}
/* Untereinander statt seitwaerts. Entscheidung vom 17.09.: die Zielgruppe ist ab 40
   aufwaerts, und fuer aeltere Leser ist Weiterscrollen angenehmer als Wischen oder
   einen Pfeil zu treffen. Damit faellt auch die Rail-Mechanik aus jlc-base.js weg. */
.jl .jlc-tr-stack{display:flex;flex-direction:column;gap:16px}
.jl .jlc-tr-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:16px}
.jl .jlc-tr-media .jlc-ph{aspect-ratio:1/1;width:100%;border-radius:12px;border:0}
.jl .jlc-tr-tag{display:inline-block;background:rgba(255,255,255,.14);color:#fff;font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.jl .jlc-tr-body h3{font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:19px;line-height:1.25;color:#fff;margin-bottom:8px}
.jl .jlc-tr-body p{font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)}
.jl .jlc-tr-body ul{list-style:none;margin:14px 0 0;padding:0}
.jl .jlc-tr-body li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.4;color:#fff;margin-bottom:7px}
.jl .jlc-tr-body li .jlc-ico{flex:none;margin-top:3px;color:var(--sky-2)}
@media(min-width:900px){
  /* Elare: zwei gleich breite Spalten, 28px Abstand, mittig ausgerichtet */
  .jl .jlc-tr-panel{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:20px}
  .jl .jlc-tr-body h3{font-size:24px}
  .jl .jlc-tr-head{margin-bottom:28px}
}
/* END_SECTION:jlc-topic-rail */

/* START_SECTION:jlc-trust-badges (INDEX:47) */
.jl .jlc-tb h2{margin-bottom:22px}
.jl .jlc-tb-list{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:900px}
.jl .jlc-tb-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;background:var(--karte);border:1px solid var(--line);border-radius:var(--r-card);text-align:center}
.jl .jlc-tb-ico{width:52px;height:52px;border-radius:50%;background:var(--blue-50);color:var(--blue-800);display:grid;place-items:center}
.jl .jlc-tb-ico .jlc-ico{width:26px;height:26px}
/* Eigenes Bild statt Sprite-Icon: Kreis bleibt, Bild fuellt ihn (PNG/SVG mit Transparenz, 160x160) */
.jl .jlc-tb-img{background:transparent;overflow:hidden}
.jl .jlc-tb-img img{width:100%;height:100%;object-fit:contain;display:block}
.jl .jlc-tb-compact .jlc-tb-img img{width:100%;height:100%}
.jl .jlc-tb-item b{font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:14px;line-height:1.3;color:var(--ink)}
.jl .jlc-tb-sub{font-size:12.5px;line-height:1.4;color:var(--ink-60)}
@media(min-width:900px){
  .jl .jlc-tb-list{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;max-width:var(--wrap)}
  .jl .jlc-tb-item{padding:24px 14px}
  .jl .jlc-tb-item b{font-size:15px}
}
/* Kompakt: schmaler Streifen, Icon links neben dem Label, halbe Hoehe (09.09.2026) */
.jl .jlc-tb-compact .jlc-tb-item{flex-direction:row;justify-content:flex-start;gap:10px;padding:12px 14px;text-align:left}
.jl .jlc-tb-compact .jlc-tb-ico{width:36px;height:36px;flex:none}
.jl .jlc-tb-compact .jlc-tb-ico .jlc-ico{width:18px;height:18px}
.jl .jlc-tb-compact .jlc-tb-item b{font-size:13.5px}
.jl .jlc-tb-compact .jlc-tb-list{gap:10px}
@media(min-width:900px){
  .jl .jlc-tb-compact .jlc-tb-item{padding:14px 18px}
  .jl .jlc-tb-compact .jlc-tb-item b{font-size:14.5px}
}
/* END_SECTION:jlc-trust-badges */

/* START_SECTION:jlc-video-testimonials (INDEX:48) */
.jlc-vids{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gut));padding:0 var(--gut)}
.jlc-vids::-webkit-scrollbar{display:none}
.jlc-vid{position:relative;flex:none;width:126px;scroll-snap-align:start}
.jlc-vid .jlc-ph{aspect-ratio:126/214;font-size:9px;display:flex;align-items:center;justify-content:center}
/* Das Bild unter dem Streifen hatte eine feste Hoehe von 230 px auf voller Breite und
   wurde dadurch oben und unten beschnitten. Jetzt behaelt es sein eigenes Seitenverhaeltnis. */
.jl .jlc-vids-img{display:block;margin:26px auto 0;width:min(var(--jlc-vids-w),100%);height:auto;aspect-ratio:auto}
.jl span.jlc-vids-img,.jl div.jlc-vids-img{aspect-ratio:20/13}

@media(min-width:900px){
  .jlc-vid{width:217px}
}
/* END_SECTION:jlc-video-testimonials */