/* path: assets/style.css */
/* Tokens */
:root{
  --bg:#0e1116; --fg:#eef2f7; --muted:#a9b1ba;
  --brand:#7cb2ff; --brand-600:#5293eb; --brand-050:#0b1a2f;
  --card:#121722; --border:#1e2430; --radius:16px;
  --shadow:none; --space:clamp(.75rem,1.5vw,1rem);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --fg:#111315; --muted:#61656b; --brand:#2b6cb0; --brand-600:#1f5591; --brand-050:#f0f6ff; --card:#ffffff; --border:#e6e8eb; --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06); }
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif}
/* Links */
a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-600);text-decoration:underline}
/* Layout */
.container{max-width:980px;margin:0 auto;padding:0 var(--space)}
.site-header{position:sticky;top:0;z-index:20;background:var(--brand-050);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:.75rem;justify-content:space-between;padding:.7rem 0}
.brand{font-weight:800;font-size:1.05rem;letter-spacing:.2px;color:var(--fg)}
/* Nav */
.nav{display:flex;gap:.5rem;flex-wrap:wrap}
.nav-link{padding:.35rem .6rem;border-radius:10px}
.nav-link.is-active{background:color-mix(in oklab,var(--brand) 15%, transparent)}
/* Hamburger (CSS only) */
.nav-toggle{display:none}
.hamburger{display:none;flex-direction:column;gap:4px;padding:.35rem .4rem;border-radius:10px;border:1px solid transparent;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--fg)}
/* Mobile menu */
@media (max-width: 760px){
  .hamburger{display:flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;padding:.5rem var(--space) .8rem;background:var(--card);border-bottom:1px solid var(--border)}
  .nav-link{display:block;padding:.5rem .6rem}
  #nav-toggle:checked ~ .nav{display:flex;flex-direction:column}
}
/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:2rem}
.site-footer .container{padding:1.2rem 0}
/* Headings etc. */
.h1{font-size:clamp(1.5rem,3.5vw,2rem);margin:.2rem 0 1rem}
.h2{font-size:clamp(1.2rem,2.5vw,1.5rem);margin:.2rem 0 1rem}
.h3{font-size:1.05rem;margin:.25rem 0 .25rem}
.muted{color:var(--muted)} .badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;background:color-mix(in oklab,var(--brand) 15%, transparent);color:var(--brand-600);border:1px solid var(--border);font-size:.8rem;vertical-align:middle}
/* Cards & grids */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:calc(var(--space)*1.2);box-shadow:var(--shadow);margin:1rem 0}
.card.soft{padding:var(--space)}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tile{padding:1rem;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.meta{display:flex;gap:.75rem;flex-wrap:wrap;margin:.25rem 0 .25rem}
.tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}
.tag{background:color-mix(in oklab,var(--brand) 15%, transparent);color:var(--brand-600);border:1px solid var(--border);border-radius:999px;padding:.15rem .5rem;font-size:.8rem}
/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (max-width:760px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field-wide{grid-column:1 / -1}
.input{width:100%;padding:.6rem .7rem;border:1px solid var(--border);border-radius:10px;background:transparent;color:inherit}
.input:focus{outline:3px solid color-mix(in oklab,var(--brand) 30%, transparent);border-color:var(--brand-600)}
.actions{display:flex;align-items:center;gap:.9rem;margin-top:.5rem}
.btn{appearance:none;border:1px solid var(--brand-600);background:var(--brand);color:#fff;padding:.55rem .9rem;border-radius:10px;cursor:pointer;font-weight:600}
.btn:hover{background:var(--brand-600)}
.btn.ghost{background:transparent;color:var(--brand-600);border-color:var(--border)}
.btn.ghost:hover{border-color:var(--brand-600)}
.alert{padding:.75rem .9rem;border-radius:12px;border:1px solid var(--border)}
.alert.success{background:#e9f7ef;border-color:#c6ead7;color:#1f6b3a}
.alert.error{background:#fff0f0;border-color:#f1cccc;color:#842029}
/* Misc */
.hp{position:absolute;left:-9999px}
/* path: assets/style.css – Ergänzung für Textarea & Beschreibung */
.textarea{width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:transparent; color:inherit; resize:vertical}
.textarea:focus{outline:3px solid color-mix(in oklab, var(--brand) 30%, transparent); border-color:var(--brand-600)}
.desc{margin:.4rem 0 0}
/* path: assets/style.css – Ergänzungen für „Weiteres“ und Layout */
.more{margin-top:.4rem}
.more > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .6rem; border:1px solid var(--border); border-radius:10px; user-select:none;
}
.more > summary::marker{display:none}
.more[open] > summary{background:color-mix(in oklab,var(--brand) 12%, transparent)}
.more .links{margin:.5rem 0 0; padding-left:1rem}
.more .links li{margin:.2rem 0}

/* Bestehende Styles bleiben wie in deiner letzten Version */
/* path: assets/style.css – Ergänzungen für Detaillesbarkeit */
.prose{margin:.6rem 0 1rem; line-height:1.7}
.prose br{margin-bottom:.35rem}
.detail .links{list-style:none; margin:.6rem 0; padding:0}
.detail .links li{margin:.25rem 0}
