:root {
  --mr-toc-bg: #ffffff;
  --mr-toc-text: #0f172a;       /* slate-900 */
  --mr-toc-muted: #64748b;      /* slate-500 */
  --mr-toc-border: rgba(15, 23, 42, 0.10);
  --mr-toc-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  --mr-toc-shadow-strong: 0 20px 45px rgba(15, 23, 42, 0.18);
  --mr-toc-radius: 14px;
--mr-toc-accent: #00cb04;
--mr-toc-accent-soft: #E5FFE5;
--mr-toc-focus: rgba(0, 203, 4, 0.35);


}

/* Container */
#mr-toc.mr-toc {
  font-size: 0.95rem;
  line-height: 1.5;
  background: var(--mr-toc-bg);
  color: var(--mr-toc-text);
  border: 1px solid var(--mr-toc-border);
  border-radius: var(--mr-toc-radius);
  padding: 14px 14px 10px;
  box-shadow: var(--mr-toc-shadow);
  box-sizing: border-box;
  overflow: hidden;
}

/* Title */
.mr-toc__title {
  display: flex;
  align-items: center;
  gap: 10px;

  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--mr-toc-muted);
  margin: 2px 2px 10px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Optional: kleines Icon vor Titel */
.mr-toc__title::before {
  content: "≡";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.55);
  font-size: 14px;
}

/* Liste */
.mr-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

/* Links */
.mr-toc__list a {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--mr-toc-text) !important;
  opacity: 0.92;
  transition: background 160ms ease, transform 160ms ease, color 160ms ease;
}

/* Hover */
.mr-toc__list a:hover {
  background: rgba(15, 23, 42, 0.05);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Active (Link + LI) */
.mr-toc__list a.is-active {
  background: var(--mr-toc-accent-soft);
  color: var(--mr-toc-text) !important;
  font-weight: 650;
}

.mr-toc__list li.is-active > a {
  position: relative;
  outline: 0;
}

/* Aktiver Akzent-Strich links */
.mr-toc__list li.is-active > a::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--mr-toc-accent);
}

/* Fokus (Keyboard) */
.mr-toc__list a:focus-visible {
  outline: 3px solid var(--mr-toc-focus);
  outline-offset: 2px;
}

/* =========================
   Desktop Layout
   ========================= */
@media (min-width: 1024px) {

  /* TOC links neben den Content, nicht darüber */
  #mr-toc.mr-toc {
    float: left;
    width: 260px;
    margin: 0 30px 18px 0;

    position: sticky;
    top: 120px;
    max-height: calc(100vh - 160px);
    overflow: auto;
  }

  /* Kein extra Margin-Offset mehr nötig */
  .page .entry-content {
    margin-left: 0 !important;
  }

  .mr-toc-toggle {
    display: none;
  }
}


/* =========================
   Mobile Bottom Sheet
   ========================= */
@media (max-width: 1023px) {
  #mr-toc.mr-toc {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;

    max-height: 70vh;
    transform: translateY(calc(100% + 24px));
    transition: transform 220ms ease, box-shadow 220ms ease;

    z-index: 9999;
    border-radius: 18px;
    box-shadow: var(--mr-toc-shadow-strong);
  }

  /* Handle-Bar oben im Sheet */
  #mr-toc.mr-toc::after {
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    margin: 10px auto 2px;
    background: rgba(15, 23, 42, 0.16);
  }

  #mr-toc.mr-toc.is-open {
    transform: translateY(0);
  }

  /* Toggle Button modern */
  .mr-toc-toggle {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 10000;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 11px 14px;
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: 0.02em;

    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
    cursor: pointer;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mr-toc-toggle:active {
    transform: translateY(1px);
  }
}

/* =========================
   Backdrop (wird via JS toggled)
   ========================= */
.mr-toc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.mr-toc-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   Desktop: echtes 2-Spalten-Layout
   ========================= */
@media (min-width: 1024px) {

  /* Nur auf Seiten/Beiträgen, wo das TOC existiert */
  body.single #mr-toc,
  body.page #mr-toc {
    /* nur als Marker – keine Styles nötig */
  }

  /* Der Artikel-Wrapper wird zur Grid-Fläche */
  body.single .inside-article,
  body.page .inside-article {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr); /* links TOC, rechts Content */
    column-gap: 32px;
    align-items: start;
  }

  /* Header soll über beide Spalten gehen */
  body.single .inside-article > .entry-header,
  body.page .inside-article > .entry-header {
    grid-column: 1 / -1;
  }

  /* TOC links */
  body.single .inside-article > #mr-toc.mr-toc,
  body.page .inside-article > #mr-toc.mr-toc {
    grid-column: 1;
    grid-row: 2;

    position: sticky;
    top: 120px;
    max-height: calc(100vh - 160px);
    overflow: auto;

    width: auto;     /* Grid bestimmt die Breite */
    margin: 0;       /* wichtig: keine float-margins */
    float: none;     /* wichtig: float deaktivieren */
  }

  /* Komplettes Content-Rechts (ALLES in entry-content) */
  body.single .inside-article > .entry-content,
  body.page .inside-article > .entry-content {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0 !important;
    min-width: 0; /* verhindert Overflow bei großen Bildern */
  }

  /* Falls dein Theme noch andere Blöcke im Artikel hat (z.B. author box) */
  body.single .inside-article > *:not(.entry-header):not(#mr-toc):not(.entry-content),
  body.page .inside-article > *:not(.entry-header):not(#mr-toc):not(.entry-content) {
    grid-column: 2;
    grid-row: 2;
  }

  /* Button am Desktop aus */
  .mr-toc-toggle {
    display: none;
  }
}