/* ============================================================
   SERVICES — Option B "Bento Asymmetric"
   ============================================================ */
.leistungen.opt-b {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(180px, auto);
	gap: 14px;
}
.leistungen.opt-b .card {
	position: relative;
	border-radius: 22px;
	padding: clamp(22px, 2.2vw, 32px);
	display: flex; flex-direction: column; justify-content: flex-start;
	gap: 12px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	transition: transform 0.5s var(--ease-spring), border-color 0.3s;
}
.leistungen.opt-b .card:hover { transform: translateY(-3px); border-color: rgba(0,0,0,0.18); }
.leistungen.opt-b .card .tag {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
	color: rgba(0,0,0,0.5); font-weight: 600;
}
.leistungen.opt-b .card .tag .dot {
	width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.leistungen.opt-b .card h3 {
	font-size: clamp(22px, 2vw, 32px);
	line-height: 1.05; letter-spacing: -0.03em; font-weight: 700;
}
.leistungen.opt-b .card p {
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(0,0,0,0.62);
	max-width: 38ch;
}

.leistungen.opt-b .b-hero    { grid-column: span 7; grid-row: span 2; background: var(--ink); color: #fff; border-color: transparent; }
.leistungen.opt-b .b-side-1  { grid-column: span 5; }
.leistungen.opt-b .b-side-2  { grid-column: span 5; }
.leistungen.opt-b .b-mid-1   { grid-column: span 6; }
.leistungen.opt-b .b-mid-3   { grid-column: span 6; }
.leistungen.opt-b .b-cta     { grid-column: span 12; background: var(--accent); border-color: transparent; min-height: 220px; }

.leistungen.opt-b .b-hero p   { color: rgba(255,255,255,0.65); max-width: 42ch; }
.leistungen.opt-b .b-hero .tag { color: rgba(255,255,255,0.55); }
.leistungen.opt-b .b-hero h3   { font-size: clamp(32px, 3.2vw, 52px); max-width: 14ch; }
.leistungen.opt-b .b-hero .accent-line {
	width: 56px; height: 4px; background: var(--accent); border-radius: 2px;
	margin-bottom: 6px;
	display: block;
}

.leistungen.opt-b .card > * { position: relative; z-index: 1; }
.leistungen.opt-b .mark-floater {
	position: absolute;
	right: -14px;
	bottom: -22px;
	width: clamp(120px, 14vw, 200px);
	aspect-ratio: 401.77 / 602.65;
	color: rgba(0,0,0,0.06);
	pointer-events: none;
	background: currentColor;
	-webkit-mask: url("../img/mark.svg") center / contain no-repeat;
	        mask: url("../img/mark.svg") center / contain no-repeat;
	transform: rotate(-8deg);
	z-index: 0;
}
.leistungen.opt-b .b-hero .mark-floater {
	width: clamp(200px, 24vw, 340px);
	right: -28px; bottom: -50px;
	color: rgba(0, 255, 0, 0.10);
	transform: rotate(-6deg);
}
.leistungen.opt-b .b-cta .mark-floater {
	color: rgba(0,0,0,0.10);
	width: clamp(160px, 18vw, 240px);
	right: -10px; bottom: -28px;
	transform: rotate(-10deg);
}

.leistungen.opt-b .b-cta {
	display: grid; grid-template-columns: 1.4fr auto;
	align-items: end; gap: 32px; padding: clamp(28px, 3vw, 48px);
}
.leistungen.opt-b .b-cta .tag { color: rgba(0,0,0,0.6); }
.leistungen.opt-b .b-cta .tag .dot { background: #000; }
.leistungen.opt-b .b-cta h3 {
	font-size: clamp(28px, 3.2vw, 48px);
	line-height: 1.02; max-width: 18ch;
	color: #000;
}
.leistungen.opt-b .b-cta h3 .u { background: #000; color: var(--accent); padding: 0 8px; }
.leistungen.opt-b .b-cta .b-cta-btn {
	display: inline-flex; align-items: center; gap: 10px;
	justify-self: start;
	padding: 12px 16px 12px 22px;
	background: #000; color: #fff;
	border-radius: 999px;
	font-weight: 600; font-size: 14px;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.leistungen.opt-b .b-cta .b-cta-btn::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 160px; height: 160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0,255,0,0.85) 0%, rgba(0,255,0,0.45) 35%, rgba(0,255,0,0) 70%);
	filter: blur(16px);
	transform: translate(var(--mx, 50%), var(--my, 50%)) translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	z-index: -1;
}
.leistungen.opt-b .b-cta .b-cta-btn:hover {
	background: #fff; color: #000;
	box-shadow: 0 0 0 1px #000;
}
.leistungen.opt-b .b-cta .b-cta-btn:hover::before { opacity: 1; }
.leistungen.opt-b .b-cta .b-cta-btn .arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--accent); color: #000;
}

.leistungen.opt-b .mini-viz {
	align-self: stretch;
	display: flex; align-items: flex-end; gap: 6px;
	height: 64px;
	margin-top: -4px;
}
.leistungen.opt-b .mini-viz span {
	flex: 1; background: var(--accent); border-radius: 3px 3px 0 0;
}
.leistungen.opt-b .mini-viz span:nth-child(1) { height: 6%; }
.leistungen.opt-b .mini-viz span:nth-child(2) { height: 14%; }
.leistungen.opt-b .mini-viz span:nth-child(3) { height: 28%; }
.leistungen.opt-b .mini-viz span:nth-child(4) { height: 55%; }
.leistungen.opt-b .mini-viz span:nth-child(5) { height: 100%; }

.leistungen.opt-b .stack-line {
	display: flex; gap: 6px; flex-wrap: wrap;
}
.leistungen.opt-b .stack-line .chip {
	padding: 5px 10px; border-radius: 6px;
	background: rgba(0,0,0,0.06);
	font-size: 11px; letter-spacing: 0.04em;
	font-weight: 600;
}

@media (max-width: 900px) {
	.leistungen.opt-b {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
	.leistungen.opt-b .card,
	.leistungen.opt-b .b-hero,
	.leistungen.opt-b .b-side-1,
	.leistungen.opt-b .b-side-2,
	.leistungen.opt-b .b-mid-1,
	.leistungen.opt-b .b-mid-3,
	.leistungen.opt-b .b-cta {
		grid-column: span 1; grid-row: auto;
		min-height: 200px;
	}
	.leistungen.opt-b .b-hero { min-height: 320px; }
	.leistungen.opt-b .b-cta { grid-template-columns: 1fr; align-items: start; gap: 20px; min-height: 0; }
	.leistungen.opt-b .b-cta .b-cta-btn { align-self: flex-start; }
}

/* Silbentrennung Schalter */
.hy-on { hyphens: auto; -webkit-hyphens: auto; }
.hy-off { hyphens: none; -webkit-hyphens: none; }