/* Auswahl in der Tour (Marlon 30.09.: 'nicht klar erkennbar, dass man anhaken kann, zu versteckt'). Der Auftrag kam erst
   am letzten von 13 Haltepunkten. Jetzt: Haken direkt auf jeder Positionskarte + laufende Auftragsleiste an jedem Halt.
   Abgenommen 01.10. ('In den Auftrag gefaellt mir') */
.haken-auftrag, .karte-auftrag .nur-handy { display: none; }
.auftrag-summe em { font-style: normal; }

.strecke .karte[data-nr] .haken-auftrag { display: inline-flex; align-items: center; gap: 12px; height: 44px; margin-top: 20px; padding: 0 18px 0 14px;
  border: 1.5px solid var(--text); background: transparent; color: var(--text); cursor: pointer;
  font: 600 var(--t-label) var(--schrift); letter-spacing: .14em; text-transform: uppercase; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.haken-auftrag svg { width: 20px; height: 20px; padding: 3px; border: 2px solid currentColor; color: inherit; flex-shrink: 0; }
.haken-auftrag svg use { color: transparent; stroke-width: 2.4px; }
.haken-auftrag .an { display: none; }
.strecke .karte[data-nr] .haken-auftrag:hover { background: rgba(128, 128, 128, .1); }
/* Gewaehlt: gelb wie das Teil in der Zeichnung, Kaestchen dunkel mit gelbem Haken (gleiche Spezifitaet wie die Grundregel) */
.strecke .karte[data-nr] .haken-auftrag[aria-pressed="true"] { background: var(--markierung); border-color: var(--markierung); color: var(--auf-farbe); }
.haken-auftrag[aria-pressed="true"] svg { background: var(--auf-farbe); border-color: var(--auf-farbe); }
.haken-auftrag[aria-pressed="true"] svg use { color: var(--markierung); }
.haken-auftrag[aria-pressed="true"] .an { display: inline; }
.haken-auftrag[aria-pressed="true"] .aus { display: none; }
.haken-auftrag:active { transform: translateY(1px); }
.haken-auftrag:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Laufende Auftragsleiste an jedem Halt (nicht nur am Zettel). Leer nur 'Noch nichts gewaehlt', der lange Tipp gehoert zum Zettel */
.strecke .auftrag-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; }
.strecke:not(.auftrag) .auftrag-summe .tipp { display: none; }
.auftrag-summe b { white-space: nowrap; }
/* Stueckliste: Haken heisst jetzt 'im Auftrag', nicht mehr 'schon durchgescrollt' (vorher beides gleich). Durchgescrollte Zeilen
   behalten ihre Nummer, gewaehlte bekommen Haken + gelben Balken, auch die aktive Zeile */
.strecke .positionen button.erledigt:not(.gewaehlt) .nr { color: inherit; }
.strecke .positionen button.erledigt .nr::after { display: none; }
.strecke:not(.auftrag) .positionen button.gewaehlt { color: var(--text); box-shadow: inset 4px 0 0 var(--markierung); }
.strecke:not(.auftrag) .positionen button.gewaehlt[aria-current] { color: var(--auf-farbe); box-shadow: inset 4px 0 0 var(--auf-farbe); }
.strecke .positionen button.gewaehlt .nr { position: relative; color: transparent; }
.strecke .positionen button.gewaehlt .nr::after { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 5px; height: 10px; margin: -7px 0 0 -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); color: var(--text); }
.strecke .positionen button.gewaehlt[aria-current] .nr::after { color: var(--auf-farbe); }

@media (max-width: 799px) {
  /* Handy: die seitlich rutschende Positions-Leiste fliegt raus, an ihrer Stelle steht die Auftragsleiste */
  .strecke .positionen ol, .strecke .bedienung { display: none; }
  /* Zettel am Handy ohne seitlich rutschende Symptom-Leiste und Regler: gewaehlt wird in der Tour oder am Teil in der Zeichnung */
  .strecke .karte-auftrag :is(.symptome, .km, #km) { display: none; }
  .strecke .karte-auftrag .nur-handy { display: block; }
  .strecke .auftrag-fuss { margin: 0 28px; padding-top: 10px; border-top: 1px solid var(--tabelle-linie); }
  /* Haken neben den Kennwerten statt darunter: eine eigene Zeile kostete dem Motorrad bei 393x659 fast ein Drittel (244x131 -> 175x94).
     Dafuer faellt am Handy die Spalte 'Intervall' weg */
  .strecke .karte[data-nr] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .strecke .karte[data-nr] > * { grid-column: 1 / -1; }
  .strecke .karte[data-nr] > .daten { grid-column: 1; }
  .strecke .karte[data-nr] .daten > div:nth-child(3) { display: none; }
  .strecke .karte[data-nr] .haken-auftrag { grid-column: 2; align-self: end; height: 40px; margin-top: 0; padding: 0 12px 0 10px; gap: 8px; }
}
@media (max-width: 399px) { .strecke .auftrag-fuss .knopf-lang { display: none; } }