/* =============================================================================
   KI CREW – Hauptnavigation (nav.css)

   Ergänzt und überschreibt die Header-Regeln aus base.css. Wird nach base.css
   geladen (Abhängigkeit „kicrew-base"), base.css selbst bleibt unangetastet.

   Zuständig für die zweite Ebene der Navigation (SPEC 11.1):
     Desktop  ab 1200px  – Dropdown bei Hover, Fokus und per Umschaltknopf
     Mobil unter 1200px  – Akkordeon im Navigationspanel unter dem Header

   Alle Klassen tragen das Präfix .kc-nav- bzw. .kc-site-header-.

   Gliederung
     1. Elternpunkt und Umschaltknopf
     2. Untermenü: Fläche und Einträge
     3. Desktop ab 1200px: Dropdown
     4. 1200–1440px: kompakte Zeile
     5. Mobil unter 1200px: Akkordeon
     6. Bewegungsreduktion
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Elternpunkt und Umschaltknopf
   -------------------------------------------------------------------------- */

/* Bezugspunkt für das absolut gesetzte Dropdown. */
.kc-nav__item {
	position: relative;
}

/*
 * Der Elternpunkt bleibt ein normaler Link auf die Übersicht. Geöffnet wird die
 * Unterebene über Hover, Fokus oder diesen Knopf – nie über den Link selbst.
 */
.kc-nav__toggle-sub {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	line-height: 1;
}

.kc-nav__toggle-sub:hover {
	color: var(--kc-accent-dark);
}

/* arrow-right gedreht: geschlossen zeigt das Icon nach unten, offen nach oben. */
.kc-nav__toggle-sub-icon {
	transform: rotate(90deg);
	transition: transform .14s ease;
}

/*
 * Offen ist ein Untermenü, wenn der Knopf auf aria-expanded="true" steht oder
 * das JS die Zustandsklasse .kc-nav__item--open am Elternpunkt gesetzt hat
 * (assets/js/main.js setzt beides).
 */
.kc-nav__toggle-sub[aria-expanded="true"] .kc-nav__toggle-sub-icon,
.kc-nav__item--open > .kc-nav__toggle-sub .kc-nav__toggle-sub-icon {
	transform: rotate(-90deg);
}

/* -----------------------------------------------------------------------------
   2. Untermenü: Fläche und Einträge
   -------------------------------------------------------------------------- */

.kc-nav__submenu {
	list-style: none;
	margin: 0;
}

.kc-nav__submenu-item {
	display: block;
}

.kc-nav__submenu-link {
	display: block;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kc-black);
	transition: background-color .14s ease, color .14s ease;
}

/* Hover und Fokus in Flieder Dunkel (CD 2.1: Flieder Dunkel = Hover/Active). */
.kc-nav__submenu-link:hover,
.kc-nav__submenu-link:focus-visible {
	background: rgba(133, 133, 255, .12);
	color: var(--kc-accent-dark);
}

.kc-nav__submenu-item--active > .kc-nav__submenu-link {
	color: var(--kc-accent-dark);
	font-weight: 600;
}

/* -----------------------------------------------------------------------------
   3. Desktop ab 1200px: Dropdown
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
	/*
	 * Navigation, Liste und Menüpunkte füllen die Höhe des Headers. Nur so
	 * beginnt das Dropdown genau an der Headerkante und der Weg von der Maus
	 * zum Panel reißt nicht ab.
	 */
	.kc-nav {
		align-self: stretch;
		display: flex;
		align-items: stretch;
		justify-content: flex-end;
	}

	.kc-nav__list {
		flex: 1 1 auto;
		align-items: stretch;
		min-width: 0;
	}

	.kc-nav__item {
		display: flex;
		align-items: center;
		gap: 2px;
		min-width: 0;
	}

	/*
	 * Sieben Punkte, darunter mehrwortige Beschriftungen: sie dürfen umbrechen,
	 * statt den Header zu sprengen. Bei genügend Platz bleibt die Beschriftung
	 * einzeilig.
	 */
	.kc-nav__link {
		white-space: normal;
		text-align: left;
	}

	/*
	 * Bricht die Beschriftung um, schrumpft die Linkbox nicht auf die Breite
	 * der längsten Zeile zurück – Flexbox rechnet die Breite nur einmal. Der
	 * Umschaltpfeil daneben stand dadurch bis zu 90px vom Text entfernt.
	 * min-content bindet die Box an das längste Wort, der Pfeil bleibt am Text.
	 */
	.kc-nav__item--has-children > .kc-nav__link {
		max-width: min-content;
	}

	.kc-nav__toggle-sub {
		width: 24px;
		height: 24px;
		padding: 4px;
	}

	.kc-nav__submenu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 210;
		min-width: 260px;
		max-width: min(360px, calc(100vw - 2 * var(--kc-gutter)));
		/*
		 * Der Innenabstand oben schafft die Luft zur Headerkante. Ein echter
		 * Abstand (margin/top-Offset) würde den Hover unterbrechen.
		 */
		padding: 20px 12px 16px;
		border-radius: 16px;
		border-top: 1px solid var(--kc-accent);
		background: var(--kc-white);
		box-shadow: var(--kc-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .14s ease, transform .14s ease, visibility .14s;
	}

	/*
	 * Die drei letzten Punkte öffnen nach links, damit das Panel bei schmalen
	 * Fenstern nicht aus dem Bild läuft.
	 */
	.kc-nav__list > .kc-nav__item:nth-last-child(-n+3) > .kc-nav__submenu {
		left: auto;
		right: 0;
	}

	/*
	 * Geöffnet: bei Hover, bei Fokus innerhalb des Menüpunkts (Tastatur) und
	 * wenn der Umschaltknopf auf aria-expanded="true" steht (JS).
	 */
	.kc-nav__item--has-children:hover > .kc-nav__submenu,
	.kc-nav__item--has-children:focus-within > .kc-nav__submenu,
	.kc-nav__item--open > .kc-nav__submenu,
	.kc-nav__toggle-sub[aria-expanded="true"] + .kc-nav__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/*
	 * Ausdrücklich geschlossen: Escape schließt die Unterebene und setzt den
	 * Fokus zurück auf den Elternpunkt – der liegt innerhalb von :focus-within,
	 * das Panel würde also offen bleiben. Setzt das JS zusätzlich diese Klasse,
	 * bleibt es zu. Die Maus hebt den Zustand wieder auf.
	 */
	.kc-nav__item--closed:not(:hover) > .kc-nav__submenu {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
	}
}

/* -----------------------------------------------------------------------------
   4. 1200–1440px: kompakte Zeile
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) and (max-width: 1440px) {
	.kc-nav__list {
		gap: clamp(10px, 1.2vw, 18px);
	}

	.kc-nav__link {
		font-size: var(--kc-size-micro);
		letter-spacing: .04em;
	}

	.kc-nav__item {
		gap: 0;
	}

	.kc-nav__toggle-sub {
		width: 20px;
		height: 20px;
		padding: 2px;
	}

	.kc-nav__submenu {
		min-width: 240px;
		padding: 16px 10px 14px;
	}

	.kc-nav__submenu-link {
		padding: 8px 10px;
		font-size: 14px;
	}
}

/* -----------------------------------------------------------------------------
   5. Mobil unter 1200px: Akkordeon
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
	/*
	 * Das Panel selbst liefert base.css. Ergänzt wird die Höhe an dynamischen
	 * Browserleisten und das Scrollen bleibt im Panel.
	 */
	.kc-nav {
		max-height: calc(100dvh - var(--kc-header-offset));
		overscroll-behavior: contain;
	}

	/*
	 * Elternpunkt und Umschaltknopf stehen in einer Zeile, das Untermenü in der
	 * Zeile darunter. Der Elternlink bleibt dadurch anklickbar.
	 */
	.kc-nav__item--has-children {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.kc-nav__item--has-children > .kc-nav__link {
		grid-column: 1;
	}

	/*
	 * Kleiner als die 44px der runden Knöpfe im Header: die Zeile des
	 * Menüpunkts ist selbst nur 44px hoch, ein gleich großer Kreis läge damit
	 * genau auf den Trennlinien darüber und darunter. 32px lassen auf beiden
	 * Seiten Luft und bleiben deutlich über der Mindestzielgröße von 24px
	 * (WCAG 2.2, 2.5.8).
	 */
	.kc-nav__toggle-sub {
		grid-column: 2;
		width: 32px;
		height: 32px;
		border: 1px solid var(--kc-line);
	}

	.kc-nav__submenu {
		grid-column: 1 / -1;
		max-height: 0;
		overflow: hidden;
		/*
		 * Kein Innenabstand oben und unten im geschlossenen Zustand: max-height
		 * bezieht sich bei border-box auf die Rahmenbox und kann sie nicht unter
		 * die Höhe des Innenabstands drücken. Die Zeile des Elternpunkts wäre
		 * sonst höher als eine ohne Unterebene und der Pfeil säße zu dicht an
		 * der Trennlinie darüber. Die Luft kommt deshalb erst im offenen Zustand.
		 */
		padding: 0 0 0 var(--kc-space-2);
		border-left: 1px solid var(--kc-accent);
		opacity: 0;
		visibility: hidden;
		transition: max-height .14s ease, opacity .14s ease, visibility .14s;
	}

	.kc-nav__item--open > .kc-nav__submenu,
	.kc-nav__toggle-sub[aria-expanded="true"] + .kc-nav__submenu {
		max-height: 30rem;
		padding-block: 4px;
		margin-bottom: var(--kc-space-2);
		opacity: 1;
		visibility: visible;
	}

	.kc-nav__submenu-link {
		padding: 11px 12px;
	}
}

/* -----------------------------------------------------------------------------
   6. Bewegungsreduktion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kc-nav__submenu {
		transform: none;
		transition: none;
	}

	.kc-nav__toggle-sub-icon {
		transition: none;
	}
}