:root{
      --bg: #ffffff;
      --fg: #111;
      --muted:#667;
      --accent:#0b7285;
      --card:#f7f7f8;
      --border:#e5e7eb;
      --shadow: 0 10px 30px rgba(0,0,0,.06);
      --radius: 16px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      --content-max: 860px;    
    }

    /* Explizite Paletten – vom JS via [data-theme] gesetzt */
    [data-theme="light"]{
      color-scheme: light;
      --bg:#ffffff; --fg:#111; --muted:#667; --accent:#0b7285;
      --card:#f7f7f8; --border:#e5e7eb; --shadow: 0 10px 30px rgba(0,0,0,.06);
    }
    [data-theme="dark"]{
      color-scheme: dark;
      --bg:#0b0c0f; --fg:#e6e6e6; --muted:#9aa3ad; --accent:#58c4d8;
      --card:#121418; --border:#262a30; --shadow: none;
    }

    *{ 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, Arial, sans-serif;
    }
    a{ color:var(--accent); text-decoration:none; }
    a:hover{ text-decoration: underline; }

    header{
      display:flex;
      flex-direction: column;       /* mobile: Titel über Buttons */
      gap: .5rem;
      padding: 16px 24px;
      border-bottom:1px solid var(--border);
      position: sticky; top:0; background:var(--bg); z-index: 5;
    }
    .site-title{ font-size: 1.5rem; margin:0; }
    .toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; }
    .btn{
      border:1px solid var(--border); background:var(--card); color:var(--fg);
      padding: 8px 12px; border-radius: 12px; cursor:pointer; box-shadow: var(--shadow);
    }

    @media (min-width: 961px){
      header{ flex-direction: row; align-items:center; justify-content:space-between; }
    }

    .layout{
      display:grid;
      grid-template-columns: 300px minmax(0,1fr);
      gap: 24px;
      margin: 0 auto;
 max-width: none;
  margin: 0;
  padding: 16px;
}
main > .card{
  max-width: var(--content-max);
  margin: 16px auto;
}

/* Overlay für Off-Canvas */
.overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:4; }
body.nav-open .overlay{ display:block; }

/* Off-Canvas Navigation ab 960px abwärts */
@media (max-width: 960px){
  .layout{ grid-template-columns: 1fr; }
  aside{
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(86vw, 360px);
    background: var(--card);
    border-right: 1px solid var(--border);
    transform: translateX(-110%);
    transition: transform .2s ease;
    z-index: 5; /* über Content, unter Overlay */
    max-height: none;
    border-radius: 0;
  }
  body.nav-open aside{ transform: translateX(0); }
}
body.nav-open { overflow: hidden; }
    .search{ display:flex; gap:8px; margin-bottom:10px; }
    .search input{
      width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
      background:var(--bg); color:var(--fg);
    }

    .tree{ margin:0; padding-left: 8px; list-style:none; }
    .tree li{ margin: 4px 0; }
    .folder{ font-weight:600; margin-top:8px; }
    .leaf a{ display:block; padding: 4px 6px; border-radius:8px; }
    .leaf a.active{ background:rgba(88,196,216,.15); }

    main{ min-width:0; }
    .card{
      background:var(--card); border:1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow);
      padding: clamp(18px, 3vw, 28px);
    }

    /* Content */
    #content h1{ font-size: clamp(24px, 2.6vw, 32px); margin-top:0; }
    #content h2{ margin-top: 28px; font-size: 1.25rem; }
    #content h3{ margin-top: 18px; font-size: 1.05rem; color:var(--muted); }
    #content img, #content video{ max-width:100%; border-radius: 12px; }
    #content pre, #content code{ font-family: var(--mono); }
    #content pre{
      background: #0d0f14; color: #e6e6e6; padding: 14px; border-radius: 12px; overflow:auto;
    }
    #content blockquote{
      border-left: 4px solid var(--accent);
      margin: 12px 0; padding: 6px 12px; color: var(--muted);
      border-radius: 8px;
    }

    .toc{
      display:flex; gap:10px; flex-wrap: wrap; margin-bottom: 12px;
    }
    .toc a{
      border:1px solid var(--border); background:var(--bg);
      padding: 4px 8px; border-radius: 999px; font-size: .9rem;
    }
    .toplink{ display:block; text-align:center; color:var(--muted); margin-top: 24px; }

    footer{ text-align:center; color:var(--muted); padding: 32px 0; }

.skeleton {
  border-radius: 12px;
  background: linear-gradient(90deg, var(--card), #e9eef3, var(--card));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  height: 1.2rem;
  margin: .5rem 0;
}
@keyframes shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}
body[data-theme="dark"] {
--bg:#0b0c0f; 
  --fg:#e8eaed;                     /* etwas heller als vorher */
  --muted:#a7b0ba;                  /* bessere Lesbarkeit von Fließtext */
  --accent:#58c4d8;
  --card:#0f1115;                   /* ruhige Fläche, kein Grauschleier */
  --border:#1a1f26;
  --shadow:none;
}
[data-theme="dark"] body{ background: var(--bg); color: var(--fg); }
[data-theme="dark"] header,
[data-theme="dark"] footer{ background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .card{
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
}
[data-theme="dark"] .leaf a.active{ background: rgba(88,196,216,.12); }


/* Überschriften & Zitate leicht betonen */
#content h1{ color: var(--fg); }
#content h2{ color: var(--fg); opacity: .95; }
#content blockquote{
  border-left-color: var(--accent);
  color: var(--muted);
}

/* Skelett-Loader bleibt dezent im Dark-Mode */
[data-theme="dark"] .skeleton{
  background: linear-gradient(90deg, #141821, #1a2230, #141821);
}

@media (max-width: 960px){
  aside{
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(86vw, 360px);
    background: var(--card);
    border-right: 1px solid var(--border);
    transform: translateX(-110%);
    transition: transform .2s ease;
    z-index: 5; /* über Content, unter Overlay */
    /* NEU: eigenes Scrollen im Menü aktivieren */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open aside{ transform: translateX(0); }
}