/* =========================================================================
   FOKALiS – nur Seite „Über uns“
   Leitidee „Die Besetzung“ (Filmklappe + Besetzungsliste):
   1. Filmklappe im Seitenkopf: Regie Matthias (Mensch), Besetzung sechs KI-Agents.
      Die Klappe schlägt beim Laden einmal ruhig zu.
   2. Regie: Matthias mit Sucher-Rahmen, Steckbrief (Dispo), Zitat, Kennzahlen.
   3. Besetzung: links die Besetzungsliste, rechts tritt der gewählte Agent ins Licht
      (Standby → Aktiv, wie auf der Startseite). Ohne JS stehen alle Karten untereinander.
   Bewegungswerte nach DESIGN-KONZEPT.md (1,4–2 s, ruhige Kurven, kleine Wege).
   ========================================================================= */

/* ---------- 1. FILMKLAPPE --------------------------------------------- */
.clap{margin:0;align-self:end;min-width:0;filter:drop-shadow(0 40px 60px rgba(0,0,0,.5))}
.clap-stick{position:relative;z-index:2;height:30px;transform-origin:0 100%}
.clap-stick::after{content:"";position:absolute;left:8px;bottom:-5px;width:10px;height:10px;border-radius:50%;background:#9A9A9A;border:2px solid var(--anth)}
.clap-stick span{display:block;height:100%;border-radius:3px 3px 0 0;border-bottom:3px solid #0E0E0E;
  background:repeating-linear-gradient(-55deg,var(--anth) 0 22px,#E9E9E9 22px 44px)}
/* Klappe: steht offen, schließt dann ruhig – einmal pro Seitenaufruf */
.js .clap-stick{animation:clap-close 3.2s var(--ease-cine) 1.1s both}
@keyframes clap-close{0%,55%{transform:rotate(-13deg)}80%,100%{transform:rotate(0)}}
.clap-board{position:relative;background:rgba(14,14,14,.92);border:1px solid var(--line-dark);border-top:0;border-radius:0 0 var(--radius) var(--radius);overflow:hidden}
.clap-board::before{content:"";display:block;height:30px;background:repeating-linear-gradient(55deg,var(--anth) 0 22px,#E9E9E9 22px 44px)}
.clap-head{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line-dark);
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.clap-scene{color:var(--gold)}
.clap-rows{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.clap-row{grid-column:1 / -1;display:grid;gap:4px;padding:13px 20px 14px;border-bottom:1px solid var(--line-dark)}
.clap-row--half{grid-column:auto;border-bottom:0}
.clap-row--half+.clap-row--half{border-left:1px solid var(--line-dark)}
.clap-row dt{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.clap-row dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  font-family:var(--font-head);font-weight:300;font-size:clamp(19px,1.6vw,24px);line-height:1.15;text-transform:uppercase;letter-spacing:.02em;color:var(--white)}
.clap-human{font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.16em;padding:5px 9px;border-radius:999px;background:var(--white);color:var(--anth);line-height:1}
.clap-faces{display:flex}
.clap-faces img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid #0E0E0E;margin-left:-8px;
  filter:grayscale(1) brightness(.75);transition:filter 1.6s var(--ease-glide)}
.clap-faces img:first-child{margin-left:0}
.clap:hover .clap-faces img{filter:none}
@media (max-width:1020px){.clap{max-width:520px;width:100%}}
@media (min-width:1021px) and (max-height:760px){
  .clap-stick,.clap-board::before{height:24px}
  .clap-head{padding:9px 18px}
  .clap-row{padding:9px 18px 10px}
  .clap-row dd{font-size:18px}
}
@media (max-width:760px){
  .clap-stick,.clap-board::before{height:24px}
  .clap-head{padding:10px 16px}
  .clap-row{padding:10px 16px 11px}
  .clap-row dd{font-size:18px}
}
@media (max-width:400px){
  .clap-rows{grid-template-columns:1fr}
  .clap-row--half{border-bottom:1px solid var(--line-dark)}
  .clap-row--half:last-child{border-bottom:0}
  .clap-row--half+.clap-row--half{border-left:0}
}

/* ---------- 2. REGIE: MATTHIAS ---------------------------------------- */
.director2{overflow:hidden}
.director2 .drift-word{position:absolute;top:clamp(24px,4vw,56px);left:0}
.director2 .wrap{position:relative}
.dir{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px clamp(40px,6vw,112px);align-items:start;padding-top:clamp(64px,9vw,150px)}
.dir-side{display:grid;gap:28px;min-width:0}
.dir-figure{position:relative;margin:0}
.dir-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--radius)}
/* Sucher-Ecken in Gold: hier liegt der Fokus */
.dir-frame{position:absolute;inset:16px;pointer-events:none;--c:var(--gold);--l:30px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat;
  transition:inset 1.4s var(--ease-glide)}
.dir-figure:hover .dir-frame{inset:10px}
.dir-badges{position:absolute;left:38px;bottom:38px;display:flex;flex-wrap:wrap;gap:8px}
.dir-human{background:var(--white);color:var(--anth)}

.dispo{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.dispo>div{display:grid;align-content:start;gap:3px;padding:14px 16px 14px 0;border-bottom:1px solid var(--line-dark)}
.dispo>div:nth-child(2n){padding-left:16px;border-left:1px solid var(--line-dark)}
.dispo dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.dispo dd{margin:0;font-size:15px;line-height:1.45;color:var(--on-dark)}

.dir-text{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;justify-items:start;min-width:0}
.dir-text .h2{width:100%}
.dir-quote{margin:0;font-family:var(--font-head);font-weight:300;font-size:clamp(24px,2.6vw,40px);line-height:1.2;color:var(--white);
  padding-left:clamp(20px,2.4vw,36px);border-left:3px solid var(--gold)}
.dir-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.dir-name strong{font-family:var(--font-head);font-weight:500;font-size:24px;text-transform:uppercase;letter-spacing:.04em;color:var(--white)}
.dir-name span{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.dir-body{display:grid;gap:14px;color:#CFCFCF;max-width:62ch}
/* Persönliche Geschichte mit goldener Linie */
.dir-story{display:grid;gap:10px;width:100%;max-width:62ch;padding:4px 0 4px 22px;border-left:2px solid var(--gold);color:#CFCFCF;font-size:15.5px;line-height:1.65}
.dir-story-label{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

.dir-stats{margin:clamp(64px,8vw,120px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-dark)}
.dir-stats>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:28px 24px 0;border-left:1px solid var(--line-dark)}
.dir-stats>div:first-child{border-left:0;padding-left:0}
.dir-stats dd{margin:0;display:flex;align-items:flex-start;font-family:var(--font-head);font-weight:200;font-size:clamp(56px,7vw,116px);line-height:.95;color:var(--white);font-variant-numeric:tabular-nums}
.dir-plus{color:var(--gold);font-weight:300;font-size:.5em;line-height:1.1;margin-left:.06em}
.dir-stats dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
@media (max-width:1020px){
  .dir{grid-template-columns:1fr}
  .dir-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
}
@media (max-width:860px){
  .dir-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dir-stats>div:nth-child(3){border-left:0;padding-left:0}
  .dir-stats>div:nth-child(n+3){margin-top:28px;border-top:1px solid var(--line-dark)}
}
@media (max-width:640px){
  .dir-side{grid-template-columns:1fr}
  .dir-figure{max-width:440px}
}
@media (max-width:420px){
  .dispo{grid-template-columns:1fr}
  .dispo>div:nth-child(2n){padding-left:0;border-left:0}
  .dir-stats>div{padding-inline:16px 0}
  .dir-stats>div:nth-child(odd){padding-left:0}
  .dir-stats dt{font-size:10px;letter-spacing:.12em}
}

/* ---------- 3. BESETZUNG: Bühne + Besetzungsliste --------------------- */
.cast{list-style:none;display:grid;gap:24px}
.cast-card{--mx:50%;--my:30%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,52px);align-items:start;
  padding:clamp(14px,1.4vw,20px);background:#121212;border:1px solid var(--line-dark);border-radius:var(--radius)}
.cast-photo{position:relative;margin:0;border-radius:2px;overflow:hidden;background:#0E0E0E}
.cast-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;
  filter:grayscale(1) blur(3px) brightness(.5);transform:scale(1.04);transition:filter 1.8s var(--ease-glide),transform 2s var(--ease-glide)}
/* goldenes Licht folgt der Maus, unten abgedunkelt */
.cast-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(236,176,20,.16),transparent 45%),linear-gradient(180deg,transparent 60%,rgba(10,10,10,.6) 100%)}
.cast-status{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;gap:8px;flex-wrap:wrap}
.cast-state{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;background:rgba(10,10,10,.65);color:var(--on-dark-muted);line-height:1}
.cast-state::before{content:"";width:6px;height:6px;border-radius:50%;background:#6B6B6B;transition:background-color .6s}
.cast-state .on{display:none}

.cast-info{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;padding-block:clamp(4px,1vw,16px);min-width:0}
.cast-role{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)}
.cast-info h3{font-size:clamp(30px,3.1vw,48px);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;color:var(--white);margin-top:-4px}
.cast-quote{font-family:var(--font-head);font-weight:300;font-size:clamp(19px,1.6vw,24px);line-height:1.3;color:var(--gold);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease-glide) .3s}
.cast-tasks ul{list-style:none;border-top:1px solid var(--line-dark)}
.cast-tasks li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--line-dark);font-size:15px;line-height:1.5;color:#CFCFCF}
.cast-tasks li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:8px;border-radius:50%;border:1px solid var(--on-dark-muted)}
.cast-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.cast-facts>div{display:grid;gap:2px}
.cast-facts dt{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.cast-facts dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--on-dark)}
.cast-note{display:flex;gap:12px;align-items:baseline;font-size:14px;line-height:1.55;color:var(--on-dark-muted)}
.cast-note::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);transform:translateY(-1px)}

/* erwacht (ohne JS: alle wach) */
html:not(.js) .cast-photo img,.cast-card.is-awake .cast-photo img{filter:none;transform:scale(1)}
html:not(.js) .cast-quote,.cast-card.is-awake .cast-quote{clip-path:inset(0 0 0 0)}
html:not(.js) .cast-state,.cast-card.is-awake .cast-state{color:var(--white)}
html:not(.js) .cast-state::before,.cast-card.is-awake .cast-state::before{background:var(--gold);box-shadow:0 0 0 4px rgba(236,176,20,.25);animation:cast-pulse 3s ease-in-out infinite}
html:not(.js) .cast-state .on,.cast-card.is-awake .cast-state .on{display:inline}
html:not(.js) .cast-state .off,.cast-card.is-awake .cast-state .off{display:none}
@keyframes cast-pulse{50%{box-shadow:0 0 0 7px rgba(236,176,20,0)}}

/* Bühne (mit JS): Liste links, Karten liegen übereinander, nur die gewählte ist sichtbar */
.cast-stage.is-live{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,3vw,48px);align-items:start}
.is-live .cast{grid-template-columns:minmax(0,1fr);gap:0}
.is-live .cast-card{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .8s var(--ease-glide),visibility 0s linear .8s}
.is-live .cast-card.is-current{opacity:1;visibility:visible;transition:opacity 1.2s var(--ease-glide) .1s,visibility 0s}

.cast-index{display:grid;gap:10px;align-content:start;min-width:0}
.cast-index-head{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.cast-director{display:flex;align-items:center;gap:14px;padding:12px 0 22px;margin-bottom:8px;border-bottom:1px solid var(--line-dark)}
.cast-director img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none}
.cast-director b{display:block;font-family:var(--font-head);font-weight:400;font-size:21px;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;color:var(--white)}
.cast-director span{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)}
.cast-list{list-style:none;border-top:1px solid var(--line-dark)}
.cast-btn{position:relative;width:100%;display:grid;grid-template-columns:30px 40px minmax(0,1fr);align-items:center;gap:14px;
  padding:12px 14px 12px 12px;background:none;border:0;border-bottom:1px solid var(--line-dark);text-align:left;cursor:pointer;
  transition:background-color .8s var(--ease-glide)}
.cast-btn::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--gold);transform:scaleY(0);transition:transform 1s var(--ease-glide)}
.cb-num{font-family:var(--font-head);font-weight:200;font-size:20px;color:var(--on-dark-muted);transition:color .8s}
.cast-btn img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 20%;filter:grayscale(1) brightness(.7);transition:filter 1.4s var(--ease-glide)}
.cb-text{display:grid;gap:2px;min-width:0}
.cb-name{font-family:var(--font-head);font-weight:400;font-size:clamp(18px,1.5vw,22px);text-transform:uppercase;letter-spacing:.02em;line-height:1.1;color:#BDBDBD;transition:color .8s}
.cb-first{display:none}
.cb-role{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted);line-height:1.4}
.cast-btn:hover{background:rgba(255,255,255,.03)}
.cast-btn:hover .cb-name{color:var(--white)}
.cast-btn[aria-expanded="true"]{background:rgba(255,255,255,.05)}
.cast-btn[aria-expanded="true"]::before{transform:none}
.cast-btn[aria-expanded="true"] .cb-num{color:var(--gold)}
.cast-btn[aria-expanded="true"] .cb-name{color:var(--white)}
.cast-btn[aria-expanded="true"] img{filter:none}
.cast-hint{margin-top:10px;font-size:13px;line-height:1.55;color:var(--on-dark-muted)}

.cast-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line-dark);color:var(--on-dark-muted);font-size:14.5px}
.cast-foot p{max-width:62ch}
.cast-foot .link-arrow{color:var(--on-dark)}
.cast-foot .link-arrow:hover{color:var(--gold)}

/* Bühne flacher in niedrigen Laptop-Fenstern */
@media (min-width:1200px) and (max-height:820px){
  .cast-photo img{aspect-ratio:1/1}
  .cast-info{gap:11px}
  .cast-tasks li{padding-block:8px;font-size:14.5px}
  .cast-tasks li::before{top:15px}
  .cast-btn{padding-block:9px}
}
/* Tablet + Handy: Besetzungsliste als Gesichter-Reihe über der Bühne */
@media (max-width:1199px){
  .cast-stage.is-live{grid-template-columns:minmax(0,1fr);gap:20px}
  .cast-index-head,.cast-director,.cast-hint{display:none}
  .cast-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;border-top:0}
  .cast-btn{grid-template-columns:none;justify-items:center;gap:8px;padding:10px 4px 12px;border-bottom:0;border-radius:var(--radius)}
  .cast-btn::before{left:30%;right:30%;top:auto;bottom:0;width:auto;height:2px;transform:scaleX(0)}
  .cast-btn[aria-expanded="true"]::before{transform:none}
  .cast-btn img{width:56px;height:56px}
  .cb-num,.cb-role,.cb-full{display:none}
  .cb-first{display:inline}
  .cb-name{font-size:15px;text-align:center}
}
@media (max-width:640px){
  .cast-card{grid-template-columns:1fr;gap:20px}
  .cast-photo img{aspect-ratio:4/3;object-position:50% 22%}
  .cast-facts{grid-template-columns:1fr}
  .cast-btn img{width:48px;height:48px}
  .cb-name{font-size:14px}
}
@media (max-width:480px){
  .cast-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Weniger Bewegung ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js .clap-stick{animation:none;transform:none}
  .cast-quote{clip-path:none}
}

.dir-quote{text-wrap:balance} /* kein Einzelwort in der letzten Zeile */