.profile-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1998;
    display: none;
}

.profile-popup-overlay.active {
    display: block !important;
}

.profile-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 1999;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border-radius: 0 20px 0 20px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.profile-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.profile-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(13, 55, 71, 0.75);
    backdrop-filter: blur(8px);
    color: #ffffff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 0 15px 0 15px;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.1s linear;
}

.profile-popup-close:hover {
    background: rgba(220, 53, 69, 0.85);
}


.profile-popup-banner-wrap {
    line-height: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.profile-popup-banner {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.profile-popup-content {
    padding: 20px;
    color: #ffffff;
}

.profile-popup-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: -50px;
    margin-bottom: 16px;
}

.profile-popup-avatar {
    width: 80px;
    height: 80px;
    border-radius: 0 12px 0 12px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.profile-popup-meta h2 {
    margin: 0 0 4px 0;
    font-family: 'Oswald', sans-serif;
    font-size: 1.3rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.profile-popup-role {
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    opacity: 0.85;
}

.profile-popup-section {
    margin-bottom: 16px;
}

.profile-popup-section label {
    display: block;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
    margin-bottom: 4px;
}

.profile-popup-section p {
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;
    line-height: 1.5;
}

.profile-popup-loading,
.profile-popup-error {
    padding: 30px;
    text-align: center;
    color: #ffffff;
    font-family: 'Roboto Mono', monospace;
}

/* ==========================================================================
   PROFIL-POPUP — klar, präzise, kühl
   NUR ZUSATZ: ersetzt nichts, ändert keine Layouts. Wird in constr.php NACH
   den anderen Stylesheets geladen. Zum Zurückdrehen: <link>-Zeile entfernen.
   Kein Weichzeichnen, kein Wackeln, kein Nachfedern, kein Farbschein.
   Profilbilder und Banner behalten IMMER ihre Form.
   ========================================================================== */

:root { --snap: cubic-bezier(0.2, 0, 0, 1); }

/* ---------- Abdunklung: kühles Tintenblau statt Schwarz, linear einblenden ---------- */
.profile-popup-overlay { background: rgba(8, 30, 40, 0.6); }
.profile-popup-overlay.active { animation: ppOverlayIn 0.25s linear; }
@keyframes ppOverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Popup: kein Hochskalieren mehr, sondern aufdecken (Wischkante) ---------- */
.profile-popup {
    transform: translate(-50%, -50%);                 /* kein scale(0.95) mehr */
    clip-path: inset(0 0 100% 0 round 0 20px 0 20px); /* zu: von unten her verdeckt */
    /* Schließen: kurz, beschleunigend – rastet ein */
    transition: clip-path 0.22s cubic-bezier(0.5, 0, 1, 0.6),
                opacity 0.22s linear,
                visibility 0.22s;
}
.profile-popup.active {
    transform: translate(-50%, -50%);
    clip-path: inset(-40px -40px -40px -40px round 0 20px 0 20px); /* offen: Schatten bleibt sichtbar */
    /* Öffnen: schnell los, sauber gebremst */
    transition: clip-path 0.45s var(--snap), opacity 0.15s linear, visibility 0s;
}

/* ---------- Inhalt deckt sich nacheinander auf ---------- */
@keyframes ppWipe  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ppSlide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ppLine  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.profile-popup.active .profile-popup-banner  { animation: ppWipe 0.5s var(--snap) 0.1s backwards; }
.profile-popup.active .profile-popup-avatar  { animation: ppWipe 0.35s var(--snap) 0.25s backwards; }
.profile-popup.active .profile-popup-meta h2 { animation: ppSlide 0.35s var(--snap) 0.3s backwards; }
.profile-popup.active .profile-popup-role    { animation: ppSlide 0.35s var(--snap) 0.35s backwards; }
.profile-popup.active .profile-popup-section { animation: ppSlide 0.35s var(--snap) backwards; }
.profile-popup.active .profile-popup-section:nth-of-type(1) { animation-delay: 0.38s; }
.profile-popup.active .profile-popup-section:nth-of-type(2) { animation-delay: 0.43s; }
.profile-popup.active .profile-popup-section:nth-of-type(3) { animation-delay: 0.48s; }
.profile-popup.active .profile-popup-section:nth-of-type(4) { animation-delay: 0.53s; }
.profile-popup.active .profile-popup-section:nth-of-type(n+5) { animation-delay: 0.58s; }

/* Trennlinie unter dem Banner: Eisblau, zieht sich von links auf */
.profile-popup-banner-wrap { position: relative; border-bottom: 0; }
.profile-popup-banner-wrap::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: #94c2cd;
    transform-origin: left center;
}
.profile-popup.active .profile-popup-banner-wrap::after { animation: ppLine 0.5s var(--snap) 0.2s backwards; }

/* Feldbeschriftungen: kleine Eisblau-Leiste davor, wie Stationsschilder */
.profile-popup-section label {
    position: relative;
    padding-left: 10px;
}
.profile-popup-section label::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 4px; height: 0.9em;
    margin-top: -0.45em;
    background: #94c2cd;
}

/* Schließen-Button: flacher Wechsel, das × fährt scharf ein */
.profile-popup-close { transition: background 0.1s linear; }
.profile-popup.active .profile-popup-close { animation: ppSlide 0.3s var(--snap) 0.3s backwards; }

/* Banner liegt UNTER dem Profilbild (das Banner ist jetzt "positioniert" und
   würde sonst über das nicht positionierte Meta-Feld mit dem Avatar malen). */
.profile-popup-banner-wrap { z-index: 0; }
.profile-popup-meta { position: relative; z-index: 1; }

/* ==========================================================================
   PROFIL-POPUP — KLINISCH (Profilakte)
   NUR ZUSATZ, steht ganz unten und überschreibt die Glas-Optik.
   Zum Zurückdrehen: diesen Block löschen (alles ab hier).
   Formsprache: oben rechts und unten links rund, die anderen zwei eckig.
   Kein Weichzeichner nötig: die Fläche ist deckend, steril, hell.
   ========================================================================== */

.profile-popup {
    background: #f4f9fb;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #94c2cd;
    border-top: 0;
    box-shadow: 0 10px 28px rgba(8, 30, 40, 0.4);
    scrollbar-width: thin;
    scrollbar-color: #94c2cd transparent;
}

/* Kopfleiste wie ein Aktendeckel / Stationsschild */
.profile-popup::before {
    content: "PROFILAKTE";
    display: block;
    height: 32px;
    line-height: 32px;
    padding: 0 48px 0 16px;
    background: #0d3747;
    box-shadow: inset 4px 0 0 #94c2cd;
    color: #ffffff;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Schließen sitzt in der Kopfleiste, eisblau, eckig */
.profile-popup-close {
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: #94c2cd;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #0d3747;
    font-size: 1.2rem;
}
.profile-popup-close:hover { background: #dc3545; color: #ffffff; }

/* Banner: Linie darunter dicker, Tinte statt Weiß */
.profile-popup-banner-wrap { border-bottom: 0; }
.profile-popup-banner-wrap::after { height: 3px; background: #0d3747; }

/* Inhalt: dunkle Schrift auf heller Fläche */
.profile-popup-content { color: #0d3747; padding: 18px 20px 20px; }

/* Kopf: Bild halb im Banner, Name und Rolle darunter auf der hellen Fläche */
.profile-popup-meta {
    align-items: flex-end;
    margin-top: -30px;
    margin-bottom: 18px;
    gap: 14px;
}
.profile-popup-avatar {
    border: 3px solid #f4f9fb;
    box-shadow: 0 0 0 1px #94c2cd, 0 3px 8px rgba(8, 30, 40, 0.25);
}
.profile-popup-meta h2 {
    color: #0d3747;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.profile-popup-role {
    display: inline-block;
    padding: 2px 8px;
    background: #0d3747;
    color: #ffffff;
    border-radius: 0 8px 0 8px;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 1;
}

/* Felder als Aktenzeilen mit feiner Eisblau-Linie */
.profile-popup-section {
    margin-bottom: 0;
    padding: 10px 0 11px;
    border-bottom: 1px solid rgba(148, 194, 205, 0.7);
}
.profile-popup-section:first-of-type { border-top: 1px solid rgba(148, 194, 205, 0.7); }
.profile-popup-section:last-child { border-bottom: 0; padding-bottom: 0; }
.profile-popup-section label {
    color: #3f6f80;
    opacity: 1;
    margin-bottom: 5px;
}
.profile-popup-section p { color: #0d3747; font-size: 0.9rem; }

.profile-popup-loading,
.profile-popup-error { color: #0d3747; }

@media (prefers-reduced-motion: reduce) {
    .profile-popup,
    .profile-popup * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   PROFIL ALS ROSTER — fährt von rechts ein und überdeckt den Mitgliederroster
   NUR ZUSATZ, steht ganz unten. Die Funktion (JS) bleibt unverändert:
   Klick auf Name/Profilbild öffnet, × oder Klick daneben schließt.
   Maße wie #fixed-roster: 280px Inhalt + 8px Rand links = 288px.
   Zum Zurückdrehen: diesen Block löschen (alles ab hier), dann ist es
   wieder das Popup in der Mitte.
   ========================================================================== */

/* Kein Abdunkeln, und die Seite bleibt benutzbar: Klicks gehen durch die
   Abdeckung hindurch. Geschlossen wird NUR mit dem × (wie beim Roster-Griff). */
.profile-popup-overlay,
.profile-popup-overlay.active { background: transparent; pointer-events: none; }
.profile-popup-overlay.active { animation: none; }

/* Banner wird NICHT beschnitten: volle Breite, Höhe folgt dem Bild
   (wie .roster-item-banner im Mitgliederroster) */
.profile-popup-banner { height: auto; object-fit: fill; }
.profile-popup-meta { margin-top: 0; }

/* Eingeklappt: rechts außerhalb. Offen: genau auf der Fläche des Rosters. */
.profile-popup,
.profile-popup.active {
    top: 0; right: 0; bottom: 0; left: auto;
    box-sizing: border-box;
    width: 288px;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    opacity: 1;
    clip-path: none;
    border: 0;
    border-left: 8px solid #0d3747;
    border-radius: 0;
    box-shadow: -6px 0 24px rgba(8, 30, 40, 0.35);
}
.profile-popup {
    transform: translateX(100%);
    /* Zuklappen: kürzer und beschleunigend, rastet ein – wie der Roster */
    transition: transform 0.3s cubic-bezier(0.5, 0, 1, 0.6), visibility 0s linear 0.3s;
}
.profile-popup.active {
    transform: translateX(0);
    /* Aufklappen: schnell los, sauber gebremst */
    transition: transform 0.5s var(--snap), visibility 0s;
}

/* Eisblauer Strich fährt beim Öffnen einmal von oben nach unten (wie beim Roster) */
.profile-popup::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: #94c2cd;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}
.profile-popup.active::after { animation: ppScan 0.7s var(--snap) 0.05s; }
@keyframes ppScan {
    0%   { opacity: 1; transform: translateY(0); }
    90%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(100vh); }
}

/* Inhalt deckt sich von rechts nacheinander auf */
@keyframes ppSlideR { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ppWipeR  { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

.profile-popup.active::before                { animation: ppWipeR 0.4s var(--snap) 0.12s backwards; }
.profile-popup.active .profile-popup-banner  { animation: ppWipeR 0.35s var(--snap) 0.2s backwards; }
.profile-popup.active .profile-popup-avatar  { animation: ppWipeR 0.35s var(--snap) 0.3s backwards; }
.profile-popup.active .profile-popup-meta h2 { animation: ppSlideR 0.35s var(--snap) 0.34s backwards; }
.profile-popup.active .profile-popup-role    { animation: ppSlideR 0.35s var(--snap) 0.38s backwards; }
.profile-popup.active .profile-popup-section { animation: ppSlideR 0.35s var(--snap) backwards; }
.profile-popup.active .profile-popup-section:nth-of-type(1)   { animation-delay: 0.42s; }
.profile-popup.active .profile-popup-section:nth-of-type(2)   { animation-delay: 0.46s; }
.profile-popup.active .profile-popup-section:nth-of-type(3)   { animation-delay: 0.50s; }
.profile-popup.active .profile-popup-section:nth-of-type(4)   { animation-delay: 0.54s; }
.profile-popup.active .profile-popup-section:nth-of-type(n+5) { animation-delay: 0.58s; }
.profile-popup-banner-wrap::after { transform-origin: right center; }
.profile-popup.active .profile-popup-banner-wrap::after { animation: ppLine 0.5s var(--snap) 0.25s backwards; }
.profile-popup.active .profile-popup-close   { animation: ppSlideR 0.3s var(--snap) 0.3s backwards; }

/* Mobil: wie der Mitgliederroster als Vollbild */
@media screen and (max-width: 1100px) {
    .profile-popup,
    .profile-popup.active { width: 100%; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-popup,
    .profile-popup::before,
    .profile-popup::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   EBENEN — der Nav-Drawer (mit Konto-Panel und dessen Griff) liegt ÜBER
   Profil-Roster und Mitglieder-Griff, solange er offen ist.
   Hintergrund: Der Drawer steckt im Header (eigener Stapel, z-index 999) und
   lag deshalb unter dem Mitglieder-Griff (1002) und der Profilkarte (1999).
   Nur wenn er offen ist, hebt sich der Header über alles; zu bleibt er unten,
   damit das × der Profilkarte oben rechts nicht verdeckt wird.
   Mobil (bis 1100px) bleibt alles wie bisher.
   ========================================================================== */
@media screen and (min-width: 1101px) {
    body:has(#nav-links.open) .site-col > header,
    body:has(#nav-links.active) .site-col > header { z-index: 2050; }
}