*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#050816;--card:rgba(16,22,42,.88);--text:#fff;--muted:#aeb8d0;--accent:#39ff88;--accent2:#2f7cff}
body{min-height:100vh;font-family:Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top,rgba(47,124,255,.22),transparent 35%),linear-gradient(160deg,#050816,#0b1125)}
body.design-blue{--accent:#6ec8ff;--accent2:#1877f2;background:linear-gradient(160deg,#061225,#0c2d57)}
body.design-purple{--accent:#e17aff;--accent2:#8c4dff;background:linear-gradient(160deg,#12031c,#321044)}
body.design-red{--accent:#ff6b6b;--accent2:#ff9a3d;background:linear-gradient(160deg,#160505,#421313)}
body.design-gold{--accent:#ffd35a;--accent2:#d69b20;background:linear-gradient(160deg,#161004,#3e2e09)}
body.design-light{--bg:#eef3f9;--card:rgba(255,255,255,.94);--text:#15233a;--muted:#66758c;--accent:#246bfd;--accent2:#157347;background:linear-gradient(160deg,#f5f8fc,#e8eef7)}
.page-shell{width:min(94%,760px);margin:auto;padding:32px 0}
.profile-card,.content-section{background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:24px;box-shadow:0 18px 48px rgba(0,0,0,.35);backdrop-filter:blur(14px)}
.profile-card{text-align:center;padding:30px}
.profile-image{width:120px;height:120px;object-fit:cover;border-radius:50%;border:4px solid var(--accent)}
h1{margin-top:15px}.username{color:var(--accent);font-weight:700;margin-top:5px}.description{color:var(--muted);line-height:1.6;margin-top:14px}
.section-nav{display:flex;gap:10px;overflow:auto;padding:16px 0}
.section-nav a{white-space:nowrap;text-decoration:none;color:var(--text);background:var(--card);padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.content-section{padding:24px;margin-bottom:20px;border-top:4px solid var(--accent)}
.section-heading{display:flex;align-items:center;gap:16px}.section-logo{width:72px;height:72px;object-fit:contain;border-radius:16px;background:#fff;padding:7px}.section-subtitle,.section-description{color:var(--muted);line-height:1.6}.section-description{margin:18px 0}
.link-grid{display:grid;gap:12px;margin-top:18px}.link-button{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);padding:15px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:.2s}.link-button:hover{transform:translateY(-2px);border-color:var(--accent)}.link-icon{font-size:1.4rem}.link-arrow{margin-left:auto;color:var(--accent);font-size:1.7rem}
footer{text-align:center;color:var(--muted);padding:20px;line-height:1.8}footer a{color:var(--muted)}.admin-footer-link{font-size:.78rem;opacity:.65}

/* Eigener Hintergrund – Bild und Abdunklung getrennt */
body.has-custom-background {
  position: relative;
  background: #050816;
  isolation: isolate;
}

body.has-custom-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--custom-background);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

body.has-custom-background::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(5, 8, 22, var(--background-overlay));
}

body.has-custom-background.background-cover::before {
  background-size: cover;
}

body.has-custom-background.background-contain::before {
  background-size: contain;
  background-color: #050816;
}

body.has-custom-background.background-stretch::before {
  background-size: 100% 100%;
}

body.has-custom-background.background-original::before {
  background-size: auto;
}

body.has-custom-background.background-repeat::before {
  background-size: auto;
  background-position: top left;
  background-repeat: repeat;
}

@media (max-width: 700px) {
  body.has-custom-background::before,
  body.has-custom-background::after {
    position: fixed;
  }
}


/* Hintergrund ohne sichtbaren Code im body-Tag */
.site-background {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #050816;
  pointer-events: none;
}
.site-background .background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.site-background .background-contain { object-fit: contain; }
.site-background .background-cover { object-fit: cover; }
.site-background .background-stretch { object-fit: fill; }
.site-background .background-original {
  width: auto;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.background-darkening {
  position: absolute;
  inset: 0;
  background: #050816;
}
.page-shell { position: relative; z-index: 1; }