/* klausfuchsenberger.de — Aussehen der Seite. Seit 13.08.2026 live.
 *
 * Hervorgegangen aus Entwurf A »dunkel« (entwurf_funkier/A_dunkel.css), den Klaus am
 * 12.08.2026 mit »A« gewählt und am 13.08. mit »super, bitte veröffentlichen«
 * freigegeben hat.
 *
 * Gedanke: Galerie statt Firmenseite. Schwarzer Grund, das Bild füllt den ersten
 * Bildschirm, der Name steht als Schild darüber. Darunter eine Wand aus Arbeiten
 * ohne Bildunterschriften — wer die Bilder versteht, ist der richtige Kunde.
 *
 * Typografie streng nach stammdaten/briefkopf.yaml (Stand 11.08.2026):
 *   Name   Gewicht 700, Sperrung 1,2 px auf 15 pt  = 0,08 em
 *   Zusatz Größe 8,5 pt von 15 pt = 0,567 des Namens, Sperrung 1,6 px auf 8,5 pt
 *          = 0,19 em, Farbe #444 (auf Schwarz aufgehellt zu #9a938a)
 *   Familie Helvetica, Arial, sans-serif
 * Damit sieht die Seite aus wie das Angebot, das derselbe Kunde danach bekommt.
 *
 * Kein JavaScript, keine fremden Schriften, keine Cookies, nichts von Dritten.
 *
 * Der Takt des durchlaufenden Kopfbildes steht NICHT hier, sondern wird von
 * werkzeuge/seite_bauen.py in den Kopf von index.html gerechnet — er hängt an der
 * Zahl der Kopfbilder, und die soll sich ändern dürfen, ohne dass jemand nachzählt.
 *
 * Die alte Seite (style.css, zusatz.css, slideshow.js) liegt unangetastet daneben;
 * sie ist der Rückweg, zusammen mit backups/20260813/.
 */

:root {
	--grund: #0d0d0d;
	--schrift: #f2efe9;
	--leise: #9a938a;
	--linie: #2a2a2a;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--grund);
	color: var(--schrift);
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linie); }
a:hover { border-bottom-color: var(--schrift); }

/* Tastaturbedienung muss sichtbar sein — auf Schwarz reicht der Standardrahmen nicht. */
a:focus-visible {
	outline: 2px solid var(--schrift);
	outline-offset: 3px;
}

/* ── Kopf: Bild über die volle Breite, Schild darüber ─────────────── */

.kopf {
	position: relative;
	height: 88vh;
	min-height: 420px;
	overflow: hidden;
	background: #000;
}

.dia { position: absolute; inset: 0; }

.dia img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: saturate(0.92) contrast(1.04);
}

/* Damit die Schrift auf jedem Bild lesbar bleibt — auch auf dem hellen. */
.kopf::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.30) 100%);
	pointer-events: none;
}

.schild {
	position: absolute;
	left: 5vw;
	/* vh allein ist zu wenig, wenn das Handy quer gehalten wird — dann sind 7 vh
	 * nur 27 px und die Zusatzzeile klebt am unteren Rand. Deshalb ein Mindestmaß. */
	bottom: max(7vh, 36px);
	z-index: 2;
	max-width: 90vw;
}

.schild h1 {
	margin: 0;
	font-size: clamp(2rem, 7.4vw, 5.6rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.02;
	text-transform: uppercase;
}

.schild .zusatz {
	margin: .7em 0 0 0;
	font-size: clamp(.62rem, 1.55vw, 1.05rem);   /* 0,567 der Namensgröße */
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--leise);
}

.oben {
	position: absolute;
	top: 3.2vh;
	right: 5vw;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 20px;
}

.oben a { border: 0; line-height: 0; }

.oben .knopf {
	line-height: 1;
	font-size: 12px;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	padding: 11px 20px;
	border: 1px solid rgba(242,239,233,.55);
	border-radius: 999px;
}
.oben .knopf:hover { background: var(--schrift); color: #000; }

/* ── Zwischenstreifen zwischen Kopf und Galerie ───────────────────── */

/* Hier stand bis zum 11.08. die gesperrte Versalzeile »Vans · Küchen · Möbel«, am
 * 12.08. ein Satz über die Arbeit. Zwei Runden Vorschläge hat Klaus abgelehnt, die
 * zweite am 12.08. um 23:13 mit »Keiner«; die Seite ohne Satz hat er am 13.08. mit
 * »super« freigegeben. `.zeile` nennt deshalb NUR den Ort: die Sparten stehen schon
 * im Kopf, und auf 390 px stünden beide Zeilen übereinander. Ohne Vans (seine Sperre
 * vom 12.08.).
 * `.satz` und `.einleitung` bleiben absichtlich stehen: Soll doch ein Satz hinein,
 * ist es ein Zeilentausch in der Vorlage von seite_bauen.py und kein Umbau. Nur eine
 * von beiden ist je in Gebrauch — beides zusammen wäre doppelt gemoppelt. */

.zeile {
	margin: 0;
	padding: 4.4vh 5vw;
	font-size: clamp(1rem, 2.5vw, 1.7rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--leise);
	border-bottom: 1px solid var(--linie);
}

.einleitung {
	padding: 5.2vh 5vw;
	border-bottom: 1px solid var(--linie);
}

/* Nicht in Versalien und nicht gesperrt: der Satz soll gelesen werden, nicht
 * betrachtet. Die Zeilenlänge ist auf rund 34 em begrenzt — darüber hinaus
 * findet das Auge den Zeilenanfang nicht mehr zuverlässig. */
.satz {
	margin: 0;
	max-width: 34em;
	font-size: clamp(1.12rem, 2.5vw, 1.85rem);
	line-height: 1.42;
	letter-spacing: 0.005em;
	color: var(--schrift);
	text-wrap: balance;
}

/* ── Galerie: Bilder in ihrem eigenen Format, nichts beschnitten ──── */

.galerie {
	padding: 5vw;
	column-count: 3;
	column-gap: 18px;
}

.galerie figure {
	margin: 0 0 18px 0;
	break-inside: avoid;
	line-height: 0;
	background: #141414;
}

.galerie img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity .35s ease;
}
.galerie figure:hover img { opacity: .78; }

/* ── Impressum und Datenschutz ────────────────────────────────────── */

/* Zwei Textseiten ohne Bilder. Sie hingen bis zum 13.08.2026 am alten Stylesheet und
 * sahen deshalb nach dem Klick aus wie eine andere Firma. Der Rechtstext selbst ist
 * dabei Wort für Wort derselbe geblieben — nur die Hülle ist neu. */

.kopfzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	padding: 5vh 5vw 4vh;
	border-bottom: 1px solid var(--linie);
}

.kopfzeile .zurueck {
	border: 0;
	font-size: clamp(1.15rem, 3vw, 1.9rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kopfzeile .zusatz {
	font-size: clamp(.62rem, 1.2vw, .78rem);   /* 0,567 der Namensgröße */
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--leise);
}

.textseite {
	/* 38 em ist die Zeilenlänge, ab der das Auge den nächsten Zeilenanfang sicher
	 * findet. Auf einem Gesetzestext ist das keine Feinheit, sondern der Unterschied
	 * zwischen lesbar und überflogen. */
	max-width: 38em;
	padding: 6vh 5vw 4vh;
}

.textseite h1 {
	margin: 0 0 1.4em 0;
	font-size: clamp(1.5rem, 4vw, 2.4rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.textseite h2 {
	margin: 2.4em 0 .6em 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--leise);
}

.textseite h3 {
	margin: 1.8em 0 .5em 0;
	font-size: 15px;
	font-weight: 700;
}

.textseite p,
.textseite li { margin: 0 0 1em 0; }

/* Lange Adressen und Rechtsverweise dürfen die Seite auf dem Telefon nicht sprengen. */
.textseite a { overflow-wrap: anywhere; }

/* ── Fuß ──────────────────────────────────────────────────────────── */

.fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 8vw;
	padding: 6vh 5vw 9vh;
	border-top: 1px solid var(--linie);
	font-size: 14px;
}

.fuss h2 {
	margin: 0 0 .9em 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--leise);
}

.fuss p { margin: 0 0 1.1em 0; }
.fuss .hinweis { color: var(--leise); font-size: 12px; }

/* ── Handy ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.galerie { column-count: 2; }
}

@media (max-width: 600px) {
	.kopf { height: auto; aspect-ratio: 3 / 4; min-height: 0; }
	.schild { left: 6vw; bottom: 5vh; }
	.einleitung { padding: 4.4vh 6vw; }
	.galerie { column-count: 1; padding: 6vw; }
	.fuss { gap: 28px; padding: 5vh 6vw 7vh; }
	.oben { top: 2.4vh; right: 6vw; gap: 14px; }
}

/* Wer Bewegung abgestellt hat, bekommt auch in der Galerie keine.
 * Das Stehenbleiben des Kopfbildes regelt der erzeugte Block in index.html —
 * er steht im Quelltext nach diesem Stylesheet und muss die Ausnahme deshalb
 * selbst mitbringen. */
@media (prefers-reduced-motion: reduce) {
	.galerie img { transition: none; }
}