/* Auswahl Gerät / Hell / Dunkel im Fuß (assets/farbmodus.js). Der Fuß ist in beiden Modi Nacht;
   die Etiketten sind die Chips der Apps (tippgen) in kleiner Fassung. */
.fuss-rechts { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.fuss-rechts .chipreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin: 0; padding: 0; }
.fuss .chip {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-height: 44px; padding: 0 14px; margin: 0;
  background: var(--m-dymo); color: var(--m-dymo-text);
  border: 1px solid rgba(201,195,227,.35); border-radius: 3px;
  box-shadow: 0 2px 0 var(--m-dymo-schatten);
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.06em;
  white-space: nowrap; cursor: pointer;
  transform: rotate(var(--kipp, 0deg));
  transition: background-color .2s, color .2s;
}
.fuss .chipreihe > .chip:nth-child(3n + 1) { --kipp: -1deg; }
.fuss .chipreihe > .chip:nth-child(3n + 2) { --kipp: 0.8deg; }
.fuss .chipreihe > .chip:nth-child(3n) { --kipp: -0.4deg; }
.fuss .chip[aria-pressed="true"] {
  background: var(--m-akzent); color: var(--m-auf-akzent); border-color: var(--m-akzent);
  box-shadow: 0 2px 0 var(--m-akzent-schatten);
}
@media (hover: hover) {
  .fuss .chip:not([aria-pressed="true"]):hover { background: #2a2570; color: #fff; }
}
.fuss .chip:focus-visible { outline: 3px solid var(--g-fokus); outline-offset: 3px; }
@media (max-width: 699px) {
  .fuss { flex-direction: column; align-items: flex-start; }
  .fuss-rechts { flex-wrap: wrap; }
}