/*
 * Huelle des kombinierten [waldemaster_compendium]: Kopfzeile mit
 * Sprach-Umschalter und die Reiterleiste, ueber die zwischen den vier
 * Bereichen (Zauber, Monster, Magische Gegenstaende, Ausruestung)
 * umgeschaltet wird. Die Bereichs-Inhalte selbst bringen ihr eigenes CSS mit.
 */
.wsc-app{ max-width: var(--wsc-content-width, 1100px); margin: 0 auto; }

.wsc-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom: 14px;
}
/* Einzel-Seiten-Ansicht: nur der Umschalter, rechtsbuendig, kein Titel. */
.wsc-head--minimal{ justify-content:flex-end; margin-bottom: 10px; }
.wsc-title{ font-size: 26px; font-weight: 700; line-height:1.15; }
.wsc-sub{ color: var(--wm-muted); font-size: 14px; margin-top: 2px; }

.wsc-tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  border-bottom: 1px solid var(--wm-divider);
  margin-bottom: 18px; padding-bottom: 10px;
}
.wsc-tab{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--wm-divider);
  background:#fff !important; color:var(--wm-muted) !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wsc-tab:hover{ border-color:var(--wm-teal); color:var(--wm-teal) !important; }
.wsc-tab.active{
  background:var(--wm-teal) !important; color:var(--wm-on-teal) !important;
  border-color:var(--wm-teal);
}
.wsc-tab-ico{ font-size: 16px; line-height:1; }

.wsc-panel{ display:none; }
.wsc-panel.active{ display:block; }

.wsc-placeholder{
  border:1px dashed var(--wm-divider); border-radius: var(--wm-radius);
  padding: 32px; text-align:center; color: var(--wm-muted2);
  background: var(--wm-panel);
}