/* Kundenansicht: großzügiger als die Arbeitsoberfläche, eine Aufgabe je Seite. */
body{font-size:16px}
.kopfleiste{gap:1rem;flex-wrap:wrap}
.kopfleiste .logo{height:26px}
.kopfleiste .rechts{margin-left:auto;display:block}

.kennwerte{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1rem;
  font-size:13.5px;color:var(--text-leise)}
.kennwerte span{display:inline-flex;align-items:center;gap:.4rem}
.kennwerte .sym{color:var(--text-still);font-size:14px}
.kennwerte .teiler{color:var(--linie-stark)}
.kennwerte b{color:var(--text);font-weight:500}

.nachricht{margin-top:2rem;padding:1.1rem 1.3rem;border-radius:var(--r-gross);
  background:var(--flaeche);border:1px solid var(--linie);border-left:3px solid var(--gold);
  font-size:15px;line-height:1.65;color:var(--text-leise);max-width:62ch}
.nachricht .unterschrift{margin-top:.9rem;font-size:13.5px;color:var(--text-still)}

.abschnitt-kopf{display:flex;align-items:center;gap:.8rem;margin:2.4rem 0 1rem}
.abschnitt-kopf h2{margin:0}
.abschnitt-kopf .strich{flex:1;height:1px;background:var(--linie)}

.stuecke{display:flex;flex-direction:column;gap:.7rem}
.stueck{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:1.1rem;
  align-items:center;padding:.85rem;border-radius:var(--r-gross);background:var(--flaeche);
  border:1px solid var(--linie);transition:border-color .15s,background .15s}
.stueck:hover{border-color:var(--linie-stark);background:var(--erhaben)}
.bild{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.bild img{width:100%;height:100%;object-fit:cover;display:block}
.bild.spielbar{cursor:pointer}
.bild .laufzeit{position:absolute;right:5px;bottom:5px;padding:.1rem .35rem;border-radius:4px;
  background:rgba(0,0,0,.78);color:#F8F8F8;font-family:var(--mono);font-size:10.5px}
.bild .spielen{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.35));transition:background .15s}
.stueck:hover .spielen{background:rgba(0,0,0,.5)}
.bild .spielen i{width:34px;height:34px;border-radius:50%;background:rgba(248,248,248,.92);
  display:grid;place-items:center;transition:transform .15s}
.stueck:hover .spielen i{transform:scale(1.08)}
.bild .spielen .sym{color:#131618;font-size:13px;margin-left:2px}
.bild.ohne{display:grid;place-items:center;background:var(--erhaben)}
.bild.ohne .sym{font-size:26px;color:var(--text-still)}

.stueck .text{min-width:0}
.stueck h3{margin:0;font-size:15px;font-weight:600;line-height:1.35;word-break:break-word}
.stueck .technik{margin:.25rem 0 0;font-family:var(--mono);font-size:12px;color:var(--text-still)}
.stueck .tun{display:flex;flex-direction:column;gap:.4rem;align-items:stretch}
.stueck .tun .knopf{justify-content:center;white-space:nowrap}

footer{border-top:1px solid var(--linie);background:var(--flaeche);margin-top:3rem}
footer a{color:var(--text-leise);text-decoration:none}
footer a:hover{color:var(--text);text-decoration:underline}

.sicht{position:fixed;inset:0;z-index:60;background:rgba(8,10,11,.96);
  display:flex;flex-direction:column;gap:1rem;overflow:hidden;
  padding:clamp(.8rem,3vw,1.4rem)}
.sicht-kopf{display:flex;align-items:flex-start;gap:1rem;flex-shrink:0}
.sicht-kopf h3{margin:0;font-size:16px;font-weight:600}
.sicht-kopf p{margin:.15rem 0 0;font-size:12.5px}
/* Flex statt Grid: die Buehne nimmt den Rest und zentriert in beide Richtungen.
   min-height:0 ist noetig, sonst waechst sie mit ihrem Inhalt aus dem Fenster. */
.sicht .buehne{flex:1 1 auto;min-height:0;display:flex;
  align-items:center;justify-content:center}
/* Hochformat (9:16) fuellte sonst die volle Hoehe und wirkte trotzdem klein.
   aspect-ratio kommt per JS aus der Datenbank - ohne das hat ein <video> vor dem
   Laden der Metadaten gar keine Hoehe. */
.sicht video{max-height:min(100%,72vh);max-width:min(100%,1180px);
  width:auto;height:auto;aspect-ratio:16/9;background:#000;border-radius:12px}

@media (max-width:640px){
  .stueck{grid-template-columns:104px minmax(0,1fr);gap:.85rem}
  .stueck .tun{grid-column:1/-1;flex-direction:row}
  .stueck .tun .knopf{flex:1}
  .kopfleiste .rechts{margin-left:0;width:100%;text-align:left}
}

/* ---------- eigene Weitergaben ---------- */
.wg-zeile{display:flex;align-items:flex-start;gap:1rem;padding:.8rem .9rem;
  border-radius:var(--r);background:var(--flaeche);border:1px solid var(--linie)}
.wg-zeile.matt{opacity:.55}
.wg-haupt{min-width:0;flex:1;display:flex;flex-direction:column;gap:.4rem}
.wg-name{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.wg-meta{font-size:11.5px}
/* Der Link gehoert sichtbar in die Zeile: Der Kunde muss ihn wiederfinden,
   nicht blind auf ein Kopiersymbol vertrauen. */
.wg-link{display:flex;align-items:center;gap:.3rem;background:var(--grund);
  border:1px solid var(--linie-stark);border-radius:var(--r);padding:.2rem .2rem .2rem .55rem}
.wg-link code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:11.5px;color:var(--teal-hell)}
.wg-tun{gap:.35rem;flex:none}
/* Dateiauswahl im Weitergabe-Fenster. Scrollt, weil ein Ordner auch 30 Videos
   haben kann – das Fenster soll deswegen nicht aus dem Bild wachsen. */
.wg-dateien{max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem;
  border:1px solid var(--linie);border-radius:var(--r);padding:.35rem}
.wg-datei{display:flex;align-items:center;gap:.4rem;font-size:12.5px;padding:.1rem}
.wg-datei .kurz{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-datei.aus{opacity:.5}
.wg-datei.aus .kurz{text-decoration:line-through}
#wgVorhanden{margin:0 0 1.1rem}
#wgVorhanden .wg-link{margin-top:.35rem}
@media (max-width:560px){
  /* align-items muss zurueck auf stretch: In der Spalte ist die Breite die
     Querachse, und mit flex-start richtet sie sich nach dem laengsten Inhalt –
     hier dem Link, der nicht umbricht. Die Zeile lief dadurch aus dem Bild. */
  .wg-zeile{flex-direction:column;align-items:stretch}
  .wg-tun{align-self:flex-end}
}

/* ---------- Kopfzeile mit Themenschalter ---------- */
.kopfleiste .rechts{margin-left:auto;display:flex;align-items:center;gap:.8rem}
.kopfleiste .absender{font-size:12.5px;text-align:right;line-height:1.4}
.kopfleiste .absender b{display:block;font-weight:500;color:#F8F8F8}
@media (max-width:560px){
  .kopfleiste .rechts{width:100%;margin-left:0}
  .kopfleiste .absender{text-align:left;flex:1}
}

/* ---------- Drop-Zone ---------- */
.ablageflaeche{margin-top:2rem;border:2px dashed var(--linie-stark);border-radius:16px;
  padding:clamp(2rem,7vw,3.4rem) 1.4rem;text-align:center;background:var(--flaeche);
  transition:border-color .15s,background .15s}
.ablageflaeche:hover{border-color:var(--teal)}
.ablageflaeche .kreis{width:52px;height:52px;margin:0 auto 1.1rem;border-radius:50%;
  background:var(--erhaben);display:grid;place-items:center}
.ablageflaeche .kreis .sym{font-size:22px;color:var(--teal-hell)}
.ablageflaeche strong{display:block;font-size:17px;font-weight:600;margin-bottom:.4rem}
.ablageflaeche p{margin:0 auto;font-size:14px;color:var(--text-still);max-width:52ch}

.ablage{position:fixed;inset:0;z-index:50;display:none;place-items:center;
  background:rgba(19,22,24,.92);border:3px dashed var(--teal);pointer-events:none}
.ablage.an{display:grid}
.ablage div{text-align:center}
.ablage .sym{font-size:40px;color:var(--teal-hell);display:block;margin:0 auto .7rem}
.ablage strong{font-size:19px;display:block}
.ablage span{color:var(--text-leise);font-size:14px}

.upleiste{position:fixed;right:1rem;bottom:1rem;z-index:55;width:min(420px,calc(100vw - 2rem));
  background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:var(--r-gross);
  box-shadow:var(--schatten);overflow:hidden;font-size:14px}
.upkopf{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--linie)}
.upkopf .titel{font-size:13.5px;font-weight:600}
.upliste{max-height:210px;overflow-y:auto;padding:.5rem .9rem}
.upzeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .7rem;
  padding:.4rem 0;font-size:12.5px}
.upzeile .name{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upzeile .stand{grid-column:2;text-align:right;font-family:var(--mono);font-size:11px}
.upzeile .spur{grid-column:1/-1;height:3px;border-radius:2px;background:var(--linie);
  overflow:hidden;margin-top:.2rem}
.upzeile .spur i{display:block;height:100%;width:0;background:var(--teal);transition:width .2s}
.upzeile.gut .spur i{background:var(--gut)}
.upzeile.gut .stand{color:var(--gut)}
.upzeile.schlecht .stand{color:var(--warn);font-family:var(--ui);text-align:left;grid-column:1/-1}
.upfuss{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;
  border-top:1px solid var(--linie);font-size:12px;color:var(--text-still)}
.upfuss .spur{flex:1;height:5px;border-radius:3px;background:var(--linie);overflow:hidden}
.upfuss .spur i{display:block;height:100%;width:0;background:var(--teal);transition:width .25s}

/* Nach dem letzten Upload soll nichts mehr kreisen und nichts mehr zu messen sein:
   Der Wirbel weicht einem Haken, die Fussleiste mit Fortschritt und Tempo geht weg.
   Ein neuer Upload nimmt die Klasse zurueck (zeichnen()), dann ist alles wieder da. */
.upkopf .fertigzeichen{display:none;color:var(--gut);flex-shrink:0}
.upleiste.fertig .upkopf .wirbel{display:none}
.upleiste.fertig .upkopf .fertigzeichen{display:inline-flex}
.upleiste.fertig .upfuss{display:none}


/* ---------- Ordner in der Kundenansicht ---------- */
.krumen{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin-top:1rem;
  font-size:13.5px}
.krumen a{color:var(--text-leise);text-decoration:none;padding:.1rem .3rem;
  border-radius:var(--r-klein)}
.krumen a:hover{color:var(--text);background:var(--erhaben)}
.krumen .jetzt{color:var(--text);font-weight:600;padding:.1rem .3rem}
.krumen .teiler{color:var(--text-still);font-size:11px}

.stueck.ordner .bild{background:var(--erhaben);display:grid;place-items:center;
  text-decoration:none;position:relative}
.stueck.ordner .bild .sym{font-size:26px;color:var(--gold)}
.stueck.ordner .bild img{width:100%;height:100%;object-fit:cover;opacity:.55}
.stueck.ordner .ordnermarke{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.35)}
.stueck.ordner .ordnermarke .sym{font-size:24px;color:#F8F8F8}
.stueck.ordner h3 a{color:inherit;text-decoration:none}
.stueck.ordner h3 a:hover{text-decoration:underline}