/* TRIANGLE Studio — Oberfläche für Website-Pflege und Reels.
   Gestaltung nach dem abgenommenen Prototyp (reel-archiv-prototyp): kantige
   Flächen statt runder Ecken, Haarlinien, rote Akzente, kleine Versalien als
   Beschriftung. Schrift bewusst systemeigen — keine externe Schriftquelle,
   die bei jedem Aufruf kontaktiert werden müsste. */
:root {
  --paper: #FFFFFF;
  --ink: #14130F;
  --red: #F5333F;
  --hairline: #E8E6E2;
  --text: #2E2C27;
  --text-2: #3C3934;
  --text-3: #5C5850;
  --meta: #8A8681;
  --label: #A29D97;
  --outline-subtle: #D9D5CE;
  --overlay: rgba(8, 8, 9, 0.94);

  --space-2: 36px;
  --page-max: 1280px;
  --page-pad: 40px;
  --page-pad-mobile: 20px;
  --gutter: 24px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh;
  background: var(--paper); color: var(--text);
  font-family: var(--font); font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }
.lade { padding: 80px; color: var(--meta); text-align: center; font-size: 12.5px; }
@media (max-width: 900px) { .wrap { padding: 0 var(--page-pad-mobile); } }

/* ---------- Kopfzeile ---------- */
.top-header {
  border-bottom: 1px solid var(--hairline); padding: 18px var(--page-pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
}
@media (max-width: 900px) { .top-header { grid-template-columns: 1fr; justify-items: center; row-gap: 12px; } }
@media (max-width: 900px) { .top-header { padding: 14px var(--page-pad-mobile); } }
.brand-block { display: flex; align-items: center; gap: 14px; }
.brand-mark { font-weight: 800; letter-spacing: .08em; font-size: 15px; color: var(--ink); }
.brand-mark span { color: var(--red); }
.tool-name {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--label); border-left: 1px solid var(--outline-subtle); padding-left: 14px;
}
.nav-tabs { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.nav-tab {
  background: none; border: 0; padding: 0 0 4px; cursor: pointer;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--meta); border-bottom: 2px solid transparent;
}
.nav-tab:hover { color: var(--ink); }
.nav-tab.active { color: var(--ink); border-bottom-color: var(--red); }
/* Marke links, Knöpfe rechts, Bereiche in der Mitte — so sitzen sie genau
   über der zweiten Menüebene, die ebenfalls mittig steht. */
.konto { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.sub-tabs {
  border-bottom: 1px solid var(--hairline); padding: 12px var(--page-pad);
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
}
@media (max-width: 900px) { .sub-tabs { padding: 10px var(--page-pad-mobile); } }
.sub-tab { background: none; border: 0; padding: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--meta); }
.sub-tab:hover { color: var(--ink); }
.sub-tab.active { color: var(--ink); }

/* ---------- Seitenkopf ---------- */
.title-row { padding: 32px 0 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--ink); }
h2 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.sub-line { color: var(--meta); font-size: 12.5px; line-height: 1.6; margin: 6px 0 24px; max-width: 76ch; }
.leer { color: var(--meta); font-size: 12.5px; padding: 24px 0; }
.hinweis {
  border-left: 2px solid var(--red); background: #fdf6f6; color: var(--text-2);
  padding: 12px 16px; font-size: 12.5px; line-height: 1.6; margin-bottom: 24px;
}
.zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.fuellen { flex: 1; }

/* ---------- Knöpfe ---------- */
.btn-outline {
  border: 1px solid var(--outline-subtle); background: var(--paper); color: var(--text-2);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 8px 12px; cursor: pointer; white-space: nowrap; display: inline-block;
}
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-outline.danger:hover { border-color: var(--red); color: var(--red); }
.btn-outline:disabled { opacity: .45; cursor: not-allowed; }
.btn-cta {
  background: var(--red); color: #fff; border: 1px solid var(--red);
  padding: 12px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
}
.btn-cta:hover:not(:disabled) { background: #d81f2a; border-color: #d81f2a; }
.btn-cta:disabled { background: var(--paper); color: var(--label); border-color: var(--outline-subtle); cursor: not-allowed; }
.btn-cta.breit { width: 100%; margin-top: 18px; }
/* Dasselbe für den Löschen-Knopf unter dem Speichern, damit beide gleich
   breit untereinander stehen. */
.btn-outline.breit { width: 100%; }

/* ---------- Formularfelder ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; min-width: 0; }
/* Dateifelder bringen eine feste Eigenbreite mit und schieben sich sonst über
   das Nachbarfeld. */
input[type=file] { max-width: 100%; font-size: 12.5px; }
.field label { font-size: 10.5px; color: var(--label); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.field input, .field textarea, .field select, .suche input {
  padding: 9px 0; border: 0; border-bottom: 1px solid var(--outline-subtle);
  background: transparent; color: var(--ink); font-size: 14px; font-family: var(--font); width: 100%;
}
.field textarea { min-height: 80px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .suche input::placeholder { color: var(--label); }
.field input:focus, .field textarea:focus, .field select:focus, .suche input:focus { outline: 0; border-bottom-color: var(--ink); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; }
.breit-feld { grid-column: 1 / -1; }
.schalter { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--text-2); margin-top: 10px; }
.schalter input { width: auto; }
.suche { max-width: 280px; flex: 1; }
.block { border-top: 1px solid var(--hairline); padding: 4px 0 28px; margin-top: 28px; }

/* ---------- Filmraster (das abgenommene Muster) ---------- */
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px var(--gutter); }
.work-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.work-media { position: relative; aspect-ratio: 16/9; background: var(--ink); overflow: hidden; cursor: pointer; }
.work-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bewegte Vorschau von Bunny: liegt über dem Standbild, erscheint beim
   Darüberfahren — dasselbe Verhalten wie auf der Website. */
.work-media .vorschau { opacity: 0; transition: opacity .18s ease; }
.work-media:hover .vorschau { opacity: 1; }
/* Slate-Filme haben kein Standbild. Statt eines Platzhalters mitten im Bild
   nur ein dezenter Verlauf und unten links ein kleiner Hinweis — so bleibt
   das Abspielzeichen in der Mitte frei. */
.work-placeholder {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start;
  background: linear-gradient(145deg, #20201b, var(--ink));
  color: #6B6862; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; padding: 10px 12px;
}
/* Vorschau beim Darüberfahren: springt durch mehrere Stellen des Films. */
.work-media video.shuffle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--ink);
}
.work-badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 7px; background: rgba(255,255,255,.92); color: var(--ink);
}
/* KI-Marke neben dem Filmtitel. Sie stand zuerst auf dem Standbild, verdeckte
   dort aber einen Teil des Bildes — bei genau diesen Filmen ist das Bild das
   Argument. Als Umriss statt als Fläche: Sie soll die Zeile informieren und
   nicht wie ein anklickbarer Knopf aussehen. */
.ki-marke {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 5px; border: 1px solid var(--outline-subtle); color: var(--meta);
  white-space: nowrap;
}
.lc-ki {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 6px; background: rgba(255,255,255,.18); color: #fff;
}
.work-dauer { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: 10px; padding: 2px 6px; letter-spacing: .04em; }
.work-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.work-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); flex: 1; min-width: 0; }
.work-card:hover .work-title { color: var(--red); }
.work-meta { font-size: 10.5px; color: var(--meta); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }
.work-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.select-pill {
  flex: none; border: 1px solid var(--outline-subtle); background: var(--paper); color: var(--text-3);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 9px; cursor: pointer; white-space: nowrap;
}
.select-pill:hover { border-color: var(--ink); color: var(--ink); }
.select-pill.on { background: var(--red); border-color: var(--red); color: #fff; }
.select-pill.on:hover { background: var(--red); color: #fff; }
.select-pill.danger:hover { border-color: var(--red); color: var(--red); }

/* ---------- Reel-Baukasten ---------- */
.builder { display: grid; grid-template-columns: 250px 1fr 340px; gap: 0; align-items: start; }
@media (max-width: 1180px) { .builder { grid-template-columns: 1fr; } }

.talent-rail { border-right: 1px solid var(--hairline); padding: 0 28px 40px 0; min-width: 0; }
@media (max-width: 1180px) { .talent-rail { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 0 0 24px; } }
/* Kein eigener Rollbalken mehr: Die Spalte darf so lang werden wie ihre Namen.
   Durch das Filmraster rechts rollt man ohnehin, und eine auf 640px
   abgeschnittene Liste kostete nur einen zweiten, getrennten Rollvorgang.
   Schmal bleibt der Deckel: dort steht die Spalte oben und wuerde sonst die
   Filme weit nach unten schieben. */
.talent-list { display: flex; flex-direction: column; }
@media (max-width: 1180px) { .talent-list { max-height: 300px; overflow-y: auto; } }
.talent-folder { border-top: 1px solid var(--hairline); }
.talent-folder:first-child { border-top: 0; }
.talent-folder-head { width: 100%; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; }
.folder-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--label); display: flex; align-items: center; gap: 8px; }
.folder-chevron { font-size: 9px; color: var(--meta); transition: transform .15s ease; display: inline-block; }
.folder-chevron.open { transform: rotate(90deg); }
.folder-count { font-size: 10px; color: var(--meta); }
/* Name und Anzahl nebeneinander statt untereinander: bei 34 Talenten spart
   das rund die Hälfte der Höhe und man muss deutlich weniger rollen. */
.talent-item {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 5px 6px 5px 18px; cursor: pointer;
  display: flex; align-items: baseline; gap: 8px; color: var(--text);
}
.talent-item:hover .name { color: var(--red); }
.talent-item.active { background: var(--ink); }
.talent-item.active .name { color: var(--paper); }
.talent-item.active .count { color: var(--outline-subtle); }
.talent-item .name { font-size: 13.5px; font-weight: 600; transition: color .12s ease; flex: 1; min-width: 0; }
.talent-item .count { font-size: 10px; color: var(--meta); letter-spacing: .06em; font-variant-numeric: tabular-nums; }

.works-main { padding: 0 var(--gutter); min-width: 0; }
@media (max-width: 1180px) { .works-main { padding: 24px 0; } }
.works-head { padding: 16px 0; }

.tray { padding: 0 0 40px 28px; min-width: 0; }
@media (max-width: 1180px) { .tray { padding: 24px 0; border-top: 1px solid var(--hairline); } }
.tray-head { padding: 16px 0 4px; }
.tray-list { list-style: none; margin: 0; padding: 8px 0 4px; display: flex; flex-direction: column; }
/* Trennt die Auswahl nach Talent, wenn mehrere im Reel sind — so wie der
   Kunde das Reel später sieht. */
.tray-trenner {
  list-style: none; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--red); padding: 14px 2px 5px;
  border-bottom: 1px solid var(--red);
  display: flex; align-items: center; gap: 8px;
}
/* Die Pfeile schieben das Talent mit allen seinen Filmen — deshalb sitzen sie
   an der Namenszeile und nicht an den einzelnen Filmen darunter. */
.trenner-knoepfe { margin-left: auto; display: flex; gap: 2px; }
.trenner-knoepfe .mini {
  border: 0; background: none; color: var(--red); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 1px 5px;
}
.trenner-knoepfe .mini:hover:not(:disabled) { color: var(--ink); }
.trenner-knoepfe .mini:disabled { opacity: .25; cursor: default; }
.tray-list > .tray-trenner:first-child { padding-top: 4px; }

.tray-item { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--hairline); padding: 9px 2px; }
.tray-item .num { font-size: 11px; font-weight: 600; color: var(--red); flex: none; width: 18px; }
.tray-item .t { font-size: 12.5px; flex: 1; line-height: 1.3; color: var(--text-2); min-width: 0; }
.tray-item .mini { flex: none; border: 0; background: none; color: var(--meta); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }
.tray-item .mini:hover { color: var(--ink); }
.tray-item .mini.rm:hover { color: var(--red); }

.link-box { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; }
.link-row { display: flex; border: 1px solid var(--outline-subtle); }
.link-row input { flex: 1; min-width: 0; padding: 9px 10px; border: 0; background: transparent; color: var(--text-2); font-size: 11.5px; font-family: var(--font); }
.link-row input:focus { outline: 0; }
.btn-copy {
  border: 0; border-left: 1px solid var(--outline-subtle); background: var(--hairline); color: var(--ink);
  padding: 0 14px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
}
.btn-copy:hover { background: var(--ink); color: #fff; }

/* ---------- Reel- und Talentlisten ---------- */
.reel-card { border-bottom: 1px solid var(--hairline); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.reel-card-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.reel-card-tag {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--meta);
  border: 1px solid var(--outline-subtle); padding: 2px 6px; margin-left: 8px; white-space: nowrap;
}
.reel-card-tag.rot { color: var(--red); border-color: var(--red); }
.reel-card-meta { font-size: 11px; color: var(--meta); text-transform: uppercase; letter-spacing: .05em; margin-top: 5px; }
.reel-card-actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }

.talent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 20px 16px; }
.talent-card { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.talent-card-media { position: relative; aspect-ratio: 4/5; background: #EDEAE5; overflow: hidden; }
.talent-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.talent-card-initialen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #C6C1B9; letter-spacing: .04em; }
.talent-card:hover .talent-card-name { color: var(--red); }
.talent-card-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); transition: color .12s ease; }
.talent-card-rolle { display: block; font-size: 10px; color: var(--meta); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

/* ---------- Anmeldung ---------- */
.anmeldung { max-width: 320px; margin: 16vh auto; padding: 0 20px; }
.anmeldung .brand-mark { font-size: 18px; margin-bottom: 28px; display: block; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: var(--overlay); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 56px 40px; }
@media (max-width: 640px) { .lightbox { padding: 70px 16px 24px; } }
.lightbox-close { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox-inner { width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: 16px; }
.lightbox-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.lightbox-frame video, .lightbox-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.lightbox-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; flex-wrap: wrap; }
.lc-title { font-size: 15px; font-weight: 600; }
.lc-meta { font-size: 10.5px; color: #a6a29b; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.lightbox-nav { display: flex; gap: 10px; align-items: center; }
/* Nur die Pfeile sind quadratisch — die Schaltflächen daneben brauchen
   ihre Breite, sonst schiebt sich die Beschriftung übereinander. */
.lightbox-nav button:not(.lightbox-aktion) {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff;
  width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex: none;
}
.lightbox-nav button:not(.lightbox-aktion):hover { background: rgba(255,255,255,.18); }
.lightbox-nav svg { width: 16px; height: 16px; }

/* Auswahlfenster (Filme aus Bunny, Filme fürs Reel) */
/* Über der Lightbox (z-index 60): Der Standbild-Dialog lässt sich aus der
   Großansicht heraus öffnen, und dann lag deren fast schwarze Fläche
   (--overlay, 94 % deckend) vor dem Dialog — der Film im Dialog sah
   abgedunkelt aus, ausgerechnet beim Aussuchen des Bildes. */
.modal { position: fixed; inset: 0; background: rgba(20,19,15,.72); z-index: 70; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 5vh 20px; }
.modal-box { background: var(--paper); max-width: 1000px; width: 100%; padding: 28px 32px 36px; position: relative; margin-bottom: 5vh; }

/* ---------- Meldung ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 12px 18px; z-index: 80;
}
.toast.fehler { background: var(--red); }
.toast { display: flex; align-items: center; gap: 14px; }
/* Abbrechen im laufenden Upload. */
.toast-knopf {
  flex: none; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff;
  font: inherit; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 9px; cursor: pointer;
}
.toast-knopf:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.toast-knopf:disabled { opacity: .5; cursor: default; }

/* ---------- Geteilte Reel-Seite (Kundenansicht) ---------- */
.reel-top { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--page-pad) 0; max-width: var(--page-max); margin: 0 auto; }
.reel-head { padding: var(--space-2) var(--page-pad) 22px; max-width: var(--page-max); margin: 0 auto; }
@media (max-width: 900px) { .reel-top { padding: 18px var(--page-pad-mobile) 0; } .reel-head { padding: 28px var(--page-pad-mobile) 20px; } }
/* Talentname und Projektname stehen gleich groß untereinander — auf dem Reel
   ist das Talent genauso wichtig wie das Projekt. Die Sperrung ist bei dieser
   Größe deutlich kleiner als bei einer Zeile in Kleinschrift, sonst läuft ein
   langer Name auf dem Handy über zwei Zeilen. */
.reel-head .eyebrow {
  /* Rund ein Drittel kleiner als der Projektname — gut lesbar, nimmt ihm
     aber nicht die Hauptrolle. */
  font-size: clamp(17px, 2.4vw, 27px);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--red);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 2px;
}
.reel-head h1 { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.08; margin: 0 0 8px; }
/* Foto und Vita des Talents, neben dem Download-Knopf bzw. am Namenstrenner. */
.reel-head .btn-outline.klein, .gruppen-unterlagen .btn-outline.klein {
  font-size: 10.5px; padding: 7px 12px; margin-left: 10px; vertical-align: middle;
}
.gruppen-trenner { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.gruppen-unterlagen { display: inline-flex; gap: 0; }

.reel-head .sub { color: var(--meta); font-size: 12.5px; margin: 0; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.reel-grid-wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad) 40px; }
@media (max-width: 900px) { .reel-grid-wrap { padding: 0 var(--page-pad-mobile) 32px; } }
.reel-grid { display: grid; gap: 36px 28px; grid-template-columns: repeat(3, 1fr); }
.reel-grid.spalten-1 { grid-template-columns: 1fr; max-width: 860px; }
.reel-grid.spalten-2 { grid-template-columns: repeat(2, 1fr); }
.reel-grid.spalten-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .reel-grid.spalten-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .reel-grid { grid-template-columns: 1fr !important; } }
.reel-fuss {
  max-width: var(--page-max); margin: 0 auto; padding: 24px var(--page-pad) 48px;
  border-top: 1px solid var(--hairline); color: var(--meta); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
}
.reel-fuss a:hover { color: var(--ink); }


/* ---------- Logo ---------- */
.logo { height: 22px; width: auto; display: block; }
.anmeldung .logo { height: 26px; }

/* ---------- Aufklappbare Gruppen (Talente nach Kategorie) ---------- */
.gruppe { border-top: 1px solid var(--hairline); margin-top: 8px; }
.gruppe:first-of-type { border-top: 0; }
.gruppen-kopf {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; padding: 16px 2px 12px;
}

/* ---------- Liste mit Ziehsortierung ---------- */
.tray-item .griff { color: var(--outline-subtle); font-size: 13px; flex: none; cursor: grab; letter-spacing: -1px; }
.tray-item.dragging { opacity: .35; }
.tray-item.ueber { border-bottom-color: var(--red); }

/* Filmkacheln in der Website-Pflege lassen sich ziehen. Gegriffen werden darf
   überall auf der Kachel; der Punktegriff bei den Knöpfen ist der Hinweis
   darauf. Bild und Film selbst dürfen nicht ihren eigenen Bild-Zieh-Vorgang
   starten, sonst kommt das Sortieren gar nicht erst zustande. */
.work-card.ziehbar img,
.work-card.ziehbar video { -webkit-user-drag: none; user-drag: none; }
.work-card.dragging { opacity: .35; }
.work-card.ueber { outline: 2px solid var(--red); outline-offset: 4px; }
.griff-pill { cursor: grab; color: var(--outline-subtle); letter-spacing: -1px; }

/* ---------- Mitwirkende an einem Film ---------- */
/* Kampagne: mehrere Fassungen eines Spots liegen im Studio zusammen. */
.verweis {
  background: none; border: 0; padding: 0; font: inherit; color: var(--red);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.hervorgehoben { outline: 2px solid var(--red); outline-offset: 5px; }
.kampagnen-pill { border-color: var(--red); color: var(--red); }
.kampagnen-pill:hover { background: var(--red); color: #fff; }
.kampagnen-fahne {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--red); margin-bottom: 3px;
}

/* Rollen ankreuzen im Bearbeiten-Dialog.
   Der Hinweis steht in einem .field, und `.field label` (zwei Klassen) sticht
   eine Regel mit nur einer — die Beschriftung wurde dadurch winzig, in
   Großbuchstaben und lief aus dem Kästchen heraus. Deshalb hier überall
   dieselbe Gewichtung und die geerbten Werte ausdrücklich zurückgesetzt. */
.rollen-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.field .rollen-wahl label.rollen-haken {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--outline-subtle); background: var(--paper);
  padding: 9px 14px; user-select: none; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--ink);
}
.field .rollen-wahl label.rollen-haken:hover { border-color: var(--ink); }
.field .rollen-wahl label.rollen-haken:has(input:checked) {
  border-color: var(--red); color: var(--red); font-weight: 600;
}
.field .rollen-wahl label.rollen-haken input {
  accent-color: var(--red); margin: 0; width: 15px; height: 15px; flex: none;
}

.mitwirkende { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mitwirkend-zeile { display: flex; gap: 8px; align-items: center; }
.mitwirkend-zeile input {
  flex: 1 1 auto; min-width: 0; padding: 9px 10px;
  border: 1px solid var(--outline-subtle); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 13px;
}
.mitwirkend-zeile input:focus { outline: none; border-color: var(--ink); }
.mitwirkend-zeile input[readonly] { background: var(--hairline, #f3f2f0); color: var(--text-3); }
.mitwirkend-rolle { flex: 0 0 190px; }
.mitwirkend-zeile .select-pill { flex: none; }
.tray-thumb { flex: none; width: 64px; aspect-ratio: 16/9; background: var(--ink); overflow: hidden; }
.tray-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tray-item .t small { color: var(--meta); font-size: 10.5px; }
.breit-liste { max-width: 620px; }

/* ---------- Bilder im Über-uns-Bereich ---------- */
.bilder-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.bild-kachel { display: flex; flex-direction: column; gap: 8px; }
.bild-kachel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #EDEAE5; }

/* ---------- Herunterladen auf der geteilten Seite ---------- */
.tile-dl {
  flex: none; border: 1px solid var(--outline-subtle); background: var(--paper); color: var(--text-2);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 2px;
}
.tile-dl:hover { border-color: var(--ink); color: var(--ink); }
.tile-dl svg { width: 13px; height: 13px; }
.reel-grid .work-info { align-items: flex-start; }
.reel-grid .work-title { display: block; }
.reel-grid .work-meta { display: block; }


/* ---------- Symbol-Logo auf der geteilten Seite ---------- */
.logo-symbol { height: 48px; width: auto; display: block; }
@media (max-width: 640px) { .logo-symbol { height: 38px; } }

/* Trenner zwischen den Talenten, wenn ein Reel mehrere zeigt */
.gruppen-trenner {
  font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  color: var(--red); border-bottom: 1px solid var(--hairline);
  padding-bottom: 12px; margin: 48px 0 26px;
}
.reel-grid-wrap > .gruppen-trenner:first-child { margin-top: 0; }

/* Bühne zum Aussuchen eines Standbilds */
.standbild-buehne { background: #000; aspect-ratio: 16/9; cursor: pointer; overflow: hidden; }
.standbild-buehne.verschiebbar { cursor: grab; }
.standbild-buehne.verschiebbar:active { cursor: grabbing; }
/* Eigene Steuerleiste unter dem Film. Die des Browsers liegt auf dem Bild und
   dunkelt es ab — beim Aussuchen eines Standbildes genau falsch. */
.standbild-steuerung { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.standbild-steuerung .select-pill { min-width: 38px; text-align: center; font-size: 12px; }
.standbild-steuerung input[type=range] { flex: 1 1 auto; accent-color: var(--red); cursor: pointer; }
.standbild-zeit {
  flex: none; font-size: 11px; letter-spacing: .05em; color: var(--meta);
  font-variant-numeric: tabular-nums; min-width: 86px; text-align: right;
}
.standbild-buehne video { width: 100%; height: 100%; object-fit: contain; display: block; transform-origin: 0 0; }
/* Die Bühne behält immer das Format der Kachel auf der Website — sie ist die
   Vorschau darauf, nicht auf den Film. Deshalb hier keine Höhenbegrenzung,
   die das Seitenverhältnis verziehen würde. */
.standbild-zoom { margin-top: 8px; }


/* ---------- Personen auf der About-Seite ---------- */
.person-block {
  display: grid; grid-template-columns: 200px 1fr; gap: 28px;
  border-top: 1px solid var(--hairline); padding: 28px 0;
}
@media (max-width: 760px) { .person-block { grid-template-columns: 1fr; gap: 16px; } }
.person-foto { position: relative; }
.person-foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: #EDEAE5; display: block; }
.person-foto .talent-card-initialen { position: static; display: flex; aspect-ratio: 4/5; background: #EDEAE5; }
.person-felder { min-width: 0; }


/* ---------- Reel-Baukasten über die volle Fensterbreite ---------- */
.wrap-voll { max-width: none; margin: 0; padding: 0 24px; }
@media (max-width: 900px) { .wrap-voll { padding: 0 var(--page-pad-mobile); } }

/* Mitte des Baukastens: höchstens drei Spalten, damit die Kacheln groß genug
   bleiben, um etwas zu erkennen. */
.works-grid.bau { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1560px) { .works-grid.bau { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1180px) { .works-grid.bau { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }


/* Talentnamen in der Reel-Liste hervorheben */
.talent-rot { color: var(--red); font-weight: 600; }

/* Porträt im Talentprofil: aktuelles Foto sehen und zuschneiden */
.foto-block { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 820px) { .foto-block { grid-template-columns: 1fr; } }
.foto-vorschau { position: relative; aspect-ratio: 4/5; background: #EDEAE5; overflow: hidden; }
.foto-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-vorschau .talent-card-initialen { position: absolute; inset: 0; font-size: 13px; }

.zuschnitt-rahmen {
  position: relative; overflow: hidden; background: var(--ink);
  margin: 4px 0 8px; cursor: grab; touch-action: none;
}
.zuschnitt-rahmen img { position: absolute; user-select: none; max-width: none; }
.zuschnitt-rahmen:active { cursor: grabbing; }


/* Stand des Website-Abgleichs in der Kopfzeile */
.abgleich { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--meta); }
/* Während des Laufs deutlich sichtbar und in Bewegung — eine Minute Stille
   sieht sonst nach „tut nichts" aus. */
.abgleich.laeuft { color: var(--red); font-weight: 600; }
.abgleich.laeuft::before {
  content: ''; display: inline-block; vertical-align: -1px; margin-right: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  animation: abgleich-puls 1.1s ease-in-out infinite;
}
@keyframes abgleich-puls { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.btn-cta:disabled { opacity: .6; cursor: default; }
.abgleich.fertig { color: var(--gruen, #1F7A4D); }
.abgleich.fehler { color: var(--red); }


/* Kleiner roter Knopf in der Kopfzeile (Veröffentlichen) */
.btn-cta.klein { padding: 8px 12px; font-size: 10.5px; letter-spacing: .06em; }

/* Upload-Bereich */
.hochladen-block {
  border: 1px dashed var(--outline-subtle); padding: 24px; margin-top: 8px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}


/* Ablegefeld für neue Filme */
.ablegen {
  border: 1px dashed var(--outline-subtle); padding: 40px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--meta);
}
.ablegen.bereit { border-color: var(--red); background: #fdf6f6; }
.ablegen-symbol { width: 40px; height: 40px; opacity: .5; }
.ablegen-text { font-size: 13px; }
.ablegen-hinweis { font-size: 11.5px; color: var(--red); }

/* ---------- Was von Bunny noch nicht da ist ---------- */
.rollen-marke { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--meta); border: 1px solid var(--hairline); padding: 5px 9px; white-space: nowrap; }

.bunny-stand { max-width: 860px; margin: 18px 0 4px; }
.bunny-block { border: 1px solid var(--hairline); border-left: 3px solid var(--red); padding: 14px 18px; margin-bottom: 10px; }
.bunny-titel { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--label); }
.bunny-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.bunny-liste li { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px solid var(--hairline); }
.bunny-liste li:first-child { border-top: 0; }
.bunny-ordner { font-weight: 600; min-width: 170px; }
.bunny-zahl { color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bunny-titel-liste { color: var(--meta); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bunny-nachsatz { margin: 10px 0 0; font-size: 12px; color: var(--meta); }
@media (max-width: 720px) {
  .bunny-liste li { display: block; }
  .bunny-ordner { min-width: 0; }
  .bunny-titel-liste { white-space: normal; display: block; margin-top: 2px; }
}
/* Ohne gewähltes Talent geht nichts — das soll man sehen, bevor man eine
   Datei hineinzieht. */
.ablegen-gesperrt { opacity: .55; }

/* Liste der letzten Uploads */
.liste { width: 100%; border-collapse: collapse; }
.liste th {
  text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--label); border-bottom: 1px solid var(--hairline); padding: 0 12px 10px 0;
}
.liste td { border-bottom: 1px solid var(--hairline); padding: 10px 12px 10px 0; vertical-align: middle; }
.liste-bild { width: 172px; }
/* Wie bei den Kacheln: beim Darüberfahren spult die Maus durch den Film.
   Dafür braucht das Bild eine eigene Fläche, in die sich das Video legen
   kann — eine Tabellenzelle taugt dafür nicht. */
.liste-bild-flaeche {
  position: relative; width: 160px; aspect-ratio: 16/9;
  background: var(--ink); overflow: hidden;
}
.liste-bild-flaeche img,
.liste-bild-flaeche video.shuffle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.liste-bild-flaeche img.eigenformat,
.liste-bild-flaeche video.eigenformat { object-fit: contain; }
/* Beim Durchfahren mit der Maus läuft der Film immer im Originalformat —
   nur das Standbild darunter richtet sich nach der Kachel. */
.liste-bild-flaeche video.shuffle,
.work-media video.shuffle { object-fit: contain; }
.liste-titel { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.liste-meta { font-size: 11px; color: var(--meta); text-transform: uppercase; letter-spacing: .05em; }
/* Die Knöpfe stehen bewusst zweizeilig: in einer Reihe fressen sie die halbe
   Breite und drücken Titel und Talent in eine schmale Spalte. */
.liste-aktionen { text-align: right; }
.liste-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 250px;
  margin-left: auto;
}


/* Ausgewählte weitere Beteiligte beim Upload */
.marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.marke {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--outline-subtle); padding: 3px 6px 3px 9px;
  font-size: 11.5px; color: var(--text-2);
}
.marke button { border: 0; background: none; cursor: pointer; color: var(--meta); font-size: 13px; line-height: 1; padding: 0 2px; }
.marke button:hover { color: var(--red); }

/* Sortierung im Reel-Bauen — unauffällig neben der Suche. */
.sortier-wahl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--meta);
}

.sortier-wahl select {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 5px 8px;
}

/* „+ Zum Reel" in der Großansicht — gleiche Sprache wie die Kachelknöpfe,
   nur auf dunklem Grund. */
.lightbox-aktion {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  padding: 8px 14px;
  margin-right: 10px;
  cursor: pointer;
  white-space: nowrap;
  width: auto;
  height: auto;
  flex: none;
}

.lightbox-aktion:hover { border-color: #fff; }

.lightbox-aktion.on {
  background: var(--red);
  border-color: var(--red);
}

/* Hochformatiges — 4:3, quadratisch, 4:5, 9:16 — steht mit Balken in der
   Kachel. Beschnitten wäre der Ausschnitt meist falsch. */
.work-media img.eigenformat,
.work-media video.eigenformat {
  object-fit: contain;
}

/* Bild und Titel in der Liste öffnen den Film — wie bei den Kacheln. */
.liste-bild-flaeche[data-oeffnen],
.liste-anklickbar[data-oeffnen] { cursor: pointer; }
.liste-anklickbar[data-oeffnen]:hover .liste-titel { color: var(--red); }