/* Eigenes CSS der statischen Site — laedt nach dem Theme-CSS und gewinnt.
 *
 * Deckt drei Dinge ab, fuer die auf der Alt-Site JavaScript oder ein Plugin
 * zustaendig war: das Kachel-Raster der Startseite, die drei Icons und den
 * Scroll-nach-oben-Button.
 */

/* ---------------------------------------------------------------------------
 * Kachel-Raster der Startseite
 *
 * Das Theme setzt `.grid-layout { display: none }` und laesst Masonry das
 * Raster aufbauen. Das schlaegt seit dem Masonry-Update fehl
 * (`this._getColGroup is not a function` — masonry-init.js patcht eine
 * Methode, die es in Masonry 4 nicht mehr gibt), die drei Kacheln lagen live
 * uebereinander in einer schmalen Spalte. Drei gleich breite Kacheln brauchen
 * kein Masonry.
 * ------------------------------------------------------------------------ */
.grid-layout {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

/* ---------------------------------------------------------------------------
 * Icons
 *
 * Font Awesome ist raus — die Alt-Site lud zwei Versionen (Theme: 5.0.9,
 * Scroll-Button-Plugin: 4.7) mit zusammen ueber 3 MB Fontdateien fuer drei
 * Glyphen. Die stehen jetzt als Inline-SVG im Markup.
 * ------------------------------------------------------------------------ */
/* `position: static` ist noetig, nicht kosmetisch: das Theme setzt global
 * `svg { position: absolute }` fuer seine Trennlinien-Grafiken. Damit
 * beanspruchen die Icons keinen Platz, der `position: fixed`-Container des
 * Menuebuttons faellt auf 0 x 0 zusammen und ist nicht mehr anklickbar. */
.icon,
.nach-oben svg {
	position: static;
}

.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

.sidebar-toggle .icon-times,
.sidebar-toggle.sidebar-toggled .icon-bars {
	display: none;
}

.sidebar-toggle.sidebar-toggled .icon-times {
	display: inline-block;
}

.thumb-link .icon {
	width: 38px;
	height: 38px;
}

/* ---------------------------------------------------------------------------
 * Scroll-nach-oben-Button (ersetzt das Plugin)
 * ------------------------------------------------------------------------ */
.nach-oben {
	position: fixed;
	right: 30px;
	bottom: 20px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #a3b8c9;
	background-color: #fff;
	opacity: 0.5;
	transition: opacity 0.3s;
}

.nach-oben:hover,
.nach-oben:focus {
	color: #a3b8c9;
	opacity: 1;
}

.nach-oben svg {
	width: 24px;
	height: 24px;
}

.nach-oben[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Kontaktformular (ersetzt Contact Form 7)
 * ------------------------------------------------------------------------ */
.kontaktformular label {
	display: block;
	margin-bottom: 4px;
	font-weight: 700;
}

.kontaktformular input[type="email"],
.kontaktformular textarea {
	display: block;
	width: 100%;
	max-width: 420px;
	padding: 8px;
	border: 1px solid #ccc;
	background-color: #fff;
	font: inherit;
}

.kontaktformular textarea {
	max-width: 100%;
	resize: vertical;
}

.kontaktformular button {
	padding: 10px 24px;
	border: 0;
	color: #fff;
	background-color: #969696;
	font: inherit;
	cursor: pointer;
}

.kontaktformular button[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein ausfuellbares Feld.
 * Nicht `display: none` — das ueberspringen viele Bots erkennbar. */
.kf-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

.kf-status {
	padding: 10px 14px;
	border-left: 3px solid #969696;
	background-color: #f4f4f4;
}

.kf-status.kf-fehler {
	border-left-color: #b02020;
}

/* ---------------------------------------------------------------------------
 * Lesbarkeit
 *
 * Der Customizer hat den Footer auf Hellgrau (#8e8e8e) gestellt, die
 * Link-Farbe des Themes (#8b8b8b) ist aber fuer den dunklen Original-Footer
 * gedacht: Kontrast 1,03:1 — auf der Alt-Site war der Footer-Link faktisch
 * unsichtbar. Hier stehen Impressum und Datenschutz, die muessen zu finden
 * sein.
 * ------------------------------------------------------------------------ */
.site-footer,
.site-footer a {
	color: #17191b;
}

.site-footer a {
	text-decoration: underline;
}

/* Links im Fliesstext nur ueber die Farbe kenntlich zu machen reicht nicht,
 * zumal die Akzentfarbe #969696 wenig Kontrast zum Text hat. */
.entry-content a {
	text-decoration: underline;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}