/*
Theme Name: Steffen Liebener Child
Theme URI: https://liebener-coaching.de/
Description: Child Theme für GeneratePress
Author: René
Version: 1.0.2
Template: generatepress
Text Domain: steffen-liebener-child
*/

/* =========================================================
   TOKENS
========================================================= */

:root {
	--sl-color-bg: #ffffff;
	--sl-color-surface: #ffffff;
	--sl-color-text: #232323;
	--sl-color-text-soft: #4d4d4d;
	--sl-color-border: rgba(35, 35, 35, 0.12);

	--sl-color-green-light: #ACCE51;
	--sl-color-green-dark: #60CD13;

	--sl-gradient-primary: linear-gradient(135deg, #ACCE51 0%, #60CD13 100%);
	--sl-gradient-primary-hover: linear-gradient(135deg, #9dc54a 0%, #56ba12 100%);

	--sl-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sl-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--sl-radius-sm: 0.375rem;   /* 6px */
	--sl-radius-md: 0.375rem;   /* 6px */
	--sl-radius-lg: 0.75rem;

	--sl-shadow-soft: 0 0.375rem 1rem rgba(0, 0, 0, 0.08);
	--sl-shadow-input: 0 0.1875rem 0.75rem rgba(0, 0, 0, 0.05);
	--sl-shadow-hover: 0 0.5rem 1.25rem rgba(96, 205, 19, 0.18);

	--sl-transition-fast: 180ms ease;
	--sl-transition: 280ms ease;

	--sl-container-width: 86rem;
}

/* =========================================================
   RESET / BASE
========================================================= */

html {
	font-size: 100%;
	scroll-behavior: auto;
}

body {
	margin: 0;
	background: var(--sl-color-bg);
	color: var(--sl-color-text);
	font-family: var(--sl-font-body);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

body,
button,
input,
select,
textarea {
	font-family: var(--sl-font-body);
}

.site,
.site-content,
.content-area,
.site-main,
.inside-article,
.separate-containers .inside-article,
.one-container .site-content,
.separate-containers .comments-area,
.separate-containers .page-header,
.widget,
.sidebar .widget {
	background: var(--sl-color-bg);
	color: var(--sl-color-text);
}

.grid-container,
.inside-header,
.inside-navigation,
.inside-site-info,
.footer-widgets-container {
	max-width: var(--sl-container-width);
}

/*img,
.wp-block-image img,
figure img,
.wp-post-image {
	max-width: 100%;
	height: auto;
	border-radius: var(--sl-radius-sm);
	box-shadow: var(--sl-shadow-soft);
}
*/
figure {
	margin: 0 0 1.5rem;
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 0.0625rem solid rgba(35, 35, 35, 0.1);
	margin: 2rem 0;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

body,
p,
span,
li,
input,
textarea,
select,
button,
a,
label,
td,
th {
	font-size: 1rem;
	line-height: 1.65;
}

p,
.entry-content p,
.widget p,
.site-main p {
	margin: 0 0 1rem;
	color: var(--sl-color-text-soft);
}

span {
	color: inherit;
}

small {
	font-size: 0.875rem;
	line-height: 1.5;
}

strong,
b {
	color: var(--sl-color-text);
	font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.widget-title,
.site-title {
	margin: 0 0 0.85rem;
	font-family: var(--sl-font-heading);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

h1,
.entry-content h1 {
	font-size: clamp(2rem, 1.55rem + 2vw, 3.2rem);
	font-weight: 800;
	background: var(--sl-gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

h2,
.entry-content h2 {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 700;
	background: var(--sl-gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

h3,
.entry-content h3 {
	font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	font-weight: 700;
	color: var(--sl-color-text);
}

h4,
.entry-content h4 {
	font-size: clamp(1.1875rem, 1.08rem + 0.35vw, 1.375rem);
	font-weight: 700;
	color: var(--sl-color-text);
}

h5,
.entry-content h5 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--sl-color-text);
}

h6,
.entry-content h6 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--sl-color-text);
}

.site-title,
.site-title a {
	font-size: clamp(1.5rem, 1.3rem + 0.4vw, 1.75rem);
	font-weight: 800;
	color: var(--sl-color-text);
	text-decoration: none;
}

/* =========================================================
   LINKS
========================================================= */

a,
.entry-content a,
.widget a,
.site-footer a,
.main-navigation a,
.main-title a,
.entry-meta a,
.site-info a {
	color: var(--sl-color-green-light);
	text-decoration: none;
	transition:
		color var(--sl-transition),
		opacity var(--sl-transition),
		border-color var(--sl-transition),
		background-color var(--sl-transition);
}

a:hover,
a:focus,
.entry-content a:hover,
.entry-content a:focus,
.widget a:hover,
.widget a:focus,
.site-footer a:hover,
.site-footer a:focus,
.main-navigation a:hover,
.main-navigation a:focus,
.main-title a:hover,
.main-title a:focus,
.entry-meta a:hover,
.entry-meta a:focus,
.site-info a:hover,
.site-info a:focus {
	color: var(--sl-color-green-dark);
}

.entry-content a:not(.wp-block-button__link):not(.button):not(.gb-button):not(.wp-element-button):not(.read-more):not(.more-link) {
	text-decoration: underline;
	text-decoration-thickness: 0.0625rem;
	text-underline-offset: 0.12em;
}

/* =========================================================
   BUTTONS
========================================================= */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
a.button,
.wp-block-button__link,
.gb-button,
.wp-element-button,
.search-submit,
.generate-back-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.75rem 1.35rem;
	border: 0.0625rem solid rgba(0, 0, 0, 0.05);
	border-radius: var(--sl-radius-sm);
	background: var(--sl-gradient-primary);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: var(--sl-shadow-soft);
	cursor: pointer;
	appearance: none;
	transition:
		transform var(--sl-transition),
		box-shadow var(--sl-transition),
		background var(--sl-transition),
		filter var(--sl-transition),
		color var(--sl-transition);
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.button:hover,
.button:focus,
a.button:hover,
a.button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.gb-button:hover,
.gb-button:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.search-submit:hover,
.search-submit:focus,
.generate-back-to-top:hover,
.generate-back-to-top:focus {
	background: var(--sl-gradient-primary-hover);
	color: #ffffff;
	transform: translateY(-0.125rem);
	box-shadow: var(--sl-shadow-hover);
	filter: saturate(1.03);
}

button:active,
input[type="submit"]:active,
.button:active,
.wp-block-button__link:active,
.gb-button:active,
.wp-element-button:active {
	transform: translateY(0);
}

/* =========================================================
   INPUTS / FORMS
========================================================= */

label {
	display: inline-block;
	margin-bottom: 0.35rem;
	color: var(--sl-color-text);
	font-size: 0.95rem;
	font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
textarea,
select,
.search-field,
.wp-block-search__input {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.75rem 0.9rem;
	border: 0.0625rem solid var(--sl-color-border);
	border-radius: var(--sl-radius-sm);
	background: #ffffff;
	color: var(--sl-color-text);
	font-size: 1rem;
	line-height: 1.45;
	box-shadow: var(--sl-shadow-input);
	appearance: none;
	transition:
		border-color var(--sl-transition-fast),
		box-shadow var(--sl-transition-fast),
		background-color var(--sl-transition-fast);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: #7b7b7b;
	opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
.search-field:focus,
.wp-block-search__input:focus {
	outline: none;
	border-color: rgba(96, 205, 19, 0.45);
	box-shadow: 0 0 0 0.2rem rgba(172, 206, 81, 0.18);
	background: #ffffff;
}

/* =========================================================
   LISTS
========================================================= */

ul,
ol,
.entry-content ul,
.entry-content ol,
.widget ul,
.widget ol {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

ul li,
ol li,
.entry-content ul li,
.entry-content ol li,
.widget ul li,
.widget ol li {
	position: relative;
	margin: 0 0 0.65rem;
	padding-left: 1.25rem;
	color: var(--sl-color-text-soft);
}
/*
ul li::before,
ol li::before,
.entry-content ul li::before,
.entry-content ol li::before,
.widget ul li::before,
.widget ol li::before {
	content: "›";
	position: absolute;
	left: 0;
	top: 0.02em;
	color: var(--sl-color-green-dark);
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1;
}
*/
/* =========================================================
   TABLES
========================================================= */

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: 1rem;
}

th,
td {
	padding: 0.9rem 1rem;
	border: 0.0625rem solid rgba(35, 35, 35, 0.1);
	text-align: left;
}

th {
	color: var(--sl-color-text);
	background: rgba(172, 206, 81, 0.12);
}

/* =========================================================
   WORDPRESS / GUTENBERG
========================================================= */

.wp-block-group,
.wp-block-columns,
.wp-block-cover,
.wp-block-media-text,
.wp-block-pullquote,
.wp-block-image,
.wp-block-gallery,
.gb-container {
	border-radius: var(--sl-radius-sm);
}

.wp-block-button__link {
	border-radius: var(--sl-radius-sm);
}

.wp-block-search__button {
	margin-left: 0.5rem;
}

blockquote,
.wp-block-quote {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 0.25rem solid var(--sl-color-green-dark);
	background: rgba(172, 206, 81, 0.06);
	border-radius: var(--sl-radius-sm);
}

.wp-caption,
.gallery-caption {
	font-size: 0.875rem;
	color: var(--sl-color-text-soft);
}

/* =========================================================
   GENERATEPRESS LAYOUT
========================================================= */

.inside-article,
.separate-containers .inside-article,
.one-container .site-content,
.widget,
.sidebar .widget,
.footer-widgets .widget,
.comments-area {
	border-radius: var(--sl-radius-sm);
}

.widget {
	margin-bottom: 1.5rem;
}

.widget-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sl-color-text);
}

.entry-title a {
	color: var(--sl-color-text);
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--sl-color-green-dark);
}

.entry-meta,
.entry-meta a,
.posted-on,
.byline,
.read-more,
.more-link {
	font-size: 0.95rem;
}

.read-more,
.more-link {
	color: var(--sl-color-green-light);
	font-weight: 600;
}

.read-more:hover,
.more-link:hover {
	color: var(--sl-color-green-dark);
}

/* =========================================================
   HEADER / NAVIGATION
========================================================= */

.site-header {
	background: #ffffff;
	border-bottom: 0.0625rem solid rgba(35, 35, 35, 0.08);
}

.main-navigation,
#site-navigation,
.main-nav,
.main-navigation ul,
.main-navigation ul li {
	background: transparent;
}

.main-navigation .main-nav ul {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.main-navigation .main-nav ul li > a {
	padding: 0.85rem 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--sl-color-green-light);
	background: transparent;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
	color: var(--sl-color-green-dark);
	background: transparent;
}

.main-navigation .sub-menu {
	background: #ffffff;
	border: 0.0625rem solid rgba(35, 35, 35, 0.08);
	border-radius: var(--sl-radius-sm);
	box-shadow: var(--sl-shadow-soft);
}

.main-navigation .sub-menu li a {
	padding: 0.8rem 1rem;
}

/* Desktop Toggle aus */
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items,
.main-navigation .slideout-toggle,
button.menu-toggle {
	display: none;
}

/* =========================================================
   FOOTER
   Full-Bleed Hintergrund, Inhalt bleibt im Container
========================================================= */

.site-footer {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	background:
		linear-gradient(
			90deg,
			rgba(37,43,49,0.94),
			rgba(37,43,49,0.72)
		),
		url("/wp-content/uploads/Hero-scaled.webp") center / cover no-repeat !important;
	color: #ffffff !important;
}

/*
 * GeneratePress legt den Widgetbereich selbst wieder als
 * begrenzten .site-/grid-container an. Der Hintergrund gehört
 * aber über die volle Breite. Deshalb wird nur die äußere
 * Widgetfläche entgrenzt, der Inhalt bleibt zentriert.
 */
.site-footer .footer-widgets {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	background: transparent !important;
	color: #ffffff !important;
}

.site-footer .footer-widgets-container {
	width: min(100% - 2rem, var(--sl-container-width)) !important;
	max-width: var(--sl-container-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	background: transparent !important;
	color: #ffffff !important;
}

.site-footer .inside-footer-widgets {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.footer-widgets .widget,
.footer-widgets .footer-widget-1,
.footer-widgets .footer-widget-2,
.footer-widgets .footer-widget-3 {
	background: transparent !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

.site-footer .widget-title,
.footer-widgets .widget-title,
.site-footer p,
.site-footer span,
.site-footer li,
.site-footer strong,
.site-footer b,
.footer-widgets p,
.footer-widgets span,
.footer-widgets li,
.footer-widgets strong,
.footer-widgets b {
	color: #ffffff !important;
}

.site-footer a,
.footer-widgets a {
	color: #ffffff !important;
	text-decoration: none !important;
}

.site-footer a:hover,
.site-footer a:focus,
.footer-widgets a:hover,
.footer-widgets a:focus {
	color: #ffffff !important;
	opacity: 0.78;
}

/* Copyright-Leiste wie im aktuellen sichtbaren Freeze */
.site-info {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	background: var(--sl-color-green-light, #ACCE51) !important;
	color: #ffffff !important;
	border-top: 0 !important;
}

.inside-site-info {
	width: min(100% - 2rem, var(--sl-container-width)) !important;
	max-width: var(--sl-container-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	background: transparent !important;
	color: #ffffff !important;
	font-size: 0.95rem;
	border-top: 0 !important;
}

.site-info,
.site-info p,
.site-info span,
.inside-site-info,
.inside-site-info p,
.inside-site-info span,
.site-info a,
.inside-site-info a {
	color: #ffffff !important;
}

.site-info a:hover,
.site-info a:focus,
.inside-site-info a:hover,
.inside-site-info a:focus {
	color: #ffffff !important;
	opacity: 0.78;
}


/* =========================================================
   REVEAL STATES
========================================================= */

.sl-reveal {
	opacity: 0;
	transform: translateY(1rem);
	transition:
		opacity 620ms ease,
		transform 620ms ease;
	transition-delay: var(--sl-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.sl-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 64rem) {
	body,
	p,
	span,
	li,
	input,
	textarea,
	select,
	button,
	a,
	label,
	td,
	th {
		font-size: 0.975rem;
	}

	.main-navigation .main-nav ul {
		gap: 0.9rem;
	}

	.main-navigation .main-nav ul li > a {
		font-size: 0.96rem;
	}
}

@media (max-width: 48rem) {
	body,
	p,
	span,
	li,
	input,
	textarea,
	select,
	button,
	a,
	label,
	td,
	th {
		font-size: 0.95rem;
	}

	h1,
	.entry-content h1 {
		font-size: clamp(1.85rem, 7vw, 2.45rem);
	}

	h2,
	.entry-content h2 {
		font-size: clamp(1.55rem, 5.6vw, 2rem);
	}

	h3,
	.entry-content h3 {
		font-size: 1.3125rem;
	}

	h4,
	.entry-content h4 {
		font-size: 1.125rem;
	}

	.main-navigation .menu-toggle,
	.main-navigation .mobile-bar-items,
	.main-navigation .slideout-toggle,
	button.menu-toggle {
		display: inline-flex;
	}

	.main-navigation .main-nav {
		display: none;
	}
}


/* =========================================================
   OVERLAY MENU – UNTERMENÜS
   FINAL
   Bestehendes Hauptmenü bleibt gestalterisch unverändert.
========================================================= */


/* ---------------------------------------------------------
   TOP-LEVEL MENÜPUNKT MIT UNTERMENÜ

   3 Spalten sorgen dafür:
   - Hauptlink bleibt exakt mittig
   - Toggle sitzt rechts daneben
   - Toggle beeinflusst die Zentrierung des Textes nicht

   Zeile 1 = Hauptlink + Toggle
   Zeile 2 = Untermenü
--------------------------------------------------------- */

.sl-overlay-menu__list > .menu-item-has-children {
	position: relative;

	display: grid !important;
	grid-template-columns:
		minmax(0, 1fr)
		max-content
		minmax(0, 1fr);
	grid-template-rows: auto auto;

	align-items: center;

	width: 100%;

	overflow: visible;
}


/* Hauptlink bleibt exakt in der Mitte */
.sl-overlay-menu__list
> .menu-item-has-children
> a {
	grid-column: 2;
	grid-row: 1;

	justify-self: center;

	position: relative;

	margin: 0 !important;

	z-index: 1;
}


/* ---------------------------------------------------------
   TOGGLE PLUS / MINUS
--------------------------------------------------------- */

.sl-overlay-menu__list
> .menu-item-has-children
> .sl-submenu-toggle {
	grid-column: 3;
	grid-row: 1;

	justify-self: start;
	align-self: center;

	position: static !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 2.35rem !important;
	height: 2.35rem !important;

	min-width: 2.35rem !important;
	min-height: 2.35rem !important;

	margin: 0 0 0 0.65rem !important;
	padding: 0 !important;

	border: 0.0625rem solid rgba(172, 206, 81, 0.42) !important;
	border-radius: 999px !important;

	background: rgba(172, 206, 81, 0.1) !important;
	background-image: none !important;

	color: var(--sl-color-green-light, #ACCE51) !important;

	box-shadow: none !important;

	cursor: pointer;

	appearance: none !important;
	-webkit-appearance: none !important;

	transform: none !important;

	transition:
		background-color var(--sl-transition),
		border-color var(--sl-transition),
		color var(--sl-transition),
		box-shadow var(--sl-transition),
		transform var(--sl-transition) !important;
}


/* Hover */
.sl-overlay-menu__list
> .menu-item-has-children
> .sl-submenu-toggle:hover,
.sl-overlay-menu__list
> .menu-item-has-children
> .sl-submenu-toggle:focus {
	background: rgba(172, 206, 81, 0.2) !important;
	background-image: none !important;

	border-color: rgba(172, 206, 81, 0.72) !important;

	color: var(--sl-color-green-light, #ACCE51) !important;

	box-shadow:
		0 0 0 0.22rem rgba(172, 206, 81, 0.08) !important;

	filter: none !important;

	transform: none !important;
}


/* Klickzustand */
.sl-overlay-menu__list
> .menu-item-has-children
> .sl-submenu-toggle:active {
	background: rgba(172, 206, 81, 0.26) !important;

	box-shadow: none !important;

	transform: none !important;
}


/* Tastaturfokus */
.sl-overlay-menu__list
> .menu-item-has-children
> .sl-submenu-toggle:focus-visible {
	outline: 0.125rem solid var(--sl-color-green-light, #ACCE51);
	outline-offset: 0.18rem;
}


/* ---------------------------------------------------------
   PLUS / MINUS SYMBOL
--------------------------------------------------------- */

.sl-overlay-menu .sl-submenu-toggle > span {
	position: relative;

	display: block !important;

	width: 1rem;
	height: 1rem;

	margin: 0 !important;
	padding: 0 !important;

	color: inherit;
}


/* Beide Linien */
.sl-overlay-menu .sl-submenu-toggle > span::before,
.sl-overlay-menu .sl-submenu-toggle > span::after {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	display: block;

	width: 1rem;
	height: 0.125rem;

	margin: 0;
	padding: 0;

	border: 0;

	border-radius: 999px;

	background: currentColor;

	transform-origin: center;

	transition:
		opacity var(--sl-transition),
		transform var(--sl-transition);
}


/* Waagerechte Linie */
.sl-overlay-menu .sl-submenu-toggle > span::before {
	transform:
		translate(-50%, -50%)
		rotate(0deg);
}


/* Senkrechte Linie */
.sl-overlay-menu .sl-submenu-toggle > span::after {
	transform:
		translate(-50%, -50%)
		rotate(90deg);
}


/* geöffnet = Minus */
.sl-overlay-menu
.menu-item-has-children.is-submenu-open
> .sl-submenu-toggle
> span::after {
	opacity: 0;

	transform:
		translate(-50%, -50%)
		rotate(90deg)
		scaleX(0);
}


/* Geöffneter Toggle etwas deutlicher */
.sl-overlay-menu__list
> .menu-item-has-children.is-submenu-open
> .sl-submenu-toggle {
	background: rgba(172, 206, 81, 0.18) !important;

	border-color: rgba(172, 206, 81, 0.62) !important;

	color: var(--sl-color-green-light, #ACCE51) !important;
}


/* ---------------------------------------------------------
   UNTERMENÜ

   Wichtig:
   Kein Grid-Row-Trick mehr auf dem UL.
   Ein UL hat mehrere LI-Kinder, daher ist max-height hier
   technisch stabiler für eine beliebige Anzahl Einträge.
--------------------------------------------------------- */

.sl-overlay-menu__list
> .menu-item-has-children
> .sub-menu {
	grid-column: 1 / -1;
	grid-row: 2;

	position: static !important;

	display: block !important;

	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;

	max-height: 0;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;
	background-image: none !important;

	box-shadow: none !important;

	opacity: 0;
	visibility: hidden;

	transform: translateY(-0.3rem);

	transition:
		max-height 460ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 260ms ease,
		transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 460ms !important;
}


/* geöffnet */
.sl-overlay-menu__list
> .menu-item-has-children.is-submenu-open
> .sub-menu {
	max-height: 50rem;

	padding: 0.65rem 0 0.4rem !important;

	opacity: 1;
	visibility: visible;

	transform: translateY(0);

	transition:
		max-height 560ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 300ms ease,
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s !important;
}


/* ---------------------------------------------------------
   UNTERMENÜ-EINTRÄGE
--------------------------------------------------------- */

.sl-overlay-menu .sub-menu > li {
	position: relative;

	display: block;

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;

	overflow: visible;
}


/*
 * Unterpunkte bewusst deutlich kleiner als Hauptmenü,
 * aber nicht mehr winzig.
 */
.sl-overlay-menu .sub-menu > li > a {
	display: inline-block !important;

	margin: 0 !important;
	padding: 0.25rem 0 !important;

	background: transparent !important;
	background-image: none !important;

	color: rgba(255, 255, 255, 0.78) !important;

	font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem) !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;

	letter-spacing: 0 !important;

	text-decoration: none !important;

	opacity: 1;

	transform: translateX(0);

	transition:
		color var(--sl-transition),
		opacity var(--sl-transition),
		transform var(--sl-transition) !important;
}


/* Hover Unterpunkt */
.sl-overlay-menu .sub-menu > li > a:hover,
.sl-overlay-menu .sub-menu > li > a:focus {
	background: transparent !important;

	color: var(--sl-color-green-light, #ACCE51) !important;

	opacity: 1;

	transform: translateX(0.3rem);
}


/* aktueller Unterpunkt */
.sl-overlay-menu
.sub-menu
> .current-menu-item
> a,
.sl-overlay-menu
.sub-menu
> .current-menu-parent
> a,
.sl-overlay-menu
.sub-menu
> .current-menu-ancestor
> a {
	color: var(--sl-color-green-light, #ACCE51) !important;

	font-weight: 600 !important;
}


/* etwas Luft zwischen den Unterpunkten */
.sl-overlay-menu .sub-menu > li + li {
	margin-top: 0.15rem !important;
}


/* ---------------------------------------------------------
   ZWEITE UNTERMENÜ-EBENE / TIEFER
--------------------------------------------------------- */

.sl-overlay-menu
.sub-menu
.menu-item-has-children {
	position: relative;

	display: grid !important;
	grid-template-columns: minmax(0, 1fr) max-content;
	grid-template-rows: auto auto;

	align-items: center;

	width: 100%;

	overflow: visible;
}


/* Link */
.sl-overlay-menu
.sub-menu
.menu-item-has-children
> a {
	grid-column: 1;
	grid-row: 1;

	justify-self: start;
}


/* kleiner Toggle für tiefere Ebenen */
.sl-overlay-menu
.sub-menu
.menu-item-has-children
> .sl-submenu-toggle {
	grid-column: 2;
	grid-row: 1;

	justify-self: start;
	align-self: center;

	position: static !important;

	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	width: 1.8rem !important;
	height: 1.8rem !important;

	min-width: 1.8rem !important;
	min-height: 1.8rem !important;

	margin: 0 0 0 0.45rem !important;
	padding: 0 !important;

	border: 0.0625rem solid rgba(172, 206, 81, 0.32) !important;
	border-radius: 999px !important;

	background: rgba(172, 206, 81, 0.08) !important;

	color: var(--sl-color-green-light, #ACCE51) !important;

	box-shadow: none !important;

	transform: none !important;
}


/* Submenu der nächsten Ebene */
.sl-overlay-menu
.sub-menu
.menu-item-has-children
> .sub-menu {
	grid-column: 1 / -1;
	grid-row: 2;

	position: static !important;

	display: block !important;

	width: 100% !important;

	max-height: 0;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;

	background: transparent !important;

	opacity: 0;
	visibility: hidden;

	transform: translateY(-0.2rem);

	transition:
		max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 240ms ease,
		transform 320ms ease,
		visibility 0s linear 420ms !important;
}


.sl-overlay-menu
.sub-menu
.menu-item-has-children.is-submenu-open
> .sub-menu {
	max-height: 40rem;

	padding-top: 0.35rem !important;

	opacity: 1;
	visibility: visible;

	transform: translateY(0);

	transition:
		max-height 500ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 260ms ease,
		transform 340ms ease,
		visibility 0s !important;
}


/* tiefere Links etwas einrücken */
.sl-overlay-menu
.sub-menu
.sub-menu
> li
> a {
	padding-left: 1.25rem !important;

	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem) !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 48rem) {

	.sl-overlay-menu__list
	> .menu-item-has-children
	> .sl-submenu-toggle {
		width: 2.1rem !important;
		height: 2.1rem !important;

		min-width: 2.1rem !important;
		min-height: 2.1rem !important;

		margin-left: 0.45rem !important;
	}


	.sl-overlay-menu
	.sl-submenu-toggle
	> span {
		width: 0.85rem;
		height: 0.85rem;
	}


	.sl-overlay-menu
	.sl-submenu-toggle
	> span::before,
	.sl-overlay-menu
	.sl-submenu-toggle
	> span::after {
		width: 0.85rem;
	}


	.sl-overlay-menu
	.sub-menu
	> li
	> a {
		padding: 0.22rem 0 !important;

		font-size: 1.05rem !important;
		line-height: 1.4 !important;
	}


	.sl-overlay-menu__list
	> .menu-item-has-children.is-submenu-open
	> .sub-menu {
		padding-top: 0.5rem !important;
	}
}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 24rem) {

	.sl-overlay-menu__list
	> .menu-item-has-children
	> .sl-submenu-toggle {
		width: 1.9rem !important;
		height: 1.9rem !important;

		min-width: 1.9rem !important;
		min-height: 1.9rem !important;

		margin-left: 0.3rem !important;
	}


	.sl-overlay-menu
	.sub-menu
	> li
	> a {
		font-size: 1rem !important;
	}
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sl-overlay-menu .sub-menu,
	.sl-overlay-menu .sl-submenu-toggle,
	.sl-overlay-menu .sl-submenu-toggle > span::before,
	.sl-overlay-menu .sl-submenu-toggle > span::after,
	.sl-overlay-menu .sub-menu > li > a {
		transition-duration: 1ms !important;
	}
}


/* =========================================================
   LIEBENER COACHING
   BLOG / SINGLE POST / ARCHIVE
   GENERATEPRESS + WORDPRESS / GUTENBERG

   Dieser Block betrifft ausschließlich:
   - Blogübersicht
   - Einzelbeiträge
   - Kategorien
   - Tags
   - Autorenarchive
   - Datumsarchive
   - Suchergebnisse

   Homepage, normale Seiten und Coaching-Bereiche bleiben frei.
========================================================= */


/* =========================================================
   BLOG TOKENS
========================================================= */

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) {
	--sl-blog-bg: #f8faf5;
	--sl-blog-surface: #ffffff;
	--sl-blog-text: var(--sl-color-text, #232323);
	--sl-blog-text-soft: var(--sl-color-text-soft, #4d4d4d);
	--sl-blog-green: var(--sl-color-green-light, #ACCE51);
	--sl-blog-green-dark: var(--sl-color-green-dark, #60CD13);
	--sl-blog-border: rgba(37,43,49,0.09);
	--sl-blog-border-green: rgba(172,206,81,0.34);
	--sl-blog-radius: 1rem;
	--sl-blog-radius-lg: 1.25rem;
	--sl-blog-shadow: 0 0.55rem 1.5rem rgba(0,0,0,0.055);
	--sl-blog-shadow-hover: 0 0.9rem 2rem rgba(0,0,0,0.085);
	--sl-blog-hero-image: url("/wp-content/uploads/Liebener-Coaching.png");
}


/* =========================================================
   BLOG HEADER / BILD-BÜHNE

   Der normale GeneratePress-Header wird nur im Blogbereich
   zur Bildbühne erweitert. Logo und Hamburger bleiben bestehen.
========================================================= */

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-header {
	position: relative !important;
	min-height: clamp(19rem, 31vw, 27rem) !important;
	overflow: hidden !important;
	border-bottom: 0 !important;
	background-color: #f2f5ec !important;
	background-image:
		linear-gradient(
			90deg,
			rgba(255,255,255,0.92) 0%,
			rgba(255,255,255,0.72) 34%,
			rgba(255,255,255,0.18) 66%,
			rgba(37,43,49,0.18) 100%
		),
		var(--sl-blog-hero-image) !important;
	background-size: cover !important;
	background-position: center right !important;
	background-repeat: no-repeat !important;
}

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-header::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 38% !important;
	z-index: 0 !important;
	pointer-events: none !important;
	background:
		linear-gradient(
			180deg,
			rgba(248,250,245,0) 0%,
			rgba(248,250,245,0.62) 58%,
			var(--sl-blog-bg) 100%
		) !important;
}

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .inside-header {
	position: relative !important;
	z-index: 2 !important;
	align-items: flex-start !important;
}


/* =========================================================
   BLOG LAYOUT BASIS
========================================================= */

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) {
	background: var(--sl-blog-bg) !important;
}

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site,
body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-content,
body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .content-area,
body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-main {
	background: transparent !important;
}

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-content {
	position: relative !important;
	z-index: 3 !important;
	margin-top: clamp(-5.5rem, -6vw, -3.5rem) !important;
	padding-top: 0 !important;
	padding-bottom: clamp(4rem, 7vw, 6rem) !important;
}


/* =========================================================
   ARCHIV / BLOGÜBERSICHT
   Zwei Spalten mit Sidebar, drei ohne Sidebar
========================================================= */

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-main {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 1.25rem !important;
	align-items: stretch !important;
}

body.no-sidebar:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-main {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Elemente, die über das komplette Raster gehen müssen */
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-main > :is(
	.page-header,
	.paging-navigation,
	.pagination,
	.navigation,
	.no-results
) {
	grid-column: 1 / -1 !important;
}


/* =========================================================
   ARCHIV HEADER
========================================================= */

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .page-header {
	margin: 0 0 0.25rem !important;
	padding: clamp(.5rem, 1.5vw, 1.25rem) !important;
	border: 1px solid var(--sl-blog-border-green) !important;
	border-radius: var(--sl-blog-radius-lg) !important;
	background:
		linear-gradient(
			135deg,
			rgba(172,206,81,0.16),
			rgba(96,205,19,0.045) 52%,
			rgba(255,255,255,0.96) 100%
		) !important;
	box-shadow: none !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .page-header :is(h1, .page-title) {
	margin: 0 !important;
	background: var(--sl-gradient-primary) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: var(--sl-blog-green) !important;
	font-size: clamp(2rem, 1.5rem + 1.7vw, 3rem) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.04em !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .taxonomy-description {
	max-width: 48rem !important;
	margin-top: 0.75rem !important;
	color: var(--sl-blog-text-soft) !important;
	line-height: 1.7 !important;
}


/* =========================================================
   ARCHIV KARTEN
========================================================= */

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-main > article {
	min-width: 0 !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-main > article > .inside-article {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: clamp(1.2rem, 2.2vw, 1.65rem) !important;
	overflow: hidden !important;
	border: 1px solid var(--sl-blog-border) !important;
	border-radius: var(--sl-blog-radius-lg) !important;
	background: rgba(255,255,255,0.96) !important;
	box-shadow: none !important;
	transition:
		transform 320ms cubic-bezier(0.22,1,0.36,1),
		border-color 320ms ease,
		box-shadow 320ms ease !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .site-main > article > .inside-article:hover {
	border-color: rgba(172,206,81,0.42) !important;
	transform: translateY(-0.15rem) !important;
	box-shadow: var(--sl-blog-shadow-hover) !important;
}


/* Beitragsbild */
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .post-image {
	order: -1 !important;
	width: 100% !important;
	margin: 0 0 1.15rem !important;
	overflow: hidden !important;
	border-radius: 0.85rem !important;
	background: #f3f5ef !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .post-image a {
	display: block !important;
	width: 100% !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .post-image img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover !important;
	border: 0 !important;
	border-radius: 0.85rem !important;
	box-shadow: none !important;
}


/* Titel */
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .entry-title {
	margin: 0 0 0.55rem !important;
	color: var(--sl-blog-text) !important;
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: currentColor !important;
	font-size: clamp(1.28rem, 1.08rem + 0.55vw, 1.7rem) !important;
	font-weight: 750 !important;
	line-height: 1.18 !important;
	letter-spacing: -0.03em !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .entry-title a {
	color: inherit !important;
	font: inherit !important;
	text-decoration: none !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .entry-title a:hover,
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .entry-title a:focus {
	color: var(--sl-blog-green-dark) !important;
}


/* Meta */
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .entry-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.25rem 0.55rem !important;
	margin: 0 0 0.9rem !important;
	color: var(--sl-blog-text-soft) !important;
	font-size: 0.82rem !important;
	line-height: 1.45 !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .entry-meta a {
	color: var(--sl-blog-green-dark) !important;
	font-size: inherit !important;
	font-weight: 600 !important;
}


/* Excerpt auf gleiche Kartenhöhe begrenzen */
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .entry-summary,
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .entry-content {
	margin: 0 !important;
	color: var(--sl-blog-text-soft) !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .entry-summary > p,
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article .entry-content > p {
	display: -webkit-box !important;
	overflow: hidden !important;
	margin: 0 0 1rem !important;
	color: var(--sl-blog-text-soft) !important;
	line-height: 1.65 !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 5 !important;
}


/* Weiterlesen */
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) :is(.read-more, .more-link) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: fit-content !important;
	min-height: 2.55rem !important;
	margin-top: auto !important;
	padding: 0.65rem 1rem !important;
	border: 1px solid var(--sl-blog-border-green) !important;
	border-radius: var(--sl-radius-sm, 0.375rem) !important;
	background: rgba(172,206,81,0.07) !important;
	color: var(--sl-blog-green-dark) !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) :is(.read-more, .more-link):hover,
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) :is(.read-more, .more-link):focus {
	background: rgba(172,206,81,0.16) !important;
	border-color: rgba(96,205,19,0.5) !important;
	color: var(--sl-blog-green-dark) !important;
}


/* Footer-Meta der Karten */
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) article footer.entry-meta {
	margin-top: auto !important;
	padding-top: 1rem !important;
	border-top: 1px solid var(--sl-blog-border) !important;
}


/* Kategorien und Tags */
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) :is(.cat-links, .tags-links) a {
	display: inline-flex !important;
	margin: 0.12rem 0.18rem 0.12rem 0 !important;
	padding: 0.23rem 0.58rem !important;
	border: 1px solid var(--sl-blog-border-green) !important;
	border-radius: 999px !important;
	background: rgba(172,206,81,0.06) !important;
	color: var(--sl-blog-green-dark) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}


/* =========================================================
   SIDEBAR / WIDGETS
========================================================= */

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .widget-area .widget {
	margin-bottom: 1rem !important;
	padding: 1.25rem !important;
	border: 1px solid var(--sl-blog-border) !important;
	border-radius: var(--sl-blog-radius) !important;
	background: rgba(255,255,255,0.96) !important;
	box-shadow: none !important;
}


/*
 * H2 / H3 / H4 und Widget-Titel bewusst wieder mit dem
 * Seitenverlauf, wie in der restlichen Gestaltung.
 */
body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .widget-area .widget :is(
	.widget-title,
	h2,
	h3,
	h4
) {
	margin: 0 0 0rem !important;
	background: var(--sl-gradient-primary) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: var(--sl-blog-green) !important;
	font-weight: 750 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.025em !important;
}

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .widget-area .widget .widget-title {
	font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.65rem) !important;
}

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .widget-area .widget h3 {
	font-size: 1.25rem !important;
}

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .widget-area .widget h4 {
	font-size: 1.08rem !important;
}

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .widget-area .widget a {
	color: var(--sl-blog-text-soft) !important;
	text-decoration: none !important;
}

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .widget-area .widget a:hover,
body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) .widget-area .widget a:focus {
	color: var(--sl-blog-green-dark) !important;
}


/* =========================================================
   SINGLE POST
========================================================= */

body.single-post .site-main > article,
body.single-post article.post > .inside-article {
	background: var(--sl-blog-surface) !important;
	border: 1px solid var(--sl-blog-border) !important;
	border-radius: var(--sl-blog-radius-lg) !important;
	box-shadow: var(--sl-blog-shadow) !important;
}

body.single-post article.post > .inside-article {
	padding:
		clamp(1.5rem, 4vw, 3.5rem)
		clamp(1.25rem, 4.5vw, 4rem) !important;
}


/* Postheader */
body.single-post .entry-header {
	position: relative !important;
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem) !important;
	padding: 0 0 1.6rem !important;
	border-bottom: 1px solid var(--sl-blog-border) !important;
}

body.single-post .entry-header .entry-title {
	margin: 0 0 0.85rem !important;
	background: var(--sl-gradient-primary) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: var(--sl-blog-green) !important;
	font-size: clamp(2rem, 1.45rem + 2vw, 3.3rem) !important;
	font-weight: 800 !important;
	line-height: 1.06 !important;
	letter-spacing: -0.045em !important;
}

body.single-post .entry-header::after {
	content: "" !important;
	display: block !important;
	width: 4.5rem !important;
	height: 0.22rem !important;
	margin-top: 1.15rem !important;
	border-radius: 999px !important;
	background: var(--sl-gradient-primary) !important;
}


/* Single Meta */
body.single-post .entry-header .entry-meta,
body.single-post footer.entry-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.3rem 0.65rem !important;
	color: var(--sl-blog-text-soft) !important;
	font-size: 0.86rem !important;
}

body.single-post .entry-meta a {
	color: var(--sl-blog-green-dark) !important;
	font-size: inherit !important;
	font-weight: 600 !important;
}


/* Featured Image */
body.single-post .post-image,
body.single-post .featured-image {
	margin: 0 0 clamp(2rem, 4vw, 3rem) !important;
	overflow: hidden !important;
	border-radius: 1rem !important;
}

body.single-post .post-image img,
body.single-post .featured-image img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: 38rem !important;
	object-fit: cover !important;
	border: 1px solid var(--sl-blog-border) !important;
	border-radius: 1rem !important;
	box-shadow: none !important;
}


/* =========================================================
   SINGLE TYPOGRAFIE / CONTENT
========================================================= */

body.single-post .entry-content {
	color: var(--sl-blog-text-soft) !important;
	font-size: 1rem !important;
	line-height: 1.78 !important;
}

body.single-post .entry-content > :is(
	p,
	h2,
	h3,
	h4,
	h5,
	h6,
	ul,
	ol,
	blockquote,
	.wp-block-quote,
	.wp-block-details,
	pre,
	.wp-block-code
) {
	max-width: 54rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

body.single-post .entry-content p {
	margin-top: 0 !important;
	margin-bottom: 1.3rem !important;
	color: var(--sl-blog-text-soft) !important;
	line-height: 1.78 !important;
}

/* Lead */
body.single-post .entry-content > p:first-of-type {
	padding-left: 1.15rem !important;
	border-left: 0.22rem solid var(--sl-blog-green) !important;
	color: var(--sl-blog-text) !important;
	font-size: clamp(1.04rem, 1rem + 0.25vw, 1.14rem) !important;
	line-height: 1.75 !important;
}


/* Überschriften */
body.single-post .entry-content h2 {
	position: relative !important;
	margin-top: clamp(2.75rem, 6vw, 4rem) !important;
	margin-bottom: 1.3rem !important;
	padding-bottom: 0.95rem !important;
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: currentColor !important;
	color: var(--sl-blog-text) !important;
	font-size: clamp(1.65rem, 1.35rem + 1vw, 2.2rem) !important;
	font-weight: 750 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.035em !important;
}

body.single-post .entry-content h2::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 4.5rem !important;
	height: 0.2rem !important;
	border-radius: 999px !important;
	background: var(--sl-gradient-primary) !important;
}

body.single-post .entry-content h3 {
	margin-top: 2.25rem !important;
	margin-bottom: 0.85rem !important;
	color: var(--sl-blog-text) !important;
	font-size: clamp(1.3rem, 1.14rem + 0.45vw, 1.62rem) !important;
	font-weight: 700 !important;
	line-height: 1.24 !important;
	letter-spacing: -0.025em !important;
}

body.single-post .entry-content h4 {
	margin-top: 1.9rem !important;
	margin-bottom: 0.7rem !important;
	color: var(--sl-blog-text) !important;
	font-size: clamp(1.12rem, 1.05rem + 0.2vw, 1.3rem) !important;
	font-weight: 700 !important;
}


/* Links */
body.single-post .entry-content a:not(
	.wp-block-button__link
):not(
	.button
):not(
	.gb-button
):not(
	.wp-element-button
) {
	color: var(--sl-blog-green-dark) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-decoration-thickness: 0.07rem !important;
	text-underline-offset: 0.15em !important;
	text-decoration-color: rgba(96,205,19,0.4) !important;
}

body.single-post .entry-content a:not(
	.wp-block-button__link
):not(
	.button
):hover {
	color: var(--sl-blog-green) !important;
	text-decoration-color: currentColor !important;
}


/* =========================================================
   LISTEN
========================================================= */

body.single-post .entry-content ul {
	margin-top: 1.25rem !important;
	margin-bottom: 1.75rem !important;
	padding: 1.15rem 1.3rem !important;
	list-style: none !important;
	border: 1px solid rgba(172,206,81,0.22) !important;
	border-radius: 0.9rem !important;
	background: rgba(172,206,81,0.055) !important;
}

body.single-post .entry-content ul > li {
	position: relative !important;
	margin: 0 0 0.65rem !important;
	padding-left: 1.3rem !important;
	color: var(--sl-blog-text-soft) !important;
	line-height: 1.65 !important;
}

body.single-post .entry-content ul > li:last-child {
	margin-bottom: 0 !important;
}

body.single-post .entry-content ul > li::before {
	content: "›" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	color: var(--sl-blog-green-dark) !important;
	font-weight: 800 !important;
}

body.single-post .entry-content ol {
	counter-reset: sl-blog-list !important;
	margin-top: 1.25rem !important;
	margin-bottom: 1.75rem !important;
	padding: 1.15rem 1.3rem !important;
	list-style: none !important;
	border: 1px solid var(--sl-blog-border) !important;
	border-radius: 0.9rem !important;
	background: #ffffff !important;
}

body.single-post .entry-content ol > li {
	counter-increment: sl-blog-list !important;
	position: relative !important;
	min-height: 2rem !important;
	margin: 0 0 0.8rem !important;
	padding: 0.12rem 0 0 2.55rem !important;
	color: var(--sl-blog-text-soft) !important;
	line-height: 1.65 !important;
}

body.single-post .entry-content ol > li:last-child {
	margin-bottom: 0 !important;
}

body.single-post .entry-content ol > li::before {
	content: counter(sl-blog-list) !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 999px !important;
	background: rgba(172,206,81,0.18) !important;
	color: var(--sl-blog-green-dark) !important;
	font-size: 0.8rem !important;
	font-weight: 800 !important;
}

body.single-post .entry-content :is(ul,ol) :is(ul,ol) {
	margin: 0.55rem 0 0 !important;
	padding: 0.3rem 0 0 1rem !important;
	border: 0 !important;
	background: transparent !important;
}


/* =========================================================
   ZITATE
========================================================= */

body.single-post .entry-content :is(
	blockquote,
	.wp-block-quote
) {
	position: relative !important;
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
	padding: clamp(1.35rem,3vw,2.2rem) !important;
	overflow: hidden !important;
	border: 1px solid var(--sl-blog-border-green) !important;
	border-left: 0.3rem solid var(--sl-blog-green) !important;
	border-radius: 1rem !important;
	background:
		linear-gradient(
			135deg,
			rgba(172,206,81,0.11),
			rgba(255,255,255,0.96)
		) !important;
	color: var(--sl-blog-text) !important;
	font-size: clamp(1.08rem,1rem + 0.35vw,1.28rem) !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
}

body.single-post .entry-content :is(
	blockquote,
	.wp-block-quote
)::after {
	content: "“" !important;
	position: absolute !important;
	right: 1rem !important;
	bottom: -2.7rem !important;
	color: rgba(172,206,81,0.13) !important;
	font-family: Georgia,serif !important;
	font-size: 8rem !important;
	line-height: 1 !important;
	pointer-events: none !important;
}

body.single-post .entry-content blockquote p {
	position: relative !important;
	z-index: 1 !important;
	color: inherit !important;
	font: inherit !important;
}


/* =========================================================
   BILDER / GALERIEN / MEDIA
========================================================= */

body.single-post .entry-content figure {
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
}

body.single-post .entry-content img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 1rem !important;
	box-shadow: none !important;
}

body.single-post .entry-content :is(
	.wp-block-image,
	.wp-block-gallery,
	.wp-block-cover,
	.wp-block-media-text,
	.wp-block-video,
	.wp-block-embed
) {
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
}

body.single-post .entry-content .wp-block-image img {
	border: 1px solid var(--sl-blog-border) !important;
	border-radius: 1rem !important;
	background: #f3f5ef !important;
}

body.single-post .entry-content figcaption,
body.single-post .entry-content .wp-element-caption,
body.single-post .entry-content .wp-caption-text {
	margin-top: 0.55rem !important;
	color: var(--sl-blog-text-soft) !important;
	font-size: 0.82rem !important;
	font-style: italic !important;
	line-height: 1.5 !important;
	text-align: center !important;
}

body.single-post .entry-content .wp-block-gallery {
	gap: 0.8rem !important;
}

body.single-post .entry-content .wp-block-gallery figure {
	margin: 0 !important;
	overflow: hidden !important;
	border-radius: 0.85rem !important;
}

body.single-post .entry-content .wp-block-gallery img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border: 0 !important;
	border-radius: 0.85rem !important;
}

body.single-post .entry-content :is(
	.wp-block-cover,
	.wp-block-media-text
) {
	overflow: hidden !important;
	border: 1px solid var(--sl-blog-border) !important;
	border-radius: 1rem !important;
}

body.single-post .entry-content .wp-block-media-text__content {
	padding: clamp(1.25rem,3vw,2.1rem) !important;
}


/* =========================================================
   TABELLEN
========================================================= */

body.single-post .entry-content .wp-block-table {
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
	overflow-x: auto !important;
	border: 1px solid var(--sl-blog-border) !important;
	border-radius: 1rem !important;
	background: #ffffff !important;
}

body.single-post .entry-content table {
	width: 100% !important;
	margin: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
}

body.single-post .entry-content table :is(th,td) {
	padding: 0.8rem 0.95rem !important;
	border: 0 !important;
	border-bottom: 1px solid var(--sl-blog-border) !important;
	color: var(--sl-blog-text-soft) !important;
	text-align: left !important;
	vertical-align: top !important;
}

body.single-post .entry-content table th {
	background: rgba(172,206,81,0.12) !important;
	color: var(--sl-blog-text) !important;
	font-weight: 700 !important;
}


/* =========================================================
   DETAILS / FAQ
========================================================= */

body.single-post .entry-content :is(
	details,
	.wp-block-details
) {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
	padding: 1rem 1.1rem !important;
	border: 1px solid var(--sl-blog-border-green) !important;
	border-radius: 0.85rem !important;
	background: rgba(172,206,81,0.055) !important;
}

body.single-post .entry-content details summary {
	color: var(--sl-blog-text) !important;
	font-weight: 700 !important;
	cursor: pointer !important;
}

body.single-post .entry-content details[open] summary {
	margin-bottom: 0.7rem !important;
	color: var(--sl-blog-green-dark) !important;
}


/* =========================================================
   CODE
========================================================= */

body.single-post .entry-content code {
	padding: 0.12rem 0.32rem !important;
	border-radius: 0.3rem !important;
	background: rgba(37,43,49,0.07) !important;
	color: var(--sl-blog-text) !important;
	font-size: 0.9em !important;
}

body.single-post .entry-content :is(
	pre,
	.wp-block-code
) {
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
	padding: 1.2rem 1.35rem !important;
	overflow-x: auto !important;
	border: 1px solid rgba(37,43,49,0.12) !important;
	border-radius: 0.9rem !important;
	background: #252b31 !important;
	color: #f8faf5 !important;
	font-size: 0.88rem !important;
	line-height: 1.65 !important;
}

body.single-post .entry-content pre code {
	padding: 0 !important;
	background: transparent !important;
	color: inherit !important;
}


/* =========================================================
   BUTTONS IM BEITRAG
========================================================= */

body.single-post .entry-content :is(
	.wp-block-button__link,
	.button,
	a.button
) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 2.75rem !important;
	padding: 0.75rem 1.3rem !important;
	border: 0 !important;
	border-radius: var(--sl-radius-sm,0.375rem) !important;
	background: var(--sl-gradient-primary) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	box-shadow: 0 0.7rem 1.6rem rgba(96,205,19,0.2) !important;
}

body.single-post .entry-content :is(
	.wp-block-button__link,
	.button,
	a.button
):hover {
	background: var(--sl-gradient-primary-hover) !important;
	color: #ffffff !important;
	transform: translateY(-0.12rem) !important;
}


/* =========================================================
   POST NAVIGATION
========================================================= */

body.single-post .post-navigation {
	margin-top: 1.5rem !important;
}

body.single-post .post-navigation .nav-links {
	display: grid !important;
	grid-template-columns: repeat(2,minmax(0,1fr)) !important;
	gap: 1rem !important;
}

body.single-post .post-navigation :is(
	.nav-previous,
	.nav-next
) {
	margin: 5px !important;
	padding: 1.05rem 1.15rem !important;
	border: 1px solid var(--sl-blog-border) !important;
	border-radius: 0.9rem !important;
	background: #ffffff !important;
}

body.single-post .post-navigation a {
	color: var(--sl-blog-text) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

body.single-post .post-navigation a:hover {
	color: var(--sl-blog-green-dark) !important;
}


/* =========================================================
   KOMMENTARE IM BLOG AUSBLENDEN
   Die echte Deaktivierung erfolgt zusätzlich in functions.php.
========================================================= */

body:is(
	.blog,
	.single-post,
	.category,
	.tag,
	.author,
	.date,
	.search
) :is(
	.comments-area,
	.comments-link,
	.comment-link,
	#comments
) {
	display: none !important;
}


/* =========================================================
   PAGINATION
========================================================= */

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .paging-navigation,
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .pagination {
	margin-top: 0.75rem !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .paging-navigation .nav-links,
body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .pagination .nav-links {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 0.45rem !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 2.5rem !important;
	height: 2.5rem !important;
	padding: 0 0.7rem !important;
	border: 1px solid var(--sl-blog-border) !important;
	border-radius: 0.5rem !important;
	background: #ffffff !important;
	color: var(--sl-blog-text) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

body:is(
	.blog,
	.category,
	.tag,
	.author,
	.date,
	.search
) .page-numbers:is(
	.current,
	:hover,
	:focus
) {
	border-color: var(--sl-blog-green) !important;
	background: var(--sl-blog-green) !important;
	color: #ffffff !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 72rem) {

	body.no-sidebar:is(
		.blog,
		.category,
		.tag,
		.author,
		.date,
		.search
	) .site-main {
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
	}
}

@media (max-width: 64rem) {

	body:is(
		.blog,
		.single-post,
		.category,
		.tag,
		.author,
		.date,
		.search
	) .site-header {
		min-height: 20rem !important;
		background-position: 60% center !important;
	}

	body.single-post article.post > .inside-article {
		padding: 2rem 1.65rem !important;
	}
}

@media (max-width: 48rem) {

	body:is(
		.blog,
		.single-post,
		.category,
		.tag,
		.author,
		.date,
		.search
	) .site-header {
		min-height: 17rem !important;
		background-position: 62% center !important;
		background-image:
			linear-gradient(
				90deg,
				rgba(255,255,255,0.94) 0%,
				rgba(255,255,255,0.78) 52%,
				rgba(255,255,255,0.34) 100%
			),
			var(--sl-blog-hero-image) !important;
	}

	body:is(
		.blog,
		.single-post,
		.category,
		.tag,
		.author,
		.date,
		.search
	) .site-content {
		margin-top: -2.5rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		padding-bottom: 3.5rem !important;
	}

	/* Erst mobil untereinander */
	body:is(
		.blog,
		.category,
		.tag,
		.author,
		.date,
		.search
	) .site-main,
	body.no-sidebar:is(
		.blog,
		.category,
		.tag,
		.author,
		.date,
		.search
	) .site-main {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}

	body.single-post article.post > .inside-article {
		padding: 1.2rem !important;
		border-radius: 1rem !important;
	}

	body.single-post .entry-header .entry-title {
		font-size: clamp(1.8rem,8vw,2.45rem) !important;
	}

	body.single-post .entry-content h2 {
		font-size: clamp(1.5rem,6.5vw,1.9rem) !important;
	}

	body.single-post .entry-content h3 {
		font-size: clamp(1.22rem,5vw,1.48rem) !important;
	}

	body.single-post .entry-content :is(ul,ol) {
		padding: 1rem !important;
	}

	body.single-post .post-navigation .nav-links {
		grid-template-columns: 1fr !important;
	}

	body:is(
		.blog,
		.category,
		.tag,
		.author,
		.date,
		.search
	) .site-main > article > .inside-article {
		padding: 1.05rem !important;
	}
}

@media (max-width: 28rem) {

	body:is(
		.blog,
		.single-post,
		.category,
		.tag,
		.author,
		.date,
		.search
	) .site-content {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}

	body.single-post article.post > .inside-article {
		padding: 1rem !important;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	body:is(
		.blog,
		.single-post,
		.category,
		.tag,
		.author,
		.date,
		.search
	) *,
	body:is(
		.blog,
		.single-post,
		.category,
		.tag,
		.author,
		.date,
		.search
	) *::before,
	body:is(
		.blog,
		.single-post,
		.category,
		.tag,
		.author,
		.date,
		.search
	) *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}





/* =========================================================
   LIEBENER – DEZENTE MICRO MOTIONS
   Keine Layoutänderung, kein Zoom, kein Smooth-Scroll
========================================================= */


/* =========================================================
   1. BILDER
   Nur dezente Licht-/Rahmenreaktion.
========================================================= */

.lc-media,
.lc-about-main,
.lc-detail-hero-image,
.lc-detail-break-image,
.lc-booking-image {
	transition:
		border-color 320ms ease,
		box-shadow 320ms ease;
}

.lc-media img,
.lc-about-main img,
.lc-about-thumbs img,
.lc-detail-hero-image img,
.lc-detail-break-image img,
.lc-booking-image img {
	transition:
		filter 360ms ease,
		opacity 360ms ease;
}


/* Nur Geräte mit echter Maus */
@media (hover: hover) and (pointer: fine) {

	.lc-media:hover,
	.lc-about-main:hover,
	.lc-detail-hero-image:hover,
	.lc-detail-break-image:hover,
	.lc-booking-image:hover {
		border-color: rgba(172, 206, 81, 0.32);
		box-shadow:
			0 0.85rem 2rem rgba(35, 35, 35, 0.09),
			0 0 0 1px rgba(172, 206, 81, 0.06);
	}

	.lc-media:hover img,
	.lc-about-main:hover img,
	.lc-detail-hero-image:hover img,
	.lc-detail-break-image:hover img,
	.lc-booking-image:hover img {
		filter:
			brightness(1.035)
			contrast(1.025)
			saturate(1.035);
	}


	/* Kleine Bilder "Über mich" */
	.lc-about-thumbs img:hover {
		filter:
			brightness(1.04)
			contrast(1.025)
			saturate(1.04);

		box-shadow:
			0 0.65rem 1.5rem rgba(35, 35, 35, 0.11);
	}

}


/* =========================================================
   2. CARDS
   Sehr kleine Bewegung, kein Springen.
========================================================= */

.lc-value-card,
.lc-about-fact,
.lc-process-item,
.lc-content-card,
.lc-inline-quote {
	transition:
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 280ms ease,
		box-shadow 280ms ease,
		background-color 280ms ease;
}


@media (hover: hover) and (pointer: fine) {

	.lc-value-card:hover,
	.lc-about-fact:hover,
	.lc-process-item:hover,
	.lc-content-card:hover {
		transform: translateY(-2px);

		border-color: rgba(172, 206, 81, 0.42);

		box-shadow:
			0 0.7rem 1.6rem rgba(35, 35, 35, 0.065);
	}


	/* Zitate bleiben ruhiger als normale Cards */
	.lc-inline-quote:hover {
		transform: translateY(-1px);

		border-color: rgba(172, 206, 81, 0.5);

		box-shadow:
			0 0.5rem 1.3rem rgba(35, 35, 35, 0.05);
	}

}


/* =========================================================
   3. DETAIL-HERO
   Grüne Linie reagiert ganz leicht.
========================================================= */

.lc-detail-heading h3::after {
	transition:
		width 320ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 320ms ease;
}


@media (hover: hover) and (pointer: fine) {

	.lc-detail-hero:hover .lc-detail-heading h3::after {
		width: 6rem;
	}

}


/* =========================================================
   4. HERO-LINKS
   Bestehendes Layout bleibt unangetastet.
========================================================= */

.sl-page-hero__links a {
	transition:
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 280ms ease,
		border-color 280ms ease,
		box-shadow 280ms ease;
}


@media (hover: hover) and (pointer: fine) {

	.sl-page-hero__links a:hover {
		transform: translateY(-2px);
	}

}


/* =========================================================
   5. KICKER
   Keine Bewegung. Nur etwas lebendiger beim Hover.
========================================================= */

.lc-kicker,
.lc-blog-kicker {
	transition:
		background-color 260ms ease,
		border-color 260ms ease,
		color 260ms ease;
}


@media (hover: hover) and (pointer: fine) {

	.lc-kicker:hover,
	.lc-blog-kicker:hover {
		background-color: rgba(172, 206, 81, 0.12);
		border-color: rgba(172, 206, 81, 0.5);
	}

}


/* =========================================================
   6. SELEKTIVE SCROLL-MOTION
   Wird ausschließlich durch micro-motion.js aktiviert.
========================================================= */

.sl-soft-motion {
	opacity: 0;
	transform: translateY(0.8rem);

	transition:
		opacity 560ms ease,
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1);

	transition-delay: var(--sl-motion-delay, 0ms);

	will-change: opacity, transform;
}


.sl-soft-motion.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* =========================================================
   7. HERO BEIM ERSTEN LADEN
   Sehr subtil und nur der eigentliche Text.
========================================================= */

@keyframes slHeroSoftIn {

	from {
		opacity: 0;
		transform: translateY(0.65rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}


.sl-page-hero__content {
	animation:
		slHeroSoftIn
		620ms
		cubic-bezier(0.22, 1, 0.36, 1)
		both;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.sl-page-hero__content {
		animation: none !important;
	}

	.sl-soft-motion {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.lc-media,
	.lc-about-main,
	.lc-about-thumbs img,
	.lc-detail-hero-image,
	.lc-detail-break-image,
	.lc-booking-image,
	.lc-value-card,
	.lc-about-fact,
	.lc-process-item,
	.lc-content-card,
	.lc-inline-quote,
	.sl-page-hero__links a,
	.lc-detail-heading h3::after {
		transition: none !important;
		transform: none !important;
	}

}