/* =====================================================================================
   "Mein Profil" — Hub-Widget für ALLE eingeloggten Mitglieder (20.09.2026)
   ---------------------------------------------------------------------------------------
   Baumeister-Auftrag: Bedienoberfläche für forum-api/profile_update.php (GET/POST), siehe
   PAXAN_SUPPORTER_SCHABLONE.md Abschnitt F Punkt 1. Kein neues Backend — reine Oberfläche.

   Docking: eigenes ".cpanel" im bestehenden ".cockpit"-Bereich von hub.html, direkt nach
   #bodyScanPanel. Kein Supporter-Gate (wie #healthPanel/#diaryPanel) — ein Profil pflegen
   kostet nichts und ist für jede Stufe sinnvoll (siehe profile_update.php Kopf-Kommentar).

   Bewusst NEUTRALER (nicht "warm/vertraulich" wie .health-/.diary-) — dieses Panel ist ein
   Konto-/Trainings-Steckbrief, keine emotionale/gesundheitliche Angabe, deshalb einfache
   .cpanel-Basisoptik (weißer Grund) statt der Pergament-Töne von health.css/diary.css.

   Klassen-Präfix .pp- , additiv, eigene Datei. Marken-Tokens mit Hex-Fallback.
   Bewusst Flexbox statt CSS-Grid (siehe PAXAN_BRAIN.md §1, Baumeister-Regel).
   Touch-Ziele durchgängig ≥40px Höhe (Buttons/Inputs/Selects). */

.pp-panel{flex:1 1 100%}
.pp-inner{position:relative}

.pp-h3{
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim,#6A655C);margin:0 0 6px;
}
.pp-intro{margin:0 0 18px;font-size:.88rem;color:var(--dim,#6A655C)}

.pp-section{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line,rgba(10,10,10,.12))}
.pp-section:last-of-type{border-bottom:0;margin-bottom:8px;padding-bottom:0}
.pp-h4{
  font-family:var(--f-d,'Unbounded',sans-serif);font-weight:600;font-size:.98rem;
  margin:0 0 8px;color:var(--ink,#0A0A0A);
}
.pp-hint{margin:2px 0 12px;font-size:.78rem;color:var(--dim,#6A655C);font-style:italic}
.pp-hint-warn{color:var(--gold-deep,#8A6E1B)}

.pp-label{
  display:block;font-family:var(--f-b,'Archivo',sans-serif);font-weight:600;font-size:.84rem;
  color:var(--ink,#0A0A0A);margin-bottom:14px;
}
.pp-label>span{display:block;margin-bottom:4px}
.pp-input,.pp-select{
  width:100%;min-height:42px;border:1px solid var(--line,rgba(10,10,10,.12));border-radius:8px;
  padding:.5rem .7rem;font-family:var(--f-b,'Archivo',sans-serif);font-size:.9rem;font-weight:400;
  background:#fff;color:var(--ink,#0A0A0A);
}
.pp-input:focus,.pp-select:focus{outline:none;border-color:var(--gold-deep,#8A6E1B)}
.pp-input.pp-err{border-color:#8a1f1f}

.pp-row{display:flex;flex-wrap:wrap;gap:14px}
.pp-row .pp-col{flex:1 1 160px}

/* Anzeigename-Umschalter — bewusst als KLAR ERKENNBARER Segmented-Toggle, keine
   versteckte Dropdown-Wahl (Nutzerauftrag: "per Klick" wählbar). */
.pp-toggle{
  display:flex;gap:0;margin-bottom:14px;border:1px solid var(--gold-deep,#8A6E1B);
  border-radius:20px;overflow:hidden;width:fit-content;
}
.pp-toggle-btn{
  all:unset;cursor:pointer;padding:.55rem 1.15rem;min-height:40px;box-sizing:border-box;
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-deep,#8A6E1B);text-align:center;transition:.15s;
}
.pp-toggle-btn.sel{background:var(--gold-deep,#8A6E1B);color:#fff}
.pp-toggle-btn:focus-visible{outline:2px solid var(--gold,#C9A227);outline-offset:2px}

.pp-preview{margin:0 0 6px;font-size:.86rem;color:var(--dim,#6A655C)}
.pp-preview strong{color:var(--ink,#0A0A0A)}
.pp-fielderr{margin:0 0 12px;font-size:.8rem;color:#8a1f1f}

.pp-days-label,.pp-colors-label{
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim,#6A655C);margin:4px 0 8px;
}
.pp-chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:16px}
.pp-chip-row button{
  min-height:40px;padding:.5rem .95rem;border-radius:20px;border:1px solid var(--line,rgba(10,10,10,.12));
  background:#fff;font-family:var(--f-b,'Archivo',sans-serif);font-size:.82rem;color:var(--ink,#0A0A0A);
  cursor:pointer;transition:.15s;
}
.pp-chip-row button:hover{border-color:var(--gold-deep,#8A6E1B)}
.pp-chip-row button.sel{background:var(--gold-deep,#8A6E1B);color:#fff;border-color:var(--gold-deep,#8A6E1B)}

/* Avatar-Farbe: PaXaN-Marken-Tokens als Farbkreise statt Text-Dropdown (leichter
   erfassbar) — Werteliste (welche Farben erlaubt sind) kommt weiterhin vom Server
   (profile_allowed_values()), nur die HEX-Zuordnung fürs Anzeigen lebt hier. */
.pp-color-row{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:18px}
.pp-color-row button{
  width:36px;height:36px;border-radius:100px;border:2px solid var(--line,rgba(10,10,10,.12));
  cursor:pointer;padding:0;position:relative;
}
.pp-color-row button.sel{border-color:var(--ink,#0A0A0A);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold,#C9A227)}
.pp-color-row button:focus-visible{outline:2px solid var(--gold,#C9A227);outline-offset:3px}

.pp-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.pp-save{
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;border:none;border-radius:20px;padding:.6rem 1.15rem;min-height:42px;
  background:var(--ink,#0A0A0A);color:var(--paper,#F5F3EE);cursor:pointer;
}
.pp-save:hover:not(:disabled){background:var(--gold-deep,#8A6E1B)}
.pp-save:disabled{opacity:.5;cursor:not-allowed}
.pp-msg{font-size:.78rem;color:var(--dim,#6A655C)}
.pp-msg.ok{color:var(--ok,#3F7A4B)}
.pp-msg.err{color:#8a1f1f}

/* Avatar-Foto-Upload (30.09.2026) -- gleiche .pp-Bausteine wie der Rest des Panels,
   siehe Kopf-Kommentar #ppPhotoUploadBlock in hub.html. */
.pp-photo-block{margin:4px 0 16px}
.pp-photo-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.pp-photo-preview-wrap{
  width:88px;height:88px;flex:0 0 auto;border-radius:12px;border:1px solid var(--line,rgba(10,10,10,.12));
  background:var(--paper2,#EFEBE2);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pp-photo-preview{width:100%;height:100%;object-fit:cover;display:block}
.pp-photo-preview-empty{
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.6rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim,#6A655C);text-align:center;padding:0 6px;
}
.pp-photo-controls{flex:1 1 220px;min-width:220px}
.pp-photo-file{display:block;margin-bottom:8px;font-size:.82rem;max-width:100%}
.pp-photo-consent{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;color:var(--ink,#0A0A0A);margin-bottom:6px;cursor:pointer}
.pp-photo-consent input{margin-top:3px;flex:0 0 auto}
.pp-photo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pp-photo-upload-btn,.pp-photo-remove-btn{
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  border-radius:20px;padding:.5rem 1rem;min-height:38px;cursor:pointer;border:1px solid var(--ink,#0A0A0A);
  background:#fff;color:var(--ink,#0A0A0A);
}
.pp-photo-upload-btn{background:var(--ink,#0A0A0A);color:var(--paper,#F5F3EE);border-color:var(--ink,#0A0A0A)}
.pp-photo-upload-btn:hover:not(:disabled){background:var(--gold-deep,#8A6E1B);border-color:var(--gold-deep,#8A6E1B)}
.pp-photo-upload-btn:disabled{opacity:.5;cursor:not-allowed}
.pp-photo-remove-btn:hover{border-color:#8a1f1f;color:#8a1f1f}

@media(prefers-reduced-motion:reduce){
  .pp-chip-row button,.pp-color-row button,.pp-toggle-btn,.pp-save{transition:none}
}
@media(max-width:480px){
  .pp-toggle{width:100%}
  .pp-toggle-btn{flex:1 1 50%}
}

/* ===== Fragebogen-Verhalten + Farbskala (11.10.2026, Nutzerauftrag) ===== */

/* Ausgeblendete Fragen/Gruppen (bereits beantwortet) -- !important, damit es die display-Werte der
   einzelnen Komponenten (.pp-label{display:block} u. a.) sicher uebersteuert. */
.pp-hide{display:none!important}

/* X oben rechts: Fragebogen wegklicken (Erinnerung in einer Woche) */
.pp-close{
  position:absolute;top:-4px;right:-4px;width:40px;height:40px;border:0;background:transparent;
  font-size:1.5rem;line-height:1;color:var(--dim,#6A655C);cursor:pointer;border-radius:50%;
}
.pp-close:hover{color:var(--ink,#0A0A0A)}
.pp-close:focus-visible{outline:2px solid var(--gold,#C9A227);outline-offset:2px}
.pp-inner>.pp-h3{padding-right:40px}

.pp-later{
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--line,rgba(10,10,10,.12));border-radius:20px;
  padding:.6rem 1.15rem;min-height:42px;background:#fff;color:var(--ink,#0A0A0A);cursor:pointer;
}
.pp-later:hover{border-color:var(--gold-deep,#8A6E1B);color:var(--gold-deep,#8A6E1B)}

/* Einstiegszeile, wenn der Fragebogen nicht auf dem Hub steht */
.pp-edit{
  flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:4px 2px;font-size:.8rem;color:var(--dim,#6A655C);
}
.pp-edit-btn{
  font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--gold-deep,#8A6E1B);border-radius:20px;
  padding:.45rem .95rem;min-height:38px;background:transparent;color:var(--gold-deep,#8A6E1B);cursor:pointer;
}
.pp-edit-btn:hover{background:var(--gold-deep,#8A6E1B);color:#fff}

/* Farbskala */
.pp-color-wrap{margin-bottom:18px}
.pp-color-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.pp-avatar-prev{
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-d,'Unbounded',sans-serif);font-weight:700;font-size:1.3rem;
  border:2px solid var(--line,rgba(10,10,10,.12));transition:background .15s,color .15s;
}
.pp-avatar-prev.empty{border-style:dashed}
.pp-hex{font-family:var(--f-m,'JetBrains Mono',monospace);font-size:.74rem;letter-spacing:.08em;color:var(--dim,#6A655C)}
.pp-linkbtn{
  border:0;background:transparent;padding:.4rem .2rem;min-height:36px;cursor:pointer;
  font-family:var(--f-b,'Archivo',sans-serif);font-size:.78rem;color:var(--gold-deep,#8A6E1B);text-decoration:underline;
}
.pp-slider{display:block;margin-bottom:12px;font-family:var(--f-b,'Archivo',sans-serif);font-weight:600;font-size:.82rem}
.pp-slider>span{display:block;margin-bottom:6px}
.pp-range{
  -webkit-appearance:none;appearance:none;width:100%;height:18px;border-radius:9px;margin:0;
  border:1px solid var(--line,rgba(10,10,10,.12));cursor:pointer;
}
.pp-range-hue{background:linear-gradient(90deg,hsl(0,72%,50%),hsl(45,72%,50%),hsl(90,72%,50%),hsl(135,72%,50%),hsl(180,72%,50%),hsl(225,72%,50%),hsl(270,72%,50%),hsl(315,72%,50%),hsl(359,72%,50%))}
.pp-range-light{background:linear-gradient(90deg,#000,hsl(45,72%,50%),#fff)}
.pp-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:#fff;border:3px solid var(--ink,#0A0A0A);box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.pp-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--ink,#0A0A0A);box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.pp-range:focus-visible{outline:2px solid var(--gold,#C9A227);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.pp-avatar-prev{transition:none}}