/**
 * TOC - Table of Contents
 * Dein Selbstversorger Child Theme
 *
 * Premium Naturpapier Design
 * Ruhig, kompakt, einklappbar, Darkmode-kompatibel
 */

/* =========================================================
   01 Container
   ========================================================= */

.ds-toc-container {
  position: relative;
  display: block;

  max-width: 920px;
  margin: 22px auto 28px;
  padding: 18px 20px;

  overflow: hidden;

  /* FESTE FARBEN statt globale Variablen */
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.55), transparent 28%),
    linear-gradient(135deg, #f7f1e6 0%, #efe5d6 100%);

  border: 1px solid #d6cdbd;
  border-top: 2px solid #5d7c58;

  border-radius: 22px 8px 22px 12px;

  box-shadow:
    0 10px 28px rgba(82,115,77,0.08),
    inset 0 1px 0 rgba(255,255,255,0.62);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}

/* dezente Papierwirkung */
.ds-toc-container::after {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(82,115,77,0.03),
      transparent 35%,
      rgba(139,169,122,0.035)
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(139,169,122,0.08),
      transparent 26%
    );

  opacity: 0.8;
}

/* obere Natur-Linie */
.ds-toc-container::before {
  content: "";

  position: absolute;

  top: 0;
  left: 18px;
  right: 18px;

  height: 2px;

  background: linear-gradient(
    90deg,
    transparent 0%,
    #5d7c58 12%,
    #91a97b 55%,
    #345238 88%,
    transparent 100%
  );

  opacity: 0.8;
  border-radius: 999px;
}

/* =========================================================
   02 Header und Toggle
   ========================================================= */

.ds-toc-header {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  margin: 0;
  padding: 0;

  background: transparent !important;
}

/* Linie rechts vom Button */
.ds-toc-header::after {
  content: "";

  flex: 1;
  height: 1px;

  margin-left: 18px;

  background: linear-gradient(
    90deg,
    rgba(82,115,77,0.30),
    transparent
  );
}

.ds-toc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-width: 190px;

  padding: 9px 15px 9px 17px;

  color: #244f2f;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.42),
      rgba(139,169,122,0.10)
    );

  border: 1px solid rgba(82,115,77,0.30);

  border-radius: 18px 7px 18px 9px;

  font: inherit;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;

  cursor: pointer;

  box-shadow:
    0 3px 10px rgba(82,115,77,0.08),
    inset 0 1px 0 rgba(255,255,255,0.70);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.ds-toc-toggle:hover {
  transform: translateY(-1px);

  border-color: #91a97b;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.58),
      rgba(139,169,122,0.18)
    );

  box-shadow:
    0 6px 16px rgba(82,115,77,0.12),
    inset 0 1px 0 rgba(255,255,255,0.72);
}

.ds-toc-toggle:focus-visible {
  outline: 2px solid #5d7c58;
  outline-offset: 3px;
}

.ds-toc-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  border-radius: 999px;

  background: rgba(82,115,77,0.10);

  color: #244f2f;

  font-size: 12px;
  line-height: 1;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.ds-toc-toggle[aria-expanded="true"] .ds-toc-toggle-icon {
  transform: rotate(180deg);

  background: rgba(82,115,77,0.16);
}

/* =========================================================
   03 Liste allgemein
   ========================================================= */

.ds-toc-list {
  position: relative;
  z-index: 2;

  list-style: none;

  margin: 16px 0 0;
  padding: 8px 0 0;

  max-height: 2200px;

  opacity: 1;
  overflow: hidden;

  border-top: 1px solid rgba(82,115,77,0.18);

  background: transparent !important;

  transition:
    max-height 0.34s ease,
    opacity 0.24s ease,
    margin-top 0.24s ease,
    padding-top 0.24s ease;
}

.ds-toc-list[aria-expanded="false"] {
  max-height: 0;

  opacity: 0;

  margin-top: 0;
  padding-top: 0;

  pointer-events: none;

  border-top-color: transparent;
}

/* =========================================================
   04 H2
   ========================================================= */

.ds-toc-item-h2 {
  list-style: none;

  margin: 0;
  padding: 0;
}

.ds-toc-item-h2 + .ds-toc-item-h2 {
  margin-top: 5px;
}

.ds-toc-item-h2 > a {
  position: relative;

  display: block;

  padding: 9px 12px 9px 24px;

  color: #2f4d34;

  text-decoration: none;

  font-size: 15.5px;
  font-weight: 750;
  line-height: 1.45;

  border-radius: 11px 4px 10px 6px;

  transition:
    color 0.22s ease,
    background 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.ds-toc-item-h2 > a::before {
  content: "";

  position: absolute;

  left: 7px;
  top: 50%;

  width: 7px;
  height: 7px;

  transform: translateY(-50%) rotate(45deg);

  background: #91a97b;

  border-radius: 70% 30% 70% 30%;

  opacity: 0.8;
}

.ds-toc-item-h2 > a:hover,
.ds-toc-item-h2.ds-toc-item-active > a {
  color: #244f2f;

  background:
    linear-gradient(
      90deg,
      rgba(82,115,77,0.08),
      transparent 86%
    );

  transform: translateX(2px);

  box-shadow:
    inset 2px 0 0 rgba(82,115,77,0.34);
}

/* =========================================================
   05 H3
   ========================================================= */

.ds-toc-item-h3-list {
  position: relative;

  list-style: none;

  margin: 0 0 4px 22px;
  padding: 0 0 2px 14px;

  border-left: 1px solid rgba(139,169,122,0.28);
}

.ds-toc-item-h3 {
  list-style: none;

  margin: 0;
  padding: 0;
}

.ds-toc-item-h3 > a {
  display: block;

  padding: 5px 9px;

  color: #5d665d;

  text-decoration: none;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;

  border-radius: 7px 3px 7px 4px;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.ds-toc-item-h3 > a:hover,
.ds-toc-item-h3.ds-toc-item-active > a {
  color: #2f4d34;

  background: rgba(139,169,122,0.065);

  transform: translateX(2px);
}

/* =========================================================
   06 Darkmode
   ========================================================= */

body.ds-darkmode .ds-toc-container {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.03), transparent 28%),
    linear-gradient(135deg, #172217 0%, #1d2b1d 100%);

  border-color: rgba(139,169,122,0.20);

  border-top-color: #91a97b;
}

body.ds-darkmode .ds-toc-header {
  background: transparent !important;
}

body.ds-darkmode .ds-toc-header::after {
  background:
    linear-gradient(
      90deg,
      rgba(139,169,122,0.25),
      transparent
    ) !important;
}

body.ds-darkmode .ds-toc-list {
  background: transparent !important;
}

body.ds-darkmode .ds-toc-toggle {
  color: #d7dfc8;

  background:
    linear-gradient(
      135deg,
      rgba(139,169,122,0.10),
      rgba(139,169,122,0.04)
    );

  border-color: rgba(139,169,122,0.35);
}

body.ds-darkmode .ds-toc-toggle-icon {
  color: #d7dfc8;
}

body.ds-darkmode .ds-toc-item-h2 > a {
  color: #dfe7d2;
}

body.ds-darkmode .ds-toc-item-h3 > a {
  color: #bcc8b8;
}

/* =========================================================
   07 Responsive
   ========================================================= */

@media (max-width: 768px) {

  .ds-toc-container {
    margin: 18px 0 24px;
    padding: 15px;
  }

  .ds-toc-toggle {
    min-width: 170px;
    font-size: 14px;
  }

  .ds-toc-item-h2 > a {
    font-size: 14px;
  }

  .ds-toc-item-h3 > a {
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {

  .ds-toc-container {
    padding: 12px;
  }

  .ds-toc-toggle {
    min-width: 0;
    font-size: 13px;
  }

  .ds-toc-item-h2 > a {
    font-size: 13px;
  }

  .ds-toc-item-h3 > a {
    font-size: 11.5px;
  }
}

/* =========================================================
   08 Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ds-toc-container,
  .ds-toc-list,
  .ds-toc-toggle,
  .ds-toc-toggle-icon,
  .ds-toc-item-h2 > a,
  .ds-toc-item-h3 > a {
    transition: none !important;
  }
}