/* Landing = das Pitch Video stumm. Die Buehnen kommen aus buehnen.css (storyboard/folien.html), der Fuss aus css/fuss.css der
   Website; hier nur Kopf, Beats, Bildschirm 1, Schnitte, Film, Schluss. */
:root{--kopf:102px}
body{margin:0;background:var(--buehne);color:var(--unter);font-family:'Schibsted Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{position:relative}

/* Kopf, Fassung T (Nutzer 30.09. 17:55): Marke links (Signet 56, Wortmarke 34), rechts vier Glas Knoepfe zweizeilig 66 hoch */
.lp-nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:opacity .3s;
  background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.34) 55%,rgba(0,0,0,0) 100%)}
body.lp-amfuss .lp-nav{opacity:0;pointer-events:none}
.lp-nav-in{max-width:1400px;margin:0 auto;padding:20px 34px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp-marke{display:flex;align-items:center;gap:15px;color:#FFFFFF;text-decoration:none}
.lp-marke svg{width:56px;height:56px;flex:none}
.lp-wort{display:flex;flex-direction:column;gap:4px;line-height:1;white-space:nowrap}
.lp-wn{font-family:'Playfair Display',serif;font-size:34px;font-weight:500;letter-spacing:.02em}
.lp-wu{font-size:15px;font-weight:500;letter-spacing:.03em;opacity:.9}
/* Knoepfe: Name gross, Unterzeile klein, wie die Live Landing (css/film.css .cta.zwei); die Flaeche kommt nur aus css/glas.css */
.lp-knoepfe{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;justify-content:center}
.lp-knoepfe .glas{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.1;white-space:nowrap;box-sizing:border-box}
.lp-knoepfe .glas small{font-size:.64em;font-weight:500;opacity:.78;margin-top:5px}
.lp-knoepfe .glas:not(.sek) small{opacity:.62}
/* Kopf (Nutzer 30.09. 23:55): kleiner, 52 hoch; die Unterzeile ploppt beim Zeigen mit der Maus oder bei Tastaturfokus unter dem Knopf
   auf, reiner Text ohne eigene Flaeche, der Kopf springt nicht */
.lp-nav .lp-knoepfe .glas{position:relative;font-size:17px;height:52px;padding:0 24px}
.lp-nav .lp-knoepfe .glas small{position:absolute;left:50%;top:calc(100% + 7px);transform:translate(-50%,-4px);margin:0;font-size:13px;color:#FFFFFF;opacity:0;
  pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.lp-nav .lp-knoepfe .glas:hover small,.lp-nav .lp-knoepfe .glas:focus-visible small{opacity:1;transform:translate(-50%,0)}

/* Beats wie die Ueber uns Seite: ein Bildschirm je Haltestelle, sticky halten, dann hoch und aus (Scroll Timeline), ohne Unterstuetzung eine Hoehe je Beat */
.beat{position:relative;z-index:2;view-timeline-name:--beat;view-timeline-axis:block}
.beat-in{min-height:100svh;padding:var(--kopf) 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}
@supports (animation-timeline:view()){
  .beat{min-height:200svh}
  .beat .beat-in{position:sticky;top:0;animation:halten linear both;animation-timeline:--beat;animation-range:contain}
}
@supports not (animation-timeline:view()){
  .beat{min-height:100svh}
}
@keyframes halten{0%{transform:translateY(0);opacity:1}62%{opacity:1}100%{transform:translateY(-16svh);opacity:0}}

/* Rahmen: die Buehne 1920 x 1080, auf Breite oder freie Hoehe skaliert (passe() des Storyboards), kein Rand, keine Rundung.
   Der Rahmen wird sichtbar, sobald der Beat im Bild ist; die Bewegung der Folie ist ihr Einflug */
.lp-held{position:relative;width:min(100vw,calc((100svh - var(--kopf) - 24px) * 16 / 9))}
.rahmen16{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--buehne);pointer-events:none;opacity:0;transition:opacity .3s ease}
.in .rahmen16{opacity:1}

/* Einfliegen wie auf der Ueber uns Seite: erst wenn der Beat im Bild ist */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.in .rv{opacity:1;transform:none}
.wd{display:inline-block;opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--wd,0s)}
.in .wd{opacity:1;transform:none}

/* Eigene Ueberschriften in der Buehne (UEBER): oben links wie die Titel der Folien, Einflug wie Ueber uns; Folie 10 rueckt
   ihre Datumszeile nach rechts ueber Heute und Order */
.lp-ueber{position:absolute;left:120px;top:64px;z-index:3;font-size:52px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#FFFFFF;white-space:nowrap;
  opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.in .lp-ueber{opacity:1;transform:none}
.lp-ueber.lp-gross{left:0;right:0;top:120px;text-align:center;font-size:124px;letter-spacing:-.03em;line-height:1}
#w-f09 .f09-kopf{left:auto;right:120px;text-align:right}
/* Flacher Kopf (Nutzer 03.10., Kombi B und H): Investiert und Cash in einer Zeile neben dem Titel, die Tabelle beginnt bei 200 und
   bekommt 764 px Feld (Zeilenhoehe aus der Zeilenzahl, siehe bau_f09.py) */
#w-f09 .f09-quote{left:680px;top:66px;gap:36px}
#w-f09 .f09-quote div{flex-direction:row;align-items:baseline;gap:14px}
#w-f09 .f09-quote i{font-size:26px}
#w-f09 .f09-quote b{font-size:48px;line-height:1.1;letter-spacing:-.02em}
#w-f09 .f09-tab{top:200px;--f09-feld:764px}
/* Warnschild (SCHILD): ein Satz in einer Zeile, rechts unter der Datumszeile, Rot wie das Schild der Modellportfolio Seite */
.lp-schild{position:absolute;right:120px;top:130px;z-index:3;display:inline-flex;align-items:center;gap:14px;padding:9px 22px 9px 16px;
  border:2.5px solid rgba(224,72,44,.9);border-radius:14px;background:rgba(224,72,44,.08);color:#FFFFFF;white-space:nowrap;
  font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.1;
  opacity:0;transform:translateY(24px);transition:opacity .6s ease .15s,transform .6s ease .15s}
.in .lp-schild{opacity:1;transform:none}
.lp-schild svg{width:34px;height:34px;flex:none}

/* Frage vor dem Status quo (WORTE3, Nutzer 03.10.): eine Haltestelle, zwei Zeilen, alles gross, groesser als die Frage von Folie 3 */
.lp-frage3 .titel{font-size:112px;line-height:1.02;letter-spacing:-.03em}
/* Schnitte (Folie 11 und 12): der eine Schnitt steht, seine Zeilen fliegen ein wie Ueber uns */
.lp-still .f10-s,.lp-still .f11-s{opacity:1}
.lp-still .f10-s>*,.lp-still .f11-s>*{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.lp-still .f10-s>:nth-child(2),.lp-still .f11-s>:nth-child(2){transition-delay:.15s}
.lp-still .f10-s>:nth-child(3){transition-delay:.3s}
.in .lp-still .f10-s>*,.in .lp-still .f11-s>*{opacity:1;transform:none}

/* USP Leiste rechts, Fassung A (Wahl des Nutzers 01.10. 17:20 aus landing/varianten_usp.html): die bisherigen Punkte rechtsbuendig an
   einer senkrechten Linie am rechten Rand, jeder mit einem Punkt auf der Linie, je Aussage eine Zeile (White Label zwei), Bloecke durch
   Abstand, nie Kommas. Buehnenpixel, neueste Zeile hell, aeltere silber. Rasten: die neueste Zeile beginnt an der grossen Stelle des
   vorigen Worts (Schrift 150 statt 40, Ursprung rechts oben, Versatz --dx plus die eigene Breite mal Skala) und schrumpft nach rechts
   in die Leiste, Kurve wie .wd. Am Handy steht die Liste oben ueber die Breite (74, rund 15 px), das grosse Wort rueckt darunter (--mt).
   Seit 01.10. 18:30 (Nutzer): die Leiste ist eine feste Ebene ueber den Beats (#leiste), damit Linie und bisherige Zeilen beim Wisch stehen
   bleiben und nur die neueste Zeile schrumpft. Gleiche Geometrie wie ein Beat (.beat-in, .lp-held, .rahmen16, .stage ueber passe()),
   Rahmen und Buehne durchsichtig, Zeilen und Bloecke verborgen bis seite.js sie zeigt; .an sichtbar, .in laesst die neue Zeile schrumpfen,
   .ruck setzt sie ohne Uebergang an die grosse Stelle, .weg blendet beim Zurueckwischen aus */
.lp-leiste{position:fixed;left:0;top:0;width:100%;height:100svh;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:var(--kopf) 0 0;box-sizing:border-box;opacity:0;transition:opacity .3s ease}
.lp-leiste.an{opacity:1}
.lp-leiste .rahmen16,.lp-leiste .stage{background:transparent}
.lp-leiste .rahmen16{opacity:1}
.lp-leiste [hidden]{display:none}
.lp-pins{position:absolute;z-index:2;pointer-events:none;color:var(--unter);font-weight:700;letter-spacing:-.02em}
.lp-pin{white-space:nowrap}
.lp-pin span{display:block}
.lp-pins-A{--sk:3.75;--dy:var(--dyd);right:120px;top:90px;bottom:90px;display:flex;flex-direction:column;align-items:flex-end;gap:40px;
  padding-right:40px;border-right:2px solid rgba(255,255,255,.18)}
.lp-pins-A .lp-block{display:flex;flex-direction:column;align-items:flex-end;gap:22px}
.lp-pins-A .lp-pin{position:relative;text-align:right;font-size:40px;line-height:44px;transition:color .35s ease,opacity .25s ease}
.lp-pins-A .lp-pin.alt{color:var(--silber)}
.lp-pins-A .lp-pin.weg{opacity:0}
.lp-pins-A .lp-pin.ruck{transition:none!important}
.lp-pins-A .lp-pin::after{content:"";position:absolute;right:-48px;top:22px;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#FFFFFF}
.lp-pins-A .lp-pin.neu{transform-origin:100% 0;transition:transform .7s cubic-bezier(.16,1,.3,1),color .35s ease,opacity .25s ease;transform:translate(calc(var(--dx) + var(--sk) * 100%),var(--dy)) scale(var(--sk))}
.in .lp-pins-A .lp-pin.neu{transform:none}
@media (max-width:700px){
  .lp-pins-A{--sk:2.027;--dy:var(--dym);left:120px;top:64px;bottom:auto;gap:30px;border-right-width:4px}
  .lp-pins-A .lp-block{gap:0}
  .lp-pins-A .lp-pin{font-size:74px;line-height:84px}
  .lp-pins-A .lp-pin::after{right:-54px;top:42px;width:26px;height:26px;margin-top:-13px}
  .lp-mit-leiste .f10-s,.lp-mit-leiste .f11-s{top:var(--mt);height:auto;justify-content:flex-start}
}

/* Bildschirm 1, Fassung A auf Schwarz (Nutzer 03.10., varianten_b1.html): links Oberzeile und zweite Zeile grau, rechts auf gleicher
   Hoehe die Kanalkarte (Standbild, Play, Dauer, darunter Avatar, Titel, Kanalzeile). Spalte der Karte 36,1 vw wie 520 px auf 1440,
   nie ueber 45 Prozent der Hoehe (--film aus masse() in seite.js). Masse der Buehne 1440 x 900 in vw und svh */
.lp-b1 .beat-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--film,clamp(320px,36.1vw,560px));column-gap:5vw;align-items:center;height:100svh;
  padding:calc(var(--kopf) + 3.8svh) 5vw 4.8svh;text-align:left}
.lp-links{min-width:0}
.lp-frage{margin:0;color:#FFFFFF;font-weight:800;font-size:clamp(40px,5.83vw,96px);line-height:.96;letter-spacing:-.033em}
.lp-unter{margin:1.8svh 0 0;color:var(--unter);font-weight:700;font-size:clamp(24px,3.06vw,52px);line-height:1.05;letter-spacing:-.025em}
.lp-film{display:block;min-width:0;color:#FFFFFF;text-decoration:none;transition-delay:.35s}
/* Film: der eine Player der Website (css/player.css), die Karte gibt nur Rahmen und Breite */
.lp-zeile{display:flex;align-items:flex-start;gap:12px;margin-top:14px}
.lp-avatar{width:40px;height:40px;flex:none;color:#FFFFFF}
.lp-zt{display:flex;flex-direction:column;min-width:0}
.lp-titel{font-size:clamp(16px,1.39vw,22px);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.lp-meta{font-size:clamp(12px,.97vw,15px);font-weight:500;color:var(--silber);margin-top:3px}

/* Schluss (Nutzer 03.10. 17:30, Blatt varianten_schluss_einzeiler.html Nr. 1): ein Satz allein, links, senkrecht mittig, in EINER Zeile
   (4,5vw tragen 38 Zeichen in 1340 px bei 1440), keine Oberzeile; die Leiste unten wie bisher; ein Lichtfeld unter dem Glas, weil
   glas.css auf blankem Schwarz nichts brechen kann; danach der Fuss der Website (css/fuss.css) */
.lp-schluss{position:relative;z-index:2;min-height:100svh;overflow:hidden}
.lp-schluss .lp-licht{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 44vw 40svh at 48vw 88svh,rgba(255,255,255,.14),rgba(255,255,255,0) 70%)}
.lp-schluss .beat-in{position:relative;min-height:100svh;box-sizing:border-box;align-items:flex-start;justify-content:center;gap:0;padding:var(--kopf) 0 calc(8svh + var(--kopf)) 6.9vw;text-align:left}   /* Satzmitte bei 46 % wie im Blatt, unter dem Schild des Fotos */
.lp-slogan{margin:0;color:#FFFFFF;font-weight:800;font-size:clamp(28px,4.5vw,72px);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.lp-reihe{position:absolute;left:6.9vw;bottom:13svh;margin:0;width:auto}
.lp-schluss .lp-knoepfe{justify-content:flex-start;gap:20px}
.lp-schluss .lp-knoepfe .glas{font-size:24px;padding:22px 44px;min-width:clamp(230px,19.4vw,280px)}   /* 280 bei 1440, bei 1280 bleibt rechts Luft */

/* Fotos (Nutzer 03.10., varianten_fotos.html Nr. 2 und Nr. 4): Bildschirm 1 Wall Street 1940 links, laeuft nach rechts in Schwarz aus, die Kanalkarte
   steht auf Schwarz; am Schluss Verkauft sein Auto 1929, ganz, oben und unten dunkler, das Lichtfeld leise (.14 statt .24). Dunkelheit B, kein Duotone,
   kein Rot, kein Zoom, Korn wie die Live Seite. Nur eigenes Markup der Landing (grund() in bildschirm1() und schluss()), keine Buehne des Storyboards */
.lp-grund{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#000000}
.lp-grund img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.58) contrast(1.06)}
.lp-korn,.lp-verlauf{position:absolute;inset:0}
.lp-korn{background:url(/assets/anim/korn.webp) 0 0/320px 320px;opacity:.55;mix-blend-mode:overlay}
.lp-b1 .lp-links,.lp-b1 .lp-film{position:relative;z-index:1}
.lp-b1 .lp-verlauf{background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.9) 68%,#000000 100%),
  linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 16%,rgba(0,0,0,0) 30%),linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.3) 22%,rgba(0,0,0,0) 44%),
  radial-gradient(ellipse 43vw 40svh at 24% 54%,rgba(0,0,0,.55),rgba(0,0,0,0) 70%)}
.lp-schluss .lp-verlauf{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 24%),linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,0) 56%),
  radial-gradient(ellipse 62.5vw 33.3svh at 36% 46%,rgba(0,0,0,.5),rgba(0,0,0,0) 70%)}

/* Kontur, Effekt E Halo und Kontur (Nutzer 03.10., varianten_schrift.html): Rand 1,2 px unter der Fuellung plus Schatten, auf jedem Schriftzug jeder
   Haltestelle, also Ueberschriften und grosse Worte; nicht Tabellen, Achsen, Fussnoten, Kopf und Knoepfe. Nur hier, nie in buehnen.css (der Film).
   --kp ist ein Bildschirmpixel: 1px auf Bildschirm 1 und am Schluss, in der Buehne 1920 / Rahmenbreite (kontur() in seite.js), damit Rand und Schatten
   in jeder Buehne so stark sind wie auf Bildschirm 1. Auf blankem Schwarz sieht man den Effekt nicht, er wirkt ueber Foto, Linien und Licht.
   Seit 03.10. abends (Nutzer: Seiten uebersprungen, Scrollen nicht mehr fluessig): in den Buehnen nur Rand und die engen Schatten (2, 2, 6 px). Die weiten
   Schatten (30 und 80 px) rasterte Chrome in jedem Bild neu, waehrend sich die Grafiken zeichnen: Rasterzeit 1678 statt 82 ms ueber acht Wische, der
   Radstrom kam in Schueben und geste.js las die Luecken als neue Wische. Die vollen fuenf Schatten nur ueber den Fotos (Bildschirm 1, Schluss) */
.lp-frage,.lp-unter,.lp-slogan,.lp-frage3 .titel,.lp-ueber,.g2-kopf,.g2-leg b,.g3-frage .titel,.v3-name,.v3-kosten,.v3-marke,.g4-w,.dkb-kopf,.dkb-g,
.dkb-leg b,.f08-kopf,.f08-oos,.f08-ziel,.f08-eig,.f09-quote b,.f10-s>*,.f11-s>*,.lp-pin,.f12-name,.f12-zeile,.f13-name,.f13-zeile{
  -webkit-text-stroke:calc(var(--kp,1px) * 1.2) rgba(0,0,0,.7);paint-order:stroke fill;
  text-shadow:0 0 calc(var(--kp,1px) * 2) rgba(0,0,0,.9),0 0 calc(var(--kp,1px) * 2) rgba(0,0,0,.9),0 calc(var(--kp,1px) * 2) calc(var(--kp,1px) * 6) rgba(0,0,0,.9)}
.lp-frage,.lp-unter,.lp-slogan{text-shadow:0 0 2px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.9),0 8px 30px rgba(0,0,0,.8),0 0 80px rgba(0,0,0,.7)}

@media (max-width:1100px){
  :root{--kopf:172px}
  .lp-nav-in{flex-wrap:wrap;padding:14px 20px 14px;gap:12px}
  .lp-marke svg{width:40px;height:40px}
  .lp-wn{font-size:24px} .lp-wu{font-size:11.5px}
  .lp-nav .lp-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .lp-nav .lp-knoepfe .glas{justify-content:center;padding:0 10px;height:40px;font-size:14px}
  .lp-nav .lp-knoepfe .glas small{display:none}
  .lp-schluss .beat-in{padding:44svh 24px 8svh}   /* der Satz steht unter dem Schild des Fotos */
  .lp-slogan{white-space:normal;font-size:clamp(34px,8vw,64px);line-height:.98}
  /* Schlussfoto als Band oben bis zur Oberkante der Leiste (--sk aus seite.js), die Knoepfe stehen auf Schwarz wie die Karte auf Bildschirm 1 */
  .lp-schluss .lp-grund{bottom:auto;height:calc(var(--sk,70svh) + 12px)}
  .lp-schluss .lp-verlauf{background:linear-gradient(0deg,#000000 0,#000000 12px,rgba(0,0,0,.86) 16%,rgba(0,0,0,.3) 40%,rgba(0,0,0,0) 60%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 24%)}
  .lp-schluss .beat-in{min-height:0;justify-content:flex-start}
  .lp-reihe{position:static;width:100%;margin-top:40px}
  .lp-schluss .lp-licht{background:radial-gradient(ellipse 80vw 34svh at 50vw 52svh,rgba(255,255,255,.13),rgba(255,255,255,0) 70%)}
  .lp-schluss .lp-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
  .lp-schluss .lp-knoepfe .glas{font-size:20px;padding:16px 20px;min-width:0}
}
@media (max-width:700px){
  .lp-held{width:100vw}
  .lp-b1 .beat-in{grid-template-columns:minmax(0,1fr);align-content:start;row-gap:24px;padding:calc(var(--kopf) + 8px) 16px 24px}
  /* Foto nur hinter Kopf und Frage, bis zur Oberkante der Kanalkarte (--b1k aus masse() in seite.js), die Karte steht auf Schwarz */
  .lp-b1 .lp-grund{bottom:auto;height:calc(var(--b1k,56svh) + 12px)}
  .lp-b1 .lp-verlauf{background:linear-gradient(0deg,#000000 0,#000000 12px,rgba(0,0,0,.86) 16%,rgba(0,0,0,.3) 40%,rgba(0,0,0,0) 60%),
    linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 26%,rgba(0,0,0,0) 44%)}
  .lp-unter{margin-top:12px}
  .lp-zeile{gap:10px;margin-top:12px}
  .lp-avatar{width:36px;height:36px}
  .lp-titel{font-size:17px} .lp-meta{font-size:13px}
  .lp-schluss .lp-knoepfe{grid-template-columns:1fr}
  .lp-schluss .lp-knoepfe .glas{font-size:19px;padding:14px 20px}
}

/* Zoom (Nutzer 01.10.): Bedienschicht ueber der Buehne der Verlaufsgrafiken, in Bildschirmpixeln, erst nach der Bewegung (.an).
   Feld und Slider liegen in Prozent der Buehne (Geometrie aus DK.geo), Griffe und Knopf in Pixeln */
.lp-zoom{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity .4s ease;user-select:none;-webkit-user-select:none}
.lp-zoom.an{opacity:1;pointer-events:auto}
.lp-zoom-feld{position:absolute;cursor:crosshair;touch-action:none}
.lp-zoom-band{position:absolute;top:0;bottom:0;display:none;background:rgba(255,255,255,.07);border-left:1px solid rgba(255,255,255,.45);border-right:1px solid rgba(255,255,255,.45)}
.lp-zoom-nav{position:absolute;height:max(3.333%,18px);touch-action:none;border-radius:3px;background:rgba(255,255,255,.04)}
.lp-zoom-nav svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.lp-zoom-mini{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.lp-zoom-maske{position:absolute;top:0;bottom:0;left:0;background:rgba(0,0,0,.55)}
.lp-zoom-mitte{position:absolute;top:-1px;bottom:-1px;box-sizing:border-box;border-top:1px solid rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.4);cursor:grab}
.lp-zoom-mitte:active{cursor:grabbing}
.lp-zoom-griff{position:absolute;top:50%;width:10px;height:max(150%,22px);transform:translate(-50%,-50%);border-radius:5px;background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.4);cursor:ew-resize}
.lp-zoom-griff::after{content:"";position:absolute;left:3px;right:3px;top:32%;bottom:32%;border-left:1px solid rgba(0,0,0,.35);border-right:1px solid rgba(0,0,0,.35)}
.lp-zoom-zeit{position:absolute;top:calc(21.2% - 18px);display:flex;gap:6px}
.lp-zoom-zeit .glas{padding:8px 13px;font-size:14px;line-height:1.2;font-variant-numeric:tabular-nums}
.lp-zoomt .dkb-pflicht{top:972px;transition:top .4s ease}
@media (max-width:700px){
  .lp-zoom-zeit{top:0;gap:3px}   /* am Handy ueber dem Titel, die Legende laesst rechts keinen Platz */
  .lp-zoom-zeit .glas{padding:3px 6px;font-size:10px;min-height:0;height:auto}
}

/* Hover wie Highcharts (Nutzer 03.10. 17:15): auf jeder Verlaufsgrafik eine senkrechte Cursor Linie am naechsten Handelstag, je Linie ein Punkt und ein
   Feld mit Datum und den Werten aller Reihen (Prozent ab Fensterbeginn wie Achse und Legende, dazu der Drawdown), Maus und Finger. Liegt in
   der Zoom Schicht (.lp-zoom) und bei Folie 2 in einer eigenen Schicht (.lp-hov2), Linie und Punkte in Prozent der Buehne, das Feld in Pixeln */
.lp-hov{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .12s ease}
.lp-hov.an{opacity:1}
.lp-hov-linie{position:absolute;width:0;border-left:1px solid rgba(255,255,255,.6);margin-left:-.5px}
.lp-hov-pkt{position:absolute;width:9px;height:9px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 2px rgba(0,0,0,.75);transform:translate(-50%,-50%)}
.lp-hov-pkt[data-k="M"]{background:#8B929B}
.lp-hov-dd[data-k="M"]{background:rgba(224,72,44,.95)}
.lp-hov-feld{position:absolute;padding:8px 11px 9px;border-radius:8px;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#FFFFFF;font-size:13px;line-height:1.35;white-space:nowrap;font-variant-numeric:tabular-nums}
.lp-hov-datum{font-weight:700;margin-bottom:4px}
.lp-hov-feld table{border-collapse:collapse}
.lp-hov-feld th{font-weight:400;color:rgba(255,255,255,.55);font-size:11px;text-align:right;padding:0 0 1px 14px}
.lp-hov-feld td{padding:1px 0 0 14px;text-align:right}
.lp-hov-feld td:first-child,.lp-hov-feld th:first-child{padding-left:0;text-align:left}
.lp-hov-feld tr[data-k="M"] td{color:#8B929B}
.lp-hov-feld tr[data-k="M"] td.dd{color:rgba(224,72,44,.95)}
.lp-hov-feld em{display:inline-block;width:18px;height:0;border-top:3px solid #FFFFFF;vertical-align:middle;margin:-2px 7px 0 0;font-style:normal}
.lp-hov-feld tr[data-k="M"] em{border-top:2px dashed #6B7280}
.lp-hov2{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity .4s ease;user-select:none;-webkit-user-select:none}
.lp-hov2.an{opacity:1}
.lp-hov2.an .lp-hov2-feld{position:absolute;pointer-events:auto;cursor:crosshair;touch-action:none}
.lp-hov2 .lp-hov-pkt{background:var(--hk)}
.lp-hov2 .lp-hov-feld td{color:var(--hk)}
.lp-hov2 .lp-hov-feld em{border-top:3px solid var(--hk)}
.lp-hov2 .lp-hov-feld tr[data-k="aktien"] em{border-top-style:dashed;border-top-width:2.6px}
.lp-hov2 .lp-hov-feld tr[data-k="anleihen"] em{border-top-style:dotted}
@media (max-width:700px){
  .lp-hov-feld{font-size:9.5px;line-height:1.25;padding:3px 6px 4px;border-radius:5px}   /* am Handy so klein wie lesbar, das Feld deckt sonst die halbe Grafik */
  .lp-hov-feld th{font-size:8px;padding-left:7px} .lp-hov-feld td{padding-left:7px;padding-top:0} .lp-hov-datum{margin-bottom:1px}
  .lp-hov-pkt{width:7px;height:7px;box-shadow:0 0 0 1.5px rgba(0,0,0,.75)} .lp-hov-feld em{width:11px;margin-right:4px;border-top-width:2px}
}

/* Portraet (Nutzer 01.10.): Trefferflaechen ueber den vier Bildern der Absenderfolie, Bedienschicht in .rahmen16 wie der Zoom, Masse in
   Prozent der Buehne aus den Storyboard Regeln, erst nach der Bewegung (.an). Rundung wie das Bild (22 Buehnenpixel, in cqw der Schicht).
   Klick zeigt das Bild allein auf der Buehne wie die Fotos der Ueber uns Seite (about.html .lb) */
.lp-fotos{position:absolute;inset:0;z-index:4;pointer-events:none;container-type:size}
.lp-fotos.an .lp-foto{pointer-events:auto}
.lp-foto{position:absolute;display:block;margin:0;padding:0;border:0;appearance:none;background:transparent;cursor:zoom-in;border-radius:calc(22cqw * 100 / 1920);
  box-shadow:inset 0 0 0 0 rgba(255,255,255,0);transition:box-shadow .2s ease,background .2s ease;-webkit-tap-highlight-color:transparent}
.lp-foto.lp-kreis{border-radius:50%}
.lp-foto:hover,.lp-foto:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);background:rgba(255,255,255,.05);outline:none}
.lp-lb{position:fixed;inset:0;z-index:100;background:rgba(6,6,6,.94);display:flex;align-items:center;justify-content:center;padding:4vh 4vw;box-sizing:border-box;
  cursor:zoom-out;opacity:0;transition:opacity .28s}
.lp-lb.da{opacity:1}
.lp-lb[hidden]{display:none}
.lp-lb img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 30px 120px rgba(0,0,0,.8)}