:root{
  --toc-width:280px;
  --article-max:820px;
}

.article-layout{
  display:grid;
  grid-template-columns:minmax(240px,var(--toc-width)) minmax(0,1fr);
  gap:2rem;
  max-width:1200px;
  margin:0 auto;
  padding:2rem 1.5rem 6rem;
  align-items:start;
}

.toc-sidebar{
  position:sticky;
  top:calc(var(--header-height) + 1rem);
  align-self:start;
  max-height:calc(100vh - var(--header-height) - 2rem);
  overflow:auto;
  padding-right:0.35rem;
  scrollbar-width:thin;
}

/* Reset gegen globale nav-Styles aus style.css */
.toc{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  height:auto !important;
  max-width:none !important;
  margin:0 !important;

  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:1rem;
  backdrop-filter:blur(10px);
}

.toc-label{
  display:block;
  position:relative;
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-weight:700;
  margin:0 0 0.85rem;
  padding:0 0 0.75rem;
  border-bottom:1px solid var(--glass-border);
}

#toc-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0.2rem;
}

#toc-list li{
  margin:0;
  padding:0;
}

#toc-list li a{
  display:block;
  position:relative;
  font-size:0.78rem;
  color:var(--text-secondary);
  padding:0.55rem 0.75rem;
  border-radius:10px;
  border-left:2px solid transparent;
  transition:color 0.2s,background 0.2s,border-color 0.2s,transform 0.2s;
  line-height:1.45;
  font-family:var(--font-mono);
  text-decoration:none;
  word-break:break-word;
  overflow-wrap:anywhere;
  text-shadow:none;
}

#toc-list li a::after{
  display:none;
}

#toc-list li a:hover{
  color:var(--primary);
  background:rgba(0,240,255,0.06);
  transform:translateX(2px);
}

#toc-list li a.toc-active{
  color:var(--primary);
  background:rgba(0,240,255,0.1);
  border-left-color:var(--primary);
  font-weight:600;
}

#toc-list li a.toc-link-h3{
  padding-left:1.35rem;
  font-size:0.74rem;
  opacity:0.9;
}

.article-main{
  min-width:0;
  max-width:var(--article-max);
  width:100%;
  margin-top:0 !important;
  min-height:0 !important;
}

.blog-article{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  backdrop-filter:blur(8px);
}

/* Wichtig: style.css hat einen globalen `header { position:fixed; ... }`.
   Dieser Reset verhindert, dass der Artikel-Header über dem Text liegt. */
.blog-article .article-header,
.article-header{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-width:none !important;
  margin:0 !important;
  display:block !important;

  padding:3rem 3rem 2rem;
  border-bottom:1px solid var(--glass-border);
  background:rgba(0,240,255,0.02);
}

.article-back{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
  transition:color 0.2s;
  text-decoration:none;
}

.article-back::after{
  display:none;
}

.article-back:hover{
  color:var(--primary);
}

.article-switcher{
  display:inline-flex;
  gap:0.4rem;
  margin:1rem 0 0;
  padding:0.35rem;
  border:1px solid var(--glass-border);
  border-radius:999px;
  background:rgba(255,255,255,0.03);
}

.article-switcher a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  padding:0.45rem 0.8rem;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-secondary);
  text-decoration:none;
  text-shadow:none;
}

.article-switcher a::after{
  display:none;
}

.article-switcher a:hover{
  color:var(--primary);
  text-shadow:none;
}

.article-switcher a.active{
  background:rgba(0,240,255,0.14);
  color:var(--primary);
}

.article-tags{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  margin:1.5rem 0 1rem;
}

.article-tag{
  font-size:0.72rem;
  padding:0.3rem 0.8rem;
  background:rgba(0,240,255,0.08);
  border:1px solid rgba(0,240,255,0.2);
  border-radius:100px;
  color:var(--primary);
  font-family:var(--font-mono);
  font-weight:600;
}

.article-tag-muted{
  font-size:0.72rem;
  padding:0.3rem 0.8rem;
  background:rgba(0,240,255,0.03);
  border:1px solid var(--glass-border);
  border-radius:100px;
  color:var(--text-muted);
  font-family:var(--font-mono);
}

.article-header h1{
  position:relative;
  font-size:clamp(1.9rem,4vw,2.8rem);
  font-weight:800;
  line-height:1.15;
  margin:0.75rem 0 1rem;
  letter-spacing:-0.02em;
  overflow-wrap:anywhere;
}

.article-meta{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--text-muted);
  flex-wrap:wrap;
}

.meta-sep{
  color:var(--glass-border-hover);
}

.article-lead{
  margin-top:1.5rem;
  font-size:1.1rem;
  color:var(--text-secondary);
  line-height:1.75;
  border-left:3px solid var(--primary);
  padding-left:1.25rem;
}

.article-body{
  position:relative;
  z-index:1;
  padding:2.5rem 3rem;
  overflow-wrap:anywhere;
}

.article-body>*:first-child{
  margin-top:0;
}

.article-body h2,
.article-body h3{
  display:block !important;
  position:static !important;
  float:none !important;
  clear:both !important;

  width:100%;
  max-width:100%;
  height:auto !important;
  min-height:0 !important;

  transform:none !important;
  translate:none !important;
  rotate:none !important;
  scale:none !important;
  opacity:1 !important;

  overflow:visible !important;
  overflow-wrap:anywhere;
  word-break:normal;

  z-index:auto !important;
  isolation:auto;

  scroll-margin-top:calc(var(--header-height) + 24px);
}

.article-body h2{
  font-size:1.45rem;
  font-weight:700;
  margin:3rem 0 1rem !important;
  padding:0 !important;
  color:var(--text);
  letter-spacing:-0.01em;
  line-height:1.35;
}

.article-body h2:first-child{
  margin-top:0 !important;
}

.article-body h3{
  font-size:1.1rem;
  font-weight:700;
  margin:2rem 0 0.75rem !important;
  padding:0 !important;
  color:var(--text);
  line-height:1.45;
}

.article-body h2::before,
.article-body h2::after,
.article-body h3::before,
.article-body h3::after{
  content:none !important;
  display:none !important;
}

.article-body h2 + *,
.article-body h3 + *{
  clear:both;
  margin-top:0;
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body .callout,
.article-body .code-window{
  position:relative;
  z-index:0;
}

.article-body p{
  display:block;
  color:var(--text-secondary);
  line-height:1.8;
  margin:0 0 1.25rem;
  font-size:1rem;
}

.article-body ul,
.article-body ol{
  color:var(--text-secondary);
  line-height:1.8;
  margin:0 0 1.5rem 1.4rem;
  font-size:1rem;
  padding-left:0.2rem;
}

.article-body li{
  margin-bottom:0.45rem;
}

.article-body a{
  color:var(--primary);
}

.article-body strong{
  color:var(--text);
  font-weight:600;
}

.article-body .code-window{
  margin:1.5rem 0 2rem;
  transform:none;
}

.article-body .code-window:hover{
  transform:none;
}

.article-body .code-window .code-content{
  font-size:0.78rem;
  overflow-x:auto;
}

.article-body pre{
  max-width:100%;
  white-space:pre;
}

.callout{
  padding:1rem 1.25rem;
  border-radius:var(--radius);
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.03);
  margin:0.75rem 0 1rem;
  font-size:0.95rem;
  color:var(--text-secondary);
  line-height:1.7;
}

.callout strong{
  display:block;
  margin-bottom:0.25rem;
}

.callout-primary{
  border-color:rgba(0,240,255,0.3);
  background:rgba(0,240,255,0.05);
}

.callout-primary strong{
  color:var(--primary);
}

.callout-secondary{
  border-color:rgba(189,0,255,0.3);
  background:rgba(189,0,255,0.05);
}

.callout-secondary strong{
  color:var(--secondary);
}

.callout-accent{
  border-color:rgba(0,255,157,0.3);
  background:rgba(0,255,157,0.05);
}

.callout-accent strong{
  color:var(--accent);
}

.article-cta{
  padding:3rem;
  border-top:1px solid var(--glass-border);
  background:rgba(189,0,255,0.04);
  text-align:center;
}

.article-cta .cta-badge{
  display:inline-block;
  padding:0.5rem 1.1rem;
  background:rgba(0,240,255,0.08);
  border:1px solid var(--primary);
  border-radius:100px;
  font-size:0.75rem;
  color:var(--primary);
  font-weight:700;
  margin-bottom:1.25rem;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.15em;
}

.article-cta h2{
  font-size:1.6rem;
  font-weight:700;
  margin-bottom:0.75rem;
}

.article-cta p{
  color:var(--text-secondary);
  margin:0 auto 1.75rem;
  line-height:1.7;
  max-width:480px;
}

@media(max-width:980px){
  .article-layout{
    grid-template-columns:1fr;
    gap:1.25rem;
    padding:1.5rem 1rem 4rem;
  }

  .toc-sidebar{
    position:sticky;
    top:calc(var(--header-height) + 1rem);
    max-height:calc(100vh - var(--header-height) - 2rem);
    overflow:auto;
    padding-right:0.35rem;
    order:-1;
  }

  .article-main{
    max-width:none;
  }

  #toc-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:0.35rem;
  }
}

@media(max-width:700px){
  .article-header,
  .article-body,
  .article-cta{
    padding-left:1.4rem;
    padding-right:1.4rem;
  }
}


@media(max-width:600px){
  .toc-sidebar{
    position:relative;
    top:auto;
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
}

@media(max-width:600px){
  .article-layout{
    padding:1rem 0.75rem 3rem;
  }

  #toc-list{
    grid-template-columns:1fr;
  }

  .article-header,
  .article-body,
  .article-cta{
    padding-left:1.2rem;
    padding-right:1.2rem;
  }

  .article-header h1{
    font-size:1.6rem;
  }

  .article-meta{
    font-size:0.74rem;
  }

  .article-lead{
    font-size:1rem;
    padding-left:1rem;
  }

  .article-switcher{
    margin-top:0.9rem;
  }
}


/* Sprachumschalter im Artikel entfernen */
.article-switcher{
  display:none !important;
}


/* =========================================================
   FINAL: TOC bleibt fix links, Artikel bekommt reservierten Platz
   Kein Grid-Sticky mehr. Das TOC ist fixed, der Artikel wird per
   margin-left daneben gehalten.
   ========================================================= */

@media (min-width:981px){
  .article-layout{
    display:block !important;
    position:relative !important;
    max-width:1200px !important;
    margin:0 auto !important;
    padding:2rem 1.5rem 6rem !important;
  }

  .toc-sidebar{
    position:fixed !important;
    top:calc(var(--header-height) + 1.25rem) !important;
    left:max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem)) !important;
    width:var(--toc-width) !important;
    height:auto !important;
    max-height:calc(100vh - var(--header-height) - 2.5rem) !important;
    overflow:visible !important;
    padding-right:0 !important;
    z-index:100 !important;
  }

  .toc-sidebar .toc{
    max-height:calc(100vh - var(--header-height) - 2.5rem) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    scrollbar-width:thin;
  }

  .article-main{
    width:auto !important;
    max-width:var(--article-max) !important;
    margin-top:0 !important;
    margin-left:calc(var(--toc-width) + 2rem) !important;
    margin-right:auto !important;
    min-width:0 !important;
  }
}

@media (max-width:980px){
  .article-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:1.25rem !important;
    padding:1.5rem 1rem 4rem !important;
  }

  .toc-sidebar{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
    z-index:auto !important;
    order:-1 !important;
  }

  .toc-sidebar .toc{
    max-height:none !important;
    overflow:visible !important;
  }

  .article-main{
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}