/* ============================================================
   Screenpuppets — Kinosaal (Variante 1), Welle 1: Layout, Verzeichnis, Profil.
   Gilt unter body.sp-cinema.
   Seit Welle 3 tragen alle Puppet-Seiten diese Klasse. Vorlage: die Landing screenpuppets.com
   und die freigegebene Vorschau backend/public/sp-vorschau/vorschau-1-profile.html.
   Plan: docs/plans/2026-08-28-screenpuppets-kinosaal.md
   ============================================================ */

/* ---- Grundstimmung ---------------------------------------------------- */
.sp-cinema {
  --pc-pad: clamp(1.25rem, 5vw, 4rem);
  --pc-maxw: 1160px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  max-width: none;
  padding: 0;
}
html:has(body.sp-cinema) { background: var(--bg); }
/* Fuss immer unten, auch bei kurzen Seiten (Dashboard, leere Tabellen). */
body.sp-cinema { min-height: 100vh; display: flex; flex-direction: column; }
.sp-cinema > header { width: 100%; }
.sp-cinema > main { flex: 1 0 auto; }

/* Film-Korn wie auf der Landing */
.sp-cinema::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .06;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.sp-cinema a { color: inherit; }

/* ---- Kopf / Fuß ------------------------------------------------------- */
.sp-cinema > header {
  max-width: var(--pc-maxw);
  margin: 0 auto;
  padding: 1.2rem var(--pc-pad);
  border-bottom: 0;
  font-family: var(--sans);
  font-size: .84rem;
  letter-spacing: .02em;
  position: relative;
  z-index: 2;
}
.sp-cinema .logo {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.sp-cinema .logo em { color: var(--accent); }
.sp-cinema > header > nav { gap: .7rem; }
.sp-cinema nav a { color: var(--ink-muted); text-decoration: none; transition: color .25s ease; }
.sp-cinema nav a:hover { color: var(--ink); }
.sp-cinema nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
/* Der Pinselstrich aus puppet-cutouts.css (.puppet-app header nav a[aria-current]::after) passt nicht ins Kino. */
.puppet-app.sp-cinema header nav a[aria-current="page"] { color: var(--ink); padding-bottom: 2px; border-bottom: 1px solid var(--accent); }
.puppet-app.sp-cinema header nav a[aria-current="page"]::after { display: none; }
.sp-cinema nav span[aria-hidden] { opacity: .4; }

.sp-cinema > main { padding: 0; position: relative; z-index: 2; }

.sp-cinema > footer {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  color: var(--ink-muted);
  font-size: .8rem;
  padding: 2rem var(--pc-pad);
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Feedback-Knopf oberhalb des Korns */
.sp-cinema #sp-feedback-fab,
.sp-cinema .sp-feedback-modal { z-index: 60; }

/* ---- Gemeinsame Bausteine -------------------------------------------- */
.sp-cinema .pc-kicker {
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 .9rem;
  font-family: var(--sans);
}
.sp-cinema .pc-amp { color: var(--ink-muted); }
.sp-cinema .pc-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: .8;
  margin: 0 auto;
  max-width: var(--pc-maxw);
}

/* ---- Verzeichnis ----------------------------------------------------- */
.sp-cinema .pc-directory { max-width: var(--pc-maxw); margin: 0 auto; padding: 0 var(--pc-pad); }
.sp-cinema .pc-dir-hero { padding: 4rem 0 2.5rem; text-align: center; }
.sp-cinema .pc-dir-hero h1 {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0 0 .8rem;
  color: var(--ink);
  text-decoration: none;
  background: none;
}
.sp-cinema .pc-dir-hero .sp-lead { color: var(--ink-muted); margin: 0 auto 2rem; max-width: 44ch; font-size: 1rem; }
.sp-cinema .sp-dir-search { margin: 0 auto 1rem; max-width: 420px; }
.sp-cinema .sp-dir-search__input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: .7rem 1rem;
  border-radius: 2px;
  font: inherit;
  box-shadow: none;
}
.sp-cinema .sp-dir-search__input::placeholder { color: var(--ink-subtle); }
.sp-cinema .sp-dir-search__input:focus { outline: 0; border-color: var(--ink-muted); }
.sp-cinema .sp-dir-tabs { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }
/* ?liste=1 (Kopfzeilen-Links Spiel/Bau): Kapitelanfang weg, H1 nur fuer Screenreader. */
.sp-cinema .pc-dir-hero--liste { padding-top: 1.5rem; }
.sp-cinema .pc-dir-hero--liste h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.sp-cinema .sp-dir-tabs .sp-pill {
  padding: .55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-muted);
  font-size: .86rem;
  background: transparent;
  text-decoration: none;
  box-shadow: none;
  transform: none;
}
.sp-cinema .sp-dir-tabs .sp-pill--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-cinema .sp-dir-empty { color: var(--ink-muted); text-align: center; padding: 2rem 0 4rem; }

.sp-cinema .pc-grid {
  display: grid;
  /* Anzahl je nach Platz (Wunsch 2026-08-30) statt strikt 4 — im 1160px-
     Container ergibt 260px-Minimum 4 pro Reihe, schmaler 3 bzw. 2.
     Mobile-Override (2 Spalten) unten bleibt. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px;
  padding: 2rem 0 5rem;
}
@media (max-width: 720px) {
  .sp-cinema .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Der Textkasten liegt absolut auf dem Foto und waechst nach oben — ohne
     Deckel. Auf 375px verdeckte die Ueberschrift bis zu 86% des Portraits
     (gemessen 2026-08-31: Kachel 167x222, Kasten 191px). Zusatzschaden: der
     Verdunkelungs-Gradient in .pc-still::after setzt erst bei 45% Hoehe an,
     ein hoeherer Kasten ragt in den hellen Bereich und wird selbst schlecht
     lesbar. Auf dem Handy tragen Name + Rolle + Ort die Kachel; die
     Ueberschrift steht auf der Profilseite. Entscheidung Benno 2026-08-31 —
     Alternative war Kuerzen auf eine Zeile, siehe
     docs/plans/2026-08-31-mobil-feinschliff-screenpuppets.md */
  .sp-cinema .pc-still__headline { display: none; }
}
.sp-cinema .pc-still {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-alt);
  display: block;
  text-decoration: none;
  transform: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  border-radius: 0;
}
/* Die Verzeichnis-Suche setzt card.hidden; `display: block` oben wuerde das
   `.sp-profile-card[hidden]` aus puppet-cutouts.css sonst ueberstimmen. */
.sp-cinema .pc-still[hidden] { display: none; }
.sp-cinema .pc-still__photo { position: absolute; inset: 0; }
.sp-cinema .pc-still__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: transform .8s ease;
}
.sp-cinema .pc-still:hover .pc-still__photo img { transform: scale(1.04) !important; }
.sp-cinema .pc-still__photo .sp-card-curtain { width: 100%; height: 100%; display: block; }
.sp-cinema .pc-still__noimg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  font-family: var(--display);
  font-style: italic;
}
.sp-cinema .pc-still::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, oklch(0.10 0.012 55 / .92));
  pointer-events: none;
}
.sp-cinema .pc-still__cap { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1; }
.sp-cinema .pc-still__name {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
  color: var(--ink);
}
.sp-cinema .pc-still__meta { color: var(--ink-muted); font-size: .8rem; margin: .3rem 0 0; letter-spacing: .04em; }
.sp-cinema .pc-still__meta b { color: var(--accent-hi); font-weight: 500; }
.sp-cinema .pc-still--pending { cursor: default; }
/* Nur der Owner bekommt die Vorhang-Karte als Link — der Zeiger muss das
   zeigen, sonst hebt die Zeile darueber (cursor: default) den Link optisch
   wieder auf und die Karte sieht tot aus. */
.sp-cinema .pc-still--ownerlink { cursor: pointer; }
.sp-cinema .pc-still--pending .sp-card-loc--pending { color: var(--ink-muted); font-style: italic; }

/* ---- Profil: Grundgeruest -------------------------------------------- */
/* Die alte V2-Dossier-Shell ist ein 100vh-Raster ohne Seitenscroll mit
   fester Leiste links. Kinosaal ist eine normale scrollende Seite. */
body.puppet-app.sp-cinema:has(.pp-profile-page) {
  --pp-paper: var(--bg);
  --pp-paper-soft: var(--bg-alt);
  --pp-paper-deep: var(--bg-deep);
  --pp-rust: var(--accent);
  --pp-rust-dark: var(--accent-hi);
  --pp-ink: var(--ink);
  --pp-muted: var(--ink-muted);
  --pp-line: var(--line);
  --pp-gold: #d99e3e;
  height: auto;
  min-height: 100vh;
  display: block;
  background: var(--bg);
  overflow: visible;
}
body.puppet-app.sp-cinema:has(.pp-profile-page)::before { display: none; }
body.puppet-app.sp-cinema:has(.pp-profile-page) header {
  margin-left: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  padding: 1.2rem var(--pc-pad);
  font-family: var(--sans);
  font-size: .84rem;
}
body.puppet-app.sp-cinema:has(.pp-profile-page) .logo { font-size: 1.5rem; }
body.puppet-app.sp-cinema:has(.pp-profile-page) nav a { padding: 0 0 2px; }
body.puppet-app.sp-cinema:has(.pp-profile-page) nav a::after { display: none; }
body.puppet-app.sp-cinema:has(.pp-profile-page) nav span[aria-hidden] { display: inline; }
body.puppet-app.sp-cinema:has(.pp-profile-page) main { overflow: visible; }
body.puppet-app.sp-cinema:has(.pp-profile-page) > footer { display: block; }

.sp-cinema .pp-profile-page { height: auto; }
.sp-cinema .pp-profile-rail { display: none; }

/* Kopfbild */
.sp-cinema .pc-hero {
  position: relative;
  height: min(86vh, 820px);
  overflow: hidden;
  background: var(--bg-alt);
}
.sp-cinema .pc-hero--empty { height: min(38vh, 320px); background: linear-gradient(180deg, var(--bg-alt), var(--bg)); }
.sp-cinema .pc-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}
.sp-cinema .pc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, oklch(0.15 0.014 60 / .4), transparent 25%, oklch(0.15 0.014 60 / .15) 55%, var(--bg) 100%);
}
.sp-cinema .pc-hero__tools {
  position: absolute;
  right: var(--pc-pad);
  top: 1rem;
  z-index: 2;
}
.sp-cinema .pc-hero__tool {
  appearance: none;
  border: 1px solid oklch(0.93 0.018 80 / .35);
  background: oklch(0.15 0.014 60 / .65);
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sp-cinema .pc-hero__tool:hover { border-color: var(--accent); }

/* Titel unter dem Bild */
.sp-cinema .pc-title {
  position: relative;
  z-index: 1;
  max-width: var(--pc-maxw);
  margin: -5.5rem auto 0;
  padding: 0 var(--pc-pad);
}
.sp-cinema .pc-hero--empty + .pc-title { margin-top: -3rem; }
.sp-cinema .pc-back { display: inline-block; color: var(--ink-muted); font-size: .84rem; margin-bottom: 1.2rem; text-decoration: none; }
.sp-cinema .pc-back:hover { color: var(--ink); }
.sp-cinema .pc-title .pp-profile-sidebar__identity { margin: 0; text-align: left; }
.sp-cinema .pc-title .pp-profile-sidebar__identity h1 {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.sp-cinema .pc-title .pp-profile-quote {
  margin: .6rem 0 0;
  padding: 0;
  border: 0;
  background: none;
}
.sp-cinema .pc-title .pp-profile-quote::before,
.sp-cinema .pc-title .pp-profile-quote::after { display: none; }
.sp-cinema .pc-title .pp-profile-quote p {
  color: var(--ink-muted);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  margin: 0;
}

/* Shell: Haupttext links, Fakten rechts */
.sp-cinema .pp-profile-shell {
  width: auto;
  max-width: var(--pc-maxw);
  height: auto;
  margin: 0 auto;
  padding: 3rem var(--pc-pad) 5rem;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 3rem;
  border: 0;
}
.sp-cinema .pp-profile-sidebar {
  order: 2;
  height: auto;
  overflow: visible;
  padding: 0;
  border: 0;
  background: none;
}
.sp-cinema .pp-profile-v2 .pp-profile-v2-main,
.sp-cinema .pp-profile-v2-main {
  order: 1;
  height: auto;
  overflow: visible;
  padding: 0;
  background: none;
}

/* Sidebar-Inhalte */
.sp-cinema .pp-profile-portrait {
  width: min(100%, 150px);
  margin: 0 0 .6rem;
  background: none;
  box-shadow: none;
  padding: 0;
}
.sp-cinema .pp-profile-portrait::before { display: none; }
.sp-cinema .pp-profile-portrait__clip { border: 1px solid var(--line); }
.sp-cinema .pp-profile-portrait__clip img { filter: grayscale(1); }
.sp-cinema .pc-portrait-label { font-size: .74rem; color: var(--ink-subtle); margin: 0 0 1.4rem; max-width: 26ch; }
/* Oeffentlich: das Verzeichnis-Rund ist Wiederholung des Kopfbilds → weg. */
.sp-cinema .pp-profile-page:not(.pp-profile-v2--editable) .pp-profile-portrait { display: none; }

.sp-cinema .pp-profile-facts {
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 0;
  display: block;
  background: none;
}
.sp-cinema .pp-profile-fact { padding: 0; border: 0; background: none; }
.sp-cinema .pp-profile-facts dt {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 1rem;
}
.sp-cinema .pp-profile-facts dd { margin: .15rem 0 0; color: var(--ink); font-family: var(--sans); font-size: .98rem; }

.sp-cinema .pp-profile-contact-card {
  margin: 2rem 0 0;
  padding: 1.2rem 1.3rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: none;
}
.sp-cinema .pp-profile-contact-card h2 { font-family: var(--display); font-weight: 300; font-style: italic; font-size: 1.35rem; color: var(--ink); margin: 0 0 .4rem; }
.sp-cinema .pp-profile-contact-card p { color: var(--ink-muted); font-size: .9rem; margin: 0 0 1rem; }
.sp-cinema .pp-contact-trigger {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: .7rem 1.2rem;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.sp-cinema .pp-contact-trigger:hover { background: var(--accent-hi); }

/* Hauptspalte */
.sp-cinema .pp-profile-owner-tools {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 2rem;
  padding: .6rem .9rem;
  border: 1px dashed var(--line);
  border-radius: 2px;
  background: none;
  font-size: .82rem;
}
.sp-cinema .pp-profile-owner-tools__state { color: var(--ink-muted); }
.sp-cinema .pp-profile-owner-tools__button {
  color: var(--ink);
  border: 1px solid var(--line);
  background: transparent;
  padding: .35rem .8rem;
  border-radius: 999px;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  text-decoration: none;
}
.sp-cinema .pp-profile-owner-tools__button:hover { border-color: var(--accent); background: none; color: var(--ink); }

.sp-cinema .pp-profile-v2-section { margin: 0 0 3rem; }
.sp-cinema .pp-profile-v2-section__head { border-bottom: 0; margin-bottom: .8rem; padding: 0; }
.sp-cinema .pp-profile-v2-section__head h2,
.sp-cinema .pp-profile-kicker {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.7rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0;
}
.sp-cinema .pp-profile-v2-section__head h2 span { color: var(--ink-muted); font-size: .6em; }

/* Vita: reine Textspalte, kein Polaroid daneben */
.sp-cinema .pp-profile-v2-section--hero { display: block; }
.sp-cinema .pp-profile-v2-hero__copy .pp-profile-kicker { font-size: 1.7rem; margin: 0 0 .8rem; }
.sp-cinema .pp-profile-v2-bio {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink);
  opacity: .92;
  max-width: 62ch;
}

/* Produktionen: Kacheln im dunklen Raster statt horizontaler Strip */
.sp-cinema .pp-profile-v2-scroller .productions-grid--public {
  display: grid;
  /* Anzahl je nach Platz (Rueckbau 2026-08-30) — strikt 4 machte die Bilder
     auf schmaleren Fenstern zu klein. 320px-Minimum ergibt auf der breiten
     1600px-Zeile 4 pro Reihe, darunter 3 bzw. 2. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2px;
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
}
.sp-cinema .pp-profile-v2-scroller .productions-grid--public > * { width: auto; flex: none; }
.sp-cinema .pp-profile-v2-section--werke::after,
.sp-cinema .pp-profile-v2-section--werkstatt::after { display: none; }
.sp-cinema .production-card--public {
  background: var(--bg-alt);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  color: var(--ink);
}
.sp-cinema .production-card__title { color: var(--ink); font-family: var(--display); }

/* Showreel-Karten und Sprachdemos dunkel */
.sp-cinema .showreel-card,
.sp-cinema .voice-demo-row {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: none;
  color: var(--ink);
}
.sp-cinema .showreel-card__title,
.sp-cinema .voice-demo-row__title { color: var(--ink); }
.sp-cinema .voice-demo-row__sub { color: var(--ink-muted); }
.sp-cinema .voice-demo-row__bar { background: oklch(0.93 0.018 80 / .28); }
.sp-cinema .voice-demo-row__bar--played { background: var(--accent-hi); }

/* Werkgalerie */
.sp-cinema .pp-werk { background: var(--bg-alt); border: 0; }
.sp-cinema .pp-werk figcaption { color: var(--ink); }
.sp-cinema .pp-werk figcaption p { color: var(--ink-muted); }

/* Kontakt-Dialog */
.sp-cinema .pp-contact-dialog {
  background: var(--bg-alt);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.sp-cinema .pp-contact-dialog::backdrop { background: rgba(0,0,0,.6); }
.sp-cinema .pp-contact-dialog__title { font-family: var(--display); font-weight: 300; font-style: italic; color: var(--ink); }
.sp-cinema .pp-contact-dialog__lead { color: var(--ink-muted); }
.sp-cinema .pp-contact-dialog__close { color: var(--ink-muted); background: none; border: 0; }
/* puppet.css gibt .contact-form ein helles #f9fafb-Feld mit Padding — im Kino weg (2026-08-28). */
.sp-cinema .contact-form { background: transparent; padding: 0; border-radius: 0; }
.sp-cinema .contact-form label { color: var(--ink-muted); font-family: var(--sans); font-size: .82rem; }
.sp-cinema .contact-form input,
.sp-cinema .contact-form textarea {
  background: var(--bg-input);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 2px;
  font: inherit;
}
.sp-cinema .contact-form input:focus,
.sp-cinema .contact-form textarea:focus { outline: 0; border-color: var(--ink-muted); }
.sp-cinema .contact-form button[type="submit"] {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: .75rem 1.3rem;
  font: inherit;
  cursor: pointer;
}
.sp-cinema .contact-form .status { color: var(--ok); }

/* Fakten ohne gezeichnete Icons, Karten ohne Papier */
.sp-cinema .pp-profile-fact::before { display: none; }
.sp-cinema .pp-profile-fact { padding-left: 0; }
.sp-cinema .pp-profile-page .production-card__media--empty {
  background: linear-gradient(160deg, oklch(0.26 0.02 58), oklch(0.17 0.014 58));
}
.sp-cinema .pp-profile-page .production-card__media--empty::before { display: none; }
.sp-cinema .production-card__info-btn { color: var(--accent-hi); }
.sp-cinema .production-card__details-inner { background: var(--bg-alt); color: var(--ink); }

/* Reihenfolge wie in der freigegebenen Vorschau: Vita → Stimmen → Showreel →
   Produktionen → Werkstatt. DOM bleibt (Inline-Edit, Onboarding-Anker). */
.sp-cinema .pp-profile-v2-main { display: flex; flex-direction: column; }
.sp-cinema .pp-profile-owner-tools { order: 0; }
.sp-cinema .pp-profile-v2-section--hero { order: 1; }
.sp-cinema .pp-profile-v2-section--voice { order: 2; }
.sp-cinema .pp-profile-v2-section--showreel { order: 3; }
.sp-cinema .pp-profile-v2-section--werke { order: 4; }
.sp-cinema .pp-profile-v2-section--werkstatt { order: 5; }
.sp-cinema .pp-profile-visibility { order: 0; } /* ganz nach oben (Wunsch 2026-08-29) */

/* Werke + Werkstatt sind seit 2026-08-29 direkte Shell-Grid-Items (im Blade
   hinter der Hauptspalte): volle Breite als eigene Zeile unter Inhalt +
   Sidebar. Die order-Regeln oben (werke 4, werkstatt 5) sortieren sie ans
   Ende; main (1) und sidebar (2) teilen sich die erste Zeile.
   Seit dem Schaufenster-Umbau (Plan 2026-08-29-puppet-karten-schaufenster)
   duerfen die beiden Zeilen BREITER sein als die 1160px-Shell: bis 1600px,
   mittig. 100% = Shell-Innenbreite; die negative margin-inline zentriert
   den Ueberstand. 6rem Puffer (~48px Randabstand je Seite, Wunsch 2026-08-30) — auch damit
   Scrollen ausloest. */
.sp-cinema .pp-profile-shell > .pp-profile-v2-section--werke,
.sp-cinema .pp-profile-shell > .pp-profile-v2-section--werkstatt {
  grid-column: 1 / -1;
  --sp-row-w: min(1600px, 100vw - 6rem);
  width: var(--sp-row-w);
  margin-inline: calc((100% - var(--sp-row-w)) / 2);
}

/* Kompaktere Karten-Typo im Raster (Rueckbau 2026-08-30) — der grosse
   clamp(1.6rem…)-Titel aus puppet.css stapelt sich in ~320px-Karten zu
   Tuermen. */
.sp-cinema .pp-profile-v2-scroller .production-card__title {
  font-size: clamp(1.02rem, 1.5vw, 1.4rem);
  padding: 12px 6px 4px;
}
.sp-cinema .pp-profile-v2-scroller .production-card__summary,
.sp-cinema .pp-profile-v2-scroller .production-card__role,
.sp-cinema .pp-profile-v2-scroller .production-card__caption { font-size: 0.88rem; }
/* Laengenstufen der Beschreibung (siehe puppet.css) — Kino-Karten sind
   schmaler, darum nochmal eine Spur kleiner. */
.sp-cinema .pp-profile-v2-scroller .production-card__summary--sm { font-size: 0.8rem; }
.sp-cinema .pp-profile-v2-scroller .production-card__summary--xs { font-size: 0.74rem; }

/* „Projekt hinzufügen"-Kachel */
.sp-cinema .production-card--add {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--ink-muted);
}
.sp-cinema .production-card--add:hover,
.sp-cinema .production-card--add:focus-visible { border-color: var(--accent); background: var(--bg-alt); color: var(--ink); }
.sp-cinema .production-card--add-prominent { border-color: var(--accent); }
.sp-cinema .pp-profile-v2-add-label { color: inherit; }

/* Sichtbarkeits-Toggle: dunkle Karte statt Hell-Theme-Grau (Wunsch 2026-08-29). */
.sp-cinema .pp-profile-visibility__row {
  color: var(--ink);
  background: var(--bg-alt);
  border-color: var(--line);
  border-left-color: var(--accent);
}
.sp-cinema .pp-profile-visibility__status { color: var(--ink-muted); }
.sp-cinema .pp-profile-visibility__btn {
  background: transparent;
  border-color: var(--line);
  color: var(--accent-hi);
}
.sp-cinema .pp-profile-visibility__row[data-public="0"] {
  background: oklch(0.24 0.045 45 / 0.55);
}

/* Add-Dialog: Titelbild-/Titelvideo-Karten dunkel statt weiss (Wunsch 2026-08-29). */
.sp-cinema .pe-form-photo {
  background: var(--bg-alt);
  border-color: var(--line);
}
.sp-cinema .pe-form-photo__preview { border-color: var(--line); }

/* Inline-Edit-Hinweise lesbar halten */
.sp-cinema [data-edit-field][data-placeholder]:empty::before { color: var(--ink-subtle); }

/* ---- Handy ------------------------------------------------------------- */

/* ============================================================
   Welle 2: Dashboard, Anfragen, Kalender, Sammelbecken.
   Plan: docs/plans/2026-08-28-screenpuppets-kinosaal-welle-2.md
   ============================================================ */
.sp-cinema .pc-page { max-width: var(--pc-maxw); margin: 0 auto; padding: 3rem var(--pc-pad) 5rem; }
.sp-cinema .pc-page--narrow { max-width: 880px; }
.sp-cinema .pc-page h1,
.sp-cinema .pc-page__title {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 .6rem;
  color: var(--ink);
  background: none;
  text-decoration: none;
}
.sp-cinema .pc-page__lead { color: var(--ink-muted); margin: 0 0 2.4rem; max-width: 56ch; }
.sp-cinema .pc-section { margin-top: 2.6rem; }
.sp-cinema .pc-section__hint { color: var(--ink-muted); font-size: .9rem; margin: 0 0 1.4rem; }

/* Tafeln (ersetzen die Polaroids des Dashboards) */
.sp-cinema .pc-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
@media (max-width: 720px) { .sp-cinema .pc-panels { grid-template-columns: 1fr; } }
.sp-cinema .pc-panel {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 1.8rem 1.6rem 2rem;
  position: relative;
}
.sp-cinema .pc-panel--active { border-color: var(--accent-line); }
.sp-cinema .pc-panel--active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.sp-cinema .pc-panel h3 {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: 1.5rem;
  margin: 0 0 .5rem;
  color: var(--ink);
}
.sp-cinema .pc-panel__status { color: var(--ink-muted); font-size: .92rem; line-height: 1.5; margin: 0 0 1.2rem; }
.sp-cinema .pc-panel__status a { color: var(--accent-hi); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.sp-cinema .pc-panel__status a:hover { border-bottom-color: var(--accent-hi); }
.sp-cinema .pc-panel__tag { color: var(--accent-hi); font-style: normal; font-size: .68em; letter-spacing: .08em; text-transform: uppercase; margin-left: .5rem; font-family: var(--sans); }
.sp-cinema .pc-panel form { margin: 0; }

.sp-cinema .sp-btn { border-radius: 2px; font-family: var(--sans); transform: none; }
.sp-cinema .sp-btn--primary:hover { transform: none; background: var(--accent-hi); }
.sp-cinema .sp-btn--ghost { color: var(--ink-muted); border-color: var(--line); }
.sp-cinema .sp-btn--ghost:hover { color: var(--ink); border-color: var(--ink-muted); }

.sp-cinema .pc-links {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: .9rem;
}
.sp-cinema .pc-links a { color: var(--ink-muted); text-decoration: none; }
.sp-cinema .pc-links a:hover { color: var(--ink); }

/* Tabellen (Anfragen, Kalender) */
.sp-cinema .pc-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--bg-alt); }
.sp-cinema .pc-table { width: 100%; border-collapse: collapse; margin: 0; font-size: .9rem; }
.sp-cinema .pc-table th,
.sp-cinema .pc-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.sp-cinema .pc-table th {
  background: var(--bg-deep);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.sp-cinema .pc-table tbody tr:last-child td { border-bottom: 0; }
.sp-cinema .pc-table tbody tr:hover td { background: oklch(0.22 0.016 58); }
.sp-cinema .pc-table__empty { color: var(--ink-muted); font-style: italic; text-align: center; padding: 2.4rem 1rem !important; }
.sp-cinema .pc-table__muted { color: var(--ink-muted); }
.sp-cinema .pc-pagination { margin-top: 1.2rem; color: var(--ink-muted); }

/* Sammelbecken-Wizard: nur die harten Raender, der Rest ist tokenbasiert */
.sp-cinema .pi-panel,
.sp-cinema .pi-list a,
.sp-cinema .pi-doc,
.sp-cinema .pi-foot { border-color: var(--line); }
.sp-cinema .pi-panel, .sp-cinema .pi-list a, .sp-cinema .pi-doc { border-radius: 2px; }
.sp-cinema .pi-list a:hover { border-color: var(--accent-hi); color: var(--ink); }
.sp-cinema .pi-h, .sp-cinema .pi-title { font-family: var(--display); font-style: italic; font-weight: 300; }


/* ============================================================
   Welle 3: Auth-Seiten (Login, Signup, Passwort, Kein Zugriff).
   Plan: docs/plans/2026-08-28-screenpuppets-kinosaal-welle-3.md
   ============================================================ */
/* puppet-cutouts.css setzt diese --sp-* hart hell; hier auf die Kino-Tokens legen. */
.sp-cinema {
  --sp-bg-input:    var(--bg-input);
  --sp-accent-soft: var(--accent-soft);
  --sp-accent-line: var(--line);
  --sp-ink-subtle:  var(--ink-subtle);
  --sp-photo-bg:    var(--photo-bg);
  --sp-photo-text:  var(--photo-text);
  --sp-r-sm: 2px; --sp-r-md: 2px; --sp-r-lg: 4px;
}
.sp-cinema .sp-auth-stage { padding: 4rem var(--pc-pad) 6rem; }
.sp-cinema .pc-auth-card {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  padding: 2.6rem 2.2rem 2.2rem;
  box-shadow: 0 30px 80px oklch(0 0 0 / .45);
}
.sp-cinema .pc-auth-card h1 {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 2rem;
  letter-spacing: -.01em;
  color: var(--ink);
  background: none;
}
.sp-cinema .pc-auth-card .sp-subtitle,
.sp-cinema .pc-auth-card .sp-auth-footer,
.sp-cinema .pc-auth-card .signup-info { color: var(--ink-muted); }
.sp-cinema .pc-auth-card a { color: var(--accent-hi); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.sp-cinema .pc-auth-card a:hover { border-bottom-color: var(--accent-hi); }
.sp-cinema .pc-auth-card a.sp-btn { border-bottom: 1px solid transparent; }
.sp-cinema .pc-auth-card a.sp-btn--primary { border-color: var(--accent); color: #fff; }
.sp-cinema .sp-field-label { color: var(--ink-muted); }
.sp-cinema .sp-input {
  background: var(--bg-input);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 2px;
}
.sp-cinema .sp-input:focus { border-color: var(--ink-muted); }
.sp-cinema .sp-input::placeholder { color: var(--ink-subtle); }
.sp-cinema .sp-or-divider { color: var(--ink-subtle); }
.sp-cinema .sp-or-divider::before, .sp-cinema .sp-or-divider::after { background: var(--line); opacity: 1; }
.sp-cinema .sp-btn--outline { color: var(--ink); border-color: var(--ink-muted); }
.sp-cinema .sp-btn--outline:hover { background: var(--bg-input); }

/* Signup ist eine Standalone-Seite (kein Layout): Body zentriert die Buehne selbst. */
.sp-cinema .signup-stage { max-width: 540px; width: 100%; position: relative; z-index: 2; }
.sp-cinema .signup-stage .sp-wordmark { font-family: var(--display); color: var(--ink); font-size: 1.5rem; }
.sp-cinema .signup-stage .sp-wordmark em { color: var(--accent); }
.sp-cinema .approval-note,
.sp-cinema .area-check { background: var(--bg-input); border-color: var(--line); color: var(--ink-muted); border-radius: 2px; }
.sp-cinema .area-check { color: var(--ink); }
.sp-cinema .area-check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sp-cinema .consent { color: var(--ink-muted); }
.sp-cinema .signup-error { color: var(--accent-hi); border-color: var(--accent-line); }
body.sp-cinema:has(.signup-stage) { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }

@media (max-width: 760px) {
  .sp-cinema > header { flex-wrap: wrap; gap: .6rem; }
  .sp-cinema > header > nav { flex-wrap: wrap; gap: .35rem .7rem; }
  .sp-cinema .pc-hero { height: min(60vh, 520px); }
  .sp-cinema .pc-title { margin-top: -4rem; }
  .sp-cinema .pp-profile-shell { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
  /* puppet.css loest die Sidebar auf Handy in display:contents auf — dann
     stehen die Fakten vor der Vita. Hier bleibt sie ein Block hinter dem Text. */
  .sp-cinema .pp-profile-sidebar { order: 2; display: block; }
  .sp-cinema .pp-profile-v2-scroller .productions-grid--public { grid-template-columns: repeat(2, 1fr); }
}

/* ── Eingabefelder im Kino (Nachtrag 2026-08-28) ──────────────────────
   puppet.css setzt an vielen Stellen `background: #fff` fest, waehrend
   --ink jetzt hell ist: helle Schrift auf weiss, unlesbar (Bug im
   Sprachdemo-Dialog). Eine Regel fuer alle Felder statt 20 Einzelfixes. */
.sp-cinema input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.sp-cinema select,
.sp-cinema textarea {
  background: var(--bg-input);
  color: var(--ink);
  border-color: var(--line);
  color-scheme: dark;
}
.sp-cinema input::placeholder,
.sp-cinema textarea::placeholder { color: var(--ink-subtle); }
.sp-cinema input:focus,
.sp-cinema select:focus,
.sp-cinema textarea:focus { border-color: var(--accent); }
.sp-cinema input[type="file"]::file-selector-button {
  background: var(--bg-alt);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 4px 10px;
  margin-right: 10px;
}

/* Inbox-Antwortfeld (Plan: docs/plans/2026-09-01-inbox-antwortfeld.md) */
.sp-cinema .pc-inbox-reply { margin-top: 0.8em; display: grid; gap: 8px; max-width: 520px; }
.sp-cinema .pc-inbox-reply textarea {
  width: 100%;
  background: var(--bg-input);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font: inherit;
  resize: vertical;
}
.sp-cinema .pc-inbox-reply button { justify-self: start; }
.sp-cinema .pc-flash { padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line); }
.sp-cinema .pc-flash--ok { border-color: var(--ok); color: var(--ok); }
.sp-cinema .pc-flash--error { border-color: var(--accent-line); color: var(--accent-hi); }