@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#050608;
  --bg-core:#0c1310;
  --ink:#F3F6F3;
  --muted:#9AB0A9;
  --faint:#5f7570;
  --green:#3dffa0;
  --green-soft:rgba(61,255,160,.5);
  --pink:#ff8fd6;
  --pink-soft:rgba(255,143,214,.45);
  --line:rgba(200,220,210,.16);
  --panel:rgba(10,14,16,.55);
  --font:'Manrope', system-ui, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  font-family:var(--font); color:var(--ink); line-height:1.6;
  background:var(--bg);
  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* fixed nebula backdrop, shared by every page */
.bg{
  position:fixed; inset:0; z-index:-1;
  background-color:var(--bg);
  background-image:url('Assets/BG/Space_web.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* strong scrim — dims the starfield heavily so text stays clearly legible */
.bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,6,8,.80) 0%, rgba(5,6,8,.66) 42%, rgba(5,6,8,.82) 100%),
    radial-gradient(130% 120% at 50% 45%, rgba(5,6,8,.28) 42%, rgba(5,6,8,.78) 100%);
}

/* topbar */
.top{position:sticky; top:0; z-index:10; display:flex; justify-content:space-between;
  align-items:center; gap:16px; padding:18px clamp(20px,5vw,52px);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background:linear-gradient(180deg, rgba(4,6,8,.7), rgba(4,6,8,0));}
.top a{color:inherit; text-decoration:none}
.top .mark{font-weight:700; letter-spacing:.04em; font-size:13px; color:var(--muted)}
.top .mark b{color:var(--ink); font-weight:800}
.top .back{font-size:13px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:.5em;
  padding:.5em 1em; border-radius:999px; border:1px solid var(--line); transition:.2s}
.top .back:hover{color:var(--ink); border-color:var(--green-soft)}

footer.foot{position:relative; z-index:1; text-align:center; padding:40px 20px 60px;
  font-size:13px; color:var(--faint); letter-spacing:.02em}
footer.foot b{color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  * {animation:none !important}
}

/* ---------- profile pages ---------- */
main.profile{position:relative; z-index:1; max-width:760px; margin:0 auto;
  padding:0 clamp(20px,5vw,40px) 120px}

.portrait{display:block; margin:clamp(10px,3vh,28px) auto clamp(18px,3vh,26px);
  width:clamp(190px,34vw,280px); height:auto;
  filter:drop-shadow(0 0 30px var(--green-soft)) drop-shadow(0 0 5px rgba(0,0,0,.6))}

main.profile h1{font-weight:800; text-align:center; line-height:1.04;
  font-size:clamp(38px,8vw,64px); letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 0 40px rgba(255,255,255,.14)}
.subtitle{text-align:center; margin-top:.55em; color:var(--muted);
  font-size:clamp(14px,2.2vw,17px); font-weight:500; letter-spacing:.01em}

.meta{display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(16px,4vw,40px); margin:clamp(20px,4vh,34px) 0 clamp(30px,6vh,50px);
  padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.meta div{text-align:center; min-width:80px; max-width:280px}
.meta .k{font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); font-weight:600; margin-bottom:.5em}
.meta .v{font-size:clamp(14px,2.2vw,16px); font-weight:600; color:var(--ink)}

main.profile section{margin-bottom:clamp(38px,7vh,58px)}
.eyebrow{display:inline-flex; align-items:center; gap:.6em; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--green);
  font-weight:700; margin-bottom:1.1em}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--green-soft)}
main.profile section h2{font-weight:700; font-size:clamp(21px,3.6vw,28px); letter-spacing:-.005em;
  margin-bottom:.7em; color:var(--ink)}
main.profile section p{font-size:clamp(15px,2.2vw,17.5px); color:#d3e4e0; margin-bottom:1em;
  font-weight:400}
main.profile section p:last-child{margin-bottom:0}
main.profile section p strong, main.profile section p b{color:#eafff4; font-weight:700}

/* pulled highlight (Kerngedanke) */
.kern{position:relative; text-align:center; margin:clamp(30px,6vh,52px) 0;
  padding:clamp(26px,5vw,40px) clamp(20px,5vw,46px);
  border-radius:20px; border:1px solid rgba(61,255,160,.22);
  background:radial-gradient(120% 140% at 50% 0%, rgba(61,255,160,.09), rgba(10,14,16,.4))}
.kern .q{font-weight:700; font-size:clamp(19px,3.2vw,26px); line-height:1.32;
  color:#eafff4; text-shadow:0 0 26px rgba(61,255,160,.35)}
.kern .src{margin-top:1.1em; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600}

/* Prägende Begriffe — term list */
.terms{list-style:none; display:flex; flex-direction:column; gap:2px}
.terms li{padding:16px 0; border-top:1px solid var(--line)}
.terms li:last-child{border-bottom:1px solid var(--line)}
.terms .t{display:block; color:var(--green); font-weight:700;
  font-size:clamp(15px,2.2vw,17px); margin-bottom:.3em; letter-spacing:.005em}
.terms .d{display:block; color:#cbdad5; font-size:clamp(14px,2vw,16px); font-weight:400}

/* sources */
.sources{list-style:none; display:flex; flex-direction:column; gap:.7em}
.sources li{font-size:14px; color:var(--muted); padding-left:1.1em; position:relative}
.sources li::before{content:"·"; position:absolute; left:0; color:var(--green); font-weight:700}
.sources a{color:var(--green); text-decoration:none; border-bottom:1px solid rgba(61,255,160,.3)}
.sources a:hover{border-bottom-color:var(--green)}

.placeholder-note{margin:clamp(30px,6vh,52px) 0; padding:18px 22px; border-radius:14px;
  border:1px dashed var(--pink-soft); background:rgba(255,143,214,.06);
  color:var(--muted); font-size:14px}
.placeholder-note b{color:var(--ink)}

@media (max-width:520px){
  .meta{gap:18px 28px}
}