/* =========================================================================
   Tarifrechner - Optik des Originals von www.ard-media.de/tv-tarifrechner
   Gemeinsame Datei fuer ALLE Rechner (TV, Audio, spaetere).
   =========================================================================

   Uebernommen aus dem Original-Stylesheet, gescoped auf
   .ard-tariff-calculator. Alle Werte sind am 07.08.2026 an der laufenden
   Originalseite nachgemessen; wo der erste Nachbau abwich, steht der Grund
   als Kommentar daneben.

   Hier steht ausschliesslich, was in JEDEM Rechner gleich ist: Kopfleiste,
   Filterband, Auswahlfelder, Exportknoepfe, Ergebnistabelle, Fussnoten,
   Ladezustaende. Was nur eine Variante hat - die Begleittexte des
   TV-Rechners, die Gebietsauswahl des Audio-Rechners - gehoert ins jeweilige
   Modul. Wer hier etwas aendert, aendert beide Rechner. Das ist der Zweck,
   aber es will geprueft sein.

   ZWEI DINGE, DIE MAN WISSEN MUSS:

   1. Die rem-Werte stimmen nur mit der 62,5-%-Basis aus extern-ardm.css
      (1 rem = 10 px, wie auf ard-media.de). Ohne sie ist jeder Abstand um
      Faktor 1,6 zu gross - das war der Hauptgrund, warum der erste Nachbau
      "aufgeblasen" wirkte.

   2. Die blaue Tabellenoptik steht NICHT hier, sondern in
      extern-ardm.css - auf der Originalseite kommt sie ebenfalls aus dem
      Seitenrahmen (main.css: table th / tr:nth-child), nicht aus dem
      Rechner. Wer sie hier sucht, sucht falsch.

   Schrift: ard-media.de laedt "TheSans LT Light" (lizenziert, liegt uns
   nicht vor). Der Rechner selbst deklariert Inter, das die Originalseite
   gar nicht laedt - dort greift also ebenfalls die System-Sans. Die
   Deklarationen sind unveraendert uebernommen; sobald die Hausschrift
   vorliegt, reicht ein @font-face.
   ========================================================================= */

.ard-tariff-calculator {
  --primary-color: #003366;      /* Deep ARD Blue */
  --accent-color: #c0d72f;       /* ARD Lime Green */
  --accent-hover: #aec42a;
  --text-on-dark: #ffffff;
  --text-main: #333333;
  --bg-light: #f4f7f9;
  --border-light: #d1d9e0;
  --border-on-dark: rgba(255, 255, 255, 0.3);
  --input-bg-dark: #002244;
  --shadow-soft: 0 10px 25px rgba(0, 51, 102, 0.1);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  font-family: Inter, -apple-system, sans-serif;
  font-size: 1.8rem;             /* gemessen: 18px - fehlte im ersten Nachbau */
  background: #ffffff;
  color: var(--text-main);
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
}

.ard-tariff-calculator .tariff-results-table tr {
  transition: var(--transition);
  animation: tr-slideUpIn 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes tr-slideUpIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.ard-tariff-calculator .form-control,
.ard-tariff-calculator .form-select,
.ard-tariff-calculator .btn-export {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ard-tariff-calculator .form-control:focus,
.ard-tariff-calculator .form-select:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(192, 215, 47, 0.2);
  color: #ffffff !important;
}

/* --- Branding-Leiste ------------------------------------------------------
   Im Original leer und nur 21px hoch: Padding, sonst nichts. Das
   min-height des ersten Nachbaus machte sie unnoetig hoch.

   DERZEIT VON KEINER SEITE GERENDERT: beide Rechner haben sie am 10.08.2026
   auf Wunsch abgelegt. Die Regel bleibt stehen, weil sie den Originalaufbau
   dokumentiert und die Leiste mit einer Zeile HTML zurueckkommt. */
.ard-tariff-calculator .tariff-branding-bar {
  padding: 1rem 3rem;
  background: #ffffff;
  border-bottom: 1px solid var(--border-light);
}

/* --- Hero ---------------------------------------------------------------- */
.ard-tariff-calculator .tariff-hero {
  background: var(--primary-color);
  padding: 4rem 3rem 5rem 3rem;
  color: var(--text-on-dark);
  position: relative;
}

.ard-tariff-calculator .hero-content { max-width: 800px; }

/* --- Filterleiste --------------------------------------------------------- */
.ard-tariff-calculator .tariff-controls-section {
  background: #002d5a;
  padding: 2rem 3rem;
  color: #ffffff;
}

.ard-tariff-calculator .filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  align-items: flex-end;
}

.ard-tariff-calculator .control-group label {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: #ffffff;
  letter-spacing: 0.05em;
}

/* Auswahlfelder: dunkel, mit eigenem Pfeil (appearance: none). Der Pfeil
   ist das Original-SVG der Website, Strichfarbe #003480. */
.ard-tariff-calculator .form-control,
.ard-tariff-calculator .form-select {
  width: 100%;
  height: 4.6rem;
  background-color: #001a33;
  border: 1px solid var(--border-on-dark);
  color: #ffffff;
  padding: 0 1.4rem;
  border-radius: 4px;
  font-size: 1.6rem;
  font-family: inherit;
  line-height: 1.5;
}

.ard-tariff-calculator .form-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 3.6rem 0 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23003480'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
  background-position: calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 16px;
}

/* Das Sekundenfeld ist im Original WEISS, nicht marine: auf der Website
   sticht dort input[type=text] (0,1,1) die Klasse .form-control (0,1,0).
   Auf einer eigenstaendigen Seite gibt es diese Regel nicht - deshalb hier
   ausdruecklich, mit derselben Wirkung. */
.ard-tariff-calculator input.form-control {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #323232;
}

.ard-tariff-calculator .form-control:focus,
.ard-tariff-calculator .form-select:focus {
  border-color: var(--accent-color);
  outline: 2px solid var(--accent-color);
  background-color: var(--input-bg-dark);
  color: var(--accent-color);
}

.ard-tariff-calculator select.form-control option,
.ard-tariff-calculator select.form-select option {
  background-color: var(--input-bg-dark);
  color: #ffffff;
  padding: 10px;
}

.ard-tariff-calculator .control-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ard-tariff-calculator .seconds-input-wrapper { position: relative; }

.ard-tariff-calculator .seconds-input-wrapper .unit {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #aaaaaa;
  pointer-events: none;
}

/* --- Exportknoepfe --------------------------------------------------------
   Gemessen: 10px/20px Innenabstand, 16px Schrift - und Arial, weil das
   Original dem Knopf keine Schrift zuweist und der Browser-Standard
   greift. Bewusst uebernommen, damit die Seite dem Original entspricht. */
.ard-tariff-calculator .export-actions {
  display: flex;
  gap: 1rem;
  min-width: 280px;
}

.ard-tariff-calculator .btn-export {
  flex: 1;
  background-color: var(--accent-color);
  color: var(--primary-color);
  border: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.6rem;
  font-family: Arial, sans-serif;
  /* Der Knopf ist im Original 36px hoch (10+16+10). Ohne diese Zeile zieht
     das "button { font: inherit }" aus extern-core.css die Zeilenhoehe 1,5
     des Bodys herein und macht ihn 44px hoch. */
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.ard-tariff-calculator .btn-export:hover {
  background-color: #ffffff;
  color: var(--primary-color);
  transform: translateY(-1px);
}

/* --- Ergebnisbereich ------------------------------------------------------ */
.ard-tariff-calculator .tariff-results-panel {
  padding: 3rem;
  background: #ffffff;
}

.ard-tariff-calculator .results-container {
  background: #ffffff;
  border-radius: 0;
}

.ard-tariff-calculator .table-responsive { overflow-x: auto; }

.ard-tariff-calculator .tariff-results-table {
  width: 100%;
  border-collapse: collapse;
}

/* Flaeche und Zellenlinien kommen aus extern-ardm.css (Seitenrahmen der
   Website) - hier steht nur, was der Rechner selbst beisteuert. */
.ard-tariff-calculator .tariff-results-table th {
  color: var(--primary-color);
  padding: 1.25rem 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  position: sticky;
  top: 4px;
  z-index: 5;
  border-bottom: 1px dashed #aaf;
}

.ard-tariff-calculator .tariff-results-table td {
  padding: 1.25rem 1rem;
  text-align: left;
  color: #334155;
  font-weight: 500;
}

.ard-tariff-calculator .price { text-align: right !important; }
.ard-tariff-calculator .werbeblock-col { text-align: center !important; }
.ard-tariff-calculator .price-col { text-align: right !important; }

/* --- Meldungen ------------------------------------------------------------ */
.ard-tariff-calculator .alert {
  margin: 0 0 1rem;
  padding: 0.9rem 1.2rem;
  border-radius: 4px;
  font-size: 0.95rem;
}
.ard-tariff-calculator .alert-danger { background: #fdecec; color: #a12622; border: 1px solid #f2b8b5; }
.ard-tariff-calculator .alert-info { background: #e8f1fb; color: #1d4f91; border: 1px solid #bcd4f0; animation: tr-fadeIn 0.3s ease; }

.ard-tariff-calculator .empty-state { padding: 2rem 0; color: #64748b; font-size: 1.5rem; }
.ard-tariff-calculator .empty-state p { margin: 0; }

/* --- Fussnoten des Rechners ----------------------------------------------- */
.ard-tariff-calculator .tariff-footer {
  padding: 3.5rem;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  line-height: 1.7;
}

.ard-tariff-calculator .tariff-footer table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.ard-tariff-calculator .tariff-footer td {
  vertical-align: top;
  padding: 0.5rem 1rem 0.5rem 0;
}

.ard-tariff-calculator .tariff-footer ul,
.ard-tariff-calculator .tariff-footer ol {
  margin: 0;
  padding-left: 1.5rem;
}

/* gemessen: 15px Absatz mit 16px Abstand, 11px Listenpunkte */
.ard-tariff-calculator .tariff-footer p { font-size: 1.5rem; margin: 0 0 1.6rem; }
.ard-tariff-calculator .tariff-footer li { font-size: 1.1rem; line-height: 1.5; }
.ard-tariff-calculator .tariff-footer strong { color: var(--primary-color); }

/* --- Ladezustaende -------------------------------------------------------- */
.ard-tariff-calculator .skeleton-container { width: 100%; }

.ard-tariff-calculator .skeleton-row {
  height: 60px;
  margin-bottom: 2px;
  background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: tr-shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes tr-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ard-tariff-calculator .loading-bar-container {
  height: 4px;
  width: 100%;
  background: rgba(0, 51, 102, 0.05);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 10;
  display: none;
}

.ard-tariff-calculator .loading-bar {
  height: 100%;
  width: 0%;
  background: var(--accent-color);
  transition: width 0.4s ease;
}

.ard-tariff-calculator .btn-export.processing {
  background-color: #f1f5f9;
  color: #94a3b8;
  pointer-events: none;
  position: relative;
}

.ard-tariff-calculator .btn-export.processing::after {
  content: "...";
  animation: tr-dots 1.5s infinite;
}

@keyframes tr-dots {
  0%, 20% { content: "."; }
  40% { content: ".."; }
  60%, 100% { content: "..."; }
}

@keyframes tr-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 1200px) {
  .ard-tariff-calculator .tariff-hero,
  .ard-tariff-calculator .tariff-controls-section,
  .ard-tariff-calculator .tariff-results-panel,
  .ard-tariff-calculator .tariff-footer {
    padding: 2rem;
  }

  .ard-tariff-calculator .filters-grid { grid-template-columns: repeat(2, 1fr); }
  .ard-tariff-calculator .export-actions { grid-column: span 2; }
}

@media (max-width: 600px) {
  .ard-tariff-calculator .filters-grid { grid-template-columns: 1fr; }
  .ard-tariff-calculator .export-actions { grid-column: span 1; flex-direction: column; }
}

/* --- Embed-Modus ----------------------------------------------------------
   Eingebettet ist der Rechner keine Karte, die auf einer Flaeche liegt,
   sondern ein Abschnitt der fremden Seite. Schatten, abgerundete Ecken und
   die Maximalbreite sind Merkmale des Ersteren - sie faellen weg, damit er
   sich in das Raster der einbindenden Seite fuegt. */

body.ext-embed .ard-tariff-calculator {
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}