/* ===================================================================
   Creator-Profil (Onboarding).
   =================================================================== */

.gruppe {
  margin: 0 0 22px;
  padding: 20px 22px 22px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}

.gruppe__titel {
  padding: 0 6px;
  font-size: .96rem; font-weight: 700;
  color: var(--text);
}
.gruppe__text { margin: 2px 0 18px; font-size: .86rem; color: var(--text-still); }

.gruppe .feld-schild { margin-top: 14px; }
.gruppe .feld-schild:first-of-type { margin-top: 0; }

/* Aussehen, Rahmen, Schrift und Fokusring stehen seit dem 01.09.2026
   EINMAL in start.css (":where(.inhalt) :where(input, textarea, select)").
   Die Kopie, die hier stand, war Wort fuer Wort dieselbe -- und genau so
   entstehen zwei Feld-Optiken auf einer Seite, sobald eine der beiden
   verbessert wird. Hier bleibt nur, was WIRKLICH nur hier gilt. */
.gruppe textarea, .gruppe input { width: 100%; }
.gruppe textarea { min-height: 46px; }
/* Siehe aufgaben.css: color-scheme: dark erledigt das Aufhellen. */
.gruppe input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

.gruppe__raster {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}

/* Die interne Notiz hebt sich deutlich ab, damit im Gespräch mit dem
   Creator niemand versehentlich hineinschreibt, was er lesen soll. */
.gruppe--intern {
  border-color: rgba(224, 163, 60, .38);
  background: rgba(224, 163, 60, .05);
}
.gruppe--intern .gruppe__titel { color: #e6b45c; }

#auswahl-block select {
  min-width: 210px; padding: 10px 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}

.speicher-leiste {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px; padding: 14px 0;
  background: linear-gradient(180deg, transparent, var(--tinte) 34%);
}

@media (max-width: 560px) {
  .gruppe { padding: 16px 15px 18px; }
}

/* ===================================================================
   Der eigene Steckbrief

   Steht ganz oben und gehoert JEDEM im Workspace -- nicht nur Creatorn.
   Deshalb sieht er auch anders aus als die Creator-Akte darunter: eine
   geschlossene Karte mit dem Bild links, nicht ein weiteres Formularfeld.
   =================================================================== */

.steckbrief {
  position: relative; overflow: hidden;
  margin-bottom: 28px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 22%, var(--rand));
  border-radius: var(--radius);
  background:
    radial-gradient(90% 120% at 0% 0%,
      color-mix(in srgb, var(--ton, var(--akzent)) 12%, transparent), transparent 62%),
    var(--flaeche);
}
.steckbrief__kopf { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }

.steckbrief__bildfeld { display: grid; gap: 10px; justify-items: center; flex: none; }

/* Rund, wie die Plakette in der Begruessung: Ein runder Koerper gehoert
   in dieser Oberflaeche zu einer PERSON, ein eckiger zu einer Sache. */
.steckbrief__bild {
  display: grid; place-items: center;
  width: 128px; height: 128px; border-radius: 50%;
  overflow: hidden;
  font-size: 3rem; font-weight: 700; line-height: 1;
  color: #f2f7fd;
  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
  background:
    radial-gradient(120% 120% at 30% 20%,
      color-mix(in srgb, var(--ton, var(--akzent)) 30%, transparent), transparent 70%),
    rgba(255, 255, 255, .05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 14px 34px -16px color-mix(in srgb, var(--ton, var(--akzent)) 70%, transparent);
}
.steckbrief__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.steckbrief__bildknoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* Das Dateifeld ist versteckt; die Beschriftung ist der Knopf. Sie muss
   deshalb auch AUSSEHEN wie einer und den Zeiger aendern. */
.steckbrief__bildknoepfe label { cursor: pointer; }

.steckbrief__text { flex: 1 1 320px; min-width: 0; }
.steckbrief__name {
  margin: 4px 0 2px;
  font-size: 1.5rem; letter-spacing: -.02em; color: #f2f7fd;
}
.steckbrief__rolle {
  margin: 0 0 16px;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ton, var(--akzent)) 62%, #cfe0f0);
}
.steckbrief__schild { margin-top: 18px; }
.steckbrief textarea { width: 100%; }

/* ---------- Die Kanaele ---------------------------------------------------
   Gespeichert wird NUR der oeffentliche Name -- kein Login, kein Token
   (Begruendung im Kopf von server/workspace-steckbrief.js). Das @ steht
   deshalb fest vor dem Feld und wird nicht mit eingegeben: So ist ohne
   Erklaerung klar, was hier hingehoert. */
.steckbrief__kanaele { display: grid; gap: 8px; margin-top: 8px; }
.kanal {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
}
.kanal__name { font-size: .84rem; color: var(--text-leise); }
.kanal__feld {
  display: flex; align-items: center;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: rgba(0, 0, 0, .22);
  overflow: hidden;
}
.kanal__feld:focus-within { border-color: color-mix(in srgb, var(--akzent) 50%, transparent); }
.kanal__at { padding: 0 2px 0 11px; color: var(--text-still); }
.kanal__feld input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; color: var(--text);
  font: inherit; font-size: .88rem;
  padding: 9px 11px 9px 3px;
}
.kanal__feld input:focus { outline: none; }
.kanal__auf { font-size: .78rem; color: var(--akzent); white-space: nowrap; }

.steckbrief__fuss {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px;
}
.steckbrief__stand { font-size: .82rem; color: var(--text-leise); }

@media (max-width: 560px) {
  .steckbrief { padding: 18px 15px; }
  .steckbrief__kopf { gap: 16px; }
  .steckbrief__bild { width: 96px; height: 96px; font-size: 2.2rem; }
  .kanal { grid-template-columns: 1fr; gap: 4px; }
  .kanal__auf { justify-self: start; }
}