/*
 * Tarifrechner HubSpot-Modul – gebündeltes CSS (Deploy-Kopie).
 * Quellen: ./css/*.css — nach Änderungen dort dieses Skript ausführen.
 */

/* ============ Design Tokens – TUTARIO CI (Corporate Identity Manual) ============
 * Breakpoint-Referenz fuer konsistente Responsive-Regeln:
 * - MOBILE_MAX: 767px (entspricht module.js BREAKPOINTS.MOBILE)
 * - MOBILE_LANDSCAPE: max-width 980px + landscape + max-height 560px
 *   (Querformat-Handy: Drawer, Compact-Layout, Popups — 12/08/09/10/11/19)
 * - TABLET_MIN: 768px
 * - COMPACT_MAX: 899px
 * - DESKTOP_MIN: 900px
 * - WRAP_WIDE_MIN: 992px
 * Stand Redesign-Port: Tokens 1:1 aus Agentur-Referenz (Welle 1).
 */
:root {
  /* Firmenfarben (RGB laut Manual) */
  --c-primary: #00424f; /* Dunkelblau 0, 66, 79 – u. a. CTA-Variante B, Überschriften */
  --c-primary-transparent: #01364085; /* Dunkelblau 0, 66, 79 – u. a. CTA-Variante B, Überschriften */
  --c-primary-deep: #156474; /* Tiefblau 21, 100, 116 – zweiter dunkler Akzent / Flächen */
  --c-primary-light: #00a9b8; /* Türkis 0, 169, 184 – CTA-Variante A */
  --c-accent: #b6c607; /* Limetten-Grün 182, 198, 7 */
  --c-accent-light: #b6c60746; /* Limetten-Grün 182, 198, 7 */
  --c-bg-light: #fafafa; /* Hintergrund laut Agentur-Design */

  /* Abgeleitete Farben */
  --c-primary-hover: #002d38; /* Dunkler für Hover auf Primär */
  --c-primary-light-hover: #008a96; /* Dunkleres Türkis für Hover */
  --c-accent-hover: #9ba006; /* Dunkleres Limetten für Hover */
  --c-accent-hover2: #b6c7094d; /* Dunkleres Limetten für Hover */

  /* Text & UI */
  --c-text: #00424f;
  --c-sub: #4a5568;
  --c-border: #d1d5db;
  --c-bg: #fff;
  --c-surface: #f8fbfc;
  --c-surface-strong: #f2f8fa;
  --c-soft: #eeeeee;
  --c-border-light: #e5e7eb;
  --c-info-bg: rgba(0, 169, 184, 0.08);
  --c-info-border: rgba(0, 169, 184, 0.45);
  --c-info-text: #0f5f69;
  --c-card-header: #E6F6F8;

  /* Schatten (bezogen auf --c-primary #00424f = rgb(0, 66, 79)) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 66, 79, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 66, 79, 0.1), 0 2px 4px -1px rgba(0, 66, 79, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 66, 79, 0.1), 0 4px 6px -2px rgba(0, 66, 79, 0.05);
  --shadow-xl: 0 16px 32px -16px rgba(0, 66, 79, 0.28);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 25px;

  /* Abstände (8-pt Raster) */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* Mobile Spotlight-Karussell (≤767px)
   * Peek groß genug, damit die nächste Karte als eigene Kachel erkennbar ist.
   * Nav sitzt unter dem Track (nicht über dem Inhalt) — siehe 08-ergebnisse. */
  --spotlight-carousel-gap: var(--space-3, 16px);
  --spotlight-carousel-peek: 36px;
  --spotlight-carousel-pad-inline: var(--space-2, 12px);
  --spotlight-carousel-slide: calc(100% - var(--spotlight-carousel-peek));
}
/* ============ Base/Layout ============
 * Welle 1: Agentur-Chrome (Wrap, Card-Wrapper, Hero, Progress).
 * Fachliche Zusatzblöcke (Upgrades etc.) bleiben erhalten.
 */
.tr-wrap {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: #ffffff;
  border: none;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  /* clip statt hidden: kein Scroll-Containment → position:sticky (Filterleiste) bleibt nutzbar */
  overflow-x: clip;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
}

/* Desktop: höhere max-width nur ab Breakpoints (min vermeidet Überlauf zur Viewport-Breite) */
@media (min-width: 992px) {
  .tr-wrap {
    max-width: 1100px;
  }
}

@media (min-width: 1200px) {
  .tr-wrap {
    max-width: 1150px;
  }
}

/* Sorgt dafür, dass innerhalb des Moduls alle Elemente inkl. Padding in die Breite der Karte eingerechnet werden */
.tr-wrap *,
.tr-wrap *::before,
.tr-wrap *::after {
  box-sizing: border-box;
}

.tr-hero {
  margin-bottom: 10px;
}

.tr-h2 {
  margin: 0 0 30px;
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0.2px;
  color: var(--c-primary);
}

.tr-trust-badges {
  list-style: none;
  margin: -8px 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tr-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 66, 79, 0.14);
  background: var(--c-surface);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.tr-trust-badge::before {
  content: '✓';
  color: var(--c-primary-light);
  font-weight: 800;
}

.tr-flow-tag {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background: var(--c-primary-light);
  flex-shrink: 0;
}

.tr-help--date-format {
  font-size: 12px;
  color: var(--c-sub);
  margin-top: 4px;
}

.tr-hidden {
  display: none;
}

.tr-disabled {
  opacity: 0.55;
}

/* Robust gegen Theme/CMS-Overrides: versteckte Elemente im Modul immer ausblenden */
.tr-wrap .tr-hidden,
.tr-wrap [hidden] {
  display: none !important;
}

/* Robust gegen Theme/CMS-Overrides: Legacy-Grid-CSS des Themes (z. B. ".row-fluid [class*='span']") */
.tr-wrap [class*="span"],
.tr-modal [class*="span"] {
  margin-left: 0 !important;
}

.tr-submit-row {
  margin-top: 15px;
}

#tr-submit-row,
#tr-step1-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tr-submit-row .tr-btn,
#tr-step1-row .tr-btn {
  width: 100%;
}

@media (min-width: 768px) {
  #tr-submit-row {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  #tr-step1-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  #tr-submit-row .tr-btn,
  #tr-step1-row .tr-btn {
    width: auto;
    min-width: 170px;
  }
}

.tr-reset-btn {
  margin-left: 12px;
}

.tr-step1-inline-progress {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-primary);
  background: #f4f8f9;
  border: 1px solid rgba(0, 66, 79, 0.14);
  border-radius: var(--radius-full);
  padding: 6px 10px;
  line-height: 1.1;
}

/* Agentur-Kartenrahmen um Formular / sichtbare Ergebnisse */
.tr-wrapper {
  display: block;
  padding: 60px 80px;
  background: #ffffff;
  border-radius: 30px;
  border: 1px solid var(--c-primary-transparent);
  box-shadow: var(--shadow-sm);
}

.tr-results-visible {
  display: block;
  padding: 60px 80px;
  background: #ffffff;
  border-radius: 30px;
  border: 1px solid var(--c-primary-transparent);
  box-shadow: var(--shadow-sm);
  margin-top: 60px;
}

.tr-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  padding: 24px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid #6f959c5e;
  box-shadow: var(--shadow-sm);
}

/* Kein Doppelrahmen: Grid innerhalb der Agentur-Karte entkernen */
.tr-wrapper > .tr-grid {
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* PROGRESS BAR */
.tr-form-progress-display {
  display: flex;
  position: relative;
  padding: 30px 0 40px;
}

.tr-form-progress-number {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 44px;
  background-color: #c5c5c5;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  z-index: 2;
}

.tr-form-progress-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 0;
  background-color: #e8e8e8;
  color: #C5C5C5;
  padding: 0 20px 0 30px;
  font-size: 16px;
  font-weight: 600;
  z-index: 1;
}

.tr-form-progress-number.is-active {
  background-color: var(--c-primary);
  color: #ffffff;
}

.tr-form-progress-number.is-complete {
  background-color: var(--c-primary);
  color: #ffffff;
}

.tr-form-progress-title.is-active {
  background: linear-gradient(to right, #b6c709a6, #b6c70957);
  color: var(--c-primary);
}

.tr-form-progress-title.is-complete {
  background: linear-gradient(to right, #b6c709a6, #b6c70957);
  color: var(--c-primary);
}

#tr-progress-title-1 {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}

#tr-progress-title-2 {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}

#tr-progress-title-3 {
  margin-left: -20px;
  margin-right: 0;
  width: calc(100% + 20px);
  border-radius: 0 20px 20px 0;
}

.tr-form-title-dot {
  display: block;
  position: relative;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background-color: #B6C709;
  border-radius: 20px;
}

.tr-form-title-wrapper {
  display: flex;
  position: relative;
  gap: 8px;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  /* Desktop: Punkt in den Karten-Innenrand ziehen (Padding ≥ 80px). Mobil: siehe 12-responsive. */
  margin-left: -17px;
}

.tr-form-title-wrapper > .tr-form-step-heading {
  margin-bottom: 0 !important;
}

@media (min-width: 900px) {
  .tr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tr-radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.tr-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--c-text);
}
.tr-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: var(--c-text);
  font-size: 14px;
  cursor: pointer;
}
.tr-radio-label input,
.tr-checkbox-label input {
  margin: 0;
}

/* Tarifkarte: enthaltene Bausteine / nicht verfügbar */
.tr-card-includes {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: var(--c-primary);
  font-weight: 500;
}
.tr-card-price-breakdown {
  margin: 6px 0 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--c-sub);
  list-style: disc;
}
.tr-card-price-breakdown-total {
  font-weight: 600;
  color: var(--c-primary);
  list-style: none;
  margin-top: 4px;
  padding-left: 0;
}
.tr-list-includes {
  font-size: 12px;
  color: var(--c-primary);
  margin-top: 2px;
}
.tr-list-price-breakdown {
  font-size: 11px;
  color: var(--c-sub);
  margin-top: 4px;
  line-height: 1.4;
}
.tr-overview-row {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-sub);
}
.tr-overview-row--upgrade {
  color: var(--c-text);
}
.tr-select--small {
  min-width: 110px;
  padding: 8px 10px;
  font-size: 13px;
}
.tr-provider-upgrades {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #f8fcfd;
  max-width: 460px;
}
.tr-provider-upgrades-title {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
}
.tr-provider-upgrades-subtitle {
  margin: 2px 0 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-sub);
}
.tr-provider-upgrade-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.tr-provider-upgrade-row--stack {
  display: block;
}
.tr-provider-upgrade-row:last-child {
  margin-bottom: 0;
}
.tr-provider-upgrades--busy {
  opacity: 0.65;
  pointer-events: none;
}
.tr-provider-upgrade-row .tr-checkbox-label {
  margin: 0;
  flex: 1 1 auto;
  font-size: 13px;
}
.tr-provider-upgrade-row .tr-select--small {
  margin-left: auto;
  width: 130px;
  min-width: 130px;
}
.tr-hint-static {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--c-sub);
}
/* ============ Formularfelder (Agentur-Design, Welle 2) ============ */

.tr-field {
  display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.tr-field.tr-field--full.radios {
  display: block;
  position: relative;
    border: 1px solid var(--c-primary-transparent);
    padding: 30px;
    border-radius: 20px;
    margin-top: 15px;
}

/* .tr-field kommt nach .tr-hidden in dieser Datei und würde display überschreiben.
   Modals (Abschluss) liegen außerhalb .tr-wrap — ohne diese Zeile bleiben z. B. Hinweise mit tr-hidden sichtbar. */
.tr-field.tr-hidden {
  display: none !important;
}

/* Technische Sync-Felder bleiben immer unsichtbar (werden nur für interne Datenlogik genutzt). */
.tr-field--technical-hidden {
  display: none !important;
}

.tr-field > span, .tr-field > label {
font-weight: 500;
    font-size: 14px;
    color: var(--c-primary);
    display: block;
    background-color: #fff;
    padding: 0px 5px;
    width: fit-content;
    position: absolute;
    left: 25px;
    top: -12px;
    z-index: 1;
}
#tr-usa-residence-followup > .tr-field > span {
  font-weight: 500;
    font-size: 14px;
    color: var(--c-primary);
    display: block;
    background-color: #fff;
    padding: 0px 5px;
    width: fit-content;
    position: relative;
    left: 0;
    top: -0;
    z-index: 1;
}

.tr-field select.tr-select,
.tr-field input.tr-input,
.tr-field textarea.tr-textarea, #tr-global-nationality-suche, select.tr-input.tr-input--dropdown {
box-sizing: border-box;
    border: 1px solid var(--c-primary);
    padding: 10px 20px !important;
    width: 100%;
    height: auto;
    min-height: 50px;
    border-radius: 30px;
    color: var(--c-primary);
}

.tr-input,
.tr-select,
.tr-textarea {
  padding: 12px 16px;
  border: 1px solid rgba(0, 66, 79, 0.18);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--c-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline: none;
}

.tr-input:focus,
.tr-select:focus,
.tr-textarea:focus {
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 2px rgba(0, 169, 184, 0.14);
  background: #fff;
}

.tr-input:hover,
.tr-select:hover,
.tr-textarea:hover {
  border-color: rgba(0, 66, 79, 0.28);
  background: #fff;
}

.tr-input,
.tr-select {
  min-height: 48px;
}

/* iOS zoomt Inputs <16px — bis MOBILE inkl. Querformat-Handy absichern */
@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .tr-input,
  .tr-select,
  .tr-textarea {
    font-size: 16px;
  }
}

.tr-input::placeholder {
  color: var(--c-sub);
  opacity: 0.6;
}

.tr-input:focus-visible,
.tr-select:focus-visible {
  border: 2px solid var(--c-accent) !important;
  outline-offset: 2px;
}

.tr-scope-badge-row {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tr-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary);
  background: rgba(0, 169, 184, 0.08);
  border: 1px solid rgba(0, 169, 184, 0.32);
}

.tr-scope-reset-btn {
  border: 0;
  background: transparent;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tr-scope-reset-btn:hover,
.tr-scope-reset-btn:focus-visible {
  color: var(--c-primary-hover);
}

/* Wizard controls: card choices, range control, chips, and suggestion dropdowns */
.tr-choice-cards,
.tr-radio-card-group {
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr;
}

.tr-choice-card,
.tr-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--c-primary-transparent);
  border-radius: var(--radius-lg);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.tr-choice-card:hover,
.tr-radio-card:hover {
  border-color: rgba(0, 66, 79, 0.3);
  background: rgba(0, 66, 79, 0.02);
}

.tr-choice-card:has(input:checked),
.tr-radio-card:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--c-accent-light);
  box-shadow: 0 0 0 2px rgba(0, 169, 184, 0.1);
}

.tr-choice-card input[type="radio"],
.tr-radio-card input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--c-primary);
}

.tr-choice-card-title,
.tr-radio-card-text {
  display: block;
  color: var(--c-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  
}

/* Leistungsumfang: Titel + Beschreibung sauber in der Karte untereinander */
.tr-choice-cards--scope .tr-choice-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'radio title'
    '. desc';
  align-items: start;
  column-gap: 10px;
  row-gap: 4px;
  padding: 20px;
}

.tr-choice-cards--scope .tr-choice-card input[type="radio"] {
  grid-area: radio;
  margin-top: 3px;
  width: 18px;
  height: 18px;
}

.tr-choice-cards--scope .tr-choice-card .tr-choice-card-title {
  grid-area: title;
}

.tr-choice-cards--scope .tr-choice-card > span:not(.tr-choice-card-title) {
  grid-area: desc;
  display: block;
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-sub);
}

/* Wohnsitzland + Hauptzielland: mobil untereinander, desktop nebeneinander */
.tr-country-top-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .tr-country-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.tr-sb-control {
  display: grid;
  gap: 10px;
  padding: 40px;
  border: 1px solid var(--c-primary-transparent);
  border-radius: var(--radius-xl);
  background: transparent;
}

.tr-sb-control-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
}

.tr-sb-control-value {
    color: var(--c-primary);
    font-size: 24px;
}

.tr-sb-range {
  width: 100%;
  margin: 15px 0px;
  --tr-sb-fill: 0%;
  accent-color: var(--c-accent);
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--c-soft);
  outline: none;
}

.tr-sb-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    to right,
    var(--c-accent) 0%,
    var(--c-accent) var(--tr-sb-fill),
    var(--c-soft) var(--tr-sb-fill),
    var(--c-soft) 100%
  );
}

.tr-sb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border-radius: 50%;
  border: none;
  background: var(--c-accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.tr-sb-range::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--c-soft);
}

.tr-sb-range::-moz-range-progress {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--c-soft);
}

.tr-sb-range::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--c-accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.tr-sb-quicksteps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
      margin-top: 10px;
}

.tr-sb-chip {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 66, 79, 0.22);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
}

.tr-sb-chip:hover,
.tr-sb-chip:focus-visible {
  border-color: var(--c-primary-light);
  outline: none;
}

.tr-sb-chip.is-active {
  border-color: var(--c-primary-light);
  background: var(--c-accent-light);
}

.tr-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tr-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 8px 6px 10px;
  border: 1px solid rgba(0, 66, 79, 0.2);
  border-radius: var(--radius-full);
  background: var(--c-surface);
}

.tr-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tr-upgrade-impact-hint {
  margin: 0;
  font-size: 14px;
}

.tr-chip-label {
  font-size: 13px;
  line-height: 1.2;
  color: var(--c-primary);
  font-weight: 600;
}

.tr-chip-remove {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 66, 79, 0.1);
  color: var(--c-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tr-chip-remove:hover,
.tr-chip-remove:focus-visible {
  background: rgba(0, 169, 184, 0.2);
  outline: none;
}

.tr-zielland-suggestions {
margin-top: 57px;
    border: 1px solid rgba(0, 66, 79, 0.16);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-sm);
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 2;
    width: 100%;
    border-radius: 20px;
    border: 2px solid var(--c-accent);
    overflow: auto;
      scrollbar-color: var(--c-accent-hover) #e8e8e8;
  scrollbar-width: thin;
}

.tr-zielland-suggestion-item {
  border: none;
  background: transparent;
  text-align: left;
  padding: 9px 12px;
  font: inherit;
  color: var(--c-text);
  cursor: pointer;
}

.tr-zielland-suggestion-item + .tr-zielland-suggestion-item {
  border-top: 1px solid rgba(0, 66, 79, 0.08);
}

.tr-zielland-suggestion-item:hover,
.tr-zielland-suggestion-item.is-active {
  background: var(--c-accent-hover2);
  color: var(--c-primary);
}

@media (min-width: 768px) {
  .tr-choice-cards--scope {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tr-choice-cards--binary,
  .tr-radio-card-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Angebotsformular: Schritt 1 mit Zwischenüberschriften und Gruppe „Deckung & Leistung“ */
#tr-form-basis .tr-form-step-heading, .tr-result-zone .tr-form-step-heading, #tr-results-container .tr-form-step-heading {
  grid-column: 1 / -1;
  margin: 0 0 6px 0;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.35;
}

#tr-form-basis .tr-form-section-heading {
  grid-column: 1 / -1;
  margin: 18px 0 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

#tr-form-basis .tr-form-section-heading:first-of-type {
  margin-top: 0;
}

#tr-form-basis .tr-form-section-heading--subflow {
  margin-top: 10px;
}

#tr-form-basis .tr-form-section-deckung {
    grid-column: 1 / -1;
    margin-top: 20px;
    padding: 0px;
    border: none;
    background: transparent;
    box-shadow: none;
}

#tr-form-basis .tr-form-section-deckung .tr-form-section-heading {
  margin: 0 0 12px 0;
}

#tr-form-basis .tr-grid--nested {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  padding: 20px 0px 0px;
  margin: 0 0 40px 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.tr-form-first-outer-grid {
    display: grid;
    position: relative;
    width: 100%;
    flex-direction: column;
    height: auto;
    margin: 40px 0px 0px;
    grid-template-rows: auto auto auto;
        grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.tr-form-first-grid {
    display: grid;
    position: relative;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* Pflichtfeldangabe */
.tr-form-pflichtfeldwrapper {
 display: flex;
    position: relative;
    width: 100%;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
}
span.tr-form-span-text {
  font-size: 14px;
    color: var(--c-primary);
    padding: 0px;
    margin: 0px;
    margin-left: 0px !important;
    font-weight: 400;
}
span.tr-form-span-red {
      color: #A30303;
    display: inline-block !important;
    width: auto !important;
}
/* Pflichtfeldangabe */

/* Full-width helpers for 2-col agency grid */
.tr-form-first-outer-grid > .tr-field--full,
.tr-form-first-outer-grid > .tr-form-section-coverage,
.tr-form-first-outer-grid > .tr-form-section-heading,
.tr-form-first-outer-grid > #tr-usa-residence-followup,
.tr-form-first-outer-grid > #tr-global-nationality-wrapper {
  grid-column: 1 / -1;
}

.tr-form-section-coverage {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .tr-form-section-coverage {
    grid-template-columns: 1fr 1fr;
  }
  .tr-form-section-coverage > .tr-field--full,
  .tr-form-section-coverage > .tr-form-section-heading,
  .tr-form-section-coverage > .tr-section-help {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  /* Floating-Labels (top: -12px) brauchen mehr Grid-Gap, sonst kleben Felder optisch zusammen */
  .tr-form-first-outer-grid,
  .tr-form-first-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 24px;
  }

  .tr-form-section-coverage {
    gap: 32px;
  }

  div#tr-usa-residence-followup {
    gap: 32px;
  }
}

/* Agency extras kept for nested wrappers */
div#tr-zielprofil-wrapper { margin-top: 20px; }
#tr-zielprofil-wrapper > label {
  font-weight: 500; font-size: 14px; color: var(--c-primary); display: block;
  background-color: #fff; padding: 0; width: fit-content; position: relative; left: 0; top: 0;
}
#tr-usa-residence-followup > label {
  font-weight: 500; font-size: 14px; color: var(--c-primary); display: block;
  background-color: #fff; padding: 0; width: fit-content; position: relative; left: 0; top: 0;
}
div#tr-usa-residence-followup { display: flex; flex-direction: column; gap: 20px; }

.tr-section-help {
  grid-column: 1 / -1;
  margin: -8px 0 0 0;
  font-size: 13px;
  color: var(--c-sub);
  line-height: 1.45;
}
/* ============ Buttons ============ */
.tr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  font-family: inherit;
  min-height: 48px;
  white-space: nowrap;
  box-shadow: none;
}

/* Native :disabled und Klasse .tr-btn--disabled (gleiche Optik) */
.tr-btn.tr-btn--disabled,
.tr-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.tr-btn--primary {
  background: var(--c-primary);
  color: white;
  border: 1px solid var(--c-primary);
}

.tr-btn--primary:hover:not(:disabled) {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  box-shadow: 0 2px 8px rgba(0, 66, 79, 0.16);
}

.tr-btn--primary:active:not(:disabled) {
  box-shadow: none;
}

.tr-btn-secondary {
  background: #fff;
  color: var(--c-primary);
  border: 1px solid rgba(0, 66, 79, 0.28);
}

.tr-btn-secondary:hover:not(:disabled) {
  background: rgba(0, 66, 79, 0.05);
  border-color: rgba(0, 66, 79, 0.42);
  color: var(--c-primary);
}

.tr-btn--outline {
    background: #00424f1c;
    color: var(--c-primary);
    border: 1px solid #00424f1c;
}

.tr-btn--outline:hover:not(:disabled) {
  background: var(--c-accent-hover);
  color: #fff;
  border-color: var(--c-accent-hover);
}

.tr-btn:focus-visible {
  outline: 2px solid rgba(0, 169, 184, 0.55);
  outline-offset: 2px;
}
/* ============ Fehleranzeige ============ */
.tr-field-error input,
.tr-field-error select,
.tr-field-error textarea {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.tr-field-error-msg {
  color: #dc2626;
  font-size: 13px;
  margin-top: 4px;
  display: none;
  align-items: center;
  gap: 4px;
  height: auto;
  will-change: opacity;
  transition: opacity 0.2s ease;
  margin-bottom: 0;
  margin-left: 20px;
}

.tr-field-error-msg:not(:empty) {
  display: flex;
}

.tr-field-error-msg span:first-child {
  font-size: 16px;
}

/* Styles für fehlende Felder (Hinweise für weitere Tarife) */
.tr-field-missing input,
.tr-field-missing select,
.tr-field-missing textarea {
  border-color: var(--c-primary-light) !important;
  border-width: 2px;
  background-color: var(--c-info-bg);
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.12) !important;
}

.tr-field-missing input:focus,
.tr-field-missing select:focus,
.tr-field-missing textarea:focus {
  border-color: var(--c-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.2) !important;
}

.tr-field-hint {
  color: var(--c-info-text);
  font-size: 13px;
  margin-top: 4px;
  display: none;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  will-change: opacity;
  transition: opacity 0.2s ease;
  padding: 8px 12px;
  background: var(--c-info-bg);
  border: 1px solid var(--c-info-border);
  border-radius: var(--radius-sm);
}

/* Statische Hinweise bleiben sichtbar (Agentur: display:none auf .tr-field-hint sonst) */
.tr-field-hint.tr-hint-static {
  display: block;
  color: var(--c-sub);
  background: transparent;
  border: none;
  padding: 0;
}

.tr-field-hint span:first-child {
  font-size: 16px;
}

.tr-error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-left: 4px solid #dc2626;
  color: #991b1b;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  transition: box-shadow 0.3s ease;
}

.tr-partial-success {
  background: rgba(16, 185, 129, 0.09);
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-left: 4px solid #10b981;
  color: #065f46;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}

/* Fehlermeldung: kurze Hervorhebung beim Erscheinen (Shake) */
@keyframes trErrorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.tr-error.tr-error-just-shown {
  animation: trErrorShake 0.45s ease;
}

/* Standard-CSS für Barrierefreiheit; HubSpot kann die Media-Query rot markieren – bitte ignorieren. */
@media (prefers-reduced-motion: reduce) {
  .tr-error.tr-error-just-shown {
    animation: none;
  }
}

/* ============ Kontaktblock (immer sichtbar für Kunden) ============ */
.tr-contact {
  padding: 100px 80px;
  background: transparent;
  border: none;
  margin: 60px auto 40px;
}

.tr-contact-contact-grid {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 60px;
}

.tr-contact-heading {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--c-primary);
}

.tr-contact-intro,
.tr-contact-label,
.tr-contact-value {
  font-family: Onest, system-ui, sans-serif;
  margin: 0 0 20px 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--c-sub);
  text-decoration: none;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

span.tr-contact-label {
  margin-bottom: 0 !important;
}

a.tr-contact-value {
  text-decoration: underline;
}

.tr-contact-grid {
  display: grid;
  gap: 16px 24px;
  grid-template-columns: 1fr;
}

.tr-contact-item {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tr-contact-value:hover {
  color: var(--c-primary-light);
}

.tr-contact-value:focus-visible {
  outline: 2px solid rgba(0, 169, 184, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

.tr-contact-address {
  font-style: normal;
  line-height: 1.5;
  color: var(--c-primary);
  text-decoration: none;
}

.tr-contact-address:hover {
  color: var(--c-primary);
}

@media (max-width: 767px) {
  .tr-contact {
    padding: 40px 16px;
    margin: 32px auto 24px;
  }

  .tr-contact-contact-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
  }

  .tr-contact-heading {
    font-size: 22px;
  }

  .tr-contact-intro,
  .tr-contact-label,
  .tr-contact-value {
    font-size: 16px;
  }
}
/* ============ Select-Dropdowns ============ */
.tr-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300424f' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  touch-action: manipulation;
  position: relative;
}

/* Text-Inputs mit Such-Dropdown (z. B. Länderauswahl), die optisch wie ein Select wirken sollen */
.tr-field input.tr-input.tr-input--dropdown,
#tr-weitere-ziellaender-eingabe,
#tr-wohnsitzland-suche,
#tr-zielland-suche,
#tr-global-nationality-suche {
  background-image: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15.5' cy='15.5' r='15.5' fill='%2300424F'/%3E%3Cpath d='M11 14.2178L15.1089 18.3267L19.2178 14.2178' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 26px;
  padding-right: 46px !important;
}

.tr-field input.tr-input.tr-input--dropdown:focus,
#tr-weitere-ziellaender-eingabe:focus,
#tr-wohnsitzland-suche:focus,
#tr-zielland-suche:focus,
#tr-global-nationality-suche:focus {
  background-image: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15.5' cy='15.5' r='15.5' fill='%23B6C709' fill-opacity='0.8'/%3E%3Cpath d='M11 14.2178L15.1089 18.3267L19.2178 14.2178' stroke='%2300424F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.tr-select.tr-select--dropdown-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15.5' cy='15.5' r='15.5' fill='%2300424F'/%3E%3Cpath d='M11 14.2178L15.1089 18.3267L19.2178 14.2178' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 26px;
  padding-right: 46px !important;
}

.tr-select.tr-select--dropdown-icon:focus {
  background-image: url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15.5' cy='15.5' r='15.5' fill='%23B6C709' fill-opacity='0.8'/%3E%3Cpath d='M11 14.2178L15.1089 18.3267L19.2178 14.2178' stroke='%2300424F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.tr-select.tr-select--dropdown-icon option {
  color: var(--c-text);
  background-color: #fff;
  padding: 9px 12px;
}

.tr-select.tr-select--dropdown-icon option:checked,
.tr-select.tr-select--dropdown-icon option:hover {
  color: var(--c-primary);
  background-color: var(--c-accent-hover2);
}

/* font-size 16px auf schmalen Viewports: bereits in 03-form-fields (.tr-input, .tr-select) */

/* ============ Loader ============ */
.tr-loader {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  margin: 32px 0;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  position: fixed;
  top: calc(50% - 150px);
  left: calc(50% - 200px);
  z-index: 99;
  width: min(400px, calc(100vw - 32px));
  height: 300px;
}

.tr-loader-anim {
  width: 50px;
  height: 50px;
  animation: rotate 2s linear infinite;
}

.tr-loader-anim circle {
  stroke: var(--c-primary-light);
  fill: none;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.tr-loader span {
  color: var(--c-sub);
  font-size: 14px;
}

.tr-loader-hint {
  color: var(--c-sub);
  font-size: 13px;
  opacity: 0.9;
}

/* Loader: dezente Puls-Animation für den Text (wirkt weniger statisch) */
@keyframes trLoaderPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.tr-loader span:first-of-type {
  animation: trLoaderPulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tr-loader span:first-of-type {
    animation: none;
  }
}

@media (max-width: 767px) {
  .tr-loader {
    left: 16px;
    right: 16px;
    width: auto;
    top: calc(50% - 150px);
  }
}

/* Label mit Info-Icon (z. B. Wohnsitzland) */
.tr-label-with-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tr-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--c-primary-light);
  background: var(--c-bg);
  color: var(--c-primary-light);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Größere Tip-/Klickfläche ohne optisch größeren Kreis */
.tr-info-icon::before {
  content: "";
  position: absolute;
  inset: -13px;
}

.tr-info-icon:hover {
  background: var(--c-primary-light);
  color: white;
}

.tr-info-icon:focus-visible {
  outline: 2px solid rgba(0, 169, 184, 0.55);
  outline-offset: 2px;
  transform: scale(1.04);
}

.tr-info-popup--field {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 32px));
  min-width: 0;
}

.tr-info-popup--field .tr-info-popup-title {
  font-size: 18px;
}

.tr-info-popup--field .tr-info-popup-body {
  padding: 20px 22px 22px;
}

.tr-info-popup--field .tr-info-popup-body p {
  margin: 0;
}

.tr-field-info-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 22px 22px;
  background: var(--c-bg);
}

.tr-field-info-popup-actions .tr-btn {
  flex: 1 1 140px;
  min-height: 44px;
}

@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .tr-field-info-popup-actions {
    padding: 0 16px 18px;
    flex-direction: column;
  }

  .tr-field-info-popup-actions .tr-btn {
    flex: 1 1 auto;
    width: 100%;
  }
}
/* Result-zone head row / filter title (Agentur) */
.tr-form-title-wrapper.filter {
    margin-left: -17px !important;
    margin-bottom: 40px !important;
    margin-top: 60px !important;
}

.tr-result-zone-b-head-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    margin-top: 60px;
    margin-bottom: 20px;
}

.tr-result-zone-b-head-row .tr-form-title-wrapper.filter {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.tr-result-zone-b-head-row .tr-result-sort-bar {
    justify-content: flex-end;
}

@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
    .tr-result-zone-b-head-row {
        grid-template-columns: 1fr;
    }
}


/* ============ Ergebnisse ============ */

/* Einblend-Animation beim Erscheinen der Ergebnisse */
#tr-results {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#tr-results.tr-results-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  #tr-results {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Stagger-Animation: Ergebnis-Blöcke erscheinen nacheinander */
@keyframes trFadeInUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tr-results-container.tr-results-animate > * {
  opacity: 0;
  animation: trFadeInUp 0.45s ease forwards;
}

.tr-results-container.tr-results-animate > *:nth-child(1) { animation-delay: 0.03s; }
.tr-results-container.tr-results-animate > *:nth-child(2) { animation-delay: 0.08s; }
.tr-results-container.tr-results-animate > *:nth-child(3) { animation-delay: 0.13s; }
.tr-results-container.tr-results-animate > *:nth-child(4) { animation-delay: 0.18s; }
.tr-results-container.tr-results-animate > *:nth-child(5) { animation-delay: 0.23s; }
.tr-results-container.tr-results-animate > *:nth-child(6) { animation-delay: 0.28s; }
.tr-results-container.tr-results-animate > *:nth-child(7) { animation-delay: 0.33s; }
.tr-results-container.tr-results-animate > *:nth-child(8) { animation-delay: 0.38s; }
.tr-results-container.tr-results-animate > *:nth-child(9) { animation-delay: 0.43s; }
.tr-results-container.tr-results-animate > *:nth-child(10) { animation-delay: 0.48s; }
.tr-results-container.tr-results-animate > *:nth-child(n+11) { animation-delay: 0.53s; }

@media (prefers-reduced-motion: reduce) {
  .tr-results-container.tr-results-animate > * {
    opacity: 1;
    animation: none;
  }
}

/* Erfolgsmoment: "X Tarife gefunden" unter der Überschrift */
.tr-results-count, .tr-results-filter-summary-note {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--c-primary);
}

.tr-results-header {
  margin-bottom: 40px;
  background: transparent;
  box-shadow: none;
}

.tr-results-title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--c-primary);
  letter-spacing: 0.2px;
}

/* Ein Versicherer = ein Panel (Header + Tarife), klar vom nächsten Anbieter getrennt */
.tr-group {
  margin-bottom: 40px;
  border: 1px solid rgba(0, 66, 79, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
}
.tr-group.tr-rest-flat {
  margin-bottom: 40px;
  overflow: visible;
  border: none !important;
}

/* Abstand zwischen Zusatz / Angebot und Haupttarif-Block (inkl. Sortierung & Fokus-Karten) */
.tr-zusatz-section + .tr-haupttarife {
  margin-top: clamp(44px, 8vw, 56px);
}

.tr-group-title-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border-light);
  position: relative;
  width: 100%;
}

.tr-group-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--c-primary);
  flex: 1;
  min-width: 0;
  padding-right: 40px; /* Platz für Info-Button */
}

.tr-info-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--c-primary-light);
  background: var(--c-bg);
  color: var(--c-primary-light);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tr-info-btn:hover {
  background: var(--c-primary-light);
  color: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 169, 184, 0.3);
}

.tr-info-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.tr-info-btn span {
  display: block;
  font-style: italic;
  font-weight: 700;
}

/* Versicherer-Gruppe: Header-Wrapper (Titel + optional Doc-Links) */
.tr-group-header {
  margin-bottom: 0;
  width: 100%;
  padding: 18px 22px 18px;
  background: #fbfcfd;
  border-bottom: 1px solid var(--c-border-light);
}

/* Kartenansicht: gleicher Außenrahmen wie Listen-Panel, Innenabstand zum Rand */
.tr-group > .tr-cards-2 {
  padding: 10px 14px 16px;
}

@media (min-width: 768px) {
  .tr-group > .tr-cards-2 {
    padding: 12px 18px 18px;
  }
}

.tr-doc-link {
  font-size: 14px;
  color: var(--c-primary-light);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tr-doc-link:hover {
  color: var(--c-primary);
  border: none !important;
}

.tr-section-title {
  margin: 0 0 12px;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--c-primary);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-bg-light);
}

.tr-section-subtitle {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-sub);
}

.tr-external-provider-section {
  margin-top: 28px;
}

.tr-external-provider-card {
  border-style: dashed;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 60px !important;
  margin-top: 20px;
}

@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .tr-external-provider-card {
    grid-template-columns: 1fr;
    gap: 20px !important;
  }
}

.tr-external-provider-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tr-external-provider-hint {
  margin: 0;
  color: var(--c-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.tr-external-provider-subhint {
  margin: 0;
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.5;
}

.tr-cards-2 {
  display: grid;
  gap: var(--space-4, 24px);
  grid-template-columns: 1fr;
      margin: 20px 0px 60px;
}

@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  /* Kartenansicht: klarer Abstand (row-gap ok auch bei 2 Spalten im Landscape) */
  .tr-cards-2 {
    gap: 48px;
  }
}

@media (min-width: 768px) {
  .tr-cards-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Tarif-Karte (Kartenansicht): Layout, Leistungsliste, Aktionszeilen */
.tr-card {
  background: var(--c-bg-light);
  border: 1px solid rgba(0, 66, 79, 0.13);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: none;
  position: relative;
  overflow: visible;
  transition: .12s ease;
}

.tr-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tr-card:hover {
  border-color: rgba(0, 169, 184, 0.5);
  box-shadow: 0 4px 14px -12px rgba(0, 66, 79, 0.3);
}

.tr-card:hover::before {
  opacity: 1;
}

.tr-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.tr-card-header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.tr-tier {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.25;
}

.tr-provider-logo-slot {
  width: 96px;
  height: 54px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 66, 79, 0.18);
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  overflow: hidden;
}

.tr-provider-logo-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tr-provider-logo-fallback {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-sub);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tr-spotlight-role {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.tr-spotlight-role--winner {
  border: 1px solid rgba(0, 169, 184, 0.42);
  color: #0a4f58;
  background: rgba(0, 169, 184, 0.12);
}

.tr-spotlight-role--neutral {
  border: 1px solid rgba(0, 66, 79, 0.24);
  color: var(--c-primary);
  background: rgba(0, 66, 79, 0.06);
}

.tr-versicherer {
  font-size: 12px;
  color: var(--c-sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-top: -2px;
}

.tr-price, .tr-list-price {
  font-size: 30px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.tr-price-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 66, 79, 0.15);
  background: #f7fbfc;
}

.tr-per {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-sub);
  margin-left: 6px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tr-rating-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 66, 79, 0.2);
  background: rgba(0, 66, 79, 0.06);
  color: var(--c-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.tr-rating-chip--na {
  color: var(--c-sub);
  border-color: rgba(0, 66, 79, 0.14);
  background: rgba(0, 66, 79, 0.03);
}

.tr-rating-chip--inline {
  margin-top: 2px;
}

.tr-tarif-note-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
  padding: 9px 12px 10px;
  min-width: 88px;
  max-width: 100%;
  border-radius: 12px;
  background: linear-gradient(180deg, #f5f7f8 0%, #e7ecef 100%);
  border: 1px solid rgba(0, 66, 79, 0.16);
  box-shadow: 0 2px 6px rgba(0, 66, 79, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: var(--c-primary);
}

.tr-tarif-note-badge-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c6f76;
  line-height: 1.2;
}

.tr-tarif-note-badge-stars {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #c9a227;
}

.tr-tarif-note-badge-grade {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
  text-transform: capitalize;
}

.tr-tarif-note-badge-grade--na {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-sub);
  text-transform: none;
}

.tr-tarif-note-badge--sehr-gut {
  border-left: 3px solid #c9a227;
}

.tr-tarif-note-badge--gut {
  border-left: 3px solid #2a9d8f;
}

.tr-tarif-note-badge--befriedigend {
  border-left: 3px solid #6c8ebf;
}

.tr-tarif-note-badge--ausreichend {
  border-left: 3px solid #b08968;
}

.tr-tarif-note-badge--default {
  border-left: 3px solid rgba(0, 66, 79, 0.35);
}

.tr-tarif-note-badge--na {
  border-left: 3px solid rgba(122, 139, 146, 0.55);
}

.tr-tarif-note-badge--compact {
  margin-top: 4px;
  padding: 6px 9px 7px;
  min-width: 72px;
  border-radius: 10px;
  gap: 3px;
}

.tr-tarif-note-badge--compact .tr-tarif-note-badge-label {
  font-size: 8px;
}

.tr-tarif-note-badge--compact .tr-tarif-note-badge-stars {
  font-size: 11px;
}

.tr-tarif-note-badge--compact .tr-tarif-note-badge-grade {
  font-size: 11px;
}

.tr-card .tr-tarif-note-badge {
  margin: 6px 0 8px;
}

.tr-brief {
  margin-top: 2px;
      padding: 0px 20px;
}

.tr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tr-list li {
  font-size: 13px;
  color: var(--c-sub);
  padding-left: 17px;
  position: relative;
  line-height: 1.45;
}

.tr-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--c-primary-light);
  font-weight: bold;
}

/* Tarifkarten: Aktionen untereinander (volle Kartenbreite) — verhindert schmale Checkbox-Spalte + „quadratischen“ Neben-Button */
.tr-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 8px;
    gap: 0;
    box-sizing: border-box;
    padding: 0px 20px;
}
.tr-card.tr-external-provider-card .tr-actions {
    gap: 10px !important;
    padding: 0px !important;
}


.tr-actions > .tr-btn {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
}

.tr-actions-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.tr-actions-buttons-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.tr-actions-buttons-top .tr-btn {
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
}

.tr-actions-buttons-top .tr-btn--primary {
  box-shadow: 0 2px 8px rgba(0, 66, 79, 0.15);
}

.tr-actions-buttons-top .tr-btn-secondary,
.tr-actions-secondary-row .tr-btn-secondary {
  border-color: rgba(0, 66, 79, 0.22);
  background: #fff;
  color: var(--c-primary);
}

.tr-actions-buttons-top .tr-btn-secondary:hover,
.tr-actions-buttons-top .tr-btn-secondary:focus-visible,
.tr-actions-secondary-row .tr-btn-secondary:hover,
.tr-actions-secondary-row .tr-btn-secondary:focus-visible {
  background: #f4f8f9;
  color: var(--c-primary);
  border-color: rgba(0, 169, 184, 0.42);
  transform: none;
}

.tr-actions-btn-full {
  width: 100%;
  box-sizing: border-box;
}

/* Spotlight: Sekundär-Aktionen in einer Zeile (Vormerken | Beratung) */
.tr-actions-secondary-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.tr-actions-secondary-row .tr-angebot-checkbox-wrapper {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
  box-sizing: border-box;
}

.tr-actions-secondary-row .tr-btn {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
}

.tr-actions-buttons-top .tr-angebot-checkbox-wrapper {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 0;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.tr-actions-buttons-top .tr-angebot-checkbox {
  margin-top: 2px;
}

.tr-actions-buttons-top .tr-angebot-checkbox-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 600px) {
  .tr-actions-buttons-top .tr-btn {
    padding: 10px 14px;
  }
}

/* ========= Check 24/7 Phase 4: Sortier-Leiste & Fokus-Karten ========= */

.tr-haupttarife {
  margin-bottom: 8px;
}

.tr-result-sort-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    justify-content: flex-end;
}

.tr-result-sort-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
  flex-shrink: 0;
}

.tr-result-sort-select {
  min-height: 40px;
  padding: 8px 34px 8px 14px;
  border: 1px solid rgba(0, 66, 79, 0.3);
  border-radius: var(--radius-sm);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300424f' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--c-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  max-width: 120px;
}

.tr-result-sort-select:hover {
  border-color: var(--c-primary-light);
}

.tr-result-sort-select:focus-visible {
  outline: none;
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.14);
}
select#tr-result-sort-select {
    min-width: 90px;
}

.tr-spotlight {
  margin-bottom: 22px;
}

/* Unsere Empfehlungen: klare Bereichsüberschrift (Punkt + Titel), ohne Zusatztexte */
.tr-spotlight-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--c-primary);
  padding-bottom: 0;
  border-bottom: none;
  text-transform: none;
  letter-spacing: normal;
  /* Desktop: Punkt in den Karten-Innenrand ziehen. Mobil: siehe 12-responsive. */
  margin-left: -17px;
  min-width: 0;
  max-width: 100%;
}

.tr-spotlight-heading::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--c-accent);
}

.tr-spotlight-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 0;
}

@media (min-width: 768px) {
  .tr-spotlight-row {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
  }
}

.tr-spotlight-item {
  min-width: 0;
}

/* Spotlight-Pager: Desktop aus; Mobile nur im aktiven Karussell */
.tr-spotlight-nav-bar,
.tr-spotlight-dots,
.tr-spotlight-swipe-hint {
  display: none;
}

/* Legacy-Pfeil-UI (falls Alt-DOM nach Publish): nie anzeigen */
.tr-spotlight-nav,
.tr-spotlight-inline-nav,
.tr-spotlight-nav-status,
.tr-spotlight-nav-icon {
  display: none !important;
}

/* Fokus-Karten: dezenter Akzent, keine „zweite Gruppe“-Optik wie .tr-group */
.tr-spotlight-item .tr-card {
  height: 100%;
  padding: 0;
  border-color: rgba(0, 66, 79, 0.12);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tr-spotlight-item .tr-card:hover {
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}

.tr-spotlight-item .tr-card-header {
  align-items: center;
margin: 0;
    padding: 20px;
  background: var(--c-card-header);
  border-bottom: 1px solid rgba(0, 66, 79, 0.08);
}

.tr-spotlight-item .tr-provider-logo-slot {
  border: none;
  background: transparent;
}

.tr-spotlight-item .tr-tier {
  font-size: 18px;
}

.tr-spotlight-item .tr-price {
    font-size: 30px;
    font-weight: 700;
}

.tr-spotlight-item .tr-price-block {
  padding: 30px 20px;
  border: none;
  background: transparent;
}

.tr-card-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 10px 20px;
    background-color: #fff;
    min-width: 0;
}

.tr-card-meta-row .tr-versicherer,
.tr-card-meta-row .tr-versicherer--with-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-sub);
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.tr-card-meta-row .versicherertitle {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: var(--c-sub);
}

.tr-card-meta-row .tr-versicherer-value-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    flex-wrap: wrap;
}

.tr-card-meta-row .tr-versicherer-value {
    font-weight: 700;
    font-size: 14px;
    color: var(--c-primary);
    line-height: 1.35;
}

span.versicherertitle {
    font-weight: 500;
}

.tr-tarif-note-badge--pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    padding: 10px 15px;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    background: rgba(182, 199, 9, 0.28);
    border: 1px solid rgba(182, 199, 9, 0.6);
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    overflow: visible;
}

.tr-tarif-note-badge--pill .tr-tarif-note-badge-label {
  font-size: 11px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  color: var(--c-primary);
  font-weight: 500;
}

.tr-tarif-note-badge--pill .tr-tarif-note-badge-score {
  font-size: 18px;
}

.tr-tarif-note-badge--pill .tr-tarif-note-badge-score-scale {
  font-size: 11px;
  margin-left: 3px;
}

.tr-tarif-note-badge--pill .tr-tarif-note-badge-grade {
  font-size: 16px;
}

.tr-tarif-note-badge--pill .tr-tarif-note-badge-hint {
  margin-top: 2px;
}

.tr-spotlight-item .tr-features-summary {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.tr-spotlight-item .tr-features-summary li {
  padding-left: 0;
      margin-top: 0 !important;
          padding: 0 !important;
          border-top: none !important;
}

.tr-spotlight-item .tr-features-summary li::before {
  content: none;
}

.tr-spotlight-item .tr-tarif-bottombar {
margin-top: 4px;
    border: none;
    border-radius: 0;
    padding: 10px 20px;
    background: transparent;
        display: flex;
    flex-direction: column;
    align-items: center;
}

.tr-spotlight-item .tr-tarif-bottombar-toggle {
  width: auto;
  min-height: 0;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--c-primary);
  text-decoration: none;
  text-underline-offset: 2px;
}

.tr-spotlight-item .tr-tarif-bottombar-toggle:hover,
.tr-spotlight-item .tr-tarif-bottombar-toggle:focus-visible {
  border: none;
  box-shadow: none;
  color: var(--c-primary-hover);
  outline: none;
}

/* Mobile Spotlight: horizontaler Swipe-Karussell + Zone-A-Hervorhebung
   (Hochformat ≤767 ODER Querformat-Handy wie Filter-Drawer) */
@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .tr-result-zone--a {
    margin-bottom: var(--space-4, 24px);
    padding: var(--space-3, 16px) var(--spotlight-carousel-pad-inline);
    border-radius: var(--radius-lg);
    background: var(--c-surface, #f8fbfc);
    border: 1px solid rgba(0, 66, 79, 0.1);
    box-shadow: var(--shadow-sm);
  }

  .tr-result-zone--a + .tr-result-zone--b {
    padding-top: var(--space-2, 12px);
    border-top: 2px solid var(--c-bg-light, #eee);
  }

  .tr-spotlight {
    margin-bottom: 0;
  }

  /* Shell: Karten-Track; Swipe horizontal, Seite vertikal (Achsen-Sperre in JS) */
  .tr-spotlight-carousel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .tr-spotlight-carousel.is-active {
    gap: 0;
    padding-inline: 0;
  }

  /* Pager: Dots + kurzer Wisch-Hinweis (keine Text-überdeckenden Pfeile) */
  .tr-spotlight-nav-bar {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    margin: 0 0 10px;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .tr-spotlight-carousel.is-active .tr-spotlight-nav-bar {
    display: flex;
  }

  .tr-spotlight-carousel.is-active .tr-spotlight-nav-bar[hidden] {
    display: none !important;
  }

  .tr-spotlight-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 20px;
  }

  .tr-spotlight-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 66, 79, 0.22);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .tr-spotlight-dot.is-active {
    width: 18px;
    border-radius: 999px;
    background: var(--c-primary, #00424f);
  }

  .tr-spotlight-dot:focus-visible {
    outline: 2px solid var(--c-accent, #b6c709);
    outline-offset: 2px;
  }

  .tr-spotlight-swipe-hint {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    color: rgba(0, 66, 79, 0.62);
    text-align: center;
  }

  .tr-spotlight-swipe-hint[hidden] {
    display: none !important;
  }

  .tr-spotlight-row.tr-spotlight-row--carousel,
  .tr-spotlight-row:has(.tr-spotlight-item:nth-child(2)) {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--spotlight-carousel-gap);
    overflow-x: auto;
    /* visible+auto → Browser setzt overflow-y oft auf auto → vertikaler Scroll-Trap auf iOS */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    /*
      pan-y: Vertikal-Scroll der Seite bleibt Browser-Sache.
      Horizontal steuert JS (Achsen-Sperre) — kein pan-x-Trap.
    */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: 0;
    margin-inline: calc(-1 * var(--spotlight-carousel-pad-inline));
    padding-inline: var(--spotlight-carousel-pad-inline);
    scrollbar-width: none;
  }

  .tr-spotlight-row.tr-spotlight-row--carousel.is-swiping,
  .tr-spotlight-row:has(.tr-spotlight-item:nth-child(2)).is-swiping {
    scroll-snap-type: none;
    scroll-behavior: auto;
    /* Während Horizontal-Drag: kein Browser-Pan, nur JS */
    touch-action: none;
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }

  .tr-spotlight-row.tr-spotlight-row--carousel::-webkit-scrollbar,
  .tr-spotlight-row:has(.tr-spotlight-item:nth-child(2))::-webkit-scrollbar {
    display: none;
  }

  .tr-spotlight-row:has(.tr-spotlight-item:nth-child(2)) .tr-spotlight-item {
    flex: 0 0 var(--spotlight-carousel-slide);
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .tr-spotlight-row:not(:has(.tr-spotlight-item:nth-child(2))) {
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .tr-spotlight-item:only-child {
    flex: 0 0 100%;
  }

  .tr-spotlight-item .tr-card {
    /* Vollflächen-Header/Meta wie Desktop — Innenabstand steckt in den Sektionen */
    padding: 0;
    box-shadow: var(--shadow-md);
    /* Seite darf über den Karten vertikal scrollen */
    touch-action: pan-y;
  }

  /* Kein Hover-Scale auf Mobile: sticky :hover + scale ließ Karten „aus dem Rahmen“ wirken */
  .tr-spotlight-item .tr-card:hover {
    transform: none;
  }

  .tr-spotlight-item--active .tr-card {
    box-shadow: var(--shadow-lg);
    border-color: rgba(0, 169, 184, 0.35);
  }

  /* Kompakter Kopf: Logo und Badge ohne Quetschen am Rand */
  .tr-spotlight-item .tr-card-header {
    padding: 12px 14px 10px;
    gap: 8px;
    align-items: flex-start;
  }

  .tr-spotlight-item .tr-provider-logo-slot {
    width: 72px;
    height: 40px;
    padding: 4px 6px;
    flex-shrink: 0;
  }

  /* Meta: Versicherer links gestapelt, Bewertung rechts (bei Engstelle darunter, links) */
  .tr-spotlight-item .tr-card-meta-row {
    padding: 8px 14px;
    gap: 8px 10px;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  .tr-spotlight-item .tr-card-meta-row .tr-versicherer,
  .tr-spotlight-item .tr-card-meta-row .tr-versicherer--with-info {
    flex: 1 1 auto;
    min-width: 0;
  }

  .tr-spotlight-item .tr-card-meta-row .tr-tarif-note-badge--pill {
    flex: 0 0 auto;
    max-width: 46%;
    padding: 6px 10px;
    align-self: flex-start;
  }

  .tr-spotlight-item .tr-tarif-note-badge--pill .tr-tarif-note-badge-score {
    font-size: 15px;
  }

  .tr-spotlight-item .tr-price-block {
    padding: 10px 14px 6px;
  }

  .tr-spotlight-item .tr-price {
    font-size: 24px;
  }

  .tr-spotlight-item .tr-brief {
    padding: 0 14px;
  }

  .tr-spotlight-item .tr-features-summary li {
    font-size: 13px;
    line-height: 1.35;
  }

  /* Aktionen: volle Breite gestapelt (wie Tarifkarten) — gleiche Höhe/Optik */
  .tr-spotlight-item .tr-actions {
    padding: 8px 14px 0;
    margin-top: 6px;
  }

  .tr-spotlight-item .tr-actions-buttons {
    gap: 10px;
  }

  .tr-spotlight-item .tr-actions-buttons-top {
    gap: 10px;
  }

  .tr-spotlight-item .tr-actions-buttons > .tr-angebot-checkbox-wrapper--secondary {
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid rgba(0, 66, 79, 0.28);
    border-radius: var(--radius-full);
    background: #fff;
    align-items: center;
    box-sizing: border-box;
  }

  .tr-spotlight-item .tr-actions-buttons > .tr-angebot-checkbox-wrapper--secondary:hover,
  .tr-spotlight-item .tr-actions-buttons > .tr-angebot-checkbox-wrapper--secondary:focus-within {
    border-radius: var(--radius-full);
    background: rgba(0, 66, 79, 0.05);
    border-color: rgba(0, 66, 79, 0.42);
  }

  .tr-spotlight-item .tr-actions-buttons > .tr-angebot-checkbox-wrapper--secondary .tr-angebot-checkbox-label {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
  }

  .tr-spotlight-item .tr-actions-buttons-top .tr-btn {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 14px;
  }

  .tr-spotlight-item .tr-actions-buttons-top .tr-btn-secondary {
    border-color: rgba(0, 66, 79, 0.28);
    background: #fff;
  }

  /* Bottom: Infos-Link + beide Akkordeons in einer Zeile */
  .tr-spotlight-item .tr-tarif-bottombar {
    padding: 4px 14px 12px;
    gap: 6px;
  }

  .tr-spotlight-item .tr-tarif-bottombar-toggle {
    font-size: 12px;
    padding: 2px 0;
    min-height: 0;
  }

  .tr-spotlight-item .tr-tarif-bottombar-tabs {
    width: 100%;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: stretch;
  }

  .tr-spotlight-item .tr-tarif-bottombar-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 8px 8px;
    font-size: 12px;
    min-height: 36px;
  }

  .tr-spotlight-item .tr-tarif-bottombar-btn-caret {
    font-size: 16px;
    flex-shrink: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .tr-spotlight-row.tr-spotlight-row--carousel,
    .tr-spotlight-row:has(.tr-spotlight-item:nth-child(2)) {
      scroll-behavior: auto;
    }
  }
}

/* Karten unter „Weitere Tarife“: kompakter, klar untergeordnet zum Spotlight */
.tr-group > .tr-cards-2 .tr-card {
  padding: 14px 14px 12px;
  gap: 10px;
}

.tr-group > .tr-cards-2 .tr-tier {
  font-size: 15px;
  font-weight: 700;
}

.tr-group > .tr-cards-2 .tr-price {
  font-size: 25px;
  font-weight: 800;
}

.tr-group > .tr-cards-2 .tr-versicherer {
  font-size: 11px;
}

.tr-rest-heading {
  margin: 8px 0 12px 0;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-primary);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border-light);
}

/* ========= Details & Optionen (Bottom-Bar je Tarif) ========= */
.tr-tarif-bottombar {
  margin-top: 10px;
  border: 1px solid rgba(0, 66, 79, 0.18);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: #f8fbfc;
}

.tr-tarif-bottombar-toggle {
    width: auto;
    min-height: 40px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    cursor: pointer;
}

/* .tr-tarif-bottombar-toggle:hover,
.tr-tarif-bottombar-toggle:focus-visible {
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.12);
  outline: none;
} */

.tr-tarif-bottombar-content {
  margin-top: 10px;
}

.tr-tarif-bottombar-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.tr-tarif-bottombar-intro {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.2;
  margin-right: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-decoration: none;
}

.tr-tarif-bottombar-intro-text {
  text-decoration: underline;
}

.tr-tarif-bottombar-intro-arrow {
  text-decoration: none;
}

.tr-tarif-bottombar-btn {
min-height: 34px;
    padding: 8px 20px;
    border: none;
    border-radius: 999px;
    background: #e6f6f8;
    color: var(--c-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.tr-tarif-bottombar-btn:hover,
.tr-tarif-bottombar-btn:focus-visible {
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.12);
  outline: none;
}

.tr-tarif-bottombar-btn:active {
  transform: translateY(1px);
}

.tr-tarif-bottombar-btn.is-active {
  background: linear-gradient(180deg, rgba(0, 169, 184, 0.16) 0%, rgba(0, 169, 184, 0.08) 100%);
  border-color: var(--c-primary-light);
  color: var(--c-primary);
}

.tr-tarif-bottombar-btn-caret {
  font-size: 20px;
  color: var(--c-sub);
  transition: transform 0.2s ease;
}

.tr-tarif-bottombar-btn.is-active .tr-tarif-bottombar-btn-caret {
  transform: rotate(180deg);
}

.tr-tarif-bottombar-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(0, 66, 79, 0.14);
  border-radius: var(--radius-md);
  background: #f9fcfd;
}

.tr-tarif-bottombar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.tr-tarif-bottombar-links .tr-doc-link {
  font-size: 13px;
}

.tr-tarif-bottombar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tr-tarif-bottombar-list li {
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.45;
}

.user-is-tabbing :focus {
    -webkit-box-shadow: none !important; 
    box-shadow: none !important;
    outline: 1px solid #b6c607 !important;
}

/* === IST-only: Sort-Buttons, Score-Badges, VT-Info (nicht in Agentur) === */

.tr-angebot-section + .tr-haupttarife {
  margin-top: 28px;
}

.tr-section-title--zusatz {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-sub);
  padding-bottom: 0;
  border-bottom: none;
}

/* Label oben, Name+Info-Button in einer Zeile (kein <br> in Flex) */
.tr-versicherer--with-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
}

.tr-versicherer-value-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  flex-wrap: wrap;
}

.tr-versicherer-value {
  font-weight: 700;
  color: var(--c-primary);
}

/* Non-Spotlight: IST-Seal (klickbar) im Agentur-Badge-Look */
.tr-tarif-note-badge--seal {
  gap: 5px;
  padding: 9px 12px 10px;
  min-width: 88px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.tr-tarif-note-badge-seal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.tr-tarif-note-badge--seal .tr-tarif-note-badge-score {
  font-size: 20px;
}

.tr-tarif-note-badge--seal .tr-tarif-note-badge-score-scale {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tr-tarif-note-badge-seal-foot {
  display: block;
  width: 100%;
}

.tr-tarif-note-badge--seal .tr-tarif-note-badge-grade {
  font-size: 13px;
}

.tr-tarif-note-badge--seal .tr-tarif-note-badge-hint {
  margin-top: 2px;
  justify-content: center;
}

button.tr-tarif-note-badge--interactive:hover {
  border-color: rgba(0, 66, 79, 0.28);
  box-shadow: 0 3px 10px rgba(0, 66, 79, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

button.tr-tarif-note-badge--interactive:focus-visible {
  outline: 2px solid var(--c-primary-light);
  outline-offset: 2px;
}

button.tr-tarif-note-badge--interactive:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 66, 79, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.tr-tarif-note-badge-score-row {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  max-width: 100%;
}

.tr-tarif-note-badge-score {
  display: inline;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--c-primary);
}

.tr-tarif-note-badge-score-scale {
  display: inline;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  color: #6b7d84;
  letter-spacing: 0;
}

.tr-tarif-note-badge-sep {
  display: inline;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #8a9aa1;
  padding: 0 1px;
}

.tr-tarif-note-badge--card .tr-tarif-note-badge-score-row {
  display: flex;
}

.tr-tarif-note-badge--inline {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 4px;
  padding: 5px 9px 6px;
  min-width: 0;
  max-width: 100%;
}

.tr-tarif-note-badge--inline .tr-tarif-note-badge-main {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 5px;
  min-width: 0;
}

.tr-tarif-note-badge--inline .tr-tarif-note-badge-score {
  font-size: 15px;
}

.tr-tarif-note-badge--inline .tr-tarif-note-badge-score-scale {
  font-size: 10px;
}

.tr-tarif-note-badge--inline .tr-tarif-note-badge-grade {
  font-size: 13px;
  margin-top: 0;
}

.tr-tarif-note-badge-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #6b7d84;
}

.tr-tarif-note-badge--inline .tr-tarif-note-badge-hint {
  margin-left: auto;
}

.tr-tarif-note-badge--card .tr-tarif-note-badge-hint {
  margin-top: 5px;
}

.tr-tarif-note-badge-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 66, 79, 0.22);
  background: rgba(255, 255, 255, 0.85);
  font-size: 9px;
  font-weight: 800;
  font-style: italic;
  color: var(--c-primary);
  line-height: 1;
}

.tr-tarif-note-badge--sehr-gut .tr-tarif-note-badge-score {
  color: #9a7b0a;
}

.tr-tarif-note-badge--gut .tr-tarif-note-badge-score {
  color: #1f7a6e;
}

.tr-tarif-note-badge--befriedigend .tr-tarif-note-badge-score {
  color: #4a6fa5;
}

.tr-tarif-note-badge--ausreichend .tr-tarif-note-badge-score {
  color: #8f6b4f;
}

.tr-result-sort-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

/* IST-Buttons behalten; Optik an Agentur-Sort-Select angeglichen */
.tr-result-sort-btn {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 66, 79, 0.3);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--c-primary);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tr-result-sort-btn:hover {
  border-color: var(--c-primary-light);
  color: var(--c-primary);
}

.tr-result-sort-btn:focus-visible {
  outline: none;
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.14);
}

.tr-result-sort-btn.is-active {
  background: rgba(0, 66, 79, 0.9);
  border-color: rgba(0, 66, 79, 0.9);
  color: #fff;
}

.tr-result-sort-btn.is-active:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.tr-result-sort-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-sub);
}

.tr-vt-info-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tr-vt-info-block {
  margin: 0;
}

.tr-vt-info-block-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.3;
}

.tr-vt-info-block-body p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text);
}

.tr-vt-info-block-body p:last-child {
  margin-bottom: 0;
}

.tr-vt-info-ueberblick {
  line-height: 1.55;
}

.tr-vt-info-fakten {
  margin-bottom: 0.75rem;
  color: var(--c-text-muted, #4a5568);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tr-vt-info-block-body strong {
  color: var(--c-primary);
  font-weight: 700;
}

.tr-info-popup--versicherer-tarif .tr-vt-info-popup-body {
  max-height: min(62vh, 520px);
  overflow-y: auto;
}

.tr-tarif-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--c-primary-light);
  background: var(--c-bg);
  color: var(--c-primary-light);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  font-family: inherit;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tr-tarif-info-btn:focus-visible {
  background: var(--c-primary-light);
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.15);
}

.tr-tarif-info-btn span {
  display: block;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}


/* Zusatzkarten (Agentur, gehoerte zuvor z.T. zu Passport-Datei) */
.tr-zusatz-features-btn {
  align-self: flex-start;
  margin-top: 10px;
}

.tr-zusatz-card-grid {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 200px);
  gap: 20px;
  align-items: start;
}

.tr-zusatz-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    justify-content: flex-end;
}

.tr-zusatz-card-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.tr-zusatz-card-choice .tr-choice-cards {
  gap: 5px !important;
}
.tr-card .tr-card-header {
    margin-bottom: 15px;
}

.tr-zusatz-card-choice-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
}

@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  /* Ergänzende Bausteine: mobil bewusst dezent (nicht Tarifkarten-Dominanz) */
  .tr-zusatz-section .tr-form-title-wrapper {
    margin-bottom: 6px;
    gap: 6px;
  }

  .tr-zusatz-section .tr-form-title-dot {
    width: 7px;
    height: 7px;
  }

  .tr-zusatz-section .tr-form-step-heading {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .tr-zusatz-section .tr-cards-2 {
    gap: 10px;
    margin: 6px 0 18px;
  }

  .tr-zusatz-section .tr-card--zusatz {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: #fff;
    border-color: rgba(0, 66, 79, 0.12);
    box-shadow: none;
  }

  .tr-zusatz-section .tr-card--zusatz:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(0, 66, 79, 0.2);
  }

  .tr-zusatz-section .tr-card--zusatz::before {
    display: none;
  }

  .tr-zusatz-section .tr-card--zusatz .tr-card-header {
    margin-bottom: 2px;
  }

  .tr-zusatz-section .tr-card--zusatz .tr-tier {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
  }

  .tr-zusatz-section .tr-card--zusatz .tr-price {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
  }

  .tr-zusatz-section .tr-card--zusatz .tr-per {
    font-size: 10px;
    margin-left: 4px;
  }

  .tr-zusatz-card-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tr-zusatz-card-body {
    justify-content: flex-start;
    gap: 2px;
  }

  .tr-zusatz-features-btn {
    margin-top: 2px;
    padding: 0;
    min-height: 0;
    font-size: 12px;
    line-height: 1.3;
  }

  .tr-zusatz-card-choice {
    gap: 4px;
  }

  .tr-zusatz-card-choice-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-sub);
  }

  /* Ja/Nein nebeneinander statt zwei riesige Karten untereinander */
  .tr-zusatz-card-choice .tr-choice-cards {
    display: flex;
    flex-direction: row;
    gap: 6px !important;
  }

  .tr-zusatz-card-choice .tr-choice-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    align-items: center;
    box-shadow: none;
  }

  .tr-zusatz-card-choice .tr-choice-card:has(input:checked) {
    box-shadow: none;
  }

  .tr-zusatz-card-choice .tr-choice-card input[type="radio"] {
    margin-top: 0;
    width: 14px;
    height: 14px;
  }

  .tr-zusatz-card-choice .tr-choice-card-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
  }

  .tr-zusatz-section + .tr-haupttarife {
    margin-top: 28px;
  }
}

.tr-zusatz-tarif-pick-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10003;
  background: var(--c-bg);
  padding: 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border-light);
  max-width: min(420px, 92vw);
  width: 100%;
}

.tr-zusatz-tarif-pick-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: var(--c-primary);
}

.tr-zusatz-tarif-pick-hint {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--c-sub);
}

.tr-zusatz-tarif-pick-select {
  width: 100%;
  margin-bottom: 16px;
}

.tr-zusatz-tarif-pick-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ============ Listenansicht (Ergebnis-Tabelle „Weitere Tarife“) ============
 * Führende Datei für Tabellen-/Listen-Look der Tarifzeilen (.tr-list-*).
 * Features-Popup (Modal + .tr-features-popup-table): nur in 10-features-popup.css.
 */
.tr-list-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 24px);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Flache Restliste / gestapelte Tarife: klarer Abstand zwischen den Karten */
.tr-list-container--stacked {
  gap: var(--space-5, 32px);
}

/* Innerhalb eines Versicherer-Panels: etwas Abstand zur Titelzeile */
.tr-group > .tr-list-container {
  padding-top: 4px;
}

.tr-list-row {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 66, 79, 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease, box-shadow 0.2s ease;
}

.tr-list-row:hover {
  border-color: rgba(0, 169, 184, 0.4);
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}

.tr-list-row:has(.tr-angebot-checkbox:checked) {
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 2px rgba(0, 169, 184, 0.18);
}

/* Fallback für Browser ohne :has() */
.tr-list-row.tr-list-row--selected {
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 2px rgba(0, 169, 184, 0.18);
}

/* Kopfzeile: Tarifname + Logo (links), Versicherer + Tarifnote (rechts, per Trennlinie abgesetzt).
 * Desktop: 2 Spalten. Ab Tablet/Phone: stapeln (siehe Media Queries) — nicht flex-direction auf Grid. */
.tr-list-header {
  display: grid;
  align-items: stretch;
  background: var(--c-card-header);
  border-bottom: 1px solid rgba(0, 66, 79, 0.1);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tr-list-header-tarif {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 18px;
  justify-content: space-between;
}

.tr-list-header-tarif .tr-list-tarif-name {
  flex: 1 1 auto;
  min-width: 0;
}

.tr-list-header-tarif .tr-provider-logo-slot {
  width: 84px;
  height: 46px;
  flex: 0 0 auto;
  flex-shrink: 0;
  padding: 5px 7px;
  border: none;
  background: transparent;
}

/* Meta wie Spotlight-Empfehlung: Versicherer links, kompakte Bewertungs-Pill rechts (nie volle Breite) */
.tr-list-header-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 12px;
  min-width: 0;
  padding: 14px 18px;
  border-left: 1px solid rgba(0, 66, 79, 0.12);
  background-color: #fff;
}

.tr-list-header-meta .tr-tarif-note-badge--pill {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  align-self: flex-start;
  box-sizing: border-box;
}

.tr-list-header-versicherer {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-sub);
  min-width: 0;
  overflow-wrap: anywhere;
}

.tr-list-header-versicherer-label {
  display: block;
  font-weight: 500;
}

.tr-list-header-versicherer-value {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-primary);
}

.tr-list-col {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--c-text);
  min-width: 0; /* Wichtig für Text-Overflow */
}

.tr-list-body {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(230px, 1fr);
  gap: 16px;
  padding: 16px 18px;
  align-items: start;
  background-color: var(--c-bg-light);
}

.tr-list-col--tarif {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.tr-list-tarif-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--c-primary);
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.tr-list-price-block {
  margin-bottom: 12px;
}

.tr-list-price-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-sub);
  margin-left: 6px;
}

.tr-list-selbstbeteiligung {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
}

.tr-list-features-summary {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.tr-list-features-summary .tr-feature-line--kv-teillimit {
  margin-top: 0px;
  padding-top: 0px;
  border-top: none;
}

.tr-list-col--actions {
     flex-direction: column;
    align-items: stretch;
    gap: 10px;
    justify-content: space-around;
    min-width: 0;
    height: 100%;
    display: flex;
}

.tr-list-actions-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-list-row > .tr-tarif-bottombar {
  margin-top: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.tr-list-row > .tr-tarif-bottombar .tr-tarif-bottombar-content {
  margin-top: 0;
  padding: 20px;
  border-top: 1px solid rgba(0, 66, 79, 0.1);
}

/* Toggle sitzt jetzt in der Aktionsspalte (.tr-list-col--actions), nicht mehr in der Bottombar selbst */
.tr-list-col--actions .tr-tarif-bottombar-toggle {
  width: 100%;
  min-height: 0;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 0;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--c-primary);
  text-decoration: none;
  text-underline-offset: 2px;
}

.tr-list-col--actions .tr-tarif-bottombar-toggle:hover,
.tr-list-col--actions .tr-tarif-bottombar-toggle:focus-visible {
  border: none;
  box-shadow: none;
  color: var(--c-primary-hover);
  outline: none;
}

.tr-list-checkbox-wrapper {
  display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--c-border-light);
    flex-wrap: wrap;
    border: 1.5px solid var(--c-primary);
    border-radius: var(--radius-md);
    padding: 8px 16px;
    margin-bottom: 10px;
    background-color: var(--c-bg);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.tr-list-checkbox-wrapper input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--c-primary);
  background: #fff;
  position: relative;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.tr-list-checkbox-wrapper input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--c-primary);
}

.tr-list-checkbox-wrapper input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c-primary-light);
  outline-offset: 2px;
}

.tr-list-checkbox-wrapper:hover {
  background: rgba(0, 169, 184, 0.04);
  border-color: var(--c-primary-light);
}

.tr-list-checkbox-wrapper:focus-within {
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.14);
}

.tr-list-btn-wide,
.tr-list-btn-full {
  width: 100%;
}

.tr-btn--small {
  padding: 10px 14px;
  font-size: 14px;
  min-height: 38px;
  font-weight: 600;
}

/* Responsive: zweispaltiger Body der Ergebnis-Listenzeilen */
@media (max-width: 1200px) {
  .tr-list-body {
    grid-template-columns: minmax(0, 1.7fr) minmax(210px, 1fr);
    gap: 14px;
    padding: 14px 16px;
  }

  .tr-list-price {
    font-size: 22px;
  }
}

/* Tablet (≤1024): Header stapeln — Tarif+Logo volle Breite, darunter Meta wie Empfehlung */
@media (max-width: 1024px) {
  .tr-list-header {
    grid-template-columns: 1fr;
  }

  .tr-list-header-meta {
    border-left: none;
    border-top: 1px solid rgba(0, 66, 79, 0.12);
    width: 100%;
  }

  .tr-list-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px 15px;
  }

  .tr-list-tarif-name {
    font-size: 15px;
  }

  .tr-list-features-summary li {
    font-size: 12px;
  }

  .tr-list-price {
    font-size: 20px;
  }

  .tr-list-header-tarif .tr-provider-logo-slot {
    width: 80px;
    height: 44px;
  }
}

/* Phone (≤767) + Querformat-Handy: gleiche Meta-Optik wie Spotlight-Empfehlung */
@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  /*
   * Tarifkarten klar trennen (Ende/Anfang sichtbar).
   * margin-top am Folge-Sibling: robuster als reines flex-gap
   * (HubSpot-Theme / alte Browser können gap dämpfen oder überschreiben).
   */
  .tr-list-container,
  .tr-list-container--stacked {
    gap: 0;
  }

  .tr-list-row + .tr-list-row {
    margin-top: 48px;
  }

  .tr-list-row {
    box-shadow: var(--shadow-md);
  }

  .tr-list-header-tarif {
    gap: 10px;
    padding: 12px 14px;
  }

  .tr-list-header-meta {
    gap: 8px 10px;
    padding: 10px 14px;
    flex-wrap: nowrap;
  }

  .tr-list-header-meta .tr-tarif-note-badge--pill {
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
    padding: 8px 12px;
  }

  .tr-list-header-meta .tr-tarif-note-badge--pill .tr-tarif-note-badge-score {
    font-size: 16px;
  }

  .tr-list-header-versicherer {
    flex: 1 1 0;
    min-width: 0;
  }

  .tr-list-body {
    gap: 12px;
    padding: 12px 14px;
  }

  .tr-list-header-tarif .tr-provider-logo-slot {
    width: 72px;
    height: 40px;
    padding: 4px 6px;
  }

  .tr-list-tarif-name {
    font-size: 14px;
  }

  .tr-list-price {
    font-size: 19px;
  }
}
/* ============ Features Popup (Modal + Tabelle im Popup) ============

/* === IST-only: Listen-Metriken / Provider-Rows / Note-Badges === */

.tr-list-col--note {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: start;
  padding-top: 6px;
  grid-column: 2;
  min-width: 0;
}

.tr-list-tarif-title-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.tr-list-title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.tr-list-provider-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-sub);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.tr-list-provider-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
  max-width: 100%;
}

.tr-list-tarif-title-inline .tr-provider-logo-slot {
  width: 92px;
  height: 52px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}

.tr-list-title-text .tr-tarif-note-badge {
  align-self: flex-start;
  margin-top: 2px;
  margin-bottom: 2px;
}

.tr-list-tarif-name-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.tr-list-price-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(0, 66, 79, 0.14);
  border-radius: var(--radius-md);
  background: #f7fbfc;
}

.tr-list-price-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tr-list-price-metric-label {
  font-size: 12px;
  color: var(--c-sub);
  font-weight: 600;
}

.tr-list-price-metric-value {
  font-size: 17px;
  color: var(--c-primary);
  font-weight: 700;
  white-space: nowrap;
}

.tr-list-price-metric--emphasis .tr-list-price-metric-label {
  color: var(--c-primary);
}

.tr-list-price-metric--emphasis .tr-list-price-metric-value {
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 800;
}

/* ============ Features Popup (Modal + Tabelle im Popup) ============
 * Keine Styles für Ergebnis-.tr-list-row hier — siehe 09-listenansicht.css.
 */
.tr-features-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.42);
  z-index: 9998;
  backdrop-filter: blur(2px);
}

.tr-features-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  max-width: 990px;
  width: min(90%, 990px);
  max-height: min(90vh, calc(100dvh - 28px));
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--c-border-light);
  animation: popupFadeIn 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tr-features-popup-content {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, calc(100dvh - 28px));
  overflow: hidden;
}

.tr-features-popup-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding: 20px 28px;
  background: var(--c-card-header);
  border-bottom: none;
  flex-shrink: 0;
}

.tr-features-popup-header-main {
  flex: 1 1 auto;
  min-width: 160px;
}

.tr-features-popup-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--c-primary);
  text-shadow: none;
}

.tr-features-popup-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.tr-features-popup-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tr-features-popup-meta-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-sub);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.tr-features-popup-meta-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary);
}

.tr-features-popup-header-meta .tr-tarif-note-badge {
  margin-top: 0;
}

.tr-features-popup-close {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.tr-features-popup-close:hover {
  background: transparent;
}

.tr-features-popup-close-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
}

.tr-features-popup-close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  transition: background-color 0.2s ease;
}

.tr-features-popup-close:hover .tr-features-popup-close-icon,
.tr-features-popup-close:focus-visible .tr-features-popup-close-icon {
  background: var(--c-primary-hover);
}

.tr-features-popup-close:focus-visible {
  outline: 2px solid rgba(0, 169, 184, 0.55);
  outline-offset: 2px;
}

.tr-info-popup-close {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  font-size: 24px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  line-height: 1;
}

.tr-info-popup-close:hover {
  background: rgba(255, 255, 255, 0.24);
  color: white;
  transform: scale(1.04);
}

.tr-info-popup-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.88);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.22);
}

.tr-features-popup-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 28px 0;
  background: var(--c-bg);
  flex-shrink: 0;
}

.tr-features-popup-tab {
  border: 1px solid var(--c-border-light);
  background: var(--c-bg);
  color: var(--c-primary);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tr-features-popup-tab:hover {
  border-color: var(--c-primary);
}

.tr-features-popup-tab.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.tr-features-popup-body {
  padding: 28px;
  overflow-y: auto;
  flex: 1;
  background: var(--c-bg);
  max-height: calc(100dvh - 170px);
}

.tr-bewertung-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.tr-bewertung-stat-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: left;
}

.tr-bewertung-stat-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-sub);
  margin-bottom: 6px;
}

.tr-bewertung-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-primary);
}

.tr-features-popup-hint {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--c-sub);
}

.tr-features-popup-table-row--sum td {
  font-weight: 800;
  color: var(--c-primary);
  border-top: 2px solid var(--c-border-light);
}

.tr-features-popup-group-title {
  margin: 24px 0 12px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-primary);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--c-primary);
}
.tr-features-popup-group-title:first-child {
  margin-top: 0;
}

/* Optionale Bausteine: eigene Farbe, damit Kunde Tarif vs. Upgrade unterscheidet */
.tr-features-popup-group-title--upgrade {
  color: #0d6b5c;
  border-bottom-color: #0d6b5c;
}

.tr-features-popup-category {
margin-bottom: 32px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    box-shadow: var(--shadow-sm);
}

.tr-features-popup-category--upgrade {
  background: rgba(0, 169, 184, 0.06);
  border-color: rgba(0, 169, 184, 0.25);
}

.tr-features-popup-category:last-child {
  margin-bottom: 0;
}

.tr-features-popup-category-title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 800;
  color: var(--c-primary);
  padding-bottom: 12px;
  border-bottom: 3px solid var(--c-primary-light);
  position: relative;
}

.tr-features-popup-category-title::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--c-primary);
}

.tr-features-popup-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
  background: var(--c-bg);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* Theme (template_main): table { border: 1px solid #000 } */
  border: none !important;
}

.tr-features-popup-table thead {
  background: transparent;
}

/*
 * HubSpot-Theme (z. B. template_main) setzt oft global:
 *   thead th, thead td { background-color: rgba(238,155,75,1); }  → wirkt orange
 * Der Verlauf auf <thead> liegt darunter; die <th>-Zellen überdecken mit Orange.
 * Explizit auf Zellen überschreiben (Spezifität + !important schlägt Theme-Regel).
 * Der Tabellenkopf übernimmt bewusst die Optik von .tr-features-popup-category-title
 * (Klartext + hellblaue Border-Bottom) statt eines gefüllten Teal-Balkens.
 */
.tr-features-popup-table thead th,
.tr-features-popup-table thead td {
  background: var(--c-bg) !important;
  color: var(--c-primary) !important;
}

/* Theme: th,td { border: 1px solid #000 } – nur untere Trennlinien aus Modul-Regeln */
.tr-features-popup-table th,
.tr-features-popup-table td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

.tr-features-popup-table th {
  padding: 0 0 12px;
  text-align: left;
  font-weight: 800;
  font-size: 20px;
  border-bottom: 3px solid var(--c-primary-light);
  text-transform: none;
  letter-spacing: normal;
  position: relative;
}

.tr-features-popup-table th:first-child {
  padding-left: 0;
}

.tr-features-popup-table th:last-child:not(:first-child) {
  padding-right: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-sub) !important;
  text-align: left;
}

.tr-features-popup-table td {
  padding: 14px;
  border-bottom: 1px solid var(--c-border-light);
  font-size: 14px;
  vertical-align: top;
  line-height: 1.6;
}

.tr-features-popup-table td:first-child {
  padding-left: 20px;
  font-weight: 600;
  color: var(--c-primary);
  width: 30%;
}

.tr-features-popup-table td:last-child {
  padding-right: 20px;
}

.tr-features-popup-table tbody tr {
  transition: background-color 0.2s ease;
}

.tr-features-popup-table tbody tr:hover {
  background: rgba(0, 169, 184, 0.05);
}

/*
 * Abstand zwischen Tabellenkopf-Border und erster Datenzeile: eigene Spacer-Zeile statt Padding,
 * damit die Border direkt unter dem Kopf-Text bleibt und der Abstand erst danach beginnt.
 */
.tr-features-popup-table-head-spacer td {
  height: 14px;
  padding: 0;
  border: none !important;
  background: transparent !important;
}

/*
 * Abwechselnde Zeilenhintergründe (Zebra-Streifen) wie in der Referenzvorlage.
 * Die Spacer-Zeile ist immer die erste tbody-Zeile (nth-child 1) und zählt nicht mit,
 * daher ab dem 3. Kind (= 2. echte Datenzeile) im Odd-Rhythmus einfärben.
 */
.tr-features-popup-table--zebra tbody tr:nth-child(odd):not(:first-child) {
  background: var(--c-bg-light);
}

/* Dokumente-Tab: nur eine Spalte (Downloads) – kein Label/Wert-Layout nötig. */
.tr-features-popup-table--docs td:first-child {
  width: 100%;
  font-weight: 500;
  color: var(--c-text);
}

.tr-features-popup-table tbody tr:last-child td {
  border-bottom: none;
}

.tr-features-popup-table td:nth-child(2) {
  color: var(--c-primary);
  font-weight: 600;
  width: 25%;
}
.leistung-status-cell {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  line-height: 1.45;
}
.leistung-status-cell.lm-structured-bullet-list,
.leistung-status-cell.lm-leistungsabwicklung-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  max-width: 100%;
}
.lm-structured-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
.lm-leistungsabwicklung-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.lm-leistungsabwicklung-sub,
.lm-leistungsabwicklung-subbody,
.lm-leistungsabwicklung-pre {
  display: block;
}
.lm-leistungsabwicklung-sub {
  font-size: 0.85em;
  font-weight: 600;
}
.lm-leistungsabwicklung-wrap .lm-leistungsabwicklung-block + .lm-leistungsabwicklung-block {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed #e0e0e0;
}
.leistung-status-icon {
  font-weight: 700;
  line-height: 1.2;
}
.leistung-status-cell--text {
  white-space: pre-line;
}
.tr-features-popup-table td:nth-child(2) .leistung-status-cell {
  color: var(--c-text);
  font-weight: 500;
}
.tr-features-popup-table td:nth-child(2) .leistung-status-cell--yes .leistung-status-icon {
  color: #1b7f3b;
}
.tr-features-popup-table td:nth-child(2) .leistung-status-cell--partial .leistung-status-icon {
  color: #9a6700;
}
.tr-features-popup-table td:nth-child(2) .leistung-status-cell--no .leistung-status-icon {
  color: #b42318;
}
.tr-features-popup-table td:nth-child(2) .leistung-status-hint {
  margin-top: 4px;
  color: var(--c-sub);
  font-weight: 400;
  line-height: 1.45;
}

@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .tr-features-popup {
    width: 95%;
    max-height: calc(100dvh - 12px);
  }
  
  .tr-features-popup-header {
    padding: 16px;
  }
  
  .tr-features-popup-title {
    font-size: 18px;
  }
  
  .tr-features-popup-body {
    padding: 16px;
  }
  
  .tr-features-popup-table {
    font-size: 12px;
    display: block;
    overflow-x: auto;
  }

  /*
   * Desktop-Spacer-Zeile (Abstand unter Tabellenkopf) wird sonst zur leeren Karte.
   * Auf Mobile ausblenden – Abstand kommt über Karten-Margins.
   */
  .tr-features-popup-table-head-spacer {
    display: none !important;
  }

  /*
   * Kategorie-Titel aus thead behalten (nicht komplett verstecken).
   * Nur die Spaltenüberschrift „Kriterium“ / „Punkte“ ausblenden.
   */
  .tr-features-popup-table thead {
    display: block;
  }

  .tr-features-popup-table thead tr {
    display: block;
    margin: 0 0 12px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .tr-features-popup-table thead th:first-child {
    display: block;
    width: 100% !important;
    padding: 0 0 8px;
    margin: 0;
    border: none !important;
    border-bottom: 2px solid var(--c-primary-light) !important;
    background: transparent !important;
    color: var(--c-primary) !important;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    text-align: left;
  }

  .tr-features-popup-table thead th:last-child:not(:first-child) {
    display: none;
  }
  
  .tr-features-popup-table tbody {
    display: block;
  }
  
  .tr-features-popup-table tbody tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: var(--c-bg);
    box-shadow: var(--shadow-sm);
  }
  
  .tr-features-popup-table tbody tr:last-child {
    margin-bottom: 0;
  }
  
  .tr-features-popup-table tbody td {
    display: block;
    padding: 8px 0;
    border-bottom: none;
    width: 100% !important;
    text-align: left;
  }
  
  .tr-features-popup-table tbody td:first-child {
    font-weight: 700;
    color: var(--c-primary);
    font-size: 14px;
    padding-bottom: 4px;
    background: transparent;
    border-bottom: 1px solid var(--c-border-light);
    margin-bottom: 8px;
    padding-top: 0;
  }

  /* Kein „Wert / Regel:“ / „Punkte:“ – Überschrift + Wert/Hinweis reichen */
  .tr-features-popup-table--leistungen tbody td:nth-child(2)::before,
  .tr-features-popup-table--bewertung tbody td:nth-child(2)::before {
    content: none;
  }

  .tr-features-popup-header {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-right: 60px;
  }

  .tr-features-popup-header-meta {
    gap: 14px;
  }

  .tr-features-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .tr-features-popup-close-label {
    display: none;
  }

  .tr-features-popup-tabs {
    padding: 12px 16px 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .tr-features-popup-tab {
    flex: 0 0 auto;
  }

  .tr-bewertung-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === IST-only: Score-/Note-Popup (nicht in Agentur-Features-Tabs) === */
/* Punkte-Popup (Matrix-Breakdown) */
.tr-score-popup-summary {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-sub);
}

.tr-score-popup-overall-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(0, 169, 184, 0.08);
  border: 1px solid rgba(0, 169, 184, 0.22);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary);
}

.tr-score-category-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}

.tr-score-category-overview-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-border-light);
  border-left-width: 3px;
  box-shadow: var(--shadow-sm);
}

.tr-score-category-overview-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-sub);
}

.tr-score-category-overview-note {
  font-size: 16px;
  font-weight: 800;
  color: var(--c-primary);
}

.tr-score-category-overview-points {
  font-size: 13px;
  color: var(--c-sub);
}

.tr-features-popup-category-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.tr-features-popup-category-head .tr-features-popup-category-title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
  flex: 1 1 180px;
}

.tr-features-popup-category-head .tr-features-popup-category-title::after {
  display: none;
}

.tr-score-category-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.tr-score-category-points {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-sub);
  white-space: nowrap;
}

.tr-score-category-note {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
}

.tr-score-category-note--sehr-gut,
.tr-score-category-overview-item.tr-score-category-note--sehr-gut {
  border-left-color: #c9a227;
}

.tr-score-category-note--sehr-gut {
  background: rgba(201, 162, 39, 0.12);
  color: #8a6d12;
  border-color: rgba(201, 162, 39, 0.35);
}

.tr-score-category-note--gut,
.tr-score-category-overview-item.tr-score-category-note--gut {
  border-left-color: #2a9d8f;
}

.tr-score-category-note--gut {
  background: rgba(42, 157, 143, 0.12);
  color: #1f756b;
  border-color: rgba(42, 157, 143, 0.35);
}

.tr-score-category-note--befriedigend,
.tr-score-category-overview-item.tr-score-category-note--befriedigend {
  border-left-color: #6c8ebf;
}

.tr-score-category-note--befriedigend {
  background: rgba(108, 142, 191, 0.12);
  color: #4a6791;
  border-color: rgba(108, 142, 191, 0.35);
}

.tr-score-category-note--ausreichend,
.tr-score-category-overview-item.tr-score-category-note--ausreichend {
  border-left-color: #b08968;
}

.tr-score-category-note--ausreichend {
  background: rgba(176, 137, 104, 0.12);
  color: #8f6b4f;
  border-color: rgba(176, 137, 104, 0.35);
}

.tr-score-category-note--na,
.tr-score-category-overview-item.tr-score-category-note--na {
  border-left-color: rgba(122, 139, 146, 0.55);
}

.tr-score-category-note--na {
  background: rgba(122, 139, 146, 0.1);
  color: #6b7b82;
  border-color: rgba(122, 139, 146, 0.3);
}
/* ============ Versicherer-Info Popup ============ */
.tr-info-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9998;
  backdrop-filter: blur(2px);
}

.tr-info-popup {
  position: fixed;
  z-index: 9999;
  width: min(450px, calc(100vw - 40px));
  min-width: min(320px, calc(100vw - 40px));
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--c-border-light);
  animation: popupFadeIn 0.3s ease;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.tr-info-popup-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.tr-info-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--c-border-light);
  background: var(--c-primary);
  flex-shrink: 0;
}

.tr-info-popup-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: white;
  text-shadow: none;
}

.tr-info-popup-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(100dvh - 140px);
  background: var(--c-bg);
}

.tr-info-popup-body p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
}

.tr-info-popup-body p:last-child {
  margin-bottom: 0;
}

.tr-info-popup-body strong {
  color: var(--c-primary);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

/* Schmale Viewports + Querformat-Handy (wie Filter-Drawer / 12-responsive). */
@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  /* Versicherer-Info Popup auf Mobile zentriert anzeigen */
  .tr-info-popup {
    position: fixed !important;
    max-width: calc(100% - 40px) !important;
    min-width: auto !important;
    width: calc(100% - 40px) !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
  }
  
  .tr-info-popup-content {
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
  }
  
  .tr-info-popup-body {
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
  }
  
  .tr-info-popup-header {
    flex-shrink: 0;
    padding: 16px 20px;
  }
  
  .tr-info-popup-title {
    font-size: 18px;
  }
  
  .tr-info-popup-body {
    padding: 20px;
  }
}
/* ============ Responsive ============
 * MOBILE = max-width 767px (= BREAKPOINTS.MOBILE in module.js)
 *   ODER Querformat-Handy: ≤980px + landscape + max-height 560px
 *   (gleiche Kombi wie Filter-Drawer / Spotlight in 19 bzw. 08).
 * Vergleichsliste (.tr-list-*) bleibt sichtbar — Mobile-Stacking in 09-listenansicht.css.
 * Sortieren/Filtern-Overlays: 19-result-filters.css.
 * Features-Popup: 10-features-popup.css. Versicherer-Info-Popup: 11-… .
 */
@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .tr-wrap {
    padding: 18px 12px;
    border-radius: var(--radius-lg);
  }

  .tr-wrapper,
  .tr-results-visible {
    padding: 16px 14px;
  }

  /* Grüne Titel-/Bereichspunkte: negativer Desktop-Bleed passt nicht zu 14px Mobile-Padding */
  .tr-form-title-wrapper,
  .tr-spotlight-heading {
    margin-left: 0;
  }

  .tr-spotlight-heading {
    margin-bottom: 12px;
    font-size: 1.12rem;
  }

  .tr-form-title-wrapper.filter {
    margin-left: 0 !important;
  }

  /* Bewertung-Pill: nicht rechts aus der Karte schneiden (iPhone) */
  .tr-card-meta-row {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 14px;
  }

  .tr-card-meta-row .tr-versicherer,
  .tr-card-meta-row .tr-versicherer--with-info {
    flex: 1 1 9rem;
    min-width: 0;
  }

  .tr-card-meta-row .tr-tarif-note-badge--pill {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 8px 12px;
    align-self: flex-start;
  }

  .tr-tarif-note-badge--pill .tr-tarif-note-badge-score {
    font-size: 16px;
  }

  /* Progress: Agentur-Leiste bleibt eine Zeile (kein Wrap → sonst stapeln Titel vollbreit) */
  .tr-form-progress-display {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    padding: 12px 0 18px;
    overflow: hidden;
  }

  .tr-form-progress-number {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 32px;
    font-size: 14px;
    flex-shrink: 0;
  }

  .tr-form-progress-title {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 32px;
    font-size: 11px;
    line-height: 1.2;
    padding: 0 8px 0 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #tr-progress-title-1,
  #tr-progress-title-2 {
    margin-left: -16px;
    margin-right: -16px;
    width: auto;
  }

  #tr-progress-title-3 {
    margin-left: -16px;
    margin-right: 0;
    width: auto;
    border-radius: 0 16px 16px 0;
  }
  
  .tr-grid {
    padding: 16px 14px;
    gap: 16px;
  }

  .tr-wrapper > .tr-grid {
    padding: 0;
  }
  
  .tr-card {
    padding: 15px 14px 14px;
    gap: 0;
  }

  /* Spotlight behält padding:0 (Vollflächen-Header); Innenabstand in 08-ergebnisse */
  .tr-spotlight-item .tr-card {
    padding: 0;
  }

  .tr-group > .tr-cards-2 .tr-card {
    padding: 13px 12px 11px;
    gap: 9px;
  }
  
  .tr-tier {
    font-size: 16px;
  }

  .tr-spotlight-item .tr-tier {
    font-size: 17px;
  }

  .tr-group > .tr-cards-2 .tr-tier {
    font-size: 14px;
  }
  
  .tr-versicherer {
    font-size: 11px;
  }

  .tr-group > .tr-cards-2 .tr-versicherer {
    font-size: 10px;
  }
  
  .tr-price {
    font-size: 24px;
  }

  .tr-spotlight-item .tr-price {
    font-size: 26px;
  }

  .tr-group > .tr-cards-2 .tr-price {
    font-size: 22px;
  }

  .tr-price-block {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px;
  }

  .tr-provider-logo-slot {
    width: 68px;
    height: 40px;
    padding: 4px 7px;
  }

  .tr-spotlight-role {
    font-size: 10px;
    padding: 4px 8px;
  }
  
  .tr-per {
    font-size: 12px;
  }
  
  .tr-list li {
    font-size: 13px;
  }
  
  .tr-actions {
    margin-top: 12px;
    gap: 10px;
  }
  
  .tr-actions .tr-btn {
    min-width: 0;
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .tr-angebot-checkbox-wrapper {
    padding: 10px 0;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  
  .tr-angebot-checkbox-label {
    font-size: 13px;
    line-height: 1.4;
  }
  
  .tr-actions-buttons {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  
  .tr-actions-buttons .tr-btn {
    width: 100%;
    min-width: 0;
  }
  
  /* Info-Button auf Mobile sicherstellen, dass er sichtbar ist */
  .tr-group-title-container {
    padding-right: 0;
    min-height: 40px;
  }
  
  .tr-group-title {
    padding-right: 44px; /* Mehr Platz für größeren Button */
    font-size: 16px;
  }
  
  .tr-info-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .tr-info-btn:hover {
    transform: translateY(-50%) scale(1.05);
  }

  .tr-info-btn:focus-visible {
    outline: 2px solid rgba(0, 169, 184, 0.55);
    outline-offset: 2px;
  }
}

/* ============ Span-2 für erweiterte Felder ============ */
.tr-span-2 {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .tr-span-2 {
    grid-column: span 2;
  }
}

/* ============ Modal ============ */
/* Modals stehen oft außerhalb .tr-wrap — [hidden] zuverlässig ausblenden */
.tr-modal [hidden],
#tr-modal-abschluss-form [hidden] {
  display: none !important;
}

.tr-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.tr-modal[aria-hidden="false"] {
  display: flex;
}

.tr-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(2px);
}

.tr-modal-content {
  position: relative;
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border-light);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 10001;
  display: flex;
  flex-direction: column;
}

.tr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--c-border-light);
}

.tr-modal-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--c-primary);
}

.tr-modal-close {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: var(--c-sub);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tr-modal-close:hover {
  background: var(--c-soft);
  color: var(--c-primary);
}

.tr-modal-close:focus-visible {
  outline: 2px solid rgba(0, 169, 184, 0.55);
  outline-offset: 2px;
}

.tr-modal-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

.tr-modal-description {
  margin: 0 0 24px;
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.6;
}

.tr-modal-section-heading {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary);
}

/* Beratungs- und Abschluss-Modal: helle Kopfzeile mit Titel + "Schließen"-Button (rund, gefüllt) */
#tr-modal-beratung .tr-modal-header,
#tr-modal-abschluss .tr-modal-header {
  background: var(--c-card-header);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px 28px;
}

#tr-modal-beratung .tr-modal-title,
#tr-modal-abschluss .tr-modal-title {
  font-size: 22px;
}

#tr-modal-beratung .tr-modal-close,
#tr-modal-abschluss .tr-modal-close {
  width: auto;
  height: auto;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

#tr-modal-beratung .tr-modal-close:hover,
#tr-modal-abschluss .tr-modal-close:hover {
  background: transparent;
}

#tr-modal-beratung .tr-modal-close-label,
#tr-modal-abschluss .tr-modal-close-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
}

#tr-modal-beratung .tr-modal-close-icon,
#tr-modal-abschluss .tr-modal-close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  transition: background-color 0.2s ease;
}

#tr-modal-beratung .tr-modal-close:hover .tr-modal-close-icon,
#tr-modal-beratung .tr-modal-close:focus-visible .tr-modal-close-icon,
#tr-modal-abschluss .tr-modal-close:hover .tr-modal-close-icon,
#tr-modal-abschluss .tr-modal-close:focus-visible .tr-modal-close-icon {
  background: var(--c-primary-hover);
}

.tr-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 600px) {
  .tr-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Wichtig: span-2 Felder im Abschluss-Modal immer links starten.
   Global existiert ab 900px ".tr-span-2 { grid-column: span 2; }".
   Das kann im Grid-Autoflow dazu führen, dass ein Feld in Spalte 2 startet
   und optisch nach rechts "einspringt". */
#tr-modal-abschluss-form .tr-modal-grid > .tr-span-2 {
  grid-column: 1 / -1 !important;
}
form#tr-modal-abschluss-form {
    padding: 40px;
}
div#tr-abschluss-ro-versicherung {
    margin-bottom: 40px;
}
.tr-field-altLabel {
  font-weight: 500 !important;
    font-size: 14px !important;
    color: var(--c-primary) !important;
    display: block !important;
    background-color: transparent !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1 !important;
    margin-bottom: 15px !important;
}
.tr-textarea {
  resize: vertical;
  min-height: 100px;
}

.tr-modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 24px;
  border-top: 1px solid var(--c-border-light);
}

.tr-modal-error {
  margin: 0 24px 24px;
  padding: 12px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-radius: var(--radius-sm);
  color: #c33;
  font-size: 14px;
}

.tr-field--consent-optin {
  margin-top: 4px;
}

/*
 * Spezifität ".tr-field > label.tr-modal-consent-label" statt nur ".tr-modal-consent-label":
 * ".tr-field > span, .tr-field > label" (schwebendes Feld-Label, siehe oben) hat sonst höhere
 * Spezifität (Klasse + Element) und überschreibt display/position — dadurch würde der Text
 * unter statt neben der Checkbox landen.
 */
.tr-field > label.tr-modal-consent-label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  margin: 0;
  color: var(--c-text);
  position: static;
  top: auto;
  left: auto;
  background-color: transparent;
  padding: 0;
  font-weight: 400;
  font-size: inherit;
  z-index: auto;
}

.tr-modal-consent-label input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
}

.tr-modal-consent-text {
  display: block;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-sub);
}

.tr-modal-footer .tr-btn {
  min-width: 120px;
}

@media (max-width: 600px) {
  .tr-modal-footer {
    flex-direction: column-reverse;
  }

  .tr-modal-footer .tr-btn {
    width: 100%;
  }
}

/* Abschluss-Wizard (eine Seite, gleiches Modul) */
.tr-modal-content--abschluss {
  max-width: min(900px, 100vw - 24px);
  overflow-x: hidden;
}
div#tr-abschluss-summary-final {
    padding: 0;
    background-color: transparent;
    border: none;
        margin-bottom: 40px;
}
/* Persönliche Angaben: Adressblock eigenes Raster = gleiche Spalten wie darüber (kein verschachteltes ZIP/Zeile-Wrapper-Grid) */
#tr-abschluss-panel-persoenlich .tr-modal-grid {
  align-items: start;
}

/* Ein Grid-Item im äußeren Modal-Grid; innen gleiche Spalten/Gap wie .tr-modal-grid */
#tr-abschluss-panel-persoenlich .tr-abschluss-address-section {
  grid-column: 1 / -1 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  #tr-abschluss-panel-persoenlich .tr-abschluss-address-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * 13-span2.css setzt ab 900px .tr-span-2 { grid-column: span 2 } ohne Zeilenanker.
 * Nur direkte Kinder von .tr-modal-grid werden oben mit !important korrigiert.
 * Vollbreite-Zeilen INNERHALB .tr-abschluss-address-section brauchen dieselbe Korrektur.
 */
#tr-abschluss-panel-persoenlich .tr-abschluss-address-section > .tr-span-2 {
  grid-column: 1 / -1 !important;
}

#tr-abschluss-panel-persoenlich .tr-abschluss-address-section > .tr-field {
  min-width: 0;
}

/* Schritt Vertrag/Zahlung: weniger „laut“ — Hinweise als dezente Zeile statt großer Info-Box */
#tr-abschluss-panel-vertrag .tr-modal-grid {
  gap: 20px;
}

#tr-abschluss-panel-vertrag .tr-abschluss-payment-note {
  margin: 0;
  gap: 0;
}

#tr-abschluss-panel-vertrag .tr-abschluss-payment-note .tr-field-hint {
  display: block;
  margin-top: 0;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--c-sub);
  background: var(--c-soft);
  border: 1px solid var(--c-border-light);
  border-left: 3px solid var(--c-primary-light);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

#tr-abschluss-panel-vertrag .tr-abschluss-payment-note + .tr-abschluss-payment-note {
  margin-top: 2px;
}

.tr-abschluss-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 20px 24px 0;
}

.tr-abschluss-crumb-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.tr-abschluss-crumb-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-primary);
}

.tr-abschluss-crumb-count {
  margin-left: auto;
  padding-left: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-sub);
  white-space: nowrap;
}

.tr-abschluss-summary {
  margin-bottom: 20px;
  padding: 24px;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-xl);
  background: var(--c-bg-light);
  font-size: 14px;
  line-height: 1.7;
}

.tr-abschluss-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tr-abschluss-summary strong {
  display: block;
  font-size: 17px;
  color: var(--c-primary);
}

.tr-abschluss-toggles {
  margin-bottom: 16px;
}

.tr-abschluss-toggles .tr-abschluss-subtitle {
  margin: 12px 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-primary);
}

.tr-abschluss-price {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.5;
}

.tr-abschluss-inline-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-radius: var(--radius-sm);
  color: #c33;
  font-size: 14px;
}

.tr-abschluss-step-lead {
  margin: 0 0 16px;
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.5;
}

.tr-abschluss-readonly-block {
  margin-bottom: 20px;
  padding: 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--c-border-light);
  background: var(--c-bg-light);
  font-size: 14px;
  line-height: 1.7;
}

/* Tabellenartige Darstellung: linke Spalte (Label) und rechte Spalte (Wert) über alle Zeilen
   hinweg auf gleicher Höhe/Breite ausgerichtet. .tr-abschluss-dl-row wird dafür unsichtbar
   (display: contents) — die Label-/Wert-Spans werden direkt zu Grid-Items des Wrappers. */
#tr-abschluss-ro-versicherung {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 20px;
  row-gap: 5px;
  align-items: baseline;
}

#tr-abschluss-ro-versicherung .tr-abschluss-dl-row {
  display: contents;
}

.tr-abschluss-review-card {
  margin: 0 0 24px;
  padding: 0;
  border: none;
  background: transparent;
}

.tr-abschluss-dl-row {
    display: flex;
    gap: 8px 16px;
    margin-bottom: 5px;
    align-items: flex-end;
    flex-direction: row;
}

.tr-abschluss-dl-label {
  flex: 0 0 160px;
  font-weight: 600;
  color: var(--c-primary);
}

.tr-abschluss-dl-value {
  flex: 1 1 200px;
  color: var(--c-text);
  word-break: break-word;
}

.tr-abschluss-dl-value--total {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-primary);
}

/* Auswahl-Liste (gewählt/abgewählt/nicht verfügbar): kein Aufzählungszeichen/Einrückung,
   jeder Eintrag wie die übrigen Textblöcke im Wrapper (gleiche Karten-Optik). */
.tr-abschluss-decision-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tr-abschluss-decision-list li {
  margin-bottom: 20px;
  padding: 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--c-border-light);
  background: var(--c-bg-light);
  font-size: 14px;
  line-height: 1.7;
}

.tr-abschluss-decision-list li:last-child {
  margin-bottom: 0;
}

.tr-abschluss-service-card {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.tr-abschluss-doc-card {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.tr-abschluss-process-card {
  margin: 0 0 20px;
  padding: 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--c-border-light);
  background: var(--c-bg-light);
  box-shadow: none;
}

.tr-abschluss-process-intro {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-sub);
}

.tr-abschluss-process-list {
  margin: 0;
  padding-left: 20px;
  color: var(--c-text);
}

.tr-abschluss-process-list li {
    margin: 0;
    line-height: 1.45;
    font-size: 16px;
    font-weight: 400 !important;
}
.abstand-oben {
  margin-top: 30px;
}

.tr-abschluss-selection-feedback {
  font-size: 16px;
}

.tr-abschluss-process-list li:last-child {
  margin-bottom: 0;
}

.tr-abschluss-service-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-primary);
}

/* Nach .tr-abschluss-service-title: gleiche Spezifität, sonst gewinnt margin: 0 0 10px */
.tr-abschluss-service-title.tr-abschluss-process-heading {
  margin-bottom: 6px;
}

.tr-abschluss-service-text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
  white-space: pre-line;
}

.tr-abschluss-service-card .tr-field:last-child {
  margin-bottom: 0;
}

.tr-abschluss-subheading {
  margin: 4px 0 -4px;
  padding-top: 2px;
}

.tr-abschluss-subheading > span {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-sub);
}

.tr-abschluss-doc-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Abschluss letzter Schritt: Service + Zustimmungen (flaches Markup, robust gegen Theme-CSS) */
#tr-abschluss-panel-summary .tr-abschluss-abschluss-actions {
  display: block !important;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border-light);
}

#tr-abschluss-panel-summary .tr-abschluss-consent-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
}

#tr-abschluss-panel-summary .tr-abschluss-consent-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-top: 3px;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  clip: auto !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/*
 * ".tr-field > span" (schwebendes Feld-Label, siehe oben) trifft auch diesen Span, da er
 * direktes Kind eines .tr-field-Labels ist — position/top/left/background/padding/width/z-index
 * werden von dieser Regel NICHT gesetzt und fallen sonst auf die absolute Positionierung des
 * Feld-Labels zurück (Text erscheint abgeschnitten/überlappend statt neben der Checkbox).
 */
#tr-abschluss-panel-summary .tr-abschluss-consent-text {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  position: static;
  top: auto;
  left: auto;
  background-color: transparent;
  padding: 0;
  width: auto;
  z-index: auto;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text);
  word-break: break-word;
  overflow-wrap: anywhere;
}

#tr-abschluss-panel-summary .tr-abschluss-servicevertrag-field select,
#tr-abschluss-panel-summary select[name="auswahl_servicevertrag"] {
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Legacy: falls ältere HubSpot-Assets noch verschachtelte Checkbox-Markup nutzen */
#tr-abschluss-panel-summary .tr-checkbox-label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  line-height: 1.45;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal;
  overflow-wrap: anywhere;
  width: 100%;
}

#tr-modal-abschluss-form #tr-abschluss-panel-summary .tr-checkbox-label {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

#tr-modal-abschluss-form #tr-abschluss-panel-summary .tr-checkbox-label {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 10px;
  row-gap: 4px;
  width: 100%;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#tr-abschluss-panel-summary .tr-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

/* Abschluss-Schritt robust gegen Fremd-CSS und lange Inhalte */
#tr-abschluss-panel-summary,
#tr-abschluss-panel-summary .tr-modal-grid,
#tr-abschluss-panel-summary .tr-field {
  min-width: 0;
  max-width: 100%;
}

#tr-abschluss-panel-summary .tr-modal-grid > * {
  min-width: 0;
  max-width: 100%;
}

/* UX-Entscheidung: Kurzüberblick im letzten Schritt ausblenden (redundant zu „Prüfung“) */
#tr-abschluss-final-recap {
  display: none;
}

@media (max-width: 600px) {
  /* Tabellen-Grid bleibt auf Mobile erhalten, nur schmalere Spaltenlücke */
  #tr-abschluss-ro-versicherung {
    column-gap: 12px;
    row-gap: 8px;
  }

  #tr-modal-abschluss .tr-modal-body {
    padding: 16px;
  }

  #tr-abschluss-panel-persoenlich .tr-abschluss-readonly-block {
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  #tr-abschluss-panel-pruefung .tr-modal-description,
  #tr-abschluss-panel-summary .tr-modal-description {
    margin-bottom: 14px;
  }

  #tr-abschluss-panel-pruefung .tr-abschluss-readonly-block,
  #tr-abschluss-panel-summary .tr-abschluss-readonly-block {
    padding: 12px;
    margin-bottom: 14px;
  }

  .tr-abschluss-review-card {
    padding: 12px;
    margin-bottom: 12px;
  }

  .tr-abschluss-process-card {
    padding: 16px;
    margin-bottom: 12px;
  }

  .tr-abschluss-process-intro {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .tr-abschluss-service-title {
    margin-bottom: 8px;
    font-size: 15px;
  }

  .tr-abschluss-service-title.tr-abschluss-process-heading {
    margin-bottom: 8px;
  }

  .tr-abschluss-service-text {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.5;
  }

  .tr-abschluss-dl-row {
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    align-items: stretch;
  }

  .tr-abschluss-dl-label {
    flex: 0 0 auto;
    flex-basis: auto;
    font-size: 12px;
  }

  .tr-abschluss-dl-value {
    font-size: 13px;
  }

  /*
   * Wichtig: Desktop nutzt .tr-abschluss-dl-value { flex: 1 1 200px } für die Breite (Zeile).
   * Unter flex-direction: column wird dieselbe Kurzschreibweise zur Höhe (Basis 200px + grow) —
   * das erzeugt künstlich riesige Abstände zwischen Prüfungs-Zeilen. Im Spaltenlayout zurücksetzen.
   */
  .tr-abschluss-dl-row .tr-abschluss-dl-value {
    flex: 0 1 auto;
    min-height: 0;
  }

  #tr-abschluss-panel-summary .tr-checkbox-label {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    margin: 6px 0;
  }

  #tr-abschluss-panel-summary .tr-abschluss-consent-text {
    font-size: 13px;
    line-height: 1.45;
  }

  #tr-abschluss-panel-pruefung .tr-abschluss-review-card {
    padding: 10px 12px;
  }
}

.tr-modal-footer--abschluss {
  flex-wrap: wrap;
  justify-content: flex-start;
  border-top: none;
  padding-top: 8px;
}

.tr-modal-footer--abschluss .tr-btn.tr-hidden {
  display: none !important;
}

@media (min-width: 601px) and (max-width: 899px) {
  #tr-modal-abschluss .tr-modal-content--abschluss {
    max-width: min(680px, 100vw - 28px);
  }

  #tr-modal-abschluss .tr-modal-header {
    padding: 18px 20px;
  }

  #tr-modal-abschluss .tr-modal-title {
    font-size: 22px;
  }

  #tr-modal-abschluss .tr-modal-body {
    padding: 18px 20px;
  }

  #tr-modal-abschluss .tr-modal-footer {
    padding: 18px 20px;
  }

  #tr-modal-abschluss .tr-abschluss-crumb {
    padding: 16px 20px 0;
  }
}

@media (max-width: 899px) and (orientation: landscape) and (max-height: 560px) {
  #tr-modal-abschluss {
    padding: 8px;
  }

  #tr-modal-abschluss .tr-modal-content--abschluss {
    max-width: min(760px, 100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  #tr-modal-abschluss .tr-modal-header {
    padding: 10px 14px;
  }

  #tr-modal-abschluss .tr-modal-title {
    font-size: 20px;
  }

  #tr-modal-abschluss .tr-modal-body {
    padding: 12px 14px;
  }

  #tr-modal-abschluss .tr-modal-footer {
    padding: 10px 14px;
    gap: 8px;
  }

  #tr-modal-abschluss .tr-modal-footer .tr-btn {
    min-height: 40px;
    padding: 8px 12px;
  }

  #tr-modal-abschluss .tr-abschluss-crumb {
    padding: 10px 14px 0;
  }
}

/* === IST-only: Readonly-Block persönlich (Geburtsdatum u. a.) === */
#tr-abschluss-ro-persoenlich {
  padding: 10px 12px;
}

#tr-abschluss-ro-persoenlich .tr-abschluss-dl-row {
  margin-bottom: 0;
}

#tr-abschluss-ro-persoenlich .tr-abschluss-dl-label {
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  #tr-abschluss-panel-persoenlich #tr-abschluss-ro-persoenlich.tr-abschluss-readonly-block {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
  }

  #tr-abschluss-panel-persoenlich #tr-abschluss-ro-persoenlich .tr-abschluss-dl-row {
    display: block;
    margin: 0;
  }

  #tr-abschluss-panel-persoenlich #tr-abschluss-ro-persoenlich .tr-abschluss-dl-label {
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-primary);
  }

  #tr-abschluss-panel-persoenlich #tr-abschluss-ro-persoenlich .tr-abschluss-dl-value {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 16px;
    line-height: 1.35;
    color: var(--c-text);
    box-sizing: border-box;
  }
}
/* ============ Angebotsdatei-Funktion ============ */

/* Mitlaufende CTA-Leiste für Angebotsdownload */
.tr-angebot-floating {
  position: fixed;
  top: 100px;
  right: 10px;
  bottom: auto;
  left: auto;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 22px;
  background: var(--c-bg-light, #fafafa);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tr-angebot-floating.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

body.tr-result-filters-drawer-open .tr-angebot-floating,
body.tr-result-sort-sheet-open .tr-angebot-floating {
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
}

.tr-angebot-floating-selections {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.tr-angebot-floating-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 16px;
  background: #fff;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary);
}

.tr-angebot-floating-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.tr-angebot-floating-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--c-primary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.tr-angebot-floating-remove:hover,
.tr-angebot-floating-remove:focus-visible {
  background: rgba(0, 66, 79, 0.08);
  outline: none;
}

.tr-btn-angebot-floating {
  white-space: nowrap;
  min-width: 180px;
  flex-shrink: 0;
  padding: 12px 24px;
  min-height: 44px;
}

/* Checkbox für Angebotsauswahl */
.tr-angebot-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--c-border-light);
  flex-wrap: wrap;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.tr-angebot-checkbox-wrapper:hover {
  background: rgba(0,169,184,0.03);
  border-radius: var(--radius-sm);
}

.tr-angebot-checkbox-wrapper:focus-within {
  background: rgba(0, 169, 184, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.14);
  border-radius: var(--radius-sm);
}

.tr-angebot-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--c-primary);
  flex-shrink: 0;
}

.tr-angebot-checkbox-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tr-angebot-checkbox:checked + .tr-angebot-checkbox-label {
  color: var(--c-primary-hover);
}

/* Sekundäre Variante: volle Pille mit rundem Radio-Look statt Zeile mit Trennlinie */
.tr-angebot-checkbox-wrapper--secondary {
  border: 1.5px solid var(--c-primary);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 10px;
  background-color: var(--c-bg);
}

.tr-angebot-checkbox-wrapper--secondary:hover {
  background: rgba(0, 169, 184, 0.05);
  border-radius: var(--radius-full);
}

.tr-angebot-checkbox-wrapper--secondary:focus-within {
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.14);
}

.tr-angebot-checkbox-wrapper--secondary .tr-angebot-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--c-primary);
  background: #fff;
  position: relative;
  margin: 0;
}

.tr-angebot-checkbox-wrapper--secondary .tr-angebot-checkbox:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--c-primary);
}

.tr-angebot-checkbox-wrapper--secondary .tr-angebot-checkbox:focus-visible {
  outline: 2px solid var(--c-primary-light, #00a9b8);
  outline-offset: 2px;
}

/* Visuelle Hervorhebung markierter Karten */
.tr-card:has(.tr-angebot-checkbox:checked) {
  border-color: var(--c-primary);
  background: rgba(0, 169, 184, 0.05);
  box-shadow: var(--shadow-sm);
}

/* Fallback für Browser ohne :has() */
.tr-card.tr-card--selected {
  border-color: var(--c-primary);
  background: rgba(0, 169, 184, 0.05);
  box-shadow: var(--shadow-sm);
}

/* "In Angebot"-Feedback: kurze Hervorhebung beim Anhaken (Karte) */
@keyframes trCardSelected {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 169, 184, 0.35);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 169, 184, 0);
  }
  100% {
    box-shadow: var(--shadow-md);
  }
}

.tr-card.tr-card-just-selected {
  animation: trCardSelected 0.6s ease;
}

/* "In Angebot"-Feedback: kurze Hervorhebung beim Anhaken (Listenzeile) */
@keyframes trListRowSelected {
  0% {
    background: rgba(0, 169, 184, 0.08);
  }
  100% {
    background: transparent;
  }
}

.tr-list-row.tr-list-row-just-selected {
  animation: trListRowSelected 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tr-card.tr-card-just-selected,
  .tr-list-row.tr-list-row-just-selected {
    animation: none;
  }
}

/* Mobile Anpassungen */
@media (max-width: 899px) {
  .tr-angebot-floating {
    left: 12px;
    right: 12px;
    top: 100px;
    bottom: auto;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
  }

  .tr-btn-angebot-floating {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    padding: 10px 14px;
    font-size: 14px;
  }
  
  .tr-actions-buttons {
    flex-direction: column;
  }
  
  .tr-actions-buttons .tr-btn {
    width: 100%;
  }
  
  .tr-results-header-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .tr-angebot-floating {
    top: 90px;
  }
}


.tr-angebot-hint {
  /* Legacy: doppelter Hinweis entfernt – Instruktion nur noch in .tr-results-header-hint */
  display: none !important;
}

.tr-angebot-section {
  margin-top: 12px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 20px;
  z-index: 100;
}

.tr-angebot-button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tr-btn-angebot {
  min-width: 200px;
  font-size: 16px;
  padding: 14px 28px;
}

.tr-angebot-floating-status {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
  white-space: nowrap;
}

/* === IST-only mobile: Angebots-Sektion === */
@media (max-width: 899px) {
  .tr-angebot-section {
    padding: 12px 14px;
    margin-top: 10px;
    margin-bottom: 16px;
    position: relative;
    top: 0;
  }

  .tr-btn-angebot {
    width: 100%;
    min-width: auto;
  }

  .tr-angebot-floating-status {
    font-size: 13px;
    flex: 1 1 160px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
  }
}
/* ============ Leistungsmerkmale (Summary) ============ */
.tr-features-summary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border-light);
  list-style: none;
  padding-left: 0;
}

.tr-features-summary li,
.tr-list-features-summary li {
  font-size: 14px;
  color: var(--c-text);
  padding: 4px 0;
  padding-left: 0;
  position: relative;
  line-height: 1.45;
  margin-bottom: 5px;
  font-weight: 300;
}

.tr-features-summary li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--c-primary-light);
  font-weight: bold;
  font-size: 14px;
}

/* Karten in der Restliste: Merkmale noch eine Stufe zurück */
.tr-group > .tr-cards-2 .tr-features-summary li {
  font-size: 12px;
  color: var(--c-sub);
}

.tr-features-summary .tr-feature-line--kv-teillimit {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--c-border-light);
}

.tr-features-summary .tr-feature-line--kv-teillimit::before {
  color: var(--c-sub);
}
/* ============ PassportCard Option A/B ============ */
.tr-passport-konflikt {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0, 169, 184, 0.08);
  border: 1px solid rgba(0, 169, 184, 0.35);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.45;
}

.tr-passport-option-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--c-soft);
  color: var(--c-primary);
  margin-bottom: 8px;
}

.tr-passport-option-badge--empfohlen {
  background: rgba(182, 199, 9, 0.25);
  color: var(--c-primary);
}

.tr-passport-hinweis {
  margin: 0;
  color: var(--c-text);
}

.tr-passport-coverage-info {
  margin-top: 8px;
}

.tr-passport-coverage-tag {
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 66, 79, 0.08);
  color: var(--c-primary);
  border: 1px solid rgba(0, 66, 79, 0.2);
}

.tr-passport-coverage-hinweis {
  margin: 6px 0 0;
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.4;
}

.tr-passport-local-info {
  margin-top: 8px;
}

.tr-passport-local-tag {
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: #9a3412;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.tr-passport-local-hinweis {
  margin: 6px 0 0;
  color: #7c2d12;
  font-size: 13px;
  line-height: 1.4;
}
/* ============ Print / PDF ============ */
@media print {
  .tr-wrap {
    padding: 16px 0;
    max-width: 100%;
  }

  /* Überschriften nicht von folgendem Inhalt trennen */
  .tr-h2 {
    page-break-after: avoid;
    break-after: avoid;
  }

  #tr-results {
    page-break-before: always;
    break-before: page;
  }

  /* Tarif-Karten und Versicherer-Gruppen nicht mitten durchschneiden */
  .tr-card,
  .tr-group {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Spotlight: Pager im Druck aus; Legacy-Pfeile ebenfalls */
  .tr-spotlight-nav,
  .tr-spotlight-nav-bar,
  .tr-spotlight-inline-nav,
  .tr-spotlight-nav-status,
  .tr-spotlight-nav-icon,
  .tr-spotlight-dots,
  .tr-spotlight-swipe-hint {
    display: none !important;
  }

  .tr-spotlight-row {
    display: block !important;
    overflow: visible !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .tr-spotlight-item {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 12px;
  }

  /* .tr-list-Zeilen bewusst ohne break-inside: avoid — lange Listen sollen über Seiten umbrechen dürfen */
  .tr-results-header {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Formular-Blöcke nicht willkürlich trennen (optional, weniger hart) */
  .tr-grid {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
/* ============ Ergebnis-Sidebar-Filter (Check 24/7 Phase 4) ============ */

div#tr-result-filters-panel span {
    color: var(--c-primary) !important;
}

.tr-results-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

/* Aktive Ergebnisfilter unter dem Header (Chips + Kurzinfo) */
.tr-results-filter-summary {
  margin-top: 8px;
  margin-bottom: 4px;
}
p.tr-results-header-hint {
    display: block;
    text-align: right;
    font-weight: 600;
    font-size: 16px;
    max-width: 350px;
    margin-right: 0px;
    margin-left: auto;
}

.tr-results-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tr-results-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(0, 66, 79, 0.2);
  border-radius: 999px;
  background: var(--c-surface, #f8fbfc);
  color: var(--c-primary, #0a6b7a);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
}

.tr-results-filter-chip:hover,
.tr-results-filter-chip:focus-visible {
  border-color: var(--c-primary, #0a6b7a);
  background: rgba(10, 107, 122, 0.08);
  outline: none;
}

.tr-results-filter-clear-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  color: var(--c-primary, #0a6b7a);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.tr-results-filter-clear-all:hover,
.tr-results-filter-clear-all:focus-visible {
  color: var(--c-primary-hover, #008a98);
  outline: none;
}

.tr-result-filters-open-btn {
  display: none;
  margin-left: auto;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md, 8px);
  border: 1px solid rgba(0, 66, 79, 0.25);
  background: var(--c-surface, #f8fbfc);
  color: var(--c-primary, #0a6b7a);
  cursor: pointer;
  box-shadow: none;
}

.tr-result-filters-open-btn:hover,
.tr-result-filters-open-btn:focus-visible {
  border-color: var(--c-primary, #0a6b7a);
  outline: none;
}

.tr-result-zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.tr-result-zone-title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.35;
}

.tr-results-columns {
  display: grid;
  grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
  gap: 20px 24px;
  align-items: start;
  margin-bottom: 8px;
}

/* Tablet/Desktop: etwas schmalere Sidebar-Obergrenze → mehr Fläche für Hauptspalte (Mobile @767 unverändert) */
@media (min-width: 768px) and (max-width: 1199px) {
  .tr-results-columns {
grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
        gap: 22px 28px;
  }
}

@media (min-width: 1200px) {
  .tr-results-columns {
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
    gap: 22px 28px;
  }
}

.tr-result-filters {
  position: relative;
  z-index: 1;
}

/* Desktop/Tablet: Filter wandert mit, stoppt am Ende von .tr-results-columns
   (vor „Weitere Versicherer (Direktlink)“). Mobile + Querformat-Handy bleibt Drawer. */
@media (min-width: 768px) {
  .tr-result-filters {
    position: sticky;
    top: 16px;
    align-self: start;
    z-index: 40;
  }

  .tr-result-filters-panel {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: hidden;
  }

  .tr-result-filters-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--c-accent-hover, #b6c709) #e8e8e8;
    scrollbar-width: thin;
  }
}

/* Querformat-Handy: Sticky-Sidebar deaktivieren (sonst „Filter rutscht nach unten“) */
@media (min-width: 768px) and (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .tr-result-filters {
    position: relative;
    top: auto;
    z-index: 1;
  }
}

.tr-result-filters-backdrop {
  display: none;
}

.tr-result-filters-panel {
border: 1px solid var(--c-border-light, #e5e7eb);
    border-radius: var(--radius-xl, 16px);
    background: #fff;
    padding: 30px 15px 30px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    overflow: visible;
    position: relative;
}

.tr-result-filters-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tr-result-filters-mobile-title {
font-weight: 400;
    font-size: 16px;
    color: var(--c-primary);
    position: absolute;
    top: -16px;
    left: 15px;
    background-color: #fff;
    padding: 1px 6px;
    z-index: 2;
}

@media (min-width: 900px) {
  .tr-result-filters-close {
    display: none;
  }
}

.tr-result-filters-close {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--c-primary, #0a6b7a);
  padding: 4px 8px;
  border-radius: var(--radius-sm, 4px);
}

.tr-result-filters-close:hover,
.tr-result-filters-close:focus-visible {
  background: rgba(10, 107, 122, 0.08);
  outline: none;
}

.tr-result-filters-fieldset {
  border: none;
  margin: 0 0 20px 0;
  padding: 0;
}

.tr-result-filters-fieldset legend {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 0;
  color: var(--c-primary);
}

.tr-result-filters-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.35;
}

.tr-result-filters-row input {
  margin-top: 1px;
  flex-shrink: 0;
}

.tr-result-filters-row input[type="checkbox"],
.tr-result-filters-row input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid rgba(0, 66, 79, 0.35);
  background: #fff;
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tr-result-filters-row input[type="checkbox"] {
  border-radius: 5px;
}

.tr-result-filters-row input[type="radio"] {
  border-radius: 50%;
}

.tr-result-filters-row input[type="checkbox"]:hover,
.tr-result-filters-row input[type="radio"]:hover {
  border-color: var(--c-primary);
}

.tr-result-filters-row input[type="checkbox"]:checked,
.tr-result-filters-row input[type="radio"]:checked {
  border-color: var(--c-primary);
  background: var(--c-primary);
}

.tr-result-filters-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tr-result-filters-row input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}

.tr-result-filters-fieldset--lm + .tr-result-filters-fieldset--lm {
  margin-top: 4px;
}

.tr-result-filters-lm-hint {
  margin: 4px 0 10px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-sub, #4a6570);
}

.tr-result-filter-sb-range-wrap {
  padding: 4px 2px 6px;
}

.tr-result-filter-sb-range {
  width: 100%;
  margin: 0;
  --tr-sb-fill: 0%;
  accent-color: var(--c-accent);
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--c-border-light);
  outline-offset: 3px;
  cursor: pointer;
}

.tr-result-filter-sb-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    to right,
    var(--c-accent) 0%,
    var(--c-accent) var(--tr-sb-fill),
    var(--c-border-light) var(--tr-sb-fill),
    var(--c-border-light) 100%
  );
}

.tr-result-filter-sb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  border: none;
  background: var(--c-accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.tr-result-filter-sb-range::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--c-border-light);
}

.tr-result-filter-sb-range::-moz-range-progress {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--c-accent);
}

.tr-result-filter-sb-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--c-accent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.tr-result-filters-sb-box {
    align-items: center;
    border: 1px solid rgba(0, 66, 79, 0.24);
    border-radius: var(--radius-sm);
    padding: 3px 2px 3px 10px;
    background: #fff;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tr-result-filters-sb-box .tr-result-filter-textinput {
  border: none;
  padding: 6px 0;
  min-height: auto;
  background: transparent;
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
  max-width: 100%;
}

.tr-result-filters-sb-box .tr-result-filter-textinput:focus {
  box-shadow: none;
}

.tr-result-filters-sb-box span {
  color: var(--c-sub);
  font-size: 14px;
  flex-shrink: 0;
  padding-right: 6px;
}

.tr-result-filters-sb-box:focus-within {
  border-color: var(--c-primary-light);
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.12);
}

.tr-result-filter-textinput {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid rgba(0, 66, 79, 0.24);
  border-radius: var(--radius-sm, 6px);
  font-size: 14px;
  font-family: inherit;
  color: var(--c-text, #16353d);
  background: #fff;
}

.tr-result-filter-textinput:focus,
.tr-result-filters-inline-select:focus {
  outline: none;
  border-color: var(--c-primary-light, #00a9b8);
  box-shadow: 0 0 0 3px rgba(0, 169, 184, 0.12);
}

.tr-result-filters-inline-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 66, 79, 0.24);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
}

.tr-result-filters-actions {
  margin-top: 8px;
  padding-top: 4px;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.tr-result-filters-reset {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.3;
  min-height: 44px;
  height: auto;
  background: var(--c-primary);
  color: #fff;
  border: 1px solid var(--c-primary);
}

.tr-result-filters-reset:hover:not(:disabled) {
  background: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
  color: #fff;
}

.tr-result-filters-commit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tr-result-filters-mobile-footer {
  display: none;
}

/* Mobile Sortier-Sheet (portiert an body — nicht in .tr-wrap mit overflow-x:clip) */
.tr-result-mobile-sort-header-btn {
  display: none;
}

.tr-result-sort-sheet-portal {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
  z-index: 10035;
}

.tr-result-sort-sheet {
  position: fixed;
  inset: 0;
  z-index: 10035;
  pointer-events: none;
  visibility: hidden;
  display: none;
}

.tr-result-sort-sheet.is-open {
  display: block;
  pointer-events: auto;
  visibility: visible;
}

.tr-result-sort-sheet:not(.is-open) .tr-result-sort-sheet-backdrop,
.tr-result-sort-sheet:not(.is-open) .tr-result-sort-sheet-panel {
  pointer-events: none;
}

.tr-result-sort-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 35, 42, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.tr-result-sort-sheet.is-open .tr-result-sort-sheet-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.tr-result-sort-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(82vh, 560px);
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--c-border-light, #c5d9dd);
  border-bottom: none;
  background: #fff;
  box-shadow: 0 -12px 28px rgba(15, 35, 42, 0.22);
  transform: translateY(102%);
  transition: transform 0.25s ease;
}

.tr-result-sort-sheet.is-open .tr-result-sort-sheet-panel {
  transform: translateY(0);
  pointer-events: auto;
}

.tr-result-sort-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--c-border-light, #c5d9dd);
}

.tr-result-sort-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-primary, #0a6b7a);
}

.tr-result-sort-sheet-close {
  border: none;
  background: transparent;
  color: var(--c-primary, #0a6b7a);
  font-size: 28px;
  line-height: 1;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}

.tr-result-sort-sheet-close:hover,
.tr-result-sort-sheet-close:focus-visible {
  background: rgba(10, 107, 122, 0.1);
  outline: none;
}

.tr-result-sort-sheet-body {
  display: grid;
  gap: 8px;
  padding: 14px 16px 18px;
}

.tr-result-sort-sheet-option {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid rgba(0, 66, 79, 0.2);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  color: var(--c-text, #16353d);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.tr-result-sort-sheet-option:hover,
.tr-result-sort-sheet-option:focus-visible {
  border-color: var(--c-primary, #0a6b7a);
  outline: none;
}

.tr-result-sort-sheet-option.is-active {
  border-color: var(--c-primary, #0a6b7a);
  background: rgba(10, 107, 122, 0.1);
  color: var(--c-primary, #0a6b7a);
}

/* Sichtbarer Tastaturfokus für Filter-/Sortier-Controls (ohne Layout-Shift). */
.tr-result-filters-open-btn:focus-visible,
.tr-result-filters-close:focus-visible,
.tr-result-sort-sheet-close:focus-visible,
.tr-result-sort-sheet-option:focus-visible,
.tr-result-filter-fab:focus-visible,
.tr-result-mobile-sort-header-btn:focus-visible,
.tr-result-filter-textinput:focus-visible,
.tr-result-filters-inline-select:focus-visible,
.tr-result-filter-sb-range:focus-visible,
.tr-result-filters-row input[type="checkbox"]:focus-visible,
.tr-result-filters-row input[type="radio"]:focus-visible,
.tr-results-filter-chip:focus-visible,
.tr-results-filter-clear-all:focus-visible {
  outline: 2px solid var(--c-primary-light, #00a9b8);
  outline-offset: 2px;
}

/* Mobile Schnellsteuerung (Legacy-Top-Leiste — durch Filter-FAB ersetzt) */
.tr-result-mobile-controls {
  display: none !important;
}

/* Schwebender Filter-FAB (nur Mobile, über Site-Header) */
.tr-result-filter-fab {
  display: none;
}

/* Drawer/FAB: Hochformat ≤767 ODER Querformat-Handy (breit aber niedrige Höhe) */
@media (max-width: 767px), (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  .tr-results-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    width: 100%;
  }

  .tr-results-filter-chip,
  .tr-results-filter-clear-all {
    min-height: 44px;
  }

  .tr-results-filter-chip {
    padding: 8px 14px;
  }

  .tr-results-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .tr-result-mobile-sort-header-btn {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 6px 10px;
    min-height: 36px;
    border: 1px solid rgba(0, 66, 79, 0.22);
    border-radius: var(--radius-sm, 6px);
    background: #fff;
    color: var(--c-primary, #0a6b7a);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.25;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 169, 184, 0.2);
  }

  /* Gesamter Header nicht sticky — sonst Hinweis + Filterzeile = halber Screen */
  .tr-results-header {
    position: static;
    margin-bottom: 12px;
    background: transparent;
    box-shadow: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Nur kompakte Steuerzeile wandert mit */
  .tr-results-header-main {
    position: sticky;
    top: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 6px;
    margin: 0 0 6px;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 66, 79, 0.1);
  }

  .tr-results-header .tr-results-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .tr-results-header .tr-results-count {
    font-size: 12px;
    line-height: 1.25;
    margin: 0;
  }

  .tr-results-header-info-wrapper {
    display: block;
    grid-template-columns: none;
    margin: 0;
    padding: 0;
  }

  .tr-results-header-hint-wrap:empty {
    display: none;
  }

  p.tr-results-header-hint {
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    max-width: none;
    margin: 0 0 4px;
  }

  .tr-results-filter-summary {
    margin-top: 4px;
    margin-bottom: 0;
  }

  .tr-results-filter-summary-note {
    font-size: 12px;
    margin: 0 0 4px;
  }

  .tr-haupttarife .tr-result-sort-bar {
    display: none;
  }

  .tr-result-filter-fab {
    position: fixed;
    left: max(12px, env(safe-area-inset-left, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    top: auto;
    transform: translateY(8px);
    z-index: 10040;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 56px;
    min-height: 56px;
    padding: 8px 6px;
    border: 1px solid rgba(0, 66, 79, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 18px -8px rgba(0, 66, 79, 0.45);
    color: var(--c-primary, #0a6b7a);
    font-family: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, bottom 0.2s ease;
  }

  .tr-result-filter-fab.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .tr-result-filter-fab-icon {
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .tr-result-filter-fab-label {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tr-result-filter-fab.has-active-filters {
    border-color: var(--c-primary-light, #00a9b8);
    background: rgba(0, 169, 184, 0.08);
  }

  .tr-result-filter-fab.has-active-filters .tr-result-filter-fab-label {
    color: var(--c-primary-hover, #008a98);
  }

  .tr-result-filter-fab.is-pending {
    box-shadow: 0 0 0 3px rgba(255, 159, 28, 0.35), 0 4px 18px -8px rgba(0, 66, 79, 0.45);
    border-color: rgba(255, 159, 28, 0.65);
  }

  /* Header-Filter-Button: durch FAB ersetzt */
  .tr-result-filters-open-btn {
    display: none !important;
  }

  .tr-results-columns {
    display: block;
    margin-bottom: 0;
  }

  .tr-result-filters {
    position: fixed;
    inset: 0;
    z-index: 10030;
    pointer-events: none;
    visibility: hidden;
  }

  .tr-result-filters.is-open {
    pointer-events: auto;
    visibility: visible;
  }

  .tr-result-filters-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(15, 35, 42, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .tr-result-filters.is-open .tr-result-filters-backdrop {
    opacity: 1;
  }

  .tr-result-filters-panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 0;
    border-right: none;
    box-shadow: 8px 0 26px rgba(15, 35, 42, 0.14);
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    padding: 12px 14px 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .tr-result-filters.is-open .tr-result-filters-panel {
    transform: translateX(0);
  }

  .tr-result-filters-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 66, 79, 0.14);
    margin-bottom: 10px;
  }

  .tr-result-filters-mobile-title {
    position: static;
    top: auto;
    left: auto;
    background: transparent;
    padding: 0;
    font-weight: 700;
    font-size: 16px;
  }

  .tr-result-filters-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .tr-result-filters-mobile-footer {
    display: block;
    border-top: 1px solid var(--c-border-light, #c5d9dd);
    background: #f9fbfc;
    padding: 10px 0 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .tr-result-filters-mobile-footer .tr-result-filters-actions {
    margin-top: 0;
    padding-top: 0;
  }

  .tr-result-filters-mobile-footer .tr-result-filters-commit-actions .tr-btn,
  .tr-result-filters-mobile-footer .tr-result-filters-reset {
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
  }

  .tr-result-filters-mobile-footer .tr-result-filters-reset {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tr-results-main-column {
    width: 100%;
  }
}

body.tr-result-filters-drawer-open,
body.tr-result-sort-sheet-open {
  overflow: hidden;
}

body.tr-result-filters-drawer-open .tr-result-mobile-controls,
body.tr-result-sort-sheet-open .tr-result-mobile-controls,
body.tr-result-filters-drawer-open .tr-result-filter-fab,
body.tr-result-sort-sheet-open .tr-result-filter-fab {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .tr-result-filters-backdrop,
  .tr-result-filters-panel,
  .tr-result-sort-sheet-backdrop,
  .tr-result-sort-sheet-panel,
  .tr-result-filter-fab,
  .tr-result-mobile-controls {
    transition: none;
  }
}

/* Need-Bulk-Recalc: alte Liste sichtbar, dezent ausgegraut (H4) */
.tr-results--need-recalc-busy {
  opacity: 0.65;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tr-results--need-recalc-busy .tr-result-filters,
.tr-results--need-recalc-busy .tr-result-filters-body {
  pointer-events: auto;
}

.tr-need-recalc-status {
  margin: 0.35rem 0 0;
  color: var(--c-sub, #4a5568);
  font-size: 0.875rem;
}

/* === IST-only: Filter-Summary-Note unter Chips === */
.tr-results-filter-summary-note {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-sub, #4a6570);
}

/* Agentur: Hinweis-Zeile neben Angebots-Kontext im Ergebnis-Header */
.tr-results-header-info-wrapper {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr;
}

.tr-results-header-hint-wrap:empty {
  display: none;
}