/* ==========================================================================
   Gear-Dock Übersichtsseite

   Aufbau:
     1. Farben und Maße
     2. Grundlagen und Reset
     3. Bausteine (Hülle, Knöpfe, Überschriften)
     4. Kopf und Navigation
     5. Kopfbereich der Startseite samt Zonengrafik
     6. Abschnitte der Startseite
     7. Rechtsseiten und Kontakt
     8. Fuß
     9. Bewegung und kleine Bildschirme

   Es werden bewusst keine Schriften von fremden Servern geladen. Das hält
   die Datenschutzerklärung kurz und die Seite schnell.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Werte */

.gd-body {
	/* Farben, Schriften und Formen kommen aus design.php in den Seitenkopf.
	   Hier stehen nur die Masse, die nicht einstellbar sein sollen. */
	--gd-breit: 1160px;
	--gd-eng:    760px;
	--gd-luft:  clamp(1.25rem, 4vw, 2.5rem);
}


/* ----------------------------------------------------- 2. Grundlagen */

/* Zurücksetzen, was ein fremdes Theme mitbringen könnte. Bewusst eng auf
   die eigenen Bereiche begrenzt. */
.gd-body,
.gd-body *,
.gd-body *::before,
.gd-body *::after {
	box-sizing: border-box;
}

.gd-body {
	margin: 0;
	padding: 0;
	background: var(--gd-papier);
	color: var(--gd-tinte);
	font-family: var(--gd-schrift-text);
	font-size: var(--gd-grund);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

.gd-body h1,
.gd-body h2,
.gd-body h3,
.gd-body p,
.gd-body ul,
.gd-body ol,
.gd-body dl,
.gd-body dd,
.gd-body figure,
.gd-body blockquote {
	margin: 0;
	padding: 0;
}

.gd-body ul,
.gd-body ol {
	list-style: none;
}

.gd-body img,
.gd-body svg {
	max-width: 100%;
	display: block;
}

.gd-body a {
	color: var(--gd-signal);
	text-decoration-color: rgba(var(--gd-signal-rgb), .35);
	text-underline-offset: 3px;
}

.gd-body a:hover {
	text-decoration-color: currentColor;
}

.gd-body code {
	font-family: var(--gd-schrift-mono);
	font-size: .88em;
	background: rgba(var(--gd-tinte-rgb), .06);
	border: 1px solid var(--gd-linie);
	border-radius: 5px;
	padding: .1em .4em;
	word-break: break-word;
}

.gd-body :focus-visible {
	outline: 2px solid var(--gd-signal);
	outline-offset: 3px;
	border-radius: 4px;
}

.gd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--gd-signal);
	color: var(--gd-auf-signal);
	padding: .75rem 1.25rem;
	font-weight: 600;
	border-radius: 0 0 var(--gd-radius) 0;
}

.gd-skip:focus {
	left: 0;
}

/* Nur für Screenreader. WordPress bringt die Klasse oft schon mit, hier
   noch einmal, damit sie unabhängig vom Theme sicher greift. */
.gd-body .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------- 3. Bausteine */

.gd-huelle {
	width: 100%;
	max-width: var(--gd-breit);
	margin-inline: auto;
	padding-inline: var(--gd-luft);
}

.gd-huelle--eng {
	max-width: calc(var(--gd-eng) + 2 * 2.5rem);
}

.gd-kicker {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gd-signal);
	margin-bottom: .9rem;
}

.gd-titel {
	font-family: var(--gd-schrift-kopf);
	text-transform: var(--gd-versal);
	font-size: calc(var(--gd-kopffaktor) * clamp(1.85rem, 1.2rem + 2.4vw, 2.9rem));
	line-height: 1.12;
	letter-spacing: -.022em;
	font-weight: 700;
	color: var(--gd-stark);
	text-wrap: balance;
}

.gd-vorspann {
	font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
	color: var(--gd-leise);
	margin-top: 1.1rem;
	max-width: 62ch;
}

.gd-hinweis {
	font-size: .9rem;
	color: var(--gd-still);
	margin-top: 1rem;
}

.gd-fliess p + p {
	margin-top: 1.1rem;
}

.gd-fliess p {
	color: var(--gd-leise);
}

.gd-notiz {
	margin-top: 2.5rem;
	padding: 1.4rem 1.6rem;
	border-left: var(--gd-balken) solid var(--gd-signal);
	background: linear-gradient(90deg, rgba(var(--gd-signal-rgb), .07), transparent 70%);
	border-radius: 0 var(--gd-radius) var(--gd-radius) 0;
	color: var(--gd-leise);
	max-width: 74ch;
}

.gd-notiz--eng {
	margin-top: 1.75rem;
	font-size: .95rem;
}

/* Knöpfe */

.gd-body .gd-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.6rem;
	border-radius: 999px;
	background: var(--gd-signal);
	color: var(--gd-auf-signal);
	font-weight: 650;
	font-size: .97rem;
	letter-spacing: -.01em;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
	box-shadow: 0 0 0 0 rgba(var(--gd-signal-rgb), .5);
}

.gd-body .gd-knopf:hover {
	background: var(--gd-signal-hell);
	transform: translateY(-1px);
	box-shadow: 0 8px 30px -8px rgba(var(--gd-signal-rgb), .65);
	color: var(--gd-auf-signal);
}

.gd-body .gd-knopf--leer {
	background: transparent;
	color: var(--gd-tinte);
	border-color: var(--gd-linie-hell);
	box-shadow: none;
}

.gd-body .gd-knopf--leer:hover {
	background: rgba(var(--gd-tinte-rgb), .05);
	border-color: var(--gd-signal);
	color: var(--gd-stark);
	box-shadow: none;
}

.gd-body .gd-knopf--klein {
	padding: .55rem 1.1rem;
	font-size: .9rem;
}

.gd-knopfreihe {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: 2rem;
}

.gd-knopfreihe--mitte {
	justify-content: center;
}

/* Platzhalter und Warnungen */

.gd-platzhalter {
	background: rgba(var(--gd-warn-rgb), .12);
	color: var(--gd-warn);
	border: 1px dashed rgba(var(--gd-warn-rgb), .55);
	border-radius: 5px;
	padding: .05em .45em;
	font-family: var(--gd-schrift-mono);
	font-size: .85em;
}

.gd-warnung {
	border: 1px solid rgba(var(--gd-warn-rgb), .35);
	background: rgba(var(--gd-warn-rgb), .06);
	border-radius: var(--gd-radius);
	padding: 1.5rem 1.7rem;
	margin-bottom: 2.5rem;
}

.gd-warnung h2 {
	font-size: 1.05rem;
	color: var(--gd-warn);
	margin-bottom: .6rem;
}

.gd-warnung p {
	color: var(--gd-leise);
	font-size: .95rem;
}

.gd-warnung ul {
	margin-top: .9rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.gd-warnung li {
	font-family: var(--gd-schrift-mono);
	font-size: .78rem;
	color: var(--gd-warn);
	border: 1px dashed rgba(var(--gd-warn-rgb), .4);
	border-radius: 5px;
	padding: .15rem .5rem;
}

/* ------------------------------------------------ 4. Kopf und Navigation */

.gd-kopf {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(var(--gd-papier-rgb), .72);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, background .25s ease;
}

.gd-kopf.ist-gescrollt {
	border-bottom-color: var(--gd-linie);
	background: rgba(var(--gd-papier-rgb), .9);
}

/* Die WordPress-Adminleiste schiebt die Seite nach unten. */
.admin-bar .gd-kopf { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .gd-kopf { top: 46px; }
}

.gd-kopf__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 68px;
}

/* Der Vorsatz .gd-body ist Absicht: sonst gewinnt die allgemeine Regel
   ".gd-body a" weiter oben, weil sie mit Element-Selektor spezifischer ist
   als eine einzelne Klasse. Die Beschriftung wäre dann akzentfarben und auf
   dem akzentfarbenen Knopf unlesbar. Gleiches gilt für .gd-knopf. */
.gd-body .gd-marke {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	text-decoration: none;
	color: var(--gd-stark);
	font-weight: 680;
	letter-spacing: -.02em;
	font-size: 1.06rem;
}

/* Das Logo erbt über fill="currentColor" die Textfarbe der Umgebung.
   Die Quelldatei ist schwarz und wäre auf dunklem Grund unsichtbar. */
.gd-marke__logo {
	width: auto;
	height: 26px;
	aspect-ratio: 153.72 / 146.53;
	flex: none;
	color: var(--gd-stark);
	transition: color .18s ease;
}

.gd-marke:hover .gd-marke__logo {
	color: var(--gd-signal);
}

.gd-marke__logo--gross {
	height: 38px;
}

/* Das Sprite selbst darf nichts einnehmen. display:none ginge nicht,
   dann rendern manche Browser die referenzierten Symbole nicht. */
.gd-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.gd-nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.gd-nav__liste {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.gd-nav__liste a {
	color: var(--gd-leise);
	text-decoration: none;
	font-size: .93rem;
	font-weight: 500;
	transition: color .16s ease;
}

.gd-nav__liste a:hover {
	color: var(--gd-stark);
}

.gd-burger {
	display: none;
	width: 42px;
	height: 42px;
	border: 1px solid var(--gd-linie-hell);
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	position: relative;
}

.gd-burger__strich,
.gd-burger__strich::before,
.gd-burger__strich::after {
	position: absolute;
	left: 50%;
	width: 17px;
	height: 1.5px;
	background: var(--gd-tinte);
	transform: translateX(-50%);
	transition: transform .22s ease, opacity .15s ease;
	border-radius: 2px;
}

.gd-burger__strich {
	top: 50%;
	margin-top: -.75px;
}

.gd-burger__strich::before,
.gd-burger__strich::after {
	content: "";
	left: 0;
	transform: none;
}

.gd-burger__strich::before { top: -6px; }
.gd-burger__strich::after  { top: 6px; }

.gd-burger[aria-expanded="true"] .gd-burger__strich { background: transparent; }
.gd-burger[aria-expanded="true"] .gd-burger__strich::before { transform: translateY(6px) rotate(45deg); }
.gd-burger[aria-expanded="true"] .gd-burger__strich::after  { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------- 5. Kopfbereich */

.gd-hero {
	position: relative;
	padding-top: clamp(3.5rem, 7vw, 6.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
}

.gd-hero__schein {
	position: absolute;
	inset: -30% -10% auto 25%;
	height: 720px;
	pointer-events: none;
	background:
		radial-gradient(38% 42% at 60% 45%, rgba(var(--gd-signal-rgb), .17), transparent 70%),
		radial-gradient(30% 34% at 78% 62%, rgba(var(--gd-signal-rgb), .10), transparent 70%);
	filter: blur(10px);
}

.gd-hero__raster {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.gd-status {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: .82rem;
	color: var(--gd-leise);
	border: 1px solid var(--gd-linie);
	background: rgba(var(--gd-tinte-rgb), .03);
	border-radius: 999px;
	padding: .35rem .9rem .35rem .7rem;
	margin-bottom: 1.6rem;
}

.gd-status__punkt {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gd-signal);
	box-shadow: 0 0 0 0 rgba(var(--gd-signal-rgb), .6);
	animation: gd-puls 2.6s ease-out infinite;
}

@keyframes gd-puls {
	0%   { box-shadow: 0 0 0 0 rgba(var(--gd-signal-rgb), .55); }
	70%  { box-shadow: 0 0 0 8px rgba(var(--gd-signal-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--gd-signal-rgb), 0); }
}

.gd-hero__titel {
	font-family: var(--gd-schrift-kopf);
	text-transform: var(--gd-versal);
	font-size: calc(var(--gd-kopffaktor) * clamp(2.4rem, 1.3rem + 4.2vw, 4.05rem));
	line-height: 1.04;
	letter-spacing: -.035em;
	font-weight: 700;
	color: var(--gd-stark);
	text-wrap: balance;
}

.gd-hero__absatz {
	margin-top: 1.4rem;
	font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
	color: var(--gd-leise);
	max-width: 54ch;
}

/* Zonengrafik */

.gd-zonen {
	position: relative;
}

.gd-zonen__svg {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	height: auto;
	overflow: visible;
}

/* Streulicht an der Wand. Kräftig weichgezeichnet, sonst zeichnet sich die
   Ellipse als sichtbare Scheibe hinter dem Bauteil ab. */
.gd-zonen__streulicht {
	fill: rgba(var(--gd-signal-rgb), .07);
	filter: blur(70px);
}

/* Der Korpus: Wandplatte, Mulde und schräger Arm in einem Zug. Die feine
   hellere Kante oben rechts deutet den Lichteinfall an, mehr Plastizität
   braucht eine Kontur nicht. */
.gd-zonen__korpus {
	fill: var(--gd-flaeche-hoch);
	stroke: rgba(var(--gd-tinte-rgb), .12);
	stroke-width: 2;
	stroke-linejoin: round;
}

/* Der Querarm ist kein eigenes Teil, sondern dieselbe Form. Er wird als
   dicke Linie mit runder Kappe gezeichnet und liegt farbgleich auf dem
   Korpus, damit beide zu einer Silhouette verschmelzen. */
.gd-zonen__querarm {
	fill: none;
	stroke: var(--gd-flaeche-hoch);
	stroke-width: 86;
	stroke-linecap: round;
}

.gd-zonen__loch {
	fill: var(--gd-papier);
	stroke: rgba(var(--gd-tinte-rgb), .08);
	stroke-width: 1.5;
}

/* Das Licht, das unten aus dem Sockelkanal austritt. Keine Verlaufsdefinition,
   sondern eine weich gezeichnete Fläche, damit die Farbe aus derselben
   Variablen kommt wie das zugehörige Band. */
.gd-zonen__kegel {
	fill: var(--gd-zone4);
	opacity: .09;
	filter: blur(10px);
}

/* Die Lichtkanäle. Als Linien mit runder Kappe gezeichnet, dadurch sehen
   sie aus wie die länglichen Schlitze im Bauteil. */
.gd-zonen__band {
	fill: none;
	stroke-width: 34;
	stroke-linecap: round;
	transition: filter .3s ease, opacity .3s ease;
}

.gd-zonen__zone[data-zone="zone1"] .gd-zonen__band {
	stroke: var(--gd-zone1);
	filter: drop-shadow(0 0 9px var(--gd-zone1));
}
.gd-zonen__zone[data-zone="zone2"] .gd-zonen__band {
	stroke: var(--gd-zone2);
	filter: drop-shadow(0 0 9px var(--gd-zone2));
}
.gd-zonen__zone[data-zone="zone3"] .gd-zonen__band {
	stroke: var(--gd-zone3);
	filter: drop-shadow(0 0 9px var(--gd-zone3));
}
.gd-zonen__zone[data-zone="unten"] .gd-zonen__band {
	stroke: var(--gd-zone4);
	filter: drop-shadow(0 0 11px var(--gd-zone4));
}

/* Beim Zeigen auf einen Legendeneintrag treten die anderen Zonen zurück. */
.gd-zonen.hat-fokus .gd-zonen__zone .gd-zonen__band {
	opacity: .18;
	filter: none;
}

.gd-zonen.hat-fokus .gd-zonen__zone.ist-aktiv .gd-zonen__band {
	opacity: 1;
}

.gd-zonen.hat-fokus .gd-zonen__zone.ist-aktiv[data-zone="zone1"] .gd-zonen__band { filter: drop-shadow(0 0 16px var(--gd-zone1)); }
.gd-zonen.hat-fokus .gd-zonen__zone.ist-aktiv[data-zone="zone2"] .gd-zonen__band { filter: drop-shadow(0 0 16px var(--gd-zone2)); }
.gd-zonen.hat-fokus .gd-zonen__zone.ist-aktiv[data-zone="zone3"] .gd-zonen__band { filter: drop-shadow(0 0 16px var(--gd-zone3)); }
.gd-zonen.hat-fokus .gd-zonen__zone.ist-aktiv[data-zone="unten"] .gd-zonen__band { filter: drop-shadow(0 0 18px var(--gd-zone4)); }

.gd-zonen__legende {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.5rem;
}

.gd-zonen__eintrag {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: inherit;
	font-size: .82rem;
	color: var(--gd-leise);
	background: rgba(var(--gd-tinte-rgb), .03);
	border: 1px solid var(--gd-linie);
	border-radius: 999px;
	padding: .35rem .85rem;
	cursor: default;
	transition: color .16s ease, border-color .16s ease;
}

.gd-zonen__eintrag:hover,
.gd-zonen__eintrag:focus-visible {
	color: var(--gd-stark);
	border-color: var(--gd-linie-hell);
}

.gd-zonen__punkt {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}

.gd-zonen__punkt--zone1 { background: var(--gd-zone1); box-shadow: 0 0 8px var(--gd-zone1); }
.gd-zonen__punkt--zone2 { background: var(--gd-zone2); box-shadow: 0 0 8px var(--gd-zone2); }
.gd-zonen__punkt--zone3 { background: var(--gd-zone3); box-shadow: 0 0 8px var(--gd-zone3); }
.gd-zonen__punkt--unten { background: var(--gd-zone4); box-shadow: 0 0 8px var(--gd-zone4); }

/* Kennzahlen */

.gd-kennzahlen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	background: var(--gd-linie);
	border: 1px solid var(--gd-linie);
	border-radius: var(--gd-radius-gross);
	overflow: hidden;
}

.gd-kennzahlen li {
	background: var(--gd-flaeche);
	padding: 1.6rem 1.4rem;
	text-align: center;
}

.gd-kennzahlen__wert {
	display: block;
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--gd-stark);
	line-height: 1.1;
}

.gd-kennzahlen__label {
	display: block;
	margin-top: .35rem;
	font-size: .84rem;
	color: var(--gd-still);
}

/* ------------------------------------------- 6. Abschnitte der Startseite */

.gd-block {
	padding-block: calc(var(--gd-dichte) * clamp(4rem, 9vw, 7.5rem));
	position: relative;
}

.gd-block--erst {
	padding-top: clamp(3rem, 6vw, 5rem);
}

.gd-block--getoent {
	background: var(--gd-flaeche);
	border-block: 1px solid var(--gd-linie);
}

.gd-abschnittskopf {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.gd-abschnittskopf .gd-vorspann {
	margin-inline: auto;
}

.gd-abschnittskopf--links {
	margin-inline: 0;
	text-align: left;
}

.gd-abschnittskopf--links .gd-vorspann {
	margin-inline: 0;
}

.gd-zweispalt {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.gd-zweispalt__kopf {
	position: sticky;
	top: 110px;
}

/* Merkmalskarten */

.gd-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 1.1rem;
}

.gd-karte {
	position: relative;
	background: var(--gd-papier);
	border: 1px solid var(--gd-linie);
	border-radius: var(--gd-radius-gross);
	padding: 1.9rem 1.7rem 1.7rem;
	overflow: hidden;
	transition: border-color .22s ease, transform .22s ease;
}

.gd-karte::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--gd-signal-rgb), .55), transparent);
	opacity: 0;
	transition: opacity .25s ease;
}

.gd-karte:hover {
	border-color: var(--gd-linie-hell);
	transform: translateY(-2px);
}

.gd-karte:hover::before {
	opacity: 1;
}

.gd-karte__nummer {
	font-family: var(--gd-schrift-mono);
	font-size: .78rem;
	color: var(--gd-signal);
	opacity: .75;
}

.gd-karte__titel {
	font-size: 1.1rem;
	font-weight: 640;
	color: var(--gd-stark);
	margin-top: .8rem;
	letter-spacing: -.015em;
}

.gd-karte__text {
	margin-top: .6rem;
	font-size: .96rem;
	color: var(--gd-leise);
}

/* Technische Daten */

.gd-daten {
	border-top: 1px solid var(--gd-linie);
}

.gd-daten__zeile {
	display: grid;
	grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
	gap: 1.5rem;
	padding: .95rem 0;
	border-bottom: 1px solid var(--gd-linie);
}

.gd-daten dt {
	font-size: .84rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gd-still);
	padding-top: .12rem;
}

.gd-daten dd {
	color: var(--gd-tinte);
	font-size: .99rem;
}

/* Fertigungsschritte */

.gd-schritte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.1rem;
}

.gd-schritt {
	position: relative;
	padding: 1.8rem 1.5rem;
	border: 1px solid var(--gd-linie);
	border-radius: var(--gd-radius-gross);
	background: var(--gd-papier);
}

.gd-schritt__nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(var(--gd-signal-rgb), .1);
	border: 1px solid rgba(var(--gd-signal-rgb), .28);
	color: var(--gd-signal);
	font-family: var(--gd-schrift-mono);
	font-size: .88rem;
	margin-bottom: 1.1rem;
}

.gd-schritt__titel {
	font-size: 1.06rem;
	font-weight: 640;
	color: var(--gd-stark);
	letter-spacing: -.015em;
}

.gd-schritt__text {
	margin-top: .55rem;
	font-size: .95rem;
	color: var(--gd-leise);
}

/* Grundsätze */

.gd-grundsaetze {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1px;
	background: var(--gd-linie);
	border: 1px solid var(--gd-linie);
	border-radius: var(--gd-radius-gross);
	overflow: hidden;
}

.gd-grundsaetze li {
	background: var(--gd-papier);
	padding: 1.8rem 1.6rem;
}

.gd-grundsaetze h3 {
	font-size: 1rem;
	font-weight: 640;
	color: var(--gd-stark);
	margin-bottom: .5rem;
}

.gd-grundsaetze h3::before {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--gd-signal);
	margin-bottom: 1rem;
}

.gd-grundsaetze p {
	font-size: .94rem;
	color: var(--gd-leise);
}

/* Projektstand */

.gd-stand {
	display: grid;
	gap: .8rem;
}

.gd-stand__punkt {
	display: grid;
	grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
	gap: 1.3rem;
	align-items: start;
	padding: 1.3rem 1.5rem;
	border: 1px solid var(--gd-linie);
	border-radius: var(--gd-radius);
	background: var(--gd-papier);
}

.gd-stand__marke {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .03em;
	padding-top: .15rem;
	white-space: nowrap;
}

.gd-stand__marke::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
}

.gd-stand__punkt--fertig .gd-stand__marke { color: var(--gd-gut); }
.gd-stand__punkt--laeuft .gd-stand__marke { color: var(--gd-signal); }
.gd-stand__punkt--offen  .gd-stand__marke { color: var(--gd-still); }
.gd-stand__punkt--offen  .gd-stand__marke::before { box-shadow: none; }

.gd-stand h3 {
	font-size: 1rem;
	font-weight: 640;
	color: var(--gd-stark);
}

.gd-stand p {
	font-size: .94rem;
	color: var(--gd-leise);
	margin-top: .25rem;
}

/* Partner */

.gd-partner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding: clamp(2rem, 4vw, 3.2rem);
	border: 1px solid var(--gd-linie);
	border-radius: var(--gd-radius-gross);
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(var(--gd-signal-rgb), .08), transparent 60%),
		var(--gd-flaeche);
}

.gd-haken {
	display: grid;
	gap: .9rem;
}

.gd-haken li {
	position: relative;
	padding-left: 2rem;
	color: var(--gd-leise);
	font-size: .98rem;
}

.gd-haken li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 11px;
	height: 6px;
	border-left: 1.8px solid var(--gd-signal);
	border-bottom: 1.8px solid var(--gd-signal);
	transform: rotate(-45deg);
}

/* Abschluss */

.gd-abschluss {
	padding-block: clamp(4rem, 8vw, 6.5rem);
	background: var(--gd-flaeche);
	border-top: 1px solid var(--gd-linie);
}

.gd-abschluss__box {
	text-align: center;
	max-width: 40rem;
	margin-inline: auto;
}

/* Bilder
 *
 * Die Fotos sind fast alle sehr dunkel. Ohne die feine Kante würden sie in
 * den Hintergrund auslaufen, statt als Bild zu lesen. Beschnitten wird per
 * CSS nur in der Farbreihe: die Fehlerbilder dürfen nicht angeschnitten
 * werden, das ist in tools/bilder.py und im Marketing-Handover so festgelegt.
 */

.gd-figur {
	margin: 0;
}

.gd-figur__bild {
	width: 100%;
	height: auto;
	border-radius: var(--gd-radius);
	border: 1px solid var(--gd-linie);
	background: var(--gd-flaeche);
}

.gd-figur__text {
	margin-top: .75rem;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--gd-still);
	max-width: 46ch;
}

.gd-figur--kopf .gd-figur__bild {
	border-radius: var(--gd-radius-gross);
}

.gd-figur--breit {
	margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

/* Hochformat neben Text. Höhe begrenzen statt zuschneiden, sonst überragt
   das Bild den Absatz daneben um ein Vielfaches. Zuschneiden ist bei den
   Fehlerbildern nicht erlaubt, deshalb dieser Weg. */
.gd-figur--hoch .gd-figur__bild {
	max-height: 34rem;
	width: auto;
	margin-inline: auto;
}

/* Text und Bild nebeneinander
 *
 * Die Bildspalte ist fest, nicht anteilig: alle Bilder hier sind im
 * Hochformat und laufen ohnehin gegen die Höhenbegrenzung. Eine anteilige
 * Spalte liesse nur Luft neben dem Bild stehen. */

.gd-mitbild {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.gd-mitbild--gedreht {
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
}

.gd-mitbild--gedreht > .gd-figur {
	order: -1;
}

.gd-mitbild--luft {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	align-items: center;
}

/* Die Schlussbemerkung steht hier neben einem Bild und braucht deshalb den
   Abstand nach oben nicht, den sie sonst als Nachsatz unter einem Block hat. */
.gd-notiz--flach {
	margin-top: 0;
}

/* Die drei Anläufe für das Licht
 *
 * Bewusst keine Kartenreihe wie bei der Fertigung: das hier ist eine
 * Abfolge, bei der zwei Schritte gescheitert sind. Die Linie zwischen den
 * Nummern zeigt das besser als drei gleichwertige Kacheln nebeneinander.
 */

.gd-anlauf {
	position: relative;
	padding-left: 3.6rem;
	padding-bottom: 2.2rem;
}

.gd-anlauf:last-child {
	padding-bottom: 0;
}

.gd-anlauf:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 1.2rem;
	top: 2.6rem;
	bottom: .4rem;
	width: 1px;
	background: linear-gradient(180deg, rgba(var(--gd-signal-rgb), .3), var(--gd-linie));
}

.gd-anlauf__nummer {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--gd-papier);
	border: 1px solid rgba(var(--gd-signal-rgb), .3);
	color: var(--gd-signal);
	font-family: var(--gd-schrift-mono);
	font-size: .8rem;
}

.gd-anlauf__titel {
	font-size: 1.06rem;
	font-weight: 640;
	color: var(--gd-stark);
	letter-spacing: -.015em;
	padding-top: .3rem;
}

.gd-anlauf__text {
	margin-top: .5rem;
	font-size: .96rem;
	color: var(--gd-leise);
}

/* Lesespalte für die erzählenden Abschnitte */

.gd-lesespalte {
	margin-top: 1.8rem;
	max-width: 68ch;
}

/* Der Klassenname allein reicht hier nicht: der Reset in Abschnitt 2 setzt
   .gd-body h3 auf margin 0 und ist spezifischer. Ohne .gd-body davor
   klebt die Zwischenüberschrift am Absatz darüber. */
.gd-body .gd-fliess__titel {
	font-size: 1.15rem;
	font-weight: 650;
	color: var(--gd-stark);
	letter-spacing: -.015em;
	margin-top: 2.4rem;
}

.gd-body .gd-fliess > .gd-fliess__titel:first-child {
	margin-top: 0;
}

.gd-fliess .gd-fliess__titel + p {
	margin-top: .6rem;
}

/* Farbreihe */

.gd-farben {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--gd-linie);
}

.gd-farben__kopf {
	max-width: 46rem;
	margin-bottom: 1.8rem;
}

.gd-farben__titel {
	font-size: 1.25rem;
	font-weight: 650;
	color: var(--gd-stark);
	letter-spacing: -.018em;
}

.gd-farben__text {
	margin-top: .5rem;
	font-size: .98rem;
	color: var(--gd-leise);
}

.gd-farben__reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.1rem;
}

/* Einheitliches Format, damit die Reihe nicht ausfranst. Der Anschnitt ist
   winzig: die drei Aufnahmen sind von Haus aus nahe an 3:2. */
.gd-farben__reihe .gd-figur__bild {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Auftritt beim Scrollen */

[data-gd-auftritt] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .55s ease var(--gd-verzug, 0ms),
	            transform .55s cubic-bezier(.22, .8, .3, 1) var(--gd-verzug, 0ms);
}

[data-gd-auftritt].ist-sichtbar {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------ 7. Rechtsseiten und Kontakt */

.gd-recht {
	padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
}

.gd-recht__kopf {
	padding-bottom: 2.5rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--gd-linie);
}

.gd-recht__block + .gd-recht__block {
	margin-top: 2.6rem;
}

.gd-recht__block h2 {
	font-size: 1.12rem;
	font-weight: 650;
	color: var(--gd-stark);
	letter-spacing: -.015em;
	margin-bottom: .9rem;
}

.gd-recht__block p {
	color: var(--gd-leise);
	font-size: .99rem;
}

.gd-recht__block p + p {
	margin-top: .9rem;
}

.gd-recht__block strong {
	color: var(--gd-tinte);
	font-weight: 620;
}

.gd-anschrift {
	line-height: 1.85;
}

.gd-liste {
	margin-top: .9rem;
	display: grid;
	gap: .5rem;
}

.gd-liste li {
	position: relative;
	padding-left: 1.4rem;
	color: var(--gd-leise);
	font-size: .99rem;
}

.gd-liste li::before {
	content: "";
	position: absolute;
	left: .2rem;
	top: .72em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gd-signal);
	opacity: .7;
}

/* Kontakt */

.gd-kontaktkarte {
	padding: clamp(1.8rem, 4vw, 2.6rem);
	border: 1px solid var(--gd-linie);
	border-radius: var(--gd-radius-gross);
	background:
		radial-gradient(70% 140% at 0% 0%, rgba(var(--gd-signal-rgb), .09), transparent 60%),
		var(--gd-flaeche);
	margin-bottom: 3rem;
}

.gd-kontaktkarte__label {
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gd-still);
	margin-bottom: .7rem;
}

.gd-kontaktkarte__adresse {
	font-size: clamp(1.25rem, 1rem + 1.6vw, 1.9rem);
	font-weight: 640;
	letter-spacing: -.025em;
	word-break: break-word;
}

.gd-kontaktkarte__adresse a {
	color: var(--gd-stark);
	text-decoration: none;
	border-bottom: 2px solid rgba(var(--gd-signal-rgb), .5);
	padding-bottom: 2px;
}

.gd-kontaktkarte__adresse a:hover {
	border-bottom-color: var(--gd-signal);
}

.gd-kontaktkarte__zusatz {
	margin-top: 1rem;
	color: var(--gd-leise);
	font-size: .95rem;
}

.gd-themen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.6rem 2rem;
}

.gd-themen h2 {
	font-size: 1rem;
	font-weight: 640;
	color: var(--gd-stark);
	margin-bottom: .4rem;
}

.gd-themen p {
	font-size: .95rem;
	color: var(--gd-leise);
}

/* --------------------------------------------------------------- 8. Fuß */

.gd-fuss {
	background: var(--gd-papier);
	border-top: 1px solid var(--gd-linie);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.gd-fuss__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
}

.gd-fuss__name {
	font-weight: 680;
	color: var(--gd-stark);
	margin-top: .9rem;
	letter-spacing: -.02em;
}

.gd-fuss__claim {
	color: var(--gd-still);
	font-size: .9rem;
	margin-top: .2rem;
	max-width: 22ch;
}

.gd-fuss__titel {
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gd-still);
	margin-bottom: 1rem;
	font-weight: 600;
}

.gd-fuss__spalte ul {
	display: grid;
	gap: .55rem;
}

.gd-fuss__spalte a {
	color: var(--gd-leise);
	text-decoration: none;
	font-size: .93rem;
}

.gd-fuss__spalte a:hover {
	color: var(--gd-stark);
}

.gd-fuss__zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .8rem;
	margin-top: 3rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--gd-linie);
	color: var(--gd-still);
	font-size: .85rem;
}

/* ------------------------------------ 9. Bewegung und kleine Bildschirme */

@media (prefers-reduced-motion: reduce) {
	.gd-body *,
	.gd-body *::before,
	.gd-body *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	[data-gd-auftritt] {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 1000px) {
	.gd-hero__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Das Kopfbild ist im Querformat, deshalb deutlich breiter als die alte
	   Zonengrafik es war. */
	.gd-hero__bild {
		order: -1;
		max-width: 620px;
		margin-inline: auto;
	}

	.gd-mitbild,
	.gd-mitbild--gedreht {
		grid-template-columns: minmax(0, 1fr);
	}

	.gd-mitbild--gedreht > .gd-figur {
		order: 0;
	}

	.gd-figur--hoch .gd-figur__bild {
		max-height: 26rem;
	}

	.gd-zweispalt {
		grid-template-columns: minmax(0, 1fr);
	}

	.gd-zweispalt__kopf {
		position: static;
	}

	.gd-partner {
		grid-template-columns: minmax(0, 1fr);
	}

	.gd-fuss__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}

	.gd-fuss__marke {
		grid-column: 1 / -1;
	}
}

@media (max-width: 820px) {
	.gd-burger {
		display: block;
	}

	.gd-nav {
		position: fixed;
		inset: 68px 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(var(--gd-papier-rgb), .98);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--gd-linie);
		padding: .5rem var(--gd-luft) 1.5rem;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}

	.admin-bar .gd-nav { top: 114px; }

	.gd-nav.ist-offen {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.gd-nav__liste {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.gd-nav__liste a {
		display: block;
		padding: .85rem 0;
		border-bottom: 1px solid var(--gd-linie);
		font-size: 1rem;
	}

	.gd-nav .gd-knopf {
		margin-top: 1.2rem;
		align-self: flex-start;
	}

	.gd-kennzahlen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gd-stand__punkt {
		grid-template-columns: minmax(0, 1fr);
		gap: .7rem;
	}
}

@media (max-width: 520px) {
	.gd-body {
		font-size: 16px;
	}

	.gd-daten__zeile {
		grid-template-columns: minmax(0, 1fr);
		gap: .25rem;
	}

	.gd-knopfreihe .gd-knopf {
		width: 100%;
	}

	.gd-fuss__raster {
		grid-template-columns: minmax(0, 1fr);
	}
}