/* =========================================================================
   Audio-Tarifrechner - nur das, was es allein hier gibt
   =========================================================================

   Die Optik des Rechners (Filterband, Auswahlfelder, Tabelle, Exportknoepfe,
   Fussnoten) steht in ../../../public/extern-tarifrechner.css und wird mit
   dem TV-Rechner geteilt. Hier stehen die drei Stellen, an denen sich der
   Audio-Rechner unterscheidet:

     1. der Knopf "Angebote im Ueberblick" mit seiner Erlaeuterung,
     2. die Kennzeichnung Kombi / Einzelsender in der Produktspalte,
     3. die Darstellung fehlender Monatswerte.

   Groessen in rem, wie im gemeinsamen Stylesheet: 1 rem = 10 px
   (62,5-%-Basis aus extern-ardm.css).
   ========================================================================= */

.tra-main { display: flex; flex-direction: column; gap: 24px; }

/* --- Kein Kopfbereich -----------------------------------------------------
   Der TV-Rechner traegt oben eine weisse Branding-Leiste und ein leeres
   blaues Band - beides Erbe der Originalseite, die ihre Ueberschrift
   darueber setzt. Der Audio-Rechner braucht beides nicht und faengt direkt
   mit den Filtern an. Das Element bleibt als Anker stehen, falls doch
   einmal eine Ueberschrift hineinsoll; es ist nur flachgelegt. */

.ard-tariff-calculator .tra-hero--leer { display: none; }

/* --- Zweite Reihe: Spotlaenge und Aktionen --------------------------------
   Eigene Flex-Zeile statt weiterer Rasterelemente. Im Raster
   (auto-fit, minmax(220px, 1fr)) bekommen acht Elemente Spuren von rund
   230px; die Exportleiste hat aber 280px Mindestbreite und schiebt sich
   dann ueber den Nachbarn. Genau das war im ersten Anlauf zu sehen. */

.ard-tariff-calculator .tra-aktionen {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.ard-tariff-calculator .tra-aktionen__sek { flex: 0 0 22rem; }
.ard-tariff-calculator .tra-aktionen .export-actions { flex: 0 0 auto; }

/* --- Produktspalte --------------------------------------------------------
   Kombi oder Einzelsender steht als kleine Marke vor dem Namen, damit die
   Unterscheidung auch dann sichtbar ist, wenn der Filter auf "beide" steht. */

.ard-tariff-calculator .tra-art {
  border-radius: 3px;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 0.8rem;
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
  vertical-align: 0.1rem;
}
.ard-tariff-calculator .tra-art--kombi { background: #003366; color: #fff; }
.ard-tariff-calculator .tra-art--einzel { background: #dbe7f5; color: #003366; }

.ard-tariff-calculator .produkt-col { text-align: left !important; min-width: 260px; }
.ard-tariff-calculator .tag-col { text-align: center !important; white-space: nowrap; }

/* --- Fehlende Werte -------------------------------------------------------
   0,00 in den Daten heisst "kein Preis", nicht "kostenlos". Solche Zellen
   zeigen einen Gedankenstrich - eine 0,00 EUR waere eine Falschaussage. */

.ard-tariff-calculator .tra-leer { color: #94a3b8; }

@media (max-width: 700px) {
  .ard-tariff-calculator .tra-aktionen { display: grid; grid-template-columns: 1fr; }
  .ard-tariff-calculator .tra-aktionen__sek { flex: none; }
}