/* Einwertung auf der Startseite - was nur diese Karte braucht.
   Mechanik, Stepper und die gemeinsamen Atome stehen in ablauf.css; beide Stylesheets sind im
   <head> verlinkt. Komponente: src/components/ew/EinwertungKarte.tsx. */

/* Die Karte steht auch auf großen Bildschirmen in einer schmalen Spalte.
   Deshalb entscheidet ihre Inhaltsbreite über die Anordnung. */
.ew-karte { container: einwertung / inline-size; }
.ew-optionen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.ew-optionen .ab-option { min-width: 0; padding: 0.65rem 1.4rem 0.65rem 0.7rem; }
.ew-option-titel { display: block; hyphens: auto; }
.ew-standort, .ew-abgleich { grid-template-columns: minmax(0, 1fr); }
.ew-standort-radius { display: none; }
.ew-felder { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.ew-quellen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.ew-karte .ab-check { display: grid; grid-template-columns: 1rem minmax(0, 1fr); column-gap: 0.6rem; row-gap: 0.15rem; }
.ew-karte .ab-check-icon { grid-row: 1 / 3; align-self: start; margin-top: 0.1rem; }
.ew-karte .ab-check-wert { grid-column: 2; margin-left: 0; white-space: normal; }
.ew-schluss-wert { flex: none; white-space: nowrap; }

@container einwertung (min-width: 18rem) {
  .ew-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container einwertung (min-width: 24rem) {
  .ew-karte .ab-check { grid-template-columns: 1rem minmax(0, 1fr) auto; }
  .ew-karte .ab-check-icon { grid-row: auto; align-self: center; margin-top: 0; }
  .ew-karte .ab-check-wert { grid-column: auto; }
}
@container einwertung (min-width: 28rem) {
  .ew-optionen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container einwertung (min-width: 30rem) {
  .ew-standort { grid-template-columns: minmax(0, 1fr) 11rem; }
  .ew-standort-radius { display: flex; }
  .ew-abgleich { grid-template-columns: 11rem minmax(0, 1fr); }
  .ew-abgleich .ab-check { grid-template-columns: 1rem minmax(0, 1fr); }
  .ew-abgleich .ab-check-icon { grid-row: 1 / 3; align-self: start; margin-top: 0.1rem; }
  .ew-abgleich .ab-check-wert { grid-column: 2; }
}
@container einwertung (min-width: 38rem) {
  .ew-abgleich .ab-check { grid-template-columns: 1rem minmax(0, 1fr) auto; }
  .ew-abgleich .ab-check-icon { grid-row: auto; align-self: center; margin-top: 0; }
  .ew-abgleich .ab-check-wert { grid-column: auto; }
}

/* --- Szene 2: Postleitzahl, Region, Radius --- */
.ew-plz-feld { transition: border-color 400ms ease, background-color 400ms ease, box-shadow 400ms ease; }
.ew-plz-feld.is-anvisiert {
  border-color: rgba(107, 141, 255, 0.55);
  background: rgba(107, 141, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(107, 141, 255, 0.08);
}
.ew-plz-feld.is-gefuellt { border-color: rgba(255, 255, 255, 0.28); }
.ew-skelett { position: relative; min-height: 1.2em; color: transparent; }
.ew-skelett::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  height: 0.75em;
  width: 62%;
  border-radius: 999rem;
  background: rgba(255, 255, 255, 0.08);
  animation: ew-schimmer 1.4s ease-in-out infinite;
}
.ew-skelett-kurz::before { width: 42%; }
.ew-region.is-sichtbar .ew-skelett { color: inherit; animation: ab-fuellen 520ms var(--ab-feder) both; }
.ew-region.is-sichtbar .ew-skelett:nth-of-type(2) { animation-delay: 80ms; }
.ew-region.is-sichtbar .ew-skelett::before { display: none; }
@keyframes ew-schimmer { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.ew-radius-kreis {
  transform-origin: 88px 88px;
  transform: scale(0.12);
  opacity: 0;
  transition: transform 900ms var(--ab-ease), opacity 600ms ease;
}
.ew-radius.is-sichtbar .ew-radius-kreis { transform: scale(1); opacity: 1; }
.ew-orte circle { opacity: 0; transition: opacity 500ms ease; }
.ew-radius.is-sichtbar .ew-orte circle { opacity: 1; }
.ew-radius.is-sichtbar .ew-orte circle:nth-child(2) { transition-delay: 150ms; }
.ew-radius.is-sichtbar .ew-orte circle:nth-child(3) { transition-delay: 300ms; }
.ew-radius-label { opacity: 0; transition: opacity 500ms ease 400ms; }
.ew-radius.is-sichtbar + .ew-radius-label { opacity: 1; }

/* --- Szene 4: Radar --- */
.ew-radar { color: #ffffff; }
.ew-radar-strahl { transform-origin: 88px 88px; animation: ew-strahl 2.4s ease-out infinite; }
@keyframes ew-strahl { 0% { transform: scale(0.2); opacity: 0.7; } 100% { transform: scale(9); opacity: 0; } }
.ew-punkte circle { opacity: 0; transition: opacity 400ms ease; }
.ew-punkte circle.is-sichtbar { opacity: 1; }

/* --- Szene 5: die Schlusszeile --- */
.ew-schluss.is-da .ew-schluss-wert { animation: ab-fuellen 520ms var(--ab-feder) both; }

@media (prefers-reduced-motion: reduce) {
  .ew-region, .ew-radius-kreis, .ew-orte circle, .ew-punkte circle { transition: none; }
  .ew-radar-strahl, .ew-skelett::before, .ew-region.is-sichtbar .ew-skelett,
  .ew-schluss.is-da .ew-schluss-wert { animation: none; }
}