/* =========================================================
   leano – Preise-Seite
   1:1 aus Figma (Frame „Preise" 295:169). Nur Inhalte;
   Header + Footer kommen aus js/layout.js.
   Zwei Karten (Solo Account / Pro Solo Account), je 350×928,
   Inhalt in einer 270px-Spalte (40px Rand), absolut positioniert
   wie in Figma. Mobil: Karten gestapelt, Inhalt fließend.
   ========================================================= */

.pricing-main { padding-top: 140px; }   /* Figma: Trennstrich bei y=140 */

/* Langer Trennstrich unter dem Header (Figma: 1100px, x90–1190, #999) – responsiv */
.pp-topline {
  width: 1100px;
  max-width: calc(100% - 80px);
  margin: 0 auto;
  height: 0;
  border: 0;
  border-top: 1px solid var(--dark-grey);
  /* zieht sich beim Laden in 1000ms von links nach rechts auf */
  transform-origin: left center;
  animation: pp-line-draw 1000ms ease-out both;
}
@keyframes pp-line-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.pp { padding-top: 90px; padding-bottom: 300px; }   /* 90px Strich→Karten, 300px Karten→Footer */

/* Zwei Karten nebeneinander, 100px Abstand, zentriert */
.pp-row {
  display: flex;
  justify-content: center;
  gap: 100px;
}

/* ---------- Karte ---------- */
.pp-card {
  position: relative;
  width: 350px;
  height: 995px;              /* 928 -> 995: Platz für die größere Schrift der Merkmalsliste */
  box-sizing: border-box;
  border: 1px solid var(--dark-grey);
  border-radius: 20px;
  background: var(--white);
  flex: none;
}

/* Kopf-Grafik (Solo: helle Textur, Pro: dunkles Hexagon) */
.pp-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.pp-head img { display: block; width: 100%; height: auto; }

/* Lichtreflex – nur auf der Pro-Karte (.pp-shine): ZWEI unabhängige, weiche runde
   Lichtflecken (wie zwei Lampen) leuchten sanft an wechselnden Stellen des Bildes
   auf und wieder ab. Unterschiedliche Zykluslänge (9s / 11s) lässt die beiden
   Lichter zeitlich auseinanderdriften, sodass sie mal einzeln, mal gleichzeitig
   leuchten – nie fest synchron. Kein Streifen, nur „einen Tick" heller als vorher.
   Start erst 2s nachdem die Kopflinie (1000ms) fertig aufgezogen ist. */
.pp-shine::before,
.pp-shine::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}
.pp-shine::before {
  width: 170px; height: 170px;
  background: radial-gradient(circle, rgba(255,255,255,0.28), rgba(255,255,255,0) 70%);
  animation: pp-shine-a 9s ease-in-out 3000ms infinite;
}
.pp-shine::after {
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(255,255,255,0.28), rgba(255,255,255,0) 70%);
  animation: pp-shine-b 11s ease-in-out 3900ms infinite;
}
/* top/left als % des Kopfbilds (.pp-head ist positioniert): Position wandert
   auch WÄHREND ein Licht leuchtet (Start/Spitze/Ende je leicht andere Stelle);
   zwischen den Leucht-Momenten (opacity 0) springt sie an eine neue, weit
   entfernte Stelle im Kopfbild. Vier Lichtmomente über den ganzen Kopf verteilt. */
@keyframes pp-shine-a {
  0%   { opacity: 0;    top: 15%; left: 12%; }
  8%   { opacity: 0.75; top: 25%; left: 20%; }
  19%  { opacity: 0;    top: 35%; left: 28%; }
  34%  { opacity: 0;    top: 20%; left: 85%; }
  42%  { opacity: 0.7;  top: 32%; left: 78%; }
  55%  { opacity: 0;    top: 45%; left: 68%; }
  70%  { opacity: 0;    top: 85%; left: 45%; }
  79%  { opacity: 0.8;  top: 75%; left: 52%; }
  91%  { opacity: 0;    top: 65%; left: 58%; }
  100% { opacity: 0;    top: 15%; left: 12%; }
}
@keyframes pp-shine-b {
  0%   { opacity: 0;    top: 80%; left: 90%; }
  13%  { opacity: 0.7;  top: 70%; left: 82%; }
  24%  { opacity: 0;    top: 60%; left: 74%; }
  45%  { opacity: 0;    top: 70%; left: 15%; }
  53%  { opacity: 0.8;  top: 60%; left: 22%; }
  63%  { opacity: 0;    top: 50%; left: 30%; }
  82%  { opacity: 0;    top: 15%; left: 55%; }
  90%  { opacity: 0.65; top: 25%; left: 62%; }
  98%  { opacity: 0;    top: 35%; left: 68%; }
  100% { opacity: 0;    top: 80%; left: 90%; }
}

/* Inhaltselemente – 270px-Spalte, 40px Rand links */
.pp-title,
.pp-intro,
.pp-usecase,
.pp-price,
.pp-mid-text,
.pp-abrechnung,
.pp-toggle,
.pp-feat-title,
.pp-feats,
.pp-cta { position: absolute; left: 40px; width: 270px; }

.pp-line { position: absolute; left: 40px; width: 270px; height: 0; border: 0; border-top: 1px solid var(--dark-grey); margin: 0; }

.pp-title    { top: 86px;  margin: 0; font: 700 18px/27px var(--font-body); color: var(--black); }
.pp-intro    { top: 127px; margin: 0; font: 400 14px/27px var(--font-body); color: var(--black); }

.pp-usecase  { top: 191px; margin: 0; font: 400 14px/27px var(--font-body); color: var(--black); }
.pp-usecase p  { margin: 0 0 10px; }
.pp-usecase ul { margin: 0; padding-left: 18px; list-style: disc; }
.pp-usecase li { margin: 0; }

.pp-price    { top: 380px; margin: 0; color: var(--black); font-family: var(--font-body); }
.pp-amount   { font-size: 34px; line-height: 27px; }
.pp-per      { font-size: 14px; line-height: 27px; }

.pp-line-up   { top: 477px; }
.pp-line-down { top: 577px; }

/* Solo: „Gratis für alle" mittig im Band 477–577 */
.pp-mid-text  { top: 515px; margin: 0; text-align: center; font: 700 15px/24px var(--font-body); color: var(--black); }

/* Pro: „Abrechnung" + Umschalter jährlich/monatlich */
.pp-abrechnung { top: 490px; margin: 0; text-align: center; font: 700 15px/24px var(--font-body); color: var(--black); }
.pp-toggle { top: 528px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.pp-toggle-label {
  border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer;
  font: 400 14px/27px var(--font-body); color: var(--black);
}
/* Umschalter jährlich/monatlich – Knopf gleitet sanft nach links/rechts */
.pp-switch {
  position: relative; flex: none; box-sizing: border-box;
  width: 44px; height: 22px; padding: 0; margin: 0; cursor: pointer;
  border: 1px solid var(--dark-grey); border-radius: 11px; background: transparent;
}
.pp-knob {
  position: absolute; top: 1.5px; left: 1.5px;
  width: 17px; height: 17px; box-sizing: border-box;
  border: 1px solid var(--dark-grey); border-radius: 50%; background: var(--white);
  transition: left 200ms ease;
}
.pp-toggle[data-billing="month"] .pp-knob { left: 23.5px; }   /* rechte Position (monatlich) */

.pp-feat-title { top: 617px; margin: 0; font: 400 14px/27px var(--font-body); color: var(--black); }

.pp-feats { top: 656px; margin: 0; padding: 0; list-style: none; }
.pp-feats li { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 8px; }
.pp-feats li:last-child { margin-bottom: 0; }
.pp-check { width: 13px; height: 13px; flex: none; margin-top: 6px; }
.pp-feats span { font: 400 14px/27px var(--font-body); color: var(--black); }

/* „Auswählen"-Button rechtsbündig in der Inhaltsspalte */
/* Button am Kartenende verankert (statt fester top-Position) – so rutscht er
   nicht in die Merkmalsliste, wenn deren Text länger wird. */
.pp-cta { top: auto; bottom: 29px; display: flex; justify-content: flex-end; }

/* =========================================================
   MOBIL – Karten untereinander, Inhalt fließend (kein festes px)
   ========================================================= */
@media (max-width: 820px) {
  .pricing-main { padding-top: 135px; }
  .pp { padding-top: 50px; padding-bottom: 160px; }
  .pp-row { flex-direction: column; align-items: center; gap: 60px; }   /* 20px mehr Abstand zwischen den gestapelten Karten */

  .pp-card { height: auto; width: min(350px, calc(100% - 40px)); }

  /* alle absolut gesetzten Elemente in den Fluss zurückholen */
  .pp-title, .pp-intro, .pp-usecase, .pp-price, .pp-mid-text, .pp-abrechnung,
  .pp-toggle, .pp-feat-title, .pp-feats, .pp-cta, .pp-line {
    position: static; left: auto; width: auto;
  }
  .pp-head { position: relative; }

  .pp-body { padding: 30px 40px 34px; }   /* Innenabstand der fließenden Inhalte */

  .pp-title    { margin: 0; }
  .pp-intro    { margin: 16px 0 0; }
  .pp-usecase  { margin: 14px 0 0; }
  .pp-price    { margin: 40px 0 0; }
  .pp-line-up   { margin: 30px 0 0; }
  .pp-mid-text  { margin: 22px 0; }
  .pp-abrechnung { margin: 22px 0 0; }
  .pp-toggle    { margin: 14px 0 22px; }
  .pp-line-down { margin: 0; }
  .pp-feat-title { margin: 30px 0 0; }
  .pp-feats     { margin: 16px 0 0; }
  .pp-cta       { margin: 34px 0 0; }
}

/* Reduzierte Bewegung respektieren: Linie sofort da, kein Lichtreflex */
@media (prefers-reduced-motion: reduce) {
  .pp-topline { animation: none; transform: none; }
  .pp-shine::before, .pp-shine::after { animation: none; display: none; }
}