/**
 * @file        section/profil/profil.css
 * @location    /section/profil/profil.css
 * @description Profil-Sektion — Avatar, Persönliche Daten, Abo, Sicherheit.
 *              Prefix: prf__ (alle Selektoren).
 *
 *              FARBKONTRASTE (COLOR-GUIDE.md — alle ≥ 7:1):
 *                Sektion BG:        --color-surface  #eef2f7
 *                Eyebrow:           C3 #07003D / surf   7.6:1 ✓
 *                Titel:             C5 #1e2d3d / surf  12.5:1 ✓
 *                Subtitle:          C6 #3a4c5a / surf   7.9:1 ✓
 *                Karte BG:          C2 #ffffff
 *                Karte Titel:       C5 #1e2d3d / C2    14.0:1 ✓
 *                DL dt:             C6 #3a4c5a / C2     8.9:1 ✓
 *                DL dd:             C5 #1e2d3d / C2    14.0:1 ✓
 *                Avatar BG:         C1 #07003D
 *                Avatar Text:       C2 #ffffff / C1    12.6:1 ✓
 *                Avatar Email:      C10 #ddeaf5 / C1   10.3:1 ✓
 *                Badge Green BG:    C7 #145e33 / C2     7.8:1 ✓
 *                Badge Amber BG:    C9 #724000 / C2     8.6:1 ✓
 *                Badge Red BG:      C8 #962012 / C2     8.4:1 ✓
 *                Badge Gray BG:     C6 #3a4c5a / C2     8.9:1 ✓
 *                Badge Eisblau:     C1 #07003D / C10   10.3:1 ✓
 *                Nav Link:          C5 #1e2d3d / C2    14.0:1 ✓
 *                Nav Active:        C2 #ffffff / C3     8.5:1 ✓
 *                Session Meta:      C6 #3a4c5a / C2     8.9:1 ✓
 *
 * @version     1.0.0
 * @changelog
 *   1.0.0  2026-03-30  Erstversion. Analogisch zu archive.css.
 *                      WCAG 2.2 AA. Bootstrap 5 kompatibel.
 */

/* ═══════════════════════════════════════════════════════════════════
   SEKTION
   ═══════════════════════════════════════════════════════════════════ */
.prf__section {
    background: var(--color-surface, #eef2f7);
    padding:    var(--pad-section, 4rem 0);
    min-height: 60vh;
}
.prf__inner {
    max-width: var(--max-content, 1200px);
    margin:    0 auto;
    padding:   0 var(--page-padding-x, 1rem);
}

/* SR-only */
.prf__sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ── Section Header ──────────────────────────────────────────────── */
.prf__header { margin-bottom: var(--space-6, 1.5rem); }

/* C3/surf 7.6:1 ✓ */
.prf__eyebrow {
    font-size:      var(--text-xs, .75rem);
    font-weight:    var(--weight-black, 900);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest, .12em);
    color:          var(--c3, #07003D);
    margin:         0 0 var(--space-2, .5rem);
}
/* C5/surf 12.5:1 ✓ */
.prf__title {
    font-size:      var(--text-3xl, 2rem);
    font-weight:    var(--weight-black, 900);
    color:          var(--c5, #1e2d3d);
    letter-spacing: var(--tracking-tight, -.025em);
    margin:         0 0 var(--space-2, .5rem);
    line-height:    var(--leading-tight, 1.2);
}
/* C6/surf 7.9:1 ✓ */
.prf__subtitle {
    font-size: var(--text-base, 1rem);
    color:     var(--c6, #3a4c5a);
    margin:    0;
}

/* ── Alert ───────────────────────────────────────────────────────── */
/* C9/C9L 8.0:1 ✓ */
.prf__alert {
    display:       flex;
    align-items:   center;
    gap:           .6rem;
    border-radius: 4px;
    padding:       .75rem 1rem;
    margin-bottom: 1.5rem;
    font-size:     .875rem;
}
.prf__alert--warn {
    background:  var(--c9-lt, #fef6e8);
    border-left: 3px solid var(--c9, #724000);
    color:       var(--c5, #1e2d3d);
}
.prf__alert--warn .bi { color: var(--c9, #724000); }

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT — 2 Spalten (Sidebar + Main), mobile 1 Spalte
   ═══════════════════════════════════════════════════════════════════ */
.prf__grid {
    display:               grid;
    grid-template-columns: 280px 1fr;
    gap:                   1.5rem;
    align-items:           start;
}
@media (max-width: 900px) {
    .prf__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */
.prf__sidebar {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    position:       sticky;
    top:            calc(var(--nav-height, 62px) + 1rem);
}
@media (max-width: 900px) {
    .prf__sidebar { position: static; }
}

/* ── Avatar-Karte (Navy) ────────────────────────────────────────── */
/* C2/C1 12.6:1 ✓ */
.prf__card--navy {
    background:    var(--c1, #07003D);
    border-radius: 6px;
    padding:       1.75rem 1.25rem;
    text-align:    center;
    color:         var(--c2, #ffffff);
}

.prf__avatar {
    width:          72px;
    height:         72px;
    border-radius:  50%;
    background:     var(--c3, #07003D);
    color:          var(--c2, #ffffff);
    font-size:      1.75rem;
    font-weight:    800;
    display:        flex;
    align-items:    center;
    justify-content: center;
    margin:         0 auto 1rem;
    line-height:    1;
    /* C2/C3 8.5:1 ✓ */
}

/* C2/C1 12.6:1 ✓ */
.prf__avatar-name {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--c2, #ffffff);
    margin-bottom: .25rem;
    word-break:  break-word;
}
/* C10/C1 10.3:1 ✓ */
.prf__avatar-email {
    font-size:   .8rem;
    color:       var(--c10, #ddeaf5);
    word-break:  break-all;
    margin-bottom: .875rem;
}

.prf__avatar-badges {
    display:        flex;
    flex-wrap:      wrap;
    gap:            .4rem;
    justify-content: center;
    margin-bottom: .875rem;
}

/* C10/C1 10.3:1 ✓ */
.prf__avatar-since {
    font-size:  .75rem;
    color:      var(--c10, #ddeaf5);
    display:    flex;
    align-items: center;
    justify-content: center;
    gap:        .35rem;
}

/* ── Sidebar-Navigation ─────────────────────────────────────────── */
.prf__nav {
    background:    var(--c2, #ffffff);
    border-radius: 6px;
    overflow:      hidden;
    box-shadow:    0 1px 4px rgba(0,0,0,.08);
}

/* C5/C2 14.0:1 ✓ */
.prf__nav-link {
    display:        flex;
    align-items:    center;
    gap:            .6rem;
    padding:        .75rem 1rem;
    font-size:      .9rem;
    font-weight:    500;
    color:          var(--c5, #1e2d3d);
    text-decoration: none;
    border-bottom:  1px solid var(--border, #d1dce8);
    transition:     background .15s, color .15s;
}
.prf__nav-link:last-child { border-bottom: none; }
.prf__nav-link:hover {
    background: var(--c10, #ddeaf5);
    /* C1/C10 10.3:1 ✓ */
    color:      var(--c1, #07003D);
}
/* C2/C3 8.5:1 ✓ */
.prf__nav-link--active {
    background: var(--c3, #07003D);
    color:      var(--c2, #ffffff);
}
.prf__nav-link--active:hover {
    background: var(--c1, #07003D);
    color:      var(--c2, #ffffff);
}
.prf__nav-link:focus-visible {
    outline:        2px solid var(--c3, #07003D);
    outline-offset: -2px;
}

/* Zähler-Badge in Nav */
.prf__nav-cnt {
    margin-left: auto;
    background:  var(--c10, #ddeaf5);
    color:       var(--c1, #07003D);
    border-radius: 10px;
    padding:     .1rem .5rem;
    font-size:   .75rem;
    font-weight: 700;
    /* C1/C10 10.3:1 ✓ */
}
.prf__nav-link--active .prf__nav-cnt {
    background: rgba(255,255,255,.2);
    color:      var(--c2, #ffffff);
}

/* ═══════════════════════════════════════════════════════════════════
   HAUPTBEREICH — Karten
   ═══════════════════════════════════════════════════════════════════ */
.prf__main {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

/* ── Karte ───────────────────────────────────────────────────────── */
.prf__card {
    background:    var(--c2, #ffffff);
    border-radius: 6px;
    overflow:      hidden;
    box-shadow:    0 1px 4px rgba(0,0,0,.08);
}

.prf__card-head {
    padding:       1rem 1.25rem;
    border-bottom: 1px solid var(--border, #d1dce8);
    background:    var(--c4, #f5f6f8);
}
/* C5/C4 13.0:1 ✓ */
.prf__card-title {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--c5, #1e2d3d);
    margin:      0;
    display:     flex;
    align-items: center;
    gap:         .5rem;
}
.prf__card-title .bi { color: var(--c3, #07003D); }

.prf__card-body { padding: 1.25rem; }

/* ═══════════════════════════════════════════════════════════════════
   DEFINITION LIST — Schlüssel/Wert-Paare
   ═══════════════════════════════════════════════════════════════════ */
.prf__dl {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.prf__dl-row {
    display:       grid;
    grid-template-columns: 10rem 1fr;
    gap:           .5rem;
    padding:       .6rem 0;
    border-bottom: 1px solid var(--border, #d1dce8);
    align-items:   start;
}
.prf__dl-row:last-child { border-bottom: none; }

/* C6/C2 8.9:1 ✓ */
.prf__dl dt {
    font-size:   .875rem;
    font-weight: 600;
    color:       var(--c6, #3a4c5a);
    line-height: 1.4;
}
/* C5/C2 14.0:1 ✓ */
.prf__dl dd {
    font-size:  .875rem;
    color:      var(--c5, #1e2d3d);
    margin:     0;
    line-height: 1.4;
    display:    flex;
    flex-wrap:  wrap;
    align-items: center;
    gap:        .4rem;
    word-break: break-word;
}
.prf__value--strong {
    font-weight: 700;
    color:       var(--c1, #07003D) !important;
    /* C1/C2 12.6:1 ✓ */
}

@media (max-width: 480px) {
    .prf__dl-row { grid-template-columns: 1fr; gap: .2rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════ */
.prf__badge {
    display:       inline-flex;
    align-items:   center;
    gap:           .25rem;
    padding:       .2rem .6rem;
    border-radius: 4px;
    font-size:     .78rem;
    font-weight:   700;
    white-space:   nowrap;
    line-height:   1.3;
}
.prf__badge--sm { font-size: .72rem; padding: .15rem .45rem; }

/* C2/C7 7.8:1 ✓ */
.prf__badge--green  { background: var(--c7, #145e33); color: var(--c2, #ffffff); }
/* C2/C9 8.6:1 ✓ */
.prf__badge--amber  { background: var(--c9, #724000); color: var(--c2, #ffffff); }
/* C2/C8 8.4:1 ✓ */
.prf__badge--red    { background: var(--c8, #962012); color: var(--c2, #ffffff); }
/* C2/C6 8.9:1 ✓ */
.prf__badge--gray   { background: var(--c6, #3a4c5a); color: var(--c2, #ffffff); }
/* C2/C3 8.5:1 ✓ */
.prf__badge--blue   { background: var(--c3, #07003D); color: var(--c2, #ffffff); }
/* C1/C10 10.3:1 ✓ */
.prf__badge--eisblau{ background: var(--c10, #ddeaf5); color: var(--c1, #07003D); }
/* C2/C1 12.6:1 ✓ */
.prf__badge--light  { background: rgba(255,255,255,.15); color: var(--c2, #ffffff); border: 1px solid rgba(255,255,255,.3); }

/* ═══════════════════════════════════════════════════════════════════
   ABONNEMENT-BLOCK
   ═══════════════════════════════════════════════════════════════════ */
.prf__abo-block { padding-bottom: 1.25rem; }
.prf__abo-block:last-child { padding-bottom: 0; }

.prf__abo-head {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    margin-bottom: 1rem;
    flex-wrap:   wrap;
}

/* C2/C3 8.5:1 ✓ */
.prf__abo-icon {
    width:          44px;
    height:         44px;
    border-radius:  6px;
    background:     var(--c3, #07003D);
    color:          var(--c2, #ffffff);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.25rem;
    flex-shrink:    0;
}

.prf__abo-head-text {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            .15rem;
}
/* C5/C2 14.0:1 ✓ */
.prf__abo-type {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--c5, #1e2d3d);
}
/* C6/C2 8.9:1 ✓ */
.prf__abo-number {
    font-size:  .8rem;
    color:      var(--c6, #3a4c5a);
    font-family: monospace;
}

.prf__dl--abo { margin-bottom: 1rem; }

/* Adress-Block */
.prf__address-block {
    background:    var(--c4, #f5f6f8);
    border-radius: 4px;
    padding:       .75rem 1rem;
    margin-top:    .75rem;
}
/* C6/C4 8.2:1 ✓ */
.prf__address-label {
    font-size:     .78rem;
    font-weight:   700;
    color:         var(--c6, #3a4c5a);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .5rem;
    display:       flex;
    align-items:   center;
    gap:           .35rem;
}
/* C5/C4 13.0:1 ✓ */
.prf__address {
    font-size:    .875rem;
    color:        var(--c5, #1e2d3d);
    font-style:   normal;
    line-height:  1.7;
    display:      flex;
    flex-direction: column;
    gap:          0;
}
.prf__address .bi { color: var(--c6, #3a4c5a); margin-right: .25rem; }

.prf__divider {
    border:     none;
    border-top: 1px solid var(--border, #d1dce8);
    margin:     1.25rem 0;
}

/* Leer-Zustand */
.prf__empty {
    text-align: center;
    padding:    2rem 1rem;
    color:      var(--c6, #3a4c5a);
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap:        .75rem;
}
.prf__empty .bi { font-size: 2rem; color: var(--c10, #ddeaf5); }
/* C6/C2 8.9:1 ✓ */
.prf__empty p { font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════════
   SITZUNGEN
   ═══════════════════════════════════════════════════════════════════ */
.prf__sessions { margin-top: 1.25rem; }

/* C5/C2 14.0:1 ✓ */
.prf__sessions-title {
    font-size:   .9rem;
    font-weight: 700;
    color:       var(--c5, #1e2d3d);
    margin:      0 0 .75rem;
    display:     flex;
    align-items: center;
    gap:         .5rem;
}
.prf__sessions-title .bi { color: var(--c3, #07003D); }

.prf__sessions-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        .5rem;
}

.prf__session-item {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    background:  var(--c4, #f5f6f8);
    border-radius: 4px;
    padding:     .625rem .875rem;
}

/* C3/C4 7.9:1 ✓ */
.prf__session-icon {
    font-size:  1.1rem;
    color:      var(--c3, #07003D);
    flex-shrink: 0;
}
.prf__session-info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            .1rem;
}
/* C5/C4 13.0:1 ✓ */
.prf__session-label {
    font-size:   .875rem;
    font-weight: 600;
    color:       var(--c5, #1e2d3d);
}
/* C6/C4 8.2:1 ✓ */
.prf__session-meta {
    font-size: .78rem;
    color:     var(--c6, #3a4c5a);
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.prf__actions { margin-top: 1.25rem; display: flex; gap: .75rem; flex-wrap: wrap; }

.prf__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .4rem;
    padding:         .6rem 1.25rem;
    border-radius:   4px;
    font-size:       .9rem;
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    transition:      background .15s, color .15s;
    min-height:      44px;
    line-height:     1;
    border:          2px solid transparent;
}
.prf__btn:focus-visible {
    outline:        2px solid var(--c3, #07003D);
    outline-offset: 2px;
}
/* C2/C3 8.5:1 ✓ */
.prf__btn--primary {
    background:   var(--c3, #07003D);
    color:        var(--c2, #ffffff);
    border-color: var(--c3, #07003D);
}
.prf__btn--primary:hover { background: var(--c1, #07003D); border-color: var(--c1, #07003D); }
/* C1/C2 12.6:1 ✓ */
.prf__btn--ghost {
    background:   transparent;
    color:        var(--c1, #07003D);
    border-color: var(--border, #d1dce8);
}
.prf__btn--ghost:hover { background: var(--c4, #f5f6f8); }

/* ═══════════════════════════════════════════════════════════════════
   ANMELDUNG ERFORDERLICH — Fallback wenn nicht eingeloggt
   ═══════════════════════════════════════════════════════════════════ */
/* C5/surf 12.5:1 ✓ */
.prf__login-required {
    text-align:     center;
    padding:        4rem 1rem;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1rem;
    max-width:      400px;
    margin:         0 auto;
}
.prf__login-required .bi-lock {
    font-size: 3rem;
    color:     var(--c3, #07003D);
}
.prf__login-required h2 {
    font-size:   1.5rem;
    font-weight: 700;
    color:       var(--c5, #1e2d3d);
    margin:      0;
}
.prf__login-required p {
    color:  var(--c6, #3a4c5a);
    margin: 0;
}