/* Weg einer Anfrage auf reichweite.html - was nur diese Karte braucht.
   Mechanik, Stepper und die gemeinsamen Atome stehen in ablauf.css; beide Stylesheets sind im
   <head> verlinkt. Komponente: src/components/rw/ReichweiteWeg.tsx. */

/* Die Karte kann auch auf einem grossen Bildschirm in einer schmalen Spalte stehen.
   Ihre eigene Inhaltsbreite entscheidet deshalb ueber die Anordnung. */
.rw-karte { container: rw-karte / inline-size; }
.rw-uebergaben { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.rw-auskunft { grid-template-columns: minmax(0, 1fr); }
.rw-feld-breit { grid-column: 1 / -1; }

@container rw-karte (min-width: 22.75rem) {
  .rw-auskunft { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container rw-karte (max-width: 26rem) {
  .rw-karte .rw-anzeige-formular {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    align-items: start;
  }
  .rw-karte .rw-anzeige-bild { width: 3.5rem; height: 3.5rem; }
  .rw-anzeige-formular .rw-knopf { grid-column: 2; justify-self: start; }
  .rw-pruefzeile { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.25rem 0.6rem; }
  .rw-pruefzeile .ab-check-icon { grid-row: 1 / 3; align-self: center; }
  .rw-pruefzeile .ab-check-wert { grid-column: 2; margin-left: 0; white-space: normal; }
  .rw-karte .rw-email-serie { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .rw-email-status { padding-left: 1.875rem; }
}

/* Der Knopf in der Anzeige: erst faehrt der Zeiger darauf, dann wird gedrueckt. */
.rw-knopf { transition: box-shadow 300ms ease, background-color 300ms ease, color 300ms ease, transform 300ms var(--ab-ease); }
.rw-knopf.is-anvisiert { box-shadow: 0 0 0 3px rgba(107, 141, 255, 0.18); border-color: rgba(107, 141, 255, 0.5); }
.rw-knopf.is-gedrueckt { background: #ffffff; color: #0b1920; box-shadow: 0 0 0 4px rgba(107, 141, 255, 0.35); transform: scale(0.97); }

/* Die Felder der Selbstauskunft sind schmal und tragen teils lange Werte. */
.rw-feld dt { font-size: 0.68rem; }
.rw-feld dd { overflow: hidden; font-variant-numeric: tabular-nums; }

/* Der Punkt pulst, solange die Pruefung laeuft. */
.rw-puls { animation: rw-puls 1.6s ease-in-out infinite; }
@keyframes rw-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .rw-knopf { transition: none; }
  .rw-puls { animation: none; }
}