/* 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; }

/* ---------- 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);
}
.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; } }
.talent-list { display: flex; flex-direction: column; max-height: 640px; overflow-y: auto; }
@media (max-width: 1180px) { .talent-list { max-height: 300px; } }
.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; }
.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; }
/* 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; }
/* Hochkant gedrehter Film: die Bühne folgt dem Format, statt ihn als
   schmalen Streifen in viel Schwarz zu zeigen. */
.standbild-buehne.hochkant { aspect-ratio: 9/16; max-height: 62vh; width: auto; margin: 0 auto; }


/* ---------- 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); }
/* 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.hochkant,
.liste-bild-flaeche video.hochkant { 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);
}

/* Hochkant-Filme (9:16) stehen mit Balken links und rechts in der Kachel.
   Beschnitten wäre der Ausschnitt meist falsch, hochskaliert unscharf. */
.work-media img.hochkant,
.work-media video.hochkant {
  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); }