/*
Theme Name: Yoga & Health
Theme URI: https://mercan.systems
Author: mercan.systems
Author URI: https://mercan.systems
Description: OnePager-Theme für Yoga & Health (Ann-Christin Weinack, Itzehoe). Mobile first, 100 % responsiv, komplett über den Customizer einstellbar (Farben, Schriften, Größen, Texte, Bilder, Sektionen ein/aus + Reihenfolge). Angebote und Specials als eigene Inhaltstypen. Alle Schriften lokal, keine externen Dienste, keine Cookies – kein Cookie-Banner nötig.
Version: 1.0.2
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yoga-health
*/

/* ==========================================================================
   0. Schriften (lokal, SIL Open Font License – siehe assets/fonts/OFL-*.txt)
   ========================================================================== */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/jost-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/jost-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Kaushan Script";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/kaushan-script-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Kaushan Script";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/kaushan-script-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. Design-Tokens
   Defaults = Screendesign. Werte aus dem Customizer überschreiben diese
   Variablen (nur Variablen-Werte, keine Regeln).
   Zahlen ohne Einheit = px, werden fließend zwischen mobil (375 px) und
   Desktop (1180 px) skaliert.
   ========================================================================== */

:root {
	--yh-primary: #3a4434;
	--yh-primary-dark: #2f382a;
	--yh-accent: #9ecb8a;
	--yh-accent-hover: #6f8f63;
	--yh-bg: #faf9f6;
	--yh-bg-alt: #f2f0e9;
	--yh-text: #4f5a48;
	--yh-muted: #8b9484;
	--yh-border: #e2e0d8;
	--yh-on-dark: #faf9f6;
	--yh-on-dark-muted: #dfe6d6;

	--yh-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
	--yh-font-heading: "Jost", "Helvetica Neue", Arial, sans-serif;
	--yh-font-display: "Kaushan Script", "Brush Script MT", cursive;
	--yh-font-quote: "Cormorant Garamond", Georgia, "Times New Roman", serif;

	--yh-hero-m: 52;   --yh-hero-d: 83;
	--yh-herosub-m: 16; --yh-herosub-d: 19;
	--yh-h2-m: 29;     --yh-h2-d: 40;
	--yh-lead-m: 17;   --yh-lead-d: 19;
	--yh-quote-m: 26;  --yh-quote-d: 38;
	--yh-body: 15;

	--yh-container: 1180;
	--yh-pad-m: 72;    --yh-pad-d: 110;
	--yh-radius: 16;
	--yh-btn-radius: 999;

	--yh-header-offset: 18;
	--yh-header-h-m: 66; --yh-header-h-d: 96; --yh-header-h-s: 82;
	--yh-logo-m: 92;     --yh-logo-d: 134;    --yh-logo-s: 116;
	--yh-header-bg: #3a4434;
	--yh-header-bg-o: 96;
	--yh-nav-link: #faf9f6;
	--yh-cta-bg: #faf9f6;
	--yh-cta-color: #3a4434;

	--yh-hero-fx: 50%;
	--yh-hero-fy: 30%;
	--yh-hero-overlay: 100;
	--yh-hero-h: 100;

	--yh-about-img-m: 320; --yh-about-img-d: 480;
	--yh-about-fx: 50%;    --yh-about-fy: 20%;
	--yh-card-img: 220;
	--yh-footer-icon: 44;
	--yh-offers-cols: 3;
	--yh-specials-cols: 2;
	--yh-modal-w: 760;

	/* abgeleitet */
	--yh-fluid: calc((100vw - 375px) / 805);
	--yh-gutter: max(24px, 6vw);
	--yh-gap: clamp(36px, calc(36px + 28 * var(--yh-fluid)), 64px);
	--yh-r: calc(var(--yh-radius) * 1px);
	--yh-br: calc(var(--yh-btn-radius) * 1px);
	--yh-header-top: calc(var(--yh-header-offset) * 1px);
	--yh-header-h: calc(var(--yh-header-h-m) * 1px);
	--yh-input-border: color-mix(in srgb, var(--yh-border), var(--yh-primary) 8%);
	--yh-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 860px) {
	:root {
		--yh-header-h: calc(var(--yh-header-h-d) * 1px);
	}
}

/* Farbkontexte je Hintergrund (Komponenten nutzen nur --c-*) */
:root,
.yh-bg-light {
	--c-heading: var(--yh-primary);
	--c-text: var(--yh-text);
	--c-muted: var(--yh-muted);
	--c-border: var(--yh-border);
	--c-surface: var(--yh-bg-alt);
	--c-btn-bg: var(--yh-primary);
	--c-btn-fg: var(--yh-on-dark);
	--c-outline: var(--yh-primary);
	--c-accent-text: var(--yh-accent-hover);
	--c-link: var(--yh-primary);
	--c-link-hover: var(--yh-accent-hover);
}
.yh-bg-alt {
	--c-heading: var(--yh-primary);
	--c-text: var(--yh-text);
	--c-muted: var(--yh-muted);
	--c-border: color-mix(in srgb, var(--yh-border), var(--yh-primary) 6%);
	--c-surface: var(--yh-bg);
	--c-btn-bg: var(--yh-primary);
	--c-btn-fg: var(--yh-on-dark);
	--c-outline: var(--yh-primary);
	--c-accent-text: var(--yh-accent-hover);
	--c-link: var(--yh-primary);
	--c-link-hover: var(--yh-accent-hover);
}
.yh-bg-dark {
	--c-heading: var(--yh-on-dark);
	--c-text: var(--yh-on-dark-muted);
	--c-muted: var(--yh-accent);
	--c-border: color-mix(in srgb, var(--yh-on-dark) 22%, transparent);
	--c-surface: var(--yh-bg);
	--c-btn-bg: var(--yh-accent);
	--c-btn-fg: var(--yh-primary);
	--c-outline: var(--yh-on-dark);
	--c-accent-text: var(--yh-accent);
	--c-link: var(--yh-on-dark);
	--c-link-hover: var(--yh-accent);
}
/* Karten mit heller Fläche setzen den Kontext wieder auf hell */
.yh-card {
	--c-heading: var(--yh-primary);
	--c-text: var(--yh-text);
	--c-muted: var(--yh-muted);
	--c-btn-bg: var(--yh-primary);
	--c-btn-fg: var(--yh-on-dark);
	--c-outline: var(--yh-primary);
	--c-link: var(--yh-primary);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--yh-header-top) + var(--yh-header-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	font-family: var(--yh-font-body);
	font-size: 16px;
	line-height: 1.6;
	background: var(--yh-bg);
	color: var(--yh-primary);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.yh-menu-open {
	overflow: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--c-link);
	transition: color .2s ease;
}

a:hover {
	color: var(--c-link-hover);
}

::selection {
	background: var(--yh-accent);
	color: var(--yh-primary);
}

:focus-visible {
	outline: 2px solid var(--yh-accent);
	outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 500;
}

p {
	margin: 0;
}

.yh-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.yh-skip {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--yh-primary);
	color: var(--yh-on-dark);
	border-radius: 8px;
	text-decoration: none;
	transform: translateY(-200%);
}

.yh-skip:focus {
	transform: none;
	color: var(--yh-on-dark);
}

.yh-container {
	width: 100%;
	max-width: calc(var(--yh-container) * 1px);
	margin-inline: auto;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.yh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 48px;
	padding: 14px 32px;
	border: 1px solid transparent;
	border-radius: var(--yh-br);
	font-family: var(--yh-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--yh-ease);
	-webkit-tap-highlight-color: transparent;
}

.yh-btn:active {
	transform: translateY(1px);
}

.yh-btn--primary {
	background: var(--c-btn-bg);
	color: var(--c-btn-fg);
}

.yh-btn--primary:hover {
	background: color-mix(in srgb, var(--c-btn-bg), #000 14%);
	color: var(--c-btn-fg);
}

.yh-btn--accent {
	background: var(--yh-accent);
	color: var(--yh-primary);
}

.yh-btn--accent:hover {
	background: color-mix(in srgb, var(--yh-accent), #fff 22%);
	color: var(--yh-primary);
}

.yh-btn--outline {
	background: transparent;
	color: var(--c-outline);
	border-color: currentColor;
}

.yh-btn--outline:hover {
	background: var(--c-outline);
	border-color: var(--c-outline);
	color: var(--c-surface);
}

.yh-btn--ghost-light {
	background: transparent;
	color: var(--yh-on-dark);
	border-color: color-mix(in srgb, var(--yh-on-dark) 60%, transparent);
}

.yh-btn--ghost-light:hover {
	background: var(--yh-on-dark);
	border-color: var(--yh-on-dark);
	color: var(--yh-primary);
}

.yh-btn--sm {
	min-height: 40px;
	padding: 0 20px;
	font-size: 11px;
	letter-spacing: .08em;
	white-space: nowrap;
}

/* ==========================================================================
   4. Header & Navigation
   ========================================================================== */

.yh-header {
	position: fixed;
	top: var(--yh-header-top);
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--yh-header-h);
	transition: background-color .3s ease, height .3s ease, backdrop-filter .3s ease, top .3s ease;
}

.admin-bar .yh-header {
	top: calc(var(--yh-header-top) + 46px);
}

@media (min-width: 783px) {
	.admin-bar .yh-header {
		top: calc(var(--yh-header-top) + 32px);
	}
}

.yh-header-solid .yh-header,
.yh-header.is-scrolled,
.yh-menu-open .yh-header {
	background: rgba(58, 68, 52, .96);
	background: color-mix(in srgb, var(--yh-header-bg) calc(var(--yh-header-bg-o) * 1%), transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.yh-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 100%;
	padding-inline: 24px;
}

.yh-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.yh-logo__img {
	display: block;
	width: auto;
	height: calc(var(--yh-logo-m) * 1px);
	transition: height .3s ease;
}

.yh-logo--shadow .yh-logo__img {
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .18));
}

.yh-nav {
	display: none;
}

.yh-nav__list,
.yh-menu__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yh-header .yh-nav__list a,
.yh-header .yh-nav__list a:visited {
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--yh-nav-link);
	transition: color .3s ease, opacity .3s ease;
}

.yh-header .yh-nav__list a:hover,
.yh-header .yh-nav__list a:focus-visible {
	color: var(--yh-accent);
}

.yh-nav__cta.yh-btn {
	min-height: 0;
	padding: 14px 30px;
	font-size: 15px;
	letter-spacing: .08em;
	white-space: nowrap;
	background: var(--yh-cta-bg);
	color: var(--yh-cta-color);
}

.yh-nav__cta.yh-btn:hover {
	background: var(--yh-accent);
	color: var(--yh-primary);
}

/* Burger */
.yh-burger {
	position: relative;
	width: 44px;
	height: 44px;
	margin-right: -6px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.yh-burger span {
	position: absolute;
	left: 6px;
	width: 32px;
	height: 2px;
	background: var(--yh-nav-link);
	transition: transform .25s ease, opacity .2s ease, top .25s ease;
}

.yh-burger span:nth-child(1) { top: 13px; }
.yh-burger span:nth-child(2) { top: 21px; }
.yh-burger span:nth-child(3) { top: 29px; }

.yh-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.yh-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.yh-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Mobiles Vollbild-Menü */
.yh-menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 36px;
	padding: calc(var(--yh-header-top) + var(--yh-header-h) + 24px) 24px 48px;
	background: var(--yh-bg);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.yh-menu.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease;
}

.yh-menu__list {
	flex-direction: column;
	align-items: center;
	gap: 28px;
	text-align: center;
}

.yh-menu__list a {
	font-size: 23px;
	font-weight: 500;
	text-decoration: none;
	color: var(--yh-primary);
}

.yh-menu .yh-btn {
	margin-top: 10px;
}

@media (min-width: 860px) {
	.yh-header__inner {
		padding-inline: 6vw;
	}

	.yh-header.is-scrolled {
		height: calc(var(--yh-header-h-s) * 1px);
	}

	.yh-logo {
		margin-top: 10px;
	}

	.yh-logo__img {
		height: calc(var(--yh-logo-d) * 1px);
	}

	.yh-header.is-scrolled .yh-logo__img {
		height: calc(var(--yh-logo-s) * 1px);
	}

	.yh-nav {
		display: flex;
		align-items: center;
		gap: clamp(20px, 3.2vw, 48px);
	}

	.yh-nav__list {
		gap: clamp(20px, 3.2vw, 48px);
	}

	.yh-burger,
	.yh-menu {
		display: none;
	}
}

/* ==========================================================================
   5. Sektionen (allgemein)
   ========================================================================== */

.yh-section {
	position: relative;
	padding-block: clamp(calc(var(--yh-pad-m) * 1px), calc(var(--yh-pad-m) * 1px + (var(--yh-pad-d) - var(--yh-pad-m)) * var(--yh-fluid)), calc(var(--yh-pad-d) * 1px));
	padding-inline: var(--yh-gutter);
	color: var(--c-text);
}

.yh-bg-light { background: var(--yh-bg); }
.yh-bg-alt   { background: var(--yh-bg-alt); }
.yh-bg-dark  { background: var(--yh-primary); }

.yh-stack {
	display: flex;
	flex-direction: column;
	gap: var(--yh-gap);
}

.yh-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 640px;
}

.yh-kicker {
	font-family: var(--yh-font-body);
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.yh-h2 {
	font-family: var(--yh-font-heading);
	font-size: clamp(calc(var(--yh-h2-m) * 1px), calc(var(--yh-h2-m) * 1px + (var(--yh-h2-d) - var(--yh-h2-m)) * var(--yh-fluid)), calc(var(--yh-h2-d) * 1px));
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--c-heading);
	overflow-wrap: break-word;
	hyphens: auto;
}

.yh-lead {
	font-size: clamp(calc(var(--yh-lead-m) * 1px), calc(var(--yh-lead-m) * 1px + (var(--yh-lead-d) - var(--yh-lead-m)) * var(--yh-fluid)), calc(var(--yh-lead-d) * 1px));
	font-weight: 300;
	line-height: 1.7;
	color: var(--c-text);
}

.yh-lead p + p {
	margin-top: 1em;
}

/* Sanftes Einblenden (nur mit JS, nicht bei reduzierter Bewegung) */
@media (prefers-reduced-motion: no-preference) {
	.yh-js .yh-animate .yh-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .8s var(--yh-ease), transform .8s var(--yh-ease);
	}

	.yh-js .yh-animate .yh-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.yh-section--hero {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: calc(var(--yh-hero-h) * 1vh);
	height: calc(var(--yh-hero-h) * 1svh);
	min-height: 520px;
	padding: 0;
	overflow: hidden;
	color: var(--yh-on-dark);
}

.yh-hero__media,
.yh-hero__overlay {
	position: absolute;
	inset: 0;
}

.yh-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--yh-hero-fx) var(--yh-hero-fy);
}

.yh-hero__overlay {
	background: linear-gradient(180deg, rgba(58, 68, 52, .15) 0%, rgba(58, 68, 52, .35) 55%, rgba(58, 68, 52, .82) 100%);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--yh-primary) min(calc(var(--yh-hero-overlay) * .15%), 100%), transparent) 0%,
		color-mix(in srgb, var(--yh-primary) min(calc(var(--yh-hero-overlay) * .35%), 100%), transparent) 55%,
		color-mix(in srgb, var(--yh-primary) min(calc(var(--yh-hero-overlay) * .82%), 100%), transparent) 100%);
}

.yh-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	padding: 0 24px 64px;
}

.yh-hero--center .yh-hero__content {
	align-items: center;
	text-align: center;
}

.yh-hero__kicker {
	font-size: 13px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--yh-on-dark-muted);
}

.yh-hero__title {
	max-width: 820px;
	font-family: var(--yh-font-display);
	font-size: clamp(calc(var(--yh-hero-m) * 1px), calc(var(--yh-hero-m) * 1px + (var(--yh-hero-d) - var(--yh-hero-m)) * var(--yh-fluid)), calc(var(--yh-hero-d) * 1px));
	font-weight: 400;
	line-height: 1.05;
	color: var(--yh-on-dark);
	overflow-wrap: break-word;
}

.yh-hero__text {
	max-width: 560px;
	font-size: clamp(calc(var(--yh-herosub-m) * 1px), calc(var(--yh-herosub-m) * 1px + (var(--yh-herosub-d) - var(--yh-herosub-m)) * var(--yh-fluid)), calc(var(--yh-herosub-d) * 1px));
	font-weight: 300;
	line-height: 1.5;
	color: color-mix(in srgb, var(--yh-on-dark) 90%, var(--yh-on-dark-muted));
}

.yh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-top: 8px;
}

@media (max-width: 419px) {
	.yh-hero__actions .yh-btn {
		flex: 1 1 100%;
	}
}

@media (min-width: 860px) {
	.yh-hero__content {
		padding: 0 6vw 100px;
	}
}

/* ==========================================================================
   7. Über mich
   ========================================================================== */

.yh-about {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--yh-gap);
}

.yh-about__media {
	width: 100%;
}

.yh-about__media img {
	display: block;
	width: 100%;
	height: clamp(calc(var(--yh-about-img-m) * 1px), calc(var(--yh-about-img-m) * 1px + (var(--yh-about-img-d) - var(--yh-about-img-m)) * var(--yh-fluid)), calc(var(--yh-about-img-d) * 1px));
	object-fit: cover;
	object-position: var(--yh-about-fx) var(--yh-about-fy);
	border-radius: var(--yh-r);
}

.yh-about--fit-full .yh-about__media img {
	height: auto;
}

/* Hochformat */
.yh-about--fit-portrait .yh-about__media {
	max-width: 480px;
}

.yh-about--fit-portrait .yh-about__media img {
	height: auto;
	aspect-ratio: 4 / 5;
}

.yh-about--fit-portrait .yh-ratio-2-3 img { aspect-ratio: 2 / 3; }
.yh-about--fit-portrait .yh-ratio-3-4 img { aspect-ratio: 3 / 4; }
.yh-about--fit-portrait .yh-ratio-1-1 img { aspect-ratio: 1 / 1; }

@media (min-width: 860px) {
	.yh-about--fit-portrait .yh-about__media {
		flex: 0 1 42%;
		max-width: 500px;
	}
}

@media (min-width: 860px) {
	.yh-about--fit-full {
		align-items: flex-start;
	}
}

.yh-about__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

.yh-about__body .yh-head {
	max-width: none;
}

.yh-quote-line {
	margin: 6px 0 0;
	padding-left: 20px;
	border-left: 2px solid var(--yh-accent);
	font-family: var(--yh-font-quote);
	font-size: 22px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
	color: var(--c-heading);
}

@media (min-width: 860px) {
	.yh-about {
		flex-direction: row;
	}

	.yh-about--img-right {
		flex-direction: row-reverse;
	}

	.yh-about__media {
		flex: 1.3 1 0;
		min-width: 0;
	}

	.yh-about__body {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ==========================================================================
   8. Karten-Raster (Angebote & Specials)
   ========================================================================== */

.yh-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

@media (min-width: 640px) {
	.yh-grid--offers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 860px) {
	.yh-grid {
		gap: 32px;
	}

	.yh-grid--specials {
		grid-template-columns: repeat(var(--yh-specials-cols), minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.yh-grid--offers {
		grid-template-columns: repeat(var(--yh-offers-cols), minmax(0, 1fr));
	}
}

.yh-card {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border-radius: var(--yh-r);
	overflow: hidden;
	color: var(--c-text);
}

.yh-card__media {
	display: block;
	overflow: hidden;
}

.yh-card__img {
	display: block;
	width: 100%;
	height: calc(var(--yh-card-img) * 1px);
	object-fit: cover;
	transition: transform .8s var(--yh-ease);
}

.yh-card:hover .yh-card__img {
	transform: scale(1.03);
}

.yh-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
}

.yh-card__title {
	font-family: var(--yh-font-heading);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--c-heading);
}

.yh-card__title a {
	color: inherit;
	text-decoration: none;
}

.yh-card__text {
	font-size: calc(var(--yh-body) * 1px);
	font-weight: 300;
	line-height: 1.65;
	color: var(--c-text);
}

.yh-card__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--c-heading);
}

.yh-card__note {
	margin-top: 6px;
	color: var(--c-muted);
}

.yh-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
}

.yh-card__actions .yh-btn {
	flex: 1 1 auto;
}

@media (min-width: 860px) {
	.yh-card__body {
		padding: 28px;
	}
}

/* Special-Karte (Rahmen statt Fläche) */
.yh-special {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px;
	border: 1px solid var(--c-border);
	border-radius: var(--yh-r);
	color: var(--c-text);
	transition: border-color .3s ease, transform .3s var(--yh-ease);
}

.yh-special:hover {
	border-color: var(--yh-accent);
}

.yh-special__meta {
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--c-muted);
}

.yh-special__title {
	font-family: var(--yh-font-heading);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--c-heading);
}

.yh-special__text {
	font-size: calc(var(--yh-body) * 1px);
	font-weight: 300;
	line-height: 1.65;
	margin-bottom: 8px;
}

.yh-special .yh-btn {
	align-self: flex-start;
	margin-top: auto;
}

@media (min-width: 860px) {
	.yh-special {
		padding: 32px;
	}
}

.yh-empty {
	padding: 24px;
	border: 1px dashed var(--c-border);
	border-radius: var(--yh-r);
	color: var(--c-muted);
}

/* ==========================================================================
   9. Zitat-Band
   ========================================================================== */

.yh-section--quote {
	display: flex;
	justify-content: center;
	padding-block: clamp(80px, calc(80px + 40 * var(--yh-fluid)), 120px);
}

.yh-quote {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 760px;
	margin: 0;
	text-align: center;
}

.yh-quote__text {
	margin: 0;
	font-family: var(--yh-font-quote);
	font-size: clamp(calc(var(--yh-quote-m) * 1px), calc(var(--yh-quote-m) * 1px + (var(--yh-quote-d) - var(--yh-quote-m)) * var(--yh-fluid)), calc(var(--yh-quote-d) * 1px));
	font-style: italic;
	font-weight: 300;
	line-height: 1.4;
	color: var(--c-heading);
}

.yh-quote__sub {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--c-text);
}

.yh-quote__sub--caps {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--c-accent-text);
}

/* ==========================================================================
   10. Kontakt & Formular-Platzhalter
   ========================================================================== */

.yh-contact {
	display: flex;
	flex-direction: column;
	gap: var(--yh-gap);
}

.yh-contact__info,
.yh-contact__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.yh-contact__info .yh-head {
	max-width: none;
}

.yh-contact__details {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font-size: 18px;
	color: var(--c-heading);
}

.yh-contact__details a {
	color: var(--c-heading);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.yh-contact__details a:hover {
	color: var(--c-link-hover);
}

@media (min-width: 860px) {
	.yh-contact {
		flex-direction: row;
	}

	.yh-contact__info,
	.yh-contact__form {
		flex: 1 1 0;
	}

	.yh-contact--single .yh-contact__info {
		max-width: 720px;
	}
}

/* Platzhalter, solange kein Formular-Shortcode hinterlegt ist (nur für Redakteur:innen sichtbar) */
.yh-form-placeholder {
	padding: 28px;
	border: 1.5px dashed var(--yh-accent-hover);
	border-radius: var(--yh-r);
	background: color-mix(in srgb, var(--yh-accent) 10%, transparent);
	color: var(--yh-primary);
	font-size: 14px;
	line-height: 1.6;
}

/* Basis-Styles für Formular-Plugins im Theme-Look */
.yh-contact__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.yh-contact__form select,
.yh-contact__form textarea,
.yh-modal input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.yh-modal select,
.yh-modal textarea {
	width: 100%;
	padding: 16px 18px;
	border: 1px solid var(--yh-input-border);
	border-radius: 8px;
	background: var(--yh-bg);
	color: var(--yh-primary);
	font-family: var(--yh-font-body);
	font-size: 16px; /* verhindert Auto-Zoom auf iOS */
	line-height: 1.4;
}

.yh-contact__form input:focus,
.yh-contact__form select:focus,
.yh-contact__form textarea:focus,
.yh-modal input:focus,
.yh-modal select:focus,
.yh-modal textarea:focus {
	outline: none;
	border-color: var(--yh-accent-hover);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yh-accent) 40%, transparent);
}

.yh-contact__form [type="submit"],
.yh-modal [type="submit"] {
	padding: 16px 36px;
	border: 0;
	border-radius: var(--yh-br);
	background: var(--yh-primary);
	color: var(--yh-on-dark);
	font-family: var(--yh-font-body);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ==========================================================================
   10b. Pop-ups (<dialog>)
   Mobil: Bottom-Sheet über die volle Breite · ab 860 px: zentrierte Box
   ========================================================================== */

html.yh-modal-open {
	overflow: hidden;
}

.yh-modal {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--yh-text);
	overflow: hidden;
}

.yh-modal:not([open]) {
	display: none;
}

.yh-modal[open] {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.yh-modal::backdrop {
	background: rgba(30, 36, 27, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .25s ease;
}

.yh-modal.is-open::backdrop {
	opacity: 1;
}

.yh-modal__box {
	position: relative;
	width: 100%;
	max-height: calc(100% - 48px);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--yh-bg);
	border-radius: var(--yh-r) var(--yh-r) 0 0;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
	transform: translateY(40px);
	opacity: 0;
	transition: transform .3s var(--yh-ease), opacity .25s ease;
	-webkit-overflow-scrolling: touch;
}

.yh-modal.is-open .yh-modal__box {
	transform: none;
	opacity: 1;
}

.yh-modal__close {
	position: sticky;
	top: 12px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 12px 12px -56px auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--yh-bg) 88%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--yh-primary);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	transition: background-color .2s ease, transform .2s ease;
}

.yh-modal__close:hover {
	background: var(--yh-accent);
	transform: rotate(90deg);
}

.yh-modal__close svg {
	width: 22px;
	height: 22px;
}

.yh-modal__media img {
	display: block;
	width: 100%;
	height: clamp(200px, 42vw, 360px);
	object-fit: cover;
}

.yh-modal__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
}

.yh-modal__title {
	padding-right: 48px;
	font-family: var(--yh-font-heading);
	font-size: clamp(26px, calc(26px + 8 * var(--yh-fluid)), 34px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--yh-primary);
	overflow-wrap: break-word;
	hyphens: auto;
}

.yh-modal__media + .yh-modal__body .yh-modal__title {
	padding-right: 0;
}

.yh-modal__facts {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 20px;
	border-left: 2px solid var(--yh-accent);
	border-radius: 0 8px 8px 0;
	background: var(--yh-bg-alt);
	font-size: 14px;
	letter-spacing: .04em;
	color: var(--yh-primary);
}

.yh-modal .yh-entry {
	font-size: 16px;
}

.yh-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

/* Termin-Übersicht [yh_termine] */
.yh-termine h3 {
	margin: 1.4em 0 .6em;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--yh-muted);
}

.yh-termine h3:first-child {
	margin-top: 0;
}

.yh-termine__list {
	margin: 0;
	padding: 0 !important;
	list-style: none;
	border-top: 1px solid var(--yh-border);
}

.yh-termine__list li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 !important;
	padding: 14px 0;
	border-bottom: 1px solid var(--yh-border);
	font-size: 15px;
}

.yh-termine__list a {
	color: var(--yh-primary);
	text-decoration: none;
}

.yh-termine__list a:hover {
	color: var(--yh-accent-hover);
}

.yh-termine__note {
	font-size: 13px;
	color: var(--yh-muted);
}

@media (min-width: 600px) {
	.yh-termine__list li {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		gap: 4px 24px;
	}

	.yh-termine__note {
		grid-column: 2;
	}
}

@media (min-width: 860px) {
	.yh-modal[open] {
		align-items: center;
		padding: 40px 24px;
	}

	.yh-modal__box {
		max-width: calc(var(--yh-modal-w) * 1px);
		max-height: 100%;
		border-radius: var(--yh-r);
		box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
		transform: translateY(16px) scale(.98);
	}

	.yh-modal__body {
		padding: 44px 48px 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yh-modal__box,
	.yh-modal::backdrop {
		transition: none;
	}
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.yh-footer {
	--c-link: var(--yh-on-dark-muted);
	--c-link-hover: var(--yh-accent);
	background: var(--yh-primary);
	color: var(--yh-on-dark-muted);
}

.yh-footer__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px var(--yh-gutter) 26px;
}

.yh-footer__icon {
	display: block;
	align-self: center;
}

.yh-footer__icon img {
	display: block;
	width: auto;
	height: calc(var(--yh-footer-icon) * 1px);
}

.yh-footer__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.yh-footer__copy {
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--yh-muted);
	text-align: center;
}

.yh-footer__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 28px;
}

.yh-footer__menu,
.yh-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yh-footer__menu a {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.yh-social {
	gap: 8px;
}

.yh-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	text-decoration: none;
}

.yh-social svg {
	width: 18px;
	height: 18px;
}

.yh-credit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	background: var(--yh-primary-dark);
	line-height: 1;
}

.yh-credit a {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	color: var(--yh-muted);
	text-decoration: none;
}

.yh-credit img {
	display: block;
	height: 18px;
	width: auto;
	opacity: .75;
	transition: opacity .2s ease;
}

.yh-credit a:hover img {
	opacity: 1;
}

@media (min-width: 860px) {
	.yh-footer__icon {
		align-self: flex-start;
	}

	.yh-footer__row {
		flex-direction: row;
	}

	.yh-footer__copy {
		text-align: left;
	}
}

/* ==========================================================================
   12. Fallback-Unterseiten (direkter Aufruf von Impressum & Co.)
   ========================================================================== */

.yh-page-hero {
	padding: calc(var(--yh-header-top) + var(--yh-header-h) + 72px) var(--yh-gutter) 56px;
	background: var(--yh-primary);
	color: var(--c-text);
}

.yh-page-hero .yh-container {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 860px;
}

.yh-page-hero h1 {
	font-family: var(--yh-font-heading);
	font-size: clamp(calc(var(--yh-h2-m) * 1px), calc(var(--yh-h2-m) * 1px + (var(--yh-h2-d) - var(--yh-h2-m)) * var(--yh-fluid)), calc(var(--yh-h2-d) * 1.15px));
	font-weight: 500;
	line-height: 1.15;
	color: var(--c-heading);
	overflow-wrap: break-word;
	hyphens: auto;
}

.yh-page-hero__meta {
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--c-muted);
}

.yh-page {
	padding: clamp(48px, calc(48px + 32 * var(--yh-fluid)), 80px) var(--yh-gutter);
}

.yh-page > .yh-container {
	max-width: 860px;
}




.yh-back {
	display: inline-block;
	margin-top: 40px;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Inhalte aus dem Block-Editor */
.yh-entry {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--yh-text);
}

.yh-entry > * + * {
	margin-top: 1.2em;
}

.yh-entry h2,
.yh-entry h3,
.yh-entry h4 {
	margin-top: 1.8em;
	font-family: var(--yh-font-heading);
	line-height: 1.25;
	color: var(--yh-primary);
}

.yh-entry h2 { font-size: 1.6em; }
.yh-entry h3 { font-size: 1.3em; }
.yh-entry h4 { font-size: 1.1em; }

.yh-entry strong {
	font-weight: 500;
}

.yh-entry ul,
.yh-entry ol {
	padding-left: 1.3em;
}

.yh-entry li + li {
	margin-top: .35em;
}

.yh-entry blockquote {
	margin-inline: 0;
	padding-left: 20px;
	border-left: 2px solid var(--yh-accent);
	font-family: var(--yh-font-quote);
	font-size: 1.3em;
	font-style: italic;
	color: var(--yh-primary);
}

.yh-entry img {
	border-radius: var(--yh-r);
}

.yh-entry .wp-block-button__link {
	border-radius: var(--yh-br);
	background: var(--yh-primary);
	color: var(--yh-on-dark);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}

.yh-entry .alignwide,
.yh-entry .alignfull {
	max-width: none;
}

.yh-section--content .yh-entry {
	max-width: 860px;
	margin-inline: auto;
}

/* Blog-/Archiv-Liste (Fallback index.php) */
.yh-list {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yh-list h2 {
	font-family: var(--yh-font-heading);
	font-size: 24px;
}

.yh-list h2 a {
	text-decoration: none;
}

/* ==========================================================================
   13. Druck
   ========================================================================== */

@media print {
	.yh-header,
	.yh-menu,
	.yh-credit,
	.yh-modal__close {
		display: none !important;
	}

	.yh-section--hero {
		height: auto;
		min-height: 0;
		padding: 40px 0;
	}
}