/*
 * Smash Festival 2026 — design tokens.
 * Source: Figma "artsip — smash web styling (Copy)"
 * https://www.figma.com/design/FQLiMNWZaGzyAemljDoGEG
 */

@font-face {
	font-family: "Dazzed";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/Dazzed-Medium.woff2") format("woff2"),
		url("../fonts/Dazzed-Medium.woff") format("woff");
}

@font-face {
	font-family: "Dazzed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/Dazzed-SemiBold.woff2") format("woff2"),
		url("../fonts/Dazzed-SemiBold.woff") format("woff");
}

:root {
	/* Brand palette */
	--smash-color-schwarz: #000000;
	--smash-color-weiss: #ffffff;
	--smash-color-artsip-pink: #ff5cff;
	--smash-color-artsip-neon-gruen: #b0ff70;
	--smash-color-bordeaux: #511a32;

	/* Semantic roles */
	--smash-color-bg: var(--smash-color-schwarz);
	--smash-color-fg: var(--smash-color-weiss);
	--smash-color-accent: var(--smash-color-artsip-pink);
	--smash-color-highlight: var(--smash-color-artsip-neon-gruen);
	--smash-color-ticket: var(--smash-color-bordeaux);

	/* Typography */
	--smash-font-display: "Dazzed", system-ui, sans-serif;
	--smash-font-body: "Dazzed", system-ui, sans-serif;
	--smash-font-weight-semibold: 600;

	/* Type scale — in px because Kalium forces html { font-size: 62.5% } (10px root),
	   which would halve rem-based values. Using px keeps Figma sizes exact. */
	--smash-font-size-nav: 17px;   /* navbar links */
	--smash-font-size-body: 20px;  /* footer nav, tagline */
	--smash-font-size-h1: 40px;

	--smash-line-height-tight: 1.1;     /* H1 */
	--smash-line-height-body: 1.2;      /* footer body */

	/* Spacing scale */
	--smash-space-1: 0.25rem;
	--smash-space-2: 0.5rem;
	--smash-space-3: 1rem;
	--smash-space-4: 2rem;
	--smash-space-5: 4rem;
}

body {
	background: var(--smash-color-bg);
	color: var(--smash-color-fg);
	font-family: var(--smash-font-body);
	font-weight: var(--smash-font-weight-semibold);
}

/* =========================================================================
   Page theming — driven by body class from smash_2026_body_class()
   ========================================================================= */

/* Page container — cap the whole site at 1440 and center it. Body + html
   keep painting the theme color (see rules below) so gutters on ultra-wide
   viewports blend into the surrounding frame. Newsletter + footer live
   outside .wrapper so they need the same cap explicitly. */
html body #main-wrapper,
html body > .smash-newsletter,
html body > .smash-footer {
	max-width: 1440px;
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
}

/* Higher-specificity + !important so the template backgrounds win over
   legacy `body{ background: linear-gradient ... !important }` rules that
   live in Customizer → Additional CSS from the old theme. Same goes for
   the parent .wrapper which Kalium/legacy also paints. */
html body.smash-theme-white,
html body.smash-theme-white #main-wrapper {
	background: var(--smash-color-weiss) !important;
	background-image: none !important;
	color: var(--smash-color-schwarz);
}

html body.smash-theme-pink,
html body.smash-theme-pink #main-wrapper {
	background: var(--smash-color-ticket) !important; /* bordeaux #511a32 */
	background-image: none !important;
	color: var(--smash-color-weiss);
}

body.smash-theme-pink h1,
body.smash-theme-pink h2,
body.smash-theme-pink h3,
body.smash-theme-pink h4,
body.smash-theme-pink h5,
body.smash-theme-pink h6 {
	color: var(--smash-color-weiss);
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: var(--smash-font-display) !important;
}

body.smash-theme-white h1,
body.smash-theme-white h2,
body.smash-theme-white h3,
body.smash-theme-white h4,
body.smash-theme-white h5,
body.smash-theme-white h6 {
	color: var(--smash-color-schwarz);
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: var(--smash-font-display) !important;
}

/* -------------------------------------------------------------------------
 * Body copy links — brand palette, not Kalium's accent teal.
 *
 * Scoped to standard content wrappers (WPBakery text columns, Kalium's
 * .content, our .smash-page article, paragraph/list copy). Smash VC
 * elements use their own classes and still win via !important.
 * ------------------------------------------------------------------------- */
body.smash-theme-white .wpb_text_column a,
body.smash-theme-white .wpb_text_column a:link,
body.smash-theme-white .wpb_text_column a:visited,
body.smash-theme-white .smash-page__article a:not([class*="smash-"]):not(.vc_btn3):not(.vc_btn),
body.smash-theme-white .smash-page__article a:not([class*="smash-"]):not(.vc_btn3):not(.vc_btn):link,
body.smash-theme-white .smash-page__article a:not([class*="smash-"]):not(.vc_btn3):not(.vc_btn):visited,
body.smash-theme-white .wrapper p > a,
body.smash-theme-white .wrapper li > a,
body.smash-theme-white .wrapper p > a:link,
body.smash-theme-white .wrapper p > a:visited {
	color: var(--smash-color-ticket) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

body.smash-theme-white .wpb_text_column a:hover,
body.smash-theme-white .wpb_text_column a:focus-visible,
body.smash-theme-white .smash-page__article a:not([class*="smash-"]):not(.vc_btn3):not(.vc_btn):hover,
body.smash-theme-white .smash-page__article a:not([class*="smash-"]):not(.vc_btn3):not(.vc_btn):focus-visible,
body.smash-theme-white .wrapper p > a:hover,
body.smash-theme-white .wrapper li > a:hover,
body.smash-theme-white .wrapper p > a:focus-visible {
	color: var(--smash-color-accent) !important;
	text-decoration: underline !important;
}

body.smash-theme-pink .wpb_text_column a,
body.smash-theme-pink .wpb_text_column a:link,
body.smash-theme-pink .wpb_text_column a:visited,
body.smash-theme-pink .smash-page__article a:not([class*="smash-"]):not(.vc_btn3):not(.vc_btn),
body.smash-theme-pink .smash-page__article a:not([class*="smash-"]):not(.vc_btn3):not(.vc_btn):link,
body.smash-theme-pink .smash-page__article a:not([class*="smash-"]):not(.vc_btn3):not(.vc_btn):visited,
body.smash-theme-pink .wrapper p > a,
body.smash-theme-pink .wrapper li > a {
	color: var(--smash-color-accent) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

body.smash-theme-pink .wpb_text_column a:hover,
body.smash-theme-pink .wpb_text_column a:focus-visible,
body.smash-theme-pink .smash-page__article a:not([class*="smash-"]):not(.vc_btn3):not(.vc_btn):hover,
body.smash-theme-pink .smash-page__article a:not([class*="smash-"]):not(.vc_btn3):not(.vc_btn):focus-visible {
	opacity: 0.8;
	text-decoration: underline !important;
}

/* Kill Kalium's global animated ::after underline under these body links
   so we get a single clean underline from text-decoration. */
body.smash-theme-white .wpb_text_column a::after,
body.smash-theme-pink .wpb_text_column a::after {
	content: none !important;
	display: none !important;
}

/* Page container wrapping the_content(). Kept minimal so WPBakery / Gutenberg
   full-width blocks continue to break out; inner text blocks can set their
   own max-width. */
.smash-page {
	min-height: 60vh;
}

.smash-page__article {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	line-height: var(--smash-line-height-tight);
	letter-spacing: 0;
}

h1 {
	font-size: var(--smash-font-size-h1);
}

/* =========================================================================
   Blob — reusable bump-shape (match Figma's 3-4 overlapping circles)
   -------------------------------------------------------------------------
   Usage:
     <button class="smash-blob">
       <span class="smash-blob__shape" aria-hidden="true">
         <span></span><span></span><span></span><span></span>
       </span>
       <span class="smash-blob__label">Jetzt anmelden</span>
     </button>
   Each inner span is a circle; `justify-content: space-between` distributes
   them edge-to-edge, so circles at the ends are flush with the button box
   and middle circles fall at even fractions. For a button wider than ~3×
   its height, add a 5th span; narrower works with 3. 4 is the default.
   Variables:
     --smash-blob-color   fill colour (default: black)
     --smash-blob-text    text colour (default: neon green)
     --smash-blob-height  total button height (= circle diameter)
   Size modifiers: .smash-blob--sm / --md / --lg / --xl
   Colour modifiers: .smash-blob--black / --pink / --green / --white
   ========================================================================= */

.smash-blob {
	--smash-blob-color: var(--smash-color-schwarz);
	--smash-blob-text: var(--smash-color-highlight);
	--smash-blob-height: 50px;
	/* Circle diameter — defaults to height but can be bumped independently
	   so circles overhang the row slightly for extra presence. */
	--smash-blob-circle: var(--smash-blob-height);

	position: relative;
	box-sizing: border-box;
	height: var(--smash-blob-height);
	padding: 0 calc(var(--smash-blob-height) * 0.55);
	min-width: calc(var(--smash-blob-height) * 3);

	color: var(--smash-blob-text);
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: calc(var(--smash-blob-height) * 0.34);
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	isolation: isolate;
	transition: transform 0.15s ease;
}

/* Kalium's `.wrapper a { display: block }` rule wins against `.smash-blob`
   by specificity (0,1,1 > 0,1,0), which would flatten the label to the top
   of the button. Force inline-flex on the high-specificity selectors so the
   label centers on the circle row — but keep this rule to layout-only
   properties so it doesn't interfere with per-component custom-property
   overrides like --smash-blob-height. */
.smash-blob,
a.smash-blob,
.wrapper a.smash-blob,
.wrapper a.smash-blob.link-hover {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Kalium toggles .link-hover on every anchor inside .wrapper on hover and
   then sets color: inherit — which for our blob resolves to the parent's
   text color (often black) and makes the label vanish against the circles.
   Pin the label to its custom-property color in every state. */
.smash-blob,
.smash-blob:link,
.smash-blob:visited,
.smash-blob:hover,
.smash-blob:focus,
.smash-blob:focus-visible,
.smash-blob:active,
.wrapper a.smash-blob:hover,
.wrapper a.smash-blob.link-hover {
	color: var(--smash-blob-text) !important;
}

.smash-blob:hover { transform: translateY(-1px); }

.smash-blob:focus-visible {
	outline: 2px solid var(--smash-blob-color);
	outline-offset: 4px;
	border-radius: 9999px;
}

/* Shape layer: a flex row of fixed-size circles that overlap by a fixed
   fraction (default 33%). Put any number of inner <span>s inside — the
   row centers itself and the blob grows as circles are added. 5 circles
   with 33% overlap reproduces Figma's 3-4 bump feel at common sizes. */
.smash-blob {
	--smash-blob-overlap: 0.33; /* 0 = tangent, 0.5 = heavy overlap */
}

.smash-blob__shape {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.smash-blob__shape > span {
	width: var(--smash-blob-circle);
	height: var(--smash-blob-circle);
	border-radius: 50%;
	background: var(--smash-blob-color);
	flex-shrink: 0;
}

.smash-blob__shape > span + span {
	margin-left: calc(var(--smash-blob-circle) * var(--smash-blob-overlap) * -1);
}

.smash-blob__label {
	position: relative;
	z-index: 1;
	display: inline-block;
}

/* Size modifiers */
.smash-blob--sm { --smash-blob-height: 40px; }
.smash-blob--md { --smash-blob-height: 50px; }
.smash-blob--lg { --smash-blob-height: 72px; }
.smash-blob--xl { --smash-blob-height: 96px; }

/* Colour modifiers (can also be set inline via custom properties) */
.smash-blob--pink   { --smash-blob-color: var(--smash-color-accent); --smash-blob-text: var(--smash-color-schwarz); }
.smash-blob--green  { --smash-blob-color: var(--smash-color-highlight); --smash-blob-text: var(--smash-color-schwarz); }
.smash-blob--black  { --smash-blob-color: var(--smash-color-schwarz); --smash-blob-text: var(--smash-color-highlight); }
.smash-blob--white  { --smash-blob-color: var(--smash-color-weiss); --smash-blob-text: var(--smash-color-schwarz); }

/* =========================================================================
   Header / Primary Nav
   ========================================================================= */

.smash-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: transparent;
	pointer-events: none; /* children opt back in */
	transition: background 0.25s ease;
}

.smash-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1440px;
	margin: 0 auto;
	padding: 14px clamp(16px, 1.74vw, 25px);
	gap: 16px;
	pointer-events: auto;
}

/* Logo: 245×51 at rest, shrinks to ~146×30 on scroll. */
.smash-header__logo {
	display: block;
	width: clamp(140px, 17vw, 245px);
	line-height: 0;
	transition: width 0.25s ease;
	flex-shrink: 0;
}

.smash-header__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.smash-header.is-scrolled .smash-header__logo,
.smash-theme-pink .smash-header .smash-header__logo {
	width: clamp(110px, 10.2vw, 146px);
}

/* Nav list (from wp_nav_menu with menu_class="smash-nav") */
.smash-nav {
	display: flex;
	align-items: center;
	gap: 45px;
	list-style: none;
	margin: 0;
	padding: 13px 24px;
	font-family: var(--smash-font-body);
	font-size: var(--smash-font-size-nav);
	font-weight: var(--smash-font-weight-semibold);
	line-height: 1;
	color: var(--smash-color-schwarz);
	border-radius: 60px;
	background: transparent;
	border: 1px solid transparent;
	backdrop-filter: none;
	transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease, padding 0.25s ease;
}

/* Pilled nav variant: scrolled on white template OR always on pink template. */
.smash-header.is-scrolled .smash-nav,
.smash-theme-pink .smash-header .smash-nav {
	background: rgba(255, 255, 255, 0.45);
	border-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.smash-nav li {
	margin: 0;
}

.smash-nav a,
.smash-nav a:link,
.smash-nav a:visited {
	color: inherit;
	text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom: 0 !important;
	font-weight: var(--smash-font-weight-semibold);
	display: inline-block;
	padding: 2px 0;
}

/* Override the body-theme `.wrapper li > a` rules (which blanket-underline
   every list-link on white/pink pages) so the primary nav stays clean.
   Uses both theme body classes for (0,3,4) specificity — higher than the
   conflicting theme rule at (0,2,3). */
body.smash-theme-white .smash-header .smash-nav li > a,
body.smash-theme-white .smash-header .smash-nav li > a:link,
body.smash-theme-white .smash-header .smash-nav li > a:visited,
body.smash-theme-pink  .smash-header .smash-nav li > a,
body.smash-theme-pink  .smash-header .smash-nav li > a:link,
body.smash-theme-pink  .smash-header .smash-nav li > a:visited,
body.smash-theme-white .smash-header__nav .smash-nav li > a,
body.smash-theme-pink  .smash-header__nav .smash-nav li > a {
	color: inherit !important;
	text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom: 0 !important;
}

/* Underline only on hover / focus, still overriding the body-theme rules. */
body.smash-theme-white .smash-header .smash-nav li:not(.smash-nav__item--cta) > a:hover,
body.smash-theme-white .smash-header .smash-nav li:not(.smash-nav__item--cta) > a:focus-visible,
body.smash-theme-pink  .smash-header .smash-nav li:not(.smash-nav__item--cta) > a:hover,
body.smash-theme-pink  .smash-header .smash-nav li:not(.smash-nav__item--cta) > a:focus-visible {
	color: var(--smash-color-schwarz) !important;
	text-decoration: underline !important;
	text-decoration-line: underline !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: var(--smash-color-schwarz) !important;
}

/* Kill Kalium's animated underline bar on every nav anchor, not just the
   .wrapper ancestor selector — the CTA sits outside that context. */
.smash-nav a::after,
.smash-nav a::before,
.smash-header__nav a::after,
.smash-header__nav a::before {
	content: none !important;
	display: none !important;
	background: transparent !important;
	width: 0 !important;
	height: 0 !important;
	border: 0 !important;
}

/* Kalium's base.min.css injects an animated underline via .wrapper a::after
   (a 1px teal bar) plus a teal :hover color on every link. Kill both globally
   so our own styles are the single source of truth for link decoration. */
.wrapper a::after,
.site-footer a::after {
	content: none !important;
	display: none !important;
	background: transparent !important;
	width: 0 !important;
	height: 0 !important;
}
.wrapper a:hover,
.wrapper a.link-hover,
.site-footer a:hover,
.site-footer a.link-hover {
	color: inherit;
}

/* Hover / focus only — the current page does not get an underline, per
   design. The link stays black; only the underline is added. */
.smash-nav li:not(.smash-nav__item--cta) > a:hover,
.smash-nav li:not(.smash-nav__item--cta) > a:focus-visible {
	color: var(--smash-color-schwarz) !important;
	text-decoration: underline !important;
	text-decoration-line: underline !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: var(--smash-color-schwarz) !important;
	border-bottom: 0 !important;
}

/* Neutralize the active-page underline that earlier versions applied. */
.smash-nav li:not(.smash-nav__item--cta).current-menu-item > a,
.smash-nav li:not(.smash-nav__item--cta).current_page_item > a {
	text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom: 0 !important;
}

/* =========================================================================
 * Sub-menu (single sub-level)
 *
 * Desktop: hidden dropdown panel that appears below the parent on hover or
 * keyboard focus. Matches the pilled-nav aesthetic — translucent white
 * panel, soft shadow, Dazzed SemiBold.
 *
 * Mobile overlay: rendered inline under the parent. A chevron toggle button
 * injected by smash.js reveals/hides the nested list; the parent anchor
 * keeps its own navigation behaviour.
 * ========================================================================= */
.smash-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.smash-nav .menu-item-has-children {
	position: relative;
}

/* --- Desktop dropdown -------------------------------------------- */
@media (min-width: 901px) {
	.smash-nav__submenu-toggle {
		/* Mobile-only chevron; hidden on desktop where hover reveals. */
		display: none;
	}

	.smash-nav .sub-menu {
		position: absolute;
		top: calc(100% + 10px);
		left: 50%;
		min-width: max(180px, 100%);
		padding: 14px 20px;
		display: flex;
		flex-direction: column;
		gap: 6px;
		background: #ffffff !important;
		background-color: #ffffff !important;
		background-image: none !important;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid rgba(0, 0, 0, 0.06);
		border-radius: 20px;
		box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
		opacity: 0;
		pointer-events: none;
		transform: translate(-50%, -4px);
		transition: opacity 0.18s ease, transform 0.18s ease;
		z-index: 1100;
	}

	.smash-nav .menu-item-has-children:hover > .sub-menu,
	.smash-nav .menu-item-has-children:focus-within > .sub-menu,
	.smash-nav .menu-item-has-children.is-open > .sub-menu {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, 0);
	}

	/* Hover-bridge so the pointer can cross the 10px gap between parent
	   anchor and the dropdown without the submenu disappearing. */
	.smash-nav .menu-item-has-children::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 14px;
	}

	.smash-nav .sub-menu li {
		margin: 0;
	}

	body.smash-theme-white .smash-header .smash-nav .sub-menu a,
	body.smash-theme-pink  .smash-header .smash-nav .sub-menu a,
	.smash-nav .sub-menu a {
		display: block;
		padding: 4px 0;
		font-family: var(--smash-font-display);
		font-weight: var(--smash-font-weight-semibold);
		font-size: var(--smash-font-size-nav);
		line-height: 1.25;
		color: var(--smash-color-schwarz) !important;
		white-space: nowrap;
		text-decoration: none !important;
	}

	.smash-nav .sub-menu a:hover,
	.smash-nav .sub-menu a:focus-visible {
		color: var(--smash-color-schwarz) !important;
		text-decoration: underline !important;
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
		text-decoration-color: var(--smash-color-schwarz) !important;
		outline: none;
	}
}

/* --- Mobile overlay --------------------------------------------- */
@media (max-width: 900px) {
	.smash-header__nav .smash-nav .menu-item-has-children {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 14px;
		width: 100%;
	}

	.smash-header__nav .smash-nav .menu-item-has-children > a {
		flex: 0 1 auto;
	}

	.smash-nav__submenu-toggle {
		appearance: none;
		-webkit-appearance: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.12);
		color: inherit;
		cursor: pointer;
		transition: transform 0.2s ease, background 0.15s ease;
		flex: 0 0 auto;
	}

	.smash-nav__submenu-toggle:hover,
	.smash-nav__submenu-toggle:focus-visible {
		background: rgba(255, 255, 255, 0.22);
		outline: none;
	}

	/* Chevron drawn from two borders; rotates 180° when open. */
	.smash-nav__submenu-toggle::before {
		content: "";
		width: 10px;
		height: 10px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}

	.smash-nav__submenu-toggle[aria-expanded="true"]::before {
		transform: translateY(2px) rotate(-135deg);
	}

	.smash-header__nav .smash-nav .sub-menu {
		flex: 1 0 100%;
		display: none;
		flex-direction: column;
		gap: clamp(10px, 1.8vh, 16px);
		padding: clamp(14px, 2vh, 22px) 0 clamp(4px, 1vh, 10px) 18px;
		font-size: clamp(22px, 4.8vw, 32px);
		line-height: 1.1;
		border-left: 2px solid rgba(255, 255, 255, 0.22);
		margin-left: 6px;
		color: var(--smash-color-weiss);
	}

	.smash-header__nav .smash-nav .menu-item-has-children.is-open > .sub-menu {
		display: flex;
	}

	body.smash-theme-white .smash-header__nav .smash-nav .sub-menu a,
	body.smash-theme-pink  .smash-header__nav .smash-nav .sub-menu a,
	.smash-header__nav .smash-nav .sub-menu a {
		color: var(--smash-color-weiss) !important;
		padding: 2px 0;
		text-decoration: none !important;
	}

	.smash-header__nav .smash-nav .sub-menu a:hover,
	.smash-header__nav .smash-nav .sub-menu a:focus-visible {
		color: var(--smash-color-highlight) !important;
		text-decoration: underline !important;
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
		text-decoration-color: currentColor !important;
	}
}

/* Tickets CTA — menu item flagged with CSS class "tickets-cta".
   Uses the same .smash-blob__shape circle row as the newsletter button.
   The inner <span>s are injected at render time by smash_2026_nav_menu_cta_markup(). */
.smash-nav__item--cta {
	margin-left: 8px;
	--smash-blob-height: 41px;
	--smash-blob-circle: 41px;
	--smash-blob-overlap: 0.33;
	--smash-blob-color: var(--smash-color-accent); /* artsip pink #FF5CFF */
	--smash-blob-text: var(--smash-color-ticket);  /* bordeaux #511A32 */
}

.smash-nav__item--cta > a,
.smash-nav__item--cta > a:link,
.smash-nav__item--cta > a:visited {
	position: relative;
	display: inline-flex !important; /* beat the generic .smash-nav a:link rule */
	align-items: center;
	justify-content: center;
	height: var(--smash-blob-height);
	padding: 0 22px !important;
	color: var(--smash-blob-text) !important;
	text-decoration: none !important;
	font-weight: var(--smash-font-weight-semibold);
	isolation: isolate;
	z-index: 0;
	transition: transform 0.15s ease;
}

/* Resting state: no underline anywhere on the label. */
.smash-nav__item--cta > a,
.smash-nav__item--cta .smash-blob__label {
	text-decoration-line: none !important;
	text-decoration-color: transparent !important;
}

/* Hover / focus: keep the bordeaux text color (some parent rules
   otherwise flip it to the site accent and make the label vanish
   against the pink blob) and underline the label only. */
.smash-nav__item--cta > a:hover,
.smash-nav__item--cta > a:focus-visible,
.smash-nav__item--cta > a:hover .smash-blob__label,
.smash-nav__item--cta > a:focus-visible .smash-blob__label {
	color: var(--smash-blob-text) !important;
	text-decoration-line: underline !important;
	text-decoration-color: currentColor !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transform: none;
}

/* Reuse .smash-blob__shape rules (above) for the circle row, but scope them
   here in case the global rules change later. */
.smash-nav__item--cta .smash-blob__shape {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.smash-nav__item--cta .smash-blob__shape > span {
	width: var(--smash-blob-circle);
	height: var(--smash-blob-circle);
	border-radius: 50%;
	background: var(--smash-blob-color);
	flex-shrink: 0;
}

.smash-nav__item--cta .smash-blob__shape > span + span {
	margin-left: calc(var(--smash-blob-circle) * var(--smash-blob-overlap) * -1);
}

.smash-nav__item--cta .smash-blob__label {
	position: relative;
	z-index: 1;
}

/* =========================================================================
   Hamburger toggle — hidden on desktop, shown ≤900px
   ========================================================================= */

.smash-header__toggle {
	display: none;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--smash-color-schwarz);
	z-index: 1002; /* above overlay so the X is clickable */
}

.smash-theme-pink .smash-header__toggle {
	color: var(--smash-color-weiss);
}

.smash-header__toggle-bars {
	position: relative;
	width: 26px;
	height: 18px;
	display: block;
}

.smash-header__toggle-bars > span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2.5px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.15s ease, top 0.25s ease;
}

.smash-header__toggle-bars > span:nth-child(1) { top: 0; }
.smash-header__toggle-bars > span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.smash-header__toggle-bars > span:nth-child(3) { top: 100%; transform: translateY(-100%); }

/* Open state → X */
.smash-header__toggle[aria-expanded="true"] {
	color: var(--smash-color-weiss);
}

.smash-header__toggle[aria-expanded="true"] .smash-header__toggle-bars > span:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.smash-header__toggle[aria-expanded="true"] .smash-header__toggle-bars > span:nth-child(2) {
	opacity: 0;
}

.smash-header__toggle[aria-expanded="true"] .smash-header__toggle-bars > span:nth-child(3) {
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

/* =========================================================================
   Tablet + Mobile nav — full-screen overlay ≤900px
   ========================================================================= */

@media (max-width: 900px) {
	.smash-header__toggle {
		display: inline-flex;
	}

	/* Nav becomes a full-viewport overlay, hidden by default. Align the list
	   toward the top (under the close button) rather than vertically centered
	   so short viewports don't push the menu into dead space. */
	.smash-header__nav {
		position: fixed;
		inset: 0;
		background: var(--smash-color-schwarz);
		color: var(--smash-color-weiss);
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		padding: clamp(56px, 10vh, 96px) clamp(24px, 6vw, 60px) 40px;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-8px);
		transition: opacity 0.25s ease, transform 0.25s ease;
		z-index: 1001; /* under the toggle (1002), above everything else */
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.smash-header__nav[data-open="true"] {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	/* List inside the overlay stacks vertically, big Dazzed. Force white
	   color here too — .smash-nav sets an explicit black color on desktop
	   which breaks the inherit chain inside the dark mobile overlay. */
	.smash-header__nav .smash-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(14px, 2.4vh, 22px);
		padding: 0;
		background: transparent !important;
		border: 0 !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		font-size: clamp(28px, 6vw, 44px);
		line-height: 1;
		width: 100%;
		color: var(--smash-color-weiss) !important;
	}

	/* Win over `body.smash-theme-white .smash-header__nav .smash-nav li > a
	   { color: inherit !important }` — which cascades from .smash-nav's
	   explicit black color unless we force white at equal-or-higher
	   specificity. */
	body.smash-theme-white .smash-header__nav .smash-nav li > a,
	body.smash-theme-white .smash-header__nav .smash-nav li > a:link,
	body.smash-theme-white .smash-header__nav .smash-nav li > a:visited,
	body.smash-theme-pink  .smash-header__nav .smash-nav li > a,
	body.smash-theme-pink  .smash-header__nav .smash-nav li > a:link,
	body.smash-theme-pink  .smash-header__nav .smash-nav li > a:visited,
	.smash-header__nav .smash-nav a {
		color: var(--smash-color-weiss) !important;
		padding: 4px 0;
	}

	.smash-header__nav .smash-nav li:not(.smash-nav__item--cta) > a:hover,
	.smash-header__nav .smash-nav li:not(.smash-nav__item--cta) > a:focus-visible {
		color: var(--smash-color-highlight); /* neon green */
		text-decoration: underline !important;
		text-decoration-line: underline !important;
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
		text-decoration-color: currentColor;
		border-bottom: 0 !important;
	}

	.smash-header__nav .smash-nav li:not(.smash-nav__item--cta).current-menu-item > a,
	.smash-header__nav .smash-nav li:not(.smash-nav__item--cta).current_page_item > a {
		text-decoration: none !important;
		text-decoration-line: none !important;
		border-bottom: 0 !important;
	}

	/* Kill any legacy underline/border on child spans so only the anchor's
	   single underline renders. */
	.smash-header__nav .smash-nav a,
	.smash-header__nav .smash-nav a * {
		border-bottom: 0 !important;
	}
	.smash-header__nav .smash-nav a * {
		text-decoration: inherit !important;
	}

	/* Tickets CTA keeps the pink blob at the bottom — centered + larger on mobile. */
	.smash-header__nav .smash-nav__item--cta {
		align-self: center;
		margin: clamp(28px, 5vh, 48px) auto 0;
		--smash-blob-height: 72px;
		--smash-blob-circle: 72px;
		max-width: 100%;
	}

	.smash-header__nav .smash-nav__item--cta > a {
		padding: 0 40px;
		font-size: 28px;
		margin: 0 auto;
	}

	/* While the overlay is open, lock body scroll (set via JS). */
	body.smash-menu-open {
		overflow: hidden;
	}
}

/* Mobile fine-tuning */
@media (max-width: 520px) {
	.smash-header__inner {
		padding: 10px 16px;
	}

	.smash-header__nav {
		padding-top: clamp(48px, 9vh, 80px);
	}
}

/* Smallest phones (e.g. iPhone SE 320×568) — the 72px circle pill overflows
   past the overlay's 24px side padding (min-width 3 circles + padding = 296 >
   272 usable). Shrink the blob so `align-self: center` can actually center it. */
@media (max-width: 400px) {
	.smash-header__nav {
		padding-left: 20px;
		padding-right: 20px;
	}

	.smash-header__nav .smash-nav__item--cta {
		--smash-blob-height: 60px;
		--smash-blob-circle: 60px;
	}

	.smash-header__nav .smash-nav__item--cta > a {
		padding: 0 28px;
		font-size: 22px;
	}
}

/* =========================================================================
   Newsletter stripe (global, above footer)
   ========================================================================= */

.smash-newsletter {
	background: var(--smash-color-highlight); /* neon green #B0FF70 */
	color: var(--smash-color-schwarz);
	padding: clamp(32px, 4vw, 60px) clamp(20px, 2.78vw, 40px);
}

.smash-newsletter__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(24px, 4vw, 80px);
	align-items: center;
	max-width: 1440px;
	margin: 0 auto;
}

.smash-newsletter h2.smash-newsletter__heading {
	margin: 0;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	/* Fluid: 40px at >=1440px desktop, down to 20px at <=370px mobile.
	   Check-points: 1440→40, 900→30, 480→22, 360→20. */
	font-size: clamp(20px, 1.9vw + 13px, 40px);
	line-height: 1.15;
	color: var(--smash-color-schwarz);
	display: flex;
	flex-direction: column;
	gap: 0;
	letter-spacing: 0;
	text-transform: none;
}

.smash-newsletter__heading-line,
.smash-newsletter__heading-sub {
	display: block;
	text-transform: none;
}

.smash-newsletter__heading-sub {
	color: rgba(0, 0, 0, 0.45);
}

/* MC4WP wraps our pasted fields in:
     <form class="mc4wp-form ...">
       <div class="mc4wp-form-fields"> …our labels/button… </div>
       <input type="hidden" ...> <label style="display:none"> honeypot
       <div class="mc4wp-response"></div>
     </form>
   So the flex stack needs to apply to .mc4wp-form-fields (the real
   content container) in addition to our own wrapper.                    */
.smash-newsletter__form,
.smash-newsletter .smash-newsletter__form > form,
.smash-newsletter .smash-newsletter__form .mc4wp-form,
.smash-newsletter .smash-newsletter__form .mc4wp-form-fields {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Cap the column width on the *outermost* grid child only — the inner
   <form> / .mc4wp-form fill that column. */
.smash-newsletter__form {
	max-width: 460px;
	justify-self: end;
}

/* Kill stray <p> tags wpautop/MC4WP sometimes injects between labels. */
.smash-newsletter .smash-newsletter__form .mc4wp-form-fields > p {
	margin: 0;
}

.smash-newsletter__form .mc4wp-response,
.smash-newsletter__form .mc4wp-alert {
	color: inherit;
	font-family: var(--smash-font-body);
	font-size: 14px;
	line-height: 1.3;
	margin: 0;
}

/* Force the submit label's color over any Kalium / theme button rule.
   The hover/focus/active variants are explicit so the pinkish hover
   background Kalium injects on every button can't leak through. */
.smash-newsletter .smash-newsletter__submit,
.smash-newsletter .smash-newsletter__submit:hover,
.smash-newsletter .smash-newsletter__submit:focus,
.smash-newsletter .smash-newsletter__submit:focus-visible,
.smash-newsletter .smash-newsletter__submit:active,
.smash-newsletter .smash-newsletter__submit .smash-blob__label {
	color: var(--smash-color-highlight) !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.smash-newsletter__field {
	display: block;
	width: 100%;
	margin: 0;
}

/* Specificity note: Kalium's base.min.css targets input[type="email"]
   with specificity (0,1,1), so our class alone loses. Qualify with the
   parent and element to always win. */
.smash-newsletter input.smash-newsletter__input {
	display: block;
	width: 100%;
	height: 44px;
	padding: 0 20px;
	font-family: var(--smash-font-body);
	font-weight: 500;
	font-size: 16px;
	color: var(--smash-color-schwarz) !important;
	background: transparent;
	border: 1px solid var(--smash-color-schwarz);
	border-radius: 86px;
	outline: none;
	box-shadow: none;
}

.smash-newsletter input.smash-newsletter__input::placeholder,
body.smash-theme-pink .smash-newsletter input.smash-newsletter__input::placeholder {
	color: var(--smash-color-schwarz) !important;
	opacity: 0.7;
	-webkit-text-fill-color: var(--smash-color-schwarz);
}
.smash-newsletter input.smash-newsletter__input::-webkit-input-placeholder {
	color: var(--smash-color-schwarz) !important;
	opacity: 0.7;
}
.smash-newsletter input.smash-newsletter__input::-moz-placeholder {
	color: var(--smash-color-schwarz) !important;
	opacity: 0.7;
}

.smash-newsletter input.smash-newsletter__input:focus {
	border-width: 2px;
	padding: 0 19px;
	background: transparent;
}

/* GDPR consent */
.smash-newsletter .smash-newsletter__consent,
.smash-newsletter__form .smash-newsletter__consent,
label.smash-newsletter__consent {
	position: relative; /* Positioning context for the visually-hidden input. */
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 15px !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	margin: -4px 0 0;
	font-family: var(--smash-font-body);
	font-weight: 450;
	font-size: 12px;
	line-height: 1.2;
	color: var(--smash-color-schwarz);
	cursor: pointer;
	width: 100%;
}

.smash-newsletter .smash-newsletter__consent-text,
.smash-newsletter__form .smash-newsletter__consent-text,
.smash-newsletter__consent > .smash-newsletter__consent-text {
	display: block !important;
	/* Desktop target width is 390px, but on narrow mobile (<430px the pill
	   input + 16px padding already fills the viewport) a rigid 390px here
	   would push the consent row off-screen. Use flex-basis with
	   max-width: 100% so the text shrinks to the form column instead. */
	flex: 1 1 390px !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	color: var(--smash-color-schwarz);
	white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

/* =========================================================================
   Checkbox — sibling-visual pattern for reliable styling.
   -------------------------------------------------------------------------
   The real <input> is hidden but remains the source of truth for checked
   state and form submission. A sibling <span class="smash-check"> is styled
   to match the Figma spec: 24×24, 3px radius, black fill + neon-green check.
   Markup:
     <label>
       <input type="checkbox" class="smash-newsletter__checkbox">
       <span class="smash-check" aria-hidden="true"></span>
       <span>Label text…</span>
     </label>
   ========================================================================= */

/* Visually hidden but kept in place — anchored to the label (top:0,left:0)
   so browsers don't auto-scroll to (0,0) when the input gets focus from a
   label click. */
.smash-newsletter input[type="checkbox"].smash-newsletter__checkbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.smash-check {
	flex-shrink: 0;
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--smash-color-schwarz);
	border-radius: 3px;
	background: transparent;
	position: relative;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* Checkmark lines drawn with two borders rotated — no SVG, no data URI,
   scales cleanly at any size. */
.smash-check::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 4px;
	width: 8px;
	height: 13px;
	border-right: 2.5px solid var(--smash-color-highlight);
	border-bottom: 2.5px solid var(--smash-color-highlight);
	transform: rotate(42deg);
	transform-origin: center;
	opacity: 0;
	transition: opacity 0.1s ease;
}

/* Sibling combinator drives the visual from the real input's state. */
.smash-newsletter__checkbox:checked + .smash-check {
	background-color: #000;
	border-color: #000;
}

.smash-newsletter__checkbox:checked + .smash-check::after {
	opacity: 1;
}

.smash-newsletter__checkbox:focus-visible + .smash-check {
	outline: 2px solid var(--smash-color-schwarz);
	outline-offset: 2px;
}

/* Submit inherits everything from .smash-blob. Left-aligned within the
   form column (flush with input's left edge) but the label itself is
   centered on the circle row — the default .smash-blob layout. Pin circle
   size to 50px (Figma spec) regardless of viewport shrink. */
.smash-newsletter__submit {
	align-self: flex-start;
	--smash-blob-circle: 50px;
}

/* Screen-reader only utility (standard WP pattern) */
.smash-newsletter .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;
}

/* Tablet — stack columns, keep headline scale */
@media (max-width: 900px) {
	.smash-newsletter__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.smash-newsletter__form {
		justify-self: stretch;
		max-width: 100%;
	}
}

/* Mobile */
@media (max-width: 520px) {
	.smash-newsletter {
		padding: 32px 20px;
	}
}

/* =========================================================================
   Footer
   ========================================================================= */

.smash-footer {
	background: var(--smash-color-bg);
	color: var(--smash-color-fg);
	font-family: var(--smash-font-body);
	font-weight: var(--smash-font-weight-semibold);
	padding: 35px clamp(20px, 2.78vw, 40px) 35px;
}

.smash-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"event   social"
		"logo    logo"
		"nav     presented";
	gap: 24px clamp(16px, 4vw, 60px);
	align-items: center;
	max-width: 1440px;
	margin: 0 auto;
}

.smash-footer__event {
	grid-area: event;
	margin: 0;
	color: var(--smash-color-highlight);
	font-family: var(--smash-font-display);
	/* 40px at >=1280px, fluid down to 22px on small screens. */
	font-size: clamp(22px, 2.78vw + 6px, 40px);
	font-weight: var(--smash-font-weight-semibold);
	line-height: var(--smash-line-height-tight);
}

/* Social icons — wrapper positions the [lab_social_networks] shortcode's
   own <ul class="social-networks rounded-icons"> inside our grid slot. */
.smash-footer__social {
	grid-area: social;
	display: flex;
	align-items: center;
	justify-self: end;
}

.smash-footer__social .social-networks,
.smash-footer__social ul {
	display: flex;
	gap: 12px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.smash-footer__social .social-networks li {
	margin: 0;
}

/* Override Kalium + legacy Customizer styling.
   Specificity bumped with `html body` so we beat:
     .social-networks.rounded li a { background:#000 !important; }
     .social-networks.colored-bg-hover li a.linkedin:hover { background:#... !important; }
   …and the rest of Kalium's brand-color social rules. */
html body .smash-footer__social .social-networks li a,
html body .smash-footer__social .social-networks li a:link,
html body .smash-footer__social .social-networks li a:visited {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 39px;
	height: 39px;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	color: var(--smash-color-weiss) !important;
	border-radius: 50%;
	transition: color 0.2s ease;
}

html body .smash-footer__social .social-networks li a:hover,
html body .smash-footer__social .social-networks li a:focus-visible {
	background: transparent !important;
	color: var(--smash-color-highlight) !important; /* artsip neon green */
}

html body .smash-footer__social .social-networks li a i,
html body .smash-footer__social .social-networks li a svg {
	font-size: 22px;
	color: inherit !important;
	background: transparent !important;
	line-height: 1;
}

/* Kalium emits a text `.name` next to each icon — we only want the icon. */
.smash-footer__social .social-networks .name {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hide any network that has no URL configured (empty href). */
.smash-footer__social .social-networks li:has(a[href=""]) {
	display: none;
}

.smash-footer__logo {
	grid-area: logo;
	width: 100%;
	line-height: 0;
}

.smash-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.smash-footer__nav {
	grid-area: nav;
}

.smash-footer__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 3px;
	list-style: none;
	margin: 0;
	padding: 0;
	/* 20px at >=1024px, fluid down to 15px on small screens. */
	font-size: clamp(15px, 0.8vw + 11px, 20px);
	line-height: var(--smash-line-height-body);
}

.smash-footer__nav-list li {
	margin: 0;
}

/* Comma-separate items: "Kontakt, Presse, FAQs, ..." */
.smash-footer__nav-list li:not(:last-child) > a::after {
	content: ",";
}

.smash-footer__nav-list a {
	color: var(--smash-color-fg);
	text-decoration: none;
	font-weight: var(--smash-font-weight-semibold);
}

.smash-footer__nav-list a:hover,
.smash-footer__nav-list a:focus-visible {
	color: var(--smash-color-highlight);
}

.smash-footer__presented {
	grid-area: presented;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: clamp(15px, 0.8vw + 11px, 20px);
	line-height: var(--smash-line-height-body);
	color: var(--smash-color-fg);
}

.smash-footer__presented-logo {
	display: inline-block;
	width: clamp(84px, 8vw, 110px);
	height: auto;
	line-height: 0;
}

.smash-footer__presented-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Tablet: keep two-column layout but stack the event line and social row
   so the event text has room to breathe. */
@media (max-width: 900px) {
	.smash-footer__inner {
		grid-template-areas:
			"event      event"
			"social     social"
			"logo       logo"
			"nav        presented";
		gap: 20px clamp(12px, 3vw, 40px);
	}

	.smash-footer__social {
		justify-self: start;
	}
}

/* Mobile: fully stacked, left-aligned. */
@media (max-width: 560px) {
	.smash-footer {
		padding: 28px 20px;
	}

	.smash-footer__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"event"
			"social"
			"logo"
			"nav"
			"presented";
		gap: 18px;
	}

	.smash-footer__presented {
		justify-self: start;
	}

	.smash-footer__social-link {
		width: 34px;
		height: 34px;
	}
}

/* =========================================================================
 * Smash Hero — [smash_hero] Bakery element
 * Two-column layout: full-bleed photo on the left with dark gradient + copy,
 * white right half with an overlapping rotated photo-stack and a pink blob
 * "sticker" that reuses the 3-circle .smash-blob component.
 * ========================================================================= */

/* Header height token — consumed by .smash-hero to bleed up under the nav.
   Measured ~97px on desktop at rest (14px padding top+bottom + ~69px logo).
   Use a slight over-pull to avoid a hairline gap from sub-pixel rounding. */
:root {
	--smash-header-height: 100px;
}
@media (max-width: 520px) {
	:root { --smash-header-height: 72px; }
}

.smash-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Figma spec is 1440×900 (16:10). Size by viewport width so the hero
	   keeps that aspect ratio, with a sane floor for narrow desktops and a
	   cap so ultra-wide screens don't push it past the Figma height. */
	min-height: clamp(560px, 62.5vw, 900px);
	background: var(--smash-color-weiss);
	overflow: hidden;
	isolation: isolate;

	/* Fill the 1440 page container and pull up under the sticky header so
	   the menu overlays the photo. Bakery row/column padding is stripped
	   by the shared .smash-full-bleed--ancestor rule below. */
	width: 100%;
	margin-top: calc(var(--smash-header-height) * -1);
}

/* Strip Bakery row/column padding for any full-bleed Smash element, so
   sections always fill the 1440 container edge-to-edge. vc_row ships with
   overflow:hidden which would clip the hero's negative-margin bleed under
   the header, so set that to visible too.

   Kalium also wraps each row in a Bootstrap .container.vc-row-container
   (max-width ≈ 1170px). Unwind it for Smash full-bleed elements by
   flushing its max-width / padding / margins so the row can span the
   parent's full width. */
.wpb_wrapper:has(> .smash-hero),
.wpb_wrapper:has(> .smash-teaser),
.wpb_wrapper:has(> .smash-programm),
.wpb_wrapper:has(> .smash-aftermovie),
.wpb_wrapper:has(> .smash-info),
.wpb_wrapper:has(> .smash-ticket-cta),
.wpb_wrapper:has(> .smash-countdown),
.vc_column-inner:has(> .wpb_wrapper > .smash-hero),
.vc_column-inner:has(> .wpb_wrapper > .smash-teaser),
.vc_column-inner:has(> .wpb_wrapper > .smash-programm),
.vc_column-inner:has(> .wpb_wrapper > .smash-aftermovie),
.vc_column-inner:has(> .wpb_wrapper > .smash-info),
.vc_column-inner:has(> .wpb_wrapper > .smash-ticket-cta),
.vc_column-inner:has(> .wpb_wrapper > .smash-countdown),
.wpb_column:has(.smash-hero),
.wpb_column:has(.smash-teaser),
.wpb_column:has(.smash-programm),
.wpb_column:has(.smash-aftermovie),
.wpb_column:has(.smash-info),
.wpb_column:has(.smash-ticket-cta),
.wpb_column:has(.smash-countdown),
.vc_row:has(.smash-hero),
.vc_row:has(.smash-teaser),
.vc_row:has(.smash-programm),
.vc_row:has(.smash-aftermovie),
.vc_row:has(.smash-info),
.vc_row:has(.smash-ticket-cta),
.vc_row:has(.smash-countdown) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.vc-row-container:has(.smash-hero),
.vc-row-container:has(.smash-teaser),
.vc-row-container:has(.smash-programm),
.vc-row-container:has(.smash-aftermovie),
.vc-row-container:has(.smash-info),
.vc-row-container:has(.smash-ticket-cta),
.vc-row-container:has(.smash-countdown) {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Also cancel the .vc_row's ±15px side margins when it's our full-bleed
   element, so the row's box lines up exactly with the 1440 wrapper. */
.vc_row:has(.smash-hero),
.vc_row:has(.smash-teaser),
.vc_row:has(.smash-programm),
.vc_row:has(.smash-aftermovie),
.vc_row:has(.smash-info),
.vc_row:has(.smash-ticket-cta),
.vc_row:has(.smash-countdown) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The hero specifically needs its top padding stripped and overflow opened
   so the negative-margin pull-up under the header works. */
.wpb_wrapper:has(> .smash-hero:first-child),
.vc_column-inner:has(> .wpb_wrapper > .smash-hero:first-child),
.wpb_column:has(.smash-hero:first-child),
.vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .smash-hero:first-child) {
	padding-top: 0 !important;
	overflow: visible !important;
}


/* --- Left: photo + copy overlay ------------------------------------- */

.smash-hero__left {
	position: relative;
	overflow: hidden;
	color: var(--smash-color-weiss);
}

.smash-hero__left-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.smash-hero__left-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(100, 45, 0, 0) 45%,
		rgba(0, 0, 0, 0.35) 100%
	);
	z-index: 1;
}

.smash-hero__left-copy {
	position: relative;
	z-index: 2;
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	gap: clamp(18px, 2.2vw, 40px);
	text-shadow: 0 0 17px rgba(0, 0, 0, 0.15);
	color: var(--smash-color-weiss);
}

.smash-hero__eyebrow {
	margin: 0;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(16px, 1.4vw, 24px);
	line-height: 1.2;
	color: var(--smash-color-weiss);
	text-transform: none !important;
	letter-spacing: 0;
}

/* h1 override — Kalium's parent theme uppercases <h1> and sets an off-brand
   color, so lock everything down here. */
.smash-hero .smash-hero__headline,
h1.smash-hero__headline {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-size: clamp(32px, 4.2vw, 56px) !important;
	line-height: 1.1 !important;
	color: var(--smash-color-weiss) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.smash-hero__cta {
	display: inline-block;
	padding: 6px 2px 0;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(16px, 1.4vw, 24px);
	color: var(--smash-color-weiss) !important;
	text-decoration: none !important;
	align-self: flex-start;
	text-transform: none !important;
}

.smash-hero__cta:hover,
.smash-hero__cta:focus-visible {
	color: var(--smash-color-weiss) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* --- Right: white panel with rotated photo-stack + blob sticker ------ */

.smash-hero__right {
	position: relative;
	background: var(--smash-color-weiss);
	overflow: hidden;
}

.smash-hero__collage {
	position: absolute;
	inset: 0;
}

/* Photo stack — five tiles arranged vertically, all horizontally centered.
   Sizes are percentages of the 720-wide container, translated directly
   from the Figma spec so the ratios hold at any container width:
     Tile 3 (center):  460 × 310  →  63.89% × aspect 460/310
     Tiles 2 & 4:      380 × 290  →  52.78% × aspect 380/290
     Tiles 1 & 5:      314 × 160  →  43.61% × aspect 314/160
   Each tile is anchored at its own centerpoint via translate(-50%,-50%). */
.smash-hero__tile {
	position: absolute;
	left: 50%;
	margin: 0;
	overflow: hidden;
	background: #eee;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

.smash-hero__tile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Top centers are placed so each back tile is covered ~60% by the one in
   front at the reference container (720×900): 1→22%, 2→36%, 3→50%,
   4→64%, 5→78%. */

/* Top — 314×160, behind ------------------------------------------- */
.smash-hero__tile--1 {
	top: 22%;
	width: 43.61%;
	aspect-ratio: 314 / 160;
	transform: translate(-50%, -50%);
	z-index: 1;
}

/* Upper middle — 380×290, in front -------------------------------- */
.smash-hero__tile--2 {
	top: 36%;
	width: 52.78%;
	aspect-ratio: 380 / 290;
	transform: translate(-50%, -50%);
	z-index: 3;
}

/* Center — 460×310, most forward ---------------------------------- */
.smash-hero__tile--3 {
	top: 50%;
	width: 63.89%;
	aspect-ratio: 460 / 310;
	transform: translate(-50%, -50%);
	z-index: 5;
}

/* Lower middle — 380×290, in front -------------------------------- */
.smash-hero__tile--4 {
	top: 64%;
	width: 52.78%;
	aspect-ratio: 380 / 290;
	transform: translate(-50%, -50%);
	z-index: 3;
}

/* Bottom — 314×160, behind ---------------------------------------- */
.smash-hero__tile--5 {
	top: 78%;
	width: 43.61%;
	aspect-ratio: 314 / 160;
	transform: translate(-50%, -50%);
	z-index: 1;
}

/* Pink blob sticker — reuses .smash-blob component with 5 overlapping
   circles. Positioned over the photo stack. */
.smash-hero .smash-hero__sticker.smash-blob {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	pointer-events: none;

	/* 3 larger circles in artsip neon green. Overlap 0.25 keeps the cloud
	   shape close to the Figma reference. */
	--smash-blob-height: clamp(90px, 11vw, 170px);
	--smash-blob-circle: clamp(90px, 11vw, 170px);
	--smash-blob-overlap: 0.25;
	--smash-blob-color: var(--smash-color-highlight);
	--smash-blob-text: var(--smash-color-ticket);

	height: var(--smash-blob-height);
	padding: 0 calc(var(--smash-blob-height) * 0.35);
	font-size: clamp(20px, 2.2vw, 34px);
	color: var(--smash-blob-text);
}

/* =========================================================================
 * Global "tickets out now!" patch
 * Fixed to the bottom-right of the viewport, rotates as the user scrolls,
 * and parks above the footer instead of overlapping it.
 * ========================================================================= */

.smash-ticket-patch {
	position: fixed;
	right: max(clamp(16px, 2vw, 32px), calc((100vw - 1440px) / 2 + clamp(16px, 2vw, 32px)));
	bottom: clamp(16px, 2vw, 32px);
	width: clamp(72px, 8vw, 112px);
	height: auto;
	z-index: 900;          /* below the sticky header (1000) */
	display: block;
	line-height: 0;
	text-decoration: none;
	transition: opacity 0.2s ease;
	/* Rotation is applied inline by JS from scrollY. */
	transform: rotate(0deg);
	will-change: transform;
}

.smash-ticket-patch img {
	display: block;
	width: 100%;
	height: auto;
}

.smash-ticket-patch:hover,
.smash-ticket-patch:focus-visible {
	text-decoration: none;
	opacity: 0.9;
}

/* When the footer is in view, JS flips this class on <body> so the patch
   switches to absolute positioning anchored above the footer. */
body.smash-ticket-patch--parked .smash-ticket-patch {
	position: absolute;
	right: max(clamp(16px, 2vw, 32px), calc((100vw - 1440px) / 2 + clamp(16px, 2vw, 32px)));
	bottom: auto;
}

@media (max-width: 520px) {
	.smash-ticket-patch {
		width: 64px;
	}
}

/* --- Responsive: stack on tablet / mobile --------------------------- */

@media (max-width: 900px) {
	.smash-hero {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.smash-hero__left {
		min-height: 65vh;
	}

	.smash-hero__right {
		min-height: 80vw;
	}

	.smash-hero__eyebrow {
		font-size: clamp(14px, 2.4vw, 18px);
	}

	.smash-hero .smash-hero__headline,
	h1.smash-hero__headline {
		font-size: clamp(26px, 5.5vw, 40px) !important;
	}

	.smash-hero__cta {
		font-size: clamp(14px, 2.4vw, 18px);
	}

	.smash-hero .smash-hero__sticker.smash-blob {
		--smash-blob-height: clamp(54px, 11vw, 80px);
		--smash-blob-circle: clamp(54px, 11vw, 80px);
		font-size: clamp(14px, 2.8vw, 20px);
	}
}

@media (max-width: 520px) {
	.smash-hero__left-copy {
		padding: 24px 20px 32px;
	}
}


/* =========================================================================
 * Smash Teaser — [smash_teaser] Bakery element
 * Full-bleed bordeaux band, one big pink paragraph. Figma: 1440×326, text
 * block 1360 wide with 40px top padding, 40px horizontal inset, 40/47 type.
 * ========================================================================= */

.smash-teaser {
	width: 100%;
	padding: clamp(48px, 7vw, 95px) clamp(20px, 2.78vw, 40px);
	color: var(--smash-color-accent);
	background: var(--smash-color-ticket);
}

.smash-teaser__inner {
	max-width: 1360px;
	margin: 0 auto;
}

.smash-teaser__text,
.smash-teaser__text p {
	margin: 0;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(22px, 2.8vw, 40px);
	line-height: 1.175; /* 47 / 40 = 1.175 */
	color: inherit;
}

.smash-teaser__text p + p {
	margin-top: 0.6em;
}

@media (max-width: 520px) {
	.smash-teaser {
		padding: 48px 20px;
	}
}

/* =========================================================================
 * Smash Programm — [smash_programm] Bakery element
 * Bordeaux band with a big pink SMASH letterform behind a centered list
 * of disciplines, and a CTA link below. Figma: 1440×954, list 69px /
 * line-height 1.04, CTA 30px / 36.
 * ========================================================================= */

.smash-programm {
	position: relative;
	width: 100%;
	background: var(--smash-color-ticket);
	color: var(--smash-color-weiss);
	padding: clamp(48px, 6vw, 90px) clamp(20px, 2.78vw, 40px) clamp(48px, 6vw, 90px);
	overflow: hidden;
	isolation: isolate;
}

.smash-programm__bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.smash-programm__inner {
	position: relative;
	z-index: 1;
	max-width: 1360px;
	margin: 0 auto;
	text-align: center;
}

.smash-programm__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.smash-programm__item {
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(32px, 4.8vw, 69px);
	line-height: 1.04;
	color: var(--smash-color-weiss);
	margin: 0;
}

.smash-programm__cta {
	display: inline-block;
	margin-top: clamp(32px, 4vw, 56px);
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(20px, 2.4vw, 30px);
	line-height: 1.2;
	color: var(--smash-color-weiss);
	text-decoration: none;
}

.smash-programm__cta:hover,
.smash-programm__cta:focus-visible {
	color: var(--smash-color-weiss);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

@media (max-width: 520px) {
	.smash-programm {
		padding: 48px 20px;
	}
	.smash-programm__bg {
		width: 160%;
	}
}

/* =========================================================================
 * Smash Aftermovie — [smash_aftermovie] Bakery element
 * Bordeaux band framing a rounded YouTube poster with overlay play button
 * and title. Figma: 1440×814 band, inner video 1360×664, radius 13px,
 * play button 98.67px on the Figma reference.
 * ========================================================================= */

.smash-aftermovie {
	width: 100%;
	background: var(--smash-color-ticket);
	padding: clamp(32px, 4.2vw, 60px) clamp(16px, 2.78vw, 40px);
}

.smash-aftermovie__inner {
	max-width: 1360px;
	margin: 0 auto;
}

.smash-aftermovie__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1360 / 664;
	padding: 0;
	margin: 0;
	border: 0;
	background: #000;
	border-radius: 13px;
	overflow: hidden;
	cursor: pointer;
	color: var(--smash-color-weiss);
	isolation: isolate;
}

.smash-aftermovie__frame:focus-visible {
	outline: 3px solid var(--smash-color-highlight);
	outline-offset: 4px;
}

.smash-aftermovie__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Top-to-20% dark gradient so the title stays legible on any thumbnail. */
.smash-aftermovie__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.5) 0,
		rgba(0, 0, 0, 0) 20%
	);
	pointer-events: none;
}

.smash-aftermovie__title {
	position: absolute;
	top: clamp(16px, 2.2vw, 31px);
	left: clamp(16px, 2.2vw, 30px);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--smash-color-weiss);
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(14px, 1.6vw, 24px);
	line-height: 1.2;
}

.smash-aftermovie__badge {
	width: clamp(32px, 3.5vw, 50px);
	height: auto;
	flex-shrink: 0;
}

.smash-aftermovie__title-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 50vw;
}

/* Centered round play button — translucent dark fill like the Figma spec. */
.smash-aftermovie__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(64px, 7vw, 100px);
	height: clamp(64px, 7vw, 100px);
	border-radius: 50%;
	background: rgba(47, 53, 70, 0.6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	color: var(--smash-color-weiss);
	transition: transform 0.2s ease, background 0.2s ease;
}

.smash-aftermovie__frame:hover .smash-aftermovie__play,
.smash-aftermovie__frame:focus-visible .smash-aftermovie__play {
	transform: translate(-50%, -50%) scale(1.04);
	background: rgba(47, 53, 70, 0.75);
}

.smash-aftermovie__play svg {
	width: 58%;
	height: 58%;
	margin-left: 6%; /* optical nudge for the ▶ glyph */
}

/* Active state — iframe replaces poster + overlays. */
.smash-aftermovie__frame.is-playing .smash-aftermovie__poster,
.smash-aftermovie__frame.is-playing .smash-aftermovie__scrim,
.smash-aftermovie__frame.is-playing .smash-aftermovie__title,
.smash-aftermovie__frame.is-playing .smash-aftermovie__play {
	display: none;
}

.smash-aftermovie__frame.is-playing {
	cursor: default;
}

.smash-aftermovie__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
}

@media (max-width: 520px) {
	.smash-aftermovie {
		padding: 32px 16px;
	}
}

/* =========================================================================
 * Smash Info Split — [smash_info] Bakery element
 * Two-column band. Left: 5-tile photo stack (same geometry as the hero
 * collage). Right: 40/47 headline with muted second line, 20/28 body
 * copy, 24/1.2 CTA links.
 * Figma: 1440×896 band, right column text block ~498px wide.
 * ========================================================================= */

.smash-info {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--smash-color-weiss);
	color: var(--smash-color-schwarz);
	min-height: clamp(560px, 62vw, 896px);
}

/* --- Left: photo stack (mirrors .smash-hero__collage / __tile) ------- */

.smash-info__media {
	position: relative;
	overflow: hidden;
}

.smash-info__collage {
	position: absolute;
	inset: 0;
}

.smash-info__tile {
	position: absolute;
	left: 50%;
	margin: 0;
	overflow: hidden;
	background: #eee;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

.smash-info__tile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.smash-info__tile--1 {
	top: 22%;
	width: 43.61%;
	aspect-ratio: 314 / 160;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.smash-info__tile--2 {
	top: 36%;
	width: 52.78%;
	aspect-ratio: 380 / 290;
	transform: translate(-50%, -50%);
	z-index: 3;
}
.smash-info__tile--3 {
	top: 50%;
	width: 63.89%;
	aspect-ratio: 460 / 310;
	transform: translate(-50%, -50%);
	z-index: 5;
}
.smash-info__tile--4 {
	top: 64%;
	width: 52.78%;
	aspect-ratio: 380 / 290;
	transform: translate(-50%, -50%);
	z-index: 3;
}
.smash-info__tile--5 {
	top: 78%;
	width: 43.61%;
	aspect-ratio: 314 / 160;
	transform: translate(-50%, -50%);
	z-index: 1;
}

/* --- Right: copy column --------------------------------------------- */

.smash-info__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 6vw, 95px) clamp(24px, 4vw, 60px);
	max-width: 700px;
}

.smash-info h2.smash-info__headline,
.smash-info__headline {
	margin: 0 0 clamp(24px, 3vw, 46px);
	padding: 0;
	font-family: "Dazzed", system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 40px !important;
	line-height: 47px !important;
	letter-spacing: 0 !important;
	color: #000 !important;
	text-transform: none !important;
	word-wrap: break-word;
}

.smash-info__headline-line {
	display: block;
	color: inherit;
}

.smash-info__headline-line--muted {
	color: rgba(0, 0, 0, 0.5) !important;
}

.smash-info__body {
	margin: 0;
	font-family: var(--smash-font-body);
	font-weight: 500;
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.4;
	color: var(--smash-color-schwarz);
	max-width: 555px;
}

.smash-info__body p {
	margin: 0 0 1em;
}

.smash-info__body p:last-child {
	margin-bottom: 0;
}

.smash-info__ctas {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	margin-top: clamp(28px, 4vw, 56px);
	padding-left: 0;
}

.smash-info__cta {
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(18px, 1.7vw, 24px);
	line-height: 1.2;
	color: var(--smash-color-schwarz);
	text-decoration: none;
}

.smash-info__cta:hover,
.smash-info__cta:focus-visible {
	color: var(--smash-color-schwarz);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* --- Responsive ------------------------------------------------------ */

@media (max-width: 1100px) {
	.smash-info__copy {
		padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px);
	}

	.smash-info h2.smash-info__headline,
	.smash-info__headline {
		font-size: clamp(28px, 3.8vw, 40px) !important;
		line-height: 1.175 !important;
	}
}

@media (max-width: 900px) {
	.smash-info {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.smash-info__media {
		min-height: 80vw;
		aspect-ratio: auto;
	}

	.smash-info__copy {
		padding: 48px 24px;
		max-width: none;
	}

	.smash-info h2.smash-info__headline,
	.smash-info__headline {
		font-size: clamp(26px, 5.5vw, 40px) !important;
		line-height: 1.175 !important;
	}

	.smash-info__body {
		max-width: none;
	}

	.smash-info__ctas {
		padding-left: 0;
	}
}

@media (max-width: 520px) {
	.smash-info__copy {
		padding: 40px 20px;
	}

	.smash-info__media {
		min-height: 95vw;
	}
}

/* =========================================================================
 * Smash CTA Row — [smash_cta_row] Bakery element
 * One or two giant blob buttons side by side. Reuses .smash-blob's 4-circle
 * shape. Circle diameter 199px at Figma reference, label 45px / 1.1.
 * ========================================================================= */

.smash-cta-row {
	width: 100%;
	padding: clamp(40px, 5vw, 80px) clamp(20px, 2.78vw, 40px);
}

.smash-cta-row__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	gap: clamp(24px, 4vw, 64px);
	justify-items: center;
	align-items: center;
}

.smash-cta-row--cols-1 .smash-cta-row__inner {
	grid-template-columns: minmax(0, 1fr);
}

.smash-cta-row--cols-2 .smash-cta-row__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Size the blob. Circle diameter governs overall height + overlap gap. */
.smash-cta-row__btn.smash-blob {
	--smash-blob-height: clamp(110px, 12.5vw, 199px);
	--smash-blob-circle: clamp(110px, 12.5vw, 199px);
	--smash-blob-overlap: 0.32;

	height: var(--smash-blob-height);
	min-width: calc(var(--smash-blob-circle) * 3);
	max-width: 100%;
	padding: 0 calc(var(--smash-blob-circle) * 0.5);
	font-size: clamp(22px, 2.8vw, 45px);
	line-height: 1.1;
	letter-spacing: 0;
	font-weight: var(--smash-font-weight-semibold);
	text-align: center;
	text-transform: none !important;
	transition: transform 0.15s ease;
}

.smash-cta-row__btn.smash-blob:hover,
.smash-cta-row__btn.smash-blob:focus-visible {
	transform: translateY(-2px);
	text-decoration: none !important;
}

@media (max-width: 900px) {
	.smash-cta-row__btn.smash-blob {
		--smash-blob-height: clamp(72px, 16vw, 140px);
		--smash-blob-circle: clamp(72px, 16vw, 140px);
		font-size: clamp(18px, 3.6vw, 30px);
	}
}

@media (max-width: 700px) {
	.smash-cta-row--cols-2 .smash-cta-row__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.smash-cta-row__btn.smash-blob {
		--smash-blob-height: clamp(64px, 22vw, 96px);
		--smash-blob-circle: clamp(64px, 22vw, 96px);
		font-size: clamp(16px, 4.5vw, 22px);
	}
}

/* =========================================================================
 * Smash Ticket CTA — [smash_ticket_cta] Bakery element
 * Top: photo with a big rotating bordeaux patch overlay. Bottom: pink band
 * with heading + muted subheading on the left and a blob button on the
 * right. Figma: 1440×(900+330), patch 465px at ~36% from the left.
 * ========================================================================= */

.smash-ticket-cta {
	width: 100%;
	background: var(--smash-ticket-band, #FF5CFF);
	display: flex;
	flex-direction: column;
}

/* --- Top: photo + rotating patch ----------------------------------- */

.smash-ticket-cta__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1440 / 900;
	overflow: hidden;
}

.smash-ticket-cta__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.smash-ticket-cta__patch {
	position: absolute;
	top: 24%;
	left: calc(33.33% + 0.5%);
	width: clamp(200px, 32vw, 465px);
	height: auto;
	animation: smash-ticket-cta-spin 24s linear infinite;
	transform-origin: 50% 50%;
}

@media (max-width: 900px) {
	.smash-ticket-cta__patch {
		width: clamp(140px, 42vw, 260px);
		top: 50%;
		left: 50%;
		animation-name: smash-ticket-cta-spin-centered;
	}
}

@media (max-width: 520px) {
	.smash-ticket-cta__patch {
		width: clamp(120px, 46vw, 190px);
	}
}

@keyframes smash-ticket-cta-spin-centered {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
	.smash-ticket-cta__patch {
		animation: none;
		transform: translate(-50%, -50%);
	}
}

@keyframes smash-ticket-cta-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.smash-ticket-cta__patch {
		animation: none;
	}
}

/* --- Bottom: pink band with copy + blob button --------------------- */

.smash-ticket-cta__band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	padding: clamp(36px, 4.4vw, 60px) clamp(20px, 2.78vw, 40px);
	background: inherit;
}

.smash-ticket-cta__copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 560px;
}

.smash-ticket-cta__heading,
.smash-ticket-cta__subheading {
	margin: 0;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(22px, 2.8vw, 40px);
	line-height: 1.175;
	letter-spacing: 0;
	word-wrap: break-word;
}

.smash-ticket-cta__heading {
	color: #000;
}

.smash-ticket-cta__subheading {
	color: rgba(0, 0, 0, 0.45);
}

/* Blob button — reuses .smash-blob with 4 circles. Explicit margin auto
   is belt-and-braces with justify-self: center so narrow mobile viewports
   can't push the button to the right edge. */
.smash-ticket-cta__btn.smash-blob {
	justify-self: center;
	margin-left: auto;
	margin-right: auto;
	--smash-blob-height: clamp(120px, 14vw, 220px);
	--smash-blob-circle: clamp(120px, 14vw, 220px);
	--smash-blob-overlap: 0.32;

	height: var(--smash-blob-height);
	min-width: calc(var(--smash-blob-circle) * 3);
	max-width: 100%;
	padding: 0 calc(var(--smash-blob-circle) * 0.5);
	font-size: clamp(22px, 3vw, 45px);
	line-height: 1.1;
	text-transform: none !important;
}

.smash-ticket-cta__btn.smash-blob:hover,
.smash-ticket-cta__btn.smash-blob:focus-visible,
.smash-ticket-cta__btn.smash-blob.link-hover,
.wrapper a.smash-ticket-cta__btn.smash-blob:hover,
.wrapper a.smash-ticket-cta__btn.smash-blob.link-hover {
	transform: translateY(-2px);
	color: var(--smash-blob-text) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: currentColor !important;
}

/* The label sits inside a .smash-blob__label span — make sure the
   underline renders on that span regardless of what Kalium does to the
   parent anchor's text-decoration. */
.smash-ticket-cta__btn.smash-blob:hover .smash-blob__label,
.smash-ticket-cta__btn.smash-blob:focus-visible .smash-blob__label,
.smash-ticket-cta__btn.smash-blob.link-hover .smash-blob__label {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: currentColor;
}

/* --- Responsive ---------------------------------------------------- */

@media (max-width: 900px) {
	.smash-ticket-cta__band {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.smash-ticket-cta__copy {
		padding-left: 0;
	}

	.smash-ticket-cta__btn.smash-blob {
		--smash-blob-height: clamp(72px, 18vw, 130px);
		--smash-blob-circle: clamp(72px, 18vw, 130px);
		font-size: clamp(18px, 4vw, 30px);
	}
}

@media (max-width: 520px) {
	.smash-ticket-cta__band {
		padding: 32px 20px;
	}

	.smash-ticket-cta__btn.smash-blob {
		--smash-blob-height: clamp(64px, 22vw, 96px);
		--smash-blob-circle: clamp(64px, 22vw, 96px);
		font-size: clamp(16px, 4.5vw, 22px);
	}
}

/* =========================================================================
 * Smash Partners — [smash_partners] Bakery element
 * "Unsere Partner" headline on the left, grid of partner logos on the right.
 * Also skins Kalium's .lab-clients-logos when pasted inside.
 * Figma: 1440×812 band, headline 498 wide top-left, 6×3 logos of 210×133.
 * ========================================================================= */

.smash-partners {
	width: 100%;
	background: var(--smash-partners-bg, #fff);
	color: var(--smash-partners-color, #000);
	padding: clamp(48px, 6vw, 95px) clamp(20px, 2.78vw, 40px);
}

.smash-partners__inner {
	max-width: 1360px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 60px);
}

.smash-partners h2.smash-partners__headline,
.smash-partners__headline {
	margin: 0;
	padding: 0;
	font-family: "Dazzed", system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 40px !important;
	line-height: 47px !important;
	letter-spacing: 0 !important;
	color: inherit !important;
	text-transform: none !important;
	word-wrap: break-word;
}

.smash-partners__headline-line {
	display: block;
}

.smash-partners__grid {
	display: grid;
	grid-template-columns: repeat(var(--smash-partners-cols, 6), 1fr);
	gap: clamp(20px, 2.5vw, 40px) clamp(16px, 1.4vw, 20px);
	align-items: center;
	justify-items: center;
}

.smash-partners--cols-6 .smash-partners__grid { --smash-partners-cols: 6; }
.smash-partners--cols-5 .smash-partners__grid { --smash-partners-cols: 5; }
.smash-partners--cols-4 .smash-partners__grid { --smash-partners-cols: 4; }
.smash-partners--cols-3 .smash-partners__grid { --smash-partners-cols: 3; }

.smash-partners__logo {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(14px, 1.8vw, 28px);
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.smash-partners__logo-img {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
}

/* --- Skin Kalium's [lab_clients] when pasted as content ------------- */
.smash-partners__grid .lab-clients-logos,
.smash-partners__grid .logos-holder {
	display: grid;
	grid-template-columns: repeat(var(--smash-partners-cols, 6), 1fr);
	gap: clamp(20px, 2.5vw, 40px) clamp(16px, 1.4vw, 20px);
	align-items: center;
	justify-items: center;
	margin: 0;
	padding: 0;
	width: 100%;
}

.smash-partners__grid .lab-clients-logos::before,
.smash-partners__grid .lab-clients-logos::after,
.smash-partners__grid .logos-holder::before,
.smash-partners__grid .logos-holder::after {
	content: none;
}

.smash-partners__grid .client-logos-col {
	width: 100%;
	padding: 0 !important;
	float: none !important;
	flex: 0 0 auto;
}

.smash-partners__grid .client-logos-col .c-logo {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	background: rgba(0, 0, 0, 0.05) !important;
	border-radius: 20px !important;
	padding: clamp(14px, 1.8vw, 28px) !important;
	margin: 0 !important;
	overflow: hidden;
}

.smash-partners__grid .client-logos-col .c-logo img,
.smash-partners__grid .client-logos-col .c-logo img.img-responsive,
.smash-partners__grid .client-logos-col a img {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	margin: 0 !important;
	display: block !important;
}

.smash-partners__grid .client-logos-col a {
	display: block;
	width: 100%;
	height: 100%;
}

/* Disable Kalium's hover overlay when inside the Smash skin */
.smash-partners__grid .client-logos-col .hover-state {
	display: none !important;
}

/* Full-bleed inside Bakery's wrapping columns — same unwind pattern as
   the other Smash elements. */
.wpb_wrapper:has(> .smash-partners),
.vc_column-inner:has(.smash-partners),
.wpb_column:has(.smash-partners) {
	padding: 0 !important;
}

.vc_row:has(.smash-partners),
.vc-row-container:has(.smash-partners) {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --- Responsive ------------------------------------------------------ */

@media (max-width: 1100px) {
	.smash-partners__inner {
		gap: clamp(28px, 4vw, 48px);
	}
}

@media (max-width: 900px) {
	.smash-partners--cols-6 .smash-partners__grid,
	.smash-partners--cols-6 .smash-partners__grid .lab-clients-logos,
	.smash-partners--cols-6 .smash-partners__grid .logos-holder {
		grid-template-columns: repeat(4, 1fr);
	}

	.smash-partners--cols-5 .smash-partners__grid,
	.smash-partners--cols-5 .smash-partners__grid .lab-clients-logos,
	.smash-partners--cols-5 .smash-partners__grid .logos-holder {
		grid-template-columns: repeat(3, 1fr);
	}

	.smash-partners h2.smash-partners__headline,
	.smash-partners__headline {
		font-size: clamp(26px, 5.5vw, 40px) !important;
		line-height: 1.175 !important;
	}
}

@media (max-width: 520px) {
	.smash-partners--cols-6 .smash-partners__grid,
	.smash-partners--cols-6 .smash-partners__grid .lab-clients-logos,
	.smash-partners--cols-6 .smash-partners__grid .logos-holder,
	.smash-partners--cols-5 .smash-partners__grid,
	.smash-partners--cols-5 .smash-partners__grid .lab-clients-logos,
	.smash-partners--cols-5 .smash-partners__grid .logos-holder,
	.smash-partners--cols-4 .smash-partners__grid,
	.smash-partners--cols-4 .smash-partners__grid .lab-clients-logos,
	.smash-partners--cols-4 .smash-partners__grid .logos-holder {
		grid-template-columns: repeat(2, 1fr);
	}

	.smash-partners__logo,
	.smash-partners__grid .client-logos-col .c-logo {
		height: auto !important;
	}
}

/* =========================================================================
 * Smash Page Title — [smash_page_title] Bakery element
 * Rounded 3–4 circle blob with centered title, used at the top of pages.
 * Figma ref: 396×137 blob, 4 circles, Dazzed SemiBold 40/44.
 * ========================================================================= */

.smash-page-title {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: clamp(32px, 4vw, 60px) clamp(20px, 2.78vw, 40px);
}

.smash-page-title__blob.smash-blob {
	--smash-blob-height: clamp(96px, 10vw, 137px);
	--smash-blob-circle: clamp(96px, 10vw, 137px);
	--smash-blob-overlap: 0.32;

	margin: 0;
	height: var(--smash-blob-height);
	padding: 0 calc(var(--smash-blob-circle) * 0.45);
	font-family: "Dazzed", system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(22px, 3vw, 40px) !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	color: var(--smash-blob-text) !important;
	text-transform: none !important;
	text-align: center;
}

.smash-page-title h1.smash-page-title__blob {
	font-size: clamp(22px, 3vw, 40px) !important;
}

.smash-page-title__text {
	display: inline-block;
	text-align: center;
}

@media (max-width: 520px) {
	.smash-page-title__blob.smash-blob {
		--smash-blob-height: clamp(72px, 22vw, 110px);
		--smash-blob-circle: clamp(72px, 22vw, 110px);
		font-size: clamp(18px, 5.5vw, 30px) !important;
	}
}

/* =========================================================================
 * Smash Workshops — [smash_workshops] Bakery element
 * A single pink paragraph of comma-separated workshop names, each
 * underlined. Items with a URL render as links; items without still get
 * the underline style so the list reads uniformly.
 * Figma ref: Dazzed SemiBold 40px / 47px line-height, #FF5CFF on bordeaux.
 * ========================================================================= */

.smash-workshops {
	width: 100%;
	background: var(--smash-workshops-bg, #511A32);
	color: var(--smash-workshops-color, #FF5CFF);
	padding: 0 clamp(20px, 2.78vw, 40px);
	margin: 0;
}

.smash-workshops__inner {
	max-width: 1360px;
	margin: 0 auto;
}

.smash-workshops__list {
	margin: 0;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(22px, 3vw, 40px);
	line-height: 1.175;
	color: inherit;
	word-wrap: break-word;
}

.smash-workshops__item {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: opacity 0.15s ease;
}

.smash-workshops__item--static {
	cursor: default;
}

a.smash-workshops__item:hover,
a.smash-workshops__item:focus-visible {
	color: inherit;
	opacity: 0.75;
	text-decoration: underline;
}

.smash-workshops__sep {
	text-decoration: none;
}

/* Kalium adds a global ::after underline to anchors in .wrapper — kill it
   inside this element so only our own underline shows. */
.smash-workshops a.smash-workshops__item::after {
	content: none !important;
	display: none !important;
}

/* Full-bleed unwind (same pattern as other Smash elements). */
.wpb_wrapper:has(> .smash-workshops),
.vc_column-inner:has(.smash-workshops),
.wpb_column:has(.smash-workshops) {
	padding: 0 !important;
}

.vc_row:has(.smash-workshops),
.vc-row-container:has(.smash-workshops) {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media (max-width: 520px) {
	.smash-workshops {
		padding: 0 20px;
	}
}

/* =========================================================================
 * Smash Gallery skin — apply by adding the extra CSS class `smash-gallery`
 * to WPBakery's Media Masonry / Media Grid element.
 *
 * Goals:
 *   - full-bleed container (no 20px side padding on the element itself)
 *   - gaps between tiles, but the leftmost/rightmost column flush with edges
 *   - "Mehr Fotos laden" button skinned to the Figma outlined pink pill
 * ========================================================================= */

/* Unwind Bakery row/column padding around the gallery (same pattern the
   other Smash elements use). */
.wpb_wrapper:has(> .smash-gallery),
.vc_column-inner:has(.smash-gallery),
.wpb_column:has(.smash-gallery) {
	padding: 0 !important;
}

.vc_row:has(.smash-gallery),
.vc-row-container:has(.smash-gallery) {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Cap inner content to the page container and kill the grid's own side
   padding — tiles should reach the container edges. */
.smash-gallery {
	width: 100%;
	margin: 0;
}

/* --- Load-more button ("Mehr Fotos laden") ---------------------------- */
.smash-gallery .vc_pagination.vc_pagination_lcircle,
.smash-gallery .vc_grid-container-wrapper + .vc_pagination,
.smash-gallery .vc_pagination {
	text-align: center;
	margin-top: clamp(32px, 4vw, 56px);
}

/* Any outer pill wrappers around the trigger — strip all borders/bg so
   only our inner button shows a single pill. */
.smash-gallery .vc_pagination-trigger,
.smash-gallery .vc_pageable-load-more-btn,
.smash-gallery .vc_pagination-trigger-style-link,
.smash-gallery .vc_pagination-trigger-buttons {
	border: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.smash-gallery .vc_btn3 {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 24px !important;
	min-height: 40px;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid #FF5CFF !important;
	border-radius: 2000px !important;
	color: #FF5CFF !important;
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-size: 16px !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.smash-gallery .vc_btn3:hover {
	background: #FF5CFF !important;
	color: #511A32 !important;
}

/* Kill Kalium's animated ::after underline inside the gallery anchor. */
.smash-gallery a::after,
.smash-gallery .vc_btn3::after {
	content: none !important;
	display: none !important;
}

/* =========================================================================
 * Smash Portfolio Grid — [smash_portfolio_grid] Bakery element
 *
 * Figma tokens (node 20041:805):
 *   Card:        262 × 262 thumb, 20px radius, 15px gap to text, 262 wide
 *   Grid:        4 cols, gap 27px column / 30px row, max inner width 1130
 *   Title:       Dazzed SemiBold 16/1.25, #000, text-transform none
 *   Subtitle:    Dazzed SemiBold 16/1.25, rgba(0,0,0,0.45)
 *   Pills:       32h, px-12, gap 6, Dazzed Medium 16/20, 2000px radius
 *                active: bg #000 / fg #fff
 *                idle:   1px #000 border / fg #000
 *   Load-more:   46.707 h, 1.168px border #000, px-28.024, radius 2000,
 *                Dazzed SemiBold 18.68 / 23.353, gap 9.341
 *
 * Kalium overrides that we have to fight:
 *   - .blog-content h1-h6 { text-transform: uppercase; letter-spacing: … }
 *   - global `a` accent color + `a::after` animated underline
 *   - `img { height: auto }` (defeated in the image block already)
 *   - global button styling (gradient backgrounds, etc.)
 * ========================================================================= */

.smash-portfolio-grid,
.smash-portfolio-grid * {
	box-sizing: border-box;
}

.smash-portfolio-grid {
	width: 100%;
	padding: clamp(32px, 4vw, 64px) clamp(20px, 2.78vw, 40px);
	color: #000;
	font-family: var(--smash-font-display);
	letter-spacing: 0;
	text-transform: none;
}

.smash-portfolio-grid__inner {
	max-width: 1130px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
}

/* --- Filter pills ---------------------------------------------------- */
.smash-portfolio-grid__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	max-width: 670px;
	margin: 0 auto;
	padding: 0;
}

.smash-portfolio-grid__pill {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 32px;
	min-height: 32px;
	padding: 0 12px !important;
	margin: 0 !important;
	border: 1px solid #000 !important;
	border-radius: 2000px !important;
	background: transparent !important;
	background-image: none !important;
	color: #000 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.smash-portfolio-grid__pill:hover,
.smash-portfolio-grid__pill:focus-visible {
	background: #000 !important;
	color: #fff !important;
	outline: none;
}

.smash-portfolio-grid__pill.is-active,
.smash-portfolio-grid__pill[aria-pressed="true"] {
	background: #000 !important;
	color: #fff !important;
}

.smash-portfolio-grid__pill::after {
	content: none !important;
	display: none !important;
}

/* --- Card grid ------------------------------------------------------- */
.smash-portfolio-grid__items {
	display: grid !important;
	grid-template-columns: repeat(var(--smash-portfolio-cols, 4), 1fr);
	gap: 30px 27px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.smash-portfolio-grid--cols-4 .smash-portfolio-grid__items { --smash-portfolio-cols: 4; }
.smash-portfolio-grid--cols-3 .smash-portfolio-grid__items { --smash-portfolio-cols: 3; }
.smash-portfolio-grid--cols-2 .smash-portfolio-grid__items { --smash-portfolio-cols: 2; }

.smash-portfolio-grid__item {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.smash-portfolio-grid__item[hidden] {
	display: none !important;
}

.smash-portfolio-grid__card {
	display: flex !important;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	color: #000 !important;
	font-family: var(--smash-font-display) !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

a.smash-portfolio-grid__card,
a.smash-portfolio-grid__card:link,
a.smash-portfolio-grid__card:visited {
	color: #000 !important;
	text-decoration: none !important;
}

a.smash-portfolio-grid__card:hover,
a.smash-portfolio-grid__card:focus-visible {
	color: #000 !important;
	text-decoration: none !important;
	outline: none;
}

a.smash-portfolio-grid__card:hover .smash-portfolio-grid__image {
	transform: scale(1.03);
}

/* Kill Kalium's global ::after underline animation inside the card. */
.smash-portfolio-grid a::after,
.smash-portfolio-grid__card::after,
.smash-portfolio-grid__card *::after {
	content: none !important;
	display: none !important;
}

.smash-portfolio-grid__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.05);
}

/* Lock image to fill the square cell regardless of Kalium's global img
   rules (which set height: auto and can reset width). */
.smash-portfolio-grid__thumb .smash-portfolio-grid__image,
.smash-portfolio-grid .smash-portfolio-grid__image {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	transition: transform 0.4s ease;
}

.smash-portfolio-grid__text {
	display: flex;
	flex-direction: column;
	gap: 0;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0;
}

/* Title — Kalium's .blog-content / content h1-h6 rules are aggressive
   (uppercase, letter-spacing, accent color). We have to flatten every
   property the design specifies. */
.smash-portfolio-grid h3.smash-portfolio-grid__title,
.smash-portfolio-grid .smash-portfolio-grid__title,
.smash-portfolio-grid a .smash-portfolio-grid__title,
.smash-portfolio-grid__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-style: normal !important;
	font-size: 16px !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	color: #000 !important;
	text-transform: none !important;
	text-decoration: none !important;
	word-wrap: break-word;
}

.smash-portfolio-grid__title::before,
.smash-portfolio-grid__title::after {
	content: none !important;
	display: none !important;
}

.smash-portfolio-grid__subtitle,
.smash-portfolio-grid p.smash-portfolio-grid__subtitle {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-style: normal !important;
	font-size: 16px !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	color: rgba(0, 0, 0, 0.45) !important;
	text-transform: none !important;
}

/* --- Load-more button (Figma: 46.707h, 1.168 border, 18.68/23.353) --- */
.smash-portfolio-grid__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(16px, 2vw, 24px);
}

.smash-portfolio-grid__load-more {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9.341px;
	height: 46.707px;
	min-height: 46.707px;
	padding: 0 28.024px !important;
	margin: 0 !important;
	border: 1.168px solid #000 !important;
	border-radius: 2000px !important;
	background: transparent !important;
	background-image: none !important;
	color: #000 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-style: normal !important;
	font-size: 18.68px !important;
	line-height: 23.353px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.smash-portfolio-grid__load-more:hover,
.smash-portfolio-grid__load-more:focus-visible {
	background: #000 !important;
	color: #fff !important;
	outline: none;
}

.smash-portfolio-grid__load-more::after,
.smash-portfolio-grid__load-more::before {
	content: none !important;
	display: none !important;
}

.smash-portfolio-grid__load-more[hidden] {
	display: none !important;
}

/* Full-bleed unwind (same pattern as other Smash elements). */
.wpb_wrapper:has(> .smash-portfolio-grid),
.vc_column-inner:has(.smash-portfolio-grid),
.wpb_column:has(.smash-portfolio-grid) {
	padding: 0 !important;
}

.vc_row:has(.smash-portfolio-grid),
.vc-row-container:has(.smash-portfolio-grid) {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 1100px) {
	.smash-portfolio-grid--cols-4 .smash-portfolio-grid__items {
		--smash-portfolio-cols: 3;
	}
}

@media (max-width: 820px) {
	.smash-portfolio-grid__items {
		gap: 24px 20px;
	}

	.smash-portfolio-grid--cols-4 .smash-portfolio-grid__items,
	.smash-portfolio-grid--cols-3 .smash-portfolio-grid__items {
		--smash-portfolio-cols: 2;
	}
}

@media (max-width: 480px) {
	.smash-portfolio-grid__items {
		gap: 20px 16px;
	}

	.smash-portfolio-grid--cols-4 .smash-portfolio-grid__items,
	.smash-portfolio-grid--cols-3 .smash-portfolio-grid__items,
	.smash-portfolio-grid--cols-2 .smash-portfolio-grid__items {
		--smash-portfolio-cols: 2;
	}
}

/* =========================================================================
 * Smash Artist Portrait — single-portfolio page layout
 *
 * Figma tokens (node 18050:10298):
 *   Page container 1440 wide, right copy card 710 wide, left collage ~720
 *   Copy card padding: 40 top / 60 right / 30 bottom / 95 left
 *   Content width inside card: 555
 *   H1:       Dazzed SemiBold 40 / 47, #000
 *   Subtitle: Dazzed SemiBold 40 / 47, rgba(0,0,0,0.45)
 *   Body:     Dazzed Medium 20 / 28, #000
 *   CTA:      Dazzed SemiBold 24 / 1.2, #000
 *   Collage:  5 overlapping tiles, centered stack
 *   Caption:  Dazzed Medium 16 / 1.25, rgba(0,0,0,0.45), centered
 * ========================================================================= */

.smash-artist-portrait {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 710px;
	background: var(--smash-color-weiss);
	color: var(--smash-color-schwarz);
	align-items: start;
}

.smash-artist-portrait--no-media {
	grid-template-columns: 1fr;
}

/* --- Left: photo collage (mirrors smash-info / smash-hero geometry) --- */

.smash-artist-portrait__media {
	position: relative;
	padding: 0 0 40px;
	min-height: clamp(540px, 60vw, 880px);
	align-self: start;
}

.smash-artist-portrait__collage {
	position: absolute;
	inset: 0;
}

.smash-artist-portrait__tile {
	position: absolute;
	left: 50%;
	margin: 0;
	overflow: hidden;
	background: #eee;
	border-radius: 0;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

.smash-artist-portrait__tile-link {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	appearance: none;
	-webkit-appearance: none;
}

.smash-artist-portrait__tile-link:focus-visible {
	outline: 2px solid var(--smash-color-accent, #ff3d7f);
	outline-offset: 2px;
}

.smash-artist-portrait .smash-artist-portrait__tile-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	border: 0 !important;
	transition: transform 0.4s ease, opacity 0.5s ease;
}

.smash-artist-portrait__tile-img.is-fading {
	opacity: 0;
}

.smash-artist-portrait__tile-link:hover .smash-artist-portrait__tile-img {
	transform: scale(1.03);
}

.smash-artist-portrait__tile-link::after {
	content: none !important;
	display: none !important;
}

.smash-artist-portrait__tile--1 {
	top: 10%;
	width: 43.61%;
	aspect-ratio: 314 / 160;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.smash-artist-portrait__tile--2 {
	top: 24%;
	width: 52.78%;
	aspect-ratio: 380 / 290;
	transform: translate(-50%, -50%);
	z-index: 3;
}
.smash-artist-portrait__tile--3 {
	top: 38%;
	width: 63.89%;
	aspect-ratio: 460 / 310;
	transform: translate(-50%, -50%);
	z-index: 5;
}
.smash-artist-portrait__tile--4 {
	top: 52%;
	width: 52.78%;
	aspect-ratio: 380 / 290;
	transform: translate(-50%, -50%);
	z-index: 3;
}
.smash-artist-portrait__tile--5 {
	top: 66%;
	width: 43.61%;
	aspect-ratio: 314 / 160;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.smash-artist-portrait__caption {
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-family: var(--smash-font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0;
	color: rgba(0, 0, 0, 0.45);
	text-align: center;
	text-transform: none;
}

/* --- Grid variant (fewer than 5 images) ----------------------------- */

.smash-artist-portrait__media--grid {
	/* The absolute-positioned collage needs the big min-height; the grid
	   sizes itself naturally from its rows. */
	position: relative;
	min-height: 0;
	padding: 0 clamp(24px, 4vw, 48px) 48px;
}

.smash-artist-portrait__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}

/* When only one image is picked, let it span the full media column so
   it doesn't look stranded. */
.smash-artist-portrait__grid:has(> .smash-artist-portrait__grid-tile:only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.smash-artist-portrait__grid-tile {
	margin: 0;
	overflow: hidden;
	background: #eee;
	aspect-ratio: 1 / 1;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

/* With three images the third sits on its own row, so stretch it to the
   full width for a tidy "2 + 1 wide" rhythm. */
.smash-artist-portrait__grid:has(> .smash-artist-portrait__grid-tile:nth-child(3):last-child)
	> .smash-artist-portrait__grid-tile:nth-child(3) {
	grid-column: 1 / -1;
	aspect-ratio: 2 / 1;
}

.smash-artist-portrait__media--grid .smash-artist-portrait__caption {
	position: static;
	margin-top: clamp(16px, 2vw, 24px);
}

/* --- Right: copy column -------------------------------------------- */

.smash-artist-portrait__copy {
	display: flex;
	flex-direction: column;
	gap: 80px;
	background: var(--smash-color-weiss);
	padding: 40px 60px 30px 95px;
	width: 710px;
	max-width: 710px;
	align-items: flex-start;
}

.smash-artist-portrait--no-media .smash-artist-portrait__copy {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 40px clamp(20px, 4vw, 60px);
}

/* Each in-copy block (title+description, about, or cta) stacks its own
   children with 48px gap per Figma. */
.smash-artist-portrait__section {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
	max-width: 555px;
}

.smash-artist-portrait__title-block {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 498px;
}

.smash-artist-portrait h1.smash-artist-portrait__title,
.smash-artist-portrait__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-style: normal !important;
	font-size: 40px !important;
	line-height: 47px !important;
	letter-spacing: 0 !important;
	color: var(--smash-color-schwarz) !important;
	text-transform: none !important;
	text-decoration: none !important;
}

.smash-artist-portrait__subtitle,
.smash-artist-portrait p.smash-artist-portrait__subtitle {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-style: normal !important;
	font-size: 40px !important;
	line-height: 47px !important;
	letter-spacing: 0 !important;
	color: rgba(0, 0, 0, 0.45) !important;
	text-transform: none !important;
}

.smash-artist-portrait h2.smash-artist-portrait__about-heading,
.smash-artist-portrait__about-heading {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-style: normal !important;
	font-size: 40px !important;
	line-height: 47px !important;
	letter-spacing: 0 !important;
	color: var(--smash-color-schwarz) !important;
	text-transform: none !important;
	text-decoration: none !important;
	max-width: 498px;
}

/* Body — description / about copy. 20/28 Medium per Figma. */
.smash-artist-portrait__body {
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: 555px;
	font-family: var(--smash-font-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 0;
	color: var(--smash-color-schwarz);
}

.smash-artist-portrait__body > * {
	margin: 0 !important;
	padding: 0 !important;
}

.smash-artist-portrait__body p {
	font-family: var(--smash-font-display) !important;
	font-weight: 500 !important;
	font-size: 20px !important;
	line-height: 28px !important;
	letter-spacing: 0 !important;
	color: var(--smash-color-schwarz) !important;
	text-transform: none !important;
}

.smash-artist-portrait__body h1,
.smash-artist-portrait__body h2,
.smash-artist-portrait__body h3,
.smash-artist-portrait__body h4 {
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-size: 40px !important;
	line-height: 47px !important;
	letter-spacing: 0 !important;
	color: var(--smash-color-schwarz) !important;
	text-transform: none !important;
}

.smash-artist-portrait__body a,
.smash-artist-portrait__body a:link,
.smash-artist-portrait__body a:visited {
	color: var(--smash-color-ticket) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.smash-artist-portrait__body a::after {
	content: none !important;
	display: none !important;
}

.smash-artist-portrait__body ul,
.smash-artist-portrait__body ol {
	padding-left: 1.2em !important;
}

/* CTA — Figma: Dazzed SemiBold 24/1.2, plain text with arrow. */
.smash-artist-portrait__cta-wrap {
	margin: 0 !important;
	padding: 0 !important;
}

.smash-artist-portrait__cta,
.smash-artist-portrait a.smash-artist-portrait__cta {
	display: inline-block;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-size: 24px !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	color: var(--smash-color-schwarz) !important;
	text-transform: none !important;
	text-decoration: none !important;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.smash-artist-portrait a.smash-artist-portrait__cta:hover,
.smash-artist-portrait a.smash-artist-portrait__cta:focus-visible {
	color: var(--smash-color-accent) !important;
	text-decoration: none !important;
	outline: none;
}

.smash-artist-portrait__cta::after {
	content: none !important;
	display: none !important;
}

/* --- Full-bleed unwind (same pattern as other Smash elements) ------- */
.wpb_wrapper:has(> .smash-artist-portrait),
.vc_column-inner:has(.smash-artist-portrait),
.wpb_column:has(.smash-artist-portrait) {
	padding: 0 !important;
}


/* --- Responsive ------------------------------------------------------ */
@media (max-width: 1100px) {
	.smash-artist-portrait {
		grid-template-columns: 1fr;
	}

	.smash-artist-portrait__media {
		min-height: clamp(520px, 85vw, 820px);
		padding: 32px 0 24px;
	}

	.smash-artist-portrait__copy {
		width: 100%;
		max-width: 900px;
		margin: 0 auto;
		padding: 32px clamp(20px, 4vw, 60px);
		gap: 56px;
	}

	.smash-artist-portrait__section {
		max-width: none;
	}
}

@media (max-width: 680px) {
	.smash-artist-portrait h1.smash-artist-portrait__title,
	.smash-artist-portrait__title,
	.smash-artist-portrait__subtitle,
	.smash-artist-portrait__body h1,
	.smash-artist-portrait__body h2,
	.smash-artist-portrait__body h3 {
		font-size: clamp(26px, 7vw, 36px) !important;
		line-height: 1.15 !important;
	}

	.smash-artist-portrait__body,
	.smash-artist-portrait__body p {
		font-size: 17px !important;
		line-height: 24px !important;
	}

	.smash-artist-portrait__copy {
		gap: 40px;
		padding: 24px 20px;
	}

	.smash-artist-portrait__media {
		min-height: 70vw;
	}
}

/* =========================================================================
 * Smash Forms — global form styling per Figma node 18050:9710.
 *
 * Tokens:
 *   Group gap (field → field):     15px
 *   Field gap (label → input):      8px
 *   Label:                          Dazzed Medium 16/20, #000
 *   Input/select:                   40h, 1px solid #000, 16px radius,
 *                                   #fff bg, 0/16 padding,
 *                                   placeholder Dazzed Medium 16/20 #a3a3a3
 *   Textarea:                       150h, same border/radius/padding,
 *                                   16px top padding for content
 *   Helper text:                    Dazzed Medium 14/17, #737373
 *   Submit button:                  40h, #000 bg, #fff fg, 24px x-padding,
 *                                   2000px radius (pill), Dazzed SemiBold
 *                                   16/20, full width
 *
 * Scope: applied inside the common WP-form plugin wrappers (CF7, WPForms,
 * Gravity Forms, Forminator, default WP comment form) plus an opt-in
 * `form.smash-form` class for editor-authored markup. Excludes our own
 * Smash component forms (newsletter, header search, etc.) which keep
 * their bespoke styles via existing classes.
 * ========================================================================= */

:root {
	--smash-form-radius: 16px;
	--smash-form-border: #000;
	--smash-form-bg: #fff;
	--smash-form-fg: #000;
	--smash-form-placeholder: #a3a3a3;
	--smash-form-helper: #737373;
	--smash-form-height: 40px;
	--smash-form-pad-x: 16px;
	--smash-form-radius-btn: 2000px;
}

.smash-form,
body.smash-theme-white .wpcf7-form,
body.smash-theme-white .wpforms-form,
body.smash-theme-white .gform_wrapper form,
body.smash-theme-white .frm_forms,
body.smash-theme-white .forminator-ui form,
body.smash-theme-white .comment-form,
body.smash-theme-white form.contact-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	font-family: var(--smash-font-display);
	color: var(--smash-form-fg);
}

/* CF7 wraps each field in a <p>. Reset to flex column. */
body.smash-theme-white .wpcf7-form p,
body.smash-theme-white .comment-form p {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
}

/* Kalium's lab-contact-form wraps fields in Bootstrap .row / .col-*.
   Flatten to a single 15px-gap column and strip the Bootstrap margins/
   floats/padding so nothing adds extra space. */
body.smash-theme-white form.contact-form .row {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

body.smash-theme-white form.contact-form .row > [class*="col-"] {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* Kalium wraps each field in .form-group.labeled-input-row with Bootstrap's
   default 30px margin-bottom. Flatten it so only the flex gap (15px on the
   .row) controls inter-field spacing. */
body.smash-theme-white form.contact-form .form-group,
body.smash-theme-white form.contact-form .labeled-input-row {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

/* Labels */
.smash-form label,
body.smash-theme-white .wpcf7-form label,
body.smash-theme-white .wpforms-form label.wpforms-field-label,
body.smash-theme-white .gform_wrapper .gfield_label,
body.smash-theme-white .comment-form label,
body.smash-theme-white form.contact-form label {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	color: var(--smash-form-fg) !important;
	text-transform: none !important;
	border: 0 !important;
	border-bottom: 0 !important;
	text-decoration: none !important;
	background: transparent !important;
}

body.smash-theme-white form.contact-form label::after,
body.smash-theme-white form.contact-form label::before {
	content: none !important;
	display: none !important;
}

/* Required asterisk styling — keep same color, no special accent. */
body.smash-theme-white .wpcf7-form .wpcf7-form-control-wrap + br,
body.smash-theme-white .wpcf7-not-valid-tip {
	color: #c00 !important;
	font-weight: 500;
}

/* --- Inputs / selects ------------------------------------------------ */
.smash-form input[type="text"],
.smash-form input[type="email"],
.smash-form input[type="tel"],
.smash-form input[type="url"],
.smash-form input[type="number"],
.smash-form input[type="password"],
.smash-form input[type="search"],
.smash-form input[type="date"],
.smash-form input[type="time"],
.smash-form select,
body.smash-theme-white .wpcf7-form input[type="text"],
body.smash-theme-white .wpcf7-form input[type="email"],
body.smash-theme-white .wpcf7-form input[type="tel"],
body.smash-theme-white .wpcf7-form input[type="url"],
body.smash-theme-white .wpcf7-form input[type="number"],
body.smash-theme-white .wpcf7-form input[type="password"],
body.smash-theme-white .wpcf7-form input[type="search"],
body.smash-theme-white .wpcf7-form input[type="date"],
body.smash-theme-white .wpcf7-form input[type="time"],
body.smash-theme-white .wpcf7-form select,
body.smash-theme-white .wpforms-form input.wpforms-field-medium,
body.smash-theme-white .wpforms-form input.wpforms-field-large,
body.smash-theme-white .wpforms-form input.wpforms-field-small,
body.smash-theme-white .wpforms-form input[type="text"],
body.smash-theme-white .wpforms-form input[type="email"],
body.smash-theme-white .wpforms-form input[type="tel"],
body.smash-theme-white .wpforms-form input[type="url"],
body.smash-theme-white .wpforms-form input[type="number"],
body.smash-theme-white .wpforms-form select,
body.smash-theme-white .gform_wrapper input[type="text"],
body.smash-theme-white .gform_wrapper input[type="email"],
body.smash-theme-white .gform_wrapper input[type="tel"],
body.smash-theme-white .gform_wrapper input[type="url"],
body.smash-theme-white .gform_wrapper input[type="number"],
body.smash-theme-white .gform_wrapper select,
body.smash-theme-white .comment-form input[type="text"],
body.smash-theme-white .comment-form input[type="email"],
body.smash-theme-white .comment-form input[type="url"],
body.smash-theme-white form.contact-form input[type="text"],
body.smash-theme-white form.contact-form input[type="email"],
body.smash-theme-white form.contact-form input[type="tel"],
body.smash-theme-white form.contact-form input[type="url"],
body.smash-theme-white form.contact-form input[type="number"],
body.smash-theme-white form.contact-form input[type="password"],
body.smash-theme-white form.contact-form select {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: var(--smash-form-height) !important;
	min-height: var(--smash-form-height);
	margin: 0 !important;
	padding: 0 var(--smash-form-pad-x) !important;
	background: var(--smash-form-bg) !important;
	background-image: none !important;
	border: 1px solid var(--smash-form-border) !important;
	border-radius: var(--smash-form-radius) !important;
	box-shadow: none !important;
	color: var(--smash-form-fg) !important;
	font-family: var(--smash-font-display) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.smash-form input:focus,
.smash-form select:focus,
body.smash-theme-white .wpcf7-form input:focus,
body.smash-theme-white .wpcf7-form select:focus,
body.smash-theme-white .wpforms-form input:focus,
body.smash-theme-white .wpforms-form select:focus,
body.smash-theme-white .gform_wrapper input:focus,
body.smash-theme-white .gform_wrapper select:focus,
body.smash-theme-white .comment-form input:focus,
body.smash-theme-white form.contact-form input:focus,
body.smash-theme-white form.contact-form select:focus {
	outline: none !important;
	border-color: var(--smash-color-bordeaux) !important;
	box-shadow: 0 0 0 3px rgba(81, 26, 50, 0.1) !important;
}

/* --- Textarea ------------------------------------------------------- */
.smash-form textarea,
body.smash-theme-white .wpcf7-form textarea,
body.smash-theme-white .wpforms-form textarea,
body.smash-theme-white .gform_wrapper textarea,
body.smash-theme-white .comment-form textarea,
body.smash-theme-white form.contact-form textarea {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 150px;
	margin: 0 !important;
	padding: 12px var(--smash-form-pad-x) !important;
	background: var(--smash-form-bg) !important;
	background-image: none !important;
	border: 1px solid var(--smash-form-border) !important;
	border-radius: var(--smash-form-radius) !important;
	box-shadow: none !important;
	color: var(--smash-form-fg) !important;
	font-family: var(--smash-font-display) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.smash-form textarea:focus,
body.smash-theme-white .wpcf7-form textarea:focus,
body.smash-theme-white .wpforms-form textarea:focus,
body.smash-theme-white .gform_wrapper textarea:focus,
body.smash-theme-white .comment-form textarea:focus,
body.smash-theme-white form.contact-form textarea:focus {
	outline: none !important;
	border-color: var(--smash-color-bordeaux) !important;
	box-shadow: 0 0 0 3px rgba(81, 26, 50, 0.1) !important;
}

/* --- Placeholders --------------------------------------------------- */
.smash-form input::placeholder,
.smash-form textarea::placeholder,
body.smash-theme-white .wpcf7-form input::placeholder,
body.smash-theme-white .wpcf7-form textarea::placeholder,
body.smash-theme-white .wpforms-form input::placeholder,
body.smash-theme-white .wpforms-form textarea::placeholder,
body.smash-theme-white .gform_wrapper input::placeholder,
body.smash-theme-white .gform_wrapper textarea::placeholder,
body.smash-theme-white .comment-form input::placeholder,
body.smash-theme-white .comment-form textarea::placeholder,
body.smash-theme-white form.contact-form input::placeholder,
body.smash-theme-white form.contact-form textarea::placeholder {
	color: var(--smash-form-placeholder);
	opacity: 1;
	font-family: var(--smash-font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
}

/* --- Helper / description text -------------------------------------- */
.smash-form .smash-form__help,
.smash-form .description,
body.smash-theme-white .wpcf7-form .description,
body.smash-theme-white .wpforms-form .wpforms-field-description,
body.smash-theme-white .gform_wrapper .gfield_description,
body.smash-theme-white .comment-form .description {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--smash-font-display) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 17px !important;
	letter-spacing: 0 !important;
	color: var(--smash-form-helper) !important;
	text-transform: none !important;
}

/* --- Submit buttons ------------------------------------------------- */
.smash-form button[type="submit"],
.smash-form input[type="submit"],
body.smash-theme-white .wpcf7-form button[type="submit"],
body.smash-theme-white .wpcf7-form input[type="submit"],
body.smash-theme-white .wpcf7-form .wpcf7-submit,
body.smash-theme-white .wpforms-form button[type="submit"],
body.smash-theme-white .wpforms-form input[type="submit"],
body.smash-theme-white .gform_wrapper button[type="submit"],
body.smash-theme-white .gform_wrapper input[type="submit"],
body.smash-theme-white .comment-form input[type="submit"],
body.smash-theme-white .comment-form button[type="submit"],
body.smash-theme-white form.contact-form button[type="submit"],
body.smash-theme-white form.contact-form input[type="submit"],
body.smash-theme-white form.contact-form button.button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: var(--smash-form-height) !important;
	min-height: var(--smash-form-height);
	margin: 0 !important;
	padding: 0 24px !important;
	background: #000 !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--smash-form-radius-btn) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: var(--smash-font-display) !important;
	font-weight: var(--smash-font-weight-semibold) !important;
	font-size: 16px !important;
	line-height: 20px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.smash-form button[type="submit"]:hover,
.smash-form input[type="submit"]:hover,
body.smash-theme-white .wpcf7-form button[type="submit"]:hover,
body.smash-theme-white .wpcf7-form input[type="submit"]:hover,
body.smash-theme-white .wpforms-form button[type="submit"]:hover,
body.smash-theme-white .wpforms-form input[type="submit"]:hover,
body.smash-theme-white .gform_wrapper button[type="submit"]:hover,
body.smash-theme-white .gform_wrapper input[type="submit"]:hover,
body.smash-theme-white .comment-form input[type="submit"]:hover,
body.smash-theme-white .comment-form button[type="submit"]:hover,
body.smash-theme-white form.contact-form button[type="submit"]:hover,
body.smash-theme-white form.contact-form input[type="submit"]:hover,
body.smash-theme-white form.contact-form button.button:hover {
	background: var(--smash-color-bordeaux) !important;
	color: #fff !important;
	opacity: 1;
}

/* Kill Kalium's animated ::after underline on form submit anchors. */
body.smash-theme-white form button::after,
body.smash-theme-white form input[type="submit"]::after {
	content: none !important;
	display: none !important;
}

/* --- Checkbox / radio ------------------------------------------------ */
body.smash-theme-white .wpcf7-form input[type="checkbox"],
body.smash-theme-white .wpcf7-form input[type="radio"],
body.smash-theme-white .wpforms-form input[type="checkbox"],
body.smash-theme-white .wpforms-form input[type="radio"],
body.smash-theme-white .gform_wrapper input[type="checkbox"],
body.smash-theme-white .gform_wrapper input[type="radio"],
body.smash-theme-white .comment-form input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-height: auto !important;
	accent-color: #000;
	margin-right: 8px;
	border: 1px solid #000 !important;
	border-radius: 4px !important;
	background: #fff !important;
	padding: 0 !important;
}

/* CF7 response messages — neutral, in our type system. */
body.smash-theme-white .wpcf7-response-output {
	margin: 12px 0 0 !important;
	padding: 12px 16px !important;
	border: 1px solid #000 !important;
	border-radius: var(--smash-form-radius) !important;
	background: #fff !important;
	font-family: var(--smash-font-display) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 17px !important;
	color: #000 !important;
}

body.smash-theme-white .wpcf7 form.invalid .wpcf7-response-output,
body.smash-theme-white .wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: #c00 !important;
	color: #c00 !important;
}

/* -------------------------------------------------------------------------
 * Pink theme — invert: white on transparent / bordeaux background.
 * ------------------------------------------------------------------------- */
body.smash-theme-pink .wpcf7-form input[type="text"],
body.smash-theme-pink .wpcf7-form input[type="email"],
body.smash-theme-pink .wpcf7-form input[type="tel"],
body.smash-theme-pink .wpcf7-form input[type="url"],
body.smash-theme-pink .wpcf7-form input[type="number"],
body.smash-theme-pink .wpcf7-form input[type="password"],
body.smash-theme-pink .wpcf7-form select,
body.smash-theme-pink .wpcf7-form textarea,
body.smash-theme-pink .wpforms-form input[type="text"],
body.smash-theme-pink .wpforms-form input[type="email"],
body.smash-theme-pink .wpforms-form input[type="tel"],
body.smash-theme-pink .wpforms-form input[type="url"],
body.smash-theme-pink .wpforms-form select,
body.smash-theme-pink .wpforms-form textarea,
body.smash-theme-pink .comment-form input[type="text"],
body.smash-theme-pink .comment-form input[type="email"],
body.smash-theme-pink .comment-form input[type="url"],
body.smash-theme-pink .comment-form textarea {
	background: transparent !important;
	border-color: var(--smash-color-accent) !important;
	color: var(--smash-color-accent) !important;
}

body.smash-theme-pink .wpcf7-form label,
body.smash-theme-pink .wpforms-form label.wpforms-field-label,
body.smash-theme-pink .comment-form label {
	color: var(--smash-color-accent) !important;
}

body.smash-theme-pink .wpcf7-form button[type="submit"],
body.smash-theme-pink .wpcf7-form input[type="submit"],
body.smash-theme-pink .wpforms-form button[type="submit"],
body.smash-theme-pink .wpforms-form input[type="submit"],
body.smash-theme-pink .comment-form input[type="submit"] {
	background: var(--smash-color-accent) !important;
	color: var(--smash-color-bordeaux) !important;
}

/* =========================================================================
 * Editor-content bullet lists — green check-circle marker
 * Scoped to WPBakery text blocks and native post/page content only, so
 * navigation menus, widgets, and bespoke components (which set their own
 * `list-style: none`) are unaffected. Opt-out: add class `no-smash-bullets`
 * to the <ul>.
 * ========================================================================= */

.wpb_text_column ul:not(.no-smash-bullets),
.vc_general.vc_wp_text ul:not(.no-smash-bullets),
.entry-content ul:not(.no-smash-bullets) {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 1.2em;
}

.wpb_text_column ul:not(.no-smash-bullets) li,
.vc_general.vc_wp_text ul:not(.no-smash-bullets) li,
.entry-content ul:not(.no-smash-bullets) li {
	position: relative;
	padding-left: 36px;
	margin: 0 0 12px;
	min-height: 24px;
	line-height: 1.3;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z' fill='%23B0FF70' stroke='%23B0FF70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.125 9.75L10.6219 15L7.875 12.375' stroke='%23511A32' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 0.2em;
	background-size: 24px 24px;
}

.wpb_text_column ul:not(.no-smash-bullets) li:last-child,
.vc_general.vc_wp_text ul:not(.no-smash-bullets) li:last-child,
.entry-content ul:not(.no-smash-bullets) li:last-child {
	margin-bottom: 0;
}

/* Nested lists: indent but keep the same marker. */
.wpb_text_column ul:not(.no-smash-bullets) ul,
.vc_general.vc_wp_text ul:not(.no-smash-bullets) ul,
.entry-content ul:not(.no-smash-bullets) ul {
	margin: 12px 0 0 12px;
}

/* =========================================================================
 * Smash Partner Gallery — [smash_partner_gallery]
 * Pure logo wall per Figma 18050-9636. 210×133 tiles, no chrome,
 * flex-wrap with last-row centered. No filters, no load-more, no titles.
 *
 * Responsive: desktop columns come from --cols; tile width / row count
 * scale down naturally as the row gap (40px) / column gap (20px) stay
 * fixed and tiles reflow.
 * ========================================================================= */

.smash-partner-gallery {
	width: 100%;
	padding: clamp(32px, 4vw, 60px) clamp(16px, 2vw, 32px);
}

.smash-partner-gallery__grid {
	--smash-partner-tile-w: 210px;
	--smash-partner-tile-h: 133px;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	row-gap: 40px;
	column-gap: 20px;
	/* Cap the row width at <cols> * tile + <cols-1> * gap so the wall stays
	   centered and doesn't stretch edge-to-edge on wide viewports. */
	max-width: calc(
		var(--smash-partner-cols, 4) * var(--smash-partner-tile-w)
		+ (var(--smash-partner-cols, 4) - 1) * 20px
	);
}

.smash-partner-gallery--cols-3 .smash-partner-gallery__grid { --smash-partner-cols: 3; }
.smash-partner-gallery--cols-4 .smash-partner-gallery__grid { --smash-partner-cols: 4; }
.smash-partner-gallery--cols-5 .smash-partner-gallery__grid { --smash-partner-cols: 5; }
.smash-partner-gallery--cols-6 .smash-partner-gallery__grid { --smash-partner-cols: 6; }

.smash-partner-gallery__cell {
	flex: 0 0 var(--smash-partner-tile-w);
	width: var(--smash-partner-tile-w);
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	list-style: none;
}

.smash-partner-gallery__tile {
	display: block;
	width: 100%;
	height: var(--smash-partner-tile-h);
	line-height: 0;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

a.smash-partner-gallery__tile:hover,
a.smash-partner-gallery__tile:focus-visible {
	opacity: 0.75;
}

.smash-partner-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Tablet — cap at 3 per row. */
@media (max-width: 960px) {
	.smash-partner-gallery__grid {
		max-width: calc(3 * var(--smash-partner-tile-w) + 2 * 20px);
	}
}

/* Small tablet — 2 per row. */
@media (max-width: 720px) {
	.smash-partner-gallery__grid {
		--smash-partner-tile-w: 180px;
		--smash-partner-tile-h: 114px;
		row-gap: 28px;
		max-width: calc(2 * var(--smash-partner-tile-w) + 1 * 20px);
	}
}

/* Phone — 2 columns, tile scales with viewport. */
@media (max-width: 480px) {
	.smash-partner-gallery__grid {
		--smash-partner-tile-w: calc((100vw - 20px - 32px) / 2);
		--smash-partner-tile-h: calc(var(--smash-partner-tile-w) * 0.633);
		row-gap: 20px;
		column-gap: 12px;
		max-width: 100%;
	}
}

/* =========================================================================
 * Smash Countdown — [smash_countdown]
 * Neon-green band with left-aligned header + muted subheader on the left
 * and four black circles (days / hours / minutes / seconds) on the right.
 * Figma: 1440×330, circles 210px, digits 45px, labels 30px. The component
 * exposes --smash-countdown-* custom properties so colors can be overridden
 * per-instance from the Bakery colorpickers.
 * ========================================================================= */

.smash-countdown {
	--smash-countdown-bg: var(--smash-color-highlight);
	--smash-countdown-fg: var(--smash-color-schwarz);
	--smash-countdown-circle: var(--smash-color-schwarz);
	--smash-countdown-digit: var(--smash-color-highlight);
	width: 100%;
	padding: clamp(40px, 5vw, 60px) clamp(20px, 2.78vw, 40px);
	background: var(--smash-countdown-bg);
	color: var(--smash-countdown-fg);
}

.smash-countdown__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(24px, 4vw, 60px);
	align-items: center;
}

.smash-countdown__text {
	min-width: 0;
}

.smash-countdown__header,
.smash-countdown__subheader {
	margin: 0;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(24px, 2.8vw, 40px);
	line-height: 1.175; /* 47 / 40 */
	color: inherit;
	max-width: 14ch;
}

.smash-countdown__subheader {
	margin-top: 0.7em;
	color: color-mix(in srgb, var(--smash-countdown-fg) 45%, transparent);
}

/* Fallback for browsers without color-mix — matches Figma's 45% black. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.smash-countdown__subheader {
		color: rgba(0, 0, 0, 0.45);
	}
}

.smash-countdown__timer {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	/* Circles overlap via negative inline margins on siblings; the row
	   itself gets no gap so the overlap is consistent. */
	--smash-countdown-overlap: clamp(14px, 2vw, 32px);
}

.smash-countdown__cell {
	margin: 0;
	padding: 0;
	background: none;
	position: relative;
}

.smash-countdown__cell + .smash-countdown__cell {
	margin-left: calc(var(--smash-countdown-overlap) * -1);
}

.smash-countdown__circle {
	--size: clamp(120px, 15vw, 210px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: var(--smash-countdown-circle);
	color: var(--smash-countdown-digit);
	text-align: center;
	line-height: 1;
}

.smash-countdown__digits {
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(28px, 3.3vw, 45px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	color: inherit;
}

.smash-countdown__label {
	margin-top: 0.35em;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(14px, 2vw, 30px);
	line-height: 1.2;
	color: inherit;
}

@media (max-width: 860px) {
	.smash-countdown__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.smash-countdown__timer {
		justify-content: center;
		flex-wrap: nowrap;
	}
	.smash-countdown__header,
	.smash-countdown__subheader {
		max-width: none;
	}
}

/* Mobile: shrink circles so all four fit on a single line. The label
   "Sekunden" is the long word, so the label font also steps down. */
@media (max-width: 600px) {
	.smash-countdown {
		padding: 36px 16px;
	}
	.smash-countdown__timer {
		--smash-countdown-overlap: 10px;
	}
	.smash-countdown__circle {
		--size: clamp(72px, 22vw, 120px);
	}
	.smash-countdown__digits {
		font-size: clamp(20px, 5.2vw, 28px);
	}
	.smash-countdown__label {
		font-size: clamp(10px, 2.8vw, 13px);
	}
}

@media (max-width: 380px) {
	.smash-countdown__timer {
		--smash-countdown-overlap: 6px;
	}
	.smash-countdown__circle {
		--size: 68px;
	}
	.smash-countdown__digits {
		font-size: 18px;
	}
	.smash-countdown__label {
		font-size: 9px;
	}
}

/* =========================================================================
 * Smash Ticket Row — [smash_ticket_row]
 * 3-column pricing-table row (name+desc | price | pill CTA) with a 1px black
 * rule above. Stack consecutive rows for the full table; each row owns its
 * own rule so the gap between them stays even.
 * ========================================================================= */

.smash-ticket-row {
	--smash-ticket-muted: rgba(0, 0, 0, 0.25);
	width: 100%;
	border-top: 1px solid var(--smash-color-schwarz);
	padding-top: 20px;
	color: var(--smash-color-schwarz);
	font-family: var(--smash-font-display);
}

/* When rows are stacked directly (inside the same column), add the 44px
   gap Figma shows between rows. */
.smash-ticket-row + .smash-ticket-row,
.wpb_wrapper > .smash-ticket-row + .smash-ticket-row,
.wpb_wrapper > .wpb_text_column + .smash-ticket-row,
.vc_column-inner .smash-ticket-row + .smash-ticket-row {
	margin-top: 44px;
}

.smash-ticket-row__inner {
	display: grid;
	grid-template-columns: 1fr auto 240px;
	column-gap: clamp(20px, 3vw, 48px);
	row-gap: 12px;
	align-items: start;
}

.smash-ticket-row__info {
	min-width: 0;
}

.smash-ticket-row__name {
	margin: 0;
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.2;
	color: inherit;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.smash-ticket-row__badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--smash-color-schwarz);
	border-radius: 2000px;
	background: transparent;
	font-family: var(--smash-font-display);
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	color: var(--smash-color-schwarz);
	white-space: nowrap;
}

.smash-ticket-row__description {
	margin: 18px 0 0;
	font-family: var(--smash-font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	color: inherit;
	max-width: 44ch;
}

.smash-ticket-row__price {
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: clamp(30px, 2.9vw, 40px);
	line-height: 1.1;
	color: inherit;
	justify-self: end;
	align-self: start;
	white-space: nowrap;
}

.smash-ticket-row__cta {
	justify-self: end;
	align-self: start;
}

.smash-ticket-row__btn,
a.smash-ticket-row__btn,
.wrapper a.smash-ticket-row__btn,
.wrapper a.smash-ticket-row__btn.link-hover {
	/* Force inline-flex to beat Kalium's `.wrapper a { display: block }`
	   rule — same pattern as .smash-blob. Otherwise the label sits at the
	   top of the pill and the button's padding only renders below it. */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 240px;
	max-width: 100%;
	height: 40px;
	padding: 0 24px;
	border-radius: 2000px;
	background: var(--smash-color-accent);
	color: var(--smash-color-bordeaux);
	font-family: var(--smash-font-display);
	font-weight: var(--smash-font-weight-semibold);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

a.smash-ticket-row__btn:hover,
a.smash-ticket-row__btn:focus-visible {
	opacity: 0.85;
	text-decoration: none;
}

.smash-ticket-row__btn--disabled {
	background: var(--smash-ticket-muted);
	color: var(--smash-color-weiss);
	cursor: not-allowed;
	pointer-events: none;
}

/* Muted / disabled row states — name, description, price all fade. */
.smash-ticket-row--sold-out,
.smash-ticket-row--coming-soon {
	color: var(--smash-ticket-muted);
}

.smash-ticket-row--sold-out .smash-ticket-row__price,
.smash-ticket-row--coming-soon .smash-ticket-row__price,
.smash-ticket-row--sold-out .smash-ticket-row__name,
.smash-ticket-row--coming-soon .smash-ticket-row__name,
.smash-ticket-row--sold-out .smash-ticket-row__description,
.smash-ticket-row--coming-soon .smash-ticket-row__description {
	color: var(--smash-ticket-muted);
}

/* Pink-theme pages flip the row text to pink on bordeaux. */
body.smash-theme-pink .smash-ticket-row {
	border-top-color: var(--smash-color-accent);
	color: var(--smash-color-accent);
}

body.smash-theme-pink .smash-ticket-row__badge {
	border-color: var(--smash-color-accent);
	color: var(--smash-color-accent);
}

body.smash-theme-pink .smash-ticket-row--sold-out,
body.smash-theme-pink .smash-ticket-row--coming-soon,
body.smash-theme-pink .smash-ticket-row--sold-out .smash-ticket-row__name,
body.smash-theme-pink .smash-ticket-row--coming-soon .smash-ticket-row__name,
body.smash-theme-pink .smash-ticket-row--sold-out .smash-ticket-row__description,
body.smash-theme-pink .smash-ticket-row--coming-soon .smash-ticket-row__description,
body.smash-theme-pink .smash-ticket-row--sold-out .smash-ticket-row__price,
body.smash-theme-pink .smash-ticket-row--coming-soon .smash-ticket-row__price {
	color: rgba(255, 92, 255, 0.45);
}

@media (max-width: 720px) {
	.smash-ticket-row__inner {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"info  price"
			"cta   cta";
		column-gap: 20px;
		row-gap: 18px;
	}
	.smash-ticket-row__info   { grid-area: info; }
	.smash-ticket-row__price  { grid-area: price; }
	.smash-ticket-row__cta    { grid-area: cta; justify-self: stretch; }
	.smash-ticket-row__btn    { width: 100%; }
}

/* =========================================================================
 * Smash Full-Bleed Image — editor helper
 *
 * Any WPBakery Single Image element (or any other VC element) tagged with
 * the "Extra class name" `smash-full-image` breaks out of the 1170px
 * Bootstrap container + Bakery row padding and fills the entire viewport
 * width. Use when the designer wants a photo to run edge-to-edge.
 *
 * Targets the element itself plus every Bakery wrapper up to `.vc_row` so
 * the container's max-width / padding / negative-margin don't re-clip it.
 * ========================================================================= */
.smash-full-image,
.vc_row:has(> .vc_column_container > .vc_column-inner > .wpb_wrapper > .smash-full-image),
.vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .smash-full-image) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.vc_row:has(.smash-full-image) {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.vc-row-container:has(.smash-full-image) {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wpb_column:has(.smash-full-image),
.vc_column-inner:has(> .wpb_wrapper > .smash-full-image),
.wpb_wrapper:has(> .smash-full-image) {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: none !important;
}

.smash-full-image,
.smash-full-image .vc_single_image-wrapper,
.smash-full-image .vc_figure,
.wpb_single_image.smash-full-image {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center;
}

.smash-full-image img,
.wpb_single_image.smash-full-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

/* =========================================================================
 * Smash Carousel Lightbox
 *
 * Fullscreen gallery triggered by clicking any tile in the artist portrait
 * collage. Rendered at the end of <body> by smash.js on first open and
 * reused thereafter.
 * ========================================================================= */
.smash-carousel-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 40px;
	background: rgba(0, 0, 0, 0.92);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: smash-carousel-lightbox-fade 0.18s ease;
}

.smash-carousel-lightbox[hidden] {
	display: none;
}

@keyframes smash-carousel-lightbox-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

body.smash-carousel-lightbox-open {
	overflow: hidden;
}

.smash-carousel-lightbox__stage {
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: min(1200px, 86vw);
	max-height: 86vh;
}

.smash-carousel-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(86vh - 40px);
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
	background: #111;
}

.smash-carousel-lightbox__counter {
	margin: 0;
	font-family: var(--smash-font-display);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.72);
	text-align: center;
}

.smash-carousel-lightbox__nav,
.smash-carousel-lightbox__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
	font-family: var(--smash-font-display);
	line-height: 1;
}

.smash-carousel-lightbox__nav {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	font-size: 32px;
}

.smash-carousel-lightbox__nav:hover,
.smash-carousel-lightbox__nav:focus-visible,
.smash-carousel-lightbox__close:hover,
.smash-carousel-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.28);
	outline: none;
}

.smash-carousel-lightbox__nav:active {
	transform: scale(0.94);
}

.smash-carousel-lightbox__close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 26px;
}

@media (max-width: 680px) {
	.smash-carousel-lightbox {
		padding: 12px;
		gap: 6px;
	}
	.smash-carousel-lightbox__nav {
		width: 44px;
		height: 44px;
		font-size: 24px;
	}
	.smash-carousel-lightbox__close {
		top: 8px;
		right: 10px;
	}
	.smash-carousel-lightbox__stage {
		max-width: calc(100vw - 112px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.smash-carousel-lightbox { animation: none; }
	.smash-artist-portrait__tile-img { transition: none; }
}