@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Vollbild-Layout ──────────────────────────────── */
/* höhere Spezifität nötig, um Bootstraps .overflow-visible-Klasse auf dem body-Element zu schlagen */
body.overflow-visible {
  height: 100vh !important;
  overflow: hidden !important;
}

.gv-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.gv-row {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ── SVG-Hauptbereich ─────────────────────────────── */
/* flex-basis 0 statt fixer w-75-Breite, damit der Bereich den von der
   kollabierten Sidebar freigegebenen Platz automatisch übernimmt */
.gv-main {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  transition: flex-basis 0.25s ease;
}

.svg-wrap {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
}

.svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Passagen-Detail in Sidebar ──────────────────── */
.nav-passage.open {
  border-left-color: rgb(162, 26, 23);
  color: rgb(102, 102, 102) !important;
}

.pass-detail {
  margin-top: 0.35rem;
}

.pass-conn summary {
  list-style: none;
}

.pass-conn summary::-webkit-details-marker {
  display: none;
}

.pass-conn-incipit {
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  color: rgb(102, 102, 102);
  margin-top: 0.35rem;
}

.pass-conn-incipit:hover {
  text-decoration: underline;
}

.pd-conn-meta {
  color: rgb(153, 153, 153);
  font-size: 0.75rem;
  margin-top: 0.15rem;
}

/* ── Sidebar ──────────────────────────────────────── */
/* flex-basis/width statt der Bootstrap-Klasse .w-25 (die im kompilierten
   Bundle zusätzlich min-width:25%!important setzt und ein Kollabieren
   verhindern würde). Der Ein/Ausklapp-Button liegt außerhalb dieser Box
   (siehe .sidebar-toggle-floating) und zählt daher nicht zu dieser Breite –
   das svg bekommt entsprechend mehr Platz. */
aside#sidebar-container {
  flex: 0 0 25%;
  width: 25%;
  min-width: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: flex-basis 0.25s ease, width 0.25s ease;
}

aside#sidebar-container.collapsed {
  flex-basis: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
}

/* Kollabiert bleibt ausschließlich der außerhalb liegende Toggle-Button
   sichtbar; der komplette restliche Sidebar-Inhalt wird ausgeblendet */
aside#sidebar-container.collapsed .sidebar-header-extra,
aside#sidebar-container.collapsed .sidebar-content-row {
  display: none !important;
}

.sidebar-toggle {
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle img,
.sidebar-toggle svg {
  display: block;
}

/* schwebender Ein/Ausklapp-Button: Größe 1:1 von #infocontent-hide-btn
   übernommen, liegt per position:absolute außerhalb der Aside-Box (wie
   zuvor der schmale äußere Tab) und bleibt daher auch bei Breite 0
   sichtbar und klickbar (aside darf deshalb kein overflow:hidden haben) */
.sidebar-toggle-floating {
  position: absolute;
  top: 0;
  left: -40px;
  width: 40px;
  height: 55px;
  max-height: 55px;
  background: #fff;
  border: 1px solid rgb(216, 216, 216);
  z-index: 10;
}

.sidebar-toggle-floating:hover {
  background: #f8f9fa;
}

/* Header-Zeile am oberen Rand der Sidebar, analog zu #infocontent-header
   der 3rd column: „Abschnitte ein/aus“ an den Text angepasst, drittes Feld
   ohne Funktion füllt den Rest der Breite */
.sidebar-header {
  flex: 0 0 auto;
}

.sidebar-content-cell {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow-y: auto;
}

/* Toggle-Button „Abschnittseinteilung“ – sitzt als kompakter Button in der
   Header-Zeile (analog zu z.B. #facscolumnBtn der 3rd column), rot wenn
   aktiv, weiß wenn inaktiv */
.chapters-toggle {
  display: block;
  width: auto;
  height: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: none;
  background: #fff;
  color: rgb(102, 102, 102);
  font-size: 0.72rem;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
}

.chapters-toggle:hover {
  background: #f8fafc;
}

.chapters-toggle.bg-primary:hover {
  background: rgb(162, 26, 23) !important;
}

/* Level 1: Achsen */
.nav-l1 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-axis-label {
  margin: 0.65rem 0.75rem 0.5rem;
  cursor: pointer;
  user-select: none;
}

/* Level 2: Dokumente */
.nav-l2 {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0.25rem;
}

.nav-axis.open > .nav-l2 {
  display: block;
}

.nav-doc {
  cursor: pointer;
  user-select: none;
}

.nav-doc-label {
  margin: 0.25rem 0.75rem 0.25rem 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-doc:hover > .nav-doc-label {
  background: #f1f5f9;
}

/* Level 3: Passagen */
.nav-l3 {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0.2rem 1.5rem;
}

.nav-doc.open > .nav-l3 {
  display: block;
}

.nav-passage {
  padding: 0.2rem 0.5rem 0 0.5rem;
  border-left: 2px solid #e2e8f0;
  margin-bottom: 0.15rem;
  cursor: pointer;
}

.nav-passage:hover {
  background: #f8fafc;
}

.nav-passage .pass-incipit {
  display: block;
  white-space: normal;
}

.nav-passage .pass-meta {
  color: rgb(153, 153, 153);
}

/* ── Tooltip ─────────────────────────────────────── */
#svg-tooltip {
  position: fixed;
  display: none;
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.72rem;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  pointer-events: none;
  max-width: 240px;
  white-space: normal;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/*# sourceMappingURL=witrels-vis.css.map */