/* ---------- Farb-Tokens ---------- */
:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f0f2f5;
  --text:#14171c;
  --text-muted:#5b636e;
  --border:#dfe3e8;
  --accent:#12b76a;
  --accent-strong:#0e9257;
  --shadow:0 1px 2px rgba(15,20,30,.06), 0 8px 24px rgba(15,20,30,.06);
  --shadow-hover:0 2px 4px rgba(15,20,30,.08), 0 16px 40px rgba(15,20,30,.12);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1116;
    --surface:#161b22;
    --surface-2:#1d232c;
    --text:#e8ecf1;
    --text-muted:#9aa4b2;
    --border:#2a313b;
    --accent:#2ee88a;
    --accent-strong:#48ff9e;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
    --shadow-hover:0 2px 4px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1116;
  --surface:#161b22;
  --surface-2:#1d232c;
  --text:#e8ecf1;
  --text-muted:#9aa4b2;
  --border:#2a313b;
  --accent:#2ee88a;
  --accent-strong:#48ff9e;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
  --shadow-hover:0 2px 4px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:1000px; margin:0 auto;
  padding:.75rem 1.25rem;
  display:flex; align-items:center; gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--text);
  font-weight:700; font-size:1.05rem; letter-spacing:-.01em;
  white-space:nowrap;
}
.brand img{
  width:40px; height:40px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--border);
  transition:border-color .3s ease, transform .3s ease;
  background:var(--surface-2);
}
.brand:hover img{border-color:var(--accent); transform:scale(1.05);}

.menu{
  display:flex; gap:.25rem;
  margin-left:auto;
  list-style:none; padding:0;
}
.menu a{
  display:block;
  padding:.45rem .85rem;
  border-radius:9px;
  text-decoration:none;
  color:var(--text-muted);
  font-size:.95rem; font-weight:500;
  transition:.25s;
}
.menu a:hover{background:var(--surface-2); color:var(--text);}
.menu a.active{color:var(--text); background:var(--surface-2);}

.theme-toggle{
  flex:none;
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  transition:.3s;
}
.theme-toggle:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px);}
.theme-toggle svg{width:20px; height:20px;}
:root[data-theme="dark"] .icon-moon{display:none;}
:root[data-theme="light"] .icon-sun{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .icon-moon{display:none;}
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .icon-sun{display:none;}
}

/* ---------- Layout ---------- */
main{max-width:1000px; margin:0 auto; padding:3.5rem 1.25rem 4rem;}
.page{display:none; animation:fade .35s ease;}
.page.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

h1{
  font-size:clamp(2rem, 5vw, 2.9rem);
  line-height:1.15; letter-spacing:-.03em;
  margin:0 0 .75rem;
}
h2{
  font-size:1.35rem; letter-spacing:-.01em;
  margin:3rem 0 1.25rem;
}
.lead{
  color:var(--text-muted);
  font-size:1.1rem;
  max-width:56ch;
  margin:0 0 .5rem;
}
.accent-rule{
  width:56px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--accent), transparent);
  margin:0 0 2rem;
}

/* ---------- Buttons (Format angelehnt an /Kopfrechnen) ---------- */
.btn-grid{
  display:flex; flex-wrap:wrap;
  gap:1.25rem;
}
.btn{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; gap:.5rem;
  width:10rem; height:10rem;
  padding:1rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  font-size:1.15rem; font-weight:600;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:.5s;
}
.btn small{
  font-size:.8rem; font-weight:400;
  color:var(--text-muted);
  line-height:1.35;
  transition:.5s;
}
.btn svg{width:28px; height:28px;}
.btn:hover{
  background:var(--accent);
  color:#06210f;
  border-color:var(--accent-strong);
  box-shadow:var(--shadow-hover);
  transform:translateY(-4px);
}
.btn:hover small{color:#06210f; opacity:.8;}

.btn-wide{width:16rem; height:10rem;}

/* ---------- Karten (NuS / Projekte) ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.25rem;
}
.card{
  display:block;
  padding:1.6rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:.35s;
}
.card h3{margin:0 0 .5rem; font-size:1.15rem;}
.card p{margin:0; color:var(--text-muted); font-size:.95rem;}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:var(--shadow-hover);
}

/* ---------- Datei-Übersicht (Notes-Stil) ---------- */
.files{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
}

.file{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1.6rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:.35s;
}

.file:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:var(--shadow-hover);
}

footer{
  border-top:1px solid var(--border);
  padding:2rem 1.25rem;
  text-align:center;
  color:var(--text-muted);
  font-size:.875rem;
}

@media (max-width:560px){
  .brand span{display:none;}
  .btn{width:100%; height:9rem;}
  .btn-wide{width:100%;}
  main{padding-top:2.5rem;}
}