/* ===========================================================
   custom.css — eigene Anpassungen, unabhängig vom Theme (main.css)
   =========================================================== */

/* Mega-Menü (PC Kurse / Android & iOS Kurse): jede Kategorie
   (Logo + zugehörige Kurslinks) als eine zusammenhängende Grid-Zelle,
   damit main.css' 2-spaltiges Grid sie nicht durcheinanderwürfelt.
   Die Kategorie-Box bleibt ein <li> (nötig, damit main.css' Grid sie
   korrekt platziert), die Kurslinks selbst sind bewusst <div>/<a> statt
   <ul>/<li> — sonst greifen main.css' generische Menü-Regeln (die für
   normale Flyout-Untermenüs gedacht sind: position:absolute, verstecktes
   2-Spalten-Grid usw.) hier fälschlich mit hinein. */

.header .primary-header-inner .header-menu-wrap ul li.mega-menu ul li.mega-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.header .primary-header-inner .header-menu-wrap ul li.mega-menu ul li.mega-col:hover {
	background-color: transparent;
}
.header .primary-header-inner .header-menu-wrap ul li.mega-menu ul {
	row-gap: 6px;
	column-gap: 24px;
}

.mega-col-logo {
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 10px;
}
.mega-col-logo img {
	display: block;
	height: 44px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	margin: 0;
}

.mega-col-links {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

/* Korrektur: Der Mega-Menü-Hintergrund ist NICHT immer weiß, sondern
   theme-abhängig (main.css, Zeile ~3264 + ~21029) — Dark Mode: dunkel
   (--rr-color-bg-1), Hell-Modus: weiß. Textfarbe muss deshalb ebenfalls
   theme-abhängig sein, sonst ist sie in einem der beiden Modi unsichtbar. */
.header .primary-header-inner .header-menu-wrap ul li.mega-menu ul .mega-col-links a {
	display: block;
	color: var(--rr-color-common-white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 6px 0;
	text-decoration: none;
}
[data-theme=light] .header .primary-header-inner .header-menu-wrap ul li.mega-menu ul .mega-col-links a {
	color: var(--rr-color-heading-primary);
}
.header .primary-header-inner .header-menu-wrap ul li.mega-menu ul .mega-col-links a:hover {
	color: var(--rr-color-theme-primary);
}

/* Dropdown etwas breiter, damit die Kurslinks möglichst einzeilig passen.
   Gleiche Breakpoints wie main.css, Werte erhöht und "left" entsprechend
   nachgezogen, damit das Menü mittig unter "PC Kurse" bleibt. */
@media (min-width: 1600px) {
	.header .primary-header-inner .header-menu-wrap ul li.mega-menu ul {
		width: 40%;
		left: 32% !important;
	}
}
@media (min-width: 1399px) and (max-width: 1600px) {
	.header .primary-header-inner .header-menu-wrap ul li.mega-menu ul {
		width: 40%;
		left: 20% !important;
	}
}
@media (min-width: 1199px) and (max-width: 1399px) {
	.header .primary-header-inner .header-menu-wrap ul li.mega-menu ul {
		width: 52%;
		left: 18% !important;
	}
}
@media (min-width: 993px) and (max-width: 1199px) {
	.header .primary-header-inner .header-menu-wrap ul li.mega-menu ul {
		width: 64%;
		left: 14% !important;
	}
}

/* SEO-Fix (06.08.2026): Auf einigen Kursseiten war die erste .title-Überschrift
   ein <h2>, da diese Seiten keinen page-header-Bereich mit <h1> haben. Für
   korrekte SEO-Struktur (genau ein <h1> pro Seite) wurde das erste .title in
   .service-details-content von <h2> auf <h1> umgestellt. Diese Regel hält die
   Optik exakt wie vorher (main.css setzt sonst h1 { font-size: 60px } statt
   der bisherigen h2-Größe von 48px). */
.service-details-content > h1.title:first-child {
	font-size: var(--rr-fs-h2);
}