/*
Theme Name: Werkbogen
Theme URI: https://werkbogen.org/
Author: Werkbogen GmbH
Author URI: https://werkbogen.org/
Description: Serienlieferant fuer Moebelbeschlaege in Herford. Helles Papierthema mit Masslinie, Toleranzkette, Kraft-Weg-Kurve, Chargenschluessel und Anzugsfenster. Sprache Deutsch, Ansprache Sie, Zielgruppe Kuechenfertigung und Montage.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: werkbogen
Tags: business, industry, light, german, b2b
*/

/* =========================================================================
   1. Schriften. Alle Dateien liegen im Thema, damit der Browser des
   Besuchers keinen fremden Server anspricht.
   ========================================================================= */

@font-face {
	font-family: 'Plex Mono Werk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plex Mono Werk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Plex Sans Werk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plex Sans Werk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Plex Sans Werk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plex Sans Werk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   2. Farben. Die Zahlen hinter jeder Zeile sind gemessen, nicht geschaetzt:
   Kontrast auf --papier / auf --tafel.
   --haarriss bleibt bewusst unter 3:1 und darf nie in einer color-Angabe
   stehen; dafuer ist --reisskante da, und der auch nur fuer grosse Koepfe.
   ========================================================================= */

:root {
	--papier: #f4f4f1;
	--tafel: #e9e9e3;
	--haarriss: #d5d5cc;   /* 1.34 / 1.21  nur Rahmen und Fuellung */
	--reisskante: #7c7c70; /* 3.83 / 3.46  nur grosse Koepfe */
	--tusche: #1c1f22;     /* 15.02 / 13.58 */
	--bleistift: #54585c;  /* 6.51 / 5.89 */
	--tuscheblau: #1f4e79; /* 7.86 / 7.11 */
	--messing: #7a5f16;    /* 5.48 / 4.96 */
	--imfeld: #2f6b46;     /* 5.75 / 5.20 */
	--ausfeld: #a8261f;    /* 6.43 / 5.82 */

	--mono: 'Plex Mono Werk', 'Courier New', monospace;
	--sans: 'Plex Sans Werk', 'Segoe UI', system-ui, sans-serif;

	--rand: 1180px;
	--kopfhoehe: 4.5rem;
}

/* =========================================================================
   3. Grundgeruest
   ========================================================================= */

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

/* Ein Klassenname mit display schlaegt sonst die Browserregel fuer hidden. */
[hidden] {
	display: none !important;
}

html {
	scroll-padding-top: calc(var(--kopfhoehe) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--papier);
	color: var(--tusche);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.65;
}

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

a {
	color: var(--tuscheblau);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--tusche);
}

:focus-visible {
	outline: 3px solid var(--tuscheblau);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--mono);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
}

h1 {
	font-size: clamp(1.75rem, 4.2vw, 2.65rem);
}

h2 {
	font-size: clamp(1.4rem, 2.8vw, 1.9rem);
}

h3 {
	font-size: 1.15rem;
}

h4 {
	font-size: 1rem;
}

p {
	margin: 0 0 1.1em;
}

/* Zahlen stehen im Textschnitt; monospace bleibt den Tabellen vorbehalten,
   weil dort die Spalten nach Stellenwert stehen sollen. */
.zahl {
	font-family: var(--sans);
	font-variant-numeric: tabular-nums;
}

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

.sprungmarke {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 60; /* benannt: Sprungmarke muss ueber der klebenden Kopfzeile liegen */
	background-color: var(--tuscheblau);
	color: var(--papier);
	padding: 0.75rem 1.25rem;
	font-weight: 600;
}

.sprungmarke:focus {
	left: 0.5rem;
	top: 0.5rem;
	color: var(--papier);
}

.fertigung {
	width: 100%;
	max-width: var(--rand);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.spannfeld {
	padding: 3.5rem 0;
}

.spannfeld--tafel {
	background-color: var(--tafel);
	border-top: 1px solid var(--haarriss);
	border-bottom: 1px solid var(--haarriss);
}

.spannfeld--knapp {
	padding: 2rem 0;
}

.spannfeld__kopf {
	max-width: 44rem;
	margin-bottom: 2rem;
}

.spannfeld__vorzeile {
	display: block;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tuscheblau);
	margin-bottom: 0.6rem;
}

.spannfeld__lauf {
	max-width: 44rem;
	color: var(--bleistift);
}

.spannfeld__lauf--breit {
	max-width: 58rem;
}

/* Erscheinen beim Scrollen nur, wenn JavaScript laeuft. Ohne JS bleibt der
   Inhalt sichtbar, weil die Regel an html.js haengt. */
.js .einspannen {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .einspannen--fest {
	opacity: 1;
	transform: none;
}

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

/* =========================================================================
   4. Kurbel: die Schaltflaeche des Hauses
   ========================================================================= */

.kurbel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.7rem 1.35rem;
	border: 1px solid var(--tuscheblau);
	border-radius: 2px;
	background-color: var(--tuscheblau);
	color: var(--papier);
	font-family: var(--mono);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kurbel:hover,
.kurbel:focus {
	background-color: var(--tusche);
	border-color: var(--tusche);
	color: var(--papier);
}

.kurbel--still {
	background-color: transparent;
	color: var(--tuscheblau);
}

.kurbel--still:hover,
.kurbel--still:focus {
	background-color: var(--tuscheblau);
	color: var(--papier);
	border-color: var(--tuscheblau);
}

.kurbel--knapp {
	min-height: 2.5rem;
	padding: 0.5rem 0.9rem;
	font-size: 0.85rem;
}

/* Ausgeschaltete Knoepfe werden eigens gemessen: --reisskante als Fuellung
   ergaebe nur 3.99:1, deshalb steht hier --bleistift mit 6.51:1. */
.kurbel[disabled] {
	border-color: var(--bleistift);
	background-color: var(--bleistift);
	color: var(--papier);
	cursor: default;
}

.kurbelreihe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* Ein Absatz, in dem nichts als ein Verweis steht, ist eine Handlung und
   braucht auf dem Telefon eine Fläche für den Finger. Eine Zeile Text ist
   zwanzig Punkte hoch, und das ist zu wenig zum Tippen. */
p > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* =========================================================================
   5. Masslinie: der Trenner. Feine Linie mit Teilstrichen alle 32 px,
   Pfeilen an beiden Enden und einer Luecke in der Mitte.
   ========================================================================= */

.masslinie {
	display: block;
	width: 100%;
	height: 26px;
	margin: 2.5rem 0;
	color: var(--reisskante);
}

.masslinie svg {
	display: block;
	width: 100%;
	height: 26px;
}

/* =========================================================================
   6. Oberkante: Kopfzeile
   ========================================================================= */

.oberkante {
	position: sticky;
	top: 0;
	z-index: 30; /* benannt: klebende Kopfzeile liegt ueber dem Inhalt */
	background-color: var(--papier);
	border-bottom: 1px solid var(--haarriss);
}

.oberkante__zeile {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--kopfhoehe);
}

.oberkante__name {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.5rem;
	font-family: var(--mono);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--tusche);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.oberkante__name:hover,
.oberkante__name:focus {
	color: var(--tuscheblau);
}

.oberkante__strich {
	display: block;
	width: 34px;
	height: 12px;
	color: var(--tuscheblau);
	flex: 0 0 auto;
}

.oberkante__anfrage {
	margin-left: auto;
}

.laufschiene {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.raste {
	display: flex;
}

.raste__glied {
	display: flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.35rem 0.6rem;
	color: var(--tusche);
	font-size: 0.92rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.raste__glied:hover,
.raste__glied:focus,
.raste__glied[aria-current='page'] {
	color: var(--tuscheblau);
	border-bottom-color: var(--tuscheblau);
}

.oberkante__griff {
	display: none;
	min-height: 2.75rem;
	min-width: 2.75rem;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: transparent;
	border: 1px solid var(--reisskante);
	border-radius: 2px;
	color: var(--tusche);
	font-family: var(--mono);
	font-size: 0.85rem;
	cursor: pointer;
}

.oberkante__griffstrich {
	display: block;
	width: 18px;
	height: 2px;
	background-color: var(--tusche);
	box-shadow: 0 5px 0 var(--tusche), 0 -5px 0 var(--tusche);
}

@media (max-width: 940px) {
	.oberkante__griff {
		display: inline-flex;
		margin-left: auto;
	}

	.oberkante__anfrage {
		display: none;
	}

	.laufschiene {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem 0 1rem;
		border-top: 1px solid var(--haarriss);
	}

	.laufschiene--offen {
		display: flex;
	}

	.oberkante__zeile {
		flex-wrap: wrap;
	}

	.laufschiene {
		flex-basis: 100%;
	}

	.raste__glied {
		min-height: 2.9rem;
		border-bottom: 1px solid var(--haarriss);
		border-left: 2px solid transparent;
	}

	.raste__glied:hover,
	.raste__glied:focus,
	.raste__glied[aria-current='page'] {
		border-left-color: var(--tuscheblau);
	}
}

/* =========================================================================
   7. Aufspannung: geteilter Kopf der Startseite. Der Text steht auf Papier
   und nicht auf dem Foto, damit der Kontrast nicht von der Belichtung
   abhaengt.
   ========================================================================= */

.aufspannung {
	padding: 2.75rem 0 3rem;
}

.aufspannung__gitter {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
}

.aufspannung__marke {
	display: block;
	font-family: var(--mono);
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tuscheblau);
	margin-bottom: 0.9rem;
}

.aufspannung__lauf {
	font-size: 1.08rem;
	color: var(--bleistift);
	max-width: 34rem;
}

.aufspannung__marken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--mono);
	font-size: 0.85rem;
	color: var(--tusche);
}

.aufspannung__marken li {
	border-left: 3px solid var(--messing);
	padding-left: 0.6rem;
}

.aufspannung__bild {
	border: 1px solid var(--reisskante);
	padding: 8px;
	background-color: var(--tafel);
}

@media (max-width: 880px) {
	.aufspannung__gitter {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* =========================================================================
   8. Stueckzahl: vier Zahlen der Fertigung
   ========================================================================= */

.stueckzahl {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.stueckzahl__feld {
	background-color: var(--papier);
	border: 1px solid var(--haarriss);
	border-top: 3px solid var(--tuscheblau);
	padding: 1.25rem;
}

.ziffer {
	display: block;
	font-family: var(--sans);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.9rem, 3.4vw, 2.5rem);
	line-height: 1.05;
	color: var(--tuscheblau); /* gemessen 7.86:1 auf Papier, 7.11:1 auf Tafel */
}

.ziffer__einheit {
	font-size: 0.5em;
	margin-left: 0.25em;
	color: var(--tusche);
}

.stueckzahl__wort {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.92rem;
	color: var(--tusche);
}

.stueckzahl__quelle {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.78rem;
	color: var(--bleistift);
}

@media (max-width: 880px) {
	.stueckzahl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.stueckzahl {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   9. Karten: Baureihen, Reihen, Staffeln
   ========================================================================= */

.beschlagkarte {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.beschlagkarte__feld {
	display: flex;
	flex-direction: column;
	background-color: var(--papier);
	border: 1px solid var(--haarriss);
}

.beschlagkarte__bild {
	border-bottom: 1px solid var(--haarriss);
}

.beschlagkarte__inhalt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.35rem;
}

.beschlagkarte__nummer {
	display: block;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	color: var(--messing);
	margin-bottom: 0.45rem;
}

.beschlagkarte__daten {
	margin: 0.5rem 0 1rem;
	font-size: 0.9rem;
}

.beschlagkarte__daten div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--haarriss);
}

.beschlagkarte__daten dt {
	color: var(--bleistift);
	margin: 0;
}

.beschlagkarte__daten dd {
	margin: 0;
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.beschlagkarte__pfeil {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	margin-top: auto;
	font-family: var(--mono);
	font-size: 0.9rem;
}

.reihenkarte {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.reihenkarte__feld {
	background-color: var(--papier);
	border: 1px solid var(--haarriss);
	border-left: 3px solid var(--messing);
	padding: 1.35rem;
}

.reihenkarte__marke {
	display: block;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	color: var(--tuscheblau);
	margin-bottom: 0.4rem;
}

@media (max-width: 820px) {
	.beschlagkarte,
	.reihenkarte {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   10. Zeichnungsrand und Tabellen. Auf dem Telefon wird die Tabelle zum
   Stapel: thead verschwindet mitsamt seinen Zellen, sonst liegen die
   unsichtbaren th ueber der ersten Zeile.
   ========================================================================= */

.zeichnungsrand {
	overflow-x: auto;
	border: 1px solid var(--reisskante);
	background-color: var(--papier);
	padding: 0.75rem;
	-webkit-overflow-scrolling: touch;
}

.normtabelle,
.staffeltabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.normtabelle caption,
.staffeltabelle caption {
	caption-side: top;
	text-align: left;
	font-family: var(--mono);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tuscheblau);
	padding-bottom: 0.6rem;
}

.normtabelle th,
.staffeltabelle th {
	text-align: left;
	font-family: var(--mono);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--tusche);
	border-bottom: 2px solid var(--reisskante);
	padding: 0.6rem 0.75rem;
	white-space: nowrap;
}

.normtabelle td,
.staffeltabelle td {
	border-bottom: 1px solid var(--haarriss);
	padding: 0.6rem 0.75rem;
	vertical-align: top;
}

.normtabelle .zahlfeld,
.staffeltabelle .zahlfeld {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tabellennotiz {
	margin: 0.75rem 0 0;
	font-size: 0.82rem;
	color: var(--bleistift);
}

@media (max-width: 660px) {
	.zeichnungsrand {
		padding: 0.5rem;
	}

	.normtabelle,
	.staffeltabelle,
	.normtabelle tbody,
	.staffeltabelle tbody,
	.normtabelle tr,
	.staffeltabelle tr,
	.normtabelle td,
	.staffeltabelle td {
		display: block;
		width: 100%;
	}

	.normtabelle caption,
	.staffeltabelle caption {
		display: block;
	}

	/* Kopfzeile mitsamt Zellen weg, nicht nur zusammengeschoben. */
	.normtabelle thead,
	.staffeltabelle thead,
	.normtabelle thead tr,
	.staffeltabelle thead tr,
	.normtabelle thead th,
	.staffeltabelle thead th {
		display: none;
	}

	.normtabelle tr,
	.staffeltabelle tr {
		border: 1px solid var(--haarriss);
		margin-bottom: 0.75rem;
		padding: 0.35rem 0.5rem;
	}

	.normtabelle td,
	.staffeltabelle td {
		border-bottom: 1px dotted var(--haarriss);
		padding: 0.45rem 0;
		white-space: normal;
	}

	.normtabelle td:last-child,
	.staffeltabelle td:last-child {
		border-bottom: 0;
	}

	.normtabelle td::before,
	.staffeltabelle td::before {
		content: attr(data-kopf);
		display: block;
		font-family: var(--mono);
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--bleistift);
		margin-bottom: 0.15rem;
	}

	.normtabelle .zahlfeld,
	.staffeltabelle .zahlfeld {
		white-space: normal;
	}
}

/* =========================================================================
   11. Duo, Kopfleiste, Belegschaft
   ========================================================================= */

.duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
}

.duo--gedreht .duo__bild {
	order: -1;
}

.duo__bild {
	border: 1px solid var(--reisskante);
	padding: 8px;
	background-color: var(--papier);
}

@media (max-width: 820px) {
	.duo {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.duo--gedreht .duo__bild {
		order: 0;
	}
}

.kopfleiste {
	background-color: var(--tafel);
	background-image: url('images/vellum.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--reisskante);
	padding: 3rem 0 2.5rem;
}

.kopfleiste__weg {
	display: block;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tuscheblau);
	margin-bottom: 0.7rem;
}

.kopfleiste__lauf {
	max-width: 46rem;
	margin: 0;
	color: var(--tusche);
}

.belegschaft {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.belegschaft__feld {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.werkfoto {
	border: 1px solid var(--reisskante);
	padding: 5px;
	background-color: var(--papier);
}

.belegschaft__rolle {
	display: block;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--messing);
	margin-bottom: 0.3rem;
}

.belegschaft__name {
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

@media (max-width: 820px) {
	.belegschaft {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.belegschaft__feld {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 1rem;
	}
}

/* =========================================================================
   12. Pruefkarte: Referenzen als Berichtskarte mit gezacktem Oberrand
   ========================================================================= */

.pruefkartenfeld {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: start;
}

.pruefkartenfeld > li:nth-child(even) {
	margin-top: 3rem;
}

.pruefkarte {
	background-color: var(--papier);
	border: 1px solid var(--haarriss);
	border-top: 0;
}

.pruefkarte__zacke {
	display: block;
	width: 100%;
	height: 12px;
	color: var(--haarriss);
}

.pruefkarte__zacke svg {
	display: block;
	width: 100%;
	height: 12px;
}

.pruefkarte__inhalt {
	padding: 1.25rem 1.35rem 1.35rem;
}

.pruefkarte__wort {
	margin: 0 0 1rem;
	font-size: 1rem;
}

.pruefkarte__proben {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.86rem;
	font-family: var(--mono);
}

.pruefkarte__probe {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--haarriss);
}

.pruefkarte__haken {
	display: block;
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	border: 1px solid var(--reisskante);
}

.pruefkarte__haken--voll {
	background-color: var(--imfeld);
	border-color: var(--imfeld);
}

.pruefkarte__fuss {
	display: block;
	text-align: right;
	font-family: var(--mono);
	font-size: 0.76rem;
	color: var(--bleistift);
}

.pruefkarte__wer {
	display: block;
	font-size: 0.86rem;
	color: var(--tusche);
	margin-bottom: 0.9rem;
}

@media (max-width: 820px) {
	.pruefkartenfeld {
		grid-template-columns: 1fr;
	}

	.pruefkartenfeld > li:nth-child(even) {
		margin-top: 0;
	}
}

/* =========================================================================
   13. Normblatt: Journal ohne Bilder, mit Dokumentnummer und Revision
   ========================================================================= */

.normblattfeld {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.normblatt {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--papier);
	border: 1px solid var(--reisskante);
}

.blattkopf {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	background-color: var(--tafel);
	border-bottom: 1px solid var(--reisskante);
	padding: 0.55rem 1rem;
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--tusche);
}

.blattkopf__nummer {
	color: var(--tuscheblau);
	font-weight: 600;
}

.normblatt__inhalt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.25rem;
}

.normblatt__titel {
	font-size: 1.1rem;
	margin-bottom: 0.6rem;
}

.normblatt__titel a {
	color: var(--tusche);
	text-decoration: none;
}

.normblatt__titel a:hover,
.normblatt__titel a:focus {
	color: var(--tuscheblau);
	text-decoration: underline;
}

.normblatt__kurz {
	font-size: 0.94rem;
	color: var(--bleistift);
}

.normblatt__lesen {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	margin-top: auto;
	font-family: var(--mono);
	font-size: 0.88rem;
}

@media (max-width: 820px) {
	.normblattfeld {
		grid-template-columns: 1fr;
	}
}

.techniknote {
	max-width: 46rem;
}

.kurzfassung {
	background-color: var(--tafel);
	border-left: 3px solid var(--tuscheblau);
	padding: 1.1rem 1.25rem;
	margin-bottom: 2rem;
}

.kurzfassung__marke {
	display: block;
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tuscheblau);
	margin-bottom: 0.4rem;
}

.kurzfassung p {
	margin: 0;
}

.techniknote h2 {
	font-size: 1.3rem;
	margin-top: 2rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--haarriss);
}

.techniknote h3 {
	font-size: 1.05rem;
	margin-top: 1.5rem;
}

.techniknote__marke {
	font-family: var(--mono);
	color: var(--tuscheblau);
	margin-right: 0.5rem;
}

/* =========================================================================
   14. Rueckfragen, Staffelzeile, Anstoss
   ========================================================================= */

.rueckfragen {
	max-width: 48rem;
	margin: 0;
}

.rueckfrage {
	border-top: 1px solid var(--haarriss);
	padding: 1.1rem 0;
}

.rueckfrage__frage {
	font-family: var(--mono);
	font-weight: 600;
	font-size: 1.02rem;
	margin: 0 0 0.5rem;
	color: var(--tusche);
}

.rueckfrage__antwort {
	margin: 0;
	color: var(--bleistift);
}

.staffelzeile {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 52rem;
}

.staffelzeile__feld {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr) 9rem;
	gap: 1rem;
	align-items: baseline;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--haarriss);
}

.staffelzeile__marke {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	color: var(--tuscheblau);
	font-weight: 600;
}

.staffelzeile__wert {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--tusche);
}

@media (max-width: 620px) {
	.staffelzeile__feld {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.staffelzeile__wert {
		text-align: left;
	}
}

.anstoss {
	background-color: var(--tafel);
	border-top: 1px solid var(--reisskante);
	padding: 3rem 0;
}

.anstoss__gitter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: 2.5rem;
	align-items: center;
}

.anstoss__bild {
	border: 1px solid var(--reisskante);
	padding: 8px;
	background-color: var(--papier);
}

@media (max-width: 820px) {
	.anstoss__gitter {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   15. Anfrageblatt: Formulare
   ========================================================================= */

.anfrageblatt {
	background-color: var(--papier);
	border: 1px solid var(--reisskante);
	padding: 1.5rem;
}

.eingabezeile {
	display: block;
	margin-bottom: 1.1rem;
}

.eingabezeile__wort {
	display: block;
	font-family: var(--mono);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	margin-bottom: 0.35rem;
	color: var(--tusche);
}

.eingabezeile__notiz {
	display: block;
	font-size: 0.8rem;
	color: var(--bleistift);
	margin-top: 0.3rem;
}

.eingabezeile input,
.eingabezeile select,
.eingabezeile textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--reisskante);
	border-radius: 2px;
	background-color: var(--papier);
	color: var(--tusche);
	font-family: var(--sans);
	font-size: 1rem;
}

.eingabezeile textarea {
	min-height: 8rem;
	resize: vertical;
}

.gratkante {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.eingangsnotiz {
	border: 1px solid var(--imfeld);
	border-left: 4px solid var(--imfeld);
	background-color: var(--papier);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.eingangsnotiz--fehler {
	border-color: var(--ausfeld);
	border-left-color: var(--ausfeld);
}

.eingangsnotiz p {
	margin: 0;
}

.formgitter {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 2.5rem;
	align-items: start;
}

.formgitter--gedreht .formgitter__hilfe {
	order: -1;
}

@media (max-width: 880px) {
	.formgitter {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.formgitter--gedreht .formgitter__hilfe {
		order: 0;
	}
}

.datenliste {
	margin: 0;
	font-size: 0.95rem;
}

.datenliste dt {
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bleistift);
	margin-top: 0.9rem;
}

.datenliste dd {
	margin: 0.2rem 0 0;
}

.datenliste a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
}

/* =========================================================================
   16. Vier Werkzeuge
   ========================================================================= */

.werkzeug {
	background-color: var(--papier);
	border: 1px solid var(--reisskante);
	padding: 1.5rem;
}

.werkzeug__gitter {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 2rem;
	align-items: start;
}

.werkzeug__marke {
	display: block;
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--messing);
	margin-bottom: 0.5rem;
}

.werkzeug__hinweis {
	font-size: 0.82rem;
	color: var(--bleistift);
	margin: 1rem 0 0;
}

.werkzeug__quelle {
	display: block;
	font-family: var(--mono);
	font-size: 0.76rem;
	color: var(--bleistift);
	margin-top: 0.4rem;
}

.wahlfeld {
	margin-bottom: 1.1rem;
}

.wahlfeld__wort {
	display: block;
	font-family: var(--mono);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--tusche);
	margin-bottom: 0.4rem;
}

.wahlreihe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wahlstueck {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--reisskante);
	border-radius: 2px;
	background-color: var(--papier);
	color: var(--tusche);
	font-family: var(--mono);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.wahlstueck[aria-pressed='true'] {
	background-color: var(--tuscheblau);
	border-color: var(--tuscheblau);
	color: var(--papier);
}

.urteilsfeld {
	border-top: 1px solid var(--haarriss);
	margin-top: 1.25rem;
	padding-top: 1rem;
}

.urteilsfeld__satz {
	font-family: var(--mono);
	font-size: 0.95rem;
	margin: 0 0 0.6rem;
}

.urteilsfeld__satz--gut {
	color: var(--imfeld);
}

.urteilsfeld__satz--schlecht {
	color: var(--ausfeld);
}

.urteilsfeld__lauf {
	margin: 0;
	font-size: 0.92rem;
	color: var(--tusche);
}

.messliste {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	font-size: 0.88rem;
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
}

.messliste li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--haarriss);
}

@media (max-width: 880px) {
	.werkzeug__gitter {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* 16.1 Toleranzkette: zwei Balken auf einer Skala */

.toleranzkette__spanne {
	margin: 1.25rem 0 0;
}

.toleranzkette__balkenzeile {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr) 4.5rem;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 0.6rem;
}

.toleranzkette__wort {
	font-family: var(--mono);
	font-size: 0.82rem;
	color: var(--tusche);
}

.toleranzkette__rinne {
	display: block;
	position: relative;
	height: 18px;
	background-color: var(--tafel);
	border: 1px solid var(--haarriss);
}

.toleranzkette__balken {
	display: block;
	height: 100%;
	background-color: var(--tuscheblau);
}

.toleranzkette__balken--stat {
	background-color: var(--messing);
}

.toleranzkette__grenze {
	display: block;
	position: absolute;
	top: -3px;
	bottom: -3px;
	width: 2px;
	background-color: var(--ausfeld);
}

.toleranzkette__zahl {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.85rem;
	text-align: right;
}

.toleranzkette__summe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--mono);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
	.toleranzkette__balkenzeile {
		grid-template-columns: 6.5rem minmax(0, 1fr) 4rem;
		gap: 0.5rem;
	}
}

/* 16.2 Kraft-Weg-Kurve */

.kraftweg__kurve {
	display: block;
	width: 100%;
	height: auto;
	background-color: var(--papier);
	border: 1px solid var(--haarriss);
}

/* Die Zeichnung: Fuellungen und Striche gehoeren in die Stylesheet, damit die
   Fassung aus PHP und die aus JavaScript gleich aussehen. */
.kraftweg__band {
	fill: var(--tafel);
}

.kraftweg__gitter {
	stroke: var(--haarriss);
}

.kraftweg__achsenlinie {
	stroke: var(--reisskante);
}

.kraftweg__achse {
	fill: var(--bleistift);
	font-family: var(--mono);
	font-size: 10px;
}

.kraftweg__linie {
	fill: none;
	stroke: var(--tuscheblau);
	stroke-width: 2;
}

.kraftweg__spitze {
	fill: var(--ausfeld);
}

.kraftweg__uebergabe {
	fill: var(--messing);
}

.bandbild {
	border: 1px solid var(--reisskante);
	padding: 8px;
	background-color: var(--papier);
	margin-bottom: 2rem;
}

.kraftweg__legende {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--mono);
	font-size: 0.8rem;
}

.kraftweg__legende li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.kraftweg__punkt {
	display: block;
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	border: 1px solid var(--tusche);
}

.kraftweg__punkt--spitze {
	background-color: var(--ausfeld);
	border-color: var(--ausfeld);
}

.kraftweg__punkt--uebergabe {
	background-color: var(--messing);
	border-color: var(--messing);
}

.kraftweg__punkt--band {
	background-color: var(--tafel);
	border-color: var(--reisskante);
}

/* 16.3 Chargenschluessel */

.chargenschluessel__eingabe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-end;
	margin-bottom: 1.25rem;
}

.chargenschluessel__eingabe .eingabezeile {
	flex: 1 1 16rem;
	margin-bottom: 0;
}

.chargenschluessel__eingabe input {
	font-family: var(--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.chargenschluessel__gruppe {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	font-size: 0.86rem;
}

.chargenschluessel__gruppe li {
	border: 1px solid var(--haarriss);
	border-left: 3px solid var(--tuscheblau);
	padding: 0.5rem 0.7rem;
}

.chargenschluessel__teil {
	display: block;
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--tuscheblau);
}

.chargenschluessel__pruefsumme {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.86rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--imfeld);
	color: var(--imfeld);
	margin-bottom: 1rem;
}

.chargenschluessel__pruefsumme--kaputt {
	border-color: var(--ausfeld);
	color: var(--ausfeld);
}

.chargenschluessel__bericht {
	border-top: 1px solid var(--haarriss);
	padding-top: 1rem;
}

@media (max-width: 620px) {
	.chargenschluessel__gruppe {
		grid-template-columns: 1fr;
	}
}

/* 16.4 Anzugsfenster */

.anzugsfenster__band {
	display: block;
	position: relative;
	height: 46px;
	margin: 1.25rem 0 0.5rem;
	background-color: var(--tafel);
	border: 1px solid var(--reisskante);
}

.anzugsfenster__flanke {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: var(--ausfeld);
	opacity: 1;
}

.anzugsfenster__flanke--links {
	left: 0;
	border-right: 1px solid var(--tusche);
}

.anzugsfenster__ausriss {
	right: 0;
	border-left: 1px solid var(--tusche);
}

.anzugsfenster__mitte {
	display: block;
	position: absolute;
	top: -5px;
	bottom: -5px;
	width: 3px;
	background-color: var(--tuscheblau);
}

.anzugsfenster__skala {
	display: flex;
	justify-content: space-between;
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.78rem;
	color: var(--bleistift);
}

.anzugsfenster__flankenwort {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--mono);
	font-size: 0.78rem;
	color: var(--ausfeld);
	margin-bottom: 0.35rem;
}

/* =========================================================================
   17. Speicherleiste: die Einwilligungsleiste unten
   ========================================================================= */

.speicherleiste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40; /* benannt: die Leiste muss ueber allem liegen, sonst ist sie nicht bedienbar */
	background-color: var(--tafel);
	border-top: 2px solid var(--tuscheblau);
	padding: 1rem 0;
	box-shadow: 0 -4px 14px rgba(28, 31, 34, 0.12);
}

.speicherleiste__gitter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.25rem;
	align-items: center;
}

.speicherleiste__lauf {
	margin: 0;
	font-size: 0.88rem;
	color: var(--tusche);
}

.speicherleiste__knopfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Beide Knoepfe gleich gross, gleiche Farbe, gleicher Kontrast, gleiche
   Schrift. Das ist die Anforderung aus der Orientierungshilfe der DSK. */
.speicherleiste__knopfe .kurbel {
	min-width: 15rem;
	flex: 1 1 15rem;
	background-color: var(--tuscheblau);
	border-color: var(--tuscheblau);
	color: var(--papier);
	font-size: 0.9rem;
	font-family: var(--mono);
	font-weight: 600;
	min-height: 2.75rem;
}

.speicherleiste__mehr {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	font-size: 0.85rem;
}

@media (max-width: 880px) {
	.speicherleiste__gitter {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.speicherleiste__knopfe .kurbel {
		min-width: 0;
		flex: 1 1 100%;
	}
}

/* =========================================================================
   18. Fusspunkt
   ========================================================================= */

.fusspunkt {
	background-color: var(--papier);
	border-top: 1px solid var(--reisskante);
	padding: 3rem 0 2rem;
	margin-top: 0;
}

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

.fusspunkt__name {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	font-family: var(--mono);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--tusche);
	text-decoration: none;
}

.fusspunkt__kopf {
	font-family: var(--mono);
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bleistift);
	margin: 0 0 0.75rem;
}

.fusspunkt__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.92rem;
}

.fusspunkt__liste li {
	margin-bottom: 0.1rem;
}

.fusspunkt__liste a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
}

.fusspunkt__lauf {
	font-size: 0.9rem;
	color: var(--bleistift);
	max-width: 26rem;
}

.fusspunkt__zeile {
	border-top: 1px solid var(--haarriss);
	margin-top: 2rem;
	padding-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-size: 0.82rem;
	color: var(--bleistift);
}

@media (max-width: 880px) {
	.fusspunkt__gitter {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* =========================================================================
   19. Fehlmass: 404. Die Zahl braucht ein eigenes Gewicht, sonst schlaegt
   die Regel des Abschnitts fuer Absaetze sie klein.
   ========================================================================= */

.fehlmass {
	padding: 4rem 0;
	max-width: 40rem;
}

.fehlmass__zahl {
	display: block;
	font-family: var(--sans);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: clamp(3.5rem, 12vw, 6rem);
	line-height: 1;
	color: var(--tuscheblau); /* 7.86:1, kein Rahmenton */
	margin: 0 0 1rem;
}

.fehlmass p:not(.fehlmass__zahl) {
	color: var(--bleistift);
}

/* =========================================================================
   20. Kleinteile
   ========================================================================= */

.hinweiskasten {
	background-color: var(--tafel);
	border-left: 3px solid var(--messing);
	padding: 1.1rem 1.25rem;
	margin: 1.5rem 0;
}

.hinweiskasten__kopf {
	display: block;
	font-family: var(--mono);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--messing);
	margin-bottom: 0.4rem;
}

.hinweiskasten p:last-child {
	margin-bottom: 0;
}

.rechtstext {
	max-width: 46rem;
}

.rechtstext h2 {
	font-size: 1.25rem;
	margin-top: 2.25rem;
}

.rechtstext h3 {
	font-size: 1.02rem;
	margin-top: 1.5rem;
}

.rechtstext ul,
.rechtstext ol {
	padding-left: 1.35rem;
	color: var(--tusche);
}

.rechtstext li {
	margin-bottom: 0.5rem;
}

.rechtstext__stand {
	font-family: var(--mono);
	font-size: 0.82rem;
	color: var(--bleistift);
}

.schluesselliste {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	font-family: var(--mono);
	font-size: 0.86rem;
}

.schluesselliste li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--haarriss);
}

.textmitte {
	max-width: 46rem;
}