/* ==========================================================
   OTBT Playbook Envelope – Briefumschlag-Animation für den
   Newsletter-Abschnitt „The Playbook“ auf der Startseite.

   Der Umschlag ist dauerhaft offen (Klappe steht statisch hoch);
   der Zettel fährt per CSS-Transition heraus, sobald das JS die
   Klasse .otbt-pbenv-open setzt. Damit das funktioniert,
   liegt die Vordertasche in der Z-Ordnung ÜBER dem Zettel:
     Rückseite+Klappe (z1) < Zettel (z2) < Vordertasche (z3)
   Die drei sind Geschwister direkt in der Bühne — ein gemeinsamer
   transformierter Elternteil würde einen Stacking-Context bilden
   und die Tasche könnte den Zettel nie überdecken.

   Die Umschlagteile sind inline-SVG statt clip-path: nur so sind
   Fläche und Kontur exakt dieselbe Geometrie. Mit clip-path +
   border-radius klafften an den oberen Ecken Reste des Körpers
   unter der eckig ansetzenden Klappe hervor.

   Alle Regeln sind auf .otbt-pbenv-on gescoped: die Klasse setzt
   erst das JS. Ohne JS (oder deaktiviertem Plugin) greift hier
   nichts und der graue Kasten sieht aus wie bisher.
   ========================================================== */

/* Grauer Kasten weg — der Umschlag ersetzt ihn als Bühne. */
.otbt-section-newsletter.otbt-pbenv-on {
    background: transparent;
    padding: 0 !important;
}

/* Der Block-Container bringt mobil 30px Innenabstand mit, zusätzlich zum
   Seitenrand außen. Der Umschlag stünde dadurch unnötig schmal in der
   Mitte — der Abstand nach außen reicht. */
.otbt-section-newsletter.otbt-pbenv-on > .wp-block-group__inner-container {
    padding-left: 0;
    padding-right: 0;
}

/* Bühne: Höhe setzt das JS (Zettelhöhe + Umschlag). Bis zur ersten
   Messung unsichtbar, damit nichts kurz in der Endposition aufblitzt.

   Breite bewusst in % des Containers, NICHT in vw: der Container ist
   schmaler als das Viewport, und sobald die Bühne breiter wird als er,
   fallen die auto-Ränder auf 0 — sie klebte dann links am Container und
   ragte rechts aus dem Bild. */
.otbt-pbenv-scene {
    position: relative;
    margin: 0 auto;
    width: min(620px, 100%);
    visibility: hidden;
}
.otbt-pbenv-scene.otbt-pbenv-ready {
    visibility: visible;
}

/* Umschlag-Schichten. aspect-ratio statt fester Höhe: das SVG wird
   dadurch nie verzerrt, und die Proportion stimmt auf jeder Breite. */
.otbt-pbenv-back-group,
.otbt-pbenv-front-group {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    aspect-ratio: 620 / 280;
}

.otbt-pbenv-back-group { z-index: 1; }

/* Vordertasche liegt über dem Zettel; pointer-events none, damit
   Klicks aufs (anfangs verdeckte) Formular durchgehen. */
.otbt-pbenv-front-group {
    z-index: 3;
    pointer-events: none;
}

.otbt-pbenv-svg {
    position: absolute;
    left: 0;
    width: 100%;
}

/* Rückseiten-SVG reicht über die Bühne hinaus nach oben: dort steht die
   offene Klappe. 425/280 = Klappenhöhe + Umschlagkörper; der Körper deckt
   sich dadurch bei jeder Umschlaghöhe exakt mit der Gruppe. */
.otbt-pbenv-svg-back {
    bottom: 0;
    height: 151.786%;
}

.otbt-pbenv-svg-front {
    top: 0;
    height: 100%;
}

/* Maske: klemmt den Zettel unten am Umschlagboden ab, solange er
   noch „drin steckt“. pointer-events none, der Zettel selbst
   reaktiviert sie — das Formular bleibt klickbar. */
.otbt-pbenv-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 10px;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

/* Der Zettel: weißes Papier mit dem Original-Inhalt (Überschrift,
   Text, Formular). Rahmen statt Schlagschatten — flaches Layout, und
   weiß auf weißem Seitenhintergrund braucht eine Kante.
   Endposition steckt 60px in der Vordertasche; das padding-bottom hält
   den Inhalt aus diesem verdeckten Streifen. */
.otbt-pbenv-letter {
    position: absolute;
    left: 50%;
    bottom: 220px; /* Umschlaghöhe − Einstecktiefe; JS überschreibt */
    width: min(560px, 90%); /* % = Bühnenbreite, siehe .otbt-pbenv-scene */
    background: #fff;
    border: 4px solid #ffe93c;
    border-radius: 20px;
    padding: 40px 36px 88px;
    pointer-events: auto;
    will-change: transform;
    /* Ruhelage: im Umschlag. --pbenv-tuck misst das JS (Zettelhöhe). */
    transform: translate(-50%, var(--pbenv-tuck, 0px));
}

/* Die eigentliche Animation: nur ein Klassenwechsel, kein Scroll-Scrubbing.
   .otbt-pbenv-anim schaltet das JS erst nach dem ersten Frame dazu, damit
   beim Laden nichts grundlos losfährt.
   Die Transition der Gegenrichtung steht in der Basisregel — beim Wechsel
   gilt jeweils die des Zielzustands. Rein etwas zügiger als raus. */
.otbt-pbenv-anim .otbt-pbenv-letter {
    transition: transform 760ms cubic-bezier(0.65, 0, 0.35, 1);
}

.otbt-pbenv-open .otbt-pbenv-letter {
    transform: translate(-50%, 0);
}

.otbt-pbenv-anim.otbt-pbenv-open .otbt-pbenv-letter {
    transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------------------------------------
   Inhalt auf dem Zettel: etwas kompakter als frei im Abschnitt
   ---------------------------------------------------------- */
.otbt-pbenv-on .otbt-section-heading {
    font-size: 2.1rem;
    margin-bottom: 18px;
}

.otbt-pbenv-on .otbt-section-heading::after {
    width: 190px;
    height: 44px;
    right: -44px;
    bottom: -10px;
}

.otbt-pbenv-on .subheader {
    margin: 0 auto 26px;
    font-size: 1.02rem;
}

.otbt-pbenv-on .otbt-newsletter .sparrow-newsletter-email {
    background: #faf9f4;
}

.otbt-pbenv-on .otbt-newsletter .sparrow-newsletter-note {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    /* Auf schmalen Screens wäre der Umschlag im Briefformat nur noch ein
       flacher Streifen und der Zettel fast so breit wie er — hochkantiger
       Umschlag plus schmalerer Zettel geben der Form wieder Luft. */
    .otbt-pbenv-back-group,
    .otbt-pbenv-front-group {
        aspect-ratio: 620 / 340;
    }

    .otbt-pbenv-letter {
        width: 86%;
        padding: 26px 18px 74px;
    }

    .otbt-pbenv-on .otbt-section-heading {
        font-size: 1.7rem;
    }
}