/* Ergaenzungen zum Theme-CSS. Wird als letztes Stylesheet geladen.
 *
 * Deckt ab, was in der Alt-Site JavaScript oder Contact Form 7 gemacht haben,
 * und repariert die Stellen, an denen das Theme-CSS ins Leere lief.
 */

/* --- Kopf ---------------------------------------------------------------
 * Das Theme liess den Kopf per JavaScript ab dem ersten Scrollpixel
 * `position: fixed` werden. Da er ohnehin am Seitenanfang steht, tut
 * `position: sticky` dasselbe ohne Scroll-Listener — und ohne den Sprung, den
 * `fixed` beim Herausnehmen aus dem Textfluss verursacht.
 */
#masthead {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Sprungziele unter dem Kopf halten, sonst verdeckt er die Ueberschrift. */
section.page-wrapper[id] {
	scroll-margin-top: 80px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* --- Linkfarbe ----------------------------------------------------------
 * Das Theme-Preset faerbt jeden Link #4CDDF3 (hellblau). Auf Weiss ist das ein
 * Kontrast von 1.62:1 — WCAG AA verlangt 4.5:1, und der Link auf die
 * Datenschutzerklaerung im Impressum war praktisch unlesbar. Derselbe Farbton,
 * nur dunkler: 4.78:1. Zuruecknehmen heisst, diesen Block zu loeschen.
 */
a {
	color: #137d94;
}

a:hover,
a:focus {
	color: #0e6d82;
}

/* --- Tastaturbedienung --------------------------------------------------
 * Das Theme setzt `outline: 0` auf Formularfelder und Bootstrap 3 blendet den
 * Fokusrahmen an mehreren Stellen aus. Ohne sichtbaren Fokus ist die Site mit
 * der Tastatur nicht bedienbar.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid #6f1e31;
	outline-offset: 2px;
}

/* --- Nach oben ----------------------------------------------------------
 * Im Original ein leerer Link mit einem Font-Awesome-Icon, ohne jede
 * Beschriftung und ohne eigenes CSS — er lag unsichtbar im Footer.
 */
.gototop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #fff;
	background: #6f1e31;
	border-radius: 2px;
}

.gototop:hover,
.gototop:focus {
	color: #fff;
	background: #4c111d;
}

.gototop[hidden] {
	display: none;
}

.icon-hoch {
	width: 24px;
	height: 24px;
}

/* --- Kontaktformular ----------------------------------------------------
 * Ersetzt das Stylesheet von Contact Form 7. Die Beschriftungen sind jetzt
 * echte <label> (im Original lose Absaetze ueber dem Feld).
 */
.kontaktformular {
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
}

.kontaktformular label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.kontaktformular input[type="text"],
.kontaktformular input[type="email"],
.kontaktformular input[type="tel"],
.kontaktformular textarea {
	display: block;
	width: 100%;
	padding: 8px 10px;
	background: #fafafa;
	border: 1px solid #d6d6d6;
}

.kontaktformular textarea {
	resize: vertical;
}

.kontaktformular input:focus,
.kontaktformular textarea:focus {
	border-color: #6f1e31;
}

.kontaktformular button {
	font: inherit;
}

.kf-pflicht {
	font-size: 13px;
}

.kf-status:empty {
	display: none;
}

.kf-status {
	padding: 10px 12px;
	background: #eef3ee;
	border-left: 4px solid #3a6b3a;
}

.kf-status.kf-fehler {
	background: #f7eded;
	border-left-color: #a12;
}

.kf-hinweis {
	padding: 10px 12px;
	background: #f2f2f2;
}

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein gewoehnliches Feld.
 * `display: none` waere zu offensichtlich — viele Bots ueberspringen das.
 */
.kf-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Sprachwahl (/) -----------------------------------------------------
 * Fallback-Seite fuer den Fall, dass die Accept-Language-Weiche des Servers
 * nicht greift.
 */
body.sprachwahl {
	padding: 60px 0;
	text-align: center;
}

body.sprachwahl .sprachliste {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	padding: 0;
	margin-top: 30px;
	list-style: none;
}

body.sprachwahl .sprachliste a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	background: #6f1e31;
}

body.sprachwahl .sprachliste a:hover,
body.sprachwahl .sprachliste a:focus {
	color: #fff;
	background: #4c111d;
}

/* --- Fehlerseite -------------------------------------------------------- */
#fehler-404 {
	text-align: center;
}