/* ---------------------------------------------------------------
   Das WhatsApp-Band unter dem Kopf

   Gruen, weil das die Farbe des Dienstes ist und in einer Sekunde
   erklaert, worum es geht. Aber ein schmales Band und keine Flaeche:
   Es steht ueber jedem Artikel und darf ihn nicht verdraengen.
   --------------------------------------------------------------- */
.fa-wa-band {
	background: #1D8B4E;
	color: #FFFFFF;
}
.fa-wa-band[hidden] { display: none; }

.fa-wa-band-innen {
	max-width: var(--fa-breite, 1200px);
	margin: 0 auto;
	padding: 9px var(--fa-rand);
	display: flex;
	align-items: center;
	gap: 13px;
}

.fa-wa-band-zeichen {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
}
.fa-wa-band-zeichen svg { width: 25px; height: 25px; display: block; }

.fa-wa-band-text {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.4;
	color: #E4F1E9;
}
.fa-wa-band-text strong {
	color: #FFFFFF;
	font-weight: 700;
	margin-right: 4px;
}

/* Die kurze Fassung traegt das Stichwort, weil auf dem Telefon der Satz
   dahinter wegfaellt. */
.fa-wa-band-kurz { display: none; }

.fa-wa-band-knopf {
	flex: none;
	font-size: 14px;
	font-weight: 700;
	color: #14171A;
	background: #FFFFFF;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 999px;
	white-space: nowrap;
}
.fa-wa-band-knopf:hover,
.fa-wa-band-knopf:focus-visible {
	background: var(--fa-gelb);
	color: #14171A;
}

.fa-wa-band-zu {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #A9CFBB;
	cursor: pointer;
}
.fa-wa-band-zu:hover,
.fa-wa-band-zu:focus-visible {
	background: rgba(255, 255, 255, .16);
	color: #FFFFFF;
}
.fa-wa-band-zu svg { width: 17px; height: 17px; display: block; }

@media (max-width: 780px) {
	/* Der zweite Satz faellt weg - auf dem Telefon zaehlt, dass Zeichen,
	   Kernsatz und Knopf in eine Zeile passen. */
	.fa-wa-band-text { font-size: 13.5px; }
	.fa-wa-band-satz,
	.fa-wa-band-lang { display: none; }
	.fa-wa-band-kurz { display: inline; }
	.fa-wa-band-innen { gap: 10px; padding-inline: var(--fa-rand); }
	.fa-wa-band-knopf { font-size: 13px; padding: 7px 13px; }
}

@media (max-width: 420px) {
	.fa-wa-band-zeichen { display: none; }
}