/* ==========================================================
   ekd.css – Bausteine der Beitraege zur EKD-Insolvenz
   (wissen-ekd-insolvenz.html, wissen-ekd-anlage-nicht-fertig.html,
   spaeter wissen-pv-anbieter-pleite-erkennen.html)
   Eigene Datei statt stil.css: eine Aenderung an stil.css erzwingt neue
   Versionskennungen auf allen Seiten, eine Aenderung hier nur auf diesen.
   Das Blogdesign (.bt-*) bleibt unangetastet.
   ========================================================== */

/* ---- Stand-Kasten ganz oben: datiert, laufend aktualisiert ---- */
.ekd-stand{position:relative;background:#FBF3EC;border-left:4px solid #C97B3F;
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px 20px 24px;margin:0 0 34px}
.ekd-stand .ekd-stand-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 10px}
.ekd-stand .ekd-stand-kopf b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:#A75F27}
.ekd-stand .ekd-live{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;
  font-weight:600;color:#A75F27}
.ekd-stand .ekd-live::before{content:"";width:9px;height:9px;border-radius:50%;
  background:#C97B3F;animation:ekdBlink 1.8s ease-in-out infinite}
@keyframes ekdBlink{0%,100%{opacity:1}50%{opacity:.25}}
.ekd-stand p{margin:0 0 .6em;color:var(--text)}
.ekd-stand p:last-child{margin-bottom:0}
.ekd-stand ul{margin:.3em 0 .6em;padding-left:20px}
.ekd-stand li{margin-bottom:5px}

/* Auf dem Handy enger gesetzt: Der Kasten ist Begleitinformation, die Kurzantwort
   darunter soll ohne langes Scrollen erreichbar sein (Beitrag 4b, 02.10.2026). */
@media(max-width:600px){
  .ekd-stand{padding:16px 18px;margin-bottom:26px}
  .bt-inhalt .ekd-stand ul{line-height:1.55;margin:.2em 0 .5em;padding-left:18px}
  .ekd-stand li,.bt-inhalt .ekd-stand p{font-size:.88rem;line-height:1.55}
  .ekd-stand li{margin-bottom:6px}
  .bt-inhalt .ekd-kurz p,.ekd-kurz li{line-height:1.6}
  .ekd-kurz ol{padding-left:20px}
}

/* Einklappbarer Teil des Stand-Kastens (4a/4b): am Computer immer offen, ohne Schalter */
.ekd-stand-mehr > summary{cursor:pointer;font-weight:600;font-size:.86rem;color:#A75F27;margin:2px 0 8px}
.ekd-stand-mehr[open] > summary{margin-bottom:6px}
.bt-inhalt .ekd-stand p.ekd-stand-hinweis{font-size:.86rem;color:var(--muted);margin-top:8px}
@media(min-width:601px){.ekd-stand-mehr > summary{display:none}}

/* ---- Grosser Telefon- und Beratungskasten im Beitrag ---- */
.ekd-ruf{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  border-radius:var(--r);padding:34px 34px 32px;margin:36px 0 40px}
.ekd-ruf::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;
  border-radius:50%;background:rgba(232,163,61,.12);pointer-events:none}
.ekd-ruf > *{position:relative;z-index:1}
.ekd-ruf .ekd-ruf-titel{display:block;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:1.3rem;line-height:1.3;letter-spacing:-.02em;color:#fff;margin:0 0 14px}
.ekd-ruf p{color:rgba(255,255,255,.78)!important;margin:0 0 20px;max-width:58ch}
.ekd-ruf .ekd-ruf-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.bt-inhalt .ekd-ruf a.ekd-tel{display:inline-flex;align-items:center;gap:.45em;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(1.6rem,5.4vw,2.2rem);
  letter-spacing:-.02em;color:#fff;text-decoration:none;white-space:nowrap;background:none}
.bt-inhalt .ekd-ruf a.ekd-tel:hover{color:var(--sonne,#E8A33D)}
.ekd-ruf a.ekd-tel svg{width:1em;height:1em;fill:var(--sonne,#E8A33D);flex:0 0 auto}
.ekd-ruf .ekd-ruf-zeit{display:block;font-size:.84rem;color:rgba(255,255,255,.6);margin-top:4px}

.ekd-ruf .btn{flex:0 0 auto}
@media(max-width:520px){
  .ekd-ruf{padding:28px 22px 26px}
  .ekd-ruf .ekd-ruf-zeile{flex-direction:column;align-items:stretch}
  .ekd-ruf .btn{width:100%;text-align:center}

}

/* ---- Wegweiser: vier Lagen, je eine Karte ---- */
.ekd-weg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:16px;margin:24px 0 30px}
.ekd-weg-karte{min-width:0;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ekd-weg-karte:hover{transform:translateY(-4px);border-color:var(--olive);
  box-shadow:0 16px 34px rgba(16,14,24,.09)}
.ekd-weg-karte .ekd-weg-nr{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--olive);margin:0 0 8px}
.ekd-weg-karte h3{font-size:1.04rem;line-height:1.3;margin:0 0 10px;hyphens:auto}
.ekd-weg-karte p{font-size:.92rem;line-height:1.6;color:var(--muted);margin:0 0 14px;hyphens:auto}
.bt-inhalt .ekd-weg-karte a{margin-top:auto;font-weight:700;font-size:.9rem}

/* ---- Gegenueberstellung Gewaehrleistung / Herstellergarantie ---- */
.ekd-vgl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:16px;margin:22px 0 28px}
.ekd-vgl > div{min-width:0;border-radius:var(--r);padding:22px 22px 18px;background:var(--paper)}
.ekd-vgl > div.ekd-vgl-gut{background:var(--olive-wash)}
.ekd-vgl > div.ekd-vgl-weg{background:#FBF3EC}
.ekd-vgl h3{font-size:1.02rem;margin:0 0 4px}
.ekd-vgl .ekd-vgl-wer{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin:0 0 12px}
.ekd-vgl ul{margin:0;padding-left:18px}
.ekd-vgl li{font-size:.92rem;line-height:1.55;margin-bottom:7px;hyphens:auto}
.ekd-vgl .ekd-vgl-fazit{display:block;margin-top:12px;font-family:'Montserrat',sans-serif;
  font-weight:800;font-size:.86rem}
.ekd-vgl-weg .ekd-vgl-fazit{color:#A75F27}
.ekd-vgl-gut .ekd-vgl-fazit{color:var(--olive-dk)}

/* ---- Abhakliste ---- */
.ekd-liste{list-style:none;padding:0;margin:18px 0 26px}
.ekd-liste li{position:relative;padding:12px 0 12px 40px;border-bottom:1px solid var(--line);
  line-height:1.55}
.ekd-liste li:last-child{border-bottom:0}
.ekd-liste li::before{content:"";position:absolute;left:0;top:13px;width:24px;height:24px;
  border-radius:7px;border:2px solid var(--olive);background:#fff}
.ekd-liste li::after{content:"";position:absolute;left:8px;top:17px;width:7px;height:12px;
  border-right:2.5px solid var(--olive);border-bottom:2.5px solid var(--olive);
  transform:rotate(45deg)}

/* Nummerierte Variante (Schritte in fester Reihenfolge): Zahl statt Haken */
.ekd-liste.nummern{counter-reset:ekdn}
.ekd-liste.nummern li{counter-increment:ekdn}
.ekd-liste.nummern li::before{content:counter(ekdn);display:grid;place-items:center;border:0;
  border-radius:50%;background:var(--olive);color:#fff;font-family:'Montserrat',sans-serif;
  font-weight:800;font-size:.78rem;line-height:1}
.ekd-liste.nummern li::after{content:none}

/* ---- Zitat einer Aussage, frei stehend ohne Kasten ---- */
.ekd-aussage{margin:34px 0 34px;padding:0 0 0 22px;border-left:3px solid var(--sonne,#E8A33D)}
.ekd-aussage p{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.18rem;
  line-height:1.45;letter-spacing:-.02em;color:var(--ink);margin:0}

/* ---- FAQ im Beitrag: das Akkordeon .faq/.q aus stil.css, nur enger ---- */
.bt-inhalt .faq{margin:10px 0 30px;max-width:none}
.bt-inhalt .q button{font-size:.98rem;padding:20px 40px 20px 0}
.bt-inhalt .q .a p{font-size:.95rem}

/* ---- Huepfender Auftritt (gleiche Kurve wie in ablauf.css) ---- */
.js .huepf{opacity:0;transform:translateY(46px)}
.js .huepf.da{opacity:1;transform:none;
  transition:opacity .4s ease,transform .82s cubic-bezier(.34,1.56,.64,1)}

@media(prefers-reduced-motion:reduce){
  .js .huepf{opacity:1;transform:none;transition:none}
  .ekd-stand .ekd-live::before{animation:none}
  .ekd-weg-karte{transition:none}
}

/* ---- Anbieter-Check (wissen-pv-anbieter-pleite-erkennen.html) ----
   Acht Fragen mit Ja/Nein/Weiss nicht, Ergebnis rechnet nur im Browser. */
.ekd-check{background:var(--paper);border-radius:var(--r);padding:12px 24px 24px;margin:22px 0 30px}
.ekd-frage{min-width:0;padding:18px 0;border-bottom:1px solid var(--line)}
.ekd-frage-text{margin:0 0 12px!important;font-weight:600;color:var(--ink);line-height:1.5;hyphens:auto}
.ekd-frage-text b{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;
  border-radius:50%;background:var(--olive);color:#fff;font-family:'Montserrat',sans-serif;
  font-size:.78rem;vertical-align:1px}
.ekd-wahl{display:flex;flex-wrap:wrap;gap:8px}
.ekd-wahl label{position:relative;cursor:pointer}
.ekd-wahl input{position:absolute;opacity:0;pointer-events:none}
.ekd-wahl span{display:inline-block;padding:9px 18px;border:1.5px solid var(--line);border-radius:999px;
  background:#fff;font-size:.88rem;font-weight:600;color:var(--text);transition:all .2s ease}
.ekd-wahl label:hover span{border-color:var(--olive)}
.ekd-wahl input:focus-visible + span{outline:2px solid var(--olive);outline-offset:2px}
.ekd-wahl input[value="ja"]:checked + span{background:var(--olive);border-color:var(--olive);color:#fff}
.ekd-wahl input[value="nein"]:checked + span{background:#C97B3F;border-color:#C97B3F;color:#fff}
.ekd-wahl input[value="unklar"]:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.ekd-ergebnis{margin-top:22px;background:#fff;border-radius:var(--r);padding:22px 22px 18px;
  border:2px solid var(--line);transition:border-color .3s ease}
.ekd-ergebnis.gut{border-color:var(--olive)}
.ekd-ergebnis.mittel{border-color:var(--sonne,#E8A33D)}
.ekd-ergebnis.schlecht{border-color:#C97B3F}
.ekd-ergebnis-kopf{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.ekd-zahl{flex:0 0 auto;font-family:'Montserrat',sans-serif;font-weight:800;font-size:2rem;
  line-height:1;color:var(--ink)}
.ekd-zahl output{font:inherit}
.ekd-zahl i{font-style:normal;font-size:.8rem;font-weight:700;color:var(--muted);margin-left:6px}
.ekd-balken{flex:1 1 auto;height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.ekd-balken span{display:block;height:100%;width:0;border-radius:99px;background:var(--olive);
  transition:width .5s ease}
.ekd-ergebnis.mittel .ekd-balken span{background:var(--sonne,#E8A33D)}
.ekd-ergebnis.schlecht .ekd-balken span{background:#C97B3F}
.ekd-ergebnis > b{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.05rem;
  color:var(--ink);margin-bottom:6px}
.ekd-ergebnis p{margin:0 0 10px!important;font-size:.94rem}
.ekd-ergebnis ul{margin:6px 0 0;padding-left:18px}
.ekd-ergebnis li{font-size:.9rem;line-height:1.55;margin-bottom:6px;color:var(--text)}
@media(max-width:520px){.ekd-check{padding:6px 16px 18px}}
@media(prefers-reduced-motion:reduce){.ekd-wahl span,.ekd-balken span,.ekd-ergebnis{transition:none}}

/* ---- Drei Wege nebeneinander (Widerruf / Kuendigung / Ruecktritt) ----
   Auf breiten Bildschirmen drei Spalten, auf dem Handy drei Karten untereinander. */
.ekd-vgl.drei{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.ekd-vgl.drei > div{background:var(--paper)}
.ekd-vgl.drei > div.ekd-vgl-gut{background:var(--olive-wash)}
.ekd-vgl.drei > div.ekd-vgl-weg{background:#FBF3EC}
.ekd-vgl dl{margin:0}
.ekd-vgl dt{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:12px 0 3px}
.ekd-vgl dt:first-child{margin-top:4px}
.ekd-vgl dd{margin:0;font-size:.9rem;line-height:1.5;color:var(--text);hyphens:auto}

/* ---- Kurzantwort mit nummerierten Fehlern, Knopf und Telefon (4b) ---- */
.ekd-kurz ol,.ekd-kurz ul{margin:12px 0 14px;padding-left:22px;color:var(--text);max-width:none}
.ekd-kurz li{margin-bottom:8px;line-height:1.6}
.ekd-kurz p + p{margin-top:12px}
.ekd-kurz-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:18px}
.bt-inhalt .ekd-kurz-zeile a.ekd-kurz-tel{display:inline-flex;align-items:center;gap:.4em;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.ekd-kurz-tel svg{width:1em;height:1em;fill:var(--olive);flex:0 0 auto}
@media(max-width:520px){
  .ekd-kurz-zeile{flex-direction:column;align-items:stretch}
  .ekd-kurz-zeile .btn{width:100%;text-align:center}
  .bt-inhalt .ekd-kurz-zeile a.ekd-kurz-tel{justify-content:center}
}

/* ---- Kleingedrucktes direkt unter dem Angebot, nicht eingeklappt ---- */
.ekd-fein{margin:4px 0 30px;padding:16px 20px;border:1px dashed var(--line);border-radius:var(--r);
  font-size:.84rem;line-height:1.65;color:var(--muted)}
.bt-inhalt p.ekd-fein{max-width:none;color:var(--muted)}
.ekd-fein b{color:var(--text)}

/* ---- Anfrageformular fuer EKD-Kunden (#anfrage im dunklen Schlussabschnitt) ----
   Muster: #berFormular auf pv-anlage.html. Links Text, rechts das Formular als
   helle Karte, die Telefonnummer gross darunter. Auf dem Handy: Text, Formular,
   Telefon untereinander. */
.ekd-anfrage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  grid-template-areas:"txt form" "tel form";grid-template-rows:auto 1fr;gap:0 50px;align-items:start;text-align:left}
.ekd-anfrage-txt{grid-area:txt;min-width:0}
.ekd-anfrage-txt h2{color:#fff}
.ekd-anfrage-txt p{color:rgba(255,255,255,.78)}
.ekd-anfrage-txt p strong{color:#fff}
.ekd-anfrage-tel{grid-area:tel;min-width:0;margin-top:26px}
.ekd-anfrage-tel p{font-size:.95rem;color:rgba(255,255,255,.75);margin:0 0 6px}
.ekd-anfrage-tel a{display:inline-flex;align-items:center;gap:.5em;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,#E8A33D);
  padding-bottom:4px;white-space:nowrap}
.ekd-anfrage-tel a svg{width:24px;height:24px;fill:var(--sonne,#E8A33D);flex:0 0 auto}
.ekd-anfrage-tel a:hover{color:var(--sonne,#E8A33D)}
#anfrage{grid-area:form;min-width:0;scroll-margin-top:96px}
.ekd-form{border-radius:18px;padding:30px 28px;min-width:0;color:var(--text)}
.sec-dark .ekd-form h3{color:var(--ink);font-size:1.15rem;margin:0 0 16px}
.ekd-form .btn{background:var(--sonne,#E8A33D);color:var(--ink);white-space:normal;line-height:1.35}
.ekd-form .btn:hover{background:var(--sonne-dk,#C9821B);color:#fff}
.ekd-form-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}
.ekd-form-fehler.auf{display:block}
/* Auswahl "Ihre Lage": grosse Klickflaechen, immer untereinander */
.ekd-lage{border:0;margin:0 0 16px;padding:0;min-width:0}
.ekd-lage legend{padding:0;margin:0 0 8px;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.form .ekd-lage label{display:flex;gap:12px;align-items:flex-start;margin:0 0 8px;padding:13px 14px;
  border:1.5px solid var(--line);border-radius:11px;cursor:pointer;background:#fff;
  font-family:inherit;font-weight:500;font-size:.93rem;line-height:1.45;letter-spacing:0;
  text-transform:none;color:var(--text);transition:border-color .2s ease,background .2s ease}
.form .ekd-lage label:hover{border-color:var(--olive)}
.form .ekd-lage input{width:20px;height:20px;flex:0 0 auto;margin:0;padding:0;
  accent-color:var(--sonne-dk,#C9821B)}
.form .ekd-lage label:has(input:checked){border-color:var(--sonne-dk,#C9821B);background:#FCF7EC}
.ekd-form-klein{margin:14px 0 0;font-size:.8rem;line-height:1.6;color:var(--muted)}
@media(max-width:900px){
  .ekd-anfrage{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "form" "tel";grid-template-rows:auto;gap:30px 0}
  .ekd-anfrage-tel{margin-top:0}
}
@media(max-width:520px){.ekd-form{padding:24px 18px}}
@media(prefers-reduced-motion:reduce){.form .ekd-lage label{transition:none}}

/* ---- Versprechen "Uns gibt es auch in 20 Jahren noch" (Beitrag 4b, #versprechen) ----
   Kopie der .bleib-Regeln aus landing.css (Robins Lieblingsanimation, 01.10.2026).
   landing.css selbst wird hier bewusst NICHT geladen: Sie ueberschreibt .huepf mit
   anderen Zeiten und bringt Regeln der Landingpage mit, die das Blogdesign veraendern
   wuerden. Aenderungen am Kasten deshalb in BEIDEN Dateien nachziehen.
   Einzige Anpassung an die schmale Beitragsspalte: einspaltig und etwas kleinere
   Schrift (siehe "Anpassung an die Beitragsspalte" ganz unten). */
.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}
}

/* -- Anpassung an die Beitragsspalte (rund 690 px statt Seitenbreite) -- */
.bt-inhalt .bleib{grid-template-columns:minmax(0,1fr);gap:30px;padding:48px 44px;margin:40px 0 44px}
.bt-inhalt .bleib-zitat > p{font-size:clamp(1.9rem,4.6vw,2.7rem);max-width:none}
.bt-inhalt .bleib p{max-width:none}
.bt-inhalt .bleib .bleib-punkte{padding:0;margin:0 0 30px;max-width:none}
.bt-inhalt .bleib .bleib-punkte li{margin:0}
@media(max-width:900px){.bt-inhalt .bleib{padding:40px 26px;border-radius:22px}}
@media(max-width:420px){.bt-inhalt .bleib{padding:36px 20px}}