/* Easy-Table-of-Contents: Inline-CSS, das WordPress zur Laufzeit erzeugt hat
   (id='eztoc-inline-css', 1:1 von der Live-Site übernommen — Theme "custom"). */
div#ez-toc-container .ez-toc-title {font-size: 100%;}
div#ez-toc-container .ez-toc-title {font-weight: 700;}
div#ez-toc-container ul li , div#ez-toc-container ul li a {font-size: 95%;}
div#ez-toc-container ul li , div#ez-toc-container ul li a {font-weight: 500;}
div#ez-toc-container nav ul ul li {font-size: 90%;}
div#ez-toc-container {background: #ffffff;border: 1px solid #c6c6c6;}
div#ez-toc-container p.ez-toc-title , #ez-toc-container .ez_toc_custom_title_icon , #ez-toc-container .ez_toc_custom_toc_icon {color: #020202;}
div#ez-toc-container ul.ez-toc-list a {color: #160b77;}
div#ez-toc-container ul.ez-toc-list a:hover {color: #030514;}
div#ez-toc-container ul.ez-toc-list a:visited {color: #160b77;}
.ez-toc-container-direction {direction: ltr;}
.ez-toc-counter ul{counter-reset: item ;}
.ez-toc-counter nav ul li a::before {content: counters(item, '.', decimal) '. ';display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }
.ez-toc-widget-direction {direction: ltr;}
.ez-toc-widget-container ul{counter-reset: item ;}
.ez-toc-widget-container nav ul li a::before {content: counters(item, '.', decimal) '. ';display: inline-block;counter-increment: item;flex-grow: 0;flex-shrink: 0;margin-right: .2em; float: left; }

/* Ersatz für das Smooth-Scroll-JS des Plugins: Sprungziel-Offset unterm Sticky-Header
   (Option smooth_scroll_offset=130, mobil mobile_smooth_scroll_offset=10). */
span.ez-toc-section { scroll-margin-top: 130px; }
@media (max-width: 767px) {
  span.ez-toc-section { scroll-margin-top: 10px; }
}

/* ---------------------------------------------------------------------------
   Mitscrollendes Inhaltsverzeichnis in der Beitrags-Sidebar (Relaunch-Erweiterung;
   im WP-Original war die Sidebar der Beiträge leer). Farben wie das Custom-Theme
   der Inline-Box. Oberhalb von 1080px ersetzt es die Inline-Box, darunter blendet
   theme.css die Sidebar aus → Widget aus, Inline-Box bleibt. */
/* Sticky muss auf dem Wrap liegen: #secondary streckt sich im Kadence-Grid über
   die volle Inhalts-Höhe, .sidebar-inner-wrap wäre sonst nur so hoch wie die Box. */
body.has-toc-sidebar #secondary .sidebar-inner-wrap {
  position: sticky;
  top: 130px;
}
.ez-toc-widget-box {
  background: #ffffff;
  border: 1px solid #c6c6c6;
  padding: 16px;
}
.ez-toc-widget-box .ez-toc-widget-title {
  font-size: 100%;
  font-weight: 700;
  color: #020202;
  margin: 0 0 10px;
}
.ez-toc-widget-box nav {
  position: relative;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}
.ez-toc-widget-box nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ez-toc-widget-box nav ul ul {
  margin-left: 14px;
}
.ez-toc-widget-box nav li {
  margin: 0 0 7px;
  font-size: 95%;
  font-weight: 500;
  line-height: 1.35;
}
.ez-toc-widget-box nav li:last-child { margin-bottom: 0; }
.ez-toc-widget-box nav a.ez-toc-link {
  color: #160b77;
  text-decoration: none;
  display: inline-block;
  padding-left: 8px;
  border-left: 2px solid transparent;
}
.ez-toc-widget-box nav a.ez-toc-link:hover { color: #030514; }
.ez-toc-widget-box nav li.active > a.ez-toc-link {
  color: #030514;
  font-weight: 700;
  border-left-color: #160b77;
}
/* Umschaltpunkt = 1080px, weil theme.css die Sidebar bis dorthin komplett ausblendet
   (@media (max-width:1080px) { aside#secondary { display:none } }). Läge die Grenze
   tiefer, gäbe es ein Fenster, in dem die Inline-Box schon versteckt und das Widget
   noch unsichtbar ist — dann hätte die Seite gar kein Inhaltsverzeichnis. */
@media (max-width: 1080px) {
  .ez-toc-sticky-sidebar { display: none; }
}
@media (min-width: 1081px) {
  body.has-toc-sidebar .entry-content #ez-toc-container { display: none; }
}

/* ===========================================================================
   Relaunch-Redesign des Inhaltsverzeichnisses
   Überschreibt bewusst die Plugin-Defaults (screen.min.css) und die WP-Inline-
   Styles oben: Karten-Optik statt Rahmenkasten, Akzentleiste + Icon in der
   Markenfarbe, Nummern als eigene Spalte (kein float) und Hover-Flächen statt
   Unterstreichung. Farben aus der Kadence-Palette: --global-palette1 #ffb424,
   --global-palette3 #19333f.
   =========================================================================== */
:root {
  --toc-accent: #ffb424;
  --toc-ink: #19333f;
  --toc-num: #2c5669;
  --toc-link-hover: #1a6d93;
  --toc-surface: #ffffff;
  --toc-hover-bg: #f1f6fa;
  --toc-rule: #e3e9f0;
}

/* --- Box ------------------------------------------------------------------ */
div#ez-toc-container {
  display: block;
  width: 100%;
  background: var(--toc-surface);
  border: 1px solid var(--toc-rule);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(25, 51, 63, 0.05),
    0 10px 28px -18px rgba(25, 51, 63, 0.35);
  padding: 20px 22px 18px 26px;
  margin: 1.75em 0 2em;
  position: relative;
  overflow: hidden;
}
/* Akzentleiste links */
div#ez-toc-container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--toc-accent);
}

/* --- Titel ---------------------------------------------------------------- */
div#ez-toc-container .ez-toc-title-container {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--toc-rule);
}
div#ez-toc-container p.ez-toc-title {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  color: var(--toc-ink);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
div#ez-toc-container p.ez-toc-title::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb424' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* --- Liste ---------------------------------------------------------------- */
div#ez-toc-container ul.ez-toc-list { margin: 0; padding: 0; }
div#ez-toc-container ul.ez-toc-list li { margin: 0; overflow: visible; }
div#ez-toc-container ul.ez-toc-list ul {
  margin: 2px 0 2px 0.9em;
  padding-left: 0.75em;
  border-left: 1px solid var(--toc-rule);
}

div#ez-toc-container ul.ez-toc-list a,
div#ez-toc-container ul.ez-toc-list a:visited {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--toc-ink);
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
div#ez-toc-container ul.ez-toc-list a:hover {
  background: var(--toc-hover-bg);
  color: var(--toc-link-hover);
  text-decoration: none;
}
div#ez-toc-container ul.ez-toc-list a:focus-visible {
  outline: 2px solid var(--toc-link-hover);
  outline-offset: 1px;
}
div#ez-toc-container ul.ez-toc-list ul li a { font-size: 0.92rem; font-weight: 400; }

/* Nummerierung: eigene Spalte statt float, gleichbreite Ziffern */
.ez-toc-counter nav ul li a::before,
.ez-toc-widget-container nav ul li a::before {
  float: none;
  margin-right: 0;
  min-width: 1.5em;
  text-align: right;
  color: var(--toc-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
div#ez-toc-container ul.ez-toc-list a:hover::before { color: var(--toc-link-hover); }

/* Aktuelles Kapitel (Scrollspy aus ShortcodeInteractions.tsx) — dieselbe
   Hover-Fläche, aber dauerhaft, damit sie sich vom Hover unterscheidet. */
div#ez-toc-container ul.ez-toc-list li.active > a {
  background: var(--toc-hover-bg);
  color: var(--toc-link-hover);
  font-weight: 700;
}
div#ez-toc-container ul.ez-toc-list li.active > a::before { color: var(--toc-link-hover); }

@media (max-width: 767px) {
  div#ez-toc-container { padding: 16px 14px 14px 18px; border-radius: 10px; }
  div#ez-toc-container ul.ez-toc-list a { padding: 8px; }
}

/* --- Sidebar-Widget in der gleichen Optik ---------------------------------- */
.ez-toc-widget-box {
  background: var(--toc-surface);
  border: 1px solid var(--toc-rule);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(25, 51, 63, 0.05),
    0 10px 28px -18px rgba(25, 51, 63, 0.35);
  padding: 18px 16px;
}
.ez-toc-widget-box .ez-toc-widget-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--toc-rule);
  color: var(--toc-ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ez-toc-widget-box .ez-toc-widget-title::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb424' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
/* Plugin-Defaults abräumen (galt nur für die Klasse "ez-toc-widget-container",
   die unser Markup nie trägt — ohne diese Korrektur blieb die graue Aktiv-Fläche
   des Plugins hinter jedem Link stehen): graue Aktiv-Fläche auf dem <li> und der
   leere ::before-Streifen — die Aktiv-Markierung sitzt jetzt auf dem <a>. Gilt für
   Sidebar-Widget und Inline-Box gleichermaßen. */
.ez-toc-widget-box ul.ez-toc-list li.active,
#ez-toc-container ul.ez-toc-list li.active {
  background-color: transparent;
}
.ez-toc-widget-box ul.ez-toc-list li::before,
#ez-toc-container ul.ez-toc-list li::before {
  content: none;
}

.ez-toc-widget-box nav li { margin: 0 0 2px; }
.ez-toc-widget-box nav ul ul {
  margin: 2px 0 2px 0.75em;
  padding-left: 0.6em;
  border-left: 1px solid var(--toc-rule);
}
.ez-toc-widget-box nav a.ez-toc-link {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  padding: 6px 8px;
  border-radius: 8px;
  border-left: 2px solid transparent;
  color: var(--toc-ink);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ez-toc-widget-box nav a.ez-toc-link:hover {
  background: var(--toc-hover-bg);
  color: var(--toc-link-hover);
}
.ez-toc-widget-box nav li.active > a.ez-toc-link {
  background: var(--toc-hover-bg);
  border-left-color: var(--toc-accent);
  color: var(--toc-ink);
  font-weight: 700;
}
.ez-toc-widget-box nav li.active > a.ez-toc-link::before { color: var(--toc-ink); }

/* ===========================================================================
   Halb eingeklapptes Verzeichnis (Sidebar-Widget der Beiträge)
   Lange Beiträge brachten aus WordPress 12–18 Kapitel mit; ab 10 Einträgen
   zeigen wir nur noch die ersten 8 und blenden den Rest hinter den Umschalter.
   Die Inline-Box im Text startet stattdessen ganz zugeklappt, dazu der
   Abschnitt am Dateiende.
   Welche Einträge das sind, entscheidet markCollapsedTocItems() in src/lib/toc.ts
   und hängt ihnen .ez-toc-collapsed-item an — so klappen auch verschachtelte
   Verzeichnisse ein (eine :nth-child-Regel auf die oberste Ebene griff dort nicht,
   weil alle Kapitel als Unterliste unter einem einzigen Punkt hängen).
   Checkbox statt React-State, damit schon die vom Server gelieferte Seite
   eingeklappt ist — sonst blitzt die volle Liste beim Laden auf.
   =========================================================================== */
.ez-toc-more-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ez-toc-collapsible .ez-toc-more-toggle ~ nav li.ez-toc-collapsed-item {
  display: none;
}
.ez-toc-collapsible .ez-toc-more-toggle:checked ~ nav li.ez-toc-collapsed-item {
  display: list-item;
}
/* Das gerade gelesene Kapitel bleibt auch eingeklappt sichtbar — sonst stünde
   das mitscrollende Widget in langen Beiträgen dauerhaft ohne Markierung da.
   Es ist immer höchstens ein Eintrag aktiv, die Liste bleibt also ruhig. */
.ez-toc-collapsible .ez-toc-more-toggle ~ nav li.ez-toc-collapsed-item.active {
  display: list-item;
}

.ez-toc-more-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--toc-link-hover);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}
.ez-toc-more-label:hover {
  background: var(--toc-hover-bg);
}
.ez-toc-more-label::after {
  content: "";
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6d93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.15s ease;
}
.ez-toc-more-toggle:checked ~ .ez-toc-more-label::after {
  transform: rotate(180deg);
}
.ez-toc-more-toggle:focus-visible ~ .ez-toc-more-label {
  outline: 2px solid var(--toc-link-hover);
  outline-offset: 1px;
}
/* Zwei Beschriftungen im Markup, CSS zeigt die zum Zustand passende. */
.ez-toc-more-close {
  display: none;
}
.ez-toc-more-toggle:checked ~ .ez-toc-more-label .ez-toc-more-open {
  display: none;
}
.ez-toc-more-toggle:checked ~ .ez-toc-more-label .ez-toc-more-close {
  display: inline;
}

/* In der Inline-Box sitzt der Umschalter unter der Liste am linken Textrand. */
div#ez-toc-container .ez-toc-more-label {
  margin-left: -2px;
}

/* screen.min.css des Plugins blendet "input[type=checkbox]:checked + nav" aus —
   das ist sein eigener Einklapp-Schalter. Unsere Checkbox steht deshalb als
   erstes Kind; diese Regel hält die Liste zusätzlich offen, falls das Markup
   einmal anders zusammengesetzt wird. */
div#ez-toc-container input.ez-toc-more-toggle:checked + nav {
  display: block;
  max-height: none;
  opacity: 1;
}

/* ===========================================================================
   Zugeklappt startende Inline-Box (withCollapsibleToc in src/lib/toc.ts)
   Die Box steht vor dem ersten Kapitel. Mit zwanzig Überschriften stellte sie
   den Einstieg in den Text zu, auch in der Acht-Einträge-Fassung. Sie startet
   deshalb geschlossen: sichtbar bleibt der Titel, ein Klick darauf zeigt alle
   Kapitel. Checkbox statt React-State, damit schon die vom Server gelieferte
   Seite geschlossen ist. Das mitscrollende Sidebar-Widget bleibt offen, es
   dient als Standanzeige im Beitrag.
   =========================================================================== */
.ez-toc-open-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
div#ez-toc-container.ez-toc-startclosed .ez-toc-open-toggle ~ nav {
  display: none;
}
div#ez-toc-container.ez-toc-startclosed .ez-toc-open-toggle:checked ~ nav {
  display: block;
}
/* Zugeklappt bleibt nur der Titel stehen — Trennlinie und Abstand darunter
   hätten dann nichts mehr, wovon sie trennen. */
div#ez-toc-container.ez-toc-startclosed .ez-toc-open-toggle:not(:checked) ~ .ez-toc-title-container {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Der Titel ist die Schaltfläche. Der Selektor nennt die ID mit, weil
   screen.min.css jedes Label im Container auf display:initial setzt. */
div#ez-toc-container label.ez-toc-title-toggle {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  cursor: pointer;
  user-select: none;
}
div#ez-toc-container label.ez-toc-title-toggle p.ez-toc-title {
  flex: 1 1 auto;
  min-width: 0;
}
/* Zahl der Kapitel: verrät zugeklappt, wie viel hinter dem Titel steckt. */
.ez-toc-title-count {
  flex: none;
  min-width: 1.7em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--toc-hover-bg);
  color: var(--toc-num);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
div#ez-toc-container label.ez-toc-title-toggle::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6d93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.15s ease;
}
.ez-toc-open-toggle:checked ~ .ez-toc-title-container label.ez-toc-title-toggle::after {
  transform: rotate(180deg);
}
.ez-toc-open-toggle:focus-visible ~ .ez-toc-title-container label.ez-toc-title-toggle {
  outline: 2px solid var(--toc-link-hover);
  outline-offset: 3px;
}
div#ez-toc-container label.ez-toc-title-toggle:hover p.ez-toc-title {
  color: var(--toc-link-hover);
}