/* Bedienbare Schaubilder der Projektseite (Company Brain, Leitstand). Farben aus basis.css, hell und dunkel.
   Ohne JavaScript: Bild und alle Texte untereinander. Mit JavaScript (.sb.js): Knöpfe
   wählen eine Ansicht, nicht beteiligte Teile treten zurück. */
.sb {
  margin-top: 2.5rem;
}

.sb > h3 {
  margin: 0;
}

/* Schaubild ohne eigene Überschrift (Leitstand): Abstand wie die übrigen Schaubilder */
.sb > .sb-flaeche:first-child {
  margin-top: 0;
}

.sb-unter {
  margin: 0.25rem 0 0;
  color: var(--akzent);
  font-weight: 600;
}

.sb-einleitung {
  margin: 0.75rem 0 0;
}

.sb-flaeche {
  margin-top: 1.5rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--rand);
  border-radius: 1.125rem;
  background: light-dark(#f6f9fb, #0f1a2e);
}

.sb-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* ohne Skript bleiben die Knöpfe weg: display: flex würde das Attribut hidden sonst überstimmen */
.sb-wahl[hidden] {
  display: none;
}

.sb-wahl button {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: transparent;
  color: var(--schrift-neben);
  font: inherit;
  font-size: var(--groesse-neben);
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}

.sb-wahl button:hover {
  border-color: var(--akzent);
  color: var(--schrift);
}

.sb-wahl button[aria-pressed="true"] {
  border-color: var(--petrol);
  background: var(--petrol);
  color: #fff;
}

/* Das Bild behält seine Größe, damit die Schrift lesbar bleibt; auf schmalen Fenstern rollt
   nur dieser Rahmen waagerecht, nicht die Seite. */
.sb-bild {
  overflow-x: auto;
}

.sb-bild svg {
  display: block;
  width: 100%;
  min-width: 40rem;
  max-width: none;
  height: auto;
  font-family: inherit;
}

/* Größen in Einheiten des Bildes (680 breit); bei der kleinsten Darstellung (40 rem) bleiben
   Beschriftungen über 12 px und Titel über 13 px */
.sb-bild .spalte,
.sb-bild .unter {
  fill: var(--schrift-neben);
  font-size: 13px;
}

.sb-bild .titel {
  fill: var(--schrift);
  font-size: 14.5px;
  font-weight: 600;
}

.sb-bild .knoten rect {
  fill: light-dark(#ffffff, #17263f);
  stroke: var(--rand);
  transition:
    stroke 200ms ease,
    fill 200ms ease;
}

.sb-bild .knoten,
.sb-bild .kante {
  transition: opacity 250ms ease;
}

.sb-bild .kante {
  fill: none;
  stroke: var(--akzent);
  stroke-width: 1.5;
}

.sb-bild .grenze {
  stroke: light-dark(#b3261e, #ff8a80);
  stroke-dasharray: 5 4;
}

.sb-bild .zaun {
  fill: none;
  stroke: var(--akzent);
  stroke-dasharray: 3 5;
}

.sb-bild .marke circle {
  fill: var(--petrol);
}

.sb-bild .marke text {
  fill: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* Teile, die nur zu einer Ansicht gehören (Rückweg, Nummern, Rahmen): ohne Skript sichtbar,
   mit Skript nur in ihrer Ansicht */
.sb.js .nur {
  opacity: 0;
  transition: opacity 300ms ease;
}

.sb.js .nur.da {
  opacity: 1;
}

/* Nicht beteiligte Teile treten zurück, ihre Schrift bleibt aber voll lesbar: Linien verblassen,
   Kästen verlieren Füllung und feste Kante; beteiligte Kästen bekommen die Akzentkante. */
.sb.js .kante.zurueck,
.sb.js .zaun.zurueck {
  opacity: 0.2;
}

.sb.js .knoten.zurueck rect {
  fill: transparent;
  stroke-dasharray: 3 3;
}

.sb.js .knoten.zurueck .titel {
  fill: var(--schrift-neben);
  font-weight: 400;
}

.sb.gefiltert .knoten:not(.zurueck) rect {
  stroke: var(--akzent);
}

.sb.js .knoten {
  cursor: pointer;
}

.sb.js .knoten:hover rect,
.sb.js .knoten:focus-visible rect,
.sb .knoten.gewaehlt rect {
  fill: light-dark(#e4f1f1, #1b2f4d);
  stroke: var(--akzent);
}

.sb .knoten:focus-visible {
  outline: none;
}

.sb .knoten:focus-visible rect {
  stroke-width: 2.5;
}

@media (prefers-reduced-motion: no-preference) {
  .sb-bild .fluss {
    stroke-dasharray: 6 6;
    animation: sb-fluss 1400ms linear infinite;
  }
}

@keyframes sb-fluss {
  to {
    stroke-dashoffset: -24;
  }
}

.sb-bedienung {
  margin: 0.75rem 0 0;
  color: var(--schrift-neben);
  font-size: var(--groesse-neben);
}

.sb-ansicht,
.sb-baustein {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rand);
  border-radius: 0.75rem;
  background: var(--grund);
}

.sb-ansicht :is(h3, h4),
.sb-baustein :is(h3, h4) {
  margin: 0 0 0.25rem;
  color: var(--akzent);
  font-size: 1.0625rem;
}

.sb-ansicht p,
.sb-baustein p {
  margin: 0;
}

.sb-ansicht ol {
  margin: 0.75rem 0 0;
  padding-left: 1.4rem;
}

.sb-ansicht li {
  margin-bottom: 0.25rem;
}

.sb-ansicht li::marker {
  color: var(--akzent);
  font-weight: 600;
}

.sb-bausteine {
  margin-top: 1rem;
}

.sb-bausteine summary {
  color: var(--akzent);
  font-weight: 600;
  cursor: pointer;
}

.sb-bausteine dt {
  margin-top: 0.875rem;
  font-weight: 600;
}

.sb-bausteine dd {
  margin: 0.125rem 0 0;
}