/* ---------- CSS Variablen & Root ---------- */
:root {
  --sidebar-width: 225px;
  --infobox-width: 270px;
  --gap: 1rem;
}

/* ---------- Layout Grid ---------- */
.wiki-body {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--infobox-width);
  gap: var(--gap);
  max-width: var(--layout);
  margin-inline: auto;
  background: var(--bg-main);
  padding-top: var(--spacing-md);
  align-items: flex-start;
}

/* ---------- Wiki Sidebar ---------- */
.wiki-left-sidebar {
  position: sticky;
  top: 92px;
  align-self: start;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 92px);
}
.sidebar-section {
  margin-bottom: 2rem;
}
.sidebar-toggle-button {
  display: none;
}
.sidebar-close-btn {
  display: none;
}

.heading-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--text-accent);
  font-weight: bold;
  color: var(--text-main);
  cursor: pointer;
}

.heading-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.heading-text {
  font-size: clamp(0.95rem, 1vw, 1rem);
}

/* ---------- Toggle-Icon-Zustände (unverändert) ---------- */
.toggle-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
}

.toggle-branch .toggle-icon {
  display: inline-block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--text-accent);
}

.heading-button[data-expanded="true"] .open-icon,
.heading-button[data-expanded="false"] .closed-icon {
  display: inline;
}

.heading-button[data-expanded="true"] .closed-icon,
.heading-button[data-expanded="false"] .open-icon {
  display: none;
}

.sidebar-list {
  list-style: none;
  padding-left: 1.5rem;
  margin: 0;
}

.sidebar-list li {
  margin-left: 5px;
  margin-top: 0.3rem;
}

/* ---------- Artikelbaum (Branches) ---------- */
.tree-branch > .branch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.branch-title {
  flex: 1;
  text-decoration: none;
  cursor: default;
}

.branch-title a,
.branch-title[href] {
  color: var(--text-accent);
  cursor: pointer;
  text-decoration: none;
}

.branch-title:hover {
  text-decoration: none;
}

.toggle-branch {
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

.branch-children {
  list-style: none;
  padding-left: 0;
  margin-left: 10px;
}

/* ---------- Table of Contents ---------- */
.contents-section .sidebar-list a {
  color: var(--text-accent);
  text-decoration: none;
}

.contents-section .sidebar-list a:hover {
  text-decoration: underline;
}

.hidden {
  display: none;
}

/* ---------- Main Content ---------- */
.wiki-main-content {
  margin: 0 auto;
  max-width: var(--layout-text);
  background: transparent;
  padding: 0;
}

.wiki-article h1[id],
.wiki-article h2[id],
.wiki-article h3[id],
.wiki-article h4[id],
.wiki-article h5[id],
.wiki-article h6[id] {
  scroll-margin-top: 80px;
}

.wiki-article h1 {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: var(--text-accent);
}

.wiki-article h2 {
  font-weight: bold;
  margin-block: clamp(0.5rem, 2vw, 2rem) 0.5rem;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--text-main);
  padding-bottom: 0.25rem;
}

.wiki-article h3 {
  margin-block: clamp(0.3rem, 1.5vw, 1.5rem) 0.3rem;
  color: var(--text-secondary);
}

.wiki-article p {
  color: var(--text-main);
  margin-bottom: 1rem;
  letter-spacing: 0.025em;
  text-align: left;
}

/* ---------- See Also & Kategorien ---------- */
.wiki-see-also {
  margin-top: 2rem;
  padding-top: 0.5rem;
}

.see-also-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.see-also-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-secondary);
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  transition: background 0.2s, border-color 0.2s;
}

.see-also-item svg {
  color: var(--text-main);
}

.see-also-item a {
  color: var(--text-main);
  text-decoration: none;
}

.see-also-item a:hover {
  text-decoration: underline;
}

.wiki-categories {
  margin-top: 1.5rem;
  padding: 0.6rem;
  width: 100%;
  background: var(--bg-secondary);
  border-radius: 4px;
  color: var(--text-accent);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.wiki-categories svg {
  display: block;
  color: var(--text-secondary);
}

.wiki-categories strong {
  color: var(--text-secondary);
  white-space: nowrap;
  margin-right: 0.3rem;
}

.wiki-categories p {
  margin: 0;
  display: inline;
  color: var(--text-secondary);
  word-break: break-word;
}

.wiki-last-edited {
  margin-top: 1.5rem;
  color: var(--text-dim);
  margin-bottom: 5rem;
}

/* ---------- Right Sidebar ---------- */
.wiki-right-sidebar {
  position: static;
  height: fit-content;
  background: var(--bg-main);
  border: 1px solid var(--text-accent);
  border-radius: 8px;
  padding: 0.8rem;
}

.infobox-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.infobox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.infobox-grid img {
  width: 100%;
  border-radius: 4px;
}

.infobox-section {
  margin-bottom: 1rem;
}

.infobox-section strong {
  display: inline-block;
  margin-right: 0.5rem;
}

.extra-content {
  border-top: 1px solid var(--text-main);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

/* ---------- Sidebar Responsive – Popup auf Smartphones ---------- */
@media (max-width: 767px) {
  .wiki-left-sidebar {
    display: none;
  }

  /* Kleinere Schriftgrößen in der Sidebar */
  .heading-text,
  .branch-title,
  .sidebar-list li,
  .wiki-article p {
    font-size: 0.95rem;
  }

  .see-also-list {
    grid-template-columns: 1fr;
  }

  .infobox-grid {
    grid-template-columns: 1fr;
  }

  /* Reduziertes Padding für Titelcontainer und Body */
  .wiki-title-container,
  .wiki-body {
    padding-inline: var(--spacing-sm);
  }

  /* Überschreibe das Gitter, damit Haupt- und Infobox nicht mehr 3-spaltig sind */
  .wiki-body {
    grid-template-columns: 1fr; 
    grid-template-areas:
      "main"
      "infobox"
      /* Die left-sidebar ist ja als Popup implementiert, also keinen festen Platz */
    ;
  }

  .wiki-title {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
}

/* ---------- Tablet Querformat & kleinere Desktops ---------- */
@media (max-width: 1199px) {
  .wiki-body {
    grid-template-columns: var(--sidebar-width) 2fr;
    grid-template-areas:
      "sidebar main"
      "sidebar infobox";
  }

  .wiki-right-sidebar {
    grid-column: span 2;
  }
}

/* ---------- Tablet Hochformat ---------- */
@media (max-width: 991px) {
  .wiki-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "infobox"
      "sidebar";
  }

  .wiki-left-sidebar,
  .wiki-right-sidebar {
    max-width: 100%;
  }
  
  .wiki-left-sidebar {
    display: none;
  }
}