/* ==========================================================================
   Tarif & Abrechnung — Komponente `tarif` (T-285)
   Einstellungen › Tarif & Abrechnung.
   Referenzentwurf: docs/design/application/project/tarife.css (.tf-*)
   Doku: docs/css/structure/tarif.md · Blueprint: blueprints/blueprint_tarif.html

   Wiederverwendet statt nachgebaut (Begründung in tarif.md):
     Rahmen, Gruppen, Fuß   → .set-form, .set-fieldset(-label), .set-form-foot(-main), .set-saved
     Hinweise, Leerzustand  → .set-field-hint, .set-empty-hint
     Intervall              → .pill-seg (renderPillSeg)
     Stepper, Schalter      → .set-stepper, .rec-switch
     Formular               → .form-grid-2, .form-field, .form-input
     „Leistungsvergleich"   → .set-add-role (Klappknopf)
     Rückfrage vor Buchung  → confirmDelete() mit neutralem Ton

   Alle Farben aus tokens.css; die Tönung der gewählten Karte ist eine
   Mischung aus Navy und Weiß statt des Literals #EAF0F5 aus dem Entwurf.
   ========================================================================== */

/* ── Aktueller Stand ─────────────────────────────────────────────────────── */
.tarif_status {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px;
  padding: 22px 24px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.tarif_status_header { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tarif_status_eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--q-highlight-2);
}
.tarif_status_title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--q-highlight-2);
}
.tarif_status_description {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--w-light);
  line-height: 1.5;
  color: var(--q-dark);
  text-wrap: pretty;
}
.tarif_status_description b { font-weight: var(--w-bold); }

.tarif_status_progress,
.tarif_meter_bar {
  height: 6px;
  margin-top: 6px;
  border-radius: var(--radius-pill);
  background: var(--q-bright);
  overflow: hidden;
}
.tarif_status_progress span,
.tarif_meter_bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--q-highlight-3);
}
.tarif_meter_warn .tarif_meter_bar span { background: var(--warning); }

.tarif_status_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}
.tarif_meter_header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.78125rem;
  font-weight: var(--w-regular);
  line-height: 1.4;
  color: var(--q-dark);
}
.tarif_meter_value { text-align: right; font-variant-numeric: tabular-nums; }
.tarif_meter_value b { font-weight: var(--w-bold); }
.tarif_meter_hint {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--w-regular);
  line-height: 1.4;
  color: var(--q-medium);
  text-wrap: pretty;
}

/* Hinweis direkt unter dem Stand gehört zu ihm — näher als der Rhythmus. */
.tarif_lead { margin-top: -12px; }

/* ── Hinweiskasten (Anbindung, fachlicher Kern) ─────────────────────────── */
.tarif_hinweis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--w-light);
  line-height: 1.5;
  color: var(--q-dark);
}
.tarif_hinweis > .ic { margin-top: 2px; }
.tarif_hinweis_text { min-width: 0; text-wrap: pretty; }
.tarif_hinweis_link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--w-bold);
  color: var(--q-highlight-2);
  cursor: pointer;
}
.tarif_hinweis_link:hover { color: var(--q-highlight-3-text); }
.tarif_hinweis_link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Tarifwahl ──────────────────────────────────────────────────────────── */
.tarif_wahl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.tarif_plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.tarif_plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 18px 18px 16px;
  border: 2px solid var(--divider);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--q-dark);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.tarif_plan:hover { border-color: var(--q-linie); }
.tarif_plan:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tarif_plan_active,
.tarif_plan_active:hover {
  border-color: var(--q-highlight-2);
  background: color-mix(in srgb, var(--q-highlight-2) 8%, #fff);
}

.tarif_plan_header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tarif_plan_title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--q-highlight-2);
}
.tarif_plan_tag {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--q-highlight-1);
  font-size: 0.65625rem;
  font-weight: var(--w-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--q-highlight-2);
}
.tarif_plan_price {
  font-size: 1.5rem;
  font-weight: var(--w-bold);
  line-height: 1.2;
  color: var(--q-dark);
  font-variant-numeric: tabular-nums;
}
.tarif_plan_price small {
  font-size: 0.78125rem;
  font-weight: var(--w-light);
  letter-spacing: normal;
  color: var(--q-dark);
}
.tarif_plan_sub {
  margin-top: -6px;
  font-size: 0.75rem;
  font-weight: var(--w-regular);
  line-height: 1.4;
  color: var(--q-medium);
}
.tarif_plan_description {
  font-size: 0.8125rem;
  font-weight: var(--w-light);
  line-height: 1.45;
  color: var(--q-dark);
  text-wrap: pretty;
}
.tarif_plan_facts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
  font-size: 0.78125rem;
  font-weight: var(--w-regular);
  line-height: 1.4;
  color: var(--q-dark);
}

/* ── Leistungsvergleich ─────────────────────────────────────────────────── */
.tarif_vergleich { overflow-x: auto; }
.tarif_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--q-dark);
}
.tarif_table thead th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--q-medium);
}
.tarif_table tbody th,
.tarif_table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: middle;
  font-weight: var(--w-light);
}
.tarif_table tbody th { font-weight: var(--w-regular); }
.tarif_table thead th.tarif_table_active { color: var(--q-highlight-2); }
.tarif_table td.tarif_table_active { background: color-mix(in srgb, var(--q-highlight-2) 8%, #fff); }
.tarif_vergleich_ja { display: inline-flex; }
.tarif_vergleich_nein { color: var(--q-medium); }

/* ── Zusatzbausteine und Services ───────────────────────────────────────── */
.tarif_addons,
.tarif_services { display: flex; flex-direction: column; gap: 10px; }

.tarif_addon,
.tarif_service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 130px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 2px solid var(--divider);
  border-radius: var(--radius-md);
}
/* Letzte Spalte mit Mindest- statt fester Breite: „Vorgemerkt am …" ist
   breiter als der Knopf „Anfragen" und lief bei 140 px über den Preis
   (gemessen im Blueprint, T-285). */
.tarif_service { grid-template-columns: minmax(0, 1fr) auto minmax(110px, auto); }
.tarif_addon_active { border-color: var(--q-highlight-2); }

.tarif_addon_text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarif_addon_title {
  font-family: var(--font-sans);
  font-size: 0.84375rem;
  font-weight: var(--w-bold);
  line-height: 1.4;
  color: var(--q-dark);
}
.tarif_addon_description {
  font-family: var(--font-sans);
  font-size: 0.78125rem;
  font-weight: var(--w-regular);
  line-height: 1.45;
  color: var(--q-medium);
  text-wrap: pretty;
}
.tarif_addon_sum {
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--w-bold);
  color: var(--q-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tarif_stepper { width: 150px; }
.tarif_addon .rec-switch { justify-self: end; }

.tarif_addon_body {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}

.tarif_deckel_row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

.tarif_service_preis {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--w-regular);
  color: var(--q-dark);
  white-space: nowrap;
}
.tarif_service_controls { justify-self: end; }

.tarif_anfrage { display: flex; align-items: center; gap: 12px; }
.tarif_anfrage_vorgemerkt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--w-bold);
  color: var(--success-text);
  white-space: nowrap;
}

/* Auswahlkarten (Quelle der KI, Zahlungsweise): seit T-288 der gemeinsame
   Baustein `.auswahlkarten` (app.css). */

/* ── Kostenübersicht ────────────────────────────────────────────────────── */
.tarif_summe {
  display: flex;
  flex-direction: column;
  padding: 6px 18px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  transition: opacity var(--dur-fast) var(--ease-std);
}
.tarif_summe[aria-busy="true"] { opacity: 0.55; }
.tarif_summe_row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  font-family: var(--font-sans);
  font-size: 0.84375rem;
  font-weight: var(--w-light);
  line-height: 1.4;
  color: var(--q-dark);
}
.tarif_summe_row b { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarif_summe_label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarif_summe_sub { font-size: 0.75rem; font-weight: var(--w-regular); color: var(--q-medium); }
.tarif_summe_row_zwischen { font-size: 0.8125rem; }
.tarif_summe_row_gesamt { border-bottom: 0; font-size: 1rem; }
.tarif_summe_row_gesamt b { color: var(--q-highlight-2); }
.tarif_summe_note {
  padding: 0 0 10px;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--w-regular);
  color: var(--q-medium);
}

/* ── Mit Quantiz Pay (T-298) ────────────────────────────────────────────── */
/* Hinweis mit Handlungsbedarf (Einschränkung, Sperre, Pay nicht erreichbar):
   derselbe Kasten, Warnfarbe wie .rec-error — kein eigener Baustein. */
.tarif_hinweis_warn {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-left: 3px solid var(--warning);
}
.tarif_hinweis_warn b { font-weight: var(--w-bold); }

/* Rechnungen: die Tabelle des Leistungsvergleichs, Beträge rechtsbündig. */
.tarif_belege td,
.tarif_belege tbody th { vertical-align: top; }
.tarif_belege .tarif_summe_sub { display: block; }
.tarif_belege_betrag { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarif_belege_aktionen { white-space: nowrap; text-align: right !important; }
.tarif_belege_aktionen .btn + .btn { margin-left: 6px; }
.tarif_beleg_status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-wide, 0.02em);
  background: var(--surface-soft);
  color: var(--q-medium);
}
.tarif_beleg_status_offen   { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning-text); }
.tarif_beleg_status_bezahlt { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success-text); }

/* SEPA-Mandat: Mandatstext, zwei Felder, Zustimmung. */
.tarif_sepa { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.tarif_sepa_zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--q-dark);
  cursor: pointer;
}
.tarif_sepa_zustimmung input { margin-top: 3px; flex-shrink: 0; }

/* ── Schmale Fenster ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tarif_plans  { grid-template-columns: minmax(0, 1fr); }
  .tarif_status { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tarif_status { padding: 18px 16px; }
  .tarif_addon,
  .tarif_service { grid-template-columns: minmax(0, 1fr) auto; }
  .tarif_addon_sum { grid-column: 1 / -1; text-align: left; }
  .tarif_service_controls { grid-column: 1 / -1; justify-self: start; }
  .tarif_belege thead { display: none; }
  .tarif_belege tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
  .tarif_belege td, .tarif_belege tbody th { padding: 0; border: 0; }
  .tarif_belege_aktionen { grid-column: 1 / -1; text-align: left !important; padding-top: 6px !important; }
}