/* ============================================================
   Themenseiten /ferienwohnung und /initiativbewerbung
   Ergänzt landing.css (lädt über $pageCss im Landing-Layout).
   Animiertes Beispiel: home/_themen_story.php + /assets/js/themen-story.js
   ============================================================ */

/* ---------- Hero mit Handy-Aufnahme ---------- */
.th-hero { display: grid; gap: 2.2rem; align-items: center; }
.th-hero .lp-phone { margin: 0 auto; }
.th-shotwrap { position: relative; }
.th-shotwrap .vz-ai-badge--corner,
.th-figure .vz-ai-badge--corner { left: 10px; bottom: 10px; font-size: 11.5px; padding: 4px 7px; }
.th-phone-badge { position: absolute; left: 22px; bottom: 26px; z-index: 5; font-size: 11.5px; padding: 4px 7px; }
@media (min-width: 880px) {
  .th-hero { grid-template-columns: 1.15fr .85fr; }
}

/* ---------- Animiertes Beispiel ---------- */
.th-story { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 880px) {
  .th-story { grid-template-columns: .85fr 1.15fr; gap: 3rem; }
}
.th-story__stage { position: relative; display: flex; justify-content: center; }
.th-story__screen { position: relative; }
.th-story__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0;
  transition: opacity .55s ease, transform 3.8s ease-out;
  transform: translateY(0);
}
.th-story__frame.is-on { opacity: 1; }
/* Erstes Bild ohne JavaScript sichtbar (statische Grundstellung) */
.th-story:not(.is-ready) .th-story__frame:first-child { opacity: 1; }

/* Tipp-Markierung: zeigt, wohin der Gast im nächsten Schritt tippt */
.th-story__tap {
  position: absolute; z-index: 4;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(37, 99, 235, .28);
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .55);
  opacity: 0;
  pointer-events: none;
}
.th-story__tap.is-on { opacity: 1; }

.th-story__panel { min-width: 0; }
.th-story__steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.th-story__step {
  display: grid; grid-template-columns: 2rem 1fr; gap: .2rem .8rem; align-items: start;
  width: 100%; text-align: left;
  padding: .75rem .9rem;
  background: var(--lp-bg, #fff);
  border: 1px solid var(--lp-border, #e5e7eb);
  border-radius: 14px;
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.th-story__step:hover { border-color: #c7d2fe; }
.th-story__step[aria-current="step"] {
  border-color: var(--lp-primary, #1d4ed8);
  background: var(--lp-accent-bg, #eff6ff);
  box-shadow: 0 8px 22px -14px rgba(29, 78, 216, .55);
}
.th-story__num {
  grid-row: span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: #e2e8f0; color: #334155; font-weight: 700; font-size: .85rem;
}
.th-story__step[aria-current="step"] .th-story__num { background: var(--lp-primary, #1d4ed8); color: #fff; }
.th-story__step strong { font-size: 1rem; color: var(--lp-text, #0f172a); }
.th-story__step span.th-story__txt { font-size: .9rem; line-height: 1.5; color: var(--lp-muted, #64748b); }
/* Text der nicht aktiven Schritte bleibt lesbar, wird nur ruhiger */
.th-story.is-ready .th-story__step:not([aria-current="step"]) span.th-story__txt { display: none; }

.th-story__bar { display: flex; align-items: center; gap: .8rem; }
.th-story__progress { flex: 1; height: 4px; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.th-story__progress i { display: block; height: 100%; width: 0; background: var(--lp-primary, #1d4ed8); }
.th-story__toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid var(--lp-border, #e5e7eb); background: #fff;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--lp-text, #0f172a); cursor: pointer;
}
.th-story__toggle:hover { background: #f3f4f6; }
.th-story:not(.is-ready) .th-story__bar { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .th-story__tap.is-on { animation: thTap 1.6s ease-out infinite; }
  .th-story__frame.is-on.is-long { transform: translateY(-3%); }
}
@media (prefers-reduced-motion: reduce) {
  .th-story__frame { transition: none; }
}
@keyframes thTap {
  0%   { transform: scale(.6); opacity: 0; }
  30%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- Bilder mit Bildunterschrift ---------- */
.th-figure { position: relative; margin: 0; }
.th-figure img {
  display: block; width: 100%; height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .16);
  border: 1px solid rgba(15, 23, 42, .08);
}
.th-figure figcaption { margin-top: .7rem; font-size: .88rem; color: var(--lp-muted, #64748b); }
.th-split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 880px) {
  .th-split { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .th-split--flip > :first-child { order: 2; }
}
.th-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.th-list li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; line-height: 1.55; }
.th-list li::before { content: "✓"; color: var(--lp-primary, #1d4ed8); font-weight: 800; }

/* Funktions-Kacheln mit Tarif-Etikett */
.th-tier {
  display: inline-block; margin-left: .35rem; vertical-align: middle;
  padding: .12rem .5rem; border-radius: 999px;
  background: #f1f5f9; color: #475569;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
}

/* Galerie: drei Handys nebeneinander */
.th-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.4rem; }
.th-phones figure { margin: 0; text-align: center; }
.th-phones .th-shotwrap { max-width: 240px; margin: 0 auto; }
.th-phones img {
  display: block; width: 100%; height: auto;
  border-radius: 22px; border: 6px solid #15171c;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .18);
}
.th-phones figcaption { margin-top: .8rem; text-align: left; max-width: 260px; margin-left: auto; margin-right: auto; }
.th-phones figcaption strong { display: block; margin-bottom: .2rem; }
.th-phones figcaption span { font-size: .92rem; color: var(--lp-muted, #64748b); }

.th-note { margin-top: 1.6rem; }