/* ── Poster-Block: "Für deine 7 Tage" ──
   Geteilt zwischen Mobile-PWA (app.html) und Admin Live-Vorschau (admin.html).
*/

.poster-block {
  margin: 28px 0 12px;
  padding: 24px 22px 26px;
  background: linear-gradient(160deg, rgba(43,40,34,0.95), rgba(20,18,14,0.98));
  border: 1px solid rgba(244,238,226,0.07);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.poster-block::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, var(--accent-glow), transparent 60%);
  opacity: 0.45;
}
.poster-eyebrow {
  /* Persönliche Begrüssung vom Stein — nicht all-caps-Label, sondern leise.
     Italic Fraunces + Theme-Accent-Farbe (Slate/Sage/Rust je nach Theme). */
  position: relative;
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-bottom: 18px;
}
@media (min-width: 900px) {
  .poster-eyebrow { font-size: 19px; }
}
.poster-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(244,238,226,0.04);
  border: 1px solid rgba(244,238,226,0.08);
  margin-bottom: 22px;
}
.poster-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.poster-img-wrap::after {
  content: '';
  position: absolute; left:0; right:0; bottom:0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(16,16,14,0.55));
  pointer-events: none;
}
.poster-quote {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.poster-motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.3;
  color: var(--accent);
  letter-spacing: 0.005em;
  margin: 0 0 22px;
  opacity: 0.9;
}
.poster-reflection-intro {
  font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.poster-reflections {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.poster-reflections li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.poster-reflections li::before {
  content: '·';
  position: absolute; left: 0; top: -1px;
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}
.poster-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,238,226,0.12), transparent);
  margin: 14px 0 16px;
}
.poster-impact {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  display: flex; flex-direction: column; gap: 4px;
}
.poster-impact p { margin: 0; }
.poster-impact-intro {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.poster-lang-hint {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-left: 8px;
  opacity: 0.7;
}

/* In-view animation */
.poster-block.is-visible .poster-img-wrap { animation: poster-in-img 700ms cubic-bezier(.22,.7,.3,1) both; }
.poster-block.is-visible .poster-quote      { animation: poster-in 700ms 80ms cubic-bezier(.22,.7,.3,1) both; }
.poster-block.is-visible .poster-reflections{ animation: poster-in 700ms 160ms cubic-bezier(.22,.7,.3,1) both; }
.poster-block.is-visible .poster-impact     { animation: poster-in 700ms 240ms cubic-bezier(.22,.7,.3,1) both; }
@keyframes poster-in-img { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes poster-in     { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .poster-block.is-visible * { animation: none !important; }
}