/* =====================================================================
   landing.css - nur fuer pv-anlage.html (Beratungs-Landingpage).
   Bewusst eine eigene Datei: Eine Aenderung an stil.css erzwingt neue
   Versionskennungen auf allen Seiten, eine Aenderung hier betrifft nur
   diese eine. Laedt NACH stil.css und pv/pv.css.
   ===================================================================== */

/* ---- Hero: warme Verfaerbung rechts oben ----------------------------
   KEIN gezeichnetes Sonnensymbol und keine Strahlen - nur ein weicher
   Farbklecks, der aus der oberen rechten Ecke in den dunklen Hero
   hineinlaeuft und sich symbolisch als Sonne lesen laesst. Robins Vorgabe
   vom 18.09.2026. Damit nirgends eine Kante oder eine Scheibe sichtbar
   wird, liegt der dichteste Punkt weit ausserhalb der Ecke, das Element
   ist rechteckig (border-radius aus pv.css zuruecknehmen) und der Verlauf
   ist lange vor dem Elementrand vollstaendig durchsichtig. Er wandert
   beim Scrollen minimal mit (--sy, Skript am Seitenende). */
.pv-hero{--sy:0px}
.pv-hero::after{
  right:-300px;top:-330px;width:1020px;height:880px;border-radius:0;
  background:
    /* etwas hellerer Kern - dadurch liest sich der Fleck als Sonne,
       ohne dass irgendwo eine Scheibe oder Kante entsteht */
    radial-gradient(ellipse 33% 34% at 61% 45%,
      rgba(255,199,116,.32) 0%,
      rgba(243,178,84,.15) 44%,
      transparent 76%),
    /* der breite warme Grundverlauf darunter */
    radial-gradient(ellipse 58% 60% at 54% 52%,
      rgba(232,163,61,.30) 0%,
      rgba(232,163,61,.19) 28%,
      rgba(230,150,55,.09) 50%,
      rgba(224,138,48,.03) 68%,
      transparent 84%);
  transform:translate3d(0,var(--sy),0);
  will-change:transform;
}
@media(max-width:700px){
  .pv-hero::after{right:-380px;top:-390px;width:900px;height:800px}
}
@media(prefers-reduced-motion:reduce){
  .pv-hero::after{transform:none}
}

/* ---- Hero: laengere Ueberschrift als beim alten Rechner-Hero,
   und bewusst mehr Luft zwischen Ueberschrift und Unterzeile -
   Robins Vorgabe vom 18.09.2026: das Layout soll clean wirken. ---- */
.pv-hero h1{max-width:34ch;margin-bottom:30px}
.pv-hero .eyebrow{margin-bottom:22px}
/* Unter 430px braucht die H1 einen kleineren Schriftboden, sonst steht
   "Familienbetrieb" randlos an der Kante (gemessen bei 375px Breite). */
@media(max-width:430px){
  .pv-hero h1{font-size:clamp(1.6rem,7vw,2.1rem);margin-bottom:24px}
}
/* Erster Satz der Unterzeile als eigene, weisse Zeile */
.pv-hero .lead strong{display:block;color:#fff;font-weight:600;margin-bottom:10px}

/* =====================================================================
   Preisboxen "Unser unschlagbares PV-Angebot"
   ===================================================================== */

/* Das Wort "unschlagbares" schlaegt wie ein Stempel in die Ueberschrift ein:
   Es kommt gross und leicht gedreht von oben, klatscht mit kurzem Ueberschwung
   auf seine Endlage - danach zeichnet sich die cleane goldene Unterstreichung
   von links nach rechts. Beides haengt am .da der .huepf-Ueberschrift. */
.unterstrich{position:relative;display:inline-block}
.js .huepf .unterstrich{opacity:0}
.js .huepf.da .unterstrich{animation:wortschlag .5s cubic-bezier(.2,1.05,.3,1) .55s both}
@keyframes wortschlag{
  0%{opacity:0;transform:scale(2.5) rotate(-6deg)}
  55%{opacity:1;transform:scale(.9) rotate(1.5deg)}
  75%{transform:scale(1.06) rotate(-.6deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.unterstrich::after{content:"";position:absolute;left:1%;right:1%;bottom:.02em;height:.12em;
  background:var(--sonne);border-radius:99px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .8s cubic-bezier(.4,0,.2,1) 1.15s}
.js .huepf.da .unterstrich::after{transform:scaleX(1)}
html:not(.js) .unterstrich::after{transform:scaleX(1)}

/* Schalter-Reihe: Speicher / Wallbox dazu */
.schalter-reihe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:6px 0 14px}
/* Erklaerung unter den Schaltern - nur der Geruest-Abzug braucht einen Satz,
   weil er als einziger Schalter etwas abzieht statt etwas hinzuzurechnen. */
.schalter-fein{max-width:62ch;margin:0 auto 32px;text-align:center;
  font-size:.82rem;line-height:1.6;color:var(--muted)}
.schalter{display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 20px 11px 13px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.02em;
  color:var(--text);user-select:none;transition:border-color .25s,box-shadow .25s,background .25s}
.schalter:hover{border-color:var(--sonne)}
.schalter input{position:absolute;opacity:0;pointer-events:none}
.sch-bahn{flex:0 0 auto;width:44px;height:24px;border-radius:999px;background:#DDD8CC;
  position:relative;transition:background .25s}
.sch-bahn::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:transform .25s cubic-bezier(.22,1,.36,1)}
.schalter input:checked ~ .sch-bahn{background:var(--sonne)}
.schalter input:checked ~ .sch-bahn::after{transform:translateX(20px)}
.schalter input:checked ~ .sch-wort{color:var(--sonne-dk)}
.schalter input:focus-visible ~ .sch-bahn{outline:2px solid var(--olive);outline-offset:2px}
.sch-fein{font-family:'Poppins',sans-serif;font-weight:400;color:var(--muted);
  font-size:.78rem;letter-spacing:0;text-transform:none}

/* Die drei Karten */
.pk-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(264px,100%),1fr));
  gap:18px;align-items:stretch}
.pk{position:relative;min-width:0;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:30px 26px 26px;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.pk:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(16,14,24,.12);
  border-color:var(--sonne)}
.pk-name{margin:0 0 2px;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pk-kwp{margin:0 0 18px;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:1.06rem;color:var(--text)}
.pk-preis{margin:0;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(1.7rem,2.6vw,2.15rem);color:var(--text);line-height:1.1;
  font-variant-numeric:tabular-nums}
.pk-einheit{margin:4px 0 18px;font-size:.78rem;color:var(--muted)}
.pk-punkte{list-style:none;margin:0 0 22px;padding:16px 0 0;border-top:1px solid var(--line);
  flex:1 1 auto}
.pk-punkte li{position:relative;padding-left:26px;margin-bottom:9px;font-size:.9rem;
  line-height:1.5;color:#3A3A36}
.pk-punkte li::before{content:"";position:absolute;left:0;top:.34em;width:15px;height:15px;
  border-radius:50%;background:var(--sonne);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat}
.pk .btn{width:100%;text-align:center;justify-content:center}

/* Mittlere Karte hervorgehoben */
.pk-mitte{border:2px solid var(--sonne);box-shadow:0 14px 38px rgba(201,130,27,.16)}
.pk-fahne{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--sonne);color:var(--ink);border-radius:999px;padding:6px 15px;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase}

/* Preiswechsel kurz aufblitzen lassen */
.pk-preis.tick{animation:preisTick .45s ease}
@keyframes preisTick{0%{transform:scale(1)}35%{transform:scale(1.07);color:var(--sonne-dk)}100%{transform:scale(1)}}

.pk-fuss{margin:24px auto 0;max-width:96ch;text-align:center;font-size:.74rem;
  color:var(--muted);line-height:1.75;opacity:.9}

/* ---- Marvin-Abschnitt unter den Preisen -----------------------------
   Bewusst OHNE Kasten: kein Hintergrund, kein Rahmen, kein Innenabstand -
   der Abschnitt steht frei auf der Seite. Robins Vorgabe vom 18.09.2026
   mit Vorlage aus der Immobilien-Seite: links das runde Portrait mit Name
   und Rolle daneben, rechts eine grosse goldene Aussage und darunter der
   Text. Nicht wieder in eine Karte setzen. */
/* Der Handlungsaufruf steht bewusst IN der Textspalte, nicht mittig unter
   dem ganzen Block: mittig sass er unter der Luecke zwischen Portrait und
   Text und wirkte angeflanscht (Robin, 18.09.2026). Weil die Textspalte
   dadurch hoeher wird als das Portrait, richten sich beide Spalten oben aus. */
.mv{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);
  gap:26px 52px;align-items:start;max-width:1060px;margin:76px auto 0}
.mv-person{display:flex;align-items:center;gap:24px;min-width:0;padding-top:4px}
.mv-person img{flex:0 0 auto;width:164px;height:164px;border-radius:50%;
  object-fit:cover;object-position:center;display:block}
.mv-txt{min-width:0}
.mv-txt p{margin:0 0 12px;font-size:1rem;line-height:1.7;color:#3A3A36}
.mv-txt p:last-child{margin-bottom:0}
.mv-txt .mv-cta{margin:28px 0 0}
.mv-txt .mv-hint{margin:12px 0 0;font-size:.82rem;line-height:1.55;color:var(--muted)}
/* Die Aussage muss .mv-txt p schlagen - deshalb bewusst zweistufig
   geschrieben, sonst gewinnt die Absatzregel darueber. */
.mv-txt .mv-zitat{font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(1.45rem,2.9vw,2.25rem);line-height:1.16;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--sonne-dk);margin:0 0 22px;hyphens:auto}
.mv-name{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.05rem;
  color:var(--text);margin:0!important;line-height:1.3}
.mv-rolle{font-size:.86rem;color:var(--muted);margin:5px 0 0!important}
/* Pressehinweis klein unter dem Portrait (08.10.2026, Robin: "wenn man ihn das erste
   mal auf der Seite sieht"). Wortlaut "Veroeffentlicht bei", nie "Bekannt aus" -
   Begruendung in presse.css. Steht als volle Zeile in .mv-person (flex-wrap). */
.mv-person{flex-wrap:wrap;row-gap:14px}
.mv-presse{flex:1 1 100%;display:flex;align-items:center;justify-content:flex-start;gap:7px;
  font-size:.8rem;line-height:1.45;color:var(--muted);text-decoration:none}
.mv-presse b{color:var(--text);font-weight:700}
.mv-presse svg{flex:0 0 auto}
.mv-presse-ico{width:1.15em;height:1.15em;color:var(--sonne-dk)}
.mv-presse-raus{width:.85em;height:.85em;color:var(--olive);transition:transform .2s ease}
.mv-presse:hover span{text-decoration:underline;text-underline-offset:3px}
.mv-presse:hover .mv-presse-raus{transform:translate(2px,-2px)}
/* Das Portrait kommt mit einem kleinen Ueberschwung herein, sobald der
   Abschnitt sichtbar wird - haengt am .da der umgebenden .anim-Einheit. */
.js .mv img{opacity:0;transform:scale(.86)}
.js .mv.da img{opacity:1;transform:scale(1);
  transition:transform .7s cubic-bezier(.34,1.56,.64,1) .12s,opacity .5s ease .12s}
@media(max-width:900px){
  /* Auf dem Handy bleibt der Textblock linksbuendig - mittig gesetzte
     Absaetze ueber fuenf Zeilen lesen sich unruhig. */
  .mv{grid-template-columns:1fr;gap:22px;margin-top:56px;text-align:left}
}
@media(max-width:480px){
  .mv-person{gap:16px}
  .mv-person img{width:108px;height:108px}
}
@media(prefers-reduced-motion:reduce){
  .js .mv img{opacity:1;transform:none}
}

/* =====================================================================
   Vergleichstabelle "Wir gegen den typischen Anbieter"
   ===================================================================== */
.vs{max-width:1060px;margin:0 auto;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;background:#fff}
.vs-kopf{display:grid;grid-template-columns:150px 1fr 1fr;background:var(--ink)}
.vs-kopf span{padding:16px 22px;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.vs-kopf .vs-wir-k{color:var(--sonne)}
.vs-zeile{display:grid;grid-template-columns:150px 1fr 1fr;border-top:1px solid var(--line)}
.vs-zeile:first-of-type{border-top:0}
.vs-was{padding:20px 22px;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  line-height:1.45;min-width:0;hyphens:auto}
.vs-wir,.vs-and{display:flex;gap:12px;align-items:flex-start;padding:20px 22px;min-width:0}
.vs-wir{background:#FCF7EC;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.vs-wir svg,.vs-and svg{flex:0 0 auto;width:19px;height:19px;margin-top:2px}
.vs-wir svg{fill:var(--sonne-dk)}
.vs-and svg{fill:#B9B2A4}
.vs-wir p,.vs-and p{margin:0;font-size:.92rem;line-height:1.6;min-width:0}
.vs-wir p{color:#33301F}
.vs-wir p b{color:var(--text)}
.vs-and p{color:var(--muted)}

/* Zeilen gestaffelt hereinlaufen lassen */
.js .vs-zeile.anim:nth-child(2){transition-delay:.05s}
.js .vs-zeile.anim:nth-child(3){transition-delay:.1s}
.js .vs-zeile.anim:nth-child(4){transition-delay:.15s}
.js .vs-zeile.anim:nth-child(5){transition-delay:.2s}

.vs-fuss{margin:18px auto 0;max-width:86ch;text-align:center;font-size:.8rem;
  color:var(--muted);line-height:1.7}

@media(max-width:840px){
  .vs-kopf{display:none}
  .vs-zeile{grid-template-columns:1fr}
  .vs-was{padding:18px 20px 4px;font-size:.72rem}
  .vs-wir{border-left:0;border-right:0}
  .vs-wir::before,.vs-and::before{display:none}
  .vs-wir,.vs-and{padding:14px 20px}
  .vs-and{padding-top:0;padding-bottom:20px}
  .vs-wir{margin:0 12px;border:1px solid rgba(201,130,27,.35);border-radius:12px}
  .vs-and{margin:10px 12px 16px;padding:0 10px}
}

/* Hopser fuer die grossen Ueberschriften - Muster aus ablauf.css */
.js .huepf{opacity:0;transform:translateY(46px)}
.js .huepf.da{opacity:1;transform:none;
  transition:opacity .55s ease,transform .9s cubic-bezier(.34,1.56,.64,1)}

/* =====================================================================
   Beratungs-Abschnitt mit Formular (dunkel, Formular als helle Karte)
   ===================================================================== */
.ber-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;margin-top:8px}
.ber-txt h2{color:#fff}
.ber-txt .lead{color:rgba(255,255,255,.78)}
.ber-txt p{color:rgba(255,255,255,.78)}
.ber-txt p strong{color:#fff}
/* Das Telefon ist eine echte Alternative zum Formular - deshalb gross. */
.ber-tel{display:inline-flex;align-items:center;gap:.5em;margin-top:10px;
  color:#fff;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em;
  text-decoration:none;border-bottom:3px solid var(--sonne);padding-bottom:4px}
.ber-tel svg{width:24px;height:24px;fill:var(--sonne);flex:0 0 auto}
.ber-tel:hover{color:var(--sonne)}
.ber-tel-hin{font-size:.95rem;color:rgba(255,255,255,.75)!important;margin:28px 0 0!important}
.ber-form{background:#fff;border-radius:18px;padding:32px 30px;min-width:0}
.ber-form h3{font-size:1.15rem;margin:0 0 18px}
.ber-form .btn{background:var(--sonne);color:var(--ink)}
.ber-form .btn:hover{background:var(--sonne-dk);color:#fff}
.ber-wahl{display:none;margin:0 0 16px;padding:11px 14px;border-radius:10px;
  background:#FCF7EC;border:1px solid rgba(201,130,27,.4);font-size:.84rem;color:#33301F}
.ber-wahl.auf{display:block}
.ber-fehler{display:none;margin:0 0 18px;padding:13px 16px;border-radius:10px;
  background:#FDECEA;border:1px solid #E5B4AC;color:#7A2E22;font-size:.88rem;line-height:1.55}
.ber-fehler.auf{display:block}
@media(max-width:900px){
  .ber-grid{grid-template-columns:1fr;gap:34px}
}

/* Karten und Kinder duerfen auf dem Handy nicht ueberlaufen */
.pk,.vs-wir,.vs-and,.mv,.ber-form{min-width:0}
@media(max-width:560px){
  .schalter{padding:10px 16px 10px 11px}
}

@media(prefers-reduced-motion:reduce){
  .js .huepf{opacity:1;transform:none}
  .js .huepf .unterstrich{opacity:1;animation:none}
  .unterstrich::after{transform:scaleX(1);transition:none}
  .pk,.pk:hover{transform:none;transition:none}
  .pk-preis.tick{animation:none}
  .sch-bahn::after{transition:none}
}

/* ---- Versprechen: "Uns gibt es auch in 20 Jahren noch" (01.10.2026) ----
   Dunkler Zitatkasten als eigener Mini-Abschnitt unter "Ueber uns".
   Robin wollte ihn ausdruecklich als Kasten und "recht fancy" animiert.
   Alle Startzustaende haengen an .js .bleib:not(.los) - ohne JavaScript
   steht der fertige Zustand da. Der Ausloeser steht im Skript am Seitenende. */
.bleib-sec{padding-top:24px}
.bleib{position:relative;overflow:hidden;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;
  background:var(--ink);color:#fff;border-radius:28px;padding:58px 56px;
  box-shadow:0 30px 70px rgba(16,14,24,.22)}
.bleib::before{content:"";position:absolute;z-index:-1;right:-180px;top:-200px;width:560px;height:560px;
  border-radius:50%;background:radial-gradient(circle,rgba(232,163,61,.30),rgba(232,163,61,0) 65%)}
.bleib::after{content:"";position:absolute;z-index:-1;left:-160px;bottom:-240px;width:480px;height:480px;
  border-radius:50%;background:radial-gradient(circle,rgba(116,117,70,.35),rgba(116,117,70,0) 65%)}
.bleib-links,.bleib-rechts{position:relative;min-width:0}
.bleib-zeichen{display:block;width:62px;height:auto;fill:var(--sonne);margin-bottom:22px}
.bleib-eyebrow{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sonne)!important;margin:0 0 14px!important}
.bleib-zitat{margin:0}
.bleib-zitat > p{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.12;color:#fff!important;margin:0 0 30px!important}
.bleib-zitat .w{display:inline-block}
.bleib-20{position:relative;white-space:nowrap;color:var(--sonne);margin-right:.12em}
.bleib-zahl{display:inline-block;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.bleib-kreis{position:absolute;left:-6%;top:-12%;width:112%;height:124%;overflow:visible;pointer-events:none}
.bleib-kreis ellipse{fill:none;stroke:var(--sonne);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.bleib-wer{display:flex;align-items:center;gap:14px}
.bleib-wer img{width:56px;height:56px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--sonne)}
.bleib-wer b{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.95rem;color:#fff}
.bleib-wer i{display:block;font-style:normal;font-size:.84rem;color:rgba(255,255,255,.62)}
.bleib-warum{font-size:1.02rem;line-height:1.65;color:rgba(255,255,255,.78)!important;margin:0 0 26px!important}
.bleib-warum strong{color:#fff}
.bleib-punkte{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:18px}
.bleib-punkte li{display:flex;gap:16px;align-items:flex-start;min-width:0}
.bleib-ico{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(232,163,61,.14);border:1px solid rgba(232,163,61,.35)}
.bleib-ico svg{width:22px;height:22px;fill:var(--sonne)}
.bleib-punkte li > span:last-child{font-size:.93rem;line-height:1.55;color:rgba(255,255,255,.72);hyphens:auto}
.bleib-punkte b{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:.98rem;
  color:#fff;margin-bottom:3px}
.bleib-glanz{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 62%);
  transform:translateX(-120%)}

/* -- Startzustaende (nur mit JavaScript, solange .los fehlt) -- */
.js .bleib:not(.los){opacity:0;transform:perspective(1400px) rotateX(16deg) translateY(70px) scale(.94);filter:blur(6px)}
.js .bleib:not(.los) .bleib-zeichen{opacity:0;transform:scale(.2) rotate(-35deg)}
.js .bleib:not(.los) .bleib-eyebrow{opacity:0;letter-spacing:.5em}
.js .bleib:not(.los) .w{opacity:0;transform:translateY(.7em) rotate(5deg);filter:blur(5px)}
.js .bleib:not(.los) .bleib-kreis ellipse{stroke-dashoffset:100}
.js .bleib:not(.los) .bleib-wer{opacity:0;transform:translateX(-30px)}
.js .bleib:not(.los) .bleib-warum{opacity:0;transform:translateY(24px)}
.js .bleib:not(.los) .bleib-punkte li{opacity:0;transform:translateX(50px) rotate(2deg)}
.js .bleib:not(.los) .bleib-ico{transform:scale(0) rotate(-180deg)}
.js .bleib:not(.los) .bleib-knopf{opacity:0;transform:scale(.6)}

/* -- Ablauf, sobald .los gesetzt ist -- */
.js .bleib{transition:opacity .9s ease,transform 1.15s cubic-bezier(.16,1,.3,1),filter .9s ease}
.js .bleib .bleib-zeichen{transition:opacity .5s ease .35s,transform .9s cubic-bezier(.34,1.7,.5,1) .35s}
.js .bleib .bleib-eyebrow{transition:opacity .6s ease .45s,letter-spacing .9s cubic-bezier(.16,1,.3,1) .45s}
.js .bleib .w{transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.5,.5,1),filter .5s ease;
  transition-delay:calc(.6s + var(--i)*.09s)}
.js .bleib .bleib-kreis ellipse{transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) 2.15s}
.js .bleib .bleib-wer{transition:opacity .6s ease 1.5s,transform .8s cubic-bezier(.16,1,.3,1) 1.5s}
.js .bleib .bleib-warum{transition:opacity .7s ease 1.1s,transform .8s cubic-bezier(.16,1,.3,1) 1.1s}
.js .bleib .bleib-punkte li{transition:opacity .5s ease,transform .8s cubic-bezier(.34,1.45,.5,1);
  transition-delay:calc(1.35s + var(--i)*.16s)}
.js .bleib .bleib-ico{transition:transform .8s cubic-bezier(.34,1.7,.5,1);transition-delay:calc(1.5s + var(--i)*.16s)}
.js .bleib .bleib-knopf{transition:opacity .4s ease 2.3s,transform .7s cubic-bezier(.34,1.7,.5,1) 2.3s}
.js .bleib.los .bleib-glanz{animation:bleibGlanz 1.4s cubic-bezier(.45,0,.2,1) 1.7s 1 both}
.js .bleib.los::before{animation:bleibSchein 9s ease-in-out 2.5s infinite alternate}
@keyframes bleibGlanz{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes bleibSchein{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,40px) scale(1.15)}}

@media(max-width:900px){
  .bleib{grid-template-columns:1fr;gap:34px;padding:44px 28px;border-radius:22px}
  .bleib-zeichen{width:48px;margin-bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  .js .bleib,.js .bleib *{transition:none!important;animation:none!important}
  .js .bleib:not(.los),.js .bleib:not(.los) *{opacity:1!important;transform:none!important;filter:none!important}
}