/* =============================================================
   Stoerer "Persoenliche Nachricht von Francesca"
   Feature 007 — specs/007-stoerer-francesca-special/

   Bewirbt die Newsletter-Special-Landingpage. Aufbau uebernimmt
   assets/js/stoerer-francesca.js, hier steht nur die Gestaltung.

   Bauweise nach dem Vorbild des pearlux-Stoerers (.promo-box):
   bewegte Verlaufsgrafik als Video hinter der Karte, darueber ein
   Verlauf als Lesehilfe. Hier deutlich groesser und im
   Laserazor-Blau.

   Hausregeln, die hier bewusst eingehalten sind:
   - kein text-shadow (Lesbarkeit ueber .lzs__scrim, nie ueber den Text)
   - keine farbige Kante an einer Seite, nur Haarlinien ringsum
   - Radius hoechstens 8px, Kreise nur fuer echte Kreise
     (Portrait, Abspielknopf der Sprachnachricht)
   - keine Grossbuchstaben, keine pulsierenden Punkte
   - kein Foto als Flaechenhintergrund, die Bewegung ist eine
     abstrakte Verlaufsgrafik
   ============================================================= */

.lzs{
  --lzs-navy:#00214d;
  --lzs-line:rgba(255,255,255,.16);
  --lzs-line-2:rgba(255,255,255,.26);
  --lzs-w:rgba(255,255,255,.72);
  margin:20px 0 0;
  max-width:520px;
}
.lzs[hidden]{display:none}
/* Fuer Seiten mit mittigem Hero. */
.lzs.is-mitte{margin-left:auto;margin-right:auto}

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

.lzs__card{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:1px solid var(--lzs-line);
  border-radius:8px;
  background:var(--lzs-navy);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  text-align:left;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 26px -18px rgba(0,33,77,.55);
  transition:transform .22s var(--ease,ease),box-shadow .22s ease,border-color .22s ease;
}
.lzs__card:hover{
  transform:translateY(-2px);
  border-color:var(--lzs-line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 34px -18px rgba(0,33,77,.7);
}
.lzs__card:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Bewegte Verlaufsgrafik. Ueber dem Marineblau als Lichtschimmer,
   deshalb screen statt reiner Deckkraft — das haelt die Flaeche tief
   und laesst nur die hellen Stellen des Verlaufs durchziehen. */
.lzs__bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.72;
  /* saturate herunter, damit der Verlauf als Lichtschimmer liest und nicht
     als Farbfleck — Laserazor bleibt blau. */
  filter:saturate(.4);
  mix-blend-mode:screen;
  pointer-events:none;
}
/* Lesehilfe: links, wo der Text steht, fast deckend, nach rechts offen. */
.lzs__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(101deg,
      rgba(0,27,62,.9) 0%,
      rgba(0,29,68,.72) 30%,
      rgba(0,33,78,.3) 62%,
      rgba(0,21,52,.5) 100%),
    linear-gradient(180deg,rgba(0,18,44,.24) 0%,rgba(0,18,44,0) 40%);
}
.lzs__in{position:relative;z-index:2;padding:16px 18px 15px}

/* ---------- Kopf: Portrait neben der Ansage ---------- */

.lzs__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}

.lzs__pf{
  position:relative;
  width:64px;height:64px;
  margin:0;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.5),0 6px 16px -8px rgba(0,12,32,.9);
}
.lzs__pf img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
/* Abdunkelung unten im Portrait, damit das Abspielzeichen ohne
   eigenen Kasten und ohne Textschatten lesbar bleibt. */
.lzs__pf::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 78% at 50% 118%,rgba(0,16,40,.82) 0%,rgba(0,16,40,.34) 46%,rgba(0,16,40,0) 72%);
}
.lzs__pp{
  position:absolute;left:50%;bottom:7px;z-index:1;
  width:13px;height:13px;
  transform:translateX(-50%);
  fill:#fff;
}

.lzs__eyebrow{
  display:block;
  font-size:11.5px;font-weight:500;line-height:1.3;
  color:var(--lzs-w);
  letter-spacing:.002em;
}
.lzs__head{
  display:block;
  margin:3px 0 0;
  font-size:16.5px;font-weight:700;line-height:1.24;
  letter-spacing:-.017em;
  color:#fff;
  text-wrap:balance;
}
.lzs__head b{font-weight:700;white-space:nowrap}
.lzs__sub{
  display:block;
  margin:4px 0 0;
  font-size:12.4px;font-weight:400;line-height:1.35;
  color:var(--lzs-w);
}
.lzs__sub s{color:rgba(255,255,255,.55);text-decoration-thickness:1px}
.lzs__sub em{font-style:normal;color:#fff;font-weight:600}

/* ---------- Sprachnachricht ---------- */

/* Liegt ueber der gedehnten Verknuepfung des Knopfes, damit Hoeren die
   Lightbox nicht oeffnet. */
.lzs__aud{
  position:relative;z-index:4;
  display:none;
  align-items:center;gap:11px;
  margin:13px 0 0;
  padding:8px 12px 8px 8px;
  border:1px solid var(--lzs-line);
  border-radius:8px;
  background:rgba(255,255,255,.09);
  cursor:default;
}
.lzs__aud.is-on{display:flex}
.lzs__ab{
  width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:#fff;color:var(--lzs-navy);
  cursor:pointer;
  transition:transform .18s ease,background .18s ease;
}
.lzs__ab:hover{transform:scale(1.06)}
.lzs__ab:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lzs__ab svg{width:14px;height:14px;fill:currentColor;pointer-events:none}
.lzs__am{flex:1;min-width:0}
.lzs__aw{
  display:flex;align-items:center;justify-content:space-between;
  gap:0;height:20px;cursor:pointer;
}
/* Feste, schmale Balken mit automatischem Abstand — sonst werden aus der
   Welle bei breiter Karte Bloecke. */
.lzs__aw i{
  flex:0 0 3px;
  border-radius:1.5px;
  background:rgba(255,255,255,.32);
  transition:background .14s linear;
}
.lzs__aw i.on{background:#fff}
.lzs__ac{
  margin:4px 0 0;
  font-size:11px;line-height:1.3;
  color:rgba(255,255,255,.62);
}
.lzs__at{
  flex-shrink:0;
  font-size:11.5px;
  color:var(--lzs-w);
  font-variant-numeric:tabular-nums;
}

/* ---------- Fuss: Frist und Handlungsaufforderung ---------- */

.lzs__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:13px 0 0;
  padding:12px 0 0;
  border-top:1px solid var(--lzs-line);
}
.lzs__deadline{
  min-width:0;
  font-size:11.6px;line-height:1.32;
  color:var(--lzs-w);
}
.lzs__deadline b{color:#fff;font-weight:600}
/* Der Knopf ist die einzige Verknuepfung der Karte und deckt sie ganz ab
   (gedehnte Verknuepfung). So bleibt das Markup gueltig — kein Knopf in
   einem Verweis — und Strg-Klick oeffnet das Angebot in einem neuen Tab. */
.lzs__cta{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;
  border-radius:6px;
  background:#fff;
  color:var(--lzs-navy);
  font-size:13px;font-weight:600;letter-spacing:-.008em;
  white-space:nowrap;
  transition:background .18s ease,transform .18s ease;
}
/* Deckt die ganze Karte ab: absolut gesetzt gegen .lzs__card, weil der
   Knopf selbst nicht positioniert ist. */
.lzs__cta::after{content:"";position:absolute;inset:0;z-index:3}
.lzs__cta svg{width:11px;height:11px;fill:currentColor;flex-shrink:0}
.lzs__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lzs__card:hover .lzs__cta{background:#eaf1ff;transform:translateX(1px)}

/* ---------- Grosse Fassung (Startseite) ---------- */

.lzs.is-gross{max-width:540px}
.lzs.is-gross .lzs__in{padding:18px 20px 17px}
.lzs.is-gross .lzs__top{gap:16px}
.lzs.is-gross .lzs__pf{width:84px;height:84px}
.lzs.is-gross .lzs__pp{width:15px;height:15px;bottom:9px}
.lzs.is-gross .lzs__eyebrow{font-size:12.2px}
.lzs.is-gross .lzs__head{font-size:19px;margin-top:4px}
.lzs.is-gross .lzs__sub{font-size:13px}
.lzs.is-gross .lzs__aud{margin-top:15px;padding:9px 13px 9px 9px}
.lzs.is-gross .lzs__ab{width:40px;height:40px}
.lzs.is-gross .lzs__ab svg{width:15px;height:15px}
.lzs.is-gross .lzs__aw{height:23px}
.lzs.is-gross .lzs__ac{font-size:11.5px}
.lzs.is-gross .lzs__foot{margin-top:15px}
.lzs.is-gross .lzs__deadline{font-size:12.2px}
.lzs.is-gross .lzs__cta{padding:10px 17px;font-size:13.5px}

/* ---------- Schmale Breiten ---------- */

@media (max-width:560px){
  .lzs,.lzs.is-gross{max-width:100%;margin-top:16px}
  .lzs__in,.lzs.is-gross .lzs__in{padding:14px 14px 13px}
  .lzs__top,.lzs.is-gross .lzs__top{gap:12px}
  .lzs__pf,.lzs.is-gross .lzs__pf{width:60px;height:60px}
  .lzs.is-gross .lzs__pp{width:13px;height:13px;bottom:7px}
  .lzs__head,.lzs.is-gross .lzs__head{font-size:16px}
  .lzs__sub,.lzs.is-gross .lzs__sub{font-size:12.2px}
  .lzs__eyebrow,.lzs.is-gross .lzs__eyebrow{font-size:11.2px}
  .lzs__aud,.lzs.is-gross .lzs__aud{margin-top:12px}
  .lzs__foot,.lzs.is-gross .lzs__foot{margin-top:12px;padding-top:11px}
  .lzs__cta,.lzs.is-gross .lzs__cta{padding:9px 14px;font-size:12.6px}
  /* Auf dem Handy jeden zweiten Balken weglassen, sonst wird aus der
     Welle bei 240px Laufbahn eine geschlossene Flaeche. */
  .lzs__aw i:nth-child(2n){display:none}
}
/* Unter 400px stehen Frist und Knopf uebereinander, sonst bricht die
   Frist auf drei Zeilen und der Knopf rutscht aus der Karte. */
@media (max-width:399px){
  .lzs__foot,.lzs.is-gross .lzs__foot{flex-direction:column;align-items:stretch;gap:10px}
  .lzs__cta,.lzs.is-gross .lzs__cta{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .lzs__card,.lzs__cta,.lzs__ab{transition:none}
  .lzs__card:hover{transform:none}
}

/* =============================================================
   Lightbox mit dem Video von Francesca
   ============================================================= */

.lzsx{
  position:fixed;inset:0;z-index:9999;
  display:none;
  align-items:center;justify-content:center;
  padding:24px;
  /* Nur Deckkraft, keine Weichzeichnung: WebKit hat mit backdrop-filter auf
     dieser Flaeche die eigene Fuellfarbe nicht mehr gezeichnet, die Seite
     blieb dahinter lesbar. Ein deckendes Marineblau tut dasselbe, billiger
     und in jedem Browser gleich. */
  background:rgba(0,16,40,.95);
}
.lzsx.is-on{display:flex;animation:lzsxAuf .22s ease}
@keyframes lzsxAuf{from{opacity:0}to{opacity:1}}

.lzsx__panel{
  position:relative;
  display:flex;align-items:stretch;justify-content:center;gap:28px;
  width:100%;max-width:800px;max-height:100%;
}

/* Buehne: das Hochkant-Video, Haarlinie, gleicher Radius wie die Karte.
   Die Breite haengt an der Fensterhoehe, damit das Hochkant-Video auch in
   flachen Fenstern vollstaendig hineinpasst. */
.lzsx__stage{
  --lzsx-h:min(76vh,600px);
  position:relative;
  flex:0 0 auto;
  width:min(calc(var(--lzsx-h) * .5625),40vw);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  overflow:hidden;
  background:#00152f;
  align-self:center;
}
.lzsx__stage::before{content:"";display:block;padding-top:177.78%}
.lzsx__v{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  background:#00152f;
}
/* Fortschritt am Fuss der Buehne. Zeigt an, dass es nach dem Video
   weitergeht — funktional, keine Zierde. */
.lzsx__prog{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(255,255,255,.2);
}
.lzsx__prog i{display:block;height:100%;width:0;background:#fff;transition:width .2s linear}

/* Tonknopf, falls der Browser den Start mit Ton verweigert. */
.lzsx__unmute{
  position:absolute;left:10px;bottom:14px;z-index:2;
  display:none;align-items:center;gap:7px;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.32);border-radius:6px;
  background:rgba(0,20,48,.82);
  color:#fff;font-size:12.5px;font-weight:600;
}
.lzsx__unmute.is-on{display:inline-flex}
.lzsx__unmute svg{width:14px;height:14px;fill:currentColor}

.lzsx__side{
  flex:0 1 430px;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:14px;
  color:#fff;
}
.lzsx__eyebrow{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.72);margin:0}
.lzsx__h{
  margin:0;
  font-size:clamp(23px,2.7vw,30px);font-weight:700;line-height:1.14;
  letter-spacing:-.026em;color:#fff;
  text-wrap:balance;
}
.lzsx__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.lzsx__list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.6px;line-height:1.45;color:rgba(255,255,255,.86);
}
.lzsx__list svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;stroke:#fff;fill:none;stroke-width:2.4}
.lzsx__go{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  align-self:flex-start;
  padding:14px 24px;
  border-radius:6px;
  background:#fff;color:var(--lzs-navy,#00214d);
  font-size:15px;font-weight:700;letter-spacing:-.012em;
  transition:background .18s ease,transform .18s ease;
}
.lzsx__go svg{width:14px;height:14px;fill:currentColor}
.lzsx__go:hover{background:#eaf1ff;transform:translateX(2px)}
.lzsx__note{margin:0;font-size:11.8px;line-height:1.4;color:rgba(255,255,255,.58)}

/* Schliessen: freistehendes Zeichen, kein Kasten dahinter, in der
   Fensterecke statt neben der Tafel. */
.lzsx__close{
  position:fixed;top:16px;right:18px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;
  color:#fff;opacity:.8;
  cursor:pointer;
  transition:opacity .18s ease,transform .18s ease;
}
.lzsx__close:hover{opacity:1;transform:scale(1.08)}
.lzsx__close:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.lzsx__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.1;fill:none}

/* Hochkant und schmal: Video oben, Text darunter, alles scrollbar. */
@media (max-width:759px){
  .lzsx{padding:16px;align-items:flex-start}
  .lzsx__panel{
    flex-direction:column;gap:16px;
    max-width:420px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-top:34px;
  }
  .lzsx__stage{width:min(280px,60vw);align-self:center}
  .lzsx__side{gap:12px;text-align:center;align-items:center}
  .lzsx__h{font-size:22px}
  .lzsx__list{text-align:left}
  .lzsx__go{align-self:stretch;padding:14px 20px}
  .lzsx__close{top:8px;right:8px}
}
/* Niedrige Fenster: das Video bekommt die Hoehe, der Text bleibt knapp. */
@media (min-width:760px) and (max-height:720px){
  .lzsx__side{gap:11px}
  .lzsx__h{font-size:clamp(21px,2.2vw,26px)}
  .lzsx__go{padding:12px 20px;font-size:14px}
}

body.lzs-fix{overflow:hidden}
/* Die Bestpreis-Ecke liegt site-weit auf z-index 2147483000, also ueber der
   Lightbox. Solange das Video laeuft, bleibt sie weg — das
   Einwilligungsbanner auf derselben Stufe bleibt bewusst sichtbar. */
body.lzs-fix .lz-ribbon{display:none}