/* Stempelkarte – sign-up block inside the theme. Everything is scoped to .stk-signup. */

.stk-signup {
	--stk-bg: #1c1318;
	--stk-accent: #d9a38f;
	--su-ink: #2a2025;
	--su-muted: #6d6066;
	--su-line: #e7dcd7;
	--su-field: #ffffff;
	--su-soft: color-mix(in oklab, var(--stk-accent) 9%, #fff);
	--su-accent-hi: color-mix(in oklab, var(--stk-accent) 70%, #fff);
	--su-accent-lo: color-mix(in oklab, var(--stk-accent) 72%, #000);
	--su-serif: "STK Cormorant", "Cormorant Garamond", Georgia, serif;
	--su-sans: "STK Manrope", Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	max-width: 980px;
	margin: 0 auto;
	padding: 24px 16px;
	border-radius: 28px;
	background: #fff;
	border: 1px solid var(--su-line);
	color: var(--su-ink);
	font-family: var(--su-sans);
	font-size: 16px;
	line-height: 1.5;
	scroll-margin-top: 90px;
}

.stk-signup *, .stk-signup *::before, .stk-signup *::after { box-sizing: border-box; }

@media (min-width: 820px) {
	.stk-signup { grid-template-columns: 1fr 1fr; gap: 44px; padding: 40px; }
}

/* ------------------------------------------------------------- card mock */

.stk-su-card {
	position: relative;
	max-width: 360px;
	margin: 0 auto 26px;
	padding: 20px 18px 18px;
	border-radius: 24px;
	color: #f8f1ed;
	background: color-mix(in oklab, var(--stk-bg) 92%, #fff);
	box-shadow: 0 24px 48px -28px color-mix(in oklab, var(--stk-bg) 80%, transparent);
}

.stk-su-card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

.stk-su-card-head img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}

.stk-su-eyebrow {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--stk-accent);
}

.stk-su-title {
	display: block;
	margin-top: 2px;
	font-family: var(--su-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 32px;
	line-height: 1;
}

.stk-su-stamps {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), 1fr);
	gap: 10px;
	margin: 18px 6px 14px;
	padding: 0;
	list-style: none;
}

.stk-su-stamps li {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1.5px dashed color-mix(in oklab, var(--stk-accent) 38%, transparent);
	color: rgba(248, 241, 237, .4);
	font-family: var(--su-serif);
	font-size: 18px;
	font-variant-numeric: lining-nums;
	margin: 0;
}

.stk-su-stamps li svg { width: 50%; height: 50%; }
.stk-su-stamps li.is-goal svg { width: 42%; height: 42%; }
.stk-su-stamps li.is-goal { border-style: solid; color: var(--stk-accent); }

.stk-su-stamps li.is-filled {
	border: 0;
	transform: rotate(var(--tilt, 0deg));
	color: color-mix(in oklab, var(--stk-bg) 88%, #000);
	background: radial-gradient(circle at 32% 26%, var(--su-accent-hi), var(--stk-accent) 48%, var(--su-accent-lo));
	box-shadow: inset 0 -2px 4px color-mix(in oklab, var(--su-accent-lo) 60%, transparent);
}

.stk-su-reward {
	display: block;
	padding: 9px 12px;
	border-radius: 10px;
	background: color-mix(in oklab, var(--stk-accent) 16%, transparent);
	font-size: 13px;
	font-weight: 600;
}

.stk-su-h {
	margin: 0 0 12px;
	font-family: var(--su-serif);
	font-weight: 600;
	font-size: clamp(30px, 5vw, 40px);
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--su-ink);
}

.stk-su-lead {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--su-muted);
}

/* ----------------------------------------------------------------- form */

.stk-su-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }

.stk-su-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--su-ink);
}

.stk-su-field label span { font-weight: 500; color: var(--su-muted); }

.stk-signup input[type="text"],
.stk-signup input[type="email"],
.stk-signup input[type="tel"] {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--su-line);
	border-radius: 14px;
	background: var(--su-field);
	color: var(--su-ink);
	font: inherit;
	font-size: 16px;
	box-shadow: 0 1px 2px rgba(42, 32, 37, .04);
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}

.stk-signup input:focus {
	outline: none;
	border-color: var(--stk-accent);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--stk-accent) 22%, transparent);
}

.stk-su-field small { display: block; margin-top: 6px; font-size: 13px; color: var(--su-muted); }

.stk-su-check {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 10px;
	align-items: start;
	font-size: 14px;
	line-height: 1.45;
	color: var(--su-muted);
	cursor: pointer;
}

.stk-su-check input {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--su-accent-lo);
}

.stk-su-check a { color: var(--su-ink); text-decoration: underline; text-underline-offset: 3px; }

.stk-su-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	margin-top: 4px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--stk-bg);
	color: #fff;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	transition: transform .12s, background .15s;
}

.stk-su-btn:hover { background: color-mix(in oklab, var(--stk-bg) 85%, var(--stk-accent)); }
.stk-su-btn:active { transform: scale(.98); }
.stk-su-btn:focus-visible { outline: 3px solid var(--stk-accent); outline-offset: 3px; }
.stk-su-btn.is-small { width: auto; min-height: 48px; margin: 0; flex: none; }

.stk-su-terms { margin: 0; font-size: 12.5px; color: var(--su-muted); text-align: center; }

.stk-su-msg {
	margin: 0 0 16px;
	padding: 14px 16px;
	border-radius: 14px;
	font-size: 14.5px;
	line-height: 1.45;
}

.stk-su-msg strong { display: block; color: var(--su-ink); }
.stk-su-msg.is-ok { background: #edf7f0; border: 1px solid #bfe2cb; color: #35553f; }
.stk-su-msg.is-error { background: #fbeeee; border: 1px solid #efc6c6; color: #7a2f2f; }

.stk-su-recover {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--su-line);
	font-size: 14.5px;
}

.stk-su-recover summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--su-ink);
	list-style-position: inside;
}

.stk-su-recover form { margin: 12px 0 0; }

.stk-su-inline { display: flex; gap: 8px; }
.stk-su-inline input { flex: 1; min-width: 0; }

.stk-su-hp, .stk-su-sr {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ------------------------------------------------------ shared controls */

.stk-su-btn.is-auto { width: auto; }
.stk-su-btn.is-outline { background: transparent; color: var(--su-ink); box-shadow: inset 0 0 0 1.5px var(--su-ink); }
.stk-su-btn.is-outline:hover { background: var(--su-ink); color: #fff; }
.stk-su-btn.is-danger { background: #9c2f2f; }
.stk-su-btn.is-danger:hover { background: #7f2424; }
a.stk-su-btn { text-decoration: none; }

.stk-su-h.is-small { font-size: clamp(26px, 4vw, 32px); }
.stk-su-lead.is-small { font-size: 14.5px; margin-bottom: 14px; }

.stk-su-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 16px 0 0;
	font-size: 14.5px;
	color: var(--su-muted);
}

.stk-su-links a, .stk-su-login a, .stk-su-textlink { color: var(--su-ink); text-underline-offset: 3px; }
.stk-su-login { margin: 20px 0 0; font-size: 14.5px; color: var(--su-muted); }

.stk-su-inline-form { display: inline; margin: 0; }

.stk-su-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--su-ink);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.stk-signup input.stk-su-code {
	max-width: 220px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .3em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.stk-su-hint { margin: 12px 0 0; font-size: 13.5px; color: var(--su-muted); }
.stk-su-reward.is-ready { background: var(--stk-accent); color: color-mix(in oklab, var(--stk-bg) 90%, #000); }

/* --------------------------------------------------------- account page */

.stk-acc { max-width: 760px; }

@media (min-width: 820px) {
	.stk-signup.stk-acc { grid-template-columns: 1fr; gap: 28px; padding: 40px 44px; }
}

.stk-acc-head p { margin: 0; font-size: 14.5px; color: var(--su-muted); }
.stk-acc-head a { color: var(--su-ink); }
.stk-acc-head .stk-su-h { margin-bottom: 4px; }

.stk-acc-cardrow {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: center;
}

@media (min-width: 640px) {
	.stk-acc-cardrow { grid-template-columns: minmax(0, 320px) 1fr; }
}

.stk-acc-card { display: block; width: 100%; margin: 0; text-decoration: none; transition: transform .15s; }
.stk-acc-card:hover { transform: translateY(-2px); }
.stk-acc-card:focus-visible { outline: 3px solid var(--stk-accent); outline-offset: 4px; }

.stk-acc-cardtext p { margin: 0 0 14px; color: var(--su-muted); }

.stk-acc-section {
	padding-top: 24px;
	border-top: 1px solid var(--su-line);
}

.stk-acc-section h3 {
	margin: 0 0 12px;
	font-family: var(--su-sans);
	font-size: 18px;
	font-weight: 700;
	color: var(--su-ink);
}

.stk-acc-section .stk-su-form { max-width: 460px; }

.stk-acc-danger summary {
	cursor: pointer;
	font-weight: 700;
	color: #9c2f2f;
}

.stk-acc-danger[open] summary { margin-bottom: 12px; }

.stk-acc-new {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--su-soft);
}

.stk-acc-new p { margin: 0; font-weight: 600; }
.stk-acc-new .stk-su-btn { width: auto; min-height: 48px; }

.stk-acc .stk-su-form { max-width: 460px; }
.stk-signup input[type="password"] {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--su-line);
	border-radius: 14px;
	background: var(--su-field);
	color: var(--su-ink);
	font: inherit;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}
.stk-signup input[readonly] { background: #f7f2ef; color: var(--su-muted); }
.stk-signup [hidden] { display: none !important; }

/* ------------------------------------------------------ home page teaser */

.stk-teaser {
	--stk-bg: #1c1318;
	--stk-accent: #d9a38f;
	--su-accent-hi: color-mix(in oklab, var(--stk-accent) 70%, #fff);
	--su-accent-lo: color-mix(in oklab, var(--stk-accent) 72%, #000);
	--su-serif: "STK Cormorant", "Cormorant Garamond", Georgia, serif;
	--su-sans: "STK Manrope", Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
	padding: 32px 20px;
	border-radius: 28px;
	background: var(--stk-bg);
	color: #f7efeb;
	font-family: var(--su-sans);
}

.stk-teaser *, .stk-teaser *::before, .stk-teaser *::after { box-sizing: border-box; }

@media (min-width: 820px) {
	.stk-teaser { grid-template-columns: minmax(0, 380px) 1fr; gap: 56px; padding: 56px; }
}

.stk-teaser .stk-su-card {
	margin: 0 auto;
	background: color-mix(in oklab, var(--stk-bg) 88%, #fff);
	box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .8);
}

.stk-teaser-h {
	margin: 0 0 14px;
	font-family: var(--su-serif);
	font-weight: 600;
	font-size: clamp(32px, 4.5vw, 46px);
	line-height: 1.05;
	color: #f7efeb;
}

.stk-teaser-text p {
	margin: 0 0 12px;
	max-width: 520px;
	font-size: 17px;
	line-height: 1.6;
	color: color-mix(in oklab, #f7efeb 76%, var(--stk-bg));
}

.stk-teaser-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin-top: 24px;
}

.stk-teaser-btn {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	background: var(--stk-accent);
	color: color-mix(in oklab, var(--stk-bg) 90%, #000) !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: background .15s;
}

.stk-teaser-btn:hover { background: var(--su-accent-hi); }
.stk-teaser-btn:focus-visible, .stk-teaser-link:focus-visible { outline: 2px solid var(--su-accent-hi); outline-offset: 3px; }

.stk-teaser-link {
	color: #f7efeb !important;
	font-weight: 600;
	text-underline-offset: 4px;
}

/* account: bookings */
.stk-acc-booking {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0 0 10px;
	padding: 14px 16px;
	border: 1px solid var(--su-line);
	border-radius: 14px;
	background: #fff;
}
.stk-acc-booking-main b { display: block; }
.stk-acc-booking-main span { display: block; }
.stk-acc-booking-main small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--su-muted); }
.stk-acc-booking-cancel summary { cursor: pointer; font-weight: 600; color: #9c2f2f; }
.stk-acc-booking-cancel[open] { flex-basis: 100%; }
.stk-acc-booking-cancel p { margin: 10px 0; font-size: 14px; color: var(--su-muted); }
.stk-acc-past-h { margin: 22px 0 6px; font-size: 14px; font-weight: 700; color: var(--su-muted); }
.stk-acc-past { margin: 0; padding: 0; list-style: none; }
.stk-acc-past li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--su-line); font-size: 14.5px; }
.stk-acc-past small { color: var(--su-muted); white-space: nowrap; }

/* Account: appointments */
.stk-acc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.stk-acc-row h3 { margin: 0 !important; }
.stk-su-btn.is-small { min-height: 42px; padding: 0 18px; font-size: 15px; margin: 0; }

.stk-appt-card {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 16px;
	margin: 0 0 10px;
	padding: 16px;
	border: 1px solid var(--su-line);
	border-radius: 16px;
	background: #fff;
}

.stk-appt-date {
	display: grid;
	place-content: center;
	text-align: center;
	height: 64px;
	border-radius: 14px;
	background: var(--stk-bg);
	color: #fff;
}

.stk-appt-date b { font-family: var(--su-serif); font-size: 28px; line-height: 1; }
.stk-appt-date span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--stk-accent); }
.stk-appt-info { display: grid; gap: 2px; min-width: 0; }
.stk-appt-info span { font-size: 14.5px; color: var(--su-muted); }
.stk-appt-cancel { margin-top: 8px; }
.stk-appt-cancel summary { cursor: pointer; font-size: 14px; font-weight: 700; color: #9c2f2f; }
.stk-appt-cancel p { margin: 8px 0 10px; font-size: 14px; color: var(--su-muted); }
.stk-appt-cancel form { margin: 0; }

.stk-acc-past { margin-top: 14px; }
.stk-acc-past summary { cursor: pointer; font-weight: 600; }
.stk-acc-past ul { margin: 10px 0 0; padding: 0; list-style: none; }
.stk-acc-past li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--su-line); font-size: 14.5px; }
.stk-acc-past li span:last-child { color: var(--su-muted); white-space: nowrap; }

/* Account: orders and review link */
.stk-acc-orders { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stk-acc-orders a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--su-line); border-radius: 14px; color: inherit; text-decoration: none; }
.stk-acc-orders a:hover { border-color: currentColor; }
.stk-acc-orders span { display: grid; gap: 2px; min-width: 0; }
.stk-acc-orders small { color: var(--su-muted); font-size: 13.5px; }
.stk-acc-orders em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--su-muted); }
.stk-acc-orders em.is-ready { color: #2f6a47; }
.stk-acc-review { font-weight: 700; white-space: nowrap; }

/* Invite a friend (Mein Konto) */
.stk-invite p { margin: 0 0 12px; }
.stk-invite-code { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; max-width: 520px; padding: 12px 16px; border-radius: 14px; background: color-mix(in oklab, var(--stk-accent) 16%, #fff); }
.stk-invite-code span { font-size: 13px; color: var(--su-muted, #6b5e64); }
.stk-invite-code b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; letter-spacing: .06em; }
.stk-invite-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stk-invite-stats { margin: 12px 0 0 !important; font-size: 14px; color: var(--su-muted, #6b5e64); }

/* Birthday (day + month) */
.stk-bday { margin: 0; padding: 0; border: 0; }
.stk-bday legend { margin-bottom: 6px; font-weight: 700; font-size: .9375rem; }
.stk-bday legend span { font-weight: 500; color: var(--su-muted, #6b5e64); }
.stk-bday-row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.stk-bday select { width: 100%; min-height: 50px; padding: 0 12px; border: 1px solid var(--su-line, #e6dbd4); border-radius: 14px; background: #fff; font: inherit; font-size: 16px; color: inherit; }
.stk-bday small { display: block; margin-top: 6px; font-size: 13px; color: var(--su-muted, #6b5e64); }
.stk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stk-acc-bday { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; background: #fbf1ec; border: 1px solid #efdcd3; color: #2a2025; text-decoration: none; font-size: 15px; line-height: 1.45; }
.stk-acc-bday > span:first-child { font-size: 26px; line-height: 1; }
.stk-acc-bday:hover { border-color: #d9a38f; }