/* workspace.css: Stile des Workspace-Blatts (schirm-7.png), des Satzes
   "Noch kein Konto" und der Glocke. Der unscharfe Grund und die dunklen
   Tokens des Blatts stehen in stil.css (.blatt-ws). */

/* Ein Workspace als Block: aktiv hell mit Haken, sonst dunkel. */
.ws-block {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  margin: 0 0 10px;
  padding: 12px 18px 12px 16px;
  border: 0;
  border-radius: var(--r-gross);
  background: var(--flaeche);
  color: #ffffff;
  font: inherit;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.ws-block .ws-buchstabe {
  width: 44px;
  height: 44px;
  font-size: 18px;
  background: var(--flaeche-2);
  color: #ffffff;
}

.ws-block .liste-zeile-text strong { font-size: 18px; font-weight: 700; }
.ws-block .liste-zeile-text span { margin-top: 2px; font-size: 15px; color: var(--grau); }
.ws-block > svg { flex: 0 0 auto; }

.ws-block-aktiv { background: var(--hell); color: #000000; }
.ws-block-aktiv .ws-buchstabe { background: #000000; color: #ffffff; }
.ws-block-aktiv .liste-zeile-text span { color: var(--tinte-grau); }

.ws-liste { margin-top: 18px; background: var(--flaeche); }

/* Der eine Satz auf einem Reiter, wenn der Workspace noch kein Konto hat. */
.ws-leer {
  margin: 0;
  padding: 40px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--grau);
}

/* Glocke: ein Eintrag mit kleinem Bild (Standbild des Videos) oder Symbol. */
.glocke-zeile { min-height: 72px; }

.glocke-bild {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--r-klein);
  display: grid;
  place-items: center;
  background: var(--seg-spur) center / cover no-repeat;
  color: var(--schrift);
}

.glocke-bild svg { display: block; }
.glocke-bild-foto svg { display: none; }
.glocke-zeile .liste-zeile-text strong { overflow-wrap: anywhere; }

.glocke-bild { position: relative; overflow: hidden; }
.glocke-bild-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }