/**
 * Die Erzeugerkarte.
 *
 * Der Kartengrund ist eine eingebettete SVG, die Punkte liegen als
 * Schaltflaechen darueber. Beide benutzen denselben Ausschnitt, deshalb
 * muss die SVG die Flaeche genau ausfuellen - jede Abweichung verschiebt
 * alle Punkte gleichmaessig.
 */

.fa-erzeuger-karte {
	margin: 0 0 2rem;
}

.fa-erzeuger-flaeche {
	position: relative;
	border: 1px solid var(--fa-linie);
	border-radius: 6px;
	overflow: hidden;
	background: #F4F1EA;
}

.fa-erzeuger-flaeche > svg {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Die Punkte ------------------------------------------------------- */

.fa-erzeuger-punkt {
	position: absolute;
	/* Der Punkt sitzt mit seiner Mitte auf der Koordinate, nicht mit seiner
	   linken oberen Ecke. */
	transform: translate( -50%, -50% );
	width: 18px;
	height: 18px;
	padding: 0;
	border: 2px solid var(--fa-tinte);
	border-radius: 50%;
	background: var(--fa-gelb);
	cursor: pointer;
	/* Auf hellem Acker wie auf dunklem Wald sichtbar bleiben. */
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.85 );
	transition: transform 0.12s ease;
}

.fa-erzeuger-punkt:hover,
.fa-erzeuger-punkt:focus-visible {
	transform: translate( -50%, -50% ) scale( 1.25 );
}

.fa-erzeuger-punkt:focus-visible {
	outline: 2px solid var(--fa-tinte);
	outline-offset: 3px;
}

.fa-erzeuger-punkt.ist-offen {
	transform: translate( -50%, -50% ) scale( 1.25 );
	background: var(--fa-tinte);
	border-color: var(--fa-gelb);
}

/* Auf dem Telefon ist der Punkt ein Ziel fuer den Daumen. Sichtbar bleibt er
   gleich gross, die Trefferflaeche waechst unsichtbar mit. */
@media ( max-width: 768px ) {
	.fa-erzeuger-punkt::after {
		content: "";
		position: absolute;
		inset: -9px;
	}
}

/* --- Die Pop-ups ------------------------------------------------------ */

.fa-erzeuger-popup {
	position: absolute;
	z-index: 2;
	width: min( 17rem, 70vw );
	margin: 14px 0 0 14px;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--fa-linie);
	border-radius: 6px;
	background: var(--fa-karte);
	box-shadow: 0 6px 18px rgba( 22, 21, 20, 0.16 );
	font-size: 15px;
	line-height: 1.5;
}

.fa-erzeuger-popup[hidden] {
	display: none;
}

/* Am rechten oder unteren Rand kippt das Pop-up auf die andere Seite des
   Punktes - siehe assets/js/erzeuger.js. */
.fa-erzeuger-popup.nach-links {
	transform: translateX( -100% );
	margin-left: -14px;
}

.fa-erzeuger-popup.nach-oben {
	transform: translateY( -100% );
	margin-top: -14px;
}

.fa-erzeuger-popup.nach-links.nach-oben {
	transform: translate( -100%, -100% );
}

.fa-erzeuger-popup-name {
	margin: 0 0 0.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.fa-erzeuger-popup-name a {
	color: var(--fa-tinte);
	text-decoration: none;
	border-bottom: 2px solid var(--fa-gelb);
}

.fa-erzeuger-popup-name a:hover {
	border-bottom-color: var(--fa-tinte);
}

.fa-erzeuger-popup-ort {
	margin: 0 0 0.4rem;
	color: var(--fa-text-sekund);
	font-size: 14px;
}

.fa-erzeuger-popup-produkte {
	margin: 0 0 0.5rem;
}

.fa-erzeuger-popup-weg {
	margin: 0;
	font-size: 14px;
}

.fa-erzeuger-popup-weg a {
	color: var(--fa-text-sekund);
}

.fa-erzeuger-quelle {
	margin-top: 0.5rem;
	color: var(--fa-text-sekund);
	font-size: 13px;
}

/* --- Das Verzeichnis -------------------------------------------------- */

.fa-erzeuger-saisonzeile {
	margin: 0 0 1.25rem;
}

.fa-erzeuger-saisonknopf {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 2px solid var(--fa-tinte);
	border-radius: 999px;
	background: var(--fa-karte);
	color: var(--fa-tinte);
	font-weight: 700;
	text-decoration: none;
}

.fa-erzeuger-saisonknopf:hover,
.fa-erzeuger-saisonknopf.ist-aktiv {
	background: var(--fa-gelb);
	color: var(--fa-tinte);
}

.fa-erzeuger-verzeichnis {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
	gap: 1.5rem 2rem;
}

.fa-erzeuger-gruppe-titel {
	margin: 0 0 0.5rem;
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--fa-gelb);
	font-size: 17px;
}

.fa-erzeuger-gruppe-titel a {
	color: var(--fa-tinte);
	text-decoration: none;
}

.fa-erzeuger-produkte {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fa-erzeuger-produkte li {
	margin: 0;
}

.fa-erzeuger-produkt {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.2rem 0;
	color: var(--fa-tinte);
	text-decoration: none;
	font-size: 15px;
}

.fa-erzeuger-produkt:hover {
	text-decoration: underline;
}

.fa-erzeuger-produkt.ist-aktiv {
	font-weight: 700;
}

/* Was gerade Saison hat, bekommt einen Punkt vor dem Namen. Gesetzt wird er
   erst im Browser - siehe assets/js/erzeuger.js. Im PHP stuende der Monat
   des Zwischenspeichers und nicht der von heute. */
.fa-erzeuger-produkt.hat-saison::before {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 7px;
	height: 7px;
	margin-right: -0.25rem;
	border-radius: 50%;
	background: var(--fa-gelb);
	box-shadow: 0 0 0 1px var(--fa-tinte);
}

.fa-erzeuger-produkt.hat-saison {
	gap: 0.45rem;
}

.fa-erzeuger-zahl {
	margin-left: auto;
	color: var(--fa-text-sekund);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* Die Einleitung laeuft hier auf volle Breite.
   Die gemeinsame Kampagnen-Datei begrenzt sie auf 62 Zeichen - eine gute
   Lesebreite, aber auf dieser Seite steht sie ueber einem Verzeichnis, das
   die ganze Spalte einnimmt, und bricht dann mitten im Satz um. Jan hat das
   zweimal angemerkt, zuerst auf der Kirbelauf-Seite. Die Begrenzung bleibt
   bei den anderen vier Kampagnen bestehen. */
.fa-erzeuger .fa-kampagne-einleitung {
	max-width: none;
}