/*
 * Eigene Ergaenzungen zum Originaltheme. theme.css, blocks.css, genericons.css und
 * schriften.css sind unveraendert uebernommen — Aenderungen gehoeren hierher.
 */

/* Hintergrundfarbe wie im Original (WordPress-Anpassung „custom-background"). */
body.custom-background { background-color: #6b6b6b; }

/* Der rote Rahmen um die Fotos — im Original eine Anpassung im Customizer. */
.rahmenbild img { border: 1px solid red; }

figure.wp-block-image { margin: 0 0 1.75em; max-width: 100%; }
figure.wp-block-image img { height: auto; max-width: 100%; }

/* Fotos laufen ueber die volle Breite der Textspalte, damit nicht mal ein
   handbreites und mal ein winziges Bild dasteht. Zwei Grenzen dabei:
   - Nur Fotos ab BREITE_STRECKEN px bekommen die Klasse „spaltenbreit"
     (siehe index.php) - kleinere wuerden beim Hochrechnen sichtbar weich.
   - Die Hoehe ist gedeckelt, sonst fuellt ein Hochformat den ganzen Bildschirm.
     Gedeckelt wird ueber die BREITE (Seitenverhaeltnis aus index.php): eine Grenze
     per max-height wuerde das Bild stauchen statt es proportional zu verkleinern.
   Beide Regeln brauchen „figure" davor, sonst wiegt das allgemeine
   „figure.wp-block-image img { max-width: 100% }" darueber schwerer. */
figure.rahmenbild.spaltenbreit img { width: 100%; }
figure.rahmenbild img { max-width: min(100%, calc(78vh * var(--verhaeltnis, 10))); }

/* Was schmaler als die Spalte bleibt - Hochformate und kleine Bilder - steht
   mittig statt am linken Rand. Die Beschriftung rueckt mit unter das Foto. */
figure.rahmenbild { text-align: center; }
figure.willkommen img { border: 0; }
figcaption.wp-element-caption {
	color: #686868;
	font-size: 0.8125rem;
	line-height: 1.6;
	margin: 0.5em 0 0;
}
.einleitung { margin-bottom: 2em; }

/* Fusszeile: Schraegstrich zwischen den Verweisen. Hinter dem Seitentitel setzt das
   Theme bereits einen (".site-footer .site-title:after"), deshalb nur zwischen zwei
   aufeinanderfolgenden Verweisen - sonst staende dort ein doppelter.
   Abstaende und Deckkraft wie beim Trenner des Themes, damit alle gleich aussehen. */
.site-info .imprint + .imprint::before {
	content: "\002f";
	display: inline-block;
	font-family: Montserrat, sans-serif;
	opacity: 0.7;
	padding: 0 0.307692308em 0 0.538461538em;
}

/* ------------------------------------------ Einwilligung zur Fotonutzung */
#einwilligung .erklaerung p { margin-bottom: 1em; }
#einwilligung label { display: block; font-weight: 700; margin-bottom: 0.25em; }
#einwilligung .pflicht { color: #686868; font-weight: 400; }
#einwilligung input[type="text"],
#einwilligung input[type="email"] {
	border: 1px solid #d1d1d1;
	font: inherit;
	max-width: 30em;
	padding: 0.5em;
	width: 100%;
}
#einwilligung .hinweis { color: #686868; font-size: 0.875rem; }
/* Falle fuer Maschinen: fuer Menschen unsichtbar, aber nicht per display:none,
   sonst fuellen manche Ausfuellhilfen das Feld trotzdem. */
#einwilligung .jahrgang {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}
#einwilligung .antwort { font-weight: 700; margin-top: 1.5em; }
#einwilligung .antwort.fehler { color: #c0392b; }
#einwilligung .antwort.gut { color: #1a7f37; }

/* Uebersichtsseite „meine Projekte": Kacheln mit der Schere wie im Original. */
.kachelwand { display: flex; flex-wrap: wrap; gap: 1.5em; }
.kachelwand .kachel { margin: 0; text-align: center; width: 150px; }
.kachelwand .kachel a { display: block; text-decoration: none; }
.kachelwand .kachel img { display: block; }
.kachelwand .kachel figcaption {
	color: #1a1a1a;
	font-family: Montserrat, "Helvetica Neue", sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	margin-top: 0.5em;
}
.kachelwand .kachel a:hover figcaption { color: #007acc; }