/* -------------------------------------------------- */
/* Buttons                                              */
/* -------------------------------------------------- */

.btn {
	display: inline-block;
	/* Flat brand colour by default. The two-tone gradient below is reserved
	   for the Kontakt buttons, so it stays a signal for "this is the contact
	   CTA" instead of showing up everywhere. */
	background: var(--color-gradient-end);
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	padding: 0.9em 1.8em;
	/* Never a pill. --radius on a box this short resolves to half its height,
	   so reading the inherited --radius-child would make a button in open page
	   space a stadium and the same button in a card a 12px rectangle — the
	   inconsistency this was meant to remove. Buttons take the nested radius at
	   every depth instead, which is also what the concentric rule lands on
	   inside any panel here (every one pads by 2rem or more). */
	border-radius: var(--radius-nested);
	border: 0;
	cursor: pointer;
	box-shadow: 0 8px 20px -8px rgba(62, 60, 144, 0.6);
	/* Colour properties belong here as much as transform and box-shadow do.
	   The filled buttons hover by changing their shadow, so they eased; every
	   outline and ghost variant hovers by changing background-color instead
	   (.btn--outline, .btn--ghost-white, .btn--white, and the three context
	   overrides in 03-header / 19-angebote-cta / 28-plattform), and with only
	   transform and box-shadow listed their fill snapped in at once while the
	   2px lift underneath it eased — the same button reading as two different
	   interactions depending on which variant it happened to be. */
	transition:
		transform var(--transition),
		box-shadow var(--transition),
		background-color var(--transition),
		border-color var(--transition),
		color var(--transition);
}

.btn:hover {
	transform: translateY(var(--hover-lift-control));
	box-shadow: 0 12px 24px -8px rgba(62, 60, 144, 0.7);
	text-decoration: none;
}

/* The flashy two-tone version, reserved for the buttons that actually lead to
   Kontakt. letsdoo_button() (inc/template-helpers.php) marks those with
   data-kontakt-modal — it needs the attribute anyway to intercept the click
   and open the modal instead of navigating — so it doubles as the "this is
   the contact CTA" flag here. */
.btn[data-kontakt-modal] {
	/* +180deg rather than reordering the two colour stops — same inverted
	   travel, but still reads as "the shared brand angle, flipped" instead of
	   duplicating --color-gradient-start/-end in the opposite order. */
	background: linear-gradient(calc(var(--gradient-angle) + 180deg), var(--color-gradient-start), var(--color-gradient-end));
	/* Stretched to 150% so the button only shows the middle stretch of the
	   gradient's travel rather than the full pink-to-blue run — a softer,
	   less abrupt blend across a surface this small. */
	background-size: 150% 150%;
	background-position: center;
	/* --color-gradient-start (#e9446a) at 20% opacity. CSS can't apply alpha
	   to a var() hex value directly, so this is the literal 8-digit form —
	   same convention as the --color-gradient-* tints in 01-base.css. */
	border: 3px solid #e9446a33;
}

.btn--sm {
	padding: 0.6em 1.4em;
	font-size: var(--text-xs);
}

.btn--outline {
	background: none;
	color: var(--color-ink);
	border: 2px solid var(--color-ink);
	box-shadow: none;
}

.btn--outline:hover {
	background: var(--color-ink);
	color: #fff;
	box-shadow: none;
}

.btn--white {
	background: #fff;
	color: var(--color-gradient-end);
	box-shadow: none;
}

.btn--white:hover {
	background: #f2f2f2;
	box-shadow: none;
}

.btn--ghost-white {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.7);
	box-shadow: none;
}

.btn--ghost-white:hover {
	background: rgba(255, 255, 255, 0.15);
	box-shadow: none;
}