/**
 * Gemeinsame Layout-Primitives.
 *
 * Content-Breite:
 * - .wolff-content-width
 *
 * Seitenrand + Zentrierung:
 * - --wolff-page-gutter steuert den Abstand zum Viewport-Rand (responsiv)
 * - .wolff-shell = max-width + zentriert + immer mindestens gutter links/rechts
 *
 * Split (2 Spalten):
 * - .wolff-split auf dem Grid
 * - optional mit .wolff-shell kombinieren (Text-Widgets)
 * - ohne .wolff-shell für Full-Bleed/Media (Sticky etc.)
 */

:root {
	/* =============================
	 * Layout / Container
	 * ============================= */
	--wolff-content-max-width: 1400px;

	--wolff-content-min-height: 450px;
	--wolff-content-compact-height: 680px;
	--wolff-content-max-height: 1080px;
	--wolff-content-full-height: 100vh;

	--wolff-content-narrow: 800px;
	
	--wolff-content-width-with-padding: 1480px;

	/* =============================
	 * Page gutter (Seitenrand)
	 * Ein Wert → viele Widgets. Responsive Overrides unten.
	 * ============================= */
	--wolff-page-gutter: 100px;

	/* =============================
	 * Split layout (2 Spalten, shared)
	 * Nutzung: Klasse .wolff-split auf dem Grid-Container
	 * ============================= */
	--wolff-split-max-width: 1400px;
	--wolff-split-columns: minmax(0, 1fr) minmax(0, 1fr);
	--wolff-split-gap: 65px;
	--wolff-split-gap-tablet: 30px;
	--wolff-split-content-padding-right: 28px;
	

	/* =============================
	 * Spacing Tokens (konsolidiert & wartbar)
	 * ============================= */
	--wolff-space-20: 20px;
	--wolff-space-25: 25px;
	--wolff-space-35: 35px;
	--wolff-space-40: 40px;
	--wolff-space-50: 50px;
	--wolff-space-60: 60px;
	--wolff-space-140: 140px;

	--wolff-image-size: 64px;
	
	/* =============================
	 * Abstände
	 * ============================= */
	--wolff-widget-padding-x-desktop-large: var(--wolff-space-140);
	--wolff-widget-padding-x-desktop: var(--wolff-page-gutter);
	--wolff-widget-padding-y-desktop: var(--wolff-space-60);

	--wolff-widget-padding-x-tablet: var(--wolff-page-gutter);
	--wolff-widget-padding-y-tablet: var(--wolff-space-60);

	--wolff-widget-padding-x-mobile: var(--wolff-page-gutter);
	--wolff-widget-padding-y-mobile: var(--wolff-space-40);

	--wolff-widget-gap-desktop: var(--wolff-space-50);
	--wolff-widget-gap-mobile: var(--wolff-space-35);

	/* =============================
	 * Schriftgrößen
	 * ============================= */
	/* Body Bold */
	--oym-body-bold-font-family: var(--e-global-typography-95eea70-font-family), Sans-serif;
	--oym-body-bold-font-size: var(--e-global-typography-95eea70-font-size);
	--oym-body-bold-font-weight: var(--e-global-typography-95eea70-font-weight);
	--oym-body-bold-line-height: var(--e-global-typography-95eea70-line-height);

	/* Body Light */
	--oym-body-light-font-family: var(--e-global-typography-372eb44-font-family), Sans-serif;
	--oym-body-light-font-size: var(--e-global-typography-372eb44-font-size);
	--oym-body-light-font-weight: var(--e-global-typography-372eb44-font-weight);
	--oym-body-light-line-height: var(--e-global-typography-372eb44-line-height);

	/* Lead */
	--oym-lead-font-family: var(--e-global-typography-f665587-font-family);
	--oym-lead-font-size: var(--e-global-typography-f665587-font-size);
	--oym-lead-font-weight: var(--e-global-typography-f665587-font-weight);
	--oym-lead-line-height: var(--e-global-typography-f665587-line-height);

	/* Navi Links */
	--oym-navi-links-font-family: var(--e-global-typography-2e8150e-font-family), Sans-serif;
	--oym-navi-links-font-size: var(--e-global-typography-2e8150e-font-size);
	--oym-navi-links-font-weight: var(--e-global-typography-2e8150e-font-weight);
	--oym-navi-links-line-height: var(--e-global-typography-2e8150e-line-height);
	 
	/* =============================
	 * Spacing Tokens (konsolidiert & wartbar)
	 * ============================= */
	--wolff-space-xs: 2px;
	--wolff-space-sm: 8px;
	--wolff-space-md: 16px;
	--wolff-space-lg: 24px;
	--wolff-space-xl: 32px;

	/* Alias: Mobile-Rand folgt dem globalen Gutter */
	--wolff-space-mobile-edge: var(--wolff-page-gutter);

	/* Größere Abstände (typische Sektionen / Grobgitter) */
	--wolff-space-xxl: 48px;
	--wolff-space-xxxl: 80px;
	--wolff-space-4xl: 100px;
	--wolff-space-5xl: 120px;
	--wolff-space-6xl: 140px;
	--wolff-space-7xl: 200px;
}

@media (max-width: 1024px) {
	:root {
		/* Tablet: mehr Abstand zum Seitenrand */
		--wolff-page-gutter: 50px;
	}
}

@media (max-width: 767px) {
	:root {
		/* Mobile: weiterhin großzügig */
		--wolff-page-gutter: 40px;
	}
}

/* =============================
 * Klassen für globale Schriften
 * ============================= */
.font-oym-lead {
	font-family: var(--e-global-typography-f665587-font-family), Sans-serif;
    font-size: var(--e-global-typography-f665587-font-size);
    line-height: var(--e-global-typography-f665587-line-height);
}

.font-oym-body-bold {
	font-family: var(--e-global-typography-95eea70-font-family), Sans-serif;
	font-size: var(--e-global-typography-95eea70-font-size);
	font-weight: var(--e-global-typography-95eea70-font-weight);
	line-height: var(--e-global-typography-95eea70-line-height);
	letter-spacing: var(--e-global-typography-95eea70-letter-spacing);
	text-transform: var(--e-global-typography-95eea70-text-transform);
}

.font-oym-body-light {
	font-family: var(--e-global-typography-372eb44-font-family), Sans-serif;
	font-size: var(--e-global-typography-372eb44-font-size);
	font-weight: var(--e-global-typography-372eb44-font-weight);
	line-height: var(--e-global-typography-372eb44-line-height);
	letter-spacing: var(--e-global-typography-372eb44-letter-spacing);
	text-transform: var(--e-global-typography-372eb44-text-transform);
}

.font-oym-links {
	font-family: var(--e-global-typography-2e8150e-font-family), Sans-serif;
    font-size: var(--e-global-typography-2e8150e-font-size);
    font-weight: var(--e-global-typography-2e8150e-font-weight);
    line-height: var(--e-global-typography-2e8150e-line-height);
}

.font-oym-navi-label-footer {
	font-family: var(--e-global-typography-bfc0d9b-font-family), Sans-serif;
    font-size: var(--e-global-typography-bfc0d9b-font-size);
    font-weight: var(--e-global-typography-bfc0d9b-font-weight);
    line-height: var(--e-global-typography-bfc0d9b-line-height);
}

.font-oym-akkordeon-titel {
    font-family: var(--e-global-typography-cfd84c5-font-family), Sans-serif;
    font-size: var(--e-global-typography-cfd84c5-font-size);
    font-weight: var(--e-global-typography-cfd84c5-font-weight);
    line-height: var(--e-global-typography-cfd84c5-line-height);
}

.font-oym-akkordeon-text {
	font-family: var(--e-global-typography-8ae39fc-font-family), Sans-serif;
    font-size: var(--e-global-typography-8ae39fc-font-size);
    font-weight: var(--e-global-typography-8ae39fc-font-weight);
    line-height: var(--e-global-typography-8ae39fc-line-height);
}

.wolff-button {
	background: #000;
	border: none;
	border-radius: 0;
	color: #fff;
	display: inline-flex;
	font-family: 'Brown Pro';
	font-size: 30px;
	padding: 10px 30px;
	line-height: inherit;
	text-align: inherit;
	transition: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.wolff-button:hover,
.wolff-button:focus,
.wolff-button:focus-visible,
button[type="button"].wolff-button:hover,
button[type="button"].wolff-button:focus,
button[type="button"].wolff-button:focus-visible {
	background: #B2B2B2 !important;
	background-color: #B2B2B2 !important;
}

.wolff-nav-arrow {
	background: none;
	height: 50px;
	width: 25px;
}

.wolff-nav-arrow:hover,
.wolff-nav-arrow:focus {
	background: none;
}

.wolff-content-width {
	width: 100%;
	max-width: var(--wolff-content-width-with-padding);
	margin-inline: auto;
	box-sizing: border-box;
}

/*
 * Zentrierter Content mit garantiertem Seitenrand.
 * Breite = min(Viewport - 2×Gutter, Max-Width), weiterhin margin-inline: auto.
 * Optional: --wolff-shell-max-width am Element überschreiben.
 */
.wolff-shell {
	width: min(
		100% - (2 * var(--wolff-page-gutter)),
		var(--wolff-shell-max-width, var(--wolff-split-max-width))
	);
	margin-inline: auto;
	box-sizing: border-box;
}

/* Gemeinsames 2-Spalten-Grid (ohne Gutter – für Bleed/Sticky) */
.wolff-split {
	display: grid;
	grid-template-columns: var(--wolff-split-columns);
	column-gap: var(--wolff-split-gap);
	width: 100%;
	max-width: var(--wolff-split-max-width);
	margin-inline: auto;
	box-sizing: border-box;
}

/* Shell + Split auf demselben Element: Gutter + Grid */
.wolff-shell.wolff-split {
	width: min(
		100% - (2 * var(--wolff-page-gutter)),
		var(--wolff-shell-max-width, var(--wolff-split-max-width))
	);
	max-width: none;
}

.wolff-split__content {
	padding-right: var(--wolff-split-content-padding-right);
}

/* In Shell-Layouts reicht der Gutter – kein Extra-Padding rechts */
.wolff-shell .wolff-split__content,
.wolff-shell.wolff-split .wolff-split__content {
	padding-right: 0;
}

@media (max-width: 1024px) {
	.wolff-split {
		column-gap: var(--wolff-split-gap-tablet);
	}
}

@media (max-width: 999px) {
	.wolff-split {
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	.wolff-split__content {
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	.wolff-content-width--full-mobile {
		max-width: 100%;
	}
}