/* ============ Design Tokens ============ */
:root{
  --c-primary:#0ea5e9; --c-primary-600:#0284c7;
  --c-text:#0f172a; --c-sub:#6b7280; --c-border:#e5e7eb; --c-bg:#fff; --c-soft:#f9fafb;
}

/* ============ Base/Layout ============ */
.tr-wrap{max-width:1120px;margin:0 auto;padding:20px}
.tr-h2{margin:0 0 8px;font-weight:900;font-size:clamp(22px,2.4vw,30px);letter-spacing:.2px}
.tr-h3{margin:0 0 8px;font-weight:800;font-size:clamp(18px,2vw,24px)}
.tr-h4{margin:6px 0 10px;font-weight:800;font-size:clamp(16px,1.8vw,20px)}
.tr-note{font-size:14px;line-height:1.35;color:var(--c-sub)}

.tr-grid{display:grid;gap:14px;grid-template-columns:1fr}
.tr-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tr-field>span{font-size:14px;color:var(--c-text);font-weight:600}

.tr-input,.tr-select,.tr-textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--c-border);border-radius:12px;font-size:16px
}
.tr-input,.tr-select{height:48px;padding:0 12px}
.tr-textarea{padding:10px 12px;min-height:120px}

.tr-row{grid-column:1/-1}
.tr-span-2{grid-column:span 2}
.tr-span-4{grid-column:1 / -1}

[hidden]{display:none!important}
.hidden{display:none!important}

/* Fokus/A11y */
.tr-input:focus-visible,.tr-select:focus-visible,.tr-textarea:focus-visible,.tr-btn:focus-visible{
  outline:2px solid var(--c-primary);outline-offset:2px
}

/* ============ Buttons ============ */
.tr-btn{
  height:48px;border-radius:12px;border:0;padding:0 16px;
  font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1.15;font-size:16px
}
.tr-btn--primary{background:var(--c-primary);color:#fff}
.tr-btn--primary:hover{background:var(--c-primary-600)}
.tr-btn--outline{background:#fff;color:var(--c-primary);border:2px solid var(--c-primary)}
.tr-btn--outline:hover{color:#fff;background:var(--c-primary)}
.tr-btn--ghost{background:transparent;color:var(--c-text);border:2px solid var(--c-border)}
.tr-btn:disabled{opacity:.5;cursor:not-allowed}

/* ============ Loader ============ */
.tr-loader{display:none;align-items:center;gap:14px;color:var(--c-sub);margin-top:16px}
.tr-loader svg{width:60px;height:60px}

/* ============ Ergebnis-Karten ============ */
.tr-group{display:flex;flex-direction:column;margin-top:24px}
.tr-group-title{font-size:clamp(18px,2vw,22px);font-weight:900;color:#111827;margin:6px 0 14px;letter-spacing:.2px}

.tr-cards-2{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
@media(min-width:900px){.tr-cards-2{grid-template-columns:1fr 1fr}}
.tr-cards--wide{grid-template-columns:1fr}
@media(min-width:900px){.tr-cards--wide{grid-template-columns:1.15fr 1.15fr}}

.tr-card{
  border:1px solid var(--c-border);border-radius:16px;padding:18px;background:var(--c-bg);
  display:flex;flex-direction:column;min-height:220px;position:relative;overflow:hidden
}
.tr-card-header{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:6px}
.tr-tier{margin:0;color:var(--c-text);font-weight:900;font-size:20px;white-space:nowrap}
.tr-subtitle{font-size:12px;color:var(--c-sub);margin-top:2px}
.tr-price{font-size:clamp(24px,3vw,30px);font-weight:800;margin:6px 0}
.tr-per{font-size:14px;font-weight:500;color:var(--c-sub)}
.tr-badge-rec{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;border:1px solid #cfe8fb;background:#f5fbff;color:#085c9c;font-size:12px}
.tr-badge-rec svg{width:14px;height:14px}

.tr-brief{margin-top:2px;display:flex;flex-direction:column;flex:0 0 auto}
.tr-brief .tr-list{margin:0 0 8px 16px;padding:0;flex:1 1 auto}
.tr-actions{margin-top:8px;display:flex;gap:10px}

/* ============ Details/Accordion ============ */
.tr-acc{margin-top:10px;border-top:1px solid var(--c-border);padding-top:8px}
.tr-acc summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:2px solid var(--c-border);border-radius:10px;
  background:#fff;color:var(--c-text);font-weight:800;user-select:none
}
.tr-acc[open] summary{background:#f3f4f6;margin-bottom:6px}
.tr-acc summary::-webkit-details-marker{display:none}
.tr-acc summary .chev{transition:transform .2s ease}
.tr-acc[open] summary .chev{transform:rotate(90deg)}
.tr-acc h5{margin:8px 0 6px;font-size:14px}
.tr-acc ul{margin:0 0 8px 16px;padding:0}

/* ============ Zusatzversicherungen ============ */
.tr-addons{margin-top:20px}
.tr-addons-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:900px){.tr-addons-grid{grid-template-columns:1fr 1fr}}
.tr-addon-card{border:1px solid var(--c-border);border-radius:14px;padding:12px;background:var(--c-soft);display:flex;flex-direction:column;min-height:116px}
.tr-addon-head h4{margin:0 0 6px;font-size:14px;font-weight:900;color:#111827}
.tr-inline{flex-direction:row;align-items:center;gap:8px}
.tr-inline>span{white-space:nowrap}
.tr-select-sm{height:36px;padding:0 10px;width:160px;max-width:160px}
.tr-addon-foot{margin-top:auto;display:flex;justify-content:flex-end;align-items:center;gap:12px}
.tr-addon-price{font-size:18px;font-weight:800;color:#111827}
.tr-addon-note{font-size:12px;color:var(--c-sub)}

/* ============ CTA unten / Beratung ============ */
.tr-cta-bottom{margin-top:28px;display:grid;gap:12px}
.beratung{border:1px solid var(--c-border);border-radius:14px;padding:14px;background:var(--c-soft)}
#beratung-form.hidden{display:none!important}

/* ============ Checkout ============ */
.tr-checkout-mode .tr-cards-2{grid-template-columns:1fr}
.tr-checkout-mode .tr-cards-2 .tr-card:not(.is-selected){display:none}
.tr-checkout-mode .tr-cards-2 .tr-card.is-selected{grid-column:1/-1}

#tr-checkout{margin-top:16px;padding:16px;border:1px solid var(--c-border);border-radius:12px;background:#fff}
.tr-step{display:none}
.tr-step.is-active{display:block}

.tr-conds{margin-top:16px;border:1px solid var(--c-border);padding:12px;border-radius:10px}
.tr-check{display:flex;align-items:flex-start;gap:8px;margin:6px 0}

/* Step-Navigation (sichtbar, konsistent) */
.tr-step-nav{display:flex;align-items:center;gap:12px;margin-top:12px}
.tr-step-nav .tr-btn{padding:10px 14px;border-radius:10px;border:2px solid var(--c-border,#e5e7eb);background:#fff;cursor:pointer}
.tr-step-nav [data-prev]{background:#f3f4f6;color:#374151;border-color:#e5e7eb}
.tr-step-nav [data-next],
.tr-step-nav [data-submit]{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-weight:800}
.tr-step-nav [data-next]:hover,
.tr-step-nav [data-submit]:hover{background:var(--c-primary-600);border-color:var(--c-primary-600)}
.tr-step-nav .tr-btn:disabled{opacity:.5!important;cursor:not-allowed!important}

/* Buttons per Step (letzter Step = 5) */
.tr-step [data-submit]{display:none}
.tr-step [data-next]{display:inline-flex}
.tr-step.is-active[data-step="5"] [data-next]{display:none}
.tr-step.is-active[data-step="5"] [data-submit]{display:inline-flex}

/* ============ Responsive Regeln ============ */

/* Basis-Autoflow: auf schmalen Screens KEIN 'dense' (verhindert Verrutschen) */
#tr-checkout .tr-step .tr-grid{grid-auto-flow:row}

/* Mobile/Tablet < 900px: strikt 1 Spalte */
@media (max-width:899px){
  #tarifrechner-eukv .tr-grid{grid-template-columns:1fr!important}
  #tarifrechner-eukv .tr-field,
  #tarifrechner-eukv .tr-input,
  #tarifrechner-eukv .tr-select,
  #tarifrechner-eukv .tr-textarea{width:100%;max-width:100%}
  #tarifrechner-eukv .tr-select-sm{width:100%!important;max-width:100%!important}
  #tr-checkout .tr-step-nav{flex-direction:column;align-items:stretch}
  #tr-checkout .tr-step-nav .tr-btn{justify-content:center;width:100%;padding:12px 16px;line-height:1.3}
}

/* Desktop ≥ 900px: 4-Spalten-Grid + 'dense' */
@media (min-width:900px){
  .tr-grid{grid-template-columns:repeat(4,1fr)}
  #tr-checkout .tr-step .tr-grid{grid-auto-flow:row dense}

  /* ===== STEP 2 – Adressangaben ===== */
  #tr-checkout .tr-step[data-step="2"] .tr-grid :is(label.tr-field):has([name="address"]){grid-column:1 / span 3}
  #tr-checkout .tr-step[data-step="2"] .tr-grid :is(label.tr-field):has([name="zip"]){grid-column:4}
  #tr-checkout .tr-step[data-step="2"] .tr-grid :is(label.tr-field):has([name="city"]){grid-column:1 / span 2}
  #tr-checkout .tr-step[data-step="2"] .tr-grid :is(label.tr-field):has([name="country"]){grid-column:3 / span 2}

  /* ===== STEP 3 – Versicherungsangaben (2 Felder pro Reihe) ===== */
  #tr-checkout .tr-step[data-step="3"] .tr-grid :is(label.tr-field):has([name="davor_versichert"]){grid-column:1 / span 2}
  #tr-checkout .tr-step[data-step="3"] .tr-grid :is(label.tr-field):has([name="davor_versichert_bis"]){grid-column:3 / span 2}

  #tr-checkout .tr-step[data-step="3"] .tr-grid :is(label.tr-field):has([name="tut_job_status_dropdown"]){grid-column:1 / span 2}
  #tr-checkout .tr-step[data-step="3"] .tr-grid :is(label.tr-field):has([name="beruf"]){grid-column:3 / span 2}

  #tr-checkout .tr-step[data-step="3"] .tr-grid :is(label.tr-field):has([name="bevorzugte_zahlungsmethode"]){grid-column:1 / span 2}
  #tr-checkout .tr-step[data-step="3"] .tr-grid :is(label.tr-field):has([name="zahlungsrhythmus"]){grid-column:3 / span 2}

  /* IBAN – volle Breite, robust (egal ob Wrapper/Label) */
  #tr-checkout .tr-step[data-step="3"] .tr-grid :is(#iban-wrap,#iban_wrap, label.tr-field:has([name="tut_iban"]), .tr-field:has([name="tut_iban"])){
    grid-column:1 / -1 !important;
    margin:0 !important;
    width:100% !important;
    justify-self:stretch;
    text-align:left;
  }

  /* ===== STEP 4 – Gesundheitsangaben ===== */
  #tr-checkout .tr-step[data-step="4"] .tr-grid :is(label.tr-field):has([name="hausarzt"]){grid-column:auto}
  #tr-checkout .tr-step[data-step="4"] .tr-grid :is(label.tr-field):has([name="beschreibung_stationar_ambulant_chronisch"]){
    grid-column:1 / -1 !important;
  }
}

/* Kleinere Kartenhöhe auf Tablets/Desk */
@media(min-width:640px){.tr-card{min-height:200px}}

/* ================= Portrait-Fix für Mobile ================= */
@media (max-width:1024px) and (orientation:portrait){
  #tr-checkout .tr-step .tr-grid{grid-auto-flow:row !important}
  #tr-checkout .tr-step[data-step="2"] .tr-grid,
  #tr-checkout .tr-step[data-step="3"] .tr-grid{grid-template-columns:1fr !important}
  #tr-checkout .tr-step[data-step="2"] .tr-grid :is(label.tr-field, .tr-field),
  #tr-checkout .tr-step[data-step="3"] .tr-grid :is(label.tr-field, .tr-field){grid-column:1 / -1 !important}
  #tr-checkout .tr-step[data-step="3"] .tr-grid :is(#iban-wrap,#iban_wrap,
    label.tr-field:has([name="tut_iban"]), .tr-field:has([name="tut_iban"])){
    grid-column:1 / -1 !important;
    margin:0 !important; width:100% !important; justify-self:stretch;
  }
  #tr-checkout .tr-step .tr-grid .tr-span-2{grid-column:1 / -1 !important}
  #tr-checkout .tr-step .tr-grid :is(input.tr-input,select.tr-select,textarea.tr-textarea){
    width:100% !important; max-width:100% !important;
  }
}

/* Step 4: Beschreibung IMMER unter Hausarzt, volle Breite */
#tr-checkout .tr-step[data-step="4"] .tr-grid
  :is(label.tr-field):has([name="beschreibung_stationar_ambulant_chronisch"]){
  grid-column:1 / -1 !important;
}

/* Anker-Offset für Formular */
#tr-checkout{ scroll-margin-top: 80px; }

/* === Step 5: Elemente sauber im Grid halten === */
#tr-checkout .tr-step[data-step="5"] .tr-grid .tr-sv-info,
#tr-checkout .tr-step[data-step="5"] .tr-grid .tr-hint-out,
#tr-checkout .tr-step[data-step="5"] .tr-grid .tr-step-nav{
  grid-column: 1 / -1;
}

#tr-checkout .tr-step[data-step="5"] .tr-sv-info{ margin-top: 12px; }
#tr-checkout .tr-step[data-step="5"] .tr-hint-out{ margin-top: 12px; }

#tr-checkout .tr-step[data-step="5"] .tr-hint-out textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#tr-checkout .tr-step[data-step="5"] .tr-step-nav{
  width: 100%;
  display: flex;
  justify-content: flex-end; /* ggf. center */
  gap: 8px;
}