/* =========================
    Lokale Schrift-Einbindung
    ========================= */
/* --- Atkinson Hyperlegible (Fließtext) --- */
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("/fonts/atkinson/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("/fonts/atkinson/AtkinsonHyperlegible-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("/fonts/atkinson/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url("/fonts/atkinson/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2");
  font-weight:700; font-style:italic; font-display:swap;
}

/* --- Atkinson Hyperlegible Mono (Code/Zahlen) --- */
@font-face{
  font-family:"Atkinson Hyperlegible Mono";
  src:url("/fonts/atkinson-mono/AtkinsonHyperlegibleMono-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible Mono";
  src:url("/fonts/atkinson-mono/AtkinsonHyperlegibleMono-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* --- Lexend Variable (Headlines/Navi/UI) --- */
@font-face{
  font-family:"Lexend";
  src:url("/fonts/lexend/Lexend[wght].woff2") format("woff2-variations");
  font-weight:300 800; font-style:normal; font-display:swap;
}
/* optionale statische Fallbacks, falls du keine Variable-Datei hast */
@font-face{
  font-family:"Lexend";
  src:url("/fonts/lexend/Lexend-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lexend";
  src:url("/fonts/lexend/Lexend-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lexend";
  src:url("/fonts/lexend/Lexend-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ================
    Design-Variablen
    ================ */
:root{
  --bg:#ffffff; --fg:#111111; --muted:#444; --surface:#f5f5f7;
  --accent:#0a7cff; --accent-contrast:#ffffff;
  --max:68rem; --radius:14px; --focus:3px solid #ff9900;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0c0c0f; --fg:#f2f2f2; --muted:#c9c9c9; --surface:#16161b;
          --accent:#4da3ff; --accent-contrast:#0b0b0e; }
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

html{box-sizing:border-box; scroll-behavior:smooth; font-size: 16px; background-color: var(--bg);}
*,*:before,*:after{box-sizing:inherit}

/* =======
    Typo
    ======= */
body{
  padding: 0;
  margin:0;
  font-family:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, "Helvetica Neue", sans-serif;
  font-size:18px; line-height:1.6;
  background:var(--bg); color:var(--fg);
  text-rendering:optimizeLegibility;
}
h1,h2,h3,nav,.nav-list a,.brand h1{
  font-family:"Lexend","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:600;
}
/* Feintuning für Lexend Variable (fallbacks ignorieren das einfach) */
h1{ font-variation-settings:"wght" 680; }
h2{ font-variation-settings:"wght" 630; }
.nav-list a{ font-variation-settings:"wght" 560; }

code, pre, kbd, samp, .number, .stat{
  font-family:"Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-feature-settings:"tnum" 1;
}

img,svg,video{max-width:100%; height:auto;}
a{color:var(--accent);}
a:focus, button:focus, summary:focus, input:focus, textarea:focus, select:focus{outline:var(--focus); outline-offset:2px;}

/* Skiplink */
.skip-link{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.6rem .9rem;
  background:var(--accent); color:var(--accent-contrast); border-radius:.5rem; z-index:9999;
}

header{background:var(--surface); border-bottom:1px solid #0001;}
.wrap{max-width:var(--max); margin-inline:auto; padding:0.5rem;}
.brand{display:flex; gap:1rem; align-items:center;}
.brand img{width:64px; height:64px; border-radius:50%; object-fit:cover;}
.brand h1{font-size:1.5rem; margin:.2rem 0 0 0;}
.tagline{margin:0; color:var(--muted);}

/* Details/summary Navigation */
nav{margin-top:1.5rem;}
details.nav{border:1px solid #0001; border-radius:var(--radius); background:var(--bg);}
summary.nav-toggle{
  list-style:none; padding:.9rem 1rem; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; font-weight:600;
}
summary.nav-toggle::-webkit-details-marker{display:none;}
.nav-list{display:flex; gap:.5rem; flex-wrap:wrap; padding:.2rem 1rem 1rem;}
.nav-list a{
  display:inline-block; padding:.55rem .8rem; border-radius:.7rem; text-decoration:none;
  background:var(--surface); border:1px solid #0002;
}
@media (min-width:800px){
  details.nav[open] > summary.nav-toggle{display:none;}
  details.nav[open] .nav-list{display:flex;}
  details.nav{padding:.5rem;}
  details.nav{border:none; background:transparent}
  details.nav .nav-list{padding:0}
  /* Progressive Enhancement: quasi dauerhaft offen auf Desktop */
  details.nav{open:open;}
}

main{max-width:var(--max); margin-inline:auto; padding:1rem;}
section{padding-block:2rem; border-bottom:1px solid #0001;}
section:last-of-type{border-bottom:none;}
h2{font-size:1.25rem; margin-top:0;}
.grid{display:grid; gap:1rem;}
@media (min-width:720px){ .grid-2{grid-template-columns:1fr 1fr;} }
.card{background:var(--surface); border:1px solid #0001; border-radius:var(--radius); padding:1rem;}
.meta{color:var(--muted); font-size:.95rem;}

footer{background:var(--surface); border-top:1px solid #0001;}
footer .wrap{display:flex; flex-direction:column; gap:.5rem;}
.legal a{margin-right:1rem;}

/* Formulare */
label{display:block; font-weight:600; margin:.6rem 0 .2rem;}
input, textarea{width:100%; padding:.7rem .8rem; border-radius:.6rem; border:1px solid #0003; background:var(--bg); color:inherit;}
button{padding:.7rem 1rem; border-radius:.6rem; border:1px solid transparent; background:var(--accent); color:var(--accent-contrast); cursor:pointer;}
button:hover{filter:brightness(0.97);}