/* ============================================================
   ===== PROFILE · "SCHLICHT UND LUFTIG" =====
   ============================================================
   Gemeinsame Optik fuer das oeffentliche Profil (user/user.php, .profil-layout)
   und die Einstellungen (profil.php, .profil-wrapper). Wird NACH profil.css bzw.
   den Inline-Stilen der Seiten geladen und ueberschreibt nur Optik (Farben, Radien,
   Abstaende) - Markup und Funktionen bleiben unveraendert.
   Prinzip: viel Weissraum, 1px-Linien statt Schatten, Rot nur als Akzent
   (Primaer-Button, aktiver Reiter, kleine Icons).
   ============================================================ */

:root {
    --pm-linie: #ececef;
    --pm-flaeche: #f6f6f8;
    --pm-text: #16181d;
    --pm-text-leise: #6b7280;
    --pm-rot: #a70909;
    --pm-radius: 22px;
}

/* ============================================================
   ===== 1. OEFFENTLICHES PROFIL (/user/Name) =====
   ============================================================ */
.profil-layout { gap: 20px; margin-top: 8px; }

.profil-layout .profil-header,
.profil-layout .profil-card,
.profil-layout .profil-tab-content {
    background: #fff;
    border: 1px solid var(--pm-linie);
    border-radius: var(--pm-radius);
    box-shadow: none;
}

/* --- Kopf: zarter Farbverlauf als Titelband, Avatar ragt hinein --- */
.profil-layout .profil-header { position: relative; }
.profil-layout .profil-header::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 88px;
    background: linear-gradient(120deg, #f6e9e9 0%, #f3f3f6 60%, #fff 100%);
}
.profil-layout .profil-header-top { position: relative; padding: 36px 24px 0; align-items: flex-end; }
.profil-layout .profil-avatar img,
.profil-layout .profil-avatar span { border: 5px solid #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,.10) !important; }
.profil-layout .profil-actions { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-end; padding-bottom: 6px; }

.profil-layout .profil-btn { padding: 10px 20px; font-size: .86rem; border-width: 1px; }
.profil-layout .profil-btn-outline { background: #fff; border-color: var(--pm-linie); color: var(--pm-text) !important; }
.profil-layout .profil-btn-outline:hover { border-color: var(--pm-rot); color: var(--pm-rot) !important; background: #fff; }
.profil-layout .profil-follow { background: var(--pm-text); border-color: var(--pm-text); }
.profil-layout .profil-follow:hover { background: var(--pm-rot); border-color: var(--pm-rot); }
.profil-layout .profil-follow.glocke-abo-aktiv { background: #fff; border-color: var(--pm-linie); color: var(--pm-text) !important; }

.profil-layout .profil-identity { padding: 14px 24px 26px; }
.profil-layout .profil-name { font-size: 1.65rem; letter-spacing: -.02em; color: var(--pm-text); }
.profil-layout .profil-handle { color: var(--pm-text-leise); font-size: .92rem; margin-top: 3px; }
.profil-layout .profil-meta { gap: 8px; margin-top: 16px; }
.profil-layout .profil-meta > span,
.profil-layout .profil-meta > a {
    background: var(--pm-flaeche); border-radius: 999px; padding: 6px 12px;
    font-size: .8rem; color: var(--pm-text-leise);
}
.profil-layout .profil-meta i { color: var(--pm-text-leise); }
.profil-layout .profil-verein-chip { color: var(--pm-text); }

/* --- Seitenleisten-Karten --- */
.profil-layout .profil-sidebar { gap: 16px; }
.profil-layout .profil-card { padding: 20px 22px; }
.profil-layout .profil-card-titel { color: var(--pm-text-leise); font-size: .72rem; letter-spacing: .08em; margin-bottom: 14px; }

.profil-layout .profil-stats-grid { gap: 10px; }
.profil-layout .profil-stat { background: var(--pm-flaeche); border-radius: 16px; padding: 14px 6px; min-height: 68px; }
.profil-layout .profil-stat:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--pm-rot); }
.profil-layout .profil-stat b { font-size: 1.25rem; color: var(--pm-text); }
.profil-layout .profil-stat span { color: var(--pm-text-leise); font-weight: 600; }

.profil-layout .profil-onlinezeit-zeile { border-bottom-color: var(--pm-linie); padding: 9px 0; }
.profil-layout .profil-onlinezeit-zeile i { color: var(--pm-text-leise); }
.profil-layout .profil-abzeichen-bar { background: var(--pm-flaeche); height: 6px; }

/* --- Reiter: ruhige Pillen-Leiste --- */
.profil-layout .profil-tabs-wrap { background: var(--pm-flaeche); border: 0; border-radius: 999px; box-shadow: none; padding: 5px; overflow: hidden; }
.profil-layout .profil-tabs { gap: 2px; }
.profil-layout .profil-tab { padding: 10px 16px; border-radius: 999px; font-size: .84rem; color: var(--pm-text-leise) !important; }
.profil-layout .profil-tab:hover { background: rgba(255,255,255,.7); color: var(--pm-text) !important; }
.profil-layout .profil-tab.aktiv { background: #fff; color: var(--pm-rot) !important; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.profil-layout .profil-tab.aktiv::after { display: none; }
.profil-layout .profil-tab .profil-tab-cnt { color: #a4a8b0; font-weight: 600; }
.profil-layout .profil-tab.aktiv .profil-tab-cnt { color: var(--pm-rot); }

.profil-layout .profil-tab-content { padding: 24px; }
.profil-layout .user-beitrag-item { border-bottom-color: var(--pm-linie); padding: 14px 0; }
.profil-layout .user-chip { background: var(--pm-flaeche); }
.profil-layout .user-chip.aktiv { background: var(--pm-text); }
.profil-layout .user-pagination a { background: var(--pm-flaeche); color: var(--pm-text); }
.profil-layout .user-pagination a.aktiv { background: var(--pm-text); color: #fff; }
.profil-layout .user-people-item:hover { background: var(--pm-flaeche); }

/* Mobil/Tablet: Inhalt direkt nach dem Kopf (Reiter -> Inhalt), Statistik darunter */
@media (max-width: 1023px) {
    .profil-layout { grid-template-areas: "header" "tabs" "content" "sidebar"; }
}

/* Mobil: eine Spalte, engere Raender, Reiter wischbar */
@media (max-width: 767px) {
    .profil-layout { gap: 14px; }
    .profil-layout .profil-header-top { padding: 30px 16px 0; }
    .profil-layout .profil-identity { padding: 12px 16px 20px; }
    .profil-layout .profil-header::before { height: 74px; }
    .profil-layout .profil-name { font-size: 1.4rem; }
    .profil-layout .profil-card { padding: 16px; }
    .profil-layout .profil-tab-content { padding: 16px; border-radius: 18px; }
    .profil-layout .profil-tabs-wrap { margin: 0 -4px; }
    .profil-layout .profil-tab { padding: 10px 14px; }
    .profil-layout .profil-btn { padding: 9px 16px; }
}
@media (min-width: 1024px) {
    .profil-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    .profil-layout .profil-tab { flex: 1 1 0; }
}

/* ============================================================
   ===== 2. EINSTELLUNGEN (/profil/) =====
   ============================================================ */
.profil-wrapper { max-width: 980px; padding: 0 12px; --border: var(--pm-linie); --border-stark: #dcdce2; --hover-bg: var(--pm-flaeche); }
.profil-wrapper .profil-card { border: 1px solid var(--pm-linie); border-radius: var(--pm-radius); padding: 28px 28px 36px; box-shadow: none; }

.profil-wrapper .profil-header { margin-bottom: 22px; padding-bottom: 22px; border-bottom-color: var(--pm-linie); }
.profil-wrapper .profil-header h2 { letter-spacing: -.02em; }

/* Navigation links als ruhige Spalte, mobil als wischbare Pillen */
.profil-wrapper .profil-settings-layout { gap: 36px; }
.profil-wrapper .profil-tabs { flex: 0 0 210px; border-right: 0; padding-right: 0; position: sticky; top: 84px; gap: 4px; }
.profil-wrapper .profil-tab-link { border-radius: 14px; padding: 12px 14px; font-weight: 600; color: var(--pm-text-leise); }
.profil-wrapper .profil-tab-link:hover { background: var(--pm-flaeche); color: var(--pm-text); }
.profil-wrapper .profil-tab-link.aktiv { background: var(--pm-flaeche); color: var(--pm-rot); font-weight: 800; }

/* Abschnitte: Titel ohne harte Linie, mehr Luft */
.profil-wrapper .section-title { border-bottom: 0; padding-bottom: 0; margin: 34px 0 14px; font-size: 1.02rem; }
.profil-wrapper .profil-tab-content > .section-title:first-child,
.profil-wrapper .profil-tab-content > form:first-child > .section-title:first-child { margin-top: 4px; }
.profil-wrapper .section-title i { color: var(--pm-text-leise); }

/* Formulare */
.profil-wrapper .form-group input,
.profil-wrapper .form-group textarea { box-sizing: border-box; max-width: 100%; border: 1px solid #dcdce2; border-radius: 14px; padding: 13px 16px; background: #fff; }
.profil-wrapper .form-group input:hover,
.profil-wrapper .form-group textarea:hover { border-color: #b9bbc4; }
.profil-wrapper .form-group input:focus,
.profil-wrapper .form-group textarea:focus { border-color: var(--pm-rot); box-shadow: 0 0 0 3px rgba(167,9,9,.10); }
.profil-wrapper .form-group label { color: var(--pm-text); }
.profil-wrapper .form-group label i { color: var(--pm-text-leise); }
.profil-wrapper .hint { color: var(--pm-text-leise); }
.profil-wrapper .btn-profil { width: auto; min-width: 220px; padding: 13px 26px; background: var(--pm-text); font-weight: 700; }
.profil-wrapper .btn-profil:hover { background: var(--pm-rot); }

/* Karten innerhalb der Einstellungen */
.profil-wrapper .push-einstellungen,
.profil-wrapper .verifizierung-box,
.profil-wrapper .abzeichen-picker-card { border-radius: 16px; }
.profil-wrapper .push-einstellungen { border: 1px solid var(--pm-linie); background: #fff; }
.profil-wrapper .abzeichen-picker-card { border: 1px solid var(--pm-linie); background: #fff; }
.profil-wrapper .abzeichen-picker-card:hover { border-color: #b9bbc4; }
.profil-wrapper .abzeichen-picker-card.aktiv { border-color: var(--pm-rot); box-shadow: 0 0 0 1px var(--pm-rot); background: #fff7f7; }
.profil-wrapper .geraet-zeile { border-radius: 14px; }

@media (max-width: 768px) {
    .profil-wrapper { padding: 0 8px; }
    .profil-wrapper .profil-card { padding: 18px 16px 28px; border-radius: 18px; }
    .profil-wrapper .profil-settings-layout { flex-direction: column; gap: 6px; }
    /* statt hoher Liste: eine wischbare Pillen-Leiste */
    .profil-wrapper .profil-tabs {
        flex-direction: row; flex: none; width: auto; position: static;
        margin: 0 -16px 8px; padding: 0 16px 6px; gap: 8px;
        overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: 0;
    }
    .profil-wrapper .profil-tabs::-webkit-scrollbar { display: none; }
    .profil-wrapper .profil-tab-link {
        width: auto; flex: 0 0 auto; padding: 9px 15px; border-radius: 999px; font-size: .84rem;
        background: var(--pm-flaeche); gap: .5rem;
    }
    .profil-wrapper .profil-tab-link.aktiv { background: var(--pm-text); color: #fff; }
    .profil-wrapper .profil-tab-link.aktiv .profil-tab-badge { background: #fff; color: var(--pm-text); }
    .profil-wrapper .btn-profil { width: 100%; min-width: 0; }
}

/* ============================================================
   ===== 3. HAMBURGER-MENUE FUER DIE REITER (Handy) =====
   ============================================================ */
.profil-burger { display: none; }
@media (max-width: 768px) {
    .profil-burger {
        display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
        background: var(--pm-flaeche); border: 0; border-radius: 16px; padding: 12px 14px;
        font: inherit; font-size: .95rem; font-weight: 700; color: var(--pm-text);
        cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
    }
    .profil-burger-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--pm-text); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
    .profil-burger-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
    .profil-burger-label i { color: var(--pm-rot); }
    .profil-burger-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .profil-burger-label em { font-style: normal; font-weight: 600; font-size: .8rem; color: var(--pm-text-leise); }
    .profil-burger-pfeil { color: var(--pm-text-leise); transition: transform .2s; flex: none; }
    .profil-burger.offen .profil-burger-pfeil { transform: rotate(180deg); }
    .profil-burger.offen .profil-burger-icon i::before { content: "\f00d"; }

    /* Reiterliste: zu = weg, auf = vertikale Liste unter dem Button */
    .profil-layout .profil-tabs-wrap { background: transparent; padding: 0; border-radius: 0; margin: 0; overflow: visible; }
    .profil-layout .profil-tabs,
    .profil-wrapper .profil-tabs { display: none; -webkit-mask-image: none; mask-image: none; }
    .profil-layout .profil-tabs.menue-offen,
    .profil-wrapper .profil-tabs.menue-offen {
        display: flex; flex-direction: column; gap: 2px; overflow: visible;
        margin: 8px 0 4px; padding: 6px; position: static; width: auto;
        background: #fff; border: 1px solid var(--pm-linie); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .profil-layout .profil-tabs.menue-offen .profil-tab,
    .profil-wrapper .profil-tabs.menue-offen .profil-tab-link {
        flex: none !important; width: 100%; box-sizing: border-box; justify-content: flex-start !important; text-align: left; gap: 12px;
        padding: 13px 14px; border-radius: 12px; font-size: .92rem; background: transparent; color: var(--pm-text) !important;
    }
    .profil-layout .profil-tabs.menue-offen .profil-tab .profil-tab-cnt { margin-left: auto; }
    .profil-layout .profil-tabs.menue-offen .profil-tab i { width: 1.2em; text-align: center; }
    .profil-layout .profil-tabs.menue-offen .profil-tab.aktiv,
    .profil-wrapper .profil-tabs.menue-offen .profil-tab-link.aktiv { background: var(--pm-flaeche); color: var(--pm-rot) !important; box-shadow: none; }
    .profil-wrapper .profil-tabs.menue-offen .profil-tab-link.aktiv .profil-tab-badge { background: var(--pm-rot); color: #fff; }
}