/* SOS144 Redesign - gemeinsame Styles, extrahiert aus den statischen Design-Mockups (sosnew), 2026-08 */

/* ============================================================
   v3 Pakete-Vergleich (Full-Column Card Layout)
   Quelle: Mockup rettungskarte-sos144.html (identisch auf allen 10 Seiten)
   ============================================================ */
/* ── Full-Column Card Layout (Pakete-Vergleich) ── */
.v3-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v3-grid {
	display: grid;
	grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
	gap: 0;
	position: relative;
	padding: 30px 0 30px;
}
.v3-col {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 20px;
	margin: 0 6px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
	cursor: pointer;
	transition: transform 0.4s cubic-bezier(.25,.8,.25,1),
				box-shadow 0.4s cubic-bezier(.25,.8,.25,1);
	position: relative;
	z-index: 1;
}
.v3-col:hover {
	box-shadow: 0 12px 40px rgba(0,0,0,0.12);
	z-index: 3;
}
.v3-col.v3-active {
	box-shadow: 0 12px 40px rgba(0,0,0,0.12);
	z-index: 4;
}
.v3-col.v3-active::before {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 22px;
	border: 3px solid #FFED00;
	pointer-events: none;
	z-index: 10;
}
.v3-labels {
	display: flex;
	flex-direction: column;
	background: none;
	box-shadow: none;
	border-radius: 0;
	margin: 0;
	cursor: default;
	transform: none !important;
}
.v3-labels:hover,
.v3-labels.v3-active { transform: none !important; box-shadow: none !important; }
.v3-labels::before { display: none !important; }
.v3-head {
	position: relative;
	padding: 12px 16px 10px;
	text-align: center;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.v3-col:has(.v3-you) .v3-best-label { display:none; }
.v3-best-label {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 14;
	background: #FFED00;
	color: #0E3E6E;
	padding: 3px 16px;
	border-radius: 12px;
	font-size: 0.7em;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.v3-head + .v3-row.v3-sep-row { border-top: 1px solid #eef0f3; }
.v3-col.v3-best .v3-head + .v3-row.v3-sep-row { border-top-color: rgba(255,255,255,0.15); }
.v3-head .v3-name { font-size: 1.05em; font-weight: 700; color: #0E3E6E; margin-bottom: 4px; }
.v3-head .v3-price { font-size: 1.9em; font-weight: 800; color: #0E3E6E; line-height: 1.1; }
.v3-head .v3-unit { font-size: 0.75em; font-weight: 400; color: #888; }
.v3-col.v3-grey .v3-head .v3-name { color: #6c757d; }
.v3-col .v3-float-badge {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 12;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: bounce 2s ease-in-out infinite;
}
.v3-col .v3-float-badge span {
	background: #FFED00;
	color: #0E3E6E;
	padding: 4px 14px;
	border-radius: 14px;
	font-weight: 700;
	font-size: 0.78em;
	white-space: nowrap;
}
.v3-col .v3-float-badge i {
	color: #FFED00;
	font-size: 1em;
	margin-top: 1px;
}
.v3-col.v3-best { background: linear-gradient(160deg, #0E3E6E 0%, #1a5a9e 100%); }
.v3-col.v3-best .v3-head .v3-name,
.v3-col.v3-best .v3-head .v3-price { color: #fff; }
.v3-col.v3-best .v3-head .v3-unit { color: rgba(255,255,255,0.65); }
.v3-col.v3-best .v3-row { border-color: rgba(255,255,255,0.1); color: #fff; }
.v3-col.v3-best .v3-row .v-cross { color: rgba(255,255,255,0.25); }
.v3-col.v3-best .v3-row .v-check { color: #7ddf90; }
.v3-col.v3-best .v3-row .v-money { color: #fff; }
.v3-col.v3-best .v3-foot { border-color: rgba(255,255,255,0.1); }
.v3-labels .v3-head { visibility: hidden; }
.v3-row {
	padding: 11px 16px;
	border-bottom: 1px solid #eef0f3;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	flex-shrink: 0;
}
.v3-labels .v3-row {
	text-align: left;
	justify-content: flex-start;
	font-weight: 600;
	color: #333;
	padding-right: 20px;
}
.v3-labels .v3-row .fa-info-circle {
	font-weight: 400; color: #aaa; font-size: 0.85em; margin-left: 5px; cursor: help;
}
.v3-nb { white-space: nowrap; }
.v3-row.v3-sep-row {
	border-bottom: 2px solid #dee2e6;
	min-height: 36px;
	padding-top: 6px;
	padding-bottom: 6px;
}
.v3-labels .v3-row.v3-sep-row {
	font-weight: 700;
	color: #0E3E6E;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.v3-col:not(.v3-labels) .v3-row.v3-sep-row { background: transparent; }
.v3-col.v3-best .v3-row.v3-sep-row { border-color: rgba(255,255,255,0.15); }
.v3-grid .v-money { font-weight: 600; white-space: normal; }
.v3-grid .v-check { color: #28a745; font-size: 1.15em; }
.v3-grid .v-cross { color: #ccc; font-size: 1.15em; }
.v3-row.v3-extra-row { display: none; }
.v3-row.v3-extra-row.show { display: flex; }
.v3-row.v3-toggle-row { cursor: pointer; color: #0E3E6E; font-weight: 600; }
.v3-row.v3-toggle-row i { transition: transform 0.2s; margin-right: 6px; }
.v3-grid.v3-expanded .v3-toggle-row i { transform: rotate(90deg); }
.v3-col.v3-best .v3-row.v3-toggle-row { color: rgba(255,255,255,0.7); }
.v3-foot {
	padding: 20px 14px 24px;
	margin-top: auto;
	border-top: 1px solid #eef0f3;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-shrink: 0;
}
.v3-foot .btn { border-radius: 10px; font-weight: 600; font-size: 0.88em; white-space: nowrap; }
.v3-detail { font-size: 0.78em; font-weight: 600; color: #0E3E6E; text-decoration: none; text-align: center; display: block; }
.v3-detail:hover { text-decoration: underline; }
.v3-col.v3-best .v3-detail { color: rgba(255,255,255,0.85); }
.v3-labels .v3-foot { visibility: hidden; }
.v3-row.v3-row-hover { background: rgba(14,62,110,0.04); }
.v3-col.v3-best .v3-row.v3-row-hover { background: rgba(255,255,255,0.06); }
@media (max-width: 991px) {
	.v3-grid { grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); }
	.v3-col { margin: 0 3px; }
	.v3-head .v3-price { font-size: 1.2em; }
	.v3-head { padding: 16px 8px 14px; }
	.v3-row { padding: 9px 8px; font-size: 0.85em; min-height: 40px; }
	.v3-foot { padding: 14px 8px 18px; }
}
@media (max-width: 575px) {
	.v3-grid { grid-template-columns: 0.85fr repeat(3, minmax(0, 1fr)); padding: 28px 0 20px; min-width: 345px; }
	.v3-scroll { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 4px; }
	.v3-col { margin: 0 1px; border-radius: 10px; }
	.v3-col.v3-active::before { border-radius: 12px; }
	.v3-head { padding: 12px 3px 10px; }
	.v3-head .v3-name { font-size: 0.78em; }
	.v3-head .v3-price { font-size: 1.15em; }
	.v3-head .v3-unit { font-size: 0.66em; }
	.v3-row { padding: 7px 3px; min-height: 34px; font-size: 0.74em; }
	.v3-labels .v3-row { font-size: 0.74em; padding-left: 4px; padding-right: 5px; }
	.v3-labels .v3-row .fa-info-circle { font-size: 0.9em; margin-left: 3px; }
	.v3-labels .v3-lbl { overflow-wrap: anywhere; hyphens: auto; }
	.v3-grid .v-money { white-space: normal; line-height: 1.15; }
	.v3-grid .v-check, .v3-grid .v-cross { font-size: 1em; }
	.v3-row.v3-sep-row { padding-top: 6px; padding-bottom: 6px; min-height: 30px; }
	.v3-foot { padding: 12px 3px 14px; gap: 6px; }
	.v3-foot .btn { font-size: 0.72em; padding-left: 3px; padding-right: 3px; }
}

/* ============================================================
   v3 Go-Toggle (Tourist-Modus: nur SOS144-Go-Spalte)
   Quelle: Mockup rettungskarte-sos144.html
   ============================================================ */
#v3Grid .v3-col-go { display:none; }
#v3Grid.v3-go-only { grid-template-columns: 1.2fr 1fr; }
#v3Grid.v3-go-only [data-v3-col="sos144"], #v3Grid.v3-go-only [data-v3-col="pro"], #v3Grid.v3-go-only [data-v3-col="max"] { display:none; }
#v3Grid.v3-go-only .v3-col-go { display:flex; }

/* ============================================================
   Reviews Masonry
   Quelle: Mockup rettungskarte-sos144.html (identisch auf allen 10 Seiten)
   ============================================================ */
.reviews-masonry { column-count: 2; column-gap: 1.5rem; }
.reviews-masonry .review-item { break-inside: avoid; margin-bottom: 1.5rem; }
.reviews-masonry .box-inner { padding: 1.5rem; }
@media (max-width: 767px) { .reviews-masonry { column-count: 1; } }

/* ============================================================
   FAQ Download-Liste
   Quelle: Mockup rettungskarte-sos144.html (Produktseiten-Variante, Kanon fuer alle Seiten)
   ============================================================ */
#faq .download-files ul { list-style: none; margin: 0 0 10px; padding: 0; }
#faq .download-files li { margin: 0; }
#faq .download-files li a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 6px;
	color: #0E3E6E;
	text-decoration: none;
	line-height: 1.45;
	border-bottom: 1px solid #e2e6ec;
}
#faq .download-files li:first-child a { border-top: 1px solid #e2e6ec; }
#faq .download-files li a:hover { color: #1a5a9e; }
#faq .download-files li a > i {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #e6eaf0;
	color: #0E3E6E;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.82em;
	transition: background 0.15s ease, color 0.15s ease;
}
#faq .download-files li a:hover > i { background: #FFED00; color: #0E3E6E; }
#faq .download-files li a > span { flex: 1; border-bottom: none; text-decoration: none; }
@media (max-width: 575px) {
	#faq .download-files li a { gap: 11px; padding: 12px 2px; }
	#faq .download-files li a > i { flex-basis: 30px; width: 30px; height: 30px; }
}

/* ============================================================
   Addon-Karten (Zusatzpakete-Teaser)
   Quelle: Mockup rettungskarte-sos144.html
   ============================================================ */
.addon-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-top:36px; align-items:stretch; }
.addon-card { display:flex; background:#fff; border-radius:16px; box-shadow:0 2px 16px rgba(0,0,0,0.06); overflow:hidden; transition:transform .25s, box-shadow .25s; }
.addon-card:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,0.10); }
.addon-card .addon-icon { flex:0 0 70px; display:flex; align-items:center; justify-content:center; font-size:1.6em; color:#fff; background:#0E3E6E; }
.addon-card .addon-body { flex:1; min-width:0; padding:20px 22px; display:flex; flex-direction:column; }
.addon-card .addon-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:2px; }
.addon-card .addon-name { font-weight:700; font-size:1em; color:#0E3E6E; }
.addon-card .addon-link { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:0.8em; font-weight:600; color:#0E3E6E; text-decoration:none; white-space:nowrap; }
.addon-card .addon-link:hover { text-decoration:underline; }
.addon-card .addon-claim { font-size:0.8em; color:#888; margin-bottom:8px; overflow-wrap:anywhere; hyphens:auto; }
.addon-card .addon-pitch { font-size:0.85em; color:#444; margin-bottom:12px; line-height:1.45; }
.addon-card .addon-bottom { margin-top:auto; display:flex; align-items:center; }
.addon-card .addon-price { font-size:1.15em; font-weight:800; color:#0E3E6E; }
.addon-card .addon-price small { display:block; margin-top:2px; font-weight:400; font-size:0.65em; color:#888; }
@media (max-width:767px){
	.addon-cards { grid-template-columns:1fr; }
	.addon-card .addon-icon { flex:0 0 60px; font-size:1.3em; }
	.addon-card .addon-body { padding:16px 18px; }
}

/* ============================================================
   dp-pain (Agitate: Warum Rettungsschutz)
   Quelle: Mockup rettungskarte-sos144.html (identisch auf 4 Produktdetailseiten)
   ============================================================ */
.dp-pain-intro { color:#5a6672; max-width:46em; margin:0 auto; }
.dp-pain-row { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin:46px 0 0; }
.dp-pain-item { text-align:center; padding:0 10px; }
.dp-pain-bubble { width:100px; min-width:100px; height:100px; border-radius:50%; background:#ffed00; color:#0f3e6e; border:5px solid #0f3e6e; display:grid; place-items:center; font-size:40px; margin:0 auto 20px; }
.dp-pain-item h5 { color:#0E3E6E; font-weight:900; font-size:1.6em; margin:0 0 6px; }
.dp-pain-item h5 small { display:block; font-size:0.4em; font-weight:700; letter-spacing:0.05em; color:#0E3E6E; margin-top:5px; text-transform:uppercase; }
.dp-pain-item p { color:#5a6672; line-height:1.5; }
.dp-pain-note { margin:48px auto 0; max-width:860px; display:flex; align-items:center; gap:16px; background:rgba(255,237,0,0.16); border-left:4px solid #FFED00; border-radius:8px; padding:20px 26px; text-align:left; }
.dp-pain-note i { color:#0E3E6E; font-size:1.5em; flex-shrink:0; }
.dp-pain-note p { margin:0; color:#2c3e50; line-height:1.55; }
.dp-eyebrow-bc { font-family:'Roboto',sans-serif; font-size:13px; font-weight:600; letter-spacing:.01em; color:#9aa5b1; margin-bottom:10px; }
.dp-eyebrow-bc a { color:#0E3E6E; text-decoration:none; }
@media (max-width:767px){ .dp-pain-row{ grid-template-columns:1fr; gap:34px; } .dp-pain-note{ flex-direction:column; align-items:flex-start; gap:10px; } }

/* ============================================================
   dp Basis (Produktdetail-Hero, Kostenbeispiel, feat-pop)
   Quelle: Mockup rettungskarte-sos144-pro.html (Superset-Variante mit .feat-pop .grp)
   ============================================================ */
.dp { font-family:'Roboto',sans-serif; }
.dp-hero { display:grid; grid-template-columns:1fr 1.05fr; gap:0; background:#fff; border:1px solid #e3e8ee; border-radius:20px; overflow:hidden; box-shadow:0 10px 40px rgba(14,62,110,.08); margin-top:18px; }
.dp-hero-body { padding:42px 44px; display:flex; flex-direction:column; min-width:0; }
.dp-eyebrow { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; background:#FFED00; color:#0E3E6E; font-weight:700; font-size:0.74em; letter-spacing:.04em; text-transform:uppercase; padding:5px 13px; border-radius:20px; margin-bottom:16px; }
.dp-hero-body h1 { font-size:2.6em; font-weight:800; color:#0E3E6E; margin:0 0 6px; line-height:1.05; }
.dp-claim { font-size:1.05em; color:#5a6672; margin:0 0 18px; }
.dp-price { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.dp-price .cur { font-size:0.9em; color:#6b7785; font-weight:600; }
.dp-price .amt { font-size:2.6em; font-weight:800; color:#1c2733; line-height:1; }
.dp-price .unit { font-size:0.85em; color:#6b7785; }
.dp-pricenote { font-size:0.8em; color:#9aa5b1; margin-bottom:18px; }
.dp-hero-body .price-info { margin-left:-44px; padding:16px 24px 18px 44px; background:#f6f9fc; border-top:1px solid #eef0f3; border-bottom:1px solid #eef0f3; margin-bottom:22px; }
.dp-hero-body .slider-boxes-price-type { text-align:left; }
.dp-hero-body .price-typ-switcher { justify-content:flex-start; }
.dp-hero-body .price-info { display:block; }
.dp-feats { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:9px; }
.dp-feats li { font-size:0.95em; color:#333; display:flex; gap:9px; align-items:flex-start; }
.dp-feats li i { color:#1f9d55; margin-top:3px; }
.dp-feats li { position:relative; }
.dp-cta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.dp-cta .btn { border-radius:10px; font-weight:700; }
.dp-trust { display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; font-size:0.8em; color:#6b7785; }
.dp-trust span i { color:#0E3E6E; margin-right:6px; }
.dp-hero-media { position:relative; min-height:420px; min-width:0; }
.dp-hero-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dp-case { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top, rgba(8,30,54,.96), rgba(8,30,54,.72) 60%, rgba(8,30,54,0)); color:#fff; padding:56px 26px 24px; cursor:pointer; }
.dp-case h5 { font-size:1.05em; color:#fff; margin:0 0 4px; }
.dp-case .lead { font-size:0.86em; color:#dce8f4; margin:0 0 12px; line-height:1.5; }
.dp-case-more { display:inline-flex; align-items:center; gap:7px; font-size:0.78em; font-weight:700; color:#FFED00; }
.dp-case-more i { transition:transform .2s; }
.dp-case-detail { position:absolute; inset:0; z-index:5; background:rgba(8,30,54,.97); color:#eaf1f8; padding:30px 28px; display:none; flex-direction:column; gap:8px; overflow:auto; }
.dp-hero-media.case-open .dp-case-detail { display:flex; }
.dp-hero-media.case-open .dp-case { opacity:0; pointer-events:none; }
.dp-case-detail h5 { color:#fff; font-size:1.15em; margin:0; }
.dp-case-detail .lead { font-size:0.88em; color:#dce8f4; margin:0 0 6px; line-height:1.55; }
.dp-case-close { position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; border:0; cursor:pointer; display:grid; place-items:center; font-size:0.9em; }
.dp-case-close:hover { background:rgba(255,255,255,.3); }
.dp-costs .dp-crow { display:flex; justify-content:space-between; gap:14px; font-size:0.82em; color:#bccadb; padding:3px 0; }
.dp-costs .dp-crow span:last-child { color:#fff; font-weight:600; }
.dp-costs .dp-crow.sub { border-top:1px solid rgba(255,255,255,.18); margin-top:5px; padding-top:8px; }
.dp-costs .sub span { color:#fff !important; font-weight:700; }
.dp-costs .tot { display:flex; justify-content:space-between; align-items:baseline; margin-top:7px; padding-top:9px; border-top:1px solid rgba(255,237,0,.45); }
.dp-costs .tot .l { font-size:0.85em; font-weight:700; color:#fff; }
.dp-costs .tot .v { font-size:1.25em; font-weight:800; color:#FFED00; }
.dp-costs.mt { margin-top:auto; }
@media (max-width:860px){ .dp-hero { grid-template-columns:1fr; } .dp-hero-media { min-height:300px; order:-1; } .dp-hero-body { padding:30px 26px; } .dp-hero-body .price-info { margin-left:-26px; padding-left:26px; } }
.dp-feats li{ position:relative; }
.feat-pop-wrap{ display:inline; }
.feat-trigger{ font-style:normal; font-weight:400; color:#9aa5b1; font-size:0.95em; margin-left:6px; cursor:help; }
.feat-trigger:hover, .feat-pop-wrap.open .feat-trigger{ color:#0E3E6E; }
.feat-pop{ position:absolute; left:0; top:100%; border-top:8px solid transparent; background-clip:padding-box; z-index:30; width:340px; max-width:82vw; max-height:min(68vh,440px); overflow:auto; background:#0E3E6E; color:#fff; border-radius:12px; padding:14px 16px; box-shadow:0 14px 36px rgba(8,30,54,.30); font-size:0.8em; line-height:1.35; display:none; flex-direction:column; gap:3px; }
.feat-pop p{ margin:0 0 4px; color:#eaf1f8; }
.feat-pop .grp{ color:#FFED00; font-weight:700; font-size:0.95em; margin:2px 0; }
.feat-pop .grp.sep{ margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.16); }
.feat-pop .r{ display:flex; justify-content:space-between; gap:14px; padding:2px 0; }
.feat-pop .r .l{ color:#d4e0ec; }
.feat-pop .r .v{ color:#fff; font-weight:600; white-space:nowrap; text-align:right; }
.feat-pop-wrap:hover .feat-pop, .feat-pop-wrap:focus-within .feat-pop, .feat-pop-wrap.open .feat-pop{ display:flex; }


/* ── Schadenbeispiel-Slider-Tabs: auf schmalen Screens horizontal swipebar ──
   Global (web.template) ist .insurance-slider-nav text-align:center mit inline-flex-Innenteil -
   bei 4 Tabs laeuft die Leiste mobil aus dem Viewport und lange Labels brechen um.
   display:flex + overflow-x:auto macht die Leiste scrollbar; margin:auto auf .nav-inner
   zentriert auf Desktop und kollabiert bei Ueberbreite nach links (kein abgeschnittener Anfang). */
.insurance-slider-nav { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.insurance-slider-nav::-webkit-scrollbar { display:none; }
.insurance-slider-nav .nav-inner { flex:0 0 auto; margin-left:auto; margin-right:auto; }
.insurance-slider-nav .btn { flex:0 0 auto; }
.insurance-slider-nav .btn span { white-space:nowrap; }

/* Slider-Tab-Chips immer sichtbar, abhaengig vom Sektionshintergrund:
   web.template setzt #fff !important, web.custom ueberschreibt global mit #f7f7f7 !important -
   dadurch verschwinden die Chips auf grauen Sektionen (#f7f7f7 auf #f7f7f7). Hier pro
   Hintergrund aufgeloest (diese Datei laedt nach web.custom.css und gewinnt bei gleichem
   !important): graue Sektion -> weisse Chips (wie in den Mockups), weisse Sektion -> graue Chips. */
.page-section.background-grey .insurance-slider-nav .btn,
.page-section.background-grey .insurance-slider-nav .btn:hover,
.page-section.background-grey .insurance-slider-nav .btn:focus,
.page-section.background-grey .insurance-slider-nav .btn:active { background:#fff !important; }
.page-section.background-white .insurance-slider-nav .btn,
.page-section.background-white .insurance-slider-nav .btn:hover,
.page-section.background-white .insurance-slider-nav .btn:focus,
.page-section.background-white .insurance-slider-nav .btn:active { background:#f7f7f7 !important; }