/*
Theme Name:   Kondido
Theme URI:    https://kondido.de
Author:       Kondido
Author URI:   https://kondido.de
Description:  Custom WordPress theme for Kondido — premium pastry & cake studio. Built as a classic (non-FSE) theme, Gutenberg-compatible.
Version:      0.1.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kondido
Domain Path:  /languages

This step migrates ONLY the global design system from /reference-static
(assets/css/style.css, lines 1-158 + the form-control block) — design
tokens, base typography, buttons, form controls, basic links, and the
global background/text rules. Homepage sections, nav, footer, and the
shop/product/gallery layouts are NOT migrated yet; they still live only
in /reference-static.

Font loading is intentionally NOT done via @import here — see
functions.php (kondido_enqueue_assets / kondido_resource_hints) for the
isolated, swappable font-loading setup. No local font files exist in
/reference-static today, so fonts stay CDN-loaded (Google Fonts) until
self-hosted files are added later; only the loading mechanism lives in
one place so that swap doesn't touch this file.
*/

/* ============================================================
   DESIGN TOKENS
   Source: /reference-static/assets/css/style.css :root block.
   Same palette/scale, unchanged — nothing invented here.
   ============================================================ */
:root {
	/* Brand neutrals */
	--ink: #1c1410;
	--espresso: #241812;
	--espresso-deep: #170f0a;
	--white: #ffffff;

	/* Warm cream base */
	--cream-soft: #fdfaf5;
	--cream: #faf5ec;
	--cream-deep: #ece1cd;
	--champagne: #f3e2b8;

	/* Patisserie accent (gold/caramel) */
	--gold-light: #e6c583;
	--gold: #c99a45;
	--gold-deep: #8a5f22;
	--caramel: #97602f;

	/* Events accent (bordeaux/rose) */
	--rose-light: #dba594;
	--rose: #b4614a;
	--rose-deep: #7c2f2a;
	--bordeaux: #5c211f;

	/* Semantic (overridden per-page via body.page-* below) */
	--accent: var(--gold);
	--accent-deep: var(--gold-deep);
	--accent-light: var(--gold-light);

	--text: var(--ink);
	--text-muted: #5c4c3d;
	--border-soft: rgba(28, 20, 16, 0.16);

	/* Semantic aliases — same palette, clearer intent at the call site. */
	--color-text-primary: var(--ink);
	--color-text-secondary: var(--text-muted);
	--color-background: var(--cream);
	--color-surface: var(--white);
	--color-accent: var(--accent);
	--color-primary-action: var(--accent-deep);
	--color-border: var(--border-soft);

	/* Type */
	--font-display: "Cormorant Garamond", Georgia, serif;
	--font-script: "Pinyon Script", cursive;
	--font-sans: "Jost", "Inter", sans-serif;

	/* Functional type scale — restrained, reused everywhere instead of
	   one-off pixel values. Display sizes (H1/selected H2/editorial
	   moments) stay as per-component clamp()s since they're deliberately
	   bespoke; this scale covers everything read as interface/body text. */
	--text-xs: 11px;
	--text-sm: 12.5px;
	--text-base: 14px;
	--text-md: 15.5px;
	--text-lg: 17px;
	--text-xl: 20px;
	--text-2xl: clamp(26px, 3vw, 32px);

	/* Layout */
	--max-w: 1360px;
	--section-pad: clamp(72px, 9vw, 128px) clamp(24px, 6vw, 96px);
	--r: 2px;
	--nav-h-solid: 70px; /* #nav's height once .solid (scrolled) — used to offset sticky elements below it, e.g. .gallery-toolbar */

	/* Shadow / motion */
	--shadow-sm: 0 4px 20px rgba(23, 15, 10, 0.08);
	--shadow-md: 0 14px 50px rgba(23, 15, 10, 0.14);
	--shadow-lg: 0 30px 90px rgba(23, 15, 10, 0.22);
	--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--dur-fast: 200ms;
	--dur: 400ms;
}

/* Self-hosted RTL typography — Vazirmatn (UI/body) and Estedad (display/
   headings), bundled as static WOFF2 instances (one file per weight, no
   variable-font axis) in assets/fonts/. Only ever loaded for fa_IR/ar,
   via the [dir="rtl"] token overrides below — an LTR visitor's browser
   never even requests these files, since nothing in the German/English
   cascade references the "Vazirmatn"/"Estedad" family names.
   font-display: swap avoids a blank flash of invisible text while a
   face loads. Each weight is declared as its own @font-face (not a
   font-weight range, since these aren't variable fonts) so that a
   style requesting a weight without an exact file (e.g. the 700 used
   by .nav-link-highlight) still resolves to the nearest REAL declared
   face via the browser's own font-matching instead of being synthesized
   on top of one — this is what keeps the bold weights on this page
   genuine glyphs, not faux-bold. */
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Vazirmatn";
	src: url("assets/fonts/Vazirmatn-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Estedad";
	src: url("assets/fonts/Estedad-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Estedad";
	src: url("assets/fonts/Estedad-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Cormorant Garamond / Pinyon Script / Jost (the :root tokens above) are
   Latin-only — none carry Persian or Arabic glyphs. Redefining the
   three font tokens here, scoped to [dir="rtl"] (the attribute
   WordPress/Polylang already set on <html> for fa_IR/ar — see
   language_attributes() in header.php, no theme code decides this),
   re-points every var(--font-*) call in this file at once: body/nav/
   buttons/forms/footer (--font-sans) get Vazirmatn, while headings and
   the two decorative display roles (--font-display, --font-script) get
   Estedad — deliberately NOT used for ordinary body text. Vazirmatn is
   also listed as --font-display/--font-script's second-choice fallback
   (ahead of the system stack) since it's already guaranteed loaded via
   --font-sans on the same page and reads far better on Arabic-script
   text than Tahoma/system-ui if Estedad ever fails to load.
   No selector below needs to know any of this — every existing rule
   that reads var(--font-display/--font-script/--font-sans) picks it up
   automatically through inheritance. */
[dir="rtl"] {
	--font-sans: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
	--font-display: "Estedad", "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
	--font-script: "Estedad", "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
}

/* Page-level accent themes — gold is the :root default; only the
   rose/bordeaux pages (Events, Hochzeit) override it. Kept here since
   it's part of the color system itself, not page-section markup. */
body.page-events {
	--accent: var(--rose-deep);
	--accent-deep: var(--bordeaux);
	--accent-light: var(--rose);
}
body.page-hochzeit {
	--accent: var(--rose-deep);
	--accent-deep: var(--bordeaux);
	--accent-light: var(--rose);
}

/* ============================================================
   GLOBAL BACKGROUND / TEXT / BASE RULES
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font-family: inherit;
}
:focus-visible {
	outline: 2px solid var(--accent-deep);
	outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 500;
	margin: 0;
	color: var(--ink);
}
em {
	font-style: italic;
	color: var(--accent-deep);
}

/* Basic content links (e.g. inside Gutenberg-rendered post/page content,
   .entry-content) — the static prototype never needed a generic prose
   link style since every link there is a component (nav/button/footer),
   none of which are migrated yet. This is the minimal reasonable default
   for arbitrary editor content, built from the same tokens/hover pattern
   already used for e.g. .legal-section a in the prototype. */
.entry-content a {
	color: var(--accent-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.entry-content a:hover {
	color: var(--ink);
}

/* ============================================================
   CONTAINER
   ============================================================ */
.container {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 64px);
}

/* ============================================================
   TYPOGRAPHY PRIMITIVES
   Reused across every page (not homepage-specific): the eyebrow label +
   heading + body-copy pattern that introduces most sections.
   ============================================================ */
.section-label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}
.section-label-line {
	width: 36px;
	height: 1px;
	background: var(--accent);
}
.section-label-text {
	font-size: var(--text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-deep);
	font-weight: 600;
}

.section-heading {
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.18;
}
.section-heading.light {
	color: var(--cream);
}
.section-heading.light em {
	color: var(--accent-light);
}

.section-body {
	max-width: 560px;
	color: var(--text-muted);
	font-size: var(--text-lg);
	line-height: 1.75;
}
.section-body.light {
	color: rgba(250, 245, 236, 0.82);
}

/* ============================================================
   BUTTONS — three-tier CTA hierarchy used everywhere:
   .btn-solid   = primary action
   .btn-outline = secondary action
   .btn-text    = tertiary / low-priority text link
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 34px;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: var(--r);
	cursor: pointer;
	border: 1px solid transparent;
	transition: all var(--dur) var(--ease);
	white-space: nowrap;
}
.btn-solid {
	background: var(--accent-deep);
	color: var(--white);
}
.btn-solid:hover {
	background: var(--ink);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.btn-outline {
	border-color: var(--ink);
	color: var(--ink);
	border-width: 1.5px;
}
.btn-outline:hover {
	background: var(--ink);
	color: var(--cream-soft);
	border-color: var(--ink);
}
.btn-outline.on-dark {
	color: var(--cream);
	border-color: var(--cream);
}
.btn-outline.on-dark:hover {
	background: var(--cream);
	color: var(--espresso);
}
.btn-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent-deep);
	font-weight: 600;
}
.btn-text .arrow {
	width: 22px;
	height: 1px;
	background: currentColor;
	position: relative;
	transition: width var(--dur) var(--ease);
}
.btn-text .arrow::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}
/* The chevron is drawn from a rotated corner (border-top + border-right),
   not expressible as a logical property — rotating the shape is what
   makes it point right, so mirroring it for RTL needs an explicit
   override, not just a logical inset-inline-end (already applied above
   for the box's own position). Swaps which two sides carry the border
   and flips the rotation sign, so the chevron points toward "forward"
   in RTL reading order (start-to-end) instead of still pointing right. */
[dir="rtl"] .btn-text .arrow::after {
	border-right: none;
	border-left: 1px solid currentColor;
	transform: rotate(-45deg);
}
.btn-text:hover .arrow {
	width: 32px;
}
.btn-text:hover {
	color: var(--ink);
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-group {
	margin-bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.form-label {
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--text-muted);
}
.form-input,
.form-select,
.form-textarea {
	border: 1.5px solid var(--border-soft);
	background: var(--white);
	padding: 13px 16px;
	font-family: var(--font-sans);
	font-size: var(--text-md);
	color: var(--ink);
	border-radius: var(--r);
	transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	border-color: var(--accent-deep);
	outline: none;
	box-shadow: 0 0 0 3px rgba(138, 95, 34, 0.14);
}
/* The rule above intentionally clears the default outline in favor of the
   border+shadow treatment — but that must not remove focus visibility for
   keyboard users, so :focus-visible gets its own explicit outline back. */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
	outline: 2px solid var(--accent-deep);
	outline-offset: 1px;
}
.form-textarea {
	resize: vertical;
	min-height: 110px;
}

/* ============================================================
   NAV
   Source: /reference-static/assets/css/style.css (#nav block).
   Desktop links, the "Torte gestalten" highlight treatment, the
   burger, the full-screen mobile nav, and the language switcher all
   match the static prototype. #nav.on-dark is the transparent-over-
   hero state — applied by header.php on every page whose template
   renders an image hero behind the nav (see
   kondido_page_has_image_hero() in functions.php), not just the front
   page.
   ============================================================ */
/* Standard WordPress screen-reader-text pattern: visually hidden until
   keyboard-focused, at which point .skip-link becomes visible so sighted
   keyboard users can see and use it. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 300;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	padding: 14px 24px;
	background: var(--ink);
	color: var(--cream-soft);
	border-radius: var(--r);
	font-size: var(--text-base);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

#nav {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px clamp(20px, 5vw, 56px);
	transition: background var(--dur) var(--ease), padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#nav.solid {
	background: rgba(250, 245, 236, 0.94);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--border-soft);
	padding-top: 10px;
	padding-bottom: 10px;
}
/* Subtle only — this is a fallback for the odd bright/busy patch of
   photo behind a link, not the primary readability mechanism (that's
   the top-of-hero gradient on .hero-bg below). Kept faint on purpose
   so it never reads as an outline/glow effect. */
#nav.on-dark:not(.solid) .nav-link,
#nav.on-dark:not(.solid) .nav-cta.btn-outline,
#nav.on-dark:not(.solid) .kondido-lang-trigger {
	text-shadow: 0 1px 6px rgba(23, 15, 10, 0.45);
}
#nav.on-dark:not(.solid) .nav-link {
	color: var(--cream);
}
#nav.on-dark:not(.solid) .nav-cta.btn-outline {
	color: var(--cream);
}
#nav.on-dark:not(.solid) .nav-cta.btn-outline:hover {
	background: var(--cream);
	color: var(--espresso);
	border-color: var(--cream);
	text-shadow: none;
}

.nav-logo-wrap {
	display: flex;
	align-items: center;
}
/* #nav-scoped (not just .nav-logo-img) so this always beats
   WooCommerce's own ".woocommerce img, .woocommerce-page img"
   (height:auto) — that rule matches any image under body.woocommerce,
   which includes the header, and a bare single-class selector here would
   lose to it on specificity ((0,1,0) vs (0,1,1)). */
#nav .nav-logo-img {
	height: 64px;
	width: auto;
	display: block;
	transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), height var(--dur) var(--ease);
}
#nav.solid .nav-logo-img {
	height: 50px;
}
#nav.on-dark:not(.solid) .nav-logo-img {
	filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(23, 15, 10, 0.45));
}

.nav-links {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
}
.nav-link {
	font-size: var(--text-base);
	letter-spacing: 0.03em;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--ink);
	position: relative;
	padding-bottom: 4px;
	transition: color var(--dur-fast);
}
.nav-link::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--accent-deep);
	transition: width var(--dur) var(--ease);
}
.nav-link:hover::after,
.nav-link.active::after {
	width: 100%;
}
.nav-link.active {
	color: var(--accent-deep);
	font-weight: 600;
}

.nav-cta.btn {
	padding: 12px 26px;
}

/* Featured nav item ("Torte gestalten") — a normal menu item that gets
   this treatment via the "nav-cta-highlight" CSS class (see
   kondido_nav_menu_link_attributes() in functions.php). */
.nav-link.nav-link-highlight {
	padding: 9px 20px;
	border-radius: 20px;
	background: var(--accent);
	color: var(--espresso-deep);
	font-size: calc(var(--text-base) + 0.5px);
	font-weight: 700;
	letter-spacing: 0.03em;
	box-shadow: 0 2px 10px rgba(138, 95, 34, 0.28);
	transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.nav-link.nav-link-highlight::after {
	display: none;
}
.nav-link.nav-link-highlight:hover {
	background: var(--accent-deep);
	color: var(--white);
	box-shadow: 0 4px 16px rgba(138, 95, 34, 0.4);
	transform: translateY(-1px);
}
.nav-link.nav-link-highlight.active {
	background: var(--accent-deep);
	color: var(--white);
}
#nav.on-dark:not(.solid) .nav-link.nav-link-highlight {
	color: var(--espresso-deep);
}
#nav.on-dark:not(.solid) .nav-link.nav-link-highlight:hover {
	color: var(--white);
}

.nav-burger {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	background: none;
	border: none;
	z-index: 210;
}
.nav-burger-icon {
	position: relative;
	width: 30px;
	height: 20px;
	display: block;
}
.nav-burger-icon span {
	position: absolute;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transition: all var(--dur) var(--ease);
}
.nav-burger-icon span:nth-child(1) {
	top: 0;
}
.nav-burger-icon span:nth-child(2) {
	top: 9px;
}
.nav-burger-icon span:nth-child(3) {
	top: 18px;
}
.nav-burger.open .nav-burger-icon span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}
.nav-burger.open .nav-burger-icon span:nth-child(2) {
	opacity: 0;
}
.nav-burger.open .nav-burger-icon span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

.mobile-nav {
	position: fixed;
	inset: 0;
	background: var(--espresso);
	z-index: 190;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	transform: translateY(-100%);
	transition: transform 500ms var(--ease);
	/* Safety net for short viewports: with the language switcher added
	   below the primary links, the full centered column can now exceed
	   viewport height on shorter phones. overflow-y stays auto (a no-op
	   until content actually overflows) rather than visible, so every
	   item — including the language dropdown — stays reachable instead
	   of being silently clipped off-screen. */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.mobile-nav.open {
	transform: translateY(0);
}
/* The menu prints as a semantic <ul>/<li> list (better for screen
   readers than the static prototype's bare <a> tags), but the flex
   layout above needs its direct children to BE the links — display:
   contents removes the ul/li boxes from layout without removing them
   from the accessibility tree or the DOM. */
.mobile-nav-menu,
.mobile-nav-menu li {
	display: contents;
}
.mobile-nav a {
	font-family: var(--font-sans);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--cream);
}
.mobile-nav a.active {
	color: var(--accent-light);
	font-weight: 600;
}
.mobile-nav a.nav-link-highlight {
	background: var(--accent);
	color: var(--espresso-deep);
	font-size: 19px;
	font-weight: 700;
	padding: 12px 30px;
	border-radius: 26px;
}
.mobile-nav a.nav-link-highlight.active {
	background: var(--accent-deep);
	color: var(--white);
}
/* left:50%+translateX(-50%) is horizontal centering, not a directional
   position — kept physical rather than logical on purpose (a logical
   inset-inline-start wouldn't pair correctly with the physical
   translateX transform). */
/* #mobileNav-scoped for the same reason as #nav .nav-logo-img above —
   beats WooCommerce's ".woocommerce img" on WooCommerce pages. */
#mobileNav .mobile-nav-logo {
	height: 52px;
	width: auto;
	filter: brightness(0) invert(1);
	position: absolute;
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 960px) {
	.nav-links,
	.nav-cta,
	.kondido-lang-switcher--desktop {
		display: none;
	}
	.nav-burger {
		display: flex;
		color: var(--ink);
	}
	#nav.on-dark:not(.solid) .nav-burger {
		color: var(--cream);
		filter: drop-shadow(0 1px 6px rgba(23, 15, 10, 0.45));
	}
}

/* ============================================================
   LANGUAGE SWITCHER
   Compact "DE ▾" trigger + dropdown fed by kondido_render_language_
   switcher() (functions.php), rendered once for the desktop nav and
   once for the mobile nav overlay — the same duplicate-per-variant
   idiom already used for the logo and primary menu above. Only one
   copy is ever visible at a time, via the shared 960px breakpoint.
   ============================================================ */
.kondido-lang-switcher {
	position: relative;
}
.kondido-lang-trigger {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--ink);
	padding: 6px 2px;
	transition: color var(--dur-fast);
}
.kondido-lang-trigger:hover {
	color: var(--accent-deep);
}
#nav.on-dark:not(.solid) .kondido-lang-trigger {
	color: var(--cream);
}
.kondido-lang-trigger-caret {
	font-size: 10px;
	line-height: 1;
	transition: transform var(--dur-fast) var(--ease);
}
.kondido-lang-switcher.open .kondido-lang-trigger-caret {
	transform: rotate(180deg);
}
.kondido-lang-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: calc(100% + 14px);
	inset-inline-end: 0;
	min-width: 172px;
	max-width: calc(100vw - 40px);
	background: var(--cream-soft);
	border: 1px solid var(--border-soft);
	border-radius: var(--r);
	box-shadow: var(--shadow-md);
	z-index: 220;
}
.kondido-lang-menu[hidden] {
	display: none;
}
.kondido-lang-option {
	display: block;
	padding: 9px 18px;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	color: var(--ink);
	white-space: nowrap;
	transition: background var(--dur-fast), color var(--dur-fast);
}
.kondido-lang-option:hover {
	background: var(--cream-deep);
}
.kondido-lang-option.is-current {
	color: var(--accent-deep);
	font-weight: 600;
}

/* Mobile nav copy — plain flex item in .mobile-nav's centered column
   (see .mobile-nav / .mobile-nav-menu above), styled to match the
   full-screen dark overlay instead of the light desktop dropdown.
   position:static keeps the opened list in normal flow (pushing
   nothing, since it's the last item) instead of absolutely
   positioned, which is what keeps it safely inside the viewport at
   375px without any extra overflow handling. */
.mobile-nav .kondido-lang-switcher {
	margin-top: 4px;
}
.mobile-nav .kondido-lang-trigger {
	justify-content: center;
	color: var(--cream);
	font-size: 20px;
	padding: 4px;
}
.mobile-nav .kondido-lang-trigger:hover {
	color: var(--accent-light);
}
.mobile-nav .kondido-lang-menu {
	position: static;
	margin-top: 14px;
	min-width: 0;
	width: 220px;
	max-width: calc(100vw - 60px);
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: none;
	text-align: center;
}
.mobile-nav .kondido-lang-option {
	color: var(--cream);
	font-size: 16px;
}
.mobile-nav .kondido-lang-option:hover {
	background: rgba(255, 255, 255, 0.08);
}
.mobile-nav .kondido-lang-option.is-current {
	color: var(--accent-light);
}

/* ============================================================
   FOOTER
   Source: /reference-static/assets/css/style.css (#footer block).
   The legal-links row (Impressum/Datenschutz/Cookie-Einstellungen) is
   not migrated yet — see footer.php. Selector is #colophon, matching
   footer.php's actual id (the theme's #primary-style landmark naming) —
   not #footer, which never matched anything.
   ============================================================ */
#colophon {
	background: var(--espresso-deep);
	color: rgba(250, 245, 236, 0.72);
	padding: 64px clamp(20px, 5vw, 64px) 28px;
}
.footer-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}
/* #colophon-scoped for the same reason as #nav .nav-logo-img above —
   beats WooCommerce's ".woocommerce img" on WooCommerce pages. */
#colophon .footer-logo-img {
	height: 46px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
}
.footer-desc {
	font-size: var(--text-base);
	line-height: 1.7;
	margin-top: 16px;
	max-width: 280px;
	color: rgba(250, 245, 236, 0.65);
}
.footer-col-title {
	font-size: var(--text-sm);
	letter-spacing: 0.08em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--accent-light);
	margin-bottom: 16px;
}
.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.footer-links a {
	font-size: var(--text-base);
	color: rgba(250, 245, 236, 0.78);
	transition: color var(--dur-fast);
}
.footer-links a:hover {
	color: var(--cream-soft);
	text-decoration: underline;
}
.footer-hours {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(250, 245, 236, 0.1);
}
.footer-hours-title {
	font-size: var(--text-sm);
	letter-spacing: 0.08em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--accent-light);
	margin-bottom: 10px;
	display: block;
}
.footer-hours-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: var(--text-base);
	color: rgba(250, 245, 236, 0.78);
	padding: 3px 0;
}
.footer-bottom {
	max-width: var(--max-w);
	margin: 48px auto 0;
	padding-top: 22px;
	border-top: 1px solid rgba(250, 245, 236, 0.1);
	display: flex;
	justify-content: space-between;
	font-size: var(--text-sm);
	color: rgba(250, 245, 236, 0.55);
	flex-wrap: wrap;
	gap: 10px;
}
@media (max-width: 900px) {
	.footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.footer-inner {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   HOMEPAGE — Source: /reference-static/assets/css/style.css.
   Reveal animations, hero, the "gestalte deine Torte" process steps,
   the Patisserie/Events hub split, the about/Meister section, the
   numbers band, and the kontakt teaser (reuses .hub-section).
   ============================================================ */

/* ---- Reveal animations (IntersectionObserver-driven, see main.js) ---- */
.reveal,
.reveal-left,
.reveal-right {
	opacity: 0;
	transition: opacity 450ms var(--ease), transform 450ms var(--ease);
}
.reveal {
	transform: translateY(12px);
}
.reveal-left {
	transform: translateX(-14px);
}
.reveal-right {
	transform: translateX(14px);
}
/* .reveal-left/-right name the edge an element slides in FROM, matched
   to where it actually sits once the (direction-aware) grid/flex layout
   around it has placed it — under RTL that placement mirrors, so the
   slide-in direction needs to mirror with it, or an element that's now
   on the visual right would still slide in from the left. transform
   has no logical inline-axis equivalent yet, so this is an explicit,
   minimal override rather than something logical properties can express. */
[dir="rtl"] .reveal-left {
	transform: translateX(14px);
}
[dir="rtl"] .reveal-right {
	transform: translateX(-14px);
}
.reveal.in,
.reveal-left.in,
.reveal-right.in {
	opacity: 1;
	transform: translate(0, 0);
}
.delay-1.in {
	transition-delay: 80ms;
}
.delay-2.in {
	transition-delay: 160ms;
}
.delay-3.in {
	transition-delay: 240ms;
}
.delay-4.in {
	transition-delay: 320ms;
}
.delay-5.in {
	transition-delay: 400ms;
}

/* ---- Hero (shared skeleton; per-page background image via inline style) ---- */
.hero,
.page-hero,
.shop-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	background: var(--espresso);
}
.hero {
	min-height: 100svh;
	overflow: hidden;
}
.hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.9;
}
/* Guaranteed-readable scrim: darkest immediately behind the text band
   (bottom, where .hero-inner sits) regardless of what the photo looks
   like there, lighter toward the top so the photography still reads. */
.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23, 15, 10, 0.62) 0%, rgba(23, 15, 10, 0.2) 20%, rgba(23, 15, 10, 0.18) 42%, rgba(23, 15, 10, 0.58) 70%, var(--espresso-deep) 100%);
}
/* Second, separate scrim for the #nav.on-dark transparent header sitting
   on top of this same image — keeps nav/logo/language-switcher readable
   without touching the header itself (transparent header + this gradient
   on the hero, per design). Deliberately short and steep (fully faded by
   ~200px, well within .page-hero's shortest real-world height) so it
   only shades the strip directly behind the nav, not the hero at large;
   the bottom scrim above already owns the .hero-inner text band and the
   two don't meaningfully overlap. */
.hero-bg::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 200px;
	background: linear-gradient(180deg, rgba(23, 15, 10, 0.5) 0%, rgba(23, 15, 10, 0.24) 45%, rgba(23, 15, 10, 0) 100%);
}
@media (max-width: 480px) {
	.hero-bg::after {
		background: linear-gradient(180deg, rgba(23, 15, 10, 0.66) 0%, rgba(23, 15, 10, 0.52) 30%, rgba(23, 15, 10, 0.58) 60%, rgba(23, 15, 10, 0.85) 100%);
	}
}
.hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: clamp(112px, 15vw, 150px) clamp(20px, 6vw, 72px) clamp(56px, 8vw, 96px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hero-script {
	font-family: var(--font-script);
	font-size: 28px;
	color: var(--accent-light);
	text-shadow: 0 2px 16px rgba(23, 15, 10, 0.65);
}
.hero-title {
	font-size: clamp(42px, 7vw, 84px);
	line-height: 1.02;
	color: var(--cream-soft);
	max-width: 900px;
	text-shadow: 0 2px 24px rgba(23, 15, 10, 0.65);
}
.hero-sub {
	color: rgba(250, 245, 236, 0.9);
	font-size: var(--text-lg);
	max-width: 520px;
	text-shadow: 0 1px 12px rgba(23, 15, 10, 0.5);
}
.hero-btns {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.hero-scroll {
	position: absolute;
	inset-inline-end: clamp(20px, 6vw, 72px);
	bottom: 36px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(250, 245, 236, 0.78);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: 0 1px 8px rgba(23, 15, 10, 0.5);
}
.hero-scroll-line {
	width: 1px;
	height: 40px;
	background: rgba(250, 245, 236, 0.35);
	position: relative;
	overflow: hidden;
}
.hero-scroll-line::after {
	content: "";
	position: absolute;
	top: -100%;
	inset-inline-start: 0;
	width: 100%;
	height: 100%;
	background: var(--accent-light);
	animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine {
	0% {
		top: -100%;
	}
	60%,
	100% {
		top: 100%;
	}
}

/* ---- Event process steps ("Gestalte deine Torte") ---- */
.process-section {
	padding: var(--section-pad);
	background: var(--cream-deep);
}
.process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin-top: 48px;
}
.process-step {
	position: relative;
	padding-top: 28px;
	border-top: 1px solid var(--border-soft);
}
.process-num {
	font-family: var(--font-display);
	font-size: 34px;
	color: var(--accent);
	position: absolute;
	top: -24px;
	inset-inline-end: 0;
	opacity: 0.5;
}
.process-title {
	font-size: 19px;
	font-weight: 500;
	margin-bottom: 10px;
}
.process-desc {
	font-size: var(--text-md);
	color: var(--text-muted);
	line-height: 1.65;
}
@media (max-width: 900px) {
	.process-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.process-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Hub split (home page — Patisserie / Events) ---- */
.hub-section {
	padding: var(--section-pad);
	background: var(--cream);
}
.hub-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 56px;
}
.hub-header .section-label {
	justify-content: center;
}
.hub-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.hub-card {
	position: relative;
	min-height: 520px;
	border-radius: var(--r);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	box-shadow: var(--shadow-md);
}
.hub-card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 900ms var(--ease);
}
.hub-card:hover .hub-card-bg {
	transform: scale(1.06);
}
.hub-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23, 15, 10, 0.05) 30%, rgba(23, 15, 10, 0.86) 100%);
}
.hub-card-content {
	position: relative;
	z-index: 2;
	padding: 44px;
	width: 100%;
	color: var(--cream-soft);
}
.hub-card-tag {
	font-size: var(--text-sm);
	letter-spacing: 0.1em;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
	display: block;
}
.hub-card.tone-gold .hub-card-tag {
	color: var(--gold-light);
}
.hub-card.tone-rose .hub-card-tag {
	color: var(--rose-light);
}
.hub-card-title {
	font-size: clamp(28px, 3vw, 40px);
	color: var(--cream-soft);
	margin-bottom: 14px;
}
.hub-card-desc {
	color: rgba(250, 245, 236, 0.85);
	max-width: 380px;
	margin-bottom: 22px;
	font-size: var(--text-md);
	line-height: 1.7;
}
.hub-card-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--text-base);
	letter-spacing: 0.04em;
	font-weight: 600;
	text-transform: uppercase;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(250, 245, 236, 0.5);
	transition: border-color var(--dur);
}
.hub-card.tone-gold .hub-card-link {
	color: var(--gold-light);
}
.hub-card.tone-rose .hub-card-link {
	color: var(--rose-light);
}
.hub-card:hover .hub-card-link {
	border-color: currentColor;
}
@media (max-width: 840px) {
	.hub-grid {
		grid-template-columns: 1fr;
	}
	.hub-card {
		min-height: 420px;
	}
}

/* ---- Meister / About ---- */
.about-section {
	padding: var(--section-pad);
}
.about-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}
.about-image-wrap {
	position: relative;
}
.about-img-main {
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.about-img-accent {
	position: absolute;
	bottom: -40px;
	inset-inline-start: -40px;
	width: 44%;
	border-radius: var(--r);
	box-shadow: var(--shadow-md);
	border: 6px solid var(--cream);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.about-years-badge {
	position: absolute;
	top: -24px;
	inset-inline-end: -24px;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: var(--accent-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
}
.about-years-badge-inner {
	text-align: center;
	color: var(--cream-soft);
}
.about-years-num {
	display: block;
	font-family: var(--font-display);
	font-size: 30px;
	line-height: 1;
}
.about-years-text {
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.about-quote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 22px;
	color: var(--ink);
	margin: 20px 0;
	padding-inline-start: 20px;
	border-inline-start: 2px solid var(--accent);
	line-height: 1.5;
}
.about-signature {
	font-family: var(--font-script);
	font-size: 34px;
	color: var(--accent-deep);
	display: block;
	margin-top: 22px;
}
.about-meta {
	display: flex;
	gap: 36px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--border-soft);
	flex-wrap: wrap;
}
.about-meta-num {
	display: block;
	font-family: var(--font-display);
	font-size: 26px;
	color: var(--ink);
}
.about-meta-label {
	font-size: var(--text-sm);
	color: var(--text-muted);
	letter-spacing: 0.02em;
}
@media (max-width: 900px) {
	.about-inner {
		grid-template-columns: 1fr;
		gap: 80px 0;
	}
	.about-img-accent {
		width: 48%;
	}
}

/* ---- Numbers / stats band ---- */
.numbers-section {
	background: var(--espresso);
	padding: 64px clamp(20px, 5vw, 64px);
}
.numbers-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}
.number-val {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 48px);
	color: var(--accent-light);
	display: block;
}
.number-label {
	font-size: var(--text-sm);
	color: rgba(250, 245, 236, 0.8);
	letter-spacing: 0.03em;
	margin-top: 6px;
	display: block;
}
@media (max-width: 700px) {
	.numbers-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============================================================
   INNER PAGES — Source: /reference-static/assets/css/style.css.
   Shared across patisserie/hochzeit/events/galerie/ueber-uns/kontakt:
   page hero + breadcrumb, category/item card grids, feature split
   sections, the order/contact form shell, and the kontakt info block.
   Gallery's own toolbar/grid/lightbox lives in assets/css/gallery.css
   (page-specific, enqueued only there).
   ============================================================ */

/* ---- Page intro header (shares .hero-bg/.hero-inner/etc. above) ---- */
.page-hero {
	min-height: 64vh;
}
.breadcrumb {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(250, 245, 236, 0.75);
	text-shadow: 0 1px 8px rgba(23, 15, 10, 0.5);
	margin-bottom: 18px;
}
.breadcrumb a {
	color: rgba(250, 245, 236, 0.95);
}
.breadcrumb .sep {
	opacity: 0.6;
}

/* ---- Card grids (categories / specialties / portfolio pieces) ---- */
.cards-section {
	padding: var(--section-pad);
	scroll-margin-top: 96px;
}
.cards-section.on-dark {
	background: var(--espresso);
}
.cards-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 44px;
	flex-wrap: wrap;
}
.cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cards-grid.cols-4 {
	grid-template-columns: repeat(4, 1fr);
}
.item-card {
	position: relative;
	display: block;
	border-radius: var(--r);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
}
.item-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--ease);
}
.item-card:hover img {
	transform: scale(1.08);
}
.item-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23, 15, 10, 0) 40%, rgba(23, 15, 10, 0.88) 100%);
}
.item-overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: 26px;
	color: var(--cream-soft);
}
.item-cat {
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--accent-light);
	display: block;
	margin-bottom: 6px;
}
.item-name {
	font-size: 21px;
	color: var(--cream-soft);
	margin-bottom: 8px;
}
.item-desc {
	font-size: var(--text-base);
	color: rgba(250, 245, 236, 0.85);
	line-height: 1.6;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.item-card:hover .item-desc,
.item-card:focus-within .item-desc {
	max-height: 120px;
	opacity: 1;
	margin-top: 6px;
}
@media (hover: none) {
	/* Hover never fires on touch, so without this the description stays permanently hidden there. */
	.item-desc {
		max-height: 120px;
		opacity: 1;
		margin-top: 6px;
	}
}
@media (max-width: 960px) {
	.cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.cards-grid.cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.cards-grid,
	.cards-grid.cols-4 {
		grid-template-columns: 1fr;
	}
}

/* ---- Feature split (image + copy, alternating sides) ---- */
.feature-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	padding: var(--section-pad);
}
.feature-split.reverse .feature-media {
	order: 2;
}
.feature-media img {
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
}
.feature-list {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.feature-list li {
	display: flex;
	gap: 12px;
	font-size: var(--text-md);
	color: var(--text);
	align-items: flex-start;
}
.feature-list li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-deep);
	margin-top: 9px;
	flex-shrink: 0;
}
@media (max-width: 900px) {
	.feature-split {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.feature-split.reverse .feature-media {
		order: 0;
	}
}

/* ---- Order / contact form shell (dark section + light form card) ---- */
.order-section {
	padding: var(--section-pad);
	background: var(--espresso);
}
.order-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
}
.gold-rule {
	display: block;
	width: 64px;
	height: 2px;
	background: var(--accent);
	margin: 20px 0;
}
.order-promise {
	margin-top: 32px;
	padding: 22px 24px;
	border-inline-start: 2px solid var(--accent);
	background: rgba(250, 245, 236, 0.06);
}
.order-promise-title {
	color: var(--cream-soft);
	font-weight: 600;
	margin: 0 0 6px;
	font-size: var(--text-md);
	letter-spacing: 0.02em;
}
.order-promise-text {
	color: rgba(250, 245, 236, 0.78);
	font-size: var(--text-base);
	line-height: 1.65;
	margin: 0;
}
.order-form {
	background: var(--cream-soft);
	border-radius: var(--r);
	padding: 40px;
	box-shadow: var(--shadow-lg);
}
.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.form-submit {
	width: 100%;
	margin-top: 6px;
	border: none;
}
@media (max-width: 900px) {
	.order-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}
@media (max-width: 520px) {
	.form-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Kontakt info block (used on the kontakt page) ---- */
.kontakt-info-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 28px;
}
.kontakt-info-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.kontakt-info-item svg {
	width: 20px;
	height: 20px;
	stroke: var(--accent-light);
	flex-shrink: 0;
	margin-top: 2px;
}
.kontakt-info-item a,
.kontakt-info-item span {
	color: rgba(250, 245, 236, 0.9);
	font-size: var(--text-md);
	line-height: 1.5;
}
.kontakt-info-item a:hover {
	color: var(--accent-light);
}
.kontakt-hours {
	margin-top: 32px;
	padding: 24px;
	border-radius: var(--r);
	background: rgba(250, 245, 236, 0.05);
	border: 1px solid rgba(250, 245, 236, 0.14);
}
.kontakt-hours-title {
	font-size: var(--text-sm);
	letter-spacing: 0.08em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--accent-light);
	margin-bottom: 14px;
	display: block;
}
.kontakt-hours-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid rgba(250, 245, 236, 0.1);
	font-size: var(--text-base);
	color: rgba(250, 245, 236, 0.88);
}
.kontakt-hours-row:last-child {
	border-bottom: none;
}
.kontakt-hours-row.closed {
	color: rgba(250, 245, 236, 0.5);
}
.kontakt-social-row {
	display: flex;
	gap: 14px;
	margin-top: 28px;
}
.kontakt-social-row a {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(250, 245, 236, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cream-soft);
	transition: all var(--dur-fast);
}
.kontakt-social-row a:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
}
.kontakt-social-row svg {
	width: 17px;
	height: 17px;
}

/* ---- Filter pill (used by the gallery filter bar; also reusable by the
   future shop toolbar, so it lives in the shared design system rather
   than gallery.css) ---- */
.filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 30px;
	border: 1.5px solid var(--border-soft);
	background: var(--white);
	font-size: var(--text-base);
	letter-spacing: 0.02em;
	font-weight: 500;
	color: var(--text-muted);
	cursor: pointer;
	transition: all var(--dur-fast);
	white-space: nowrap;
}
.filter-pill .count {
	font-size: var(--text-xs);
	color: var(--text-muted);
	opacity: 0.75;
}
.filter-pill:hover {
	border-color: var(--accent-deep);
	color: var(--ink);
}
.filter-pill.active {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: var(--white);
}
.filter-pill.active .count {
	color: rgba(255, 255, 255, 0.8);
}

/* ---- Small pill tag (e.g. events.html's "Demnächst verfügbar" badge) ---- */
.menu-tag {
	font-size: var(--text-xs);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 5px 12px;
	border: 1.5px solid var(--border-soft);
	border-radius: 20px;
	color: var(--text-muted);
}

/* ============================================================
   TORTE GESTALTEN (page-torte-gestalten.php)
   Nav clearance + intro spacing only — #nav is fixed/transparent and
   this page has no hero, same reason as the Shop/Single-Product nav
   clearance rules. The configurator widget itself (steps, options,
   pricing) is styled entirely by the kondido-configurator plugin's own
   assets/css/configurator.css.
   ============================================================ */
.configurator-page {
	padding-top: 150px;
	padding-bottom: 96px;
}
.configurator-intro {
	max-width: 640px;
	margin: 0 auto 56px;
	text-align: center;
}
@media (max-width: 900px) {
	.configurator-page {
		padding-top: 130px;
	}
}