[hidden] { display: none !important; }
.field select { width:100%; padding:14px; border:1px solid #d7dfe8; border-radius:12px; background:white; font:inherit; }
.live-panel { margin-top:28px; padding-top:20px; border-top:1px solid #d7dfe8; }
.live-panel h2 { font-size:1.3rem; }
#liveVariants { display:grid; gap:14px; margin:20px 0; }
.live-variant { display:block; padding:20px; border:2px solid #d7dfe8; border-radius:14px; cursor:pointer; }
.live-variant:has(input:checked) { border-color:#295ca5; background:#f1f6fd; }
.live-variant h3 { display:inline; margin-left:10px; }
.live-price { font-size:1.7rem; font-weight:700; margin:12px 0; }
.live-variant li { margin:6px 0; }
.live-panel > button { margin:6px 0; width:100%; }
.live-demo { text-align:center; background:#fff1c6; padding:12px; color:#624509; }
.next-stage { animation: stage-arrive .3s ease-out; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; width:100%; max-width:none; margin:24px 0; }
.choice-card { border:1px solid var(--line,#d7dfe8); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px; }
.choice-card { cursor:pointer; position:relative; border:2px solid #d7dfe8; }
.choice-card:has(input:checked) { border-color:#295ca5; background:#f5f8ff; }
.choice-card:focus-within { outline:3px solid #a7bde0; outline-offset:3px; }
.choice-card input { accent-color:#295ca5; width:20px; height:20px; }
.choice-card ul { padding-left:18px; margin:0; line-height:1.65; font-size:.9rem; }
.choice-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choice-actions p { grid-column:1/-1; text-align:center; }
.choice-actions button:disabled { opacity:.5; cursor:not-allowed; }
.choice-card h2 { font-size:1.45rem; margin:0; }
.choice-card p { margin:0; line-height:1.5; }
.choice-card .choice-price { color:#204c7f; font-size:1.4rem; font-weight:700; }
.choice-card .btn { width:100%; padding:14px 8px; font-size:.92rem; }
.application-frame { width:100%; min-height:450px; border:0; display:block; margin-top:20px; }
.appointment-form { display:grid; gap:20px; margin-top:24px; }
.appointment-form label { display:grid; gap:8px; }
.appointment-form input,.appointment-form select { width:100%; padding:14px; border:1px solid #d7dfe8; border-radius:12px; font:inherit; background:white; }
.next-stage > .btn-ghost { margin-bottom:24px; }
@keyframes stage-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:700px) { .choice-grid,.choice-actions { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .next-stage { animation:none; } }
.wrap:has(.next-stage),.wrap.wrap--variants { max-width:1240px; }
.wrap.wrap--variants .card,.wrap.wrap--variants .steps,.next-stage { width:100%; min-width:0; }
.wrap.wrap--variants .next-stage { align-self:stretch; flex:0 0 100%; }
.next-stage .choice-grid { display:grid; width:100%; max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
@media (max-width:700px) { .next-stage .choice-grid { grid-template-columns:minmax(0,1fr) !important; } }

/* Tarifvergleich: beide Tarife als gleichwertige, zentrierte Auswahl. */
.next-stage { max-width:960px; margin-inline:auto; }
.next-stage > .q,.next-stage > .q-hint { text-align:center; }
.next-stage > .q-hint { max-width:68ch; margin-inline:auto; }
.next-stage > .step-note { margin:20px auto 24px; }
.next-stage .choice-grid,.next-stage .choice-actions,.choice-coverage {
  width:min(100%, 900px); margin-inline:auto;
}
.next-stage .choice-grid { gap:18px; margin-top:26px; }
.choice-card {
  min-height:235px; padding:24px; gap:13px;
  border-color:var(--line-strong); box-shadow:0 2px 8px oklch(30% 0.03 265 / .04);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.choice-card:hover { border-color:var(--accent-line); box-shadow:0 8px 22px oklch(30% 0.04 265 / .08); transform:translateY(-2px); }
.choice-card:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-line),0 8px 22px oklch(48% 0.13 258 / .1); }
.choice-card input { flex:0 0 20px; }
.choice-card h2 { margin-top:2px; }
.choice-card .choice-price { margin:6px 0 0; font-size:clamp(1.45rem,2.5vw,1.8rem); letter-spacing:-.025em; }
.choice-card > strong { font-size:.98rem; }
.choice-card > p:last-child { color:var(--ink-soft); }
.choice-coverage { margin-top:18px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
.choice-coverage summary { padding:15px 18px; color:var(--accent); font-weight:650; cursor:pointer; }
.choice-coverage summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
.choice-coverage ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; margin:0; padding:0 22px 8px 40px; line-height:1.45; }
.choice-coverage li::marker { color:var(--good); }
.choice-coverage p { margin:8px 18px 16px; color:var(--ink-mute); font-size:.8rem; line-height:1.5; }
.next-stage .choice-actions { grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.next-stage .choice-actions p { margin:0 0 4px; color:var(--ink-soft); }
.next-stage .choice-actions .btn { min-height:52px; }
@media(max-width:700px) {
  .next-stage .choice-grid,.next-stage .choice-actions { grid-template-columns:minmax(0,1fr) !important; }
  .choice-card { min-height:0; padding:20px; }
  .choice-coverage ul { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .choice-card { transition:none; } }

/* Der eingebettete Abschluss soll auf schmalen Handys die verfügbare
   Bildschirmbreite nutzen, statt durch zwei Kartenränder eingeengt zu sein. */
@media (max-width: 480px) {
  .wrap.wrap--variants { padding-inline: 12px; }
  .wrap.wrap--variants .card { padding-inline: 16px; }
  .wrap.wrap--variants .card:has(.application-frame) { padding-inline: 14px; }
}
@media (max-width: 300px) {
  .head { flex-wrap: wrap; }
  .brand { min-width: 0; }
  .product-proof { margin-left: auto; }
}

/* Lesbare Fragen und volle Formularbreite auf kleinen Handys. */
.q, .lbl { font-weight: 700; }
@media (max-width: 480px) {
  .wrap { padding: 20px 12px 28px; }
  .head { flex-wrap: wrap; gap: 10px; }
  .brand { min-width: 0; }
  .brand-mark { flex-shrink: 0; }
  .product-proof { margin-left: auto; }
  .card { padding-inline: 16px; }
  .form-grid, .form-grid > *, .opt-tx, .step, .choice-card { min-width: 0; }
  .q, .q-hint, .lbl, .opt-tx, .btn, .verify-address, .step-note, .foot { overflow-wrap: anywhere; }
  .lbl { font-size: .95rem; line-height: 1.4; }
  input, select { min-width: 0; max-width: 100%; font-size: 1rem; }
  .btn { min-height: 48px; white-space: normal; }
  .tiles .opt { padding: 18px 10px; }
}