/*
 * Pipes Sidebar Menu – Styles
 * Kombination aus sidebar.css + toggle.css der Svelte-Vorlage,
 * angepasst für WordPress (kein Framework, keine Cart-Elemente).
 *
 * CSS Custom Properties werden hier mit sinnvollen Standard­werten
 * belegt. Überschreiben Sie diese im Customizer unter
 * „Darstellung → Customizer → Zusätzliches CSS".
 */

/* ─── Standard-Werte für CSS Custom Properties ──────────────────────── */
:root {
	--col-sidebar:             #ffffff;
	--col-sidebar-text:        #000000;
	--col-sidebar-shadow:      rgba(0, 0, 0, 0.35);
	--col-sidebar-transparent: rgba(255, 255, 255, 0);
	--col-accent:              #d41f2bff;
	--col-accent-focus:        #80171eff;
	--col-accent-text:         #ffffffff;
	--col-button:              #00000017;
	--col-button-focus:        #00000024;
	--col-button-text:         #000000ff;
	--col-menu-text:           #000000;
	--font-family:             Open Sans;
	--font-weight-normal:      400;
	--font-weight-light:       300;
	--var-sidebar-width:       400px;
}

/* ─── Sidebar Basis ──────────────────────────────────────────────────── */
.sidebar {
	position: relative;
	grid-area: sidebar;
	background-color: var(--col-sidebar);
	color: var(--col-sidebar-text);
	font-family: var(--font-family);
	box-shadow: 0px 0px 5px var(--col-sidebar-shadow);
	z-index: 1;
	width: 400px;
	transition: transform 500ms, width 500ms;
}

/* Theme-Overrides auf vererbbare Schrift-Eigenschaften verhindern.
   Direkte Regeln auf Kind-Elementen (div, span, a …) schlagen geerbte Werte,
   deshalb setzen wir den Reset auf alle Nachfahren. */
.sidebar * {
	letter-spacing: normal !important;
	line-height: normal !important;
}

/* ─── Mobile ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 1000px) {
	:root {
		--var-sidebar-width: 0px;
	}

	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		width: min(calc(100% - 20px), 400px) !important;
		max-width: 400px !important;
		transform: translateX(calc(-100% - 5px));
		z-index: 9998;
		height: 100lvh;
		overflow-x: hidden;
	}

	/* ID-Selektor als letztes Mittel gegen Theme-!important-Overrides */
	#psm-sidebar {
		width: min(calc(100% - 20px), 400px) !important;
		max-width: 400px !important;
		z-index: 9998 !important;
	}

	.sidebar._open {
		transform: translateX(0px);
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
	}
}

/* ─── Wrapper (Sticky-Scroll-Container) ─────────────────────────────── */
.sidebar > .wrapper {
	position: sticky;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-auto-flow: row;
	top: 0px;
	height: 100svh;
	overflow-y: auto;
	padding: 20px;
	gap: 20px;
	scrollbar-width: thin;
}

/* ─── Sprach-Switcher ────────────────────────────────────────────────── */
.sidebar .lang_switcher {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

@media screen and (max-width: 1000px) {
	.sidebar .lang_switcher {
		justify-content: flex-start;
	}
}

.sidebar .lang_switcher select {
	background: transparent;
	border: none;
	color: var(--col-sidebar-text);
	font-family: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

/* ─── Navigation ─────────────────────────────────────────────────────── */
.sidebar nav {
	padding: 20px;
}

/* Logo-Link */
.sidebar nav > .logo {
	display: block;
	text-decoration: none;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: none;
}

.sidebar nav > .logo > img {
	display: block;
	width: var(--psm-logo-w, auto) !important;
	max-width: 100% !important;
	max-height: var(--psm-logo-mh, none) !important;
}

/* a-Basis */
.sidebar nav a {
	display: block;
	text-decoration: none;
	color: var(--col-menu-text);
	cursor: default;
}

.sidebar nav ul a:not(._active) {
	cursor: pointer;
}

/* span-Basis */
.sidebar nav span {
	position: relative;
}

/* Letztes li: kein unterer Abstand */
.sidebar nav li:last-child > ul {
	margin-bottom: 0;
}

/* ─── Sub-Listen versteckt ───────────────────────────────────────────── */
.sidebar nav ul._hide {
	height: 0px;
	opacity: 0;
	margin-top: 0px;
	margin-bottom: 0px;
	display: none;
}

.sidebar nav ul._hide a {
	margin-top: 0px;
}

/* ─── ul Ebene 1 ─────────────────────────────────────────────────────── */
.sidebar nav ul {
	interpolate-size: allow-keywords; /* Chrome 117+, Firefox 129+ */
	display: block;
	list-style-type: none;
	margin-top: 40px;
	margin-bottom: 0px;
	padding: 0;
	opacity: 1;
	height: auto;
	transition:
		opacity     200ms,
		height      200ms,
		margin-top  200ms,
		margin-bottom 200ms,
		display     200ms allow-discrete;
}

/* a Ebene 1 */
.sidebar nav ul a {
	font-weight: var(--font-weight-normal);
	font-size: 30px;
	padding-bottom: calc(5px + 4px + 5px);
	margin-top: 10px;
}

/* Unterstrich-Basis Ebene 1 */
.sidebar nav ul a span::after {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	height: 4px;
	width: 0px;
	left: -40px;
	background-color: var(--col-accent);
	transition: top 100ms, left 200ms, width 200ms;
	transition-delay: 200ms, 0ms, 0ms;
}

/* Unterstrich aktiv Ebene 1 */
.sidebar nav ul a._active span::after {
	left: 0px;
	top: calc(100% + 5px);
}

.sidebar nav ul a._active.psm-show-underline span::after {
	width: 100%;
}

/* Unterstrich Hover Ebene 1 */
@media (hover: hover) {
	.sidebar nav ul a:not(._active):hover span::after {
		width: 20px;
	}
}

/* ─── ul Ebene 2 ─────────────────────────────────────────────────────── */
.sidebar nav ul ul {
	margin-top: 20px;
	margin-bottom: 40px;
	margin-left: 20px;
}

/* a Ebene 2 */
.sidebar nav ul ul a {
	font-weight: var(--font-weight-light);
	font-size: 25px;
	padding-bottom: calc(3px + 3px + 3px);
}

/* Unterstrich-Basis Ebene 2 */
.sidebar nav ul ul a span::after {
	height: 3px;
	width: 0px;
	left: -60px;
}

/* Unterstrich aktiv Ebene 2 */
.sidebar nav ul ul a._active span::after {
	top: calc(100% + 3px);
}

.sidebar nav ul ul a._active.psm-show-underline span::after {
	width: 100%;
	left: 0px;
}

/* Unterstrich Hover Ebene 2 */
@media (hover: hover) {
	.sidebar nav ul ul a:not(._active):hover span::after {
		width: 20px;
	}
}

/* ─── ul Ebene 3 ─────────────────────────────────────────────────────── */
.sidebar nav ul ul ul {
	margin-top: 15px;
	margin-bottom: 30px;
}

/* a Ebene 3 */
.sidebar nav ul ul ul a {
	font-size: 20px;
	padding-bottom: 0px;
}

.sidebar nav ul ul ul a._active {
	font-weight: var(--font-weight-normal);
}

/* Kein Unterstrich auf Ebene 3 */
.sidebar nav ul ul ul a span::after {
	display: none;
}

/* ─── Keyframe-Animation (für dynamische Verwendung) ────────────────── */
@keyframes psm-underline {
	0%   { width: 0px;   left: 0;    right: auto; }
	20%  { width: 100%;  left: 0;    right: auto; }
	21%  { width: 100%;  left: auto; right: 0; }
	40%  { width: 0px;   left: auto; right: 0; }
	41%  { width: 0px;   left: 0px;  right: auto; }
	100% { width: 100%;  left: 0px;  right: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Toggle-Button (Hamburger / Close)
═══════════════════════════════════════════════════════════════════════ */
.sidebar_toggle {
	display: block;
	position: fixed;
	top: -50px; /* auf Desktop unsichtbar (kein Platz nötig, Sidebar immer sichtbar) */
	left: calc(min(100% - 20px, 400px) - 50px - 10px);
	background-color: var(--col-accent);
	width: 50px;
	height: 50px;
	border: none;
	border-radius: 0;
	transition: top 500ms, left 500ms, background-color 200ms;
	padding: 10px;
	cursor: pointer;
	z-index: 9999;
}

@media (hover: hover) {
	.sidebar_toggle:hover {
		background-color: var(--col-accent-focus);
	}
}

/* Position, wenn Sidebar geschlossen */
.sidebar:not(._open) + .sidebar_toggle {
	left: calc(100% - 50px - 10px);
}

/* Icon-Container */
.sidebar_toggle > .icon {
	position: relative;
	width: 100%;
	height: 100%;
	transform: scale3d(0.8, 0.8, 0.8);
}

/* Die drei Linien */
.sidebar_toggle > .icon > .lines,
.sidebar_toggle > .icon > .lines::before,
.sidebar_toggle > .icon > .lines::after {
	position: absolute;
	display: block;
	width: 100%;
	left: 0;
	background: var(--col-accent-text);
	transition: 500ms;
}

.sidebar_toggle > .icon > .lines {
	height: 3px;
	margin-top: -2px;
	top: 50%;
}

.sidebar_toggle > .icon > .lines::before,
.sidebar_toggle > .icon > .lines::after {
	content: '';
	height: 100%;
	transform-origin: 60px center;
}

.sidebar_toggle > .icon > .lines::before {
	top: 8px;
}

.sidebar_toggle > .icon > .lines::after {
	top: -8px;
}

/* ─── Close-Icon (X) wenn Sidebar geöffnet ───────────────────────────── */
.sidebar._open + .sidebar_toggle > .icon > .lines {
	background: transparent;
}

.sidebar._open + .sidebar_toggle > .icon > .lines::before,
.sidebar._open + .sidebar_toggle > .icon > .lines::after {
	top: 0;
	transform-origin: 50% 50%;
}

.sidebar._open + .sidebar_toggle > .icon > .lines::before {
	transform: rotate3d(0, 0, 1, 45deg);
}

.sidebar._open + .sidebar_toggle > .icon > .lines::after {
	transform: rotate3d(0, 0, 1, -45deg);
}

/* ─── Mobile: Toggle-Button sichtbar ─────────────────────────────────── */
@media screen and (max-width: 1000px) {
	.sidebar_toggle {
		top: 10px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   Warenkorb-Button (.status / .basket)
═══════════════════════════════════════════════════════════════════════ */

/* Status-Container – sticky am unteren Rand des Wrappers */
.status {
	position: sticky;
	bottom: 0px;
}

/* Gradient-Überblendung über den Inhalt darunter */
.status::before {
	content: "";
	pointer-events: none;
	position: absolute;
	bottom: -20px;
	left: 0px;
	height: calc(20px + 50px + 40px);
	width: 100%;
	background: linear-gradient(
		to top,
		var(--col-sidebar) 0px,
		var(--col-sidebar) 65px,
		95px,
		var(--col-sidebar-transparent) 110px
	);
	opacity: 1;
	transition: opacity 200ms;
}

/* Gradient ausblenden, wenn kein Scrollen nötig */
.status._not-stuck::before {
	opacity: 0;
}

/* Basket-Link / -Button */
.status .basket {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	width: 100%;
	align-items: center;
	height: 50px;
	padding: 0 20px;
	border: none;
	border-radius: 5px;
	text-decoration: none;
	color: var(--col-button-text);
	font-family: inherit;
	font-size: 20px;
	cursor: pointer;
	background-color: var(--col-button);
	font-weight: var(--font-weight-light) !important;
	transition: background-color 200ms, color 200ms;
}

.status .basket._accent {
	background-color: var(--col-accent);
	color: var(--col-accent-text);
	font-weight: var(--font-weight-normal) !important;
}

@media (hover: hover) {
	.status .basket:not(._accent):hover {
		background-color: var(--col-button-focus);
	}

	.status .basket._accent:hover {
		background-color: var(--col-accent-focus);
	}
}

.status .basket > img {
	display: block;
	height: inherit;
	width: auto;
	object-fit: contain;
}

/* ─── Mobile Warenkorb-Button (außerhalb der Sidebar) ────────────────── */
.status._mobile {
	display: none;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	padding: 20px;
	z-index: 4;
}

.status._mobile::before {
	bottom: 0px;
}

/* Desktop: mobiler Button versteckt; in Sidebar sichtbar */
@media screen and (max-width: 1000px) {
	.sidebar .status:not(._mobile) {
		display: none;
	}

	.status._mobile {
		display: block;
	}
}

/* [hidden] wird vom User-Agent-Stylesheet gesetzt, hat aber geringere
   Spezifität als unsere Autor-Regel oben – daher explizit überschreiben. */
.status._mobile[hidden] {
	display: none;
}

/* ─── Avada Live Builder: Sidebar komplett ausblenden ────────────────── */
/* Avada setzt die Klasse fusion-builder-live per JavaScript auf <body>,
   sobald der Live-Editor aktiviert wird – unabhängig vom URL-Parameter.  */
body.fusion-builder-live .sidebar,
body.fusion-builder-live .sidebar_toggle,
body.fusion-builder-live .status._mobile {
	display: none !important;
}
body.fusion-builder-live {
	--var-sidebar-width: 0px !important;
	grid-template-columns: 1fr !important;
	grid-template-areas: "main" !important;
}