/* Astromantie Horoskop-Reiter (11.10.2026), siehe astromantie-horoskop-reiter.php und reiter.js.
   Leiste wie der Umschalter im Browser-Konto: Pille mit gleich breiten Feldern, Hanken Grotesk, feiner violetter
   Rand, durchscheinend (DESIGN-STANDARD.md), der gewaehlte Bereich golden. Ueberall gleich: Konto (App und
   Browser), Geburtshoroskop berechnen, Kombin berechnen. */
.amr-leiste {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  margin: 6px auto 16px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(14, 8, 34, 0.55);
  border: 1px solid rgba(167, 139, 250, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#arm-data-container > .amr-leiste { margin-top: 18px; }
.amr-leiste .amr-knopf {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 10px 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.1px;
  text-transform: none;
  color: #b9b2d8;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.amr-leiste .amr-knopf:hover { color: #ffffff; background: none; }
.amr-leiste .amr-knopf.ist,
.amr-leiste .amr-knopf.ist:hover {
  background: rgba(232, 201, 106, 0.16);
  color: #f6e3a1;
  box-shadow: inset 0 0 0 1px rgba(232, 201, 106, 0.42);
}
.amr-leiste .amr-knopf:focus-visible { outline: 2px solid rgba(232, 201, 106, 0.6); outline-offset: 1px; }
/* "Astrologische" nur, wenn Platz ist (am Handy und in der App reicht "Auswertung") */
.amr-leiste .amr-vor { display: none; }
@media (min-width: 600px) {
  .amr-leiste { max-width: 640px; }
  .amr-leiste .amr-knopf { padding: 10px 14px; font-size: 14px; }
  .amr-leiste .amr-vor { display: inline; }
}
/* Website im hellen Thema */
body.astro-light-theme .amr-leiste { background: rgba(255, 255, 255, 0.75); border-color: rgba(120, 90, 200, 0.25); box-shadow: none; }
body.astro-light-theme .amr-leiste .amr-knopf { color: #5b4f7a; }
body.astro-light-theme .amr-leiste .amr-knopf:hover { color: #2a2018; }
body.astro-light-theme .amr-leiste .amr-knopf.ist { background: rgba(201, 153, 60, 0.15); color: #7a5a12; box-shadow: inset 0 0 0 1px rgba(160, 124, 42, 0.45); }
@media (prefers-reduced-motion: reduce) { .amr-leiste .amr-knopf { transition: none; } }

/* Nur der gewaehlte Bereich ist zu sehen; Kopf (Signatur) und "immer" (Wusstest du?) bleiben. Waehrend eines
   Rundgangs alles untereinander, ohne Leiste. */
html:not(.astro-tour-active) body:not(.astro-tour-active) [data-amr="auswertung"] > :is([data-amr-teil="aspekte"], [data-amr-teil="figuren"]),
html:not(.astro-tour-active) body:not(.astro-tour-active) [data-amr="aspekte"] > :is([data-amr-teil="auswertung"], [data-amr-teil="figuren"]),
html:not(.astro-tour-active) body:not(.astro-tour-active) [data-amr="figuren"] > :is([data-amr-teil="auswertung"], [data-amr-teil="aspekte"]) {
  display: none !important;
}
html.astro-tour-active .amr-leiste,
body.astro-tour-active .amr-leiste { display: none !important; }