/* ==========================================================================
   PRICING TABBED + VIDEO MODAL — msd-pricing.css
   ========================================================================== */

.pricing__sub-head{max-width:580px;margin-inline:auto;margin-top:1rem}

/* ── TABS: Blog-Kategorie-Stil (pill / rounded) ───────────────────────── */
.pricing__tabs {
	display: flex;
	justify-content: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin: 0 auto 3rem;
	/* kein gemeinsamer border mehr – jeder Tab ist eigenständige pill */
}

.pricing__tab {
	padding: .45rem 1.1rem;
	border-radius: 50px;
	background: transparent;
	border: 1px solid rgba(201,168,76,.2);
	font-family: var(--opt-font-sans);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(245,240,232,.5);
	cursor: pointer;
	transition: all .2s ease;
	white-space: nowrap;
}

.pricing__tab:hover {
	border-color: #c9a84c;
	background: rgba(201,168,76,.12);
	color: #e8c97a;
}

.pricing__tab.is-active {
	border-color: #c9a84c;
	background: rgba(201,168,76,.15);
	color: #e8c97a;
	font-weight: 600;
}

/* ── Panels ───────────────────────────────────────────────────────────── */
.pricing__panel{display:none}
.pricing__panel.is-active{display:block}

/* ── Grids ────────────────────────────────────────────────────────────── */
.pricing__grid{display:grid;gap:1.5rem;align-items:stretch}  /* stretch = gleiche Höhe */
.pricing__grid--3{grid-template-columns:repeat(3,1fr)}
.pricing__grid--1c{grid-template-columns:minmax(0,700px);justify-content:center}
.pricing__grid--ai{grid-template-columns:repeat(3,1fr)}

/* ── Cards ────────────────────────────────────────────────────────────── */
.pricing__card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* height:100% nicht nötig da grid stretch */
	transition: border-color var(--opt-transition), transform var(--opt-transition);
}

.pricing__card:hover{border-color:var(--opt-border-gold-md);transform:translateY(-4px)}
.pricing__card--featured{border-color:var(--opt-border-gold-lg);background:var(--opt-blue-mid)}
.pricing__card--support,.pricing__card--ai{background:var(--opt-blue-dark)}

/* Inner body muss auch column+flex sein damit btn am Bottom landet */
.pricing__card .opt-card__body,
.pricing__card .opt-card__body--lg {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.pricing__glowbar{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--opt-gold) 25%,var(--opt-gold-light) 50%,var(--opt-gold) 75%,transparent);animation:pg 3s ease-in-out infinite}
.pricing__glowbar--soft{background:linear-gradient(90deg,transparent,rgba(201,168,76,.45) 30%,rgba(201,168,76,.65) 50%,rgba(201,168,76,.45) 70%,transparent)}
@keyframes pg{0%,100%{opacity:.5}50%{opacity:1}}

.pricing__badge{margin-bottom:.9rem}
.pricing__badge-ph{height:1.6rem;margin-bottom:.9rem}
.pricing__name{font-family:var(--opt-font-serif);font-size:1.4rem;color:var(--opt-cream)}
.pricing__price{font-family:var(--opt-font-serif);font-size:clamp(1.8rem,2.5vw,2.4rem);font-weight:300;color:var(--opt-gold);line-height:1;margin-bottom:.25rem}
.pricing__price--sm{font-size:1.2rem}
.pricing__billing{color:var(--opt-text-muted);margin-bottom:0}

.pricing__pages-tag{display:flex;flex-direction:column;gap:.2rem;padding:.7rem 1rem;background:rgba(201,168,76,.05);border-left:2px solid var(--opt-gold);margin-block:1rem}
.pricing__pages-tag strong{font-family:var(--opt-font-sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--opt-gold)}
.pricing__pages-tag span{font-size:.78rem;color:var(--opt-text-muted)}

.pricing__desc{font-size:.875rem;line-height:1.65;margin-bottom:1.25rem}
.pricing__time{color:var(--opt-text-muted);margin-bottom:1.5rem}

/* ── Feature List – grüne ✓ / rote ✗ ─────────────────────────────────── */
.pricing__feats {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;          /* wächst und drückt btn nach unten */
}

.pricing__feats--2col{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem;flex:1}

.pf {
	display: flex;
	align-items: flex-start;
	gap: .6rem;       /* etwas mehr Platz nach dem Haken */
	font-size: .84rem;
	line-height: 1.5;
}

.pf .pf-icon {
	flex-shrink: 0;
	width: 1rem;
	text-align: center;
	margin-top: .15rem;
	font-style: normal;
	font-size: .82rem;
	font-weight: 700;
}

/* Grüner Haken */
.pf--yes {
	color: rgba(245,240,232,.82);
}
.pf--yes .pf-icon {
	color: #4ade80;   /* sattes Grün */
}

/* Rotes X */
.pf--no {
	color: rgba(245,240,232,.28);
	text-decoration: line-through;
	text-decoration-color: rgba(245,240,232,.12);
}
.pf--no .pf-icon {
	color: #f87171;   /* sattes Rot */
	text-decoration: none;
}

/* ── Legal + CTA ──────────────────────────────────────────────────────── */
.pricing__legal{background:rgba(201,168,76,.04);border:1px solid var(--opt-border-gold);padding:.85rem 1rem;margin-bottom:1.5rem;font-size:.72rem;color:var(--opt-text-muted);line-height:1.7}

/* CTA immer am Bottom – margin-top:auto drückt es nach unten */
.pricing__btn {
	width: 100%;
	justify-content: center;
	margin-top: auto;
}

/* ── AI Panel ─────────────────────────────────────────────────────────── */
.pricing__ai-banner{display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.5rem;background:rgba(201,168,76,.05);border:1px solid var(--opt-border-gold);margin-bottom:2rem}
.pricing__ai-banner>span{font-size:1.5rem;flex-shrink:0}
.pricing__ai-icon{font-size:2rem;line-height:1;margin-bottom:.25rem}
.pricing__ai-costs{margin-block:1rem}
.pricing__ai-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding:.55rem 0}
.pricing__ai-label{font-family:var(--opt-font-sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--opt-text-muted)}
.pricing__ai-or{font-family:var(--opt-font-sans);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--opt-text-muted);text-align:center;padding:.2rem 0;border-top:1px solid var(--opt-border-gold);border-bottom:1px solid var(--opt-border-gold);margin-block:.25rem}
.pricing__token-note{display:flex;align-items:flex-start;gap:.5rem;padding:.7rem .9rem;background:rgba(201,168,76,.04);border-left:2px solid rgba(201,168,76,.35);margin-bottom:1.1rem;font-size:.75rem;color:var(--opt-text-muted);line-height:1.55}
.pricing__token-note>span:first-child{flex-shrink:0;margin-top:.05rem}

/* ── Trust Strip ──────────────────────────────────────────────────────── */
.pricing__trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 1.5rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--opt-border-gold);font-family:var(--opt-font-sans);font-size:.78rem;color:var(--opt-text-muted)}
.pricing__trust-dot{color:var(--opt-border-gold-md)}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.pricing__grid--3,
	.pricing__grid--ai {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
}

@media (max-width: 860px) {
	.pricing__grid--3,
	.pricing__grid--ai {
		grid-template-columns: 1fr;
	}
	/* KWK: 2 Karten nebeneinander, 3. darunter zentriert */
	#pp-kwk .pricing__grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
	#pp-kwk .pricing__grid--3 .pricing__card:last-child {
		grid-column: 1 / -1;
		max-width: 420px;
		margin: 0 auto;
		width: 100%;
	}
}

@media (max-width: 600px) {
	#pp-kwk .pricing__grid--3 {
		grid-template-columns: 1fr;
	}
	#pp-kwk .pricing__grid--3 .pricing__card:last-child {
		grid-column: auto;
		max-width: 100%;
	}
	.pricing__tabs {
		flex-wrap: wrap;
	}
	.pricing__tab {
		font-size: .68rem;
		padding: .55rem .75rem;
	}
}