/* =========================================================
   Ruhiges Grunddesign – einheitlicher Hintergrund
   ========================================================= */

:root{
  --bg: #0f1115;
  --surface: #161a22;
  --text: #e6e8ee;
  --muted: #9aa2b2;
  --border: #2a3140;

  --accent: #6f8cff;
  --accent-human: #7a2e2e;

  --maxw: 920px;
  --radius: 12px;
  --space: 24px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f4f5f8;
    --surface: #ffffff;
    --text: #1f2937;
    --muted: #5b6475;
    --border: #e2e6ef;

    --accent: #2f5cff;
    --accent-human: #8b2f2f;
  }
}

/* =========================================================
   Reset & Basis
   ========================================================= */

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
}

/* =========================================================
   Layout
   ========================================================= */

header, main, footer{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space);
}

header{
  padding-top: 20px;
  padding-bottom: 18px;
}

header::after{
  content: "";
  display: block;
  margin-top: 14px;
  border-bottom: 1px solid var(--accent-human);
  opacity: 0.85;
}

main{
  padding-top: 28px;
  padding-bottom: 28px;
}

footer{
  padding-top: 24px;
  padding-bottom: 36px;
  color: var(--muted);
}

footer::before{
  content: "";
  display: block;
  margin-bottom: 14px;
  border-top: 1px solid var(--accent-human);
  opacity: 0.85;
}

/* =========================================================
   Typografie
   ========================================================= */

h1{
  font-size: 2rem;
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}

h2{
  font-size: 1.1rem;
  margin: 28px 0 10px;
}

p{ margin: 0 0 14px; }

ul{ margin: 8px 0 0 22px; }

li{ margin: 6px 0; }

/* =========================================================
   Navigation
   ========================================================= */

nav{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

nav a{
  color: var(--muted);
}

nav a:hover{
  color: var(--text);
}

nav a[aria-current="page"]{
  color: var(--text);
  font-weight: 600;
}

nav a[href="/osmensch/"]{
  color: var(--accent-human);
}
nav a[href="/osmensch/"]:hover{
  color: #9a3b3b;
}
nav a[href="/osmensch/"][aria-current="page"]{
  color: #9a3b3b;
  font-weight: 600;
}

/* =========================================================
   Full-Width Banner
   ========================================================= */

.hero-banner{
  width: 100vw;
  height: 42vh;
  min-height: 260px;
  max-height: 460px;

  background-image: url("/www.root.site.assets.img/banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  margin: 32px calc(50% - 50vw);

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* =========================================================
   Inhaltsflächen
   ========================================================= */

section{
  margin-top: 24px;
  padding: 20px 22px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* =========================================================
   Footer
   ========================================================= */

footer a{
  color: var(--muted);
}
footer a:hover{
  color: var(--text);
}