/* ═══════════════════════════════════════════════════════════════════
   Schrittmenue des AusdauerLabs (Stand 07.10.2026)
   Gehoert zu assets/js/schrittmenue.js. Eigenstaendig wie modulkopf.css:
   eigene Variablen mit Rueckfallwerten, damit es in jedem Modul gleich
   aussieht. Stil Wettkampfbogen — Linien und Flaechen, keine Radien,
   keine Schatten.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Der Knopf im Kopf ----------
   modulkopf.js gibt uebernommenen Knoepfen die Klasse .mk-uebernommen.
   Dieser hier ist das Hauptwerkzeug zum Navigieren und steht deshalb
   gefuellt da, nicht nur umrandet. */
.mk-links [data-schrittmenue],
.sm-notknopf {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 14px;
  background: var(--mk-tinte, #16181a); color: #fff;
  border: 2px solid var(--mk-tinte, #16181a); border-radius: 0;
  font-family: var(--mk-kondens, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mk-links [data-schrittmenue]:hover,
.mk-links [data-schrittmenue]:focus-visible,
.mk-links [data-schrittmenue][aria-expanded="true"] {
  background: var(--mk-modul, #b23a1f); border-color: var(--mk-modul, #b23a1f); color: #fff;
}
.sm-burger { display: block; flex: 0 0 auto; }
.sm-text { font-variant-numeric: tabular-nums; }

/* Fallweg ohne gemeinsamen Kopf: Knopf oben rechts */
.sm-notknopf { position: fixed; top: 10px; right: 10px; z-index: 600; }

/* Auf dem Handy ist im Kopf nur Platz fuer EINEN Knopf. Module mit
   Schrittmenue legen ihre uebrigen Kopfknoepfe deshalb zusaetzlich ins
   Menue (zusatz) — hier verschwinden sie aus dem Kopf. */
@media (max-width: 560px) {
  html.hat-schrittmenue .mk-links .mk-uebernommen:not([data-schrittmenue]) { display: none; }
  .mk-links [data-schrittmenue] { padding: 0 11px; gap: 7px; }
}
@media (max-width: 380px) {
  /* Sehr schmal: der Seitentitel weicht, der Knopf bleibt lesbar. */
  html.hat-schrittmenue .mk-titel { display: none; }
}

/* ---------- Das aufklappende Blatt ---------- */
.sm-tafel {
  position: fixed; z-index: 650;
  top: calc(var(--mk-hoehe, 0px) + 8px);
  right: max(16px, calc((100vw - 1290px) / 2 + 16px));
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - var(--mk-hoehe, 0px) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: var(--mk-tinte, #16181a);
  border: 3px solid var(--mk-tinte, #16181a);
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
}
.sm-tafel[hidden] { display: none; }
@supports (height: 100dvh) {
  .sm-tafel { max-height: calc(100dvh - var(--mk-hoehe, 0px) - 24px); }
}

.sm-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 16px; border-bottom: 3px solid var(--mk-tinte, #16181a);
  background: var(--mk-tinte, #16181a); color: #fff;
  position: sticky; top: 0;
}
.sm-kopf-titel {
  flex: 1; margin: 0;
  font-family: var(--mk-kondens, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700; font-size: 17px; letter-spacing: .1em; text-transform: uppercase;
}
.sm-zu {
  min-width: 44px; min-height: 44px; padding: 0;
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55);
  font-size: 18px; cursor: pointer;
}
.sm-zu:hover { background: #fff; color: var(--mk-tinte, #16181a); }

.sm-liste { list-style: none; margin: 0; padding: 0; }
.sm-liste li { margin: 0; border-bottom: 1px solid var(--mk-linie, #d8d3c8); }
.sm-liste li:last-child { border-bottom: 0; }

.sm-eintrag {
  width: 100%; min-height: 58px; margin: 0; padding: 0 14px 0 0;
  display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 14px;
  background: #fff; color: inherit; border: 0; text-align: left; cursor: pointer;
  font: inherit; -webkit-tap-highlight-color: transparent;
}
.sm-eintrag:hover, .sm-eintrag:focus-visible { background: #f4f2ee; }
.sm-eintrag:focus-visible { outline: 3px solid var(--mk-modul, #b23a1f); outline-offset: -3px; }
.sm-nr {
  align-self: stretch; display: flex; align-items: center; justify-content: center;
  font-family: var(--mk-mono, 'Plex Mono', Consolas, monospace); font-weight: 600; font-size: 21px;
  color: var(--mk-modul, #b23a1f); border-right: 3px solid var(--mk-modul, #b23a1f);
}
.sm-mitte { display: flex; flex-direction: column; padding: 8px 0; min-width: 0; }
.sm-titel {
  font-family: var(--mk-kondens, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700; font-size: 19px; letter-spacing: .03em; line-height: 1.15;
}
.sm-art {
  font-family: var(--mk-kondens, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #6f6b64;
}
.sm-vermerk {
  font-family: var(--mk-mono, 'Plex Mono', Consolas, monospace); font-size: 13px;
  white-space: nowrap; color: #3d4145;
}

/* Wo man gerade steht: gefuellt in der Modulfarbe (die lesbare Variante
   aus modulkopf.js, deshalb ist weisse Schrift darauf immer lesbar). */
.sm-eintrag[aria-current] { background: var(--mk-modul, #b23a1f); color: #fff; }
.sm-eintrag[aria-current] .sm-nr { color: #fff; border-right-color: rgba(255,255,255,.55); }
.sm-eintrag[aria-current] .sm-art,
.sm-eintrag[aria-current] .sm-vermerk { color: rgba(255,255,255,.88); }

.sm-eintrag:disabled { cursor: not-allowed; color: #8a857d; background: #fff; }
.sm-eintrag:disabled .sm-nr { color: #b5afa5; border-right-color: #d8d3c8; }

.sm-zusatz {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px 14px 14px; border-top: 3px solid var(--mk-tinte, #16181a); background: #faf9f6;
}
.sm-zusatz-knopf {
  flex: 1 1 160px; min-height: 52px; padding: 0 14px;
  background: #fff; color: var(--mk-tinte, #16181a); border: 2px solid var(--mk-tinte, #16181a);
  font-family: var(--mk-kondens, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.sm-zusatz-knopf:hover, .sm-zusatz-knopf:focus-visible { background: var(--mk-tinte, #16181a); color: #fff; }

@media (max-width: 560px) {
  .sm-tafel { right: 8px; width: calc(100vw - 16px); }
  .sm-eintrag { grid-template-columns: 48px 1fr auto; gap: 11px; min-height: 54px; }
  .sm-titel { font-size: 18px; }
}