/*
 * Schichtendiagramm in 3D — das Aussehen zu scripts/schichten.js. Bühne,
 * Quader und Pausenknopf stehen in diagramm.css.
 */

.syn-schichten {
  --glas: var(--syn-primary);
}

.syn-schichten__ebene,
.syn-schichten__leitung {
  transform-style: preserve-3d;
}

/* Ebenen: Glasplatten mit Punktraster. Ebenen außerhalb von ZEDAL
   (data-ton="aussen") sind grau statt Signature. */

.syn-schichten__ebene[data-ton="aussen"] {
  --glas: var(--syn-text-muted);
}

.syn-schichten__platte > .syn-diagramm__oben {
  border-radius: 3px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--glas) 40%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(135deg, color-mix(in srgb, var(--glas) 22%, transparent), color-mix(in srgb, var(--glas) 6%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--glas) 60%, transparent),
    0 0 36px color-mix(in srgb, var(--glas) 16%, transparent);
}

.syn-schichten__platte > :not(.syn-diagramm__oben) {
  background: color-mix(in srgb, var(--glas) 45%, transparent);
}

.syn-schichten__umriss {
  border: 1px dashed color-mix(in srgb, var(--glas) 45%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--glas) 3%, transparent);
}

/* Knoten: Blöcke mit heller Oberseite und dunklen Flanken; der Kern
   (data-ton="kern") ist ganz in Signature. */

.syn-schichten__block > .syn-diagramm__oben {
  border-radius: 2px;
  background: linear-gradient(135deg, var(--syn-surface), color-mix(in srgb, var(--syn-surface) 82%, var(--glas)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glas) 75%, transparent);
}

.syn-schichten__block > .syn-diagramm__vorn,
.syn-schichten__block > .syn-diagramm__hinten {
  background: color-mix(in srgb, var(--glas) 55%, var(--syn-secondary));
}

.syn-schichten__block > .syn-diagramm__links,
.syn-schichten__block > .syn-diagramm__rechts {
  background: color-mix(in srgb, var(--glas) 35%, var(--syn-secondary));
}

.syn-schichten__block[data-ton="kern"] > .syn-diagramm__oben {
  background: linear-gradient(135deg, var(--syn-primary), var(--syn-primary-strong));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.syn-schichten__glut {
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--syn-primary) 70%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
}

/* Leitungen: zwei gekreuzte Bänder, damit sie aus jedem Blickwinkel Breite
   haben. */

.syn-schichten__leitung > i {
  top: -1px;
  width: 100%;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--syn-primary) 85%, transparent), color-mix(in srgb, var(--syn-primary) 35%, transparent));
}

.syn-schichten__leitung > i + i {
  transform: rotateX(90deg);
}

.syn-schichten__leitung[data-art="indirekt"] > i {
  background: repeating-linear-gradient(90deg, var(--syn-text-muted) 0 6px, transparent 6px 11px);
}

.syn-schichten.ist-zu .syn-schichten__leitung > i,
.syn-schichten.ist-zu .syn-schichten__leitungstext {
  opacity: 0;
}

.syn-schichten__leitung > i,
.syn-schichten__leitungstext {
  transition: opacity .6s;
}

.syn-schichten[data-texte="unterwegs"] .syn-schichten__leitungstext {
  transition: opacity .3s;
}

/* Flache Oberfläche: Schilder, Titel und Pakete */

.syn-schichten__schild {
  width: max-content;
  max-width: 150px;
  padding: 5px 10px 6px;
  border: 1px solid var(--syn-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--syn-surface) 90%, transparent);
  box-shadow: var(--syn-shadow-card);
  color: var(--syn-text);
  font: 600 13px/1.25 var(--syn-font-display);
  text-align: center;
  cursor: default;
  transition: opacity .25s, border-color .25s;
}

.syn-schichten__schild::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  height: 10px;
  border-left: 1px solid color-mix(in srgb, var(--syn-text-muted) 60%, transparent);
}

.md-typeset .syn-schichten__schild small {
  display: block;
  margin-top: 2px;
  color: var(--syn-text-muted);
  font: 400 11px/1.3 var(--syn-font-doc);
  opacity: 1;
}

.syn-schichten__schild[data-ton="kern"] {
  border-color: var(--syn-primary-strong);
}

.syn-schichten__titel {
  color: var(--syn-primary-ink);
  font: 600 11px/1 var(--syn-font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.syn-schichten__titel[data-ton="aussen"] {
  color: var(--syn-text-muted);
}

.syn-schichten__leitungstext {
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--syn-surface) 85%, transparent);
  color: var(--syn-text-muted);
  font: italic 400 11px/1.4 var(--syn-font-doc);
  white-space: nowrap;
}

.syn-schichten__paket {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--syn-surface);
  box-shadow:
    0 0 0 2px var(--syn-primary),
    0 0 12px 3px color-mix(in srgb, var(--syn-primary) 75%, transparent);
  opacity: 0;
  pointer-events: none;
}

.syn-schichten__paket[data-art="indirekt"] {
  box-shadow:
    0 0 0 2px var(--syn-text-muted),
    0 0 10px 2px color-mix(in srgb, var(--syn-text-muted) 60%, transparent);
}

/* Hervorheben beim Zeigen auf ein Schild */

.syn-schichten.ist-fokus .syn-schichten__schild:not(.ist-an),
.syn-schichten.ist-fokus .syn-schichten__leitungstext:not(.ist-an) {
  opacity: .35;
}

.syn-schichten.ist-fokus .syn-schichten__schild.ist-an {
  border-color: var(--syn-primary);
}

.syn-schichten.ist-fokus .syn-schichten__leitung:not(.ist-an) > i {
  opacity: .12;
}

.syn-schichten.ist-fokus .syn-schichten__block:not(.ist-an) > * {
  opacity: .45;
}

.syn-schichten.ist-fokus .syn-schichten__paket:not(.ist-an) {
  visibility: hidden;
}