/* ============================================================
   ANMELDUNG / ONLINEABSCHLUSS  - scoped styles (.anm)
   Brand: blue #0E3E6E · yellow #FFED00 · Roboto
   ============================================================ */
.anm { --blue:#0E3E6E; --blue-d:#0a2f54; --yellow:#FFED00; --green:#1f9d55;
	--ink:#1c2733; --muted:#6b7785; --line:#e3e8ee; --bg:#f3f6f9;
	font-family:"Roboto",sans-serif; color:var(--ink); text-align:left; }
.anm *{ box-sizing:border-box; }
.anm a{ color:var(--blue); }

/* page head */
.anm-head h1 { font-size:54px; font-weight:300; margin:0 0 6px; color:var(--ink); }
.anm-head h1 strong { font-weight:700; }
.anm-head .lead { color:var(--muted); font-size:17px; max-width:640px; margin:0 0 28px; }

/* stepper */
.anm-steps { display:flex; gap:8px; margin:0 0 14px; flex-wrap:wrap; }
.anm-step { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--muted); }
.anm-step .num { width:26px; height:26px; border-radius:50%; background:#e7ecf2; color:var(--muted);
	display:grid; place-items:center; font-size:13px; font-weight:700; flex:0 0 auto; }
.anm-step .sep { width:26px; height:2px; background:var(--line); margin:0 4px; }
.anm-step.done .num, .anm-step.active .num { background:var(--blue); color:#fff; }
.anm-step.active { color:var(--ink); }
.anm-step.done .num i { font-size:11px; }
.anm-step.reachable { cursor:pointer; }
.anm-step.reachable:hover { color:var(--ink); }
.anm-step.reachable:hover .num { box-shadow:0 0 0 3px rgba(14,62,110,.15); }
.anm-progress { height:6px; background:#e7ecf2; border-radius:999px; overflow:hidden; margin:0 0 40px; }
.anm-progress .bar { height:100%; width:33%; background:var(--yellow); border-radius:999px;
	transition:width .45s cubic-bezier(.25,.8,.25,1); }

/* generic grid: main + aside */
.anm-cols { display:grid; grid-template-columns:1fr 360px; gap:36px; align-items:start; }
.anm-aside { position:sticky; top:184px; }

/* section block */
.anm-block { margin:0 0 34px; }
.anm-block > h2 { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue);
	font-weight:700; margin:0 0 4px; }
.anm-block > .q { font-size:23px; font-weight:700; margin:0 0 18px; color:var(--ink); }
.anm-block > .q .hint { font-size:14px; font-weight:400; color:var(--muted); display:block; margin-top:3px; }

/* TARIFF cards */
.tcards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tcard { position:relative; border:2px solid var(--line); border-radius:16px; background:#fff;
	cursor:pointer; transition:.18s; display:flex; flex-direction:column; overflow:hidden; }
.tcard:hover { border-color:#b9c6d6; box-shadow:0 8px 26px rgba(14,62,110,.08); }
.tcard.is-selected { border-color:var(--blue); box-shadow:0 10px 30px rgba(14,62,110,.14); }
.tcard .thead { padding:18px 18px 14px; }
.tcard.is-selected .thead { background:#f5f9fe; border-radius:14px 14px 0 0; }
.tcard .badge { position:absolute; top:0; right:0; background:var(--yellow); color:var(--blue);
	font-size:11px; font-weight:700; padding:4px 12px; border-bottom-left-radius:10px; }
.tcard .tick { width:24px; height:24px; border-radius:50%; border:2px solid var(--line);
	display:grid; place-items:center; color:#fff; font-size:12px; transition:.18s; margin-bottom:10px; }
.tcard.is-selected .tick { background:var(--blue); border-color:var(--blue); }
.tcard .name { font-size:18px; font-weight:700; color:var(--blue); }
.tcard .benefit { font-size:13.5px; color:var(--muted); line-height:1.45; margin:5px 0 0; min-height:38px; }
.tcard .mini-price { display:none; }
.tcard .feats { list-style:none; padding:14px 18px 4px; margin:0; flex:1; }
.tcard .feats li { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink);
	padding:5px 0; }
.tcard .feats li i { color:var(--green); font-size:12px; margin-top:3px; flex:0 0 auto; }
.tcard .feats li.off { color:#aab3bd; }
.tcard .feats li.off i { color:#cdd4db; }
.tcard .feats li.add i { color:var(--blue); font-size:13px; margin-top:2px; }
.tcard .tfoot { padding:14px 18px 18px; border-top:1px solid var(--line); margin-top:auto; }
.tcard .price { font-size:28px; font-weight:800; color:var(--ink); line-height:1; }
.tcard .price .cur { font-size:14px; font-weight:600; color:var(--muted); }
.tcard .unit { font-size:12.5px; color:var(--muted); margin-top:3px; }
.tcard .diff { display:inline-block; margin-top:9px; background:#eef4fb; color:var(--blue);
	font-size:12px; font-weight:700; padding:4px 10px; border-radius:8px; }
.tcard .diff.base { background:#eef2f6; color:var(--muted); }
.tcard .diff.save { background:#e8f7ee; color:var(--green); }
.tcard .diff.sel { background:var(--blue); color:#fff; }

/* ADD-ON cards */
.acards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.acard { position:relative; border:2px solid var(--line); border-radius:14px; background:#fff;
	padding:16px 16px 16px 54px; cursor:pointer; transition:.18s; }
.acard .ic { position:absolute; left:16px; top:16px; width:26px; text-align:center; font-size:19px; color:var(--blue); }
.acard .an { font-weight:700; font-size:15.5px; color:var(--ink); }
.acard .ad { font-size:13px; color:var(--muted); line-height:1.45; margin:3px 0 9px; }
.acard .ap { font-size:14px; font-weight:800; color:var(--blue); }
.acard .ap small { font-weight:400; color:var(--muted); font-size:11.5px; }
.acard .tick { position:absolute; right:14px; top:14px; width:22px; height:22px; border-radius:6px;
	border:2px solid var(--line); display:grid; place-items:center; color:#fff; font-size:11px; transition:.18s; }
.acard:hover { border-color:#b9c6d6; }
.acard.is-selected { border-color:var(--blue); background:#f5f9fe; }
.acard.is-selected .tick { background:var(--blue); border-color:var(--blue); }

/* ORDER BUMP (DriveCover) */
.bump { border:2px dashed #d8b400; border-radius:14px; background:#fffdf0; padding:18px 18px 18px 54px;
	position:relative; margin-top:14px; }
.bump .ic { position:absolute; left:18px; top:18px; font-size:20px; color:#b8920a; }
.bump .bt { font-weight:700; font-size:15.5px; }
.bump .bt .tag { background:#ffed00; color:var(--blue); font-size:10.5px; font-weight:700;
	padding:2px 8px; border-radius:6px; margin-left:8px; vertical-align:middle; }
.bump .bd { font-size:13px; color:#7a6a2e; line-height:1.5; margin:4px 0 12px; }
.bump .bcheck { display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; cursor:pointer; }
.bump .bcheck .box { width:22px; height:22px; border-radius:6px; border:2px solid #cdb43a; background:#fff;
	display:grid; place-items:center; color:#fff; font-size:11px; flex:0 0 auto; transition:.18s; }
.bump.on { background:#fff8d6; border-style:solid; }
.bump.on .bcheck .box { background:#0E3E6E; border-color:#0E3E6E; }
.bump .bdates { display:none; gap:14px; margin-top:14px; flex-wrap:wrap; align-items:flex-end; }
.bump.on .bdates { display:flex; }
.bump .bdates .fld { flex:1 1 150px; margin:0; }
.bump .bcalc { font-size:13px; color:#7a6a2e; }
.bump .bcalc b { color:var(--ink); }

/* SUMMARY box */
.sum { border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 8px 30px rgba(14,62,110,.07);
	overflow:hidden; }
.sum .sh { background:var(--blue); color:#fff; padding:15px 20px; font-weight:700; font-size:15px;
	display:flex; align-items:center; gap:8px; }
.sum .sb { padding:18px 20px; }
.sum .row { display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:8px 0;
	margin-left:0; margin-right:0; border-bottom:1px solid var(--line); }
.sum .row:last-of-type { border-bottom:0; }
.sum .row .k { color:var(--muted); }
.sum .row .k b { color:var(--ink); display:block; font-weight:700; font-size:14.5px; }
.sum .row .v { font-weight:700; white-space:nowrap; }
.sum .row.muted .v { color:var(--muted); font-weight:400; }
.sum .empty { color:var(--muted); font-size:13.5px; padding:6px 0 2px; }
.sum .total { display:flex; justify-content:space-between; align-items:baseline; margin-top:14px;
	padding-top:14px; border-top:2px solid var(--ink); }
.sum .total .tl { font-weight:700; font-size:15px; }
.sum .total .tv { font-weight:800; font-size:30px; color:var(--ink); }
.sum .total .tv .cur { font-size:15px; font-weight:600; color:var(--muted); }
.sum .seclabel { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
	font-weight:700; margin:18px 0 4px; }
.sum .paytoday { display:flex; justify-content:space-between; align-items:baseline; margin-top:12px;
	padding-top:12px; border-top:1px solid var(--line); }
.sum .paytoday .tl { font-weight:700; font-size:14.5px; }
.sum .paytoday .tv { font-weight:800; font-size:20px; color:var(--ink); }
.sum .paytoday .tv .cur { font-size:12px; font-weight:600; color:var(--muted); }
.sum .per { text-align:right; font-size:12px; color:var(--muted); margin-top:-2px; }
.sum .sf { padding:0 20px 20px; }
.sum .trust { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.sum .trust span { font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.sum .trust span i { color:var(--green); width:14px; text-align:center; }

/* buttons */
.anm .btnx { display:inline-flex; align-items:center; justify-content:center; gap:9px;
	border-radius:11px; font:700 15px/1 "Roboto",sans-serif; padding:15px 26px; cursor:pointer;
	border:2px solid transparent; text-decoration:none; transition:.15s; }
.anm .btnx.block { width:100%; }
.anm .btnx-blue { background:var(--blue); color:#fff; border-color:var(--blue); }
.anm .btnx-blue:hover { background:var(--blue-d); border-color:var(--blue-d); color:#fff; }
.anm .btnx-yellow { background:var(--yellow); color:var(--blue); border-color:var(--yellow); }
.anm .btnx-yellow:hover { filter:brightness(.95); color:var(--blue); }
.anm .btnx-ghost { background:#fff; color:var(--blue); border-color:#cfd8e2; }
.anm .btnx-ghost:hover { border-color:var(--blue); }
.anm .btnx[disabled] { opacity:.45; pointer-events:none; }

.anm-actions { display:flex; gap:12px; align-items:center; margin-top:8px; }
.anm-actions .spacer { flex:1; }

/* segmented WHO (Layout B) */
.who-seg { display:inline-flex; border:2px solid var(--line); border-radius:12px; background:#fff;
	padding:4px; gap:4px; }
.who-seg button { border:0; background:transparent; color:var(--muted); font:700 14.5px/1 "Roboto",sans-serif;
	padding:11px 22px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.who-seg button.on { background:var(--blue); color:#fff; }

/* Layout B tariff cards taller */
#cfgB .tcards { gap:16px; }

/* ---------- FORMS (Step 2 & 3) ---------- */
.card-panel { border:1px solid var(--line); border-radius:16px; background:#fff; padding:26px 28px;
	margin:0 0 24px; }
.card-panel > h3 { font-size:19px; font-weight:700; margin:0 0 4px; }
.card-panel > .psub { font-size:14px; color:var(--muted); margin:0 0 20px; }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.fld { margin:0; }
.fld.col2 { grid-column:span 2; }
.fld label { display:block; font-size:13.5px; font-weight:600; margin:0 0 6px; color:var(--ink); }
.fld input, .fld select { width:100%; height:46px; border:1.5px solid var(--line); border-radius:10px;
	padding:0 14px; font:400 15px/1 "Roboto",sans-serif; color:var(--ink); background:#fff; outline:none;
	transition:.15s; }
.fld textarea { width:100%; border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
	font:400 15px/1.5 "Roboto",sans-serif; outline:none; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(14,62,110,.10); }
.fld input::placeholder { color:#aab3bd; }
.fld .dob { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:8px; }
.fld select { -webkit-appearance:none; appearance:none; cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7785' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; }

/* validation error state */
.fld.has-error input, .fld.has-error select { border-color:#d23 !important; box-shadow:0 0 0 3px rgba(221,51,51,.22); }
.fld.has-error label { color:#d23; }

.coins-row { border-top:1px dashed var(--line); padding-top:20px; margin-top:20px; position:relative; }
.coins-row:first-of-type { border-top:0; padding-top:0; margin-top:0; }
.coins-row .ctitle { font-size:14px; font-weight:700; color:var(--blue); margin:0 0 14px; }
.coins-del { position:absolute; right:0; top:14px; background:none; border:0; color:var(--muted);
	font-size:13px; cursor:pointer; }
.coins-del:hover { color:#d23; }
.coins-add { display:inline-flex; align-items:center; gap:8px; background:none; border:0; color:var(--blue);
	font:700 14px/1 "Roboto",sans-serif; cursor:pointer; padding:6px 0; }

/* payment methods */
.pay-methods { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px; }
.pay-opt { position:relative; border:2px solid var(--line); border-radius:12px; background:#fff;
	padding:16px 14px; cursor:pointer; text-align:center; transition:.16s; }
.pay-opt:hover { border-color:#b9c6d6; }
.pay-opt.is-selected { border-color:var(--blue); background:#f5f9fe; }
.pay-opt i { font-size:22px; color:var(--blue); }
.pay-opt .pl { display:block; font-size:14px; font-weight:600; margin-top:7px; }
.pay-fields { margin-top:20px; }

.agb { display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--ink);
	line-height:1.55; margin:6px 0 22px; cursor:pointer; }
.agb .box { width:22px; height:22px; border-radius:6px; border:2px solid #c3cdd8; background:#fff;
	display:grid; place-items:center; color:#fff; font-size:11px; flex:0 0 auto; margin-top:1px; transition:.16s; }
.agb.on .box { background:var(--blue); border-color:var(--blue); }
.legal { font-size:12px; color:var(--muted); line-height:1.6; margin:0 0 18px; }

/* review list (step 3 summary inline) */
.review { list-style:none; padding:0; margin:0; }
.review li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.review li:last-child { border-bottom:0; }
.review li .rk { color:var(--muted); }
.review li .rv { font-weight:600; text-align:right; }
.review .rtotal { border-top:2px solid var(--ink); margin-top:6px; padding-top:14px; font-size:17px; }
.review .rtotal .rv { font-size:22px; font-weight:800; }

/* confirmation */
.confirm { text-align:center; max-width:640px; margin:10px auto 0; }
.confirm .cico { width:84px; height:84px; border-radius:50%; background:#e8f7ee; color:var(--green);
	display:grid; place-items:center; font-size:38px; margin:0 auto 22px; }
.confirm h2 { font-size:32px; font-weight:700; margin:0 0 10px; }
.confirm p { color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 8px; }
.confirm .polbox { border:1px solid var(--line); border-radius:14px; background:var(--bg); padding:20px 24px;
	margin:24px 0; text-align:left; }
.confirm .polbox .pl { font-size:13px; color:var(--muted); }
.confirm .polbox .pn { font-size:22px; font-weight:800; color:var(--blue); letter-spacing:.04em; }

.steppane { display:none; }
.steppane.show { display:block; }
.scroll-anchor { scroll-margin-top:184px; }

/* responsive */
@media (max-width: 991px){
	.anm-cols { grid-template-columns:1fr; }
	.anm-aside { position:static; margin-top:8px; }
	.tcards { grid-template-columns:1fr; }
	.acards { grid-template-columns:1fr; }
	.pay-methods { grid-template-columns:1fr; }
}
@media (max-width: 767px){
	.anm-head h1 { font-size:38px; }
	.fgrid { grid-template-columns:1fr; }
	.fld.col2 { grid-column:span 1; }
}
/* ---- global mobile sticky bar (all steps) ---- */
/* ---- global sticky bar ---- */
.anm .mbar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
	background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(14,62,110,.12);
	padding:10px 16px calc(10px + env(safe-area-inset-bottom)); align-items:center; gap:12px; }
.anm .mbar .ml { font-size:12px; color:var(--muted); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.anm .mbar .mv { font-size:21px; font-weight:800; line-height:1.1; }
.anm .mbar .mv .cur { font-size:12px; font-weight:600; color:var(--muted); }
.anm .mbar .mbar-sum { flex:1; min-width:0; }
.anm .mbar .btnx { flex:0 0 auto; padding:14px 20px; font-size:14px; }
@media (max-width: 991px){
	.anm .mbar { display:flex; }
	.anm-actions [data-nav="next"], #finishBtn { display:none !important; }
	.anm { padding-bottom:88px !important; }
}
/* mittlere Desktop-Breiten: in Schritt 1 die Floating-Bar nutzen, damit die 3 Tarifspalten nicht zu eng werden */
@media (min-width:992px) and (max-width:1259px){
	#pane1 .anm-cols { grid-template-columns:1fr; }
	#pane1 .anm-aside { display:none; }
	.anm:has(#pane1.show) .mbar { display:flex; }
	.anm:has(#pane1.show) #pane1 .anm-actions [data-nav="next"] { display:none !important; }
	.anm:has(#pane1.show) { padding-bottom:88px; }
}
/* ---- Variante B: identische kompakte Karte (Preis oben rechts) · Klick → volle Liste · Mobile gestapelt, Desktop nebeneinander ---- */
#cfgB .swipe-hint { display:none; }
/* card styling — gilt bei ALLEN Breiten, nur der Container-Flow unterscheidet sich */
#cfgB .tcard { flex:0 0 auto; }
#cfgB .tcard .thead { display:flex; flex-wrap:wrap; align-items:center; gap:3px 11px; padding:14px 16px; }
#cfgB .tcard .tick { margin:0; width:22px; height:22px; flex:0 0 auto; }
#cfgB .tcard .name { flex:1 1 auto; min-width:0; font-size:16px; }
#cfgB .tcard .benefit { flex:1 0 100%; order:1; min-height:0; margin:8px 0 0;
	font-size:12.5px; line-height:1.4; padding-left:0; text-align:left; }
#cfgB .tcard .thead .mini-price { flex:0 0 auto; text-align:right; white-space:nowrap; display:block; }
#cfgB .tcard .thead .mini-price .mp { font-size:21px; font-weight:800; color:var(--ink); line-height:1; }
#cfgB .tcard .thead .mini-price .mp .cur { font-size:12px; font-weight:600; color:var(--muted); }
#cfgB .tcard .thead .mini-price .md { display:none; }
#cfgB .tcard { overflow:visible; }
#cfgB .tcard .badge { top:-11px; right:14px; border-radius:7px; box-shadow:0 3px 8px rgba(14,62,110,.18); }
#cfgB .tcard .badge { font-size:10px; padding:3px 9px; }
/* eingeklappt: Details verborgen bis ausgewählt; Kopf (Häkchen · Titel · Preis) bleibt konstant */
#cfgB .tcard .feats, #cfgB .tcard .tfoot { display:none; }
#cfgB .tcard.is-selected .feats { display:block; padding:6px 16px 4px; }
#cfgB .tcard.is-selected .feats li { padding:4px 0; }
#cfgB .tcard.is-selected .tfoot { display:block; padding:10px 16px 16px; }
#cfgB .tcard.is-selected .tfoot .price, #cfgB .tcard.is-selected .tfoot .diff { display:none; }
/* Container: Mobile gestapelt (Tap-to-expand), Desktop 3 Spalten · alle ausgeklappt */
@media (max-width:991px){ #cfgB .tcards { display:flex; flex-direction:column; gap:8px; } }
@media (min-width:992px){
	#cfgB .tcards { align-items:start; }
	#cfgB .tcard .feats { display:block; padding:6px 16px 4px; }
	#cfgB .tcard .feats li { padding:4px 0; }
	#cfgB .tcard .tfoot { display:block; padding:10px 16px 16px; }
	#cfgB .tcard .tfoot .price, #cfgB .tcard .tfoot .diff { display:none; }
}