/* =========================================================
   Odins Wacht - Profil Rahmen
   Braun / Gold Design
   ========================================================= */

:root {
    --ow-profile-brown-dark: #3b2a1f;
    --ow-profile-brown: #5a3e2b;
    --ow-profile-brown-light: #7a573d;
    --ow-profile-gold: #c9a44c;
    --ow-profile-gold-light: #e0c06b;
    --ow-profile-gold-soft: rgba(201, 164, 76, 0.30);
    --ow-profile-white: #f8f5ef;
    --ow-profile-bg: rgba(20, 14, 10, 0.95);
    --ow-profile-border: rgba(201, 164, 76, 0.80);
}

/* Profil-Hauptrahmen */
.profile-frame,
.profile-card,
.profile-box,
.user-profile,
.member-profile,
.account-profile,
.account-card,
.profil-card,
.profil-box,
main section[class*="profile"],
main article[class*="profile"],
main div[class*="profile-card"],
main div[class*="profile-box"],
main section[class*="profil"],
main article[class*="profil"],
main div[class*="profil-card"],
main div[class*="profil-box"] {
    position: relative;
    border: 2px solid var(--ow-profile-border);
    border-radius: 24px;
    background:
        linear-gradient(145deg,
            rgba(122, 87, 61, 0.18),
            rgba(201, 164, 76, 0.10)
        ),
        var(--ow-profile-bg);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05) inset,
        0 0 20px rgba(201, 164, 76, 0.22),
        0 0 34px rgba(90, 62, 43, 0.30),
        0 18px 45px rgba(0, 0, 0, 0.45);
    padding: 22px;
    overflow: hidden;
    color: var(--ow-profile-white);
}

/* Ziereffekt */
.profile-frame::before,
.profile-card::before,
.profile-box::before,
.user-profile::before,
.member-profile::before,
.account-profile::before,
.account-card::before,
.profil-card::before,
.profil-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(224, 192, 107, 0.12) 35%,
        rgba(201, 164, 76, 0.20) 50%,
        rgba(90, 62, 43, 0.10) 65%,
        transparent 100%
    );
    opacity: 0.75;
}

/* Avatar / Profilbild */
.profile-avatar,
.profil-avatar,
.user-avatar,
.avatar,
img.avatar,
.profile-card img:first-of-type,
.profile-box img:first-of-type,
.user-profile img:first-of-type,
.member-profile img:first-of-type,
.account-profile img:first-of-type,
.profil-card img:first-of-type,
.profil-box img:first-of-type {
    border: 4px solid var(--ow-profile-gold);
    border-radius: 50%;
    box-shadow:
        0 0 0 4px rgba(90, 62, 43, 0.20),
        0 0 22px rgba(201, 164, 76, 0.40),
        0 10px 25px rgba(0, 0, 0, 0.45);
}

/* Hover */
.profile-frame:hover,
.profile-card:hover,
.profile-box:hover,
.user-profile:hover,
.member-profile:hover,
.account-profile:hover,
.account-card:hover,
.profil-card:hover,
.profil-box:hover {
    border-color: var(--ow-profile-gold-light);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 0 28px rgba(201, 164, 76, 0.36),
        0 0 40px rgba(90, 62, 43, 0.35),
        0 20px 55px rgba(0, 0, 0, 0.55);
}

/* Überschriften im Profil */
.profile-frame h1,
.profile-frame h2,
.profile-frame h3,
.profile-card h1,
.profile-card h2,
.profile-card h3,
.profile-box h1,
.profile-box h2,
.profile-box h3,
.user-profile h1,
.user-profile h2,
.user-profile h3,
.member-profile h1,
.member-profile h2,
.member-profile h3,
.account-profile h1,
.account-profile h2,
.account-profile h3 {
    color: var(--ow-profile-gold-light);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

/* Links / Akzente */
.profile-frame a,
.profile-card a,
.profile-box a,
.user-profile a,
.member-profile a,
.account-profile a {
    color: var(--ow-profile-gold-light);
}

.profile-frame a:hover,
.profile-card a:hover,
.profile-box a:hover,
.user-profile a:hover,
.member-profile a:hover,
.account-profile a:hover {
    color: var(--ow-profile-white);
}

/* Mobil */
@media (max-width: 700px) {
    .profile-frame,
    .profile-card,
    .profile-box,
    .user-profile,
    .member-profile,
    .account-profile,
    .account-card,
    .profil-card,
    .profil-box {
        border-radius: 18px;
        padding: 16px;
    }
}