/*
 * DOMAINS Dev - Linke Navigation
 * Shell/Items: APP-Klassen (.appnav-preview-*)
 * Kopf: Original-DOMAINS-Typografie (INFOS & PREISLISTE / DOMAINS) - kein APP scaleX
 *
 * ============================================================
 *  SUBMENU ITEM SIZES (Prototypen) — immer beruecksichtigen
 *  Klasse am Item: .leftnav-item--{s|m|l|xl|2xl|3xl}
 *  Titel/Sub-Text bleiben Inhalt (PHP); Size = Zeilen-Metrik + Default-Typo.
 *
 *  PROTOTYP-PFEIL (gehoert zum Item-Prototyp, DOMAINS + APP):
 *    Ruhe (nicht active): nur Spitzklammer (.domainsnav-arrow-tip), 1px
 *    Hover (noch nicht active): nur Spitzklammer (Farbe/Glow via style.css am Arrow)
 *    Active: Doppelpfeil (.appnav-preview-arrow-active) via style.css
 *    Pressed / .is-navigating: gruene LED + nur gelbe Spitzklammer (kein Doppelpfeil)
 *    Yield (.active.is-yielding): Active fadet zu Not-Active waehrend Press auf anderem Item
 *    Cancel (.is-press-fadeout): gruene LED mittelschnell aus, Active zurueck
 *      → leftnav-accordion.css + leftnav-accordion.js
 *    Markup: bar + tip getrennt + active-Pfad (nav-domains / leftnav_app_arrow)
 *
 *  FEINTUNING — wo du Titel/Sub sonderanpasst (ohne Size zu aendern):
 *    PHP Item-Array (script.php $leftnav_app_items / nav-domains $domains_items):
 *      'title_px' => 17     → Klasse .leftnav-item--title-17  (Titel font-size)
 *      'sub_px'   => 9      → Klasse .leftnav-item--sub-9     (Sub font-size)
 *      'sub_wrap' => true   → Klasse .leftnav-item--sub-wrap  (Sub umbrechen)
 *    CSS-Regeln dazu: Abschnitt „Feintuning“ weiter unten in dieser Datei
 *    Neue px-Werte: Klasse .leftnav-item--title-N / .leftnav-item--sub-N anlegen
 *    Beispiel: AAM „WEBSEITEN BAUEN“ = XL-Sub 10px minus 1 → sub_px 9
 *
 *  S    – min-h ~38px | pad Y 4  | Titel ~14px | Sub ~8–9px     (Reserve)
 *  M    – min-h 44px  | pad Y 5  | Titel 16px  | Sub 9px/mt 3   → DOMAINS: GDK/HANDEL · APP: INTRO
 *  L    – min-h 58px* | pad 7×6* | Titel 18px  | Sub 9px/mt 5   → DOMAINS: TREUHAND  (*Basis style.css)
 *  XL   – min-h 58px* | pad 7×6* | Titel 23px  | Sub 10px/mt 5  → DOMAINS: PREISLISTE · APP: AAM, VPS
 *  2XL  – min-h ~64px | pad Y 8  | Titel ~27px | Sub ~10–11px   (Reserve)
 *  3XL  – min-h ~70px | pad Y 9  | Titel ~31px | Sub ~11px      (Reserve)
 *
 *  Scope: #menuRoot (DOMAINS + APP Accordion) und .domainsnav-preview-shell
 * ============================================================
 */

/* ----- Kopf wie Live-DOMAINS-Button (scharf, maisp1 42px) ----- */

#menuRoot .domainsnav-preview-shell .domainsnav-head {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 70px;
	margin: 0;
	padding: 8px 6px 6px 6px;
	/* Farben/Rahmen kommen von .appnav-preview-head */
	text-decoration: none !important;
}

/* Zahl links, Abstand zu DOMAINS (wie Live menu_4 + margin-left:25px) */
.domainsnav-head-count {
	position: absolute;
	left: 6px;
	top: 36px;
	display: block;
	min-width: 28px;
	width: auto;
	max-width: 36px;
	box-sizing: border-box;
	color: #ff9b00;
	font-size: 9px;
	font-weight: 500;
	line-height: 1;
	text-align: left;
	letter-spacing: 0;
	text-shadow: 0 0 5px rgba(255, 100, 0, 0.48);
	z-index: 1;
}

.domainsnav-head-text {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	/* Platz fuer 3–4-stellige Count links von DOMAINS */
	padding: 2px 4px 0 24px;
	text-align: left;
}

/* wie Original: small letter-spacing, opacity-aehnlich warm */
.domainsnav-head-text small {
	display: block;
	margin: 0 0 6px 0;
	padding: 0;
	color: rgba(255, 155, 0, 0.55);
	font: 500 9px/0.9 Arial, Helvetica, sans-serif;
	letter-spacing: 0.15em;
	white-space: nowrap;
	text-transform: none;
	/* KEIN APP letter-spacing 1.22em / scale */
	transform: none;
}

/* Original: font-size 42px, letter-spacing 0.01em, maisp1 - KEIN scaleX */
.domainsnav-head-text strong.warengruppe,
.domainsnav-head-text strong {
	display: inline-block;
	margin: 0;
	padding: 0;
	color: #ff9b00;
	font-family: maisp1, Arial, Helvetica, sans-serif;
	font-size: 42px !important;
	font-weight: bold;
	line-height: 0.95;
	letter-spacing: 0.01em;
	transform: none !important;
	transform-origin: left center;
	text-shadow:
		0 1px 0 rgba(255, 215, 90, 0.24),
		0 0 8px rgba(255, 75, 0, 0.24);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#menuRoot .domainsnav-preview-shell .domainsnav-head:hover .domainsnav-head-text small{
	color: #ffad21;
}

/*
 * Domains AUF, Ruhe: Kopf wie die anderen Main-Kacheln (schwarz).
 * Hover der Sektion faerbt weiterhin gelb (leftnav-accordion.css).
 */
#menuRoot .domainsnav-preview-shell.leftnav-acc-section.is-open > .domainsnav-head.appnav-preview-head{
	color: #000 !important;
	background: transparent !important;
	box-shadow: none;
	border-bottom: 0 !important;
}

#menuRoot .domainsnav-preview-shell.leftnav-acc-section.is-open .domainsnav-head-text small {
	color: #333 !important;
	opacity: 1 !important;
	text-shadow: none;
}

#menuRoot .domainsnav-preview-shell.leftnav-acc-section.is-open .domainsnav-head-text strong{
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#menuRoot .domainsnav-preview-shell.leftnav-acc-section.is-open .domainsnav-head-count {
	color: #006699 !important;
	text-shadow: none !important;
}

/* APP-Heading-Styles im Domain-Kopf aushebeln falls vererbt */
#menuRoot .domainsnav-preview-shell .domainsnav-head .appnav-preview-heading{
	transform: none !important;
	font-size: inherit;
	letter-spacing: inherit;
	margin-left: 0;
}

/*
 * ============================================================
 *  SUBMENU ITEM SIZES — Prototypen (Titel/Sub-Text = Inhalt)
 *  Scope: #menuRoot (DOMAINS + APP) · .domainsnav-preview-shell
 * ============================================================
 */

/* Gemeinsame Defaults: Titel + Unterzeile */
#menuRoot .leftnav-item-title,
#menuRoot .domainsnav-title{
	display: block;
	line-height: 1.05;
	letter-spacing: 0;
	white-space: nowrap;
}

#menuRoot .leftnav-item-sub,
#menuRoot .domainsnav-sub{
	display: block;
	margin-top: 5px;
	font: 400 10px/1.05 Arial, Helvetica, sans-serif;
	letter-spacing: 0;
	white-space: nowrap;
}

/* Keine leere Sub-Zeile rendern/platzieren (z.B. APP INTRO) */
#menuRoot .leftnav-item-sub:empty{
	display: none;
}

/* --- S (Reserve) --- */
#menuRoot .leftnav-item--s{
	min-height: 38px;
	padding-top: 4px;
	padding-bottom: 4px;
}
#menuRoot .leftnav-item--s .leftnav-item-title{
	font-size: 14px !important;
	letter-spacing: 0;
	white-space: nowrap;
	line-height: 1.05;
}
#menuRoot .leftnav-item--s .leftnav-item-sub{
	font-size: 8px;
	margin-top: 2px;
	letter-spacing: 0;
}

/* --- M → DOMAINS: GDK/HANDEL · APP: INTRO --- */
#menuRoot .leftnav-item--m{
	min-height: 44px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#menuRoot .leftnav-item--m .leftnav-item-title{
	font-size: 16px !important;
	letter-spacing: 0.02em;
	white-space: normal;
	line-height: 1.05 !important;
}
#menuRoot .leftnav-item--m .leftnav-item-sub{
	font-size: 9px;
	letter-spacing: 0.04em;
	margin-top: 3px;
}

/* --- L → TREUHAND (Zeile = Basis .appnav-preview-item 58px) --- */
#menuRoot .leftnav-item--l .leftnav-item-title{
	font-size: 18px !important;
	letter-spacing: 0;
	white-space: nowrap;
}
#menuRoot .leftnav-item--l .leftnav-item-sub{
	font-size: 9px;
	letter-spacing: 0;
	margin-top: 5px;
}

/*
 * --- XL → DOMAINS: PREISLISTE · APP: AAM EDITOR, APP VPS ---
 * style.css setzt .appnav-preview-copy strong { font: 400 24px/.95 … }
 * → komplette Shorthand hier ueberschreiben, sonst wirkt APP-XL anders als PREISLISTE
 */
#menuRoot .leftnav-item--xl .leftnav-item-title,
#menuRoot .leftnav-item--xl .appnav-preview-copy strong,
#menuRoot .leftnav-item--xl .appnav-preview-copy strong.leftnav-item-title{
	display: block !important;
	margin: 0 !important;
	/* exakt wie ehem. .domainsnav-title-preise + maisp1-Stack */
	font: 400 23px/1.05 maisp1, Arial, Helvetica, sans-serif !important;
	font-size: 23px !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: 0.03em !important;
	white-space: nowrap !important;
	text-transform: none !important;
	transform: none !important;
	-webkit-text-size-adjust: 100%;
}
#menuRoot .leftnav-item--xl .leftnav-item-sub,
#menuRoot .leftnav-item--xl .appnav-preview-copy small{
	display: block;
	font: 400 10px/1.05 Arial, Helvetica, sans-serif !important;
	font-size: 10px !important;
	letter-spacing: 0.05em !important;
	margin-top: 5px !important;
	white-space: nowrap;
}
/* sub_px Feintuning bleibt staerker (z.B. WEBSEITEN BAUEN 9px) */

/* --- 2XL (Reserve) --- */
#menuRoot .leftnav-item--2xl{
	min-height: 64px;
	padding-top: 8px;
	padding-bottom: 8px;
}
#menuRoot .leftnav-item--2xl .leftnav-item-title{
	font-size: 27px !important;
	letter-spacing: 0.02em;
	white-space: nowrap;
	line-height: 1.05;
}
#menuRoot .leftnav-item--2xl .leftnav-item-sub{
	font-size: 10px;
	margin-top: 5px;
	letter-spacing: 0.04em;
}

/* --- 3XL (Reserve) --- */
#menuRoot .leftnav-item--3xl{
	min-height: 70px;
	padding-top: 9px;
	padding-bottom: 9px;
}
#menuRoot .leftnav-item--3xl .leftnav-item-title{
	font-size: 31px !important;
	letter-spacing: 0.01em;
	white-space: nowrap;
	line-height: 1.05;
}
#menuRoot .leftnav-item--3xl .leftnav-item-sub{
	font-size: 11px;
	margin-top: 5px;
	letter-spacing: 0.03em;
}

/*
 * ============================================================
 *  FEINTUNING — Titel/Sub sonder (Size bleibt)
 *  PHP: 'title_px'=>N  'sub_px'=>N  'sub_wrap'=>true
 *  Neue Werte: hier Klasse ergaenzen, dann im Item-Array setzen
 * ============================================================
 */
#menuRoot .leftnav-item--title-17 .leftnav-item-title{
	font-size: 17px !important;
}
/* WEBSEITEN BAUEN: XL-Sub default 10 → 9 (nach XL-Block, hoehere Spezifitaet) */
#menuRoot .leftnav-item--sub-9 .leftnav-item-sub,
#menuRoot .leftnav-item--sub-9 .appnav-preview-copy small{
	font-size: 9px !important;
}
#menuRoot .leftnav-item--sub-wrap .leftnav-item-sub{
	white-space: normal;
	letter-spacing: 0;
}

/*
 * ============================================================
 *  PROTOTYP-PFEIL (Item-Standard DOMAINS + APP)
 *  Ruhe: Spitzklammer 1px
 *  Hover (nicht active): Spitzklammer (gegen style.css Doppelpfeil)
 *  Active: Doppelpfeil (style.css)
 *  Pressed/Navigating: Spitzklammer gelb + gruene LED (leftnav-accordion.css)
 *  Markup: .domainsnav-arrow-bar + .domainsnav-arrow-tip + active
 * ============================================================
 */

/* --- Ruhe: nicht .active, nicht :hover, nicht pressed/nav --- */
#menuRoot .appnav-preview-item:not(.active):not(:hover):not(:active):not(.is-navigating) .appnav-preview-arrow{
	color: #666;
	opacity: 0.75;
}

/* Balken im Ruhezustand weg → nur Spitzklammer */
#menuRoot .appnav-preview-item:not(.active):not(:hover):not(:active):not(.is-navigating) .domainsnav-arrow-bar{
	display: none;
}

/* Spitzklammer (tip), 1px Haarlinie */
#menuRoot .appnav-preview-item:not(.active):not(:hover):not(:active):not(.is-navigating) .domainsnav-arrow-tip{
	display: block;
	stroke-width: 1;
	filter: none;
}

#menuRoot .appnav-preview-item:not(.active):not(:hover):not(:active):not(.is-navigating) .appnav-preview-arrow-active{
	display: none;
}

/*
 * --- Hover (noch nicht active): nur Spitzklammer ---
 * style.css blendet .arrow-normal aus und zeigt .arrow-active (Doppelpfeil).
 * Hier: Doppelpfeil aus, Balken aus, nur tip sichtbar.
 * :active / .is-navigating → leftnav-accordion.css (Pressed)
 */
#menuRoot .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .appnav-preview-arrow-active{
	display: none !important;
}

#menuRoot .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .domainsnav-arrow-bar{
	display: none !important;
}

#menuRoot .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .domainsnav-arrow-tip,
#menuRoot .appnav-preview-item:not(.active):hover:not(:active):not(.is-navigating) .appnav-preview-arrow-normal.domainsnav-arrow-tip{
	display: block !important;
	stroke-width: 1 !important;
	filter: none !important;
}

/*
 * ============================================================
 *  LED Domains-Menue
 *  Inaktiv + Hover-inaktiv: wie APP original (style.css Backup)
 *  Aktiv: gruene fotorealistische Platinen-LED + randomflicker
 * ============================================================
 */

/* Basis-Layout (Kinder core/shine nur bei active sichtbar) */
#menuRoot .domainsnav-preview-shell .domainsnav-led {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	overflow: visible;
	filter: none;
}

#menuRoot .domainsnav-preview-shell .domainsnav-led-core{
	display: none;
	pointer-events: none;
}

/* --- INAKTIV: Slot bleibt, LED unsichtbar (Hover-Tab in accordion.css) --- */
#menuRoot .domainsnav-preview-shell .appnav-preview-item:not(.active) .domainsnav-led{
	border: 0;
	background: none;
	box-shadow: none;
}

/* --- AKTIV: gruene Geraete-LED (unveraendert gut) --- */
#menuRoot .domainsnav-preview-shell .appnav-preview-item.active .domainsnav-led{
	width: 11px;
	height: 11px;
	border: 1px solid #1a4a22;
	background:
		radial-gradient(
			circle at 32% 28%,
			#2a5a32 0%,
			#0d2814 50%,
			#041208 100%
		);
	box-shadow:
		inset 0 1px 1px rgba(180, 255, 190, 0.18),
		inset 0 -1px 2px rgba(0, 0, 0, 0.65),
		0 0 0 1px rgba(0, 40, 10, 0.8),
		0 0 4px 1px rgba(40, 255, 90, 0.55),
		0 0 10px 2px rgba(20, 220, 70, 0.35),
		0 0 16px 3px rgba(0, 180, 50, 0.18);
}

#menuRoot .domainsnav-preview-shell .appnav-preview-item.active .domainsnav-led-core{
	display: block;
	position: absolute;
	left: 1px;
	top: 1px;
	right: 1px;
	bottom: 1px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle at 38% 30%,
			#e8ffe8 0%,
			#7dff7a 18%,
			#22e848 42%,
			#0aa828 68%,
			#046818 100%
		);
	box-shadow:
		inset 0 0 3px rgba(255, 255, 220, 0.65),
		inset 0 -1px 2px rgba(0, 60, 20, 0.45),
		0 0 3px rgba(80, 255, 120, 0.9);
}

#menuRoot .domainsnav-preview-shell .appnav-preview-item.active .domainsnav-led-shine{
	display: block;
	position: absolute;
	left: 22%;
	top: 16%;
	width: 38%;
	height: 30%;
	border-radius: 50%;
	z-index: 2;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.78) 0%,
		rgba(220, 255, 220, 0.35) 45%,
		rgba(255, 255, 255, 0) 100%
	);
	opacity: 0.95;
}

/* Randomflicker nur an aktiver gruener LED */
#menuRoot .domainsnav-preview-shell .domainsnav-led[data-ui-fx~="randomflicker"] {
	will-change: opacity, filter, box-shadow;
}

#menuRoot .domainsnav-preview-shell .domainsnav-led[data-ui-fx~="randomflicker"].ui-randomflicker--smear {
	--ui-randomflicker-shift-x: 0px;
	--ui-randomflicker-skew-x: 0deg;
	--ui-randomflicker-blur: 0.2px;
}