/* ==========================================================================
   Schriftwähler – Werkzeug für die Abstimmung mit dem Kunden.
   Gehört NICHT zum Entwurf. Bewusst unauffällig: klein, schwarz und bündig in
   der unteren linken Ecke, damit er den Entwurf nicht mitprägt.
   Zum Entfernen genügt es, diese Datei, das Skript js/fontpicker.js und den
   Block .kk-fontpicker aus den Seiten zu löschen.
   ========================================================================== */

.kk-fontpicker {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 980;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	max-width: calc(100vw - 4.5rem);   /* Platz für den Nach-oben-Knopf lassen */
	padding: 0.25rem 0.45rem;
	background-color: #111;
}

.kk-fontpicker-label {
	flex: 0 0 auto;
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.45);
	white-space: nowrap;
}

.kk-fontpicker select {
	flex: 1 1 auto;
	min-width: 0;
	height: 1.5rem;
	padding: 0 1.2rem 0 0.35rem;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.72rem;
	line-height: 1.2;
	cursor: pointer;

	/* Eigener Pfeil, damit das Feld in beiden Browsern gleich aussieht */
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'10'%20height%3D'6'%20viewBox%3D'0%200%2010%206'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M1%201l4%204%204-4'%20fill%3D'none'%20stroke%3D'%23999999'%20stroke-width%3D'1.6'%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 0.4rem center;
}

.kk-fontpicker select:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }

.kk-fontpicker select:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 1px;
}

/* Die Optionsliste zeichnet das System – dort sicherheitshalber lesbare
   Farben setzen, sonst bliebe heller Text auf hellem Grund. */
.kk-fontpicker option {
	background-color: #111;
	color: #fff;
}

@media (max-width: 639px) {
	.kk-fontpicker-label { display: none; }
}