/* style.css */

body {
  margin: 0;
  font-family: Georgia, serif;
  background: #1b1b1b;
  color: #f0e6d2;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header .topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2a2a2a;
  padding: 10px 20px;
}

header .topbar .logo {
  font-size: 1.5rem;
  font-weight: bold;
}

header .topbar nav a {
  color: #f0e6d2;
  text-decoration: none;
  margin: 0 10px;
}

#container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

#sidebar {
  resize: horizontal;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 200px;
  max-width: 600px;
  background: #2a2a2a;
  padding: 10px;
  direction: rtl; /* Scrollbar links */
}
#sidebar > * {
  direction: ltr;
}

#sidebar input#search,
#sidebar select {
  width: 100%;
  margin-bottom: 8px;
  padding: 4px 8px;
  background: #444;
  border: none;
  color: #f0e6d2;
  font-size: 0.9rem;
}

#sidebar input#search::placeholder {
  color: #888;
}

.search-container {
  position: relative;
  width: 100%;
}
.search-container .clear-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
  font-size: 1rem;
}
.search-container .clear-button:hover {
  color: #f0e6d2;
}

.search-all-container {
  margin-bottom: 8px;
}

#tree details {
  margin: 2px 0;
}

#sidebar details > summary {
  padding: 4px 8px;
  color: #f0e6d2; /* Superkategorien */
}
#sidebar details details > summary {
  padding: 4px 8px 4px 24px; /* Kategorien eingerückt */
  color: #d1c5aa;
}
#sidebar .post-title {
  display: block;
  margin: 2px 0 2px 40px; /* Beiträge eingerückt */
  padding: 2px 8px;
  color: #b2ab80;
}
#sidebar .post-title:hover {
  background: #3b3b3b;
  border-radius: 4px;
}
#sidebar .post-title.active {
  background: #444;
  border-left: 4px solid #d1c5aa;
  color: #f0e6d2;
}

#content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #1b1b1b;
}

#content h1 {
  margin-top: 0;
}

#content-description {
  font-style: italic;
  margin-bottom: 16px;
}

#content-body a.intra-link,
#content-description a.intra-link {
  color: #d1c5aa;
  text-decoration: underline;
  cursor: pointer;
}
#content-body a.intra-link:hover,
#content-description a.intra-link:hover {
  color: #f0e6d2;
}

footer {
  background: #2a2a2a;
  padding: 10px;
  position: relative;
}

footer a {
  color: #f0e6d2;
  text-decoration: none;
  margin: 0 5px;
}

#trimControl {
  position: absolute;
  right: 20px;
  bottom: 10px;
}

/* Scrollbar für Sidebar und Tree */
#sidebar,
#tree {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 #2a2a2a; /* Thumb #333, Track #2a2a2a */
}

#sidebar::-webkit-scrollbar,
#tree::-webkit-scrollbar {
  width: 10px;
}

#sidebar::-webkit-scrollbar-track,
#tree::-webkit-scrollbar-track {
  background: #2a2a2a; /* Track = Hintergrund */
}

#sidebar::-webkit-scrollbar-thumb,
#tree::-webkit-scrollbar-thumb {
  background-color: #333; /* Thumb dunkel */
  border-radius: 5px;
}

#sidebar::-webkit-scrollbar-thumb:hover,
#tree::-webkit-scrollbar-thumb:hover {
  background-color: #444;
}