dogfather-universe/workspace/assets/css/profil.css

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

/* WER HIER HINEINSCHREIBT, MUSS SEIN FELD SEHEN.

   Die Leiste klebt am unteren Rand. Auf dem Handy lag dadurch das
   letzte Textfeld halb darunter -- der Rundgang meldete es als
   "verdeckt". Beim Tippen sieht man dann die eigene Zeile nicht.

   scroll-margin-bottom loest das an der Wurzel: Springt der Browser zu
   einem Feld (Antippen, Tabulator, Fehlermeldung), haelt er von unten
   so viel Platz frei, dass die Leiste es nicht mehr ueberdeckt.
   WCAG 2.2 nennt das 2.4.11 "Focus Not Obscured". */
.gruppe textarea, .gruppe input, .steckbrief textarea, .steckbrief input {
  scroll-margin-bottom: 96px;
}

.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; }
}