/* REALDOT 2027 · Child-Theme-CSS
   YOOtheme lädt diese Datei nach dem Theme-CSS. Klassen setzt ihr im Builder unter Element → Advanced → CSS Class. */

:root {
	--rd-schwarz: #000000;
	--rd-ink: #111113;
	--rd-ink-soft: #8a8d94;
	--rd-line: rgba(255, 255, 255, 0.14);
	--rd-bg-soft: #f4f4f5;
	--rd-radius-sheet: 44px;
	--rd-radius-card: 28px;
	--rd-nav-h: 64px;
	--rd-nav-top: 34px;
}

/* Varianten des Grid-Elements (Feld „RD-Variante“ unter Advanced).
   Je Variante hier eine Regel .rd-grid--projekte, .rd-grid--leistung, .rd-grid--logos anlegen. */

/* Hauptnavigation als helle Kapsel, die schwarze Pille liegt auf dem aktiven Punkt und gleitet beim Überfahren mit */

.tm-header .uk-navbar-nav {
	position: relative;
	align-self: center;
	align-items: center;
	gap: 4px;
	padding: 6px;
	border-radius: 999px;
	background: rgba(236, 236, 239, 0.95);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

.tm-header .uk-navbar-nav::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: var(--rd-pille-x, 0);
	width: var(--rd-pille-b, 0);
	border-radius: 999px;
	background: var(--rd-schwarz);
	opacity: var(--rd-pille-an, 0);
	transition: left 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s;
	pointer-events: none;
}

.tm-header .uk-navbar-nav > li > a {
	position: relative;
	z-index: 1;
	min-height: 0;
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--rd-ink);
	transition: color 0.3s;
}

.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-nav > li.rd-pille > a {
	color: #fff;
}

/* YOOtheme legt dem aktiven Punkt einen farbigen Strich unter, in der Kapsel stört er */
.tm-header .uk-navbar-nav > li > a::before {
	display: none;
}