/* =====================================================================
   Navigation „Glas + Gliding Pill“ (Test auf Staging, 25.09.2026)
   Wird NACH style.css geladen und überschreibt nur #main-navigation-wrapper.
   Rückbau: Enqueue in functions.php entfernen (Block „nav-glass“).

   Farben ausschließlich aus inc/colors.php (CSS-Variablen):
   Glas = --air-h1, Pill = --leaf-h1, Hover-Hauch = --leaf-h3, Schatten = --earth
   Rundung B (Squircle) testen: URL mit ?nav=b aufrufen.
   ===================================================================== */

:root {
	--nav-pad: .3rem;                                   /* Innenabstand Glasleiste */
	--nav-radius: 999px;                                /* A: volle Pillenform */
	--nav-glass: color-mix(in srgb, var(--air-h1) 58%, transparent);
	--nav-edge: color-mix(in srgb, #fff 70%, transparent);
	--nav-edge-soft: color-mix(in srgb, #fff 25%, transparent);
	--nav-shadow: color-mix(in srgb, var(--earth) 18%, transparent);
	--nav-pill: var(--leaf-h1);
	--nav-pill-text: #000;
	--nav-ease: cubic-bezier(.34, 1.36, .5, 1);         /* leichtes Nachfedern */
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--nav-glass: color-mix(in srgb, var(--air-h1) 55%, transparent);
		--nav-edge: color-mix(in srgb, #fff 22%, transparent);
		--nav-edge-soft: color-mix(in srgb, #fff 6%, transparent);
		--nav-shadow: color-mix(in srgb, #000 45%, transparent);
	}
}
html[data-theme="dark"] {
	--nav-glass: color-mix(in srgb, var(--air-h1) 55%, transparent);
	--nav-edge: color-mix(in srgb, #fff 22%, transparent);
	--nav-edge-soft: color-mix(in srgb, #fff 6%, transparent);
	--nav-shadow: color-mix(in srgb, #000 45%, transparent);
}

/* ---------- Glasleiste ---------- */
#main-navigation-wrapper {
	padding: var(--nav-pad);
	border-radius: var(--nav-radius);
	background:
		linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent 60%),
		var(--nav-glass);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	border: 1px solid var(--nav-edge-soft);
	box-shadow:
		inset 0 1px 0 var(--nav-edge),                 /* Lichtkante oben */
		inset 0 -1px 0 var(--nav-edge-soft),
		0 10px 30px -8px var(--nav-shadow),
		0 2px 6px -2px var(--nav-shadow);
}

#main-navigation-wrapper #menu-main {
	position: relative;
	z-index: 1;
	gap: .15rem;
}
#main-navigation-wrapper #menu-main > li {
	position: relative;
	z-index: 1;                                       /* über der Pill */
}

/* ---------- Buttons ---------- */
#main-navigation-wrapper #menu-main > li > a {
	border-radius: calc(var(--nav-radius) - var(--nav-pad));
	transition: color .25s ease;
}

/* Sobald das Script läuft, übernimmt die Pill die Markierung.
   Alte Hintergründe (aktive Seite, Hover, :active) werden neutralisiert. */
#main-navigation-wrapper.ym-glide #menu-main > li > a,
#main-navigation-wrapper.ym-glide #menu-main > li > a:hover,
#main-navigation-wrapper.ym-glide #menu-main > li > a:active,
#main-navigation-wrapper.ym-glide #menu-main > li.active > a {
	background: transparent !important;
	color: var(--black) !important;
}
#main-navigation-wrapper.ym-glide #menu-main > li.ym-pill-on > a {
	color: var(--nav-pill-text) !important;
}

/* ---------- Gliding Pill ---------- */
.ym-nav-pill {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: calc(var(--nav-radius) - var(--nav-pad));
	background:
		linear-gradient(180deg, color-mix(in srgb, #fff 35%, transparent), transparent 55%),
		var(--nav-pill);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
		0 4px 12px -4px var(--nav-shadow);
	opacity: 0;
	transition:
		transform .45s var(--nav-ease),
		width .45s var(--nav-ease),
		height .3s ease,
		opacity .25s ease;
	will-change: transform, width;
}
.ym-nav-pill.is-visible { opacity: 1; }
.ym-nav-pill.no-anim { transition: none; }

/* ---------- Rundung B: Squircle (nur wo der Browser corner-shape kann) ---------- */
html.ym-nav-b {
	--nav-radius: 1.35rem;
}
html.ym-nav-b #main-navigation-wrapper,
html.ym-nav-b #main-navigation-wrapper #menu-main > li > a,
html.ym-nav-b .ym-nav-pill {
	corner-shape: squircle;
}
@supports not (corner-shape: squircle) {
	html.ym-nav-b { --nav-radius: 1.1rem; }
}

/* ---------- Barrierearm ---------- */
@media (prefers-reduced-motion: reduce) {
	.ym-nav-pill { transition: opacity .15s ease; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#main-navigation-wrapper { background: var(--air-h1); }
}

/* =====================================================================
   Seitenleiste (Hamburger-Menü) im selben Glas
   ===================================================================== */
#sidebar, #mpcs-sidebar, #login {
	--panel-radius: calc(var(--image-radius) + .6rem);
	border-radius: var(--panel-radius);
	background:
		linear-gradient(180deg, color-mix(in srgb, #fff 22%, transparent), transparent 40%),
		var(--nav-glass);
	-webkit-backdrop-filter: blur(22px) saturate(170%);
	backdrop-filter: blur(22px) saturate(170%);
	border: 1px solid var(--nav-edge-soft);
	box-shadow:
		inset 0 1px 0 var(--nav-edge),
		0 24px 60px -16px var(--nav-shadow),
		0 4px 12px -4px var(--nav-shadow);
}
html.ym-nav-b #sidebar, html.ym-nav-b #mpcs-sidebar, html.ym-nav-b #login {
	corner-shape: squircle;
}

/* Aufklappen: weich aus der Leiste heraus statt Ziehharmonika */
#sidebar {
	transform: translateY(14px) scale(.96);
	opacity: 0;
	visibility: hidden;
	transition:
		transform .45s var(--nav-ease),
		opacity .25s ease,
		visibility 0s linear .45s;
}
#sidebar.open {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition:
		transform .45s var(--nav-ease),
		opacity .25s ease,
		visibility 0s;
}

/* Menüpunkte: sanfter Pill-Hover in Leaf */
#secondary-navigation-wrapper .menu-item > a {
	margin: 0 -.75rem;
	padding: .5rem .75rem;
	border-radius: 999px;
	transition: background-color .2s ease;
}
#secondary-navigation-wrapper .menu-item > a:focus-visible,
#secondary-navigation-wrapper .menu-item > a:active {
	background-color: color-mix(in srgb, var(--leaf-h1) 60%, transparent);
	color: var(--black);
}
#secondary-navigation-wrapper .current-menu-item > a {
	background-color: var(--leaf-h1);
	color: #000;
}
#secondary-navigation-wrapper .sub-menu .menu-item > a {
	padding-top: .3rem;
	padding-bottom: .3rem;
}
#secondary-navigation-wrapper .menu-chevron {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	transition: transform .3s var(--nav-ease), background-color .2s ease;
}
#secondary-navigation-wrapper .menu-chevron:active {
	background-color: color-mix(in srgb, var(--leaf-h1) 70%, transparent);
}

/* =====================================================================
   Suche
   ===================================================================== */
#suche {
	background:
		linear-gradient(180deg, color-mix(in srgb, #fff 25%, transparent), transparent 30%),
		color-mix(in srgb, var(--air) 82%, transparent);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	backdrop-filter: blur(24px) saturate(160%);
	border-radius: calc(var(--image-radius) + .6rem) calc(var(--image-radius) + .6rem) 0 0;
	border-top: 1px solid var(--nav-edge-soft);
	box-shadow: inset 0 1px 0 var(--nav-edge), 0 -20px 50px -20px var(--nav-shadow);
	transition: transform .45s var(--nav-ease);
}

/* Suchfeld als Glas-Pille mit runden Buttons – gleiche Sprache wie die Leiste */
#searchForm {
	gap: .25rem;
	padding: var(--nav-pad);
	border: 1px solid var(--nav-edge-soft);
	border-radius: 999px;
	background:
		linear-gradient(180deg, color-mix(in srgb, #fff 30%, transparent), transparent 60%),
		var(--nav-glass);
	box-shadow:
		inset 0 1px 0 var(--nav-edge),
		0 8px 24px -10px var(--nav-shadow);
	transition: box-shadow .25s ease;
}
#searchForm:focus-within {
	box-shadow:
		inset 0 1px 0 var(--nav-edge),
		0 0 0 3px color-mix(in srgb, var(--leaf) 45%, transparent),
		0 8px 24px -10px var(--nav-shadow);
}
#searchInput {
	padding: .45rem .5rem;
	border-radius: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: transparent;
}
#searchInput::placeholder { color: var(--titel); }

#searchForm .search-icon,
#searchForm .close-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 999px;
	transition: background-color .2s ease, transform .2s var(--nav-ease);
}
/* Lupe = Absenden, trägt die Pill-Farbe */
#searchForm .search-icon {
	background:
		linear-gradient(180deg, color-mix(in srgb, #fff 35%, transparent), transparent 55%),
		var(--nav-pill);
	box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 4px 12px -4px var(--nav-shadow);
	color: #000;
}
#searchForm .search-icon:active { background-color: var(--leaf); }
#searchForm .close-icon { background: transparent; }
#searchForm .close-icon:active { background: color-mix(in srgb, var(--leaf-h1) 60%, transparent); }
#searchForm .search-icon:active,
#searchForm .close-icon:active { transform: scale(.92); }

/* Vorschläge und Quick-Links als Glas-Chips */
#acList, #quickLinksSection ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
#acResults li { margin-bottom: 0; }
#acResults a {
	padding: .3rem .9rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--air-h1) 70%, transparent);
	border: 1px solid var(--nav-edge-soft);
	box-shadow: inset 0 1px 0 var(--nav-edge);
	transition: background-color .2s ease;
}
#acResults a:active {
	background: var(--leaf-h1);
	color: #000;
}
#acResults a::before { display: none; }

@media (prefers-reduced-motion: reduce) {
	#sidebar, #sidebar.open { transition: opacity .15s ease, visibility 0s; transform: none; }
	#suche { transition: none; }
}

/* =====================================================================
   Runde 3: Alle Bedienelemente im Pillenformat
   Nur Buttons, Badges, Pfeile, einzeilige Felder. Bilder, Panels,
   Textfelder und Code-Blöcke behalten ihre bisherige Rundung.
   ===================================================================== */
button, .button, #wp-submit, input[type="submit"], .mepr-submit, .mepr-nav-item,
.mpcs-lesson-button, #bookmark, #bookmark a.btn, a.btn, .mepr-login-link a,
.filterButtons a, .loginButton, .kursInfo,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
.railArrow,
.collectionItem small, .railItem small,
.wp-block-button__link, .wp-block-file__button,
#downloadStatus,
.mpcs-lesson.current, .course-next-link, .course-prev-link {
	border-radius: 999px;
}
html.ym-nav-b :is(
	button, .button, #wp-submit, input[type="submit"], .mepr-submit, .mepr-nav-item,
	.mpcs-lesson-button, #bookmark a.btn, a.btn, .mepr-login-link a,
	.filterButtons a, .loginButton, .kursInfo, .railArrow,
	.collectionItem small, .railItem small, .wp-block-button__link, .wp-block-file__button
) {
	border-radius: 1.1rem;
	corner-shape: squircle;
}

/* =====================================================================
   Runde 4: Touch-Bedienung (25.09.2026, nach Bildschirmaufnahme iPhone)
   ===================================================================== */

/* Hover-Effekte nur auf Geräten mit Maus. Auf Touch bleiben sie sonst
   nach dem Tippen „kleben“. */
@media (hover: hover) and (pointer: fine) {
	#secondary-navigation-wrapper .menu-item > a:hover {
		background-color: color-mix(in srgb, var(--leaf-h1) 60%, transparent);
		color: var(--black);
	}
	#secondary-navigation-wrapper .menu-chevron:hover {
		background-color: color-mix(in srgb, var(--leaf-h1) 70%, transparent);
	}
	#searchForm .search-icon:hover { background-color: var(--leaf); }
	#searchForm .close-icon:hover { background: color-mix(in srgb, var(--leaf-h1) 60%, transparent); }
	#acResults a:hover { background: var(--leaf-h1); color: #000; }
}

/* 1. Grauen iOS-Tipp-Kasten abschalten – die Pill bzw. :active geben
      das Feedback selbst. */
#main-navigation-wrapper, #sidebar, #mpcs-sidebar, #suche, #loginButton, #kursInfo,
button, .button, a.btn, .railArrow, .filterButtons a {
	-webkit-tap-highlight-color: transparent;
}

/* 2. Kein Markieren des Wortes und keine Link-Vorschau (Öffnen / Leseliste /
      Link kopieren) beim etwas längeren Tippen auf die Leiste.
   3. touch-action: manipulation = kein Warten auf Doppeltipp-Zoom. */
#main-navigation-wrapper,
#main-navigation-wrapper a,
#secondary-navigation-wrapper a,
#searchForm button {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: manipulation;
}

/* Kurzes, federndes Eindrücken der Pill als Tipp-Feedback */
.ym-nav-pill {
	transition:
		transform .45s var(--nav-ease),
		width .45s var(--nav-ease),
		height .3s ease,
		opacity .25s ease,
		scale .25s var(--nav-ease);
}
.ym-nav-pill.is-pressed { scale: .93; }
@media (prefers-reduced-motion: reduce) {
	.ym-nav-pill { transition: opacity .15s ease; }
	.ym-nav-pill.is-pressed { scale: 1; }
}