/* Vier gleich breite Schritte: Mode, Bsp, Klangkategorie, Ton. Jeweils Linien-Icon über Bezeichnung und Wert. */
.scenario-nav { flex: 0 0 auto; display: flex; align-items: stretch; padding: calc(var(--raster) * 2) calc(var(--raster) * 2) 28px; border-top: 1px solid #a0adc21f; background: #08172e; }
.nav-item { flex: 1 1 0; min-width: 0; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: #a0adc2; opacity: .72; cursor: pointer; transition: color .2s, opacity .2s; }
/* Gleiche Symbolgröße und Strichstärke wie Stoppuhr/Wiederholen (Leiste und Sheet-Einträge). */
.nav-item svg, .sheet-entry svg { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Eine Zeile, kein Umbruch; längere Werte enden mit Ellipsis innerhalb des Drittels. Schrift der App, 11px, leichter Buchstabenabstand. */
.nav-label { max-width: 100%; font-size: 11px; font-weight: 600; letter-spacing: .01em; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-prefix { font-weight: 400; opacity: .75; }
.nav-value { color: #d6dfec; }
.nav-item:hover, .nav-item[aria-expanded="true"] { color: #d6dfec; opacity: 1; }
.nav-item:focus-visible { color: #d6dfec; opacity: 1; outline-color: #89e9e299; outline-offset: 2px; }
@media (max-width: 520px), (hover: none) and (pointer: coarse), (display-mode: standalone) { .scenario-nav { padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + var(--raster) * 2)); } }

/* Auswahl als Bottom-Sheet innerhalb des Bildschirms (Mode, Bsp, Ton und das Countdown-Sheet der Stoppuhr): abgedunkelter
   Hintergrund, Sheet im gleichen Hintergrundton wie die App, feine Linie, abgerundete obere Ecken. Schließt per Tipp auf
   den Hintergrund, auf einen Eintrag oder mit Escape. */
.sheet-layer { position: absolute; inset: 0; visibility: hidden; transition: visibility 0s .24s; }
.sheet-layer[data-offen="true"] { visibility: visible; transition-delay: 0s; }
.sheet-backdrop { position: absolute; inset: 0; background: #030a16a6; opacity: 0; transition: opacity .24s ease; }
.sheet-layer[data-offen="true"] .sheet-backdrop { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - var(--raster) * 6); overflow-y: auto; scrollbar-width: none; padding: calc(var(--raster) * 2) 0 28px; border: 1px solid #a0adc21f; border-bottom: 0; border-radius: 28px 28px 0 0; background: #08172e; transform: translateY(100%); transition: transform .24s ease; }
.sheet-layer[data-offen="true"] .sheet { transform: none; }
.sheet-list { margin: 0; padding: 0; list-style: none; }
/* Einträge: Linien-Icon + Name, Seitenrand wie Wortmarke; aktuelle Wahl in der Akzentfarbe (wie aktive Stoppuhr/Wiederholen). */
.sheet-entry { width: 100%; height: 52px; display: flex; align-items: center; gap: calc(var(--raster) * 2); padding: 0 var(--rand); border: 0; background: transparent; color: #a0adc2; font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-align: left; cursor: pointer; transition: color .2s; }
.sheet-entry:hover { color: #d6dfec; }
.sheet-entry[aria-current="true"] { color: #94eee1; }
.sheet-entry:focus-visible { outline-offset: -4px; }
/* Bsp-/Ton-Sheet: rechts in derselben Zeile der Kurzname der Kategorie bzw. der typische Klang, gedämpft wie das Wort
   in der Leiste, kleiner; bleibt gedämpft, auch wenn der Eintrag gewählt ist. Das Label links darf bei Platzmangel mit Ellipsis enden, der Hinweis nie. */
.sheet-entry .sheet-note { flex: 0 0 auto; margin-left: auto; color: #a0adc2; opacity: .75; font-size: 13px; font-weight: 400; letter-spacing: .01em; white-space: nowrap; }
.sheet-entry > span:first-of-type { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px), (hover: none) and (pointer: coarse), (display-mode: standalone) { .sheet { padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + var(--raster) * 2)); } }

/* Countdown-Sheet (Stoppuhr, nur im Mode Countdown): eine Chip-Zeile „Dauer (Minuten)“. Zeilenname gedämpft
   wie das Wort in der Leiste; Chips als Linien-Pillen im Stil des Stoppuhr-Rings (1,5px, gedämpft), gewählt = Akzentfarbe. */
.countdown-sheet { padding: calc(var(--raster) * 2) var(--rand) 28px; }
.chip-row { display: flex; flex-direction: column; gap: var(--raster); padding: var(--raster) 0; }
.chip-label { font-size: 11px; font-weight: 400; letter-spacing: .01em; line-height: 14px; color: #a0adc2; opacity: .75; }
.chips { display: flex; flex-wrap: wrap; gap: var(--raster); }
.chip { height: 40px; min-width: 44px; padding: 0 12px; border: 1.5px solid #a0adc259; border-radius: 20px; background: transparent; color: #a0adc2; font-size: 15px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: color .2s, border-color .2s, box-shadow .2s; }
.chip[aria-pressed="true"] { color: #94eee1; border-color: #94eee1; box-shadow: 0 0 14px #94eee140, inset 0 0 10px #94eee126; }
.chip:not([aria-pressed="true"]):hover { color: #d6dfec; border-color: #a0adc299; }
@media (max-width: 520px), (hover: none) and (pointer: coarse), (display-mode: standalone) { .countdown-sheet { padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + var(--raster) * 2)); } }

/* Vier Schritte: volle Breite je Wert, getrennte Zeile für die Bezeichnung. */
.nav-item { height: 68px; gap: 5px; }
.nav-label { display: flex; flex-direction: column; align-items: center; width: 100%; line-height: 14px; }
.nav-prefix { font-size: 10px; }
.nav-value { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tone-row { display: flex; align-items: center; padding-right: calc(var(--rand) - 4px); }
.tone-row .sheet-entry { flex: 1 1 auto; width: auto; min-width: 0; height: auto; min-height: 52px; padding-top: 12px; padding-right: var(--raster); padding-bottom: 12px; }
.ton-list .sheet-entry > span:first-of-type { white-space: normal; overflow-wrap: anywhere; }
.tone-preview { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1.5px solid #a0adc259; border-radius: 50%; background: transparent; color: #a0adc2; cursor: pointer; transition: color .2s, border-color .2s, background .2s, box-shadow .2s, transform .12s; }
.tone-preview svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.tone-preview:hover { color: #d6dfec; border-color: #a0adc299; }
.tone-preview:active { transform: scale(.94); }
.tone-preview[aria-pressed="true"] { color: #94eee1; border-color: #94eee1; background: #94eee112; box-shadow: 0 0 14px #94eee140, inset 0 0 10px #94eee21f; }
.tone-preview:focus-visible { outline: 2px solid #89e9e299; outline-offset: 2px; }
.klangquellen { display: block; margin: 14px var(--rand) 0; color: #a0adc2; font-size: 12px; text-underline-offset: 3px; }