/* ==========================================================================
   PCTL Navigation - Leiste mit Megamenue und Vollbild-Overlay.

   Beide Darstellungen kommen aus templates/menu/definition.php. Die Optik
   folgt Banner und Zugangsseiten: dunkles Blau, blaue Akzente, Oswald fuer
   Beschriftungen in Versalien.

   Alles haengt unter .pctl-menu bzw. .pctl-mobilmenu, damit nichts in das
   uebrige Layout ausstrahlt.
   ========================================================================== */

/* Dieselbe Anzeigeschrift wie Banner und Zugangsseiten. Bewusst hier
   wiederholt, damit das Menue auch auf Seiten stimmt, die banner.css nicht
   laden - die Datei wird deswegen kein zweites Mal geholt, die Adresse ist
   identisch. */
@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("/templates/fonts/oswald-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("/templates/fonts/oswald-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.pctl-menu,
.pctl-mobilmenu {
	--m-deep: #05090f;
	--m-bg: #0c1728;
	--m-panel: #101f36;
	--m-line: rgba(93, 160, 233, 0.22);
	--m-text: #e8f0fb;
	--m-muted: #93a9c4;
	--m-accent: #4da3ff;
	--m-font: "Oswald", "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.pctl-menu *,
.pctl-mobilmenu * {
	box-sizing: border-box;
}

/* --- Leiste --------------------------------------------------------------- */

.pctl-menu {
	position: relative;
	z-index: 1030;
	background: linear-gradient(180deg, var(--m-bg), #091324);
	border-bottom: 1px solid var(--m-line);
}

.pctl-menu__leiste {
	display: flex;
	align-items: center;
	gap: 2px;
	min-height: 52px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 8px;
}

.pctl-menu__punkte {
	display: flex;
	align-items: stretch;
	gap: 2px;
	margin: 0 auto 0 0; /* schiebt Suche und Schnellzugriffe nach rechts */
	padding: 0;
	list-style: none;
}

.pctl-menu__punkt {
	position: static;
}

/* Knopf und Marke treten an die Stelle der Menuepunkte, sobald die Leiste zu
   schmal fuer sie wird. Sie stehen deshalb erst unterhalb des Umschaltpunkts. */
.pctl-menu__burger,
.pctl-menu__marke {
	display: none;
	flex: 0 0 auto;
}

.pctl-menu__burger {
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: rgba(93, 160, 233, 0.12);
	color: var(--m-text);
	font-size: 19px;
	cursor: pointer;
}

.pctl-menu__burger:hover,
.pctl-menu__burger:focus-visible {
	background: rgba(93, 160, 233, 0.24);
	color: #ffffff;
}

.pctl-menu__marke {
	align-items: center;
	margin-right: auto;
	padding: 4px;
	min-width: 0;
	overflow: hidden;
}

.pctl-menu__marke img {
	display: block;
	width: auto;
	height: 26px;
}

.pctl-menu__knopf {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 52px;
	white-space: nowrap; /* sonst bricht "Mein Verein" in der engen Leiste um */
	padding: 0 16px;
	font-family: var(--m-font);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--m-text);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.pctl-menu__knopf > .fas:first-child {
	font-size: 14px;
	color: var(--m-accent);
}

.pctl-menu__pfeil {
	font-size: 10px;
	color: var(--m-muted);
	transition: transform 0.18s ease;
}

.pctl-menu__punkt:hover .pctl-menu__knopf,
.pctl-menu__punkt.is-offen .pctl-menu__knopf {
	color: #ffffff;
	background: rgba(77, 163, 255, 0.1);
	border-bottom-color: var(--m-accent);
}

.pctl-menu__punkt.is-offen .pctl-menu__pfeil {
	transform: rotate(180deg);
}

/* Aktueller Bereich */
.pctl-menu__punkt.is-aktiv .pctl-menu__knopf {
	border-bottom-color: var(--m-accent);
	background: rgba(77, 163, 255, 0.07);
}

/* Seitensuche zwischen Menuepunkten und Schnellzugriffen. Sie ist das
   einzige Element der Zeile, das schrumpfen darf: wird der Platz knapp,
   gibt sie nach, statt die Leiste umbrechen zu lassen. */
.pctl-menu__suchfeld {
	position: relative;
	flex: 0 1 210px;
	min-width: 120px;
	margin: 0 6px 0 0;
}

.pctl-menu__suchfeld .fas {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	font-size: 13px;
	color: var(--m-muted);
	pointer-events: none;
}

.pctl-menu__suchfeld input {
	width: 100%;
	height: 32px;
	padding: 0 12px 0 34px;
	font-size: 13px;
	color: var(--m-text);
	background: rgba(5, 12, 24, 0.7);
	border: 1px solid var(--m-line);
	border-radius: 999px;
	outline: none;
	transition: width 0.18s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pctl-menu__suchfeld input::placeholder {
	color: #6f849f;
}

.pctl-menu__suchfeld input:focus {
	border-color: var(--m-accent);
	box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16);
}

/* --- Megamenue ------------------------------------------------------------

   Alle Panels liegen uebereinander in einer gemeinsamen Buehne. Beim Wechsel
   laeuft deren Hoehe von der alten zur neuen weiter, waehrend die Inhalte
   ueberblenden - dadurch kein Aufblitzen mehr.
   -------------------------------------------------------------------------- */

.pctl-menu__buehne {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 0;
	overflow: hidden;
	background: linear-gradient(180deg, var(--m-panel), #0a1424);
	border-bottom: 1px solid rgba(0, 0, 0, 0.5);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
	transition: height 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Die Linie oben erscheint erst, wenn die Buehne offen ist */
.pctl-menu__buehne::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--m-line);
}

.pctl-menu__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 22px 0 26px;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.pctl-menu__panel.is-sichtbar {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Beim Wechsel zwischen zwei offenen Punkten faellt der Versatz weg, sonst
   wirkt die Ueberblendung unruhig */
.pctl-menu.is-offen .pctl-menu__panel {
	transform: none;
	transition: opacity 0.14s ease;
}

.pctl-menu__spalten {
	display: grid;
	grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr));
	gap: 8px 26px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
}

.pctl-menu__spalte + .pctl-menu__spalte {
	border-left: 1px solid rgba(93, 160, 233, 0.12);
	padding-left: 26px;
}

.pctl-menu__spaltentitel {
	margin: 0 0 10px;
	font-family: var(--m-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--m-accent);
}

.pctl-menu__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pctl-menu__liste a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 7px 10px;
	font-size: 14px;
	line-height: 1.3;
	color: #cfdcec;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.pctl-menu__liste a:hover,
.pctl-menu__liste a:focus-visible {
	color: #ffffff;
	background: rgba(77, 163, 255, 0.14);
	outline: none;
}

.pctl-menu__liste .fas {
	width: 18px;
	font-size: 13px;
	text-align: center;
	color: var(--m-muted);
	flex: 0 0 18px;
}

.pctl-menu__liste a:hover .fas {
	color: var(--m-accent);
}

/* Wettbewerbslogos sind fuer helle Flaechen gezeichnet, die internationalen
   sogar rein dunkel (501, 502, 506 bestehen zu 100 % aus dunklen Pixeln).
   Im Menue ist der Grund immer dunkel, deshalb bekommt jedes Logo eine helle
   Unterlage. Das wirkt fuer alle Logos gleich und kommt ohne eine Liste
   einzelner Dateinamen aus, die bei jedem neuen Wettbewerb nachgepflegt
   werden muesste. */
.pctl-menu__bild {
	width: 24px;
	height: 24px;
	padding: 2px;
	object-fit: contain;
	flex: 0 0 24px;
	background: rgba(236, 244, 255, 0.92);
	border-radius: 5px;
}

/* stylev3.css hellt einzelne Wettbewerbslogos im Darkmode auf (brightness(0)
   invert(1)), weil sie dort auf dunklem Grund liegen. Im Menue haben sie ihre
   eigene helle Unterlage, dort wuerde das Aufhellen sie unsichtbar machen.
   Die Selektoren sind absichtlich so lang, damit sie ohne !important gewinnen. */
html[data-user-theme] .pctl-menu .pctl-menu__bild,
html[data-user-theme] .pctl-mobilmenu .pctl-menu__bild {
	filter: none;
}

/* --- Overlay -------------------------------------------------------------- */

.pctl-mobilmenu {
	position: fixed;
	inset: 0;
	z-index: 2100;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #0d1b30 0%, #070f1d 60%, var(--m-deep) 100%);
	color: var(--m-text);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.pctl-mobilmenu.is-offen {
	opacity: 1;
}

.pctl-mobilmenu__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--m-line);
}

.pctl-mobilmenu__logo {
	height: 26px;
	width: auto;
}

.pctl-mobilmenu__schliessen {
	width: 40px;
	height: 40px;
	font-size: 20px;
	color: var(--m-text);
	background: rgba(77, 163, 255, 0.1);
	border: 1px solid var(--m-line);
	border-radius: 10px;
	cursor: pointer;
}

.pctl-mobilmenu__suche {
	position: relative;
	padding: 12px 16px;
}

.pctl-mobilmenu__suche .fas {
	position: absolute;
	top: 50%;
	left: 30px;
	transform: translateY(-50%);
	color: var(--m-muted);
	font-size: 14px;
	pointer-events: none;
}

.pctl-mobilmenu__suche input {
	width: 100%;
	height: 44px;
	padding: 0 14px 0 40px;
	font-size: 16px; /* kleiner zoomt iOS beim Tippen hinein */
	color: var(--m-text);
	background: rgba(5, 12, 24, 0.85);
	border: 1px solid var(--m-line);
	border-radius: 10px;
	outline: none;
}

.pctl-mobilmenu__suche input:focus {
	border-color: var(--m-accent);
	box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16);
}

.pctl-mobilmenu__inhalt {
	flex: 1;
	overflow-y: auto;
	padding: 0 12px 28px;
	-webkit-overflow-scrolling: touch;
}

.pctl-mobilmenu__seitensuche {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 10px 0 6px;
	padding: 12px 12px;
	color: var(--m-text);
	text-decoration: none;
	background: rgba(77, 163, 255, 0.12);
	border: 1px solid var(--m-line);
	border-radius: 10px;
}

.pctl-mobilmenu__seitensuche span {
	flex: 1;
	min-width: 0;
	display: block;
	line-height: 1.35;
}

.pctl-mobilmenu__seitensuche b {
	display: block;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pctl-mobilmenu__seitensuche small {
	color: var(--m-muted);
	font-size: 12px;
}

.pctl-mobilmenu__seitensuche .fas:first-child {
	color: var(--m-accent);
}

.pctl-mobilmenu__seitensuche .fas:last-child {
	color: var(--m-muted);
	font-size: 13px;
}

.pctl-mobilmenu__leer {
	margin: 24px 0;
	text-align: center;
	color: var(--m-muted);
}

.pctl-akkordeon {
	border-bottom: 1px solid rgba(93, 160, 233, 0.14);
}

.pctl-akkordeon__knopf {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 15px 6px;
	font-family: var(--m-font);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--m-text);
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}

.pctl-akkordeon__knopf > .fas:first-child {
	color: var(--m-accent);
	width: 20px;
	text-align: center;
}

.pctl-akkordeon__knopf span {
	flex: 1;
}

.pctl-akkordeon__pfeil {
	font-size: 12px;
	color: var(--m-muted);
	transition: transform 0.18s ease;
}

.pctl-akkordeon__knopf[aria-expanded="true"] .pctl-akkordeon__pfeil {
	transform: rotate(180deg);
}

.pctl-akkordeon__inhalt {
	padding: 0 0 12px;
}

.pctl-akkordeon__inhalt .pctl-menu__spaltentitel {
	margin: 10px 0 4px 6px;
	font-size: 11px;
}

.pctl-akkordeon__inhalt .pctl-menu__liste a {
	padding: 11px 10px; /* groessere Trefferflaeche fuer den Daumen */
	font-size: 15px;
}

/* --- Schnellzugriffe ------------------------------------------------------
   Rechtes Ende derselben Zeile: Design-Umschalter, Nachrichten, Angebote,
   Coins und je nach Rolle Profil, Verwaltung und Abmelden.
   -------------------------------------------------------------------- */

.pctl-menu__aktionen {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 3px;
}

.pctl-menu__aktion {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--m-text);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pctl-menu__aktion:hover,
.pctl-menu__aktion:focus-visible {
	background: rgba(93, 160, 233, 0.16);
	color: #ffffff;
}

/* Der Umschalter bringt sein eigenes SVG mit, das sonst 40 Pixel breit waere */
.pctl-menu__aktion svg {
	width: 22px;
	height: 22px;
}

/* stylev3.css gibt "#theme-toggle svg" neun Pixel Innenabstand. Bei 22 Pixeln
   Kantenlaenge und border-box bleibt davon ein Rest von vier Pixeln uebrig,
   das Symbol verschwindet praktisch. Ueber die Spezifitaet geraderueckt. */
.pctl-menu #theme-toggle svg {
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
}

/* Die Coins tragen ihre Zahl immer. Vierstellig deckt ein Abzeichen das
   Symbol vollstaendig zu, deshalb steht die Zahl hier daneben. */
.pctl-menu__aktion--muenzen {
	width: auto;
	gap: 6px;
	padding: 0 10px;
	margin: 0 4px 0 7px;
	color: #ffd75e;
	background: rgba(184, 134, 11, 0.16);
}

.pctl-menu__aktion--muenzen:hover,
.pctl-menu__aktion--muenzen:focus-visible {
	background: rgba(184, 134, 11, 0.3);
	color: #ffe9a3;
}

.pctl-menu__muenzzahl {
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #ffe9a3;
}

.pctl-menu__zahl {
	position: absolute;
	top: 1px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #d94a43;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #0b1524;
}

/* Konto-Ausklapper. Unterhalb des Umschaltpunkts uebernimmt die Konto-Zeile
   des Overlays diese Aufgabe, deshalb ist er dort nicht noetig. */
.pctl-menu__konto {
	position: relative;
	display: none;
}

@media (min-width: 992px) {
	.pctl-menu__konto {
		display: inline-flex;
	}
}

.pctl-menu__kontopanel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1040;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 215px;
	padding: 6px;
	background: var(--m-panel);
	border: 1px solid var(--m-line);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(3, 8, 16, 0.55);
}

.pctl-menu__kontopanel[hidden] {
	display: none;
}

.pctl-menu__kontopanel a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	color: var(--m-text);
	font-size: 14px;
	text-decoration: none;
}

.pctl-menu__kontopanel a:hover,
.pctl-menu__kontopanel a:focus-visible {
	background: rgba(93, 160, 233, 0.16);
	color: #ffffff;
}

.pctl-menu__kontopanel .fas {
	width: 16px;
	text-align: center;
	color: var(--m-accent);
}

/* --- Konto-Zeile im Overlay ---------------------------------------------- */

.pctl-mobilmenu__konto {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--m-line);
	background: var(--m-deep);
}

.pctl-mobilmenu__konto a {
	flex: 1 1 40%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 10px;
	border: 1px solid var(--m-line);
	border-radius: 10px;
	color: var(--m-text);
	font-size: 14px;
	text-decoration: none;
}

.pctl-mobilmenu__konto a:hover,
.pctl-mobilmenu__konto a:focus-visible {
	background: rgba(93, 160, 233, 0.16);
	color: #fff;
}

/* Zwischen 992 und 1200 Pixeln wird es eng: vier Menuepunkte, Suche und bis
   zu acht Schnellzugriffe. Die Menuepunkte ruecken dort enger zusammen,
   damit die Zeile nicht ueberlaeuft. */
@media (min-width: 992px) and (max-width: 1199px) {
	.pctl-menu__knopf {
		gap: 7px;
		padding: 0 10px;
		font-size: 14px;
	}

	.pctl-menu__aktion {
		width: 36px;
		height: 36px;
	}

	.pctl-menu__suchfeld {
		min-width: 150px;
	}
}

/* --- Umschaltpunkt -------------------------------------------------------- */

@media (max-width: 991px) {
	/* Die Leiste bleibt, ihre Menuepunkte weichen dem Knopf zum Overlay.
	   Die Buehne muss mit weg, sonst bleibt ein am breiten Bildschirm
	   geoeffnetes Megamenue beim Verkleinern stehen. */
	.pctl-menu__punkte,
	.pctl-menu__suchfeld,
	.pctl-menu__buehne {
		display: none;
	}

	.pctl-menu__burger,
	.pctl-menu__marke {
		display: inline-flex;
	}
}

@media (min-width: 992px) {
	.pctl-mobilmenu {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pctl-menu__buehne,
	.pctl-menu__panel,
	.pctl-mobilmenu {
		transition: none;
	}
}