/* ============================================================
   Auswahl

   Masse aus Prototyp.dc.html Zeile 1894-1935.
   ============================================================ */

.ps-wahl {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block: 0;
}

/* ---------- Die Reiterleiste ----------

   Ohne JavaScript bleibt sie weg: `hidden` steht im Markup, app.js nimmt
   es beim Verdrahten heraus. Eine Schaltflaeche, die nichts umschaltet,
   waere schlimmer als keine.
*/

.ps-wahl__reiter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px;
}

.ps-wahl__reiter[hidden] { display: none; }

.ps-wahl__reiter-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.35;
  padding: 12px 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.ps-wahl__reiter-knopf:hover {
  border-color: var(--control-line-hover);
  color: var(--text-strong);
}

.ps-wahl__reiter-knopf[aria-selected="true"],
.ps-wahl__reiter-knopf[aria-expanded="true"] {
  border-color: var(--accent-base);
  color: var(--text-strong);
}

/*
   Das Symbol nur im Ausklappmodus.

   In der Reiterleiste steht das Original des Entwurfs: sechs Kapseln mit
   Text, sonst nichts. Dort haben die Symbole keine Aufgabe — die Kapseln
   liegen nebeneinander und sind schon durch ihre Lage unterscheidbar.

   Untereinander gestapelt ist das anders: Sechs gleich gebaute Zeilen
   sehen sich zum Verwechseln aehnlich, und das Symbol ist das Erste, was
   man im Vorbeiscrollen erfasst. Es ist also kein Schmuck, den man sich
   auch auf dem Desktop goennen sollte, sondern eine Antwort auf ein
   Problem, das es nur auf dem Telefon gibt.
*/
.ps-wahl__reiter-symbol { display: none; }

[data-wahl-modus="akkordeon"] .ps-wahl__reiter-symbol {
  display: inline-flex;
  flex: none;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

[data-wahl-modus="akkordeon"] .ps-wahl__reiter-knopf:hover .ps-wahl__reiter-symbol,
[data-wahl-modus="akkordeon"] .ps-wahl__reiter-knopf[aria-expanded="true"] .ps-wahl__reiter-symbol {
  color: var(--highlight);
}

/* ---------- Ausklappmodus ----------

   Auf schmalen Bildschirmen wandern die Schaltflaechen an ihren Fall und
   klappen selbst auf. Die Tafel gibt dafuer ihre Flaeche ab: Was
   herausgeklappt wird, soll sich vom Rest abheben — und das tut es nur,
   wenn der Rest keine eigene Flaeche traegt.
*/

[data-wahl-modus="akkordeon"] .ps-wahl__tafel {
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
}

[data-wahl-modus="akkordeon"] .ps-wahl__reiter-knopf {
  justify-content: flex-start;
  text-align: left;
  width: 100%;
  padding: 14px var(--space-5);
}

/* Der Pfeil rechts. Aus zwei Rahmenkanten gezeichnet — ein Symbol waere
   hier eine Datei mehr fuer zwei Striche. */
[data-wahl-modus="akkordeon"] .ps-wahl__reiter-knopf::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}

[data-wahl-modus="akkordeon"] .ps-wahl__reiter-knopf[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
  border-color: var(--highlight);
}

@media (prefers-reduced-motion: reduce) {
  [data-wahl-modus="akkordeon"] .ps-wahl__reiter-knopf::after { transition: none; }
}

[data-wahl-modus="akkordeon"] .ps-wahl__abschluss {
  margin-top: var(--space-4);
  padding-inline: var(--space-2);
}

/* ---------- Die Tafel ---------- */

.ps-wahl__tafel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-7);
  border: 1px solid var(--section-line);
  border-radius: var(--radius-lg);
  background: var(--section-panel);
}

/* ---------- Der Abschluss ----------

   Die Linie laeuft nach 60 Prozent aus, wie die Trenner in den Karten —
   sie gliedert, statt die Tafel zu zerteilen.
*/

.ps-wahl__abschluss {
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--section-line);
  border-image: linear-gradient(to right, var(--section-line) 60%, transparent 60%) 1;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-muted);
}

.ps-wahl__abschluss a {
  position: relative;
  color: var(--accent-text);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 45%, transparent);
}

/*
   Die Trefferflaeche waechst, das Aussehen nicht.

   Der Link steht allein in seinem Absatz — er ist damit ein eigenes Ziel
   und kein Wort mitten in einem Satz. Eine Textzeile ist 20 Pixel hoch;
   als Ziel fuer einen Daumen ist das zu wenig (24 sind das Minimum, 44 das
   Bequeme).

   Waagerechtes Padding waere der naheliegende Weg, verschiebt aber den
   Unterstrich nach unten und reisst eine Luecke unter die Schrift. Ein
   unsichtbares Rechteck davor loest es, ohne irgendetwas zu verruecken:
   12 Pixel nach oben und unten ergeben 44. Es bleibt innerhalb des
   Innenabstands des Absatzes, faengt also nichts ab, was darueber liegt.
*/
.ps-wahl__abschluss a::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}

.ps-wahl__abschluss a:hover {
  color: var(--highlight);
  border-bottom-color: var(--highlight);
}

/* ---------- Schmale Breiten ---------- */

@media (max-width: 600px) {
  .ps-wahl__tafel { padding: var(--space-5); }
}