/* ============ Design Tokens - Firmenfarben ============ */
:root{
  /* Firmenfarben */
  --c-primary:#014351; /* Dunkles Blau/Grün - Hauptfarbe */
  --c-primary-light:#00a9b8; /* Türkis/Cyan - Akzentfarbe */
  --c-accent:#b6c709; /* Gelbgrün/Lime - Highlight */
  --c-bg-light:#f0f0f0; /* Hellgrau - Hintergrund */
  
  /* Abgeleitete Farben */
  --c-primary-hover:#002d38; /* Dunkler für Hover */
  --c-primary-light-hover:#008a96; /* Dunkleres Türkis für Hover */
  --c-accent-hover:#9ba006; /* Dunkleres Gelbgrün für Hover */
  
  /* Text & UI */
  --c-text:#0f172a; 
  --c-sub:#4a5568; 
  --c-border:#d1d5db; 
  --c-bg:#fff; 
  --c-soft:#f0f0f0;
  --c-border-light:#e5e7eb;
  
  /* Schatten */
  --shadow-sm:0 1px 2px 0 rgba(1, 67, 81, 0.05);
  --shadow-md:0 4px 6px -1px rgba(1, 67, 81, 0.1), 0 2px 4px -1px rgba(1, 67, 81, 0.06);
  --shadow-lg:0 10px 15px -3px rgba(1, 67, 81, 0.1), 0 4px 6px -2px rgba(1, 67, 81, 0.05);
  
  /* Border Radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:9999px;
}

/* ============ Base/Layout ============ */
.tr-wrap{
  max-width:1120px;margin:0 auto;padding:32px 20px;
  background:var(--c-bg);
}
.tr-h2{
  margin:0 0 12px;font-weight:900;font-size:clamp(22px,2.4vw,30px);
  letter-spacing:.2px;color:var(--c-primary);
}
.tr-h3{
  margin:0 0 16px;font-weight:800;font-size:clamp(18px,2vw,24px);
  color:var(--c-primary);padding-bottom:8px;
  border-bottom:2px solid var(--c-bg-light);
}
.tr-h4{
  margin:8px 0 12px;font-weight:800;font-size:clamp(16px,1.8vw,20px);
  color:var(--c-primary);
}
.tr-note{
  font-size:14px;line-height:1.6;color:var(--c-sub);
  padding:12px;background:var(--c-bg-light);
  border-radius:var(--radius-md);border-left:4px solid var(--c-primary-light);
}

.tr-grid{
  display:grid;gap:18px;grid-template-columns:1fr;
  padding:20px;background:var(--c-bg-light);
  border-radius:var(--radius-lg);border:2px solid var(--c-border-light);
}
.tr-field{
  display:flex;flex-direction:column;gap:8px;min-width:0;
  /* Touch-Optimierung: Sicherstellen dass Labels klickbar sind */
  position:relative;
}
.tr-field>span{
  font-size:14px;color:var(--c-text);font-weight:600;
  letter-spacing:.2px;
  /* Touch-Optimierung */
  touch-action:manipulation;
}
/* Sicherstellen dass Select-Dropdowns in Labels vollständig klickbar sind */
.tr-field select.tr-select,
.tr-field input.tr-input,
.tr-field textarea.tr-textarea{
  /* Z-Index sicherstellen dass Felder über anderen Elementen liegen */
  position:relative;
  z-index:1;
}

.tr-input,.tr-select,.tr-textarea{
  width:100%;box-sizing:border-box;border:2px solid var(--c-border);border-radius:var(--radius-md);font-size:16px;
  transition:all 0.2s ease;background:var(--c-bg);
  /* Touch-Optimierung für mobile Geräte */
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(0,169,184,0.1);
}
.tr-input:focus,.tr-select:focus,.tr-textarea:focus{
  border-color:var(--c-primary-light);outline:none;box-shadow:0 0 0 3px rgba(0,169,184,0.1);
}
.tr-input:hover,.tr-select:hover,.tr-textarea:hover{border-color:var(--c-primary-light)}
.tr-input,.tr-select{height:48px;padding:0 16px}
/* Mobile: Mindesthöhe für Touch-Targets (iOS: 44px) */
@media (max-width:899px){
  .tr-input,.tr-select{
    min-height:48px; /* Sicherstellen dass Touch-Target groß genug ist */
  }
}
.tr-textarea{padding:12px 16px;min-height:120px;resize:vertical}

.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-light);outline-offset:2px
}

/* ============ Buttons ============ */
.tr-btn{
  height:48px;border-radius:var(--radius-md);border:0;padding:0 20px;
  font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  line-height:1.15;font-size:16px;transition:all 0.2s ease;box-shadow:var(--shadow-sm);
}
.tr-btn--primary{
  background:var(--c-primary);color:#fff;
  box-shadow:var(--shadow-md);
}
.tr-btn--primary:hover{
  background:var(--c-primary-hover);
  box-shadow:var(--shadow-lg);
  transform:translateY(-1px);
}
.tr-btn--primary:active{transform:translateY(0)}
.tr-btn-secondary{
  background:#fff;color:var(--c-primary);border:2px solid var(--c-primary);
}
.tr-btn-secondary:hover{
  background:var(--c-primary);color:#fff;
  box-shadow:var(--shadow-md);
}
.tr-btn--outline{background:#fff;color:var(--c-primary-light);border:2px solid var(--c-primary-light)}
.tr-btn--outline:hover{color:#fff;background:var(--c-primary-light);box-shadow:var(--shadow-md)}
.tr-btn--ghost{background:transparent;color:var(--c-text);border:2px solid var(--c-border);box-shadow:none}
.tr-btn--ghost:hover{background:var(--c-bg-light);border-color:var(--c-primary-light);color:var(--c-primary)}
.tr-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ============ Loader ============ */
.tr-loader{display:none;align-items:center;gap:14px;color:var(--c-sub);margin-top:20px;padding:20px;background:var(--c-bg-light);border-radius:var(--radius-lg)}
.tr-loader svg{width:60px;height:60px}

/* ============ Ergebnis-Karten ============ */
.tr-group{display:flex;flex-direction:column;margin-top:32px}
.tr-group-title{
  font-size:clamp(18px,2vw,22px);font-weight:900;color:var(--c-primary);
  margin:8px 0 20px;letter-spacing:.2px;padding-bottom:12px;border-bottom:2px solid var(--c-bg-light);
}

.tr-cards-2{display:grid;grid-template-columns:1fr;gap:20px;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:2px solid var(--c-border-light);border-radius:var(--radius-xl);padding:24px;
  background:var(--c-bg);display:flex;flex-direction:column;min-height:240px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:all 0.3s ease;
}
.tr-card:hover{
  box-shadow:var(--shadow-lg);border-color:var(--c-primary-light);
  transform:translateY(-2px);
}
.tr-card-header{
  display:flex;align-items:flex-start;gap:12px;justify-content:space-between;
  margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--c-bg-light);
}
.tr-tier{
  margin:0;color:var(--c-primary);font-weight:900;font-size:22px;
  white-space:nowrap;letter-spacing:.5px;
}
.tr-subtitle{font-size:13px;color:var(--c-sub);margin-top:4px;font-weight:500}
.tr-price{
  font-size:clamp(28px,3.5vw,36px);font-weight:900;margin:12px 0;
  color:var(--c-primary);line-height:1.2;
}
.tr-per{font-size:15px;font-weight:500;color:var(--c-sub);margin-left:4px}
.tr-badge-rec{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border-radius:var(--radius-full);border:2px solid var(--c-accent);
  background:linear-gradient(135deg, var(--c-accent) 0%, #d4e50a 100%);
  color:var(--c-primary);font-size:12px;font-weight:700;
  box-shadow:var(--shadow-sm);
}
.tr-badge-rec svg{width:14px;height:14px;fill:var(--c-primary)}

.tr-brief{margin-top:8px;display:flex;flex-direction:column;flex:0 0 auto}
.tr-brief .tr-list{
  margin:0 0 12px 20px;padding:0;flex:1 1 auto;
  list-style:none;
}
.tr-brief .tr-list li{
  margin:6px 0;padding-left:8px;position:relative;
  font-size:14px;line-height:1.6;color:var(--c-text);
}
.tr-brief .tr-list li::before{
  content:"•";color:var(--c-primary-light);font-weight:bold;
  position:absolute;left:-12px;
}
.tr-actions{margin-top:16px;display:flex;gap:12px;padding-top:16px;border-top:1px solid var(--c-bg-light)}

/* Gemeinsame Aktionszeile in Karten */
.tr-card .tr-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap; /* mobil bricht sauber um */
}

/* Summary nicht über volle Breite, damit rechts Platz für den Button bleibt */
.tr-card .tr-actions > details > summary {
  display: inline-flex;      /* bleibt kompakt */
  align-items: center;
  white-space: nowrap;       /* kein Zeilenumbruch im Label */
}

/* Button soll sich NICHT auf volle Breite strecken */
.tr-card .tr-actions > [data-action="beratung"] {
  flex: 0 0 auto;
}

/* ============ Details/Accordion ============ */
.tr-acc{margin-top:12px;border-top:1px solid var(--c-border-light);padding-top:12px}
.tr-acc summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border:2px solid var(--c-border);border-radius:var(--radius-md);
  background:var(--c-bg);color:var(--c-primary);font-weight:700;user-select:none;
  transition:all 0.2s ease;
}
.tr-acc summary:hover{
  background:var(--c-bg-light);border-color:var(--c-primary-light);
  color:var(--c-primary-hover);
}
.tr-acc[open] summary{
  background:var(--c-bg-light);margin-bottom:12px;border-color:var(--c-primary-light);
}
.tr-acc summary::-webkit-details-marker{display:none}
.tr-acc summary .chev{
  transition:transform 0.3s ease;color:var(--c-primary-light);
  font-size:14px;
}
.tr-acc[open] summary .chev{transform:rotate(90deg)}
.tr-acc h5{
  margin:12px 0 8px;font-size:15px;font-weight:700;
  color:var(--c-primary);padding-bottom:4px;border-bottom:1px solid var(--c-bg-light);
}
.tr-acc ul{
  margin:0 0 12px 20px;padding:0;list-style:none;
}
.tr-acc ul li{
  margin:6px 0;padding-left:8px;position:relative;
  font-size:14px;line-height:1.6;color:var(--c-text);
}
.tr-acc ul li::before{
  content:"•";color:var(--c-primary-light);font-weight:bold;
  position:absolute;left:-12px;
}

/* ============ Zusatzversicherungen ============ */
.tr-addons{margin-top:24px}
.tr-addons-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.tr-addons-grid{grid-template-columns:1fr 1fr}}
.tr-addon-card{
  border:2px solid var(--c-border-light);border-radius:var(--radius-lg);
  padding:16px;background:linear-gradient(135deg, var(--c-bg-light) 0%, #ffffff 100%);
  display:flex;flex-direction:column;min-height:130px;
  box-shadow:var(--shadow-sm);transition:all 0.2s ease;
}
.tr-addon-card:hover{
  box-shadow:var(--shadow-md);border-color:var(--c-primary-light);
  transform:translateY(-1px);
}
.tr-addon-head h4{
  margin:0 0 10px;font-size:15px;font-weight:900;
  color:var(--c-primary);letter-spacing:.3px;
}
.tr-inline{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}
.tr-inline>span{white-space:nowrap;font-weight:600;color:var(--c-text)}
.tr-select-sm{
  height:40px;padding:0 12px;width:160px;max-width:160px;
  border-radius:var(--radius-md);border:2px solid var(--c-border);
  transition:all 0.2s ease;
}
.tr-select-sm:focus{border-color:var(--c-primary-light);box-shadow:0 0 0 3px rgba(0,169,184,0.1)}
.tr-addon-foot{
  margin-top:auto;display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--c-border-light);
}
.tr-addon-price{
  font-size:20px;font-weight:900;color:var(--c-primary);
  letter-spacing:.5px;
}
.tr-addon-note{font-size:13px;color:var(--c-sub);font-weight:500}

/* ============ CTA unten / Beratung ============ */
.tr-cta-bottom{margin-top:32px;display:grid;gap:16px}
/* Standard: unten ausgeblendet */
#tarifrechner-eukv .tr-cta-bottom{ display:none !important; }
/* Wenn per Karten-Button geöffnet wird, Wrapper sichtbar machen */
#tarifrechner-eukv.is-beratung-open .tr-cta-bottom{ display:block !important; }

.beratung{
  border:2px solid var(--c-primary-light);border-radius:var(--radius-lg);
  padding:20px;background:linear-gradient(135deg, rgba(0,169,184,0.05) 0%, var(--c-bg) 100%);
  box-shadow:var(--shadow-md);
}
#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:24px;padding:24px;
  border:2px solid var(--c-primary-light);border-radius:var(--radius-xl);
  background:var(--c-bg);box-shadow:var(--shadow-md);
}
.tr-checkout-head{
  margin-bottom:24px;padding-bottom:16px;
  border-bottom:2px solid var(--c-bg-light);
}
.tr-step{display:none}
.tr-step.is-active{display:block}

.tr-conds{
  margin-top:20px;border:2px solid var(--c-border-light);
  padding:16px;border-radius:var(--radius-lg);
  background:var(--c-bg-light);
}
.tr-conds legend{
  font-weight:700;color:var(--c-primary);padding:0 8px;
  font-size:15px;
}
.tr-check{
  display:flex;align-items:flex-start;gap:10px;
  margin:10px 0;padding:12px;border-radius:var(--radius-sm);
  transition:background 0.2s ease;
  /* Touch-Optimierung: Größerer Touch-Bereich */
  min-height:44px; /* iOS Mindestgröße für Touch-Targets */
  cursor:pointer;
  /* Touch-Action für bessere Responsiveness auf mobilen Geräten */
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(0,169,184,0.1);
}
.tr-check:hover{background:rgba(0,169,184,0.05)}
.tr-check input[type="checkbox"]{
  margin-top:2px;
  /* Größere Checkboxen für bessere Touch-Bedienbarkeit (iOS Mindestgröße: 44x44px) */
  width:24px;height:24px;min-width:24px;min-height:24px;
  cursor:pointer;
  accent-color:var(--c-primary);
  /* Touch-Optimierung */
  touch-action:manipulation;
  /* Flex-Shrink verhindern, damit Checkbox nicht schrumpft */
  flex-shrink:0;
}
/* Mobile: Noch größere Checkboxen für bessere Bedienbarkeit */
@media (max-width:899px){
  .tr-check input[type="checkbox"]{
    width:28px;height:28px;min-width:28px;min-height:28px;
  }
  .tr-check{
    padding:14px; /* Mehr Padding für größeren Touch-Bereich */
    min-height:52px; /* Größerer Touch-Bereich auf mobilen Geräten */
  }
}
.tr-check span{
  font-size:14px;line-height:1.5;color:var(--c-text);
  /* Flex-Grow damit Text den verfügbaren Platz nutzt */
  flex:1;
  /* Touch-Optimierung: Text sollte auch klickbar sein */
  pointer-events:auto;
}

/* Step-Navigation (sichtbar, konsistent) */
.tr-step-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:20px;padding-top:20px;
  border-top:2px solid var(--c-bg-light);
}
.tr-step-nav .tr-btn{
  padding:12px 20px;border-radius:var(--radius-md);
  border:2px solid var(--c-border);background:#fff;cursor:pointer;
  transition:all 0.2s ease;
}
.tr-step-nav [data-prev]{
  background:var(--c-bg-light);color:var(--c-text);
  border-color:var(--c-border);
}
.tr-step-nav [data-prev]:hover{
  background:var(--c-primary-light);color:#fff;
  border-color:var(--c-primary-light);
}
.tr-step-nav [data-next],
.tr-step-nav [data-submit]{
  background:var(--c-primary);border-color:var(--c-primary);
  color:#fff;font-weight:700;box-shadow:var(--shadow-md);
}
.tr-step-nav [data-next]:hover,
.tr-step-nav [data-submit]:hover{
  background:var(--c-primary-hover);border-color:var(--c-primary-hover);
  box-shadow:var(--shadow-lg);transform:translateY(-1px);
}
.tr-step-nav .tr-btn:disabled{opacity:.5!important;cursor:not-allowed!important;transform:none!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}

/* Fortschrittsleiste */
.tr-progress-wrap{margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--c-bg-light,#e5e7eb)}
.tr-progress-bar{display:flex;gap:8px;align-items:center;justify-content:space-between}
.tr-progress-fill{flex:1;height:8px;background:var(--c-bg-light,#e5e7eb);border-radius:4px;overflow:hidden;position:relative}
.tr-progress-indicator{height:100%;background:var(--c-primary,#0ea5e9);transition:width 0.3s ease;width:20%}
.tr-progress-text{margin-left:12px;font-size:14px;font-weight:600;color:var(--c-text,#374151);white-space:nowrap}

/* 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:flex;
  align-items:center;
  gap:4px;
}
.tr-field-error-msg span:first-child{font-size:16px}

/* ============ Summary & Doku-Links (aus JavaScript extrahiert) ============ */
.tr-docs-box{
  margin:12px 0 10px;padding:12px 16px;
  background:linear-gradient(135deg, rgba(0,169,184,0.1) 0%, var(--c-bg-light) 100%);
  border-radius:var(--radius-md);border:1px solid var(--c-primary-light);
}
.tr-docs-box a{
  word-break:break-word;color:var(--c-primary);
  text-decoration:none;font-weight:600;
  transition:color 0.2s ease;
}
.tr-docs-box a:hover{color:var(--c-primary-hover);text-decoration:underline}
.tr-summary .tr-summary-row{display:block;margin:6px 0;padding:4px 0}
.tr-summary .tr-summary-row strong{
  margin-right:8px;color:var(--c-primary);font-weight:700;
}
.tr-service-hinweis{
  background:linear-gradient(135deg, rgba(182,199,9,0.1) 0%, rgba(182,199,9,0.05) 100%);
  border:2px solid var(--c-accent);border-radius:var(--radius-lg);
  padding:16px;margin:16px 0;
}
.tr-service-hinweis p{
  margin:6px 0;color:var(--c-text);line-height:1.6;
}
.tr-service-hinweis p strong{color:var(--c-primary)}

/* ============ 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:220px}}

/* ================= 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;
}

/* === Step 5: Touch-Optimierung - Sicherstellen dass Checkboxen und Selects nicht blockiert werden === */
#tr-checkout .tr-step[data-step="5"] .tr-check,
#tr-checkout .tr-step[data-step="5"] .tr-check input[type="checkbox"],
#tr-checkout .tr-step[data-step="5"] label.tr-field:has(select[name="auswahl_servicevertrag"]),
#tr-checkout .tr-step[data-step="5"] select[name="auswahl_servicevertrag"]{
  /* Sicherstellen dass diese Elemente über anderen liegen und klickbar sind */
  position:relative;
  z-index:10;
  /* Pointer-Events sicherstellen */
  pointer-events:auto;
  /* Touch-Action für bessere Responsiveness */
  touch-action:manipulation;
}
/* Sicherstellen dass Fieldset und Legend die Interaktion nicht blockieren */
#tr-checkout .tr-step[data-step="5"] .tr-conds{
  position:relative;
  z-index:1;
}
#tr-checkout .tr-step[data-step="5"] .tr-conds legend{
  position:relative;
  z-index:1;
  pointer-events:none; /* Legend sollte nicht klickbar sein */
}

/* ============ Zusätzliche visuelle Verbesserungen ============ */

/* Premium-Karten (TOP/PREMIUM) mit besonderem Akzent */
.tr-card[data-plan="TOP"],
.tr-card[data-plan="PREMIUM"]{
  border:2px solid var(--c-primary-light);
  background:linear-gradient(135deg, rgba(0,169,184,0.02) 0%, var(--c-bg) 100%);
  position:relative;
}
.tr-card[data-plan="TOP"]::before,
.tr-card[data-plan="PREMIUM"]::before{
  content:"";
  position:absolute;top:0;left:0;right:0;
  height:4px;background:linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-light) 50%, var(--c-accent) 100%);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
}

/* Verbesserte Loader-Animation mit Firmenfarben */
.tr-loader-anim rect{
  fill:var(--c-bg-light);
  stroke:var(--c-primary-light);
}
.tr-loader-anim circle,
.tr-loader-anim line{
  stroke:var(--c-primary-light);
}

/* Verbesserte Darstellung der Tarifgruppen */
.tr-group:first-of-type{
  margin-top:0;
}
.tr-group + .tr-group{
  margin-top:40px;
  padding-top:32px;
  border-top:2px solid var(--c-bg-light);
}

/* Visueller Akzent für das Hauptformular */
#tr-form{
  position:relative;
}
#tr-form::before{
  content:"";
  position:absolute;top:-2px;left:-2px;right:-2px;
  height:4px;background:linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  z-index:1;
}

/* Verbesserte Checkbox-Styling */
.tr-check input[type="checkbox"]:checked{
  accent-color:var(--c-primary);
}

/* Verbesserte 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='%23014351' 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-Optimierung: Sicherstellen dass Select-Dropdowns auf iOS funktionieren */
  touch-action:manipulation;
  /* Z-Index für Select-Dropdowns erhöhen, damit sie über anderen Elementen liegen */
  position:relative;
  z-index:2;
}
/* Mobile: Größerer Touch-Bereich für Select-Dropdowns */
@media (max-width:899px){
  .tr-select{
    /* Sicherstellen dass der gesamte Bereich klickbar ist */
    min-height:48px;
    /* Mehr Padding rechts für bessere Touch-Bedienbarkeit */
    padding-right:40px;
  }
}

/* Smooth Scroll-Verhalten */
html{
  scroll-behavior:smooth;
}

/* Verbesserte Lesbarkeit für Listen */
.tr-list li strong{
  color:var(--c-primary);
  font-weight:700;
}

/* Visueller Fokus für aktive/ausgewählte Karten */
.tr-card.is-selected{
  border-color:var(--c-accent);
  box-shadow:0 0 0 4px rgba(182,199,9,0.2), var(--shadow-lg);
}

/* Verbesserte Darstellung von Fehlermeldungen */
.tr-error{
  background:rgba(220,38,38,0.1);
  border:1px solid rgba(220,38,38,0.3);
  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;
}

/* Verbesserte Darstellung von Hilfetexten */
.tr-help{
  font-size:12px;color:var(--c-sub);
  margin-top:4px;line-height:1.4;
  font-style:italic;
}

/* Verbesserte Step-Dots (falls vorhanden) */
.tr-step-dots{
  display:flex;gap:8px;align-items:center;
}
.tr-step-dots::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--c-primary-light);
  box-shadow:0 0 0 2px var(--c-bg-light);
}