/* Wisch-Modi (Owner 10.10.2026): Leiste «Vorschläge · Alle · Raum · 2. Blick», Karte «wie weiter?», Abzeichen «Neu bei X».
   Nur Variablen aus meeyo.css (--pflaume, --linie, --milch, --nebel, --korall, --verlauf …) — keine Rückfallwerte (test_css_variablen). */
.wm-leiste { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; margin: 0 0 4px }
.wm-leiste::-webkit-scrollbar { display: none }
.wm-chip { flex: 0 0 auto; border: 1px solid var(--linie); background: var(--pflaume); color: var(--nebel); border-radius: 999px; padding: 7px 14px; font: 600 .86rem/1.2 inherit; cursor: pointer; white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis }
.wm-chip:hover, .wm-chip:focus-visible { color: var(--milch); border-color: var(--violett) }
.wm-chip.an { background: var(--verlauf); color: #fff; border-color: transparent }
.wm-raeume { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px }
.wm-raeume .chip { cursor: pointer }
.wm-hinweis { margin: -4px 0 8px; color: var(--nebel) }

.wm-wahl { display: flex; flex-direction: column; gap: 10px; padding: 22px 18px; background: var(--pflaume); border: 1px solid var(--linie); border-radius: 26px; margin: 0 0 12px; text-align: left }
.wm-wahl-titel { display: block; font-size: 1.22rem; line-height: 1.3; color: var(--milch); margin: 0 0 4px; text-align: center }
.wm-weg { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--pflaume-hell); color: var(--milch); cursor: pointer; font: inherit }
.wm-weg:hover, .wm-weg:focus-visible { border-color: var(--violett) }
.wm-weg.an { border-color: var(--korall) }
.wm-weg > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.wm-weg b { font-size: 1rem }
.wm-weg small { color: var(--nebel); font-size: .84rem; line-height: 1.35 }
.wm-sym { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: var(--pflaume); border: 1px solid var(--linie) }
.wm-wahl-fuss { margin: 4px 0 0; text-align: center; color: var(--nebel) }
.wm-wahl-fuss .knopf { margin-left: 6px }
/* Die Wahl steht dort, wo sonst die Karten liegen: der leere Stapel nimmt dann keinen Platz */
.stapel-huelle:has(#wm-wahl:not([hidden])) .stapel:empty { height: 0 }

.wm-neu-pille { position: absolute; left: 12px; right: 12px; top: 68px; z-index: 3; padding: 8px 12px; border-radius: 14px; background: rgba(22, 10, 28, .72); color: #fff; font-size: .84rem; line-height: 1.35; backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 2px; pointer-events: none }
.wm-neu-pille b { font-weight: 800 }
.wm-neu-pille .wm-mag { color: #ffd1dc; font-weight: 700 }

/* Handy: meeyo.css legt in der Stapel-Spalte alles ausser Stapel und Knöpfen UNTER die Knöpfe (order 3).
   Die Leiste muss aber über dem Stapel stehen — sie sagt, wo man ist; die Wahl steht an der Stelle des Stapels. */
@media (max-width: 760px) {
  #entdecken #tab-fuer-dich .stapel-huelle > .wm-leiste, #entdecken #tab-fuer-dich .stapel-huelle > .wm-raeume, #entdecken #tab-fuer-dich .stapel-huelle > .wm-hinweis { order: 0 }
  #entdecken #tab-fuer-dich .stapel-huelle > .wm-wahl { order: 1 }
}

/* 10.10.: «Räume wählen» als Link in derselben Leiste */
a.wm-chip.wm-chip-plus { text-decoration: none; display: inline-block }