/* ============================================================
   HERO-BRAND-PIN — die beiden Marken auf der Europakarte
   Beschluss Feedback-Call 2026-08-21 (JD): Der Frankfurt-Pin „NPL Germany"
   entfaellt. Stattdessen ein Punkt auf Berlin (deutscher Verband) und einer
   auf Bruessel (European NPL Alliance), jeweils mit Leader-Linie und einem
   gut sichtbaren Button. Der Button der AKTUELL aktiven Marke ist ausgegraut
   und nicht klickbar, der andere ist prominent — er ist der Markenwechsel.
   Im Header bleibt nur noch der Sprachumschalter DE/EN, der dasselbe tut.

   STAND 2026-08-21 (2. Runde, nach Fable-Review + JD): Die Labels waren dauerhaft
   sichtbar — zwei gleichwertige Kaesten auf einer ohnehin linienreichen Karte, das
   wirkte unruhig. Jetzt zeigt die Karte im Ruhezustand nur zwei ruhige Punkte; Leader
   und Label erscheinen erst bei Hover/Fokus. Der eigentliche Wegweiser fuer Suchende
   ist NICHT mehr die Karte, sondern der Signpost im Fuss der Claim-Card
   (components/brand-signpost.css) — der ist auf jedem Geraet sichtbar, die Pins sind
   ab 1280px die redundante Verstaerkung.
   Ankerposition setzt bks-hero-map.js (positionBrandPins).
   ============================================================ */

.bks-rd .bks-hero-brandpin {
	position: absolute;
	z-index: 3;
	width: 0;
	height: 0;
	text-decoration: none;
}

/* Ankerpunkt auf der Stadt. Das Element ist 36px gross (Trefferflaeche fuer die Maus —
   ein 10px-Punkt waere kaum zu treffen), der sichtbare Punkt wird per radial-gradient
   in die Mitte gezeichnet. Bewusst groesser und mit Ring als die 2–3px-Netzpunkte der
   Karte, sonst waere er von den Mitglieder-Knoten nicht zu unterscheiden. */
.bks-rd .bks-hero-brandpin i {
	position: absolute;
	left: -18px;
	top: -18px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	/* 2026-08-22 (JD): war weiss auf weissem Kartennetz und ging unter. Jetzt der
	   CD-Akzent Orange mit duennem weissem Ring — der Ring trennt den Punkt vom
	   dunkelblauen Grund und unterscheidet ihn zugleich vom flaechigen Orange des
	   Event-Pins (components/hero-event-pin.css). */
	background: radial-gradient(circle at center,
		var(--orange, #e86a2a) 0 5.5px,
		#fff 5.5px 7px,
		rgba(232, 106, 42, 0.32) 7px 10px,
		transparent 10px);
	transition: background 0.18s ease;
}

/* Unsichtbare Bruecke zwischen Punkt und Label: ohne sie reisst der Hover ab, sobald
   die Maus die diagonale Luecke ueberquert, und das Label flackert. */
.bks-rd .bks-hero-brandpin::after {
	content: "";
	position: absolute;
	left: -14px;
	bottom: -14px;
	width: 62px;
	height: 62px;
}

/* Diagonales Leader-Segment: vom Punkt nach oben rechts. Wie das Label erst bei Hover. */
.bks-rd .bks-hero-brandpin::before {
	content: "";
	position: absolute;
	left: 3px;
	top: -1px;
	width: 38px;
	height: 1px;
	background: rgba(255, 255, 255, 0.6);
	transform-origin: 0 50%;
	transform: rotate(-50deg);
	opacity: 0;
	transition: opacity 0.16s ease;
}

/* Der Button am Ende des Leaders */
.bks-rd .bks-hero-brandpin__box {
	position: absolute;
	left: 26px;
	bottom: 28px;
	display: block;
	/* Der Anker ist 0x0 breit — ohne width:max-content faellt der Button auf die
	   min-content-Breite zusammen (schmale Wortsaeule). Deshalb explizit die
	   Einzeilen-Breite anfordern und erst per max-width umbrechen lassen. */
	width: max-content;
	max-width: 268px;
	padding: 9px 14px 10px;
	border-radius: var(--r-md, 4px);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 6px 22px rgba(6, 42, 66, 0.28);
	text-align: left;
	/* Ruhezustand: unsichtbar. Bewusst visibility+opacity statt display:none — die
	   Kollisionspruefung in bks-hero-map.js misst die Box einmal aus, und display:none
	   wuerde 0x0 liefern. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(3px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s,
		background 0.18s ease, box-shadow 0.18s ease;
}

/* Einblenden bei Hover — und bei Tastaturfokus, sonst waere der Wechsel nur mit der
   Maus erreichbar. */
.bks-rd .bks-hero-brandpin:hover .bks-hero-brandpin__box,
.bks-rd .bks-hero-brandpin:focus-visible .bks-hero-brandpin__box {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s,
		background 0.18s ease, box-shadow 0.18s ease;
}

.bks-rd .bks-hero-brandpin:hover::before,
.bks-rd .bks-hero-brandpin:focus-visible::before { opacity: 1; }

/* Punkt quittiert den Hover, damit klar ist, was gerade aufgeht. */
.bks-rd .bks-hero-brandpin:hover i,
.bks-rd .bks-hero-brandpin:focus-visible i {
	background: radial-gradient(circle at center,
		var(--orange, #e86a2a) 0 6.5px,
		#fff 6.5px 8px,
		rgba(232, 106, 42, 0.45) 8px 12px,
		transparent 12px);
}

/* Zeile 1: Stadt (Versal-Kicker) */
.bks-rd .bks-hero-brandpin small {
	display: block;
	font-size: var(--fs-6);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--grey-600, #51606b);
	margin-bottom: 3px;
}

/* Zeile 2: Markenname */
.bks-rd .bks-hero-brandpin b {
	display: block;
	font-size: var(--fs-5);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.005em;
	color: var(--bks-blue, #006699);
	text-wrap: balance;
}

.bks-rd a.bks-hero-brandpin:hover .bks-hero-brandpin__box,
.bks-rd a.bks-hero-brandpin:focus-visible .bks-hero-brandpin__box {
	background: #fff;
	box-shadow: 0 10px 30px rgba(6, 42, 66, 0.38);
	transform: translateY(-1px);
}

.bks-rd a.bks-hero-brandpin:focus-visible .bks-hero-brandpin__box {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ── Aktive Marke: ausgegraut, nicht klickbar ──────────────────────────────
   Bewusst KEIN display:none — der Nutzer soll sehen, wo er gerade steht und
   welche zweite Marke es gibt. Kontrast bleibt lesbar (kein reines Grau auf
   Grau), nur die Praesenz ist deutlich zurueckgenommen. */
.bks-rd .bks-hero-brandpin.is-active {
	cursor: default;
	z-index: 2;
}

/* Der aktive Punkt ist dezenter, aber im GLEICHEN Bauprinzip wie der andere:
   radial-gradient in einem 36px-Trefferfeld. Eine flaeche Hintergrundfarbe wuerde
   hier die volle Trefferflaeche einfaerben (36px-Scheibe statt Punkt). */
.bks-rd .bks-hero-brandpin.is-active i {
	background: radial-gradient(circle at center,
		rgba(255, 255, 255, 0.62) 0 5px,
		rgba(255, 255, 255, 0.16) 5px 9px,
		transparent 9px);
	box-shadow: none;
}

.bks-rd .bks-hero-brandpin.is-active:hover i,
.bks-rd .bks-hero-brandpin.is-active:focus-visible i {
	background: radial-gradient(circle at center,
		rgba(255, 255, 255, 0.85) 0 6px,
		rgba(255, 255, 255, 0.28) 6px 11px,
		transparent 11px);
}

.bks-rd .bks-hero-brandpin.is-active::before { background: rgba(255, 255, 255, 0.3); }

.bks-rd .bks-hero-brandpin.is-active .bks-hero-brandpin__box {
	/* Dunkel abgesetzt statt weiss-transparent: ueber den hellen Netzlinien der Karte
	   war eine weisse Transparenz zu unruhig zum Lesen. */
	background: rgba(6, 42, 66, 0.5);
	box-shadow: none;
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 8px 13px 9px;
}

.bks-rd .bks-hero-brandpin.is-active small { color: rgba(255, 255, 255, 0.66); }
.bks-rd .bks-hero-brandpin.is-active b { color: rgba(255, 255, 255, 0.82); font-weight: 600; }

/* ── Label nach RECHTS UNTEN ausweichen. Zwei Ausloeser:
      .is-tight  — der Punkt liegt nah an der Claim-Card
      .is-below  — die beiden Marken-Buttons wuerden sich ueberdecken (EU-Ausschnitt,
                   dort liegen Berlin und Bruessel dicht beieinander); dann weicht der
                   tiefer liegende Punkt aus. Setzt bks-hero-map.js/avoidOverlap(). ── */
.bks-rd .bks-hero-brandpin.is-tight::before,
.bks-rd .bks-hero-brandpin.is-below::before { transform: rotate(38deg); }

.bks-rd .bks-hero-brandpin.is-tight .bks-hero-brandpin__box,
.bks-rd .bks-hero-brandpin.is-below .bks-hero-brandpin__box {
	bottom: auto;
	top: 30px;
	left: 30px;
	transform: translateY(-3px);
}

.bks-rd .bks-hero-brandpin.is-tight:hover .bks-hero-brandpin__box,
.bks-rd .bks-hero-brandpin.is-below:hover .bks-hero-brandpin__box,
.bks-rd .bks-hero-brandpin.is-tight:focus-visible .bks-hero-brandpin__box,
.bks-rd .bks-hero-brandpin.is-below:focus-visible .bks-hero-brandpin__box { transform: none; }

/* Bruecke zeigt dann nach unten rechts statt nach oben rechts. */
.bks-rd .bks-hero-brandpin.is-tight::after,
.bks-rd .bks-hero-brandpin.is-below::after { bottom: auto; top: -14px; }

@media (max-width: 900px) {
	/* Auf schmalen Viewports deckt die Claim-Card die Karte praktisch vollstaendig ab.
	   bks-hero-map.js/positionBrandPins() blendet die Pins dort deshalb aus (Test:
	   Card-Breite > 85 % der Hero-Breite, wie in panX()). Diese Regel greift nur im
	   Zwischenbereich, in dem noch Kartenflaeche frei ist. */
	.bks-rd .bks-hero-brandpin__box { max-width: 200px; padding: 7px 11px 8px; }
}