/* App – Profil bearbeiten (Design: App-Profil.dc.html) */
.pf { gap: 10px; }
.pf-prev { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 22px; padding: 14px; display: flex; gap: 14px; align-items: center; }
.pf-prev__av { position: relative; width: 84px; height: 84px; flex: none; }
.pf-prev__ring { width: 84px; height: 84px; border-radius: 50%; padding: 4px; }
.pf-prev__in { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ap-head); font-stretch: 125%; font-weight: 900; font-size: 26px; color: var(--ap-on-gold); border: 3px solid var(--ap-card); overflow: hidden; }
.pf-prev__in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-prev__in [hidden] { display: none; }
.pf-prev__lv { position: absolute; right: -4px; bottom: -2px; font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 999px; background: #F87171; color: var(--ap-on-gold); border: 2px solid var(--ap-card); }
.pf-prev__t { flex: 1; min-width: 0; }
.pf-prev__name { font-family: var(--ap-head); font-stretch: 125%; font-weight: 900; font-size: 19px; line-height: 1.1; overflow-wrap: anywhere; }
.pf-prev__name [hidden] { display: none; }
.pf-prev__title { font-size: 13px; color: #F87171; font-weight: 600; margin-top: 3px; }
.pf-prev__ord { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pf-prev__ord span { display: flex; }
.pf-prev__none { margin-top: 6px; }
.pf-form { display: flex; flex-direction: column; gap: 10px; }
.pf-lab { font-size: 12px; color: var(--ap-muted); margin-bottom: 6px; }
.pf-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pf-titles { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 40px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--ap-line); background: var(--ap-card); color: var(--ap-text); }
.pf-chip[aria-pressed="true"] { border-color: var(--ap-gold); background: rgba(227,179,65,.14); color: var(--ap-gold-t); }
.pf-file { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 13px; background: var(--ap-card); border: 1px dashed var(--ap-dash); border-radius: 14px; padding: 10px 12px; cursor: pointer; }
.pf-file[hidden] { display: none; }
.pf-file input { font-size: 13px; color: var(--ap-muted); max-width: 100%; }
.pf-hint { margin-top: 6px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf .ap-field input { font-size: 14px; border-radius: 12px; padding: 9px 12px; min-height: 44px; }
.pf-show { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 22px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.pf-show__t { flex: 1; font-size: 13px; }
.pf-show__t span { font-size: 11px; color: var(--ap-muted); }
/* Schalter (wie im Design), auch auf Einstellungen genutzt */
.pf-sw { -webkit-appearance: none; appearance: none; cursor: pointer; width: 50px; height: 30px; flex: none; border-radius: 999px; border: 0; margin: 0; position: relative; background: var(--ap-line); transition: background .2s; }
.pf-sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; transition: left .2s; }
.pf-sw:checked { background: var(--ap-green); }
.pf-sw:checked::after { left: 24px; }
.pf-sw:focus-visible { outline: 2px solid var(--ap-gold); outline-offset: 2px; }
html.ap-html[data-ap-design="hell"] .pf-prev__title { color: #B91C1C; }