/*
 * Der Pfad im gruenen Rolex-Band.
 *
 * Farben aus der Vorlage von Rolex (Rolex_Breadcrumbs.png) ausgemessen:
 * Links weiss, der aktuelle Eintrag hellgruen, die Trenner ein gedaempftes
 * Graugruen. Fuer das Hellgruen ist bewusst der Ton genommen, den die
 * Rolex-Menueleiste schon fuer den Zeigerzustand verwendet (#61bd94) -
 * so bleibt die Seite bei einer Farbe statt bei zweien, die sich um ein
 * paar Prozent unterscheiden. Wer den Ton aendern will, aendert die
 * Variable, nicht die Regeln.
 *
 * Schriftart und -groesse werden geerbt: Der Pfad sitzt im selben Band wie
 * das Menue und soll sich nicht davon loesen.
 */

/*
 * Zu den Abstaenden nach oben und unten steht hier bewusst NICHTS.
 *
 * Sie kommen aus dem Theme und aus WPBakery, und sie stimmen: gemessen
 * sind es 28 px zwischen der Plakette und dem Pfad, die Rolex-Vorlage
 * zeigt 30 px. Eigene Angaben waeren hier ohnehin wirkungslos - das Theme
 * setzt `.wpb_text_column .wpb_wrapper > :first-child { margin-top: 0 }`
 * und WPBakery `.wpb_content_element { margin-bottom: 35px }`, beide mit
 * mehr Gewicht und spaeter geladen. Eine Regel, die nichts bewirkt, ist
 * schlimmer als keine: Sie sieht beim naechsten Lesen wie die Erklaerung
 * fuer einen Abstand aus, der in Wahrheit woanders herkommt.
 */
.rlx-brotkrumen {
	--rlxbc-link: #ffffff;
	--rlxbc-aktuell: #61bd94;
	--rlxbc-trenner: rgba(255, 255, 255, 0.55);

	padding: 0;
	font-size: 15px;
	line-height: 1.4;
}

.rlx-brotkrumen .rlx-brotkrumen__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Der Klassenname steht zweimal davor, und das ist der Punkt.
 *
 * Das Theme setzt `.entry-content li { margin-bottom: 6px }`. Der letzte
 * Eintrag bekommt von WPBakery ueber `.wpb_text_column :last-child` wieder
 * 0 - also waren alle Eintraege ausser dem letzten 6 px hoeher. Die Zeile
 * richtet mittig aus, und so sass der aktuelle Eintrag genau 3 px tiefer
 * als die Eintraege davor.
 *
 * Ein einfaches `.rlx-brotkrumen__liste > li` reicht dagegen NICHT: Es hat
 * dasselbe Gewicht wie die Theme-Regel, und bei Gleichstand gewinnt, was
 * spaeter geladen wird - das ist die style.css des Themes. Mit dem
 * zusaetzlichen Klassennamen wiegt die Regel mehr, und die Reihenfolge
 * spielt keine Rolle mehr.
 */
.rlx-brotkrumen .rlx-brotkrumen__liste > li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rlx-brotkrumen .rlx-brotkrumen__liste > li::marker {
	content: "";
}

/*
 * Links und aktueller Eintrag bekommen denselben Kasten: dieselbe
 * Zeilenhoehe und dieselbe Unterlinie, beim aktuellen Eintrag unsichtbar.
 * Die Linie ist am Link fuer den Hover ohnehin noetig; ohne sie am <span>
 * waeren die beiden Kaesten unterschiedlich hoch.
 */
.rlx-brotkrumen a,
.rlx-brotkrumen .rlx-brotkrumen__stufe > span {
	display: inline-block;
	line-height: 1.4;
	border-bottom: 1px solid transparent;
}

.rlx-brotkrumen a {
	color: var(--rlxbc-link);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.rlx-brotkrumen a:hover,
.rlx-brotkrumen a:focus-visible {
	color: var(--rlxbc-link);
	border-bottom-color: var(--rlxbc-link);
}

.rlx-brotkrumen__stufe--aktuell > span {
	color: var(--rlxbc-aktuell);
}

/*
 * Der Winkel zwischen zwei Stufen.
 *
 * Gezeichnet aus zwei Rahmenlinien statt als Schriftzeichen ">" oder "›":
 * Beide werden je nach Schriftart unterschiedlich gross und unterschiedlich
 * hoch gesetzt. Der gedrehte Rahmen sieht ueberall gleich aus und laesst
 * sich in Staerke und Groesse genau einstellen.
 */
.rlx-brotkrumen .rlx-brotkrumen__liste > li + li::before {
	content: "";
	display: block;
	width: 0.4em;
	height: 0.4em;
	margin-right: 0.75rem;
	border-top: 1px solid var(--rlxbc-trenner);
	border-right: 1px solid var(--rlxbc-trenner);
	transform: rotate(45deg);
	/* Der gedrehte Winkel sitzt optisch etwas zu hoch. */
	position: relative;
	top: -0.05em;
	flex: none;
}

/*
 * Der Rueckwaertslink des Handys - auf grossen Bildschirmen unsichtbar.
 * Dort steht der ganze Pfad, ein zweiter Weg nach oben waere doppelt.
 */
.rlx-brotkrumen .rlx-brotkrumen__zurueck {
	display: none;
}

@media (max-width: 767px) {
	.rlx-brotkrumen {
		font-size: 14px;
	}

	/*
	 * Auf dem Handy andersherum: nur der Schritt zurueck, kein Pfad.
	 *
	 * Farben aus der Vorlage ausgemessen - Winkel und Text stehen beide
	 * im hellen Gruen, nicht in Weiss wie die Links des vollen Pfades.
	 */
	.rlx-brotkrumen .rlx-brotkrumen__liste {
		display: none;
	}

	/*
	 * flex-start und nicht center: "Rolex Armbanduhren Cosmograph
	 * Daytona" braucht auf einem 320 px breiten Bildschirm zwei Zeilen.
	 * Mittig ausgerichtet saesse der Winkel dann zwischen den Zeilen.
	 */
	.rlx-brotkrumen .rlx-brotkrumen__zurueck {
		display: inline-flex;
		align-items: flex-start;
		gap: 1rem;
		color: var(--rlxbc-aktuell);
		text-decoration: none;
		line-height: 1.4;
		border-bottom: 1px solid transparent;
	}

	.rlx-brotkrumen .rlx-brotkrumen__zurueck:hover,
	.rlx-brotkrumen .rlx-brotkrumen__zurueck:focus-visible {
		border-bottom-color: var(--rlxbc-aktuell);
	}

	/*
	 * Derselbe Winkel wie im Pfad, nur nach links gedreht. Der Abstand
	 * nach oben setzt ihn auf die Mitte der ERSTEN Zeile: halbe
	 * Zeilenhoehe (0.7em) minus halbe Winkelhoehe (0.2em).
	 */
	.rlx-brotkrumen .rlx-brotkrumen__winkel {
		display: block;
		width: 0.4em;
		height: 0.4em;
		margin-top: 0.5em;
		border-top: 1px solid var(--rlxbc-aktuell);
		border-left: 1px solid var(--rlxbc-aktuell);
		transform: rotate(-45deg);
		flex: none;
	}
}

/*
 * Zum Textbaustein .rlx-brotkrumen-halter, in dem der Pfad in der Vorlage
 * steckt, steht hier absichtlich keine Regel mehr.
 *
 * WPBakery gibt ihm als .wpb_content_element 35 px Abstand nach unten. Ein
 * Versuch, das auf 0 zu setzen, blieb wirkungslos - gleiches Gewicht, und
 * js_composer.min.css laedt spaeter. Gemessen sieht der Abstand richtig
 * aus, also bleibt er, wie er ist. Wer ihn aendern will, braucht ein
 * hoeheres Gewicht, zum Beispiel .rlx-brotkrumen-halter.wpb_text_column.
 */