/*
 * Pricing page.
 *
 * Split out of search.css: that sheet declares the Leaflet cluster styles as
 * a dependency, so the pricing page was pulling the whole map stack for a
 * few card rules (found in the design review).
 */

.vb-pricing {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

/*
 * Four tariffs side by side need real width. When this block lost its media
 * query during the split out of search.css, phones got four ~90px columns
 * and every price broke across lines. Stepping through two columns also
 * reads better on a tablet than jumping from one to four.
 */
@media (min-width: 40rem) {
	.vb-pricing {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media (min-width: 64rem) {
	.vb-pricing {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

.vb-pricing__card {
	display: flex;
	flex-direction: column;
	padding: 24px 20px;
	background: var(--vb-base, #fbf7f2);
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	box-shadow: var(--vb-shadow, 0 2px 6px -2px rgba(48, 39, 43, 0.10), 0 18px 40px -26px rgba(48, 39, 43, 0.40));
}

.vb-pricing__name {
	margin: 0 0 6px;
	font-size: 1.25rem;
}

.vb-pricing__price {
	/* Keep the amount and the period on one line: in a narrow card the
	   euro sign wrapped away from its number ("19" / "€/Mount"). */
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 0 0 14px;
	font-family: var(--vb-display, inherit);
	font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--vb-ink, #30272b);
}

.vb-pricing__price span {
	font-family: var(--vb-body, inherit);
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 500;
	color: var(--vb-muted, #6b5b60);
	white-space: nowrap;
}

.vb-pricing__price span {
	font-size: var(--vb-text-label, 0.9rem);
	font-weight: 500;
	color: var(--vb-muted, #6b5b60);
}

.vb-pricing__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--vb-text-label, 0.9rem);
}

.vb-pricing__features li span {
	display: inline-block;
	width: 1.2em;
	font-weight: 700;
}

.vb-pricing__features .is-on {
	color: var(--vb-ink, #30272b);
}

.vb-pricing__features .is-on span {
	color: var(--vb-success, #176849);
}

.vb-pricing__features .is-off {
	/* opacity on text is a contrast leak: --vb-muted promises 6.4:1 and
	   spends a third of it here. A declared colour keeps the same visual
	   rank and stays legible - this row says which feature a plan lacks. */
	color: var(--vb-muted, #6b5b60);
	opacity: 1;
}

/* A .vb-btn (M-109); the featured card sets its own size inline. */
.vb-pricing__cta {
	margin-top: 18px;
}

.vb-pricing__card {
	border: none;
	box-shadow: var(--vb-shadow, 0 2px 6px -2px rgba(48, 39, 43, 0.10), 0 18px 40px -26px rgba(48, 39, 43, 0.40));
}

/* --------------------------------------------------------------------------
   Recommendation, trust line and the full comparison
   -------------------------------------------------------------------------- */

.vb-pricing__badge {
	align-self: flex-start;
	margin: 0 0 10px;
	padding: 4px 12px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-primary, #b66a80);
	color: var(--vb-primary-darker, #300b17);
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* One generation instead of three. The two earlier --featured blocks were
   dead: the later base block re-declared box-shadow (equal specificity,
   later wins) and set `border: none`, which turns a lone border-color into
   nothing. Width and style restated here so the ring actually paints. */
.vb-pricing__card--featured {
	border: 2px solid var(--vb-primary, #b66a80);
	box-shadow: var(--vb-glow, 0 18px 44px -18px rgba(104, 25, 46, 0.30));
}

/*
 * On a phone the tiers swipe sideways instead of stacking.
 *
 * Stacked, the four cards were about six screens of scrolling and the reader
 * met each tier alone, with nothing to compare it against - the one thing a
 * pricing page exists to allow. Side by side with the next card peeking, the
 * comparison is back and the whole ladder is two thumb flicks.
 *
 * The order is the price order, cheapest first. The stacked version pulled
 * the recommended tier to the top so nobody had to scroll past the cheap
 * ones; in a carousel that would read 39, 0, 19, 79 and the ladder would be
 * gone. The badge still marks the recommendation.
 */
/* The pager (M-017). One dot per plan, revealed by pricing-pager.js; the
   hit area is a tap target while the dot itself stays small. Only drawn
   where the cards are a carousel - above 40rem they all stand at once. */
.vb-pricing__pager {
	display: none;
	justify-content: center;
	gap: 4px;
	margin: 10px 0 0;
}

.vb-pricing__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--vb-tap-min, 24px);
	height: var(--vb-tap-min, 24px);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.vb-pricing__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--vb-radius-pill, 999px);
	background: var(--vb-line, #d9c7c1);
	border: 1px solid var(--vb-field-line, #8c716e);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.vb-pricing__dot[aria-current="true"]::before {
	background: var(--vb-accent-text, #68192e);
	border-color: var(--vb-accent-text, #68192e);
	transform: scale( 1.25 );
}

.vb-pricing__dot:focus-visible {
	outline: 2px solid transparent;
	border-radius: var(--vb-radius-pill, 999px);
	box-shadow: var(--vb-focus, 0 0 0 2px var(--vb-raised, #fffcf8), 0 0 0 5px var(--vb-focus-color, #205f9c));
}

@media (max-width: 40rem) {
	.vb-pricing__pager {
		display: flex;
	}

	.vb-pricing {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		/* Snapping stops a swipe between two cards. */
		scroll-snap-type: x mandatory;
		/* Without this, a swipe that runs past the last card triggers the
		   browser's back gesture and the reader loses the page. */
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		/* Room for the scrollbar so it never sits on a card's shadow. */
		padding-bottom: 10px;
		scrollbar-width: thin;
	}

	.vb-pricing__card {
		/* Not 100%: the sliver of the next card is what tells a reader there
		   is more to the right. Nothing else on the page says so. */
		flex: 0 0 82%;
		scroll-snap-align: center;
	}

	/* The featured card is raised by a shadow that would be clipped by the
	   scroll container; a little breathing room keeps it intact. */
	.vb-pricing__card--featured {
		margin-block: 4px;
	}

	.vb-pricing::-webkit-scrollbar {
		height: 4px;
	}

	.vb-pricing::-webkit-scrollbar-thumb {
		background: var(--vb-line, #d9c7c1);
		border-radius: var(--vb-radius-pill, 999px);
	}
}

.vb-pricing__inherits {
	margin: 4px 0 10px;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-small, 0.85rem);
	font-weight: 600;
}

.vb-pricing__trust {
	margin: 18px 0 0;
	text-align: center;
	color: var(--vb-muted, #6b5b60);
	font-size: var(--vb-text-label, 0.9rem);
}

.vb-pricing__matrix {
	margin: clamp(24px, 5vw, 44px) 0 0;
	border: 1px solid var(--vb-line, #d9c7c1);
	border-radius: var(--vb-radius, 16px);
	background: var(--vb-base, #fbf7f2);
}

.vb-pricing__matrix > summary {
	padding: 16px 20px;
	font-weight: 700;
	cursor: pointer;
	border-radius: var(--vb-radius, 16px);
}

.vb-pricing__matrix[open] > summary { border-bottom: 1px solid var(--vb-line, #d9c7c1); border-radius: var(--vb-radius, 16px) var(--vb-radius, 16px) 0 0; }

/* The table is wider than a phone; it scrolls inside its own box instead of
   pushing the page sideways. */
.vb-pricing__matrix-scroll {
	overflow-x: auto;
	padding: 4px 16px 20px;
	/* Without this, swiping the table sideways on iOS carries the whole page
	   along once the table hits its end - which looks exactly like the page
	   has been dragged out of place (reported from a phone). */
	overscroll-behavior-x: contain;
	/* overflow-x: auto scrolls the table but does NOT stop its width reaching
	   the ancestors' scroll area once the sticky row labels are in play: the
	   whole page became draggable sideways the moment the comparison was
	   opened. Measured on the live page - hiding the table, or setting
	   contain, brings the document back to 375px; capping the table or
	   clipping the <details> does not. */
	contain: paint;
	-webkit-overflow-scrolling: touch;
}

/* 30rem instead of 34: with four tariffs the table only just misses a phone
   screen, so most of it is readable without swiping at all. */
.vb-pricing__matrix table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--vb-text-small, 0.85rem); }
.vb-pricing__matrix th,
.vb-pricing__matrix td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--vb-line, #d9c7c1); }
.vb-pricing__matrix tbody th { padding-left: 0; }
.vb-pricing__matrix thead th { font-size: var(--vb-text-caption, 0.78rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--vb-muted, #6b5b60); }
.vb-pricing__matrix tbody th { font-weight: 500; }
.vb-pricing__matrix td { text-align: center; }
.vb-pricing__matrix td.is-on { color: var(--vb-accent-text, #68192e); font-weight: 700; }
.vb-pricing__matrix td.is-off { color: var(--vb-muted, #6b5b60); opacity: 1; }
.vb-pricing__matrix tbody tr:last-child th,
.vb-pricing__matrix tbody tr:last-child td { border-bottom: 0; }

.vb-pricing__group th {
	padding-top: 18px;
	color: var(--vb-ink, #30272b);
	font-size: var(--vb-text-body, 1rem);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	border-bottom: 1px solid var(--vb-line, #d9c7c1);
}
.vb-pricing__matrix td.is-on {
	/* Words, not just ticks - "Monat, Quartal, Jahr + CSV" must not be cramped. */
	white-space: normal;
	min-width: 7rem;
}

.vb-pricing__trial {
	margin: -8px 0 22px;
	padding: 12px 18px;
	background: var(--vb-primary-soft, #f3e2e7);
	border-radius: var(--vb-radius-pill, 999px);
	color: var(--vb-ink, #30272b);
	text-align: center;
	font-size: var(--vb-text-body, 1rem);
}
@media ( max-width: 40rem ) {
	.vb-pricing__trial {
		border-radius: var(--vb-radius, 16px);
		text-align: left;
	}
}

/* The comparison scrolls sideways on a phone. Pin the row label, or the
   reader scrolls to Gold and no longer knows which feature they are looking
   at - which is exactly what happened. */
.vb-pricing__matrix table th[scope="row"],
.vb-pricing__group th {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--vb-base, #fbf7f2);
	/* The cell is opaque, so give the scrolled-under edge a seam. */
	box-shadow: 1px 0 0 var(--vb-line, #d9c7c1);
}
.vb-pricing__matrix table tbody tr:nth-child(even) th[scope="row"] {
	background: var(--vb-surface, #f2e7df);
}
@media ( max-width: 40rem ) {
	.vb-pricing__matrix table th[scope="row"] {
		/* Wide enough to read, narrow enough to leave room for the plans. */
		min-width: 9.5rem;
		max-width: 11rem;
	}
}

/* Where a provider type gets a feature earlier than the plain tariff. Its own
   class and NOT .vb-pricing__note, which the plan blurb and the VAT line
   already use - styling a shared class here quietly restyled both of those.
   It sits inside the row header, so it reads as a note, not as the label. */
.vb-pricing__rownote {
	display: block;
	margin-top: 3px;
	font-size: var(--vb-text-caption, 0.78rem);
	font-weight: 400;
	line-height: 1.35;
	color: var(--vb-muted, #6b5b60);
}

/* The provider-type exception, out of the collapsed comparison table. It
   used to exist only as a 12.5px footnote inside a <details> that is shut
   by default, so a salon owner read "Online calendar: –" in the Free column
   and had no way to learn their kind of business gets it from Free. */
.vb-pricing__exception {
	max-width: 46rem;
	margin: 0 auto 0.6rem;
	padding: 0.65rem 0.9rem;
	font-size: var(--vb-text-body, 1rem);
	text-align: center;
	color: var(--vb-accent-text, #68192e);
	background: var(--vb-primary-soft, #f3e2e7);
	border-radius: var(--vb-radius-sm, 11px);
}


/* The measure the rest of the site keeps (M-027). These two blocks live in
   profile.css, which the pricing page does not load - so a cap written there
   would have been a rule nobody applies. Measured on the live page: the FAQ
   answers and the complaint address ran the full width of the card. */
.vb-pricing__faq-item p,
.vb-pricing__faq-item summary,
.vb-complaint__adr,
.vb-roi__note {
	max-width: 68ch;
}

/* Die Fragen unter der Preistabelle. Standen in profile.css, das die
   Preisseite nicht laedt - sie waren ungestaltet (Scan 24.09.2026). */
.vb-pricing__faq {
	max-width: 45rem;
	margin: 32px auto 0;
}

.vb-pricing__faq-item {
	padding: 10px 0;
	border-bottom: 1px solid var(--vb-line, #d9c7c1);
}

.vb-pricing__faq-item summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--vb-ink, #30272b);
}

.vb-pricing__faq-item p {
	margin: 8px 0 0;
	color: var(--vb-muted, #6b5b60);
}

/* Brutto klein unter netto (Inhaber 24.09.2026): fuer Betriebe ohne
   Vorsteuerabzug der echte Preis. */
.vb-pricing__gross {
	margin: -8px 0 14px;
	font-size: var(--vb-text-small, 0.85rem);
	color: var(--vb-muted, #6b5b60);
	font-variant-numeric: tabular-nums;
}