/* =========================================================
   Ergänzungen zu den Landingpages
   Bewusst eine eigene Datei: lp-<seite>.css wird aus dem
   Original erzeugt und bei einem Neuimport überschrieben.
   Was hier steht, bleibt erhalten.
   ========================================================= */

/* ---------------------------------------------------------
   Dokumente unter „К каждому уроку есть дополнительные
   материалы“ (block_10).

   Jede Kachel steckt in einer Hülle, die die Positionierung
   des Originals trägt. Ein <img> selbst kann kein ::after
   haben — der Lichtstreif braucht aber genau das.
   --------------------------------------------------------- */

.lp .doc-shine {
  display: inline-block;
  overflow: hidden;
  border-radius: 6px;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.3, 1),
              box-shadow 0.6s;
}

.lp .doc-shine > img {
  display: block;
  width: 100%;
}

/* Der Lichtstreif — dezent: 1,15 s, Deckkraft 0,30 */
.lp .doc-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 44%,
    rgba(255, 231, 185, 0.3) 50%,
    transparent 56%
  );
  transform: translateX(-130%);
  transition: transform 1.15s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.lp .doc-shine:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(226, 175, 79, 0.26);
}

.lp .doc-shine:hover::after { transform: translateX(130%); }

/* ---------------------------------------------------------
   Auftritt: Aufziehen
   Setzt auf der vorhandenen Mechanik der Seite auf. Deren
   IntersectionObserver setzt .animate, sobald das Element in
   den Blick kommt — einmalig. Hier kommt zum Einblenden nur
   das Aufziehen dazu.
   --------------------------------------------------------- */

.lp .doc-shine.animate-on-scroll {
  transform: scale(0.94);
  transform-origin: bottom center;
  transition: opacity 0.8s ease,
              transform 0.8s cubic-bezier(0.2, 0.8, 0.3, 1),
              box-shadow 0.6s;
}

.lp .doc-shine.animate-on-scroll.animate { transform: none; }

/* Versetzt, damit der Stapel sich aufbaut statt aufzublitzen */
.lp .doc-shine.block_10_rect_2 { transition-delay: 0.1s; }
.lp .doc-shine.block_10_rect_3 { transition-delay: 0.2s; }
.lp .doc-shine.block_10_rect_4 { transition-delay: 0.3s; }
.lp .doc-shine.block_10_rect_5 { transition-delay: 0.4s; }
.lp .doc-shine.block_10_rect_6 { transition-delay: 0.5s; }
.lp .doc-shine.block_10_rect_7 { transition-delay: 0.6s; }

/* Nach dem Auftritt soll der Hover ohne Verzögerung reagieren */
.lp .doc-shine.animate:hover { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .lp .doc-shine,
  .lp .doc-shine::after,
  .lp .doc-shine.animate-on-scroll { transition: none; transform: none; }
}


/* =========================================================================
   Slider-Pfeile: gleicher Randabstand links wie rechts

   In der Vorlage standen die Pfeile mit handgesetzten Pixelwerten in der
   Textzeile: auf dem Handy links 7.5px, rechts 310px. Das ging nur bei
   genau 390px Fensterbreite auf. Gemessen im fertigen Aufbau:

       Fensterbreite   Pfeil links   Pfeil rechts
       360px           8px           -22px  (haengt aus dem Bild)
       390px           8px             8px
       412px           8px            30px
       430px           8px            48px

   Der linke Pfeil klebt am Rand, der rechte wandert mit jedem Pixel
   Fensterbreite nach innen. Auf dem Desktop steht Block 1 genauso schief:
   33px links gegen 53px rechts.

   Die Pfeile haengen jetzt am jeweiligen Rand des Sliders statt an einer
   festen Zahl. Den Platz, den sie vorher als Zeile im Textfluss belegt
   haben, ersetzt ein Innenabstand oben - so bleibt die Seite exakt
   gleich hoch.
   ========================================================================= */

.lp .block_1_slider,
.lp .block_7_slider,
.lp .phone_block_1_slider,
.lp .phone_block_7_slider { position: relative; }

.lp .block_1_slider,
.lp .block_7_slider       { padding-top: 131px; }
.lp .phone_block_1_slider { padding-top: 66px; }
.lp .phone_block_7_slider { padding-top: 57px; }

.lp .block_1_slider_btn_prev,
.lp .block_1_slider_btn_next,
.lp .block_7_slider_btn_prev,
.lp .block_7_slider_btn_next,
.lp .phone_block_1_slider_btn_prev,
.lp .phone_block_1_slider_btn_next,
.lp .phone_block_7_slider_btn_prev,
.lp .phone_block_7_slider_btn_next {
  position: absolute;
  left: auto;
  right: auto;
  z-index: 3;
}

/* Desktop: Block 1 steht im Seitenrand neben dem Slider, Block 7 darin */
.lp .block_1_slider_btn_prev { left:  -77px; top: 420px; }
.lp .block_1_slider_btn_next { right: -77px; top: 420px; }
.lp .block_7_slider_btn_prev { left:  111px; top: 390px; }
.lp .block_7_slider_btn_next { right: 111px; top: 390px; }

/* Handy: Block 1 am Bildrand, Block 7 mittig zum Slider */
.lp .phone_block_1_slider_btn_prev { left:  8px; top: 170px; }
.lp .phone_block_1_slider_btn_next { right: 8px; top: 170px; }
.lp .phone_block_7_slider_btn_prev { left:  calc(50% - 142px); top: 183px; }
.lp .phone_block_7_slider_btn_next { right: calc(50% - 142px); top: 184px; }


/* =========================================================================
   Aufklappkaesten der Fragen und Antworten

   Zwei Fehler aus der Vorlage:

   1. Fuer jede einzelne Frage stand die Aufklapphoehe als feste Zahl im
      Stylesheet - und zwar ohne den Innenabstand mitzurechnen. Gemessen
      fehlten auf dem Handy bei allen 20 Fragen 21 bis 25 Pixel, auf dem
      Desktop durchgehend 43 (bei einer Frage sogar 110). Die letzte Zeile
      wurde angeschnitten und der Kasten bekam innen einen eigenen
      Rollbalken. Deshalb wurde es beim Aufklappen schlimmer.
      Die Hoehe kommt jetzt aus dem Inhalt, siehe assets/js/lp-fix.js.

   2. Auf dem Handy hatte jeder Kasten einen vollen Rahmen von 0.283px.
      Zwischen zwei Kaesten lagen dadurch zwei Linien uebereinander,
      aussen nur eine - die Trennlinien waren doppelt so dick wie der
      Rand. Bei dreifacher Bildschirmaufloesung rundet der Browser diese
      Bruchteile ausserdem mal auf und mal ab. Jetzt liegt genau eine
      volle Linie zwischen zwei Kaesten und am Rand.
   ========================================================================= */

/* -- Handy: eine Linie statt zwei halben ---------------------------------- */
.lp .phone_accordion .phone_contentBx10,
.lp .phone_accordion .phone_contentBx10 .phone_label10,
.lp .phone_accordion .phone_contentBx10 .phone_content10 {
  box-sizing: border-box;
  width: 100%;
}

.lp .phone_accordion { border-top: 1px solid #E2AF4F; }

.lp .phone_accordion .phone_contentBx10 {
  border: 1px solid #E2AF4F;
  border-top: 0;
}

.lp .phone_accordion .phone_contentBx10 .phone_label10,
.lp .phone_accordion .phone_contentBx10 .phone_content10 { border: 0; }

.lp .phone_contentBx10.active #content202 { border-bottom: 0; }

/* -- Aufklappen: nur die Hoehe laeuft, kein eigener Rollbalken ------------- */
.lp .phone_accordion .phone_contentBx10 .phone_content10,
.lp .accordion .contentBx .content {
  overflow: hidden;
  transition: height 0.5s;
}

/* Im aufgeklappten Zustand setzte die Vorlage "transition: 0.5s" fuer alle
   Eigenschaften erneut. Dann laeuft auch der Innenabstand mit, und die
   gemessene Inhaltshoehe stimmt im Moment des Aufklappens noch nicht. */
.lp .phone_accordion .phone_contentBx10.active .phone_content10,
.lp .accordion .contentBx.active .content { transition: height 0.5s; }

/* -- Die uebrigen Aufklappbloecke (Block 4 und die Bonus-Liste in Block 6) --
   Gleicher Zahlen-Fehler wie bei den Fragen, nur andersherum: die feste Hoehe
   war zu gross statt zu klein. Gemessen im aufgeklappten Zustand:

       Seite        Ansicht   Block   gesetzt   noetig   ueberschuessig
       raspakovka   Desktop   4       1420      1404      16
       raspakovka   Desktop   6        500       483      17
       raspakovka   Handy     4       1060      1018      42
       raspakovka   Handy     6        360       337      23
       auditoria    Desktop   4       1420       936     484
       auditoria    Desktop   6        580       392     188
       auditoria    Handy     4        600       567      33
       auditoria    Handy     6        360       250     110

   Wo kein Aussenabstand gegensteuert, wurde daraus ein sichtbares Loch unter
   der Liste - auf der Desktop-Ansicht von auditoria 484 Pixel. Wo die Vorlage
   mit einem negativen Aussenabstand nachgeholfen hat, rutschte der folgende
   Abschnitt statt dessen ueber die letzten Zeilen der Liste.

   Die Hoehe kommt jetzt aus dem Inhalt, den negativen Ausgleich nimmt
   assets/js/lp-fix.js zurueck. */
.lp .accordion4 .contentBx4 .content4,
.lp .accordion4 .contentBx4.active .content4,
.lp .phone_accordion_4 .phone_contentBx4 .phone_content4,
.lp .phone_accordion_4 .phone_contentBx4.active .phone_content4,
.lp .accordion6 .contentBx6 .content6,
.lp .accordion6 .contentBx6.active .content6,
.lp .phone_accordion6 .phone_contentBx6 .phone_content6,
.lp .phone_accordion6 .phone_contentBx6.active .phone_content6 {
  overflow: hidden;
  transition: height 0.5s, margin-bottom 0.5s;
}

/* -- Telegram-Symbol im Knopf "Задать вопрос" (nur Handy) ------------------
   Wieder ein handgesetzter Pixelwert: das Symbol stand mit
   "position: relative; left: 237px" an einer festen Stelle, waehrend der
   Knopf daneben mit "margin: 0 auto" mitwandert. Die beiden liefen dadurch
   auseinander. Gemessener Abstand zwischen Text und Symbol:

       Fensterbreite   Abstand
       360px            18px
       390px             6px   <- Entwurfsbreite, so war es gemeint
       402px             0px   <- Symbol klebt am Text
       430px           -14px   <- Symbol liegt auf dem Text

   Das Symbol haengt jetzt an der Mitte statt am linken Rand. Bei 390px war
   der Abstand zur Mitte 237 - 195 = 42px; dieser Abstand bleibt jetzt bei
   jeder Breite gleich. Bei 390px steht das Symbol damit exakt wie bisher.

   Nur "left" wird angefasst. Die Hoehe bleibt unberuehrt, denn die beiden
   Seiten setzen dort verschiedene Werte (raspakovka top: 32px bei 18px
   Symbolgroesse, auditoria top: -25px bei 20px) - die stimmen jeweils fuer
   ihre eigene Seite. */
.lp .phone_block_11_btn_icon {
  left: calc(50% + 42px);
}


/* -- Fest einbetonierte Maximalhoehe der Handy-Seite -----------------------
   Die Vorlage deckelt den ganzen Handy-Baum von raspakovka:

       .lp .site_phone { max-height: 14650px; overflow-y: hidden; }

   14650px war die Hoehe der Seite beim Bau. Wird der Inhalt auch nur ein
   Stueck laenger - anderer Zeichensatz, andere Geraetebreite, ein im Panel
   ergaenzter Satz - schneidet der Browser den Rest kommentarlos ab. Genau so
   ist der Knopf "Задать вопрос" auf halber Hoehe abgeschnitten worden.

   Da die Seite im Panel gepflegt werden soll, muss dieser Deckel weg. Die
   Hoehe ergibt sich jetzt aus dem Inhalt. */
.lp .site_phone { max-height: none; }

/* -- Erfahrungsbericht im Slider "Отзывы" (nur Handy) ----------------------
   Die Vorlage steckt den laengsten Bericht in ein Feld mit fester Hoehe und
   macht ihn darin scrollbar:

       .phone_block_7_slide_rectangle_2 p { max-height: 290px; overflow-y: auto }

   Der Text braucht 420px. 130px waren damit nur ueber eine 1 Pixel breite
   Bildlaufleiste erreichbar, die auf einem Telefon niemand sieht - der
   Verlauf, der auf mehr Text hindeuten sollte, steht in der Vorlage sogar
   auf "display: none".

   Schlimmer noch: ein scrollbares Feld faengt auf dem Telefon den Finger.
   Wer die Seite mittig anfasst und dabei diese Karte trifft, kann weder hoch
   noch runter scrollen. Auf dem Desktop steht derselbe Text vollstaendig da;
   auf dem Handy waechst die Karte jetzt genauso mit. Die kuerzeren Berichte
   behalten ueber min-height ihre bisherige Hoehe. */
.lp .phone_block_7_slide_rectangle {
  height: auto;
  min-height: 321px;
}

.lp .phone_block_7_slide_rectangle_2 p {
  max-height: none;
  overflow: visible;
  margin-bottom: 18.17px;
}

/* -- Weitere Hoehendeckel und die Finger-Falle beim Scrollen ---------------
   Auf auditoria deckelt die Vorlage den Frageblock:

       .lp .phone_block_10 { max-height: 1320px }

   Beim Aufklappen ragte der ganze untere Teil - Fragen, Text und der Knopf
   "Задать вопрос" - bis zu 1439px unter den Block hinaus.

   Das allein waere schon schlecht; zusammen mit dem umgebenden Container
   wurde daraus aber ein Scroll-Problem. .site_phone hat "overflow-x: hidden",
   damit die Leuchtflaechen am Rand nicht ueberstehen. Sobald aber eine
   Achse nicht "visible" ist, macht der Browser aus der anderen automatisch
   "auto" - der Container wird also selbst scrollbar. Wer die Seite dann
   mittig anfasst, scrollt diesen Container statt der Seite, und der bewegt
   sich nicht: die Seite klemmt.

   Drei Wege wurden gemessen:

     overflow-y: hidden    keine Falle, aber auf auditoria wurden 237px
                           abgeschnitten - darunter 48px des Knopfes.
     overflow-y: visible   nichts abgeschnitten, aber der Container verliert
                           seinen Formatierungskontext: die Fusszeile rutschte
                           82px in den Inhalt.
     display: flow-root    stellt den Kontext wieder her, ohne zu schneiden
     + overflow-x: clip    und ohne scrollbar zu sein. So ist es jetzt.

   "clip" schneidet waagerecht wie "hidden", macht den Container aber nicht
   scrollbar - und laesst die andere Achse auf "visible" stehen, was "hidden"
   nicht tut. Aeltere Browser ohne "clip" fallen auf das bisherige "hidden"
   zurueck, sind damit also nicht schlechter dran als vorher.

   Die Zeilen stehen im selben Media-Query wie das Original, sonst wuerde
   "display" die Umschaltung zwischen Handy- und Desktop-Baum aushebeln. */
.lp .phone_block_10 { max-height: none; }

@media screen and (max-width: 768px) {
  .lp .site_phone {
    display: flow-root;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* -- Fusszeile lag auf dem Knopf (auditoria) -------------------------------
   Der Frageblock wird in der Vorlage zweifach nach oben gezogen:

       .lp .phone_block_10 { margin-top: -240px }
       .lp .phone_block_10 { position: relative; top: -163px }

   Das "top" verschiebt nur das Bild, nicht das Layout. Der Browser rechnet
   also weiter mit der alten Stelle, und der Block ragt 237px unter seinen
   eigenen Container - davon 48px des Knopfes "Задать вопрос". Die Fusszeile
   schliesst am Container an und lag damit auf dem Knopf.

   Die Verschiebung in einen Aussenabstand umzurechnen habe ich versucht - das
   machte es schlimmer (211px statt 48px), die Geometrie dieses Blocks loest
   sich nicht sauber auf. Gemessen ist der Fehlbetrag aber konstant: 48px,
   im zu- wie im aufgeklappten Zustand. Also wird genau das ausgeglichen,
   plus 53px Abstand - so viel Luft laesst raspakovka zwischen Knopf und
   Fusszeile.

   Nur fuer auditoria: raspakovka hat diesen Versatz nicht, dort waeren die
   101px zu viel. Die Kennung "lp--auditoria" setzt die Vorlagendatei
   site/templates/lp.php an die Seitenwurzel. */
.lp--auditoria .phone_block_10 {
  padding-bottom: 101px;
}