/*
 * Grundlagen, Aufbau und Bausteine.
 * Die Werte stehen in tokens.css und werden hier nur benutzt.
 */

/* ---------------------------------------------------------------- Schriften
 * Vier Schnitte, lokal. Es wird nichts von Google nachgeladen: das LG München I
 * hat den Aufruf der Google-Fonts-API 2022 als DSGVO-Verstoß gewertet, und ohne
 * Nachladen braucht die Seite auch kein Einwilligungsbanner.
 */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-500.woff2") format("woff2");
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Archivo Expanded";
	src: url("../fonts/archivo-expanded-500.woff2") format("woff2");
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Archivo Expanded";
	src: url("../fonts/archivo-expanded-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

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

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

body {
	margin: 0;
	background: var(--grund);
	color: var(--text);
	font: 400 var(--gr-text) / var(--zh-text) var(--schrift);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--schrift-breit);
	font-weight: 600;
	line-height: var(--zh-kopf);
	letter-spacing: var(--lw-kopf);
	/* Deutsche Langwörter dürfen trennen, sonst sprengen sie schmale Spalten. */
	hyphens: auto;
}

h1 { font-size: var(--gr-h1); }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); }
h4 { font-size: var(--gr-h4); font-weight: 500; }

p { margin: 0 0 var(--a-sm); max-width: var(--b-text); }
p:last-child { margin-bottom: 0; }

a { color: var(--rot-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--text); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

/* Ein Fokus, der überall trägt: Weiß hat 18,9:1 auf dem Grund und 4,95:1 auf
 * der roten Schaltfläche. Niemals outline:none. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: var(--rand-taste) solid var(--fokus);
	outline-offset: 2px;
}

/* Alle Sprungziele müssen unter der festen Kopfleiste hervorkommen. */
[id] { scroll-margin-top: var(--sprungrand); }

.nur-vorlesen {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.sprunglink {
	position: absolute; left: var(--a-sm); top: var(--a-sm);
	z-index: var(--z-sprung);
	padding: var(--a-xs) var(--a-md);
	background: var(--flaeche); color: var(--text);
	font: 600 var(--gr-ui) / 1 var(--schrift-breit);
	letter-spacing: var(--lw-ui); text-transform: uppercase;
	text-decoration: none;
	transform: translateY(-200%);
}
.sprunglink:focus { transform: none; }

/* ---------------------------------------------------------------- Aufbau */

.sektion {
	padding: var(--sek-y) var(--sek-x);
	position: relative;
}
.sektion--eng    { padding-block: var(--sek-y-eng); }
.sektion--wechsel { background: var(--grund-wechsel); }

.raster {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--fuge-weit);
	row-gap: var(--a-2xl);
	max-width: var(--b-seite);
	margin-inline: auto;
}

/* Die vertikale Marke am linken Rand ist das wiederkehrende Zeichen der Seite. */
.marke {
	position: absolute;
	left: var(--a-md); top: var(--sek-y);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font: 500 var(--gr-marke) / 1 var(--schrift-breit);
	letter-spacing: var(--lw-marke);
	text-transform: uppercase;
	color: var(--rot-text);
	margin: 0;
}

@media (max-width: 1023px) {
	.marke { display: none; }   /* verkleinern hilft nicht, dann lieber weg */
}

.lead { font-size: var(--gr-lead); line-height: var(--zh-lead); }
.leise { color: var(--text-leise); }

/* ---------------------------------------------------------------- Schaltflächen
 * Eine je Abschnitt. Nie zwei nebeneinander.
 */

.taste {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--klickflaeche);
	padding: var(--a-xs) var(--a-lg);
	border: var(--rand-taste) solid var(--rot);
	text-align: center;
	white-space: nowrap;
	border-radius: var(--radius);
	background: transparent;
	color: var(--text);
	font: 600 var(--gr-ui) / 1 var(--schrift-breit);
	letter-spacing: var(--lw-ui);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--t-mittel) var(--kurve),
	            border-color var(--t-mittel) var(--kurve);
}
.taste:hover { background: var(--rot); color: var(--text); }

.taste--voll {
	background: var(--rot);
	border-color: var(--rot);
}
.taste--voll:hover { background: var(--rot-tief); border-color: var(--rot-tief); }

/* ---------------------------------------------------------------- Kopfleiste */

.kopf {
	position: sticky; top: 0;
	z-index: var(--z-kopf);
	background: var(--grund);
	transition: height var(--t-mittel) var(--kurve),
	            background-color var(--t-mittel) var(--kurve);
}

/* Auf der Startseite liegt die Leiste durchsichtig über dem Kopfbild. */
.startseite .kopf {
	position: absolute; left: 0; right: 0;
	background: transparent;
}
.startseite .kopf.ist-fest {
	position: fixed;
	background: var(--grund);
	border-bottom: var(--rand-haar) solid var(--linie);
}

.kopf__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--a-md);
	height: var(--kopf-h);
	max-width: var(--b-seite);
	margin-inline: auto;
	padding-inline: min(var(--sek-x), 48px);
	transition: height var(--t-mittel) var(--kurve);
}
.kopf.ist-fest .kopf__innen { height: var(--kopf-h-fest); }

.kopf__logo img,
.kopf__logo svg { height: var(--logo-h); width: auto; transition: height var(--t-mittel) var(--kurve); }
.kopf.ist-fest .kopf__logo img,
.kopf.ist-fest .kopf__logo svg { height: var(--logo-h-fest); }

/* ---------------------------------------------------------------- Hauptmenü */

.menue { display: flex; align-items: center; gap: 28px; }

.menue__punkt { position: relative; }

.menue__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--klickflaeche);
	padding-block: var(--a-xs);
	color: var(--text);
	font: 600 var(--gr-ui) / var(--zh-ui) var(--schrift-breit);
	letter-spacing: var(--lw-ui);
	text-transform: uppercase;
	text-decoration: none;
	position: relative;
}

/* Der aktive Zustand wird nie allein über Farbe angezeigt: es kommt immer die
 * Linie dazu. */
.menue__link::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 6px;
	height: var(--rand-taste);
	background: var(--rot);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-schnell) var(--kurve);
}
.menue__link:hover::after,
.menue__link:focus-visible::after,
.menue__punkt--aktiv > .menue__link::after { transform: scaleX(1); }

/* Der Menüpunkt Art & Design trägt statt eines Wortes das Zweitlogo. */
.menue__logo { padding-inline: 20px; }
.menue__logo img,
.menue__logo svg { height: var(--logo-art-h); width: auto; transform: translateY(-1px); }

.menue__telefon {
	display: inline-flex; align-items: center; gap: var(--a-2xs);
	min-height: var(--klickflaeche);
	padding-left: var(--a-md);
	border-left: var(--rand-haar) solid var(--linie);
	color: var(--text);
	font-size: var(--gr-klein);
	text-decoration: none;
}
.menue__telefon svg { width: 16px; height: 16px; color: var(--rot); }

/* ---------------------------------------------------------------- Menüfeld Leistungen */

.menuefeld {
	position: absolute; top: 100%; left: 0;
	z-index: var(--z-menuefeld);
	width: var(--b-menuefeld);
	padding-block: var(--a-xs);
	background: var(--flaeche);
	border: var(--rand-haar) solid var(--linie);
	border-radius: var(--radius);
}
.menuefeld[hidden] { display: none; }

.menuefeld__link {
	display: flex; align-items: center; gap: var(--a-xs);
	min-height: 48px;
	padding: var(--a-xs) 20px;
	color: var(--text);
	font: 500 14px / 1.3 var(--schrift-breit);
	text-decoration: none;
	position: relative;
}
.menuefeld__link::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0;
	width: var(--rand-taste);
	background: var(--rot);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--t-schnell) var(--kurve);
}
.menuefeld__link:hover,
.menuefeld__link:focus-visible { background: rgba(255, 255, 255, .06); }
.menuefeld__link:hover::before,
.menuefeld__link:focus-visible::before { transform: scaleX(1); }

.menuefeld__link .icon { color: var(--rot-text); stroke-width: var(--icon-strich-zeile); }

.menuefeld__alle {
	display: block;
	margin-top: var(--a-xs);
	padding: var(--a-xs) 20px 0;
	border-top: var(--rand-haar) solid var(--linie);
	color: var(--rot-text);
	font-size: var(--gr-klein);
}

/* ---------------------------------------------------------------- Piktogramme */

.icon {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--icon-strich);
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------------------------------------------------------------- Leistungen
 * Rahmenlos. Kein Rahmen, kein Kartengrund, kein Schatten, kein Hover auf dem
 * Block. Genau diese Rahmenlosigkeit trägt die ruhige Wirkung des Vorbilds.
 */

.leistungen__text { grid-column: 1 / 4; }
.leistungen__text > * + * { margin-top: var(--a-lg); }

.leistungen__raster {
	grid-column: 4 / 13;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--fuge);
	row-gap: var(--a-2xl);
	align-items: start;   /* ungleich lange Texte nicht auf gleiche Höhe ziehen */
}

.leistung__icon {
	width: var(--icon-raster);
	height: var(--icon-raster);
	color: var(--rot);
	margin-bottom: var(--a-lg);
}

.leistung__titel {
	margin-bottom: var(--a-sm);
	font-family: var(--schrift-breit);
	font-weight: 500;
	font-size: var(--gr-h4);
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--text);   /* nicht rot: Rot fällt als Textfarbe durch die Prüfung */
}

.leistung__text { color: var(--text-leise); }

.leistung__mehr {
	display: inline-block;
	margin-top: var(--a-xs);
	font-size: var(--gr-klein);
	color: var(--rot-text);
}

@media (max-width: 1023px) {
	.leistungen__text   { grid-column: 1 / -1; margin-bottom: var(--a-2xl); }
	.leistungen__raster { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
	.leistungen__raster { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Einblenden */

.js .enthuellen {
	opacity: 0;
	transform: translateY(var(--enthuellen-versatz));
	transition: opacity var(--t-langsam) var(--kurve-enthuellen),
	            transform var(--t-langsam) var(--kurve-enthuellen);
}
.js .enthuellen.ist-sichtbar { opacity: 1; transform: none; }

/* Die Piktogramme zeichnen sich beim Einblenden bewusst nicht selbst. Das
 * setzt pathLength voraus, und das rechnet der Browser in Benutzereinheiten,
 * während vector-effect="non-scaling-stroke" den Strich in Gerätepixeln
 * bemisst. Aus dem Missverhältnis wird nur ein Teil der Kontur gezeichnet,
 * gemessen rund sechzig Prozent. Der gleichmäßige Haarstrich bei jeder Größe
 * wiegt schwerer als der Effekt. */

@media (prefers-reduced-motion: reduce) {
	.js .enthuellen { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Fuß */

.fuss {
	background: var(--grund-wechsel);
	border-top: var(--rand-haar) solid var(--linie);
	padding: var(--sek-y-eng) var(--sek-x);
}

.fuss__raster {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--fuge-weit);
	max-width: var(--b-seite);
	margin-inline: auto;
}

.fuss__titel {
	margin-bottom: var(--a-sm);
	font: 500 var(--gr-marke) / 1 var(--schrift-breit);
	letter-spacing: var(--lw-marke);
	text-transform: uppercase;
	color: var(--rot-text);
}

/* Die Rechtslinks stehen genauso groß wie die übrigen. Sie werden nicht
 * kleingesetzt, und sie heißen, wie sie heißen. */
.fuss__liste li + li { margin-top: var(--a-xs); }

.fuss__liste a {
	display: inline-flex; align-items: center; gap: var(--a-2xs);
	min-height: var(--klickflaeche);
	color: var(--text);
	font-size: var(--gr-klein);
	text-decoration: none;
}
.fuss__liste a:hover { text-decoration: underline; }
.fuss__liste a::before {
	content: "";
	width: 8px; height: 8px;
	border-top: var(--rand-taste) solid var(--rot);
	border-right: var(--rand-taste) solid var(--rot);
	transform: rotate(45deg);
	flex: none;
}

.fuss__schluss {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--a-md);
	max-width: var(--b-seite);
	margin: var(--a-2xl) auto 0;
	padding-top: var(--a-md);
	border-top: var(--rand-haar) solid var(--linie);
	font-size: var(--gr-klein);
	color: var(--text-leise);
}

@media (max-width: 899px) { .fuss__raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .fuss__raster { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Kopfbereich
 * Ein statischer Kopf, kein Schieber. Er funktioniert dadurch immer gleich, und
 * niemand muss auf das zweite Bild warten, um zu erfahren, worum es geht.
 */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 82svh, 800px);
	padding: calc(var(--kopf-h) + var(--sek-y)) var(--sek-x) var(--sek-y);
	overflow: hidden;
}

.hero__bild {
	position: absolute; inset: 0;
	z-index: 0;
}
.hero__bild img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: var(--bild-referenz);
}

/* Oben durchsichtig, damit das Menü lesbar bleibt, unten dicht, damit der Text
 * steht. Ein gleichmäßiger Schleier kann nur eines von beidem. */
.hero::after {
	content: "";
	position: absolute; inset: 0;
	z-index: 1;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, .55) 0%,
		rgba(0, 0, 0, .35) 45%,
		rgba(0, 0, 0, .94) 100%);
}

.hero__innen {
	position: relative;
	z-index: 2;
	max-width: var(--b-seite);
	margin-inline: auto;
	width: 100%;
}

.hero__oben {
	margin-bottom: var(--a-md);
	font: 500 var(--gr-marke) / 1 var(--schrift-breit);
	letter-spacing: var(--lw-marke);
	text-transform: uppercase;
	color: var(--rot-text);
}

.hero__stapel {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--a-xl);
	font: 500 var(--gr-hero) / var(--zh-hero) var(--schrift-breit);
	letter-spacing: var(--lw-hero);
	text-transform: uppercase;
}
.hero__wort--rot { color: var(--rot); }

.hero__titel {
	max-width: 24ch;
	margin-bottom: var(--a-xl);
	font-size: var(--gr-h2);
}

.hero__tasten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--a-xl);
	max-width: none;
	margin: 0;
}

.hero__anruf {
	display: inline-flex;
	align-items: center;
	min-height: var(--klickflaeche);
	color: var(--text);
	font: 600 var(--gr-ui) / 1 var(--schrift-breit);
	letter-spacing: var(--lw-ui);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: .4em;
	text-decoration-color: var(--rot);
	text-decoration-thickness: var(--rand-taste);
}

/* ---------------------------------------------------------------- Menü am Telefon */

.menue__schalter {
	display: none;
	width: var(--klickflaeche);
	height: var(--klickflaeche);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.menue__schalter span {
	display: block;
	width: 22px; height: var(--rand-taste);
	background: var(--text);
	transition: transform var(--t-schnell) var(--kurve),
	            opacity var(--t-schnell) var(--kurve);
}
.menue__schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menue__schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue__schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menue__liste { display: contents; }

.menue__auf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: var(--klickflaeche);
	margin-left: var(--a-3xs);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--rot);
	cursor: pointer;
}
.menue__auf svg { transition: transform var(--t-schnell) var(--kurve); }
.menue__auf[aria-expanded="true"] svg { transform: rotate(180deg); }

.menue__punkt { display: flex; align-items: center; }

@media (max-width: 1023px) {
	.menue__schalter { display: flex; }

	.menue {
		position: fixed; inset: 0;
		z-index: var(--z-overlay);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: calc(var(--kopf-h-fest) + var(--a-xl)) var(--sek-x) var(--sek-y);
		background: var(--grund);   /* deckend, nicht durchscheinend */
		overflow-y: auto;
		opacity: 0;
		transform: translateY(-8px);
		visibility: hidden;
		transition: opacity var(--t-mittel) var(--kurve),
		            transform var(--t-mittel) var(--kurve),
		            visibility var(--t-mittel);
	}

	.menue-offen .menue { opacity: 1; transform: none; visibility: visible; }
	.menue-offen { overflow: hidden; }

	.menue__liste { display: flex; flex-direction: column; }

	.menue__punkt {
		border-bottom: var(--rand-haar) solid var(--linie);
		justify-content: space-between;
	}

	.menue__link {
		flex: 1;
		padding-block: 20px;
		font-size: clamp(1.75rem, 7vw, 2.5rem);
		font-weight: 500;
		letter-spacing: 0;
	}
	.menue__link::after { display: none; }
	.menue__punkt--aktiv > .menue__link { color: var(--rot-text); }

	.menue__logo img,
	.menue__logo svg { height: 28px; }

	.menuefeld {
		position: static;
		width: 100%;
		border: 0;
		background: transparent;
		padding-bottom: var(--a-md);
	}

	.menue__telefon {
		margin-top: var(--a-xl);
		padding-left: 0;
		border-left: 0;
		font-size: var(--gr-h3);
	}
}

/* ---------------------------------------------------------------- Seitenkopf */

.seitenkopf {
	position: relative;
	padding: calc(var(--kopf-h) + var(--sek-y)) var(--sek-x) var(--sek-y-eng);
	overflow: hidden;
}
.startseite .seitenkopf { padding-top: calc(var(--kopf-h) + var(--sek-y)); }

.seitenkopf__bild { position: absolute; inset: 0; z-index: 0; }
.seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; filter: var(--bild-referenz); }
.seitenkopf--bild::after {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: var(--schleier-stark);
}

.seitenkopf__innen {
	position: relative; z-index: 2;
	max-width: var(--b-seite);
	margin-inline: auto;
}
.seitenkopf__innen > * + * { margin-top: var(--a-md); }
.seitenkopf__innen h1 { max-width: 20ch; }
.seitenkopf__innen .lead { max-width: 52ch; }

.seitenkopf--artdesign svg { height: clamp(56px, 7vw, 96px); width: auto; }

/* ---------------------------------------------------------------- Ein Leistungsabschnitt */

.leistung-block__raster { align-items: center; }

.leistung-block__text { grid-column: 1 / 7; }
.leistung-block__bild { grid-column: 8 / 13; }

/* Jeder zweite Abschnitt spiegelt, damit die Seite nicht als Liste liest. */
.leistung-block__raster--gedreht .leistung-block__text { grid-column: 7 / 13; }
.leistung-block__raster--gedreht .leistung-block__bild { grid-column: 1 / 6; }

.leistung-block__text > * + * { margin-top: var(--a-md); }
.leistung-block__text .leistung__icon { margin-bottom: 0; }
.leistung-block__bild img { width: 100%; filter: var(--bild-referenz); }

@media (max-width: 899px) {
	.leistung-block__text,
	.leistung-block__bild,
	.leistung-block__raster--gedreht .leistung-block__text,
	.leistung-block__raster--gedreht .leistung-block__bild { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Über uns */

.ueber__text { grid-column: 1 / 8; }
.ueber__text > * + * { margin-top: var(--a-md); }
.ueber__bild { grid-column: 9 / 13; }

/* Das Porträt ragt in die Sektion darüber. Am Telefon nicht: dort steht kein
 * Platz zur Verfügung, den man überlappen könnte. */
.ueber__bild img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: var(--bild-portrait);
	margin-top: var(--versatz-ueberlappung);
	box-shadow: var(--schatten-hebung);
}

.qualifikationen {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--a-sm) var(--fuge);
	margin-top: var(--a-xl);
}
.qualifikationen li {
	display: flex; flex-direction: column; gap: var(--a-3xs);
	padding-left: var(--a-md);
	position: relative;
}
.qualifikationen li::before {
	content: "";
	position: absolute; left: 0; top: .55em;
	width: 8px; height: 8px;
	border-top: var(--rand-taste) solid var(--rot);
	border-right: var(--rand-taste) solid var(--rot);
	transform: rotate(45deg);
}
.qualifikation__titel { font-weight: 500; }

.bilderreihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--fuge);
	max-width: var(--b-seite);
	margin-inline: auto;
}
.bilderreihe img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: var(--bild-referenz); }

@media (max-width: 899px) {
	.ueber__text, .ueber__bild { grid-column: 1 / -1; }
	.ueber__bild { order: -1; }
	.ueber__bild img { margin-top: 0; }
	.qualifikationen { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Art & Design
 * Die einzige Stelle der Seite, an der Bilder farbig bleiben.
 */

.arbeiten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--fuge-weit);
	max-width: var(--b-seite);
	margin-inline: auto;
}
.arbeit__bild { margin: 0 0 var(--a-md); }
.arbeit__bild img {
	width: 100%; aspect-ratio: 1; object-fit: cover;
	filter: var(--bild-artdesign);
}
.arbeit__titel {
	font-size: var(--gr-h4); font-weight: 500;
	text-transform: uppercase;
	margin-bottom: var(--a-2xs);
}
.arbeit__technik {
	color: var(--rot-text);
	font-size: var(--gr-klein);
	letter-spacing: var(--lw-ui);
	text-transform: uppercase;
	margin-bottom: var(--a-xs);
}

/* ---------------------------------------------------------------- Kontaktband
 * Eine dunkle Karte, die aus einem Band herausragt. Die einzige Stelle, an der
 * eine Ebene über eine Sektionsgrenze läuft.
 */

.kontaktband {
	position: relative;
	padding: 0 var(--sek-x) var(--sek-y);
}
.kontaktband__band {
	height: clamp(180px, 24vw, 320px);
	background: var(--rot-tief);
}
.kontaktband__karte {
	position: relative;
	max-width: 1200px;
	margin: var(--versatz-ueberlappung) auto 0;
	padding: clamp(32px, 5vw, 108px);
	background: var(--grund);
	box-shadow: var(--schatten-hebung);
}
.kontaktband__karte > * + * { margin-top: var(--a-md); }

.marke--innen {
	position: static;
	writing-mode: horizontal-tb;
	transform: none;
	margin-bottom: var(--a-md);
}

.kontaktband__spalten {
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: space-between;
	gap: var(--a-xl);
	margin-top: var(--a-xl);
}
.kontaktband__daten li + li { margin-top: var(--a-2xs); }
.kontaktband__daten a {
	font-size: var(--gr-h3);
	color: var(--text);
	text-decoration: none;
}
.kontaktband__daten a:hover { color: var(--rot-text); }

/* ---------------------------------------------------------------- Kontaktseite */

.kontakt__daten { grid-column: 1 / 6; }
.kontakt__daten > * + * { margin-top: var(--a-md); }
.kontakt__formular { grid-column: 7 / 13; }

.kontakt__adresse { font-style: normal; color: var(--text-leise); }
.kontakt__wege li + li { margin-top: var(--a-2xs); }
.kontakt__wege a { color: var(--text); text-decoration: none; font-size: var(--gr-lead); }
.kontakt__wege a:hover { color: var(--rot-text); }

@media (max-width: 899px) {
	.kontakt__daten, .kontakt__formular { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Formular */

.formular .feld { display: flex; flex-direction: column; gap: var(--a-2xs); max-width: none; }
.formular .feld + .feld { margin-top: var(--a-md); }

.formular label {
	font: 500 var(--gr-klein) / 1.3 var(--schrift-breit);
	letter-spacing: .04em;
}
.formular label span { color: var(--rot-text); }

.formular input,
.formular textarea {
	min-height: var(--klickflaeche);
	padding: var(--a-xs) var(--a-sm);
	background: var(--flaeche);
	border: var(--rand-haar) solid var(--linie-fest);
	border-radius: var(--radius);
	color: var(--text);
	font: 400 var(--gr-text) / var(--zh-text) var(--schrift);
}
.formular textarea { resize: vertical; }

/* Der Rahmen wird beim Fokus dicker. Damit nichts springt, wächst er nach innen. */
.formular input:focus,
.formular textarea:focus {
	border-color: var(--fokus);
	box-shadow: inset 0 0 0 1px var(--fokus);
}

.formular .feld--hinweis { font-size: var(--gr-klein); }

.meldung {
	padding: var(--a-sm) var(--a-md);
	border-left: var(--rand-taste) solid var(--bestaetigt);
	background: rgba(255, 255, 255, .05);
	max-width: none;
}
.meldung--fehler { border-left-color: var(--fehler-rahmen); color: var(--fehler); }

/* ---------------------------------------------------------------- Fließtext */

.inhalt > * + * { margin-top: var(--a-sm); }
.inhalt h2, .inhalt h3 { margin-top: var(--a-xl); }
.inhalt ul { margin-left: var(--a-md); }
.inhalt ul li {
	list-style: none;
	position: relative;
	padding-left: var(--a-sm);
	margin-bottom: var(--a-2xs);
}
.inhalt ul li::before {
	content: "";
	position: absolute; left: 0; top: .7em;
	width: 6px; height: var(--rand-taste);
	background: var(--rot);
}
.inhalt ol { margin-left: var(--a-lg); }
.inhalt ol li { list-style: decimal; margin-bottom: var(--a-2xs); }

/* ---------------------------------------------------------------- Betrieb
 * Der ruhige Abschnitt nach dem Kopfbereich. Kein Bild, keine Schaltfläche:
 * er macht Luft, bevor die Leistungen kommen.
 */

.betrieb__aussage {
	grid-column: 1 / 9;
	max-width: 18ch;
	margin-bottom: var(--a-xl);
}
.betrieb__spalte { max-width: var(--b-text); }
.betrieb__spalte--links  { grid-column: 1 / 7; }
.betrieb__spalte--rechts { grid-column: 7 / 13; }

.kennzahlen {
	display: flex; flex-wrap: wrap;
	max-width: var(--b-seite);
	margin: var(--a-3xl) auto 0;
	border-top: var(--rand-haar) solid var(--linie);
}
.kennzahlen li {
	flex: 1 1 220px;
	padding: var(--a-xl) var(--a-lg) 0 0;
}
.kennzahlen li + li {
	padding-left: var(--a-lg);
	border-left: var(--rand-haar) solid var(--linie);
}
.kennzahl__zahl {
	display: block;
	font: 600 var(--gr-h1) / 1.1 var(--schrift-breit);
	margin-bottom: var(--a-2xs);
}
.kennzahl__label { display: block; font-size: var(--gr-klein); }

@media (max-width: 899px) {
	.betrieb__aussage,
	.betrieb__spalte--links,
	.betrieb__spalte--rechts { grid-column: 1 / -1; }
	.betrieb__spalte--rechts { margin-top: var(--a-md); }
	.kennzahlen li + li { padding-left: 0; border-left: 0; }
}

/* ---------------------------------------------------------------- Referenzen */

.referenzen__kopf {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: var(--a-md);
	max-width: var(--b-seite);
	margin: 0 auto var(--a-2xl);
}
.referenzen__tasten { display: flex; gap: var(--a-2xs); flex: none; }

.rundtaste {
	width: var(--klickflaeche); height: var(--klickflaeche);
	display: grid; place-items: center;
	background: none;
	border: var(--rand-haar) solid var(--linie-fest);
	border-radius: var(--radius-rund);
	color: var(--text);
	cursor: pointer;
	transition: border-color var(--t-schnell) var(--kurve),
	            color var(--t-schnell) var(--kurve);
}
.rundtaste:hover { border-color: var(--rot); color: var(--rot-text); }
.rundtaste[disabled] { opacity: .35; cursor: default; }
.rundtaste[disabled]:hover { border-color: var(--linie-fest); color: var(--text); }

/* Waagerechte Bahn statt Karussell-Bibliothek: scroll-snap kann das von Haus
 * aus, lässt sich mit der Tastatur bedienen und kostet kein Kilobyte. */
.referenzen__bahn {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, calc((100% - 3 * var(--fuge)) / 4));
	gap: var(--fuge);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--sek-x);
	padding-inline: var(--sek-x);
	margin-inline: calc(-1 * var(--sek-x));
	scrollbar-width: none;
}
.referenzen__bahn::-webkit-scrollbar { display: none; }
.referenz { scroll-snap-align: start; }
.referenz__bild { margin: 0 0 var(--a-sm); overflow: hidden; }
.referenz__bild img {
	width: 100%; aspect-ratio: 1; object-fit: cover;
	filter: var(--bild-referenz);
	transition: filter var(--t-basis) var(--kurve),
	            transform var(--t-basis) var(--kurve);
}
.referenz:hover .referenz__bild img,
.referenz:focus-within .referenz__bild img {
	filter: grayscale(.2) contrast(1.05);
	transform: scale(1.03);
}
.referenz__titel { font-size: var(--gr-klein); margin-bottom: 2px; }
.referenz__ort { font-size: var(--gr-klein); }

@media (max-width: 1199px) { .referenzen__bahn { grid-auto-columns: minmax(240px, calc((100% - 2 * var(--fuge)) / 3)); } }
@media (max-width: 899px)  { .referenzen__bahn { grid-auto-columns: minmax(220px, calc((100% - var(--fuge)) / 2)); } }
@media (max-width: 599px)  { .referenzen__bahn { grid-auto-columns: 78%; } }

/* ---------------------------------------------------------------- Art & Design
 * Die einzige Sektion mit Farbe. Der Bildteil läuft bis an den Rand.
 */

.sektion--randlos { padding-inline: 0; }

.artdesign { position: relative; }
.artdesign__wand {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
	gap: var(--fuge);
	height: clamp(220px, 26vw, 420px);
}
.artdesign__wand img { width: 100%; height: 100%; object-fit: cover; filter: var(--bild-artdesign); }

/* Ohne Bildwand steht die Tafel für sich und ragt in nichts hinein. */
.artdesign--ohne-bilder { padding-inline: var(--sek-x); }
.artdesign--ohne-bilder .artdesign__tafel {
	margin: 0;
	max-width: 720px;
	background: var(--flaeche);
	backdrop-filter: none;
}

.artdesign__tafel {
	max-width: 560px;
	margin: calc(-1 * var(--a-3xl)) var(--sek-x) 0;
	padding: clamp(28px, 4vw, 56px);
	background: var(--schleier-stark);
	backdrop-filter: blur(6px);
}
.artdesign__tafel > * + * { margin-top: var(--a-md); }
.artdesign__tafel svg { height: clamp(40px, 5vw, 56px); width: auto; }

@media (max-width: 899px) {
	.artdesign__wand { grid-template-columns: 1fr 1fr; height: auto; }
	.artdesign__wand img { aspect-ratio: 1; }
	.artdesign__tafel { margin-inline: var(--sek-x); }
}

/* ---------------------------------------------------------------- Ablauf
 * Vier Spalten, getrennt durch Linien statt durch Karten. Die Ziffern sind
 * hier keine Zierde: der Ablauf hat eine echte Reihenfolge.
 */

.ablauf__titel { max-width: 24ch; margin-bottom: var(--a-2xl); }

.ablauf__schritte {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--fuge-weit);
	max-width: var(--b-seite);
	margin-inline: auto;
}
.schritt { transition-delay: var(--verzug, 0ms); }
.schritt + .schritt { padding-left: var(--fuge); border-left: var(--rand-haar) solid var(--linie); }
.schritt__zahl {
	display: block;
	font: 600 var(--gr-h1) / 1 var(--schrift-breit);
	color: var(--rot);
	margin-bottom: var(--a-md);
}
.schritt__titel {
	font: 500 var(--gr-h4) / 1.25 var(--schrift-breit);
	text-transform: uppercase;
	margin-bottom: var(--a-xs);
}

@media (max-width: 1023px) {
	.ablauf__schritte { grid-template-columns: repeat(2, 1fr); row-gap: var(--a-2xl); }
	.schritt:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 599px) {
	.ablauf__schritte { grid-template-columns: 1fr; }
	.schritt + .schritt {
		padding-left: 0; border-left: 0;
		padding-top: var(--a-lg); border-top: var(--rand-haar) solid var(--linie);
	}
}

/* ---------------------------------------------------------------- Trefferflächen
 * Die Erfolgskriterien verlangen 24 mal 24 Pixel; Verweise mitten im Satz sind
 * davon ausgenommen. Wir gehen bei allem, was für sich steht, auf 44 Pixel und
 * halten bei den Listen im Fuß und im Kontaktband wenigstens 24 Pixel Höhe mit
 * genug Abstand dazwischen ein, damit sich zwei Ziele nicht berühren.
 */

.sprunglink:focus,
.kopf__logo {
	min-height: var(--klickflaeche);
	display: inline-flex;
	align-items: center;
}

/* „Mehr dazu“ steht allein unter dem Block, ist also kein Verweis im Satz. */
.leistung__mehr {
	display: inline-flex;
	align-items: center;
	min-height: var(--klickflaeche);
}

.fuss__liste a,
.fuss__daten a,
.kontaktband__daten a,
.kontakt__wege a,
.fuss__unten a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding-block: 4px;
}

/* Stichworte unter dem Kurztext einer Leistung. Sie stehen als Liste, weil sie
 * eine sind, und bekommen eine Haarlinie statt eines Aufzählungszeichens. */
.leistung__stichworte {
	margin: var(--a-sm) 0 0;
	border-top: var(--rand-haar) solid var(--linie);
	padding-top: var(--a-xs);
}
.leistung__stichworte li {
	display: flex;
	align-items: baseline;
	gap: var(--a-2xs);
	font-size: var(--gr-klein);
	color: var(--text-leise);
	line-height: 1.5;
	padding-block: 1px;
}
.leistung__stichworte li::before {
	content: "";
	flex: none;
	width: 6px; height: var(--rand-taste);
	background: var(--rot);
	transform: translateY(-3px);
}