/* Studio, Credits und Pakete auf den Standardseiten (Vermarktung, Claude 24.10.2026). Nur geladen, wenn die Pakete öffentlich
   sind (SUBSCRIPTIONS_PUBLIC); ohne den Schalter bleibt die Website unverändert. Baut auf site.css (Tokens, Knöpfe) und
   credits.css (Vorher-Nachher-Regler, Videobühnen, Etiketten) auf. Messing nur für Preise und Akzente. */

/* ---------------------------------------------------------------- Abschnitt „Studio“ (Startseite, Landingpages) */
.sp { overflow: hidden; background: radial-gradient(1100px 560px at 88% 4%, #272b31 0%, var(--dark) 64%); }
.sp-grid { display: grid; gap: 36px; grid-template-areas: "head" "visual" "body"; }
.sp-head { grid-area: head; } .sp-visual { grid-area: visual; } .sp-body { grid-area: body; }
/* PC: Text links (Kopf und Nutzen), Ergebnisse rechts; Handy: Kopf, Ergebnisse, Nutzen und Knöpfe (Ergebnis zuerst) */
@media (min-width: 960px) {
  .sp-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head visual" "body visual"; column-gap: clamp(40px, 5vw, 72px); row-gap: 0; }
  .sp-visual { align-self: center; }
}
.sp-head, .sp-body, .sp-visual { min-width: 0; }
.sp .sp-kicker { color: var(--brass-on-dark); }
.sp-title { margin: 0 0 18px; max-width: 16ch; color: var(--on-dark); }
.sp-lead { margin: 0; }
.sp-audience { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; padding: 12px 16px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--brass-on-dark); background: rgba(255, 255, 255, .045); color: var(--on-dark); max-width: 40rem; }
.sp-audience .icon { flex: none; margin-top: 2px; color: var(--brass-on-dark); }

.sp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 960px) { .sp-points { margin-top: 30px; } }
.sp-point { display: flex; gap: 14px; align-items: flex-start; }
.sp-point-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--brass-on-dark);
  border: 1px solid rgba(242, 193, 64, .45); background: rgba(242, 193, 64, .08); }
.sp-point h3 { margin: 1px 0 3px; font-size: 1.14rem; font-weight: 500; color: var(--on-dark); }
.sp-point p { margin: 0; color: var(--on-dark-2); font-size: .97rem; max-width: 46ch; }

.sp-offer { display: inline-grid; gap: 4px; margin: 30px 0 0; padding: 16px 20px; border-radius: var(--radius);
  border: 1px solid rgba(242, 193, 64, .34); background: linear-gradient(180deg, rgba(242, 193, 64, .09), rgba(242, 193, 64, .02)); }
.sp-offer p { margin: 0; }
.sp-from { font-family: var(--font-display); font-size: 1.12rem; color: var(--on-dark); }
.sp-from strong { font-size: 1.75rem; font-weight: 500; letter-spacing: -.01em; color: var(--brass-on-dark); font-variant-numeric: tabular-nums; }
.sp-money { font-size: .9rem; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.sp-included { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--on-dark-2); }
.sp-included .icon { color: var(--brass-on-dark); }
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* .section-dark a färbt Links golden; Knöpfe behalten ihre eigenen Farben */
.sp .sp-actions .btn-primary { color: var(--on-brass); }
.sp .sp-actions .btn-ghost-light { color: var(--on-dark); }
.sp-actions .btn-primary .icon { transition: transform .25s var(--ease); }
.sp-actions .btn-primary:hover .icon { transform: translateX(3px); }

/* Visual: kleiner Vorher-Nachher-Regler, darunter Kurzvideo im Handyrahmen und Film in gleicher Höhe (Spalten im Verhältnis
   9:16 zu 16:9). Etiketten und Videoknöpfe aus credits.css. */
.sp-visual { display: grid; gap: 14px; }
.sp .ba-title { margin-bottom: 10px; font-size: .98rem; font-weight: 450; color: var(--on-dark-2); }
.sp-clips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 28.44fr); gap: 14px; align-items: start; }
.sp-clip { min-width: 0; }
.sp-stage.cr-stage { display: block; padding: 0; overflow: visible; background: none; }
.sp-clip-reel .sp-stage { aspect-ratio: 9 / 16; }
.sp-clip-film .sp-stage { aspect-ratio: 16 / 9; }
.sp-clip-reel .cr-phone { inset: 0; left: 0; transform: none; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 18px; padding: 4px; }
.sp-clip-reel .cr-phone .cr-video { border-radius: 14px; }
.sp-clip-film .cr-screen { height: 100%; border-radius: 12px; }
.sp-clip .cr-tag { left: 10px; bottom: 10px; }
.sp-clip-reel .cr-tag { left: 50%; transform: translateX(-50%); bottom: 12px; }
.sp-clip .cr-play { right: 8px; bottom: 8px; }
.sp-clip-reel .cr-play { right: 50%; bottom: auto; top: 10px; transform: translateX(50%); }
.sp-clip-name { margin: 8px 0 0; font-size: .86rem; line-height: 1.35; color: var(--on-dark-2); }
.sp-clip-name span { display: block; font-weight: 600; color: var(--brass-on-dark); }
.sp-caption { margin: 2px 0 0; font-size: .88rem; color: var(--on-dark-2); max-width: 62ch; }
/* Schmal: Handy etwas breiter als 9:16-Anteil, Etiketten und Knöpfe kleiner */
@media (max-width: 599px) {
  .sp-clips { grid-template-columns: minmax(0, 9fr) minmax(0, 16fr); gap: 10px; }
  .sp-clip .cr-tag { bottom: 8px; padding: 1px 7px; font-size: .66rem; }
  .sp-clip-film .cr-tag { left: 8px; }
  .sp-clip-reel .cr-phone { border-radius: 14px; padding: 3px; }
  .sp-clip-reel .cr-phone .cr-video { border-radius: 11px; }
  .sp-clip-reel .cr-play { top: 8px; }
  .sp-clip-name { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { .sp-actions .btn-primary .icon { transition: none; } }

/* ---------------------------------------------------------------- Paketabschnitt und Paketseite */
.bill-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: 0 0 26px; }
.bill-row .bill-toggle { margin: 0; }
.bill-credits { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--brass-text); text-underline-offset: .2em; }
.bill-credits .icon { flex: none; }
.plan-credits { align-items: flex-start; }
.plan-credits .icon { margin-top: 2px; }
.plan-credits p { margin: 0; }
.plan-result { margin-top: 4px !important; font-size: .9rem; font-weight: 400; line-height: 1.45; color: var(--on-dark-2); }
.plan-result .cr-n { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--brass-on-dark); font-variant-numeric: tabular-nums; }
.plan-price .plan-year-save { margin-top: 3px; font-size: .86rem; color: var(--on-dark); }

/* ---------------------------------------------------------------- Bestätigungsseite */
.sp-thanks { display: grid; gap: 18px; }
@media (min-width: 640px) { .sp-thanks { grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 24px; } }
.sp-thanks-media { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 3 / 2; background: var(--dark-3); }
.sp-thanks-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-thanks .panel-title { margin-top: 0; }
.sp-thanks-text p { margin: 0 0 6px; }
.sp-thanks-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px !important; }