:root {
    --un-page-background: #0d0c0b;
    --un-text-color: #f4f0eb;
    --un-heading-color: #f2eee9;
    --un-accent-color: #c1845f;
    --un-surface-color: #151311;
    --un-body-font: Arial, Helvetica, sans-serif;
    --un-heading-font: "Untamed Oswald", "Arial Narrow", sans-serif;
}

html {
    background: var(--un-page-background);
}

body {
    margin: 0;
    background: var(--un-page-background);
    color: var(--un-text-color);
    font-family: var(--un-body-font);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--un-heading-color);
    font-family: var(--un-heading-font);
}

@font-face { font-family:"Untamed Oswald"; src:url("Oswald-VariableFont_wght.ttf") format("truetype"); font-weight:200 700; font-display:swap; }
body { margin: 0; background: var(--un-page-background); color: var(--un-text-color); font-family: var(--un-body-font); }
.un-site-shell { color: var(--un-text-color); font-family: var(--un-body-font); }
.un-site-header { box-sizing:border-box; min-height:155px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 3.8%; background:#aa7e6c; }
.un-site-logo { color:#fff; font-family:"Untamed Oswald","Arial Narrow",sans-serif; font-size:16px; font-weight:700; line-height:1.4; text-decoration:none; }
.un-site-banner { background:#0e0d0c; }
.un-site-banner img { display:block; width:100%; height:auto; }
.un-site-nav { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:12px 32px; font-family:"Untamed Oswald","Arial Narrow",sans-serif; font-size:18px; font-weight:400; }
.un-menu-toggle { display:none; border:1px solid #171310; border-radius:4px; padding:9px 12px; background:transparent; color:#171310; font:inherit; font-weight:700; cursor:pointer; }
.un-site-nav a, .un-site-nav summary { color:#171310; text-decoration:none; cursor:pointer; }
.un-site-nav > a { padding:8px 0; }
.un-site-nav a[aria-current="page"] { color:#fff; border-bottom:2px solid #fff; }
.un-site-nav a:hover, .un-site-nav summary:hover { color:#fff; }
.un-site-nav a:focus-visible, .un-site-nav summary:focus-visible, .un-site-logo:focus-visible, .un-site-footer a:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.un-site-more { position:relative; }
.un-site-more summary { display:block; padding:8px 0; list-style:none; font-weight:400; }
.un-site-more summary::-webkit-details-marker { display:none; }
.un-site-more ul { position:absolute; z-index:10; top:100%; right:-20px; width:220px; margin:0; padding:12px 0; list-style:none; background:#aa7e6c; box-shadow:0 12px 24px #0004; }
.un-site-more li a { display:block; padding:11px 18px; text-align:center; }
.un-site-footer a { color:#f4f0eb; text-decoration:none; }
.un-site-footer a:hover { color:#d19a70; text-decoration:underline; }
.un-site-footer { padding:36px 20px; border-top:1px solid #5a4435; background:#171513; text-align:center; }
.un-site-footer p { margin:0 0 12px; color:#aaa29a; }
@media(max-width:760px) {
    .un-site-header { min-height:0; flex-direction:row; flex-wrap:wrap; align-items:center; padding:18px 20px; }
    .un-menu-toggle { display:block; }
    .un-site-nav { display:none; width:100%; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; }
    .un-site-header.is-open .un-site-nav { display:flex; }
    .un-site-nav > a, .un-site-more summary { padding:10px 0; }
    .un-site-more ul { position:static; width:auto; padding:0 0 8px 14px; background:transparent; box-shadow:none; }
    .un-site-more li a { padding:8px 10px; text-align:left; }
}
#un-back-top { position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:1000; width:46px; height:46px; padding:0; border:1px solid #c1845f; border-radius:4px; background:#151311; color:#c1845f; box-shadow:0 2px 10px #0006; font:28px/1 Arial,sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#un-back-top[hidden] { display:none!important; }
#un-back-top:hover { background:#251e19; }
#un-back-top:focus-visible { outline:2px solid #f2eee9; outline-offset:3px; }

/* Benutzerkonto – Abmelden im Dropdown */
.un-site-more form {
    margin: 0;
    padding: 0;
    text-align: center;
}

.un-site-more .un-nav-logout {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.un-site-more .un-nav-logout:hover {
    color: #f4f0eb;
    background: rgba(13, 12, 11, 0.12);
}


/* Benutzeravatar in der Navigation */
.un-site-more .un-account-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 0;
}

.un-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid #b8794f;
    border-radius: 50%;
    background: #171513;
    color: #d19a70;
    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    box-sizing: border-box;
}

.un-account-name {
    font: inherit;
    line-height: 1.2;
}


/* Avatar und Benutzername zentrieren */
.un-site-nav .un-account-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.un-site-nav .un-account-name {
    display: block;
    width: 100%;
    text-align: center;
}

/* Benutzerkonto höher positionieren */
@media (min-width: 761px) {
    .un-site-nav > .un-site-more:last-child {
        transform: translateY(-20px);
    }
}

/* Desktop-Navigation tiefer setzen, Benutzername hervorheben */
@media (min-width: 761px) {
    .un-site-nav {
        transform: translateY(12px);
    }
}

.un-site-nav .un-account-name {
    color: #ffffff;
}


/* Einheitlicher Seitenhintergrund auf allen aktiven PHP-Seiten. */
html body,
html body.photo-planner-page,
html body > main,
html body main,
html .un-page,
html .un-shutter-page,
html .un-shutter-page > main,
html .pc-app,
html .un-app-page,
html #un-community-page,
html .pc-page,
html .un-edit-page,
html .un-gallery,
html .un-legal,
html #unc-rank,
html #un-challenge,
html .un-shutter-release,
html #un-shutter-release,
html .un-release-page,
html .un-shutter-screenshots {
    background: var(--un-page-background) !important;
}