/*
Theme Name: Feldkontor
Theme URI: https://feldkontor.org/
Author: Feldkontor Polsterwerkstatt GmbH
Author URI: https://feldkontor.org/
Description: Thema fuer die Polsterwerkstatt Feldkontor in Leipzig-Plagwitz. Aufpolsterung, Neubezug und Rahmenarbeiten, mit vier Werkzeugen ueber den Aufbau eines Polstersitzes. Leinen-greige, Frank Ruhl Libre und Instrument Sans, Schriften lokal.
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: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: feldkontor
*/

/* =========================================================================
   1. Schriften, lokal im Thema
   -------------------------------------------------------------------------
   Nichts von einer fremden CDN: sonst geht die IP-Adresse jedes Besuchers an
   einen Server, den wir nicht betreiben, und das muesste in der Cookie-
   Richtlinie stehen. Der Teil -latin-ext deckt absichtlich fast nichts ab;
   das ist normal und kein Fehler.
   ========================================================================= */

@font-face {
	font-family: 'Frank Ruhl Libre';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/frank-ruhl-libre-700-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: 'Frank Ruhl Libre';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/frank-ruhl-libre-700-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: 'Instrument Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/instrument-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: 'Instrument Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/instrument-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: 'Instrument Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/instrument-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: 'Instrument Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/instrument-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. Palette
   -------------------------------------------------------------------------
   Alle Werte sind mit _gereedschap/contrast.py in beide Richtungen und auf
   der Tafel gerechnet, nicht behauptet:

     --russholz auf --leinen  13.12   auf --kalkputz 11.51
     --graphit  auf --leinen   6.24   auf --kalkputz  5.47
     --nussrot  auf --leinen   6.29   auf --kalkputz  5.51
     --petrol   auf --leinen   6.39   auf --kalkputz  5.61
     --rissrot  auf --leinen   5.56   auf --kalkputz  4.88
     --keder    auf --leinen   3.64   auf --kalkputz  3.20  (nur grosse Kopfzeilen)
     --faden    auf --leinen   1.53   auf --kalkputz  1.34  (nie in einer color-Angabe)

   Und umgekehrt, denn dies ist ein helles Thema:
     --leinen auf --nussrot 6.29, --kalkputz auf --nussrot 5.51
     --leinen auf --petrol  6.39, --kalkputz auf --petrol  5.61
     --leinen auf --rissrot 5.56, --kalkputz auf --rissrot 4.88

   Die Helligkeit des Untergrunds liegt bei etwa 89 Prozent und damit deutlich
   unter jedem gewoehnlichen Weiss. Das ist Absicht und die Achse, an der man
   dieses Thema erkennt: wird der Grund heller, ist die Achse weg.
   ========================================================================= */

:root {
	--leinen: #e8e3dd;
	--kalkputz: #dcd5cd;
	--faden: #c2b8ac;
	--keder: #7d7367;
	--russholz: #211d19;
	--graphit: #565049;
	--nussrot: #7d3f2c;
	--petrol: #3c5450;
	--rissrot: #a8261f;

	--anzeige: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
	--koerper: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;

	--saum: 4.6rem;
	--breit: 1180px;
	--eng: 46rem;
}

/* =========================================================================
   3. Grundlagen
   ========================================================================= */

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

/* Das Attribut hidden wird von jeder Klasse mit display ueberfahren; ohne
   diese Regel ist eine als verborgen markierte Schaltflaeche sichtbar. */
[hidden] {
	display: none !important;
}

html {
	/* Damit ein Sprungziel nicht unter der klebenden Saumkante landet. */
	scroll-padding-top: calc(var(--saum) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--leinen);
	color: var(--russholz);
	font-family: var(--koerper);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--anzeige);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.005em;
	margin: 0 0 0.7em;
	color: var(--russholz);
}

h1 {
	font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem);
}

h2 {
	font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.2rem);
}

h3 {
	font-size: clamp(1.14rem, 1.02rem + 0.5vw, 1.34rem);
}

p {
	margin: 0 0 1.05em;
}

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

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

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

strong {
	font-weight: 600;
}

em {
	font-style: normal;
	font-weight: 600;
	color: var(--petrol);
}

code {
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 0.94em;
	background: var(--leinen);
	border: 1px solid var(--faden);
	border-radius: 3px;
	padding: 0.05em 0.34em;
}

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

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

.sprungmarke {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 60;
	display: block;
	transform: translateY(-140%);
	background: var(--russholz);
	color: var(--leinen);
	padding: 0.7rem 1.2rem;
	font-weight: 600;
	text-decoration: none;
}

.sprungmarke:focus {
	transform: translateY(0);
	color: var(--leinen);
}

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

.polsterei {
	width: 100%;
	max-width: var(--breit);
	margin: 0 auto;
	padding: 0 1.4rem;
}

/* =========================================================================
   4. Abschnitte
   ========================================================================= */

.lage {
	padding: clamp(2.6rem, 2rem + 2.4vw, 4.4rem) 0;
}

.lage--grund {
	background: var(--leinen);
}

.lage--tafel {
	background: var(--kalkputz);
}

.lage--knapp {
	padding: clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem) 0;
	background: var(--leinen);
}

.lage__kopf {
	max-width: 54rem;
	margin-bottom: 2rem;
}

.lage__kopf--mitte {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.lage__vor {
	color: var(--graphit);
	font-size: 1.06rem;
}

.lage__nach {
	margin-top: 1.2rem;
	color: var(--graphit);
	font-size: 0.96rem;
	max-width: 58rem;
}

.lage__ahle {
	margin-top: 2rem;
}

.lage__ahlen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 2rem;
}

/* =========================================================================
   5. Schaltflaechen: die Ahle
   -------------------------------------------------------------------------
   Mindestens 44 px hoch, damit ein Daumen sie trifft. Die Fuellung ist immer
   aus der Hauptgamme und nie aus der Randfarbe: Text auf Randfarbe faellt
   unter dem Kontrast durch.
   ========================================================================= */

.ahle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.35rem;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--koerper);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ahle--auftrag {
	background: var(--nussrot);
	border-color: var(--nussrot);
	color: var(--leinen);
}

.ahle--auftrag:hover,
.ahle--auftrag:focus {
	background: var(--russholz);
	border-color: var(--russholz);
	color: var(--leinen);
}

.ahle--still {
	background: transparent;
	border-color: var(--keder);
	color: var(--russholz);
}

.ahle--still:hover,
.ahle--still:focus {
	background: var(--kalkputz);
	border-color: var(--russholz);
	color: var(--russholz);
}

.ahle--knapp {
	min-height: 40px;
	padding: 0.42rem 0.95rem;
	background: transparent;
	border-color: var(--keder);
	color: var(--nussrot);
	font-size: 0.95rem;
}

.ahle--knapp:hover,
.ahle--knapp:focus {
	background: var(--kalkputz);
	border-color: var(--nussrot);
	color: var(--russholz);
}

.lage--tafel .ahle--still:hover,
.lage--tafel .ahle--still:focus,
.lage--tafel .ahle--knapp:hover,
.lage--tafel .ahle--knapp:focus {
	background: var(--leinen);
}

/* =========================================================================
   6. Saumkante, also der Kopf
   -------------------------------------------------------------------------
   z-index steht hier mit Absicht und mit Namen: die Saumkante klebt oben und
   muss ueber dem Inhalt liegen. Ausser hier und an der Merkleiste gibt es auf
   diesem Terrain keinen z-index, damit kein Vorfahre einen eigenen Stapel
   aufmacht und die Lagen der Werkzeuge einsperrt.
   ========================================================================= */

.saumkante {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--leinen);
	border-bottom: 1px solid var(--faden);
}

.saumkante__reihe {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	min-height: var(--saum);
}

.saumkante__name {
	display: block;
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--russholz);
	padding: 0.45rem 0;
	min-height: 44px;
}

/* Diese Zeile darf nicht umbrechen: sie ist die Hälfte des Logos, und ein
   Umbruch darin macht die ganze Saumkante eine Zeile höher. */
.saumkante__ueber {
	display: block;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--graphit);
	margin-bottom: 0.24rem;
}

.saumkante__strich {
	display: block;
	height: 2px;
	background: var(--nussrot);
	margin-bottom: 0.16rem;
}

.saumkante__marke {
	display: block;
	font-family: var(--anzeige);
	font-size: 1.62rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
}

.saumkante__ahle {
	/* Die automatische Marge sitzt an der Schaltflaeche und nicht am
	   Menueknopf: sonst bricht die Saumkante auf dem Telefon in zwei Zeilen. */
	margin-left: auto;
	flex: 0 0 auto;
	white-space: nowrap;
}

.naehgang {
	flex: 1 1 auto;
	min-width: 0;
}

.oese {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--keder);
	border-radius: 2px;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
}

.oese__strich {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--russholz);
}

.naehgang__reihe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 1.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.naehgang__reihe a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--russholz);
	font-size: 0.97rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.naehgang__reihe a:hover,
.naehgang__reihe a:focus {
	border-bottom-color: var(--nussrot);
	color: var(--nussrot);
}

.naehgang__reihe .current_page_item > a,
.naehgang__reihe .current-menu-item > a {
	border-bottom-color: var(--keder);
}

/* =========================================================================
   7. Gurtband: der Trenner
   ========================================================================= */

.gurtband {
	max-width: var(--breit);
	margin: 0 auto;
	padding: 0 1.4rem;
}

.gurtband svg {
	display: block;
	width: 100%;
	height: 22px;
}

.gurtband__kante {
	stroke: var(--keder);
	stroke-width: 2;
}

.gurtband__flecht {
	stroke: var(--faden);
	stroke-width: 6;
	stroke-linecap: butt;
}

.gurtband__flecht--tief {
	stroke: var(--keder);
}

/* =========================================================================
   8. Zuschnitt: der Herokopf
   ========================================================================= */

.zuschnitt {
	padding-top: clamp(2rem, 1.6rem + 1.6vw, 3.2rem);
}

.zuschnitt__reihe {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.6rem, 1.2rem + 2vw, 3.2rem);
}

.zuschnitt__ueber {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--petrol);
	margin-bottom: 0.9rem;
}

.zuschnitt__satz {
	font-size: 1.12rem;
	color: var(--graphit);
	max-width: 34rem;
}

.zuschnitt__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 1.7rem 0 1.1rem;
}

.zuschnitt__fein {
	font-size: 0.9rem;
	color: var(--graphit);
}

.zuschnitt__bild img {
	width: 100%;
	border: 1px solid var(--keder);
	border-radius: 2px;
}

/* =========================================================================
   9. Duo und Bruecke
   ========================================================================= */

.duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(1.6rem, 1.2rem + 2vw, 3rem);
}

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

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

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

.duo__bild img {
	width: 100%;
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.duo__legende {
	margin-top: 0.6rem;
	font-size: 0.88rem;
	color: var(--graphit);
}

.lagenliste {
	margin: 1.4rem 0;
	padding: 1rem 1.1rem;
	background: var(--leinen);
	border-left: 3px solid var(--nussrot);
}

.lage--grund .lagenliste {
	background: var(--kalkputz);
}

.lagenliste__paar {
	display: grid;
	grid-template-columns: 8.4rem minmax(0, 1fr);
	gap: 0.4rem 1rem;
	padding: 0.34rem 0;
	border-bottom: 1px solid var(--faden);
}

.lagenliste__paar:last-child {
	border-bottom: 0;
}

.lagenliste dt {
	font-weight: 600;
	color: var(--russholz);
}

.lagenliste dd {
	margin: 0;
	color: var(--graphit);
	font-size: 0.96rem;
}

.bruecke {
	max-width: 58rem;
	padding: 1.5rem 1.7rem;
	background: var(--kalkputz);
	border-top: 2px solid var(--nussrot);
}

.lage--tafel .bruecke {
	background: var(--leinen);
}

.bruecke__kopf {
	font-size: clamp(1.24rem, 1.1rem + 0.6vw, 1.5rem);
	margin-bottom: 0.6rem;
}

.bruecke .ahle {
	margin-top: 1.1rem;
}

/* =========================================================================
   10. Kederleiste: der Kopf einer Innenseite
   -------------------------------------------------------------------------
   Traegt die Leinentextur im Hintergrund. Der Weg ist relativ zu style.css im
   Wurzelverzeichnis des Themas und beginnt darum nicht mit ../ .
   ========================================================================= */

.kederleiste {
	position: relative;
	padding: clamp(2.4rem, 1.9rem + 2vw, 4rem) 0;
	background-color: var(--kalkputz);
	background-image: linear-gradient(to right, rgba(232, 227, 221, 0.94), rgba(232, 227, 221, 0.82)), url('images/leinenflaeche.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--keder);
}

.kederleiste h1 {
	max-width: 46rem;
}

.kederleiste__ueber {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--petrol);
	margin-bottom: 0.8rem;
}

.kederleiste__satz {
	max-width: 46rem;
	font-size: 1.08rem;
	color: var(--graphit);
}

/* =========================================================================
   11. Werkzeug 1: Schichtenschnitt
   ========================================================================= */

.schichtenschnitt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	grid-template-areas: 'stapel zugriff' 'bild zugriff';
	gap: 1.4rem clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
	align-items: start;
}

.schichtenschnitt__stapel {
	grid-area: stapel;
	padding: 1.2rem;
	background: var(--kalkputz);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.lage--tafel .schichtenschnitt__stapel {
	background: var(--leinen);
}

.schichtenschnitt__frage {
	font-weight: 600;
	margin-bottom: 0.9rem;
}

.schichtenschnitt__lage {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	min-height: 56px;
	padding: 0.62rem 0.7rem;
	margin-bottom: 0.42rem;
	background: var(--leinen);
	border: 1px solid var(--faden);
	border-radius: 2px;
	cursor: pointer;
}

.lage--tafel .schichtenschnitt__lage {
	background: var(--kalkputz);
}

.schichtenschnitt__lage:hover {
	border-color: var(--keder);
}

.schichtenschnitt__haken {
	width: 22px;
	height: 22px;
	margin: 0.2rem 0 0;
	accent-color: var(--nussrot);
	flex: 0 0 auto;
}

.schichtenschnitt__band {
	display: block;
	width: 10px;
	min-height: 40px;
	align-self: stretch;
	background: var(--faden);
	border-radius: 1px;
	flex: 0 0 auto;
}

.schichtenschnitt__haken:checked ~ .schichtenschnitt__band {
	background: var(--nussrot);
}

.schichtenschnitt__wort {
	display: block;
}

.schichtenschnitt__name {
	display: block;
	font-weight: 600;
	font-size: 1.02rem;
}

.schichtenschnitt__merkmal {
	display: block;
	font-size: 0.9rem;
	color: var(--graphit);
}

.schichtenschnitt__weg {
	margin-top: 0.7rem;
}

.schichtenschnitt__ohne,
.rahmenprobe__ohne,
.verschleissfolge__ohne {
	margin-top: 0.9rem;
	padding: 0.7rem 0.9rem;
	background: var(--kalkputz);
	border-left: 3px solid var(--keder);
	font-size: 0.92rem;
	color: var(--graphit);
}

.schichtenschnitt__zugriff {
	grid-area: zugriff;
	padding: 1.3rem;
	background: var(--kalkputz);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.lage--tafel .schichtenschnitt__zugriff {
	background: var(--leinen);
}

.schichtenschnitt__urteil {
	font-family: var(--anzeige);
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	line-height: 1.32;
	margin-bottom: 1rem;
}

.schichtenschnitt__folge {
	margin: 0 0 1.1rem;
	padding: 0;
	list-style: none;
	counter-reset: stufe;
}

.schichtenschnitt__stufe {
	display: grid;
	grid-template-columns: 2.1rem minmax(0, 10rem) minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem 0.7rem;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--faden);
	border-bottom-width: 0;
	background: var(--leinen);
}

.lage--tafel .schichtenschnitt__stufe {
	background: var(--kalkputz);
}

.schichtenschnitt__stufe:last-child {
	border-bottom-width: 1px;
}

.schichtenschnitt__stufe::before {
	counter-increment: stufe;
	content: counter(stufe);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	background: var(--graphit);
	color: var(--leinen);
	font-family: var(--koerper);
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: 2px;
}

.schichtenschnitt__stufename {
	font-weight: 600;
}

.schichtenschnitt__rolle {
	font-size: 0.88rem;
	color: var(--graphit);
}

.schichtenschnitt__stufe--gemeldet {
	border-left: 4px solid var(--rissrot);
}

.schichtenschnitt__stufe--gemeldet .schichtenschnitt__stufename {
	color: var(--rissrot);
}

.schichtenschnitt__stufe--zwang {
	border-left: 4px solid var(--nussrot);
}

.schichtenschnitt__stufe--zwang .schichtenschnitt__stufename {
	color: var(--nussrot);
}

.schichtenschnitt__stufe--zugriff {
	border-left: 4px solid var(--keder);
}

.schichtenschnitt__stufe--bleibt {
	border-left: 4px solid var(--petrol);
}

.schichtenschnitt__stufe--bleibt .schichtenschnitt__stufename {
	color: var(--petrol);
}

.schichtenschnitt__satz {
	margin-bottom: 0.7rem;
	font-size: 0.98rem;
}

.schichtenschnitt__satz--zwang {
	padding: 0.6rem 0.8rem;
	background: var(--leinen);
	border-left: 3px solid var(--nussrot);
	color: var(--russholz);
}

.lage--tafel .schichtenschnitt__satz--zwang {
	background: var(--kalkputz);
}

.schichtenschnitt__satz--heft {
	color: var(--graphit);
	font-size: 0.94rem;
}

.schichtenschnitt__bild {
	grid-area: bild;
}

.schichtenschnitt__bild img {
	width: 100%;
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.schichtenschnitt__legende,
.rahmenprobe__legende {
	margin-top: 0.55rem;
	font-size: 0.86rem;
	color: var(--graphit);
}

/* =========================================================================
   12. Werkzeug 2: Gurtgitter
   ========================================================================= */

.gurtgitter {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.4fr);
	gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
	align-items: start;
}

.gurtgitter__bild img {
	width: 100%;
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.gurtgitter__vor {
	color: var(--graphit);
}

.gurtgitter__masche {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 1.3rem;
	align-items: start;
	margin: 1.3rem 0;
}

.gurtgitter__netz {
	display: block;
	width: 100%;
	height: auto;
	background: var(--leinen);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.lage--tafel .gurtgitter__netz {
	background: var(--kalkputz);
}

.gurtgitter__zarge {
	fill: none;
	stroke: var(--keder);
	stroke-width: 2;
}

.gurtgitter__gurt {
	fill: var(--petrol);
}

.gurtgitter__gurt.gurtgitter__gurt--locker {
	fill: var(--faden);
	stroke: var(--keder);
	stroke-width: 1;
	stroke-dasharray: 5 4;
}

.gurtgitter__senke {
	fill: var(--rissrot);
	stroke: var(--leinen);
	stroke-width: 2;
}

.gurtgitter__satz {
	margin: 0 0 0.9rem;
	padding: 0;
	border: 0;
}

.gurtgitter__satz legend {
	padding: 0;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--graphit);
	margin-bottom: 0.4rem;
}

.gurtgitter__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.42rem;
}

.masche {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 0.8rem;
	background: var(--leinen);
	border: 1px solid var(--keder);
	border-radius: 2px;
	font-family: var(--koerper);
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--russholz);
	cursor: pointer;
}

.lage--tafel .masche {
	background: var(--kalkputz);
}

.masche:hover {
	border-color: var(--nussrot);
}

.masche[aria-pressed='true'] {
	background: var(--nussrot);
	border-color: var(--nussrot);
	color: var(--leinen);
}

.gurtgitter__pfad {
	padding: 1.2rem 1.3rem;
	background: var(--leinen);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.lage--tafel .gurtgitter__pfad {
	background: var(--kalkputz);
}

.gurtgitter__kopf {
	font-family: var(--anzeige);
	font-size: clamp(1.12rem, 1rem + 0.5vw, 1.32rem);
	line-height: 1.3;
	margin-bottom: 0.5rem;
}

.gurtgitter__kern {
	font-weight: 600;
	color: var(--nussrot);
}

.gurtgitter__was {
	font-size: 0.98rem;
}

.gurtgitter__zahl {
	margin-bottom: 0;
	font-size: 0.94rem;
	color: var(--graphit);
}

.gurtgitter__lehre {
	margin-top: 1.2rem;
	padding: 0.9rem 1rem;
	background: var(--leinen);
	border-left: 3px solid var(--petrol);
	font-size: 0.96rem;
}

.lage--tafel .gurtgitter__lehre {
	background: var(--kalkputz);
}

/* =========================================================================
   13. Werkzeug 3: Rahmenprobe
   ========================================================================= */

.rahmenprobe {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
	gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
	align-items: start;
}

.rahmenprobe__vor {
	color: var(--graphit);
}

.rahmenprobe__griff,
.rahmenprobe__ende {
	padding: 1.2rem 1.3rem;
	margin: 1.2rem 0;
	background: var(--leinen);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.lage--tafel .rahmenprobe__griff,
.lage--tafel .rahmenprobe__ende {
	background: var(--kalkputz);
}

/* Diese Zeile traegt eine Auskunft und keine Aufschrift: sie sagt, wie viele
   Ursachen noch möglich sind. In Grossbuchstaben gesetzt wuerde sie schreien,
   und die Zahl darin wuerde mit dem Rest verschwimmen. */
.rahmenprobe__zaehler {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--petrol);
	margin-bottom: 0.5rem;
}

.rahmenprobe__name {
	margin-bottom: 0.5rem;
}

.rahmenprobe__wie {
	font-size: 0.99rem;
}

.rahmenprobe__hinweis {
	font-size: 0.92rem;
	color: var(--graphit);
}

.rahmenprobe__antwort {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1rem;
}

.rahmenprobe__antwortsatz {
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--graphit);
}

.rahmenprobe__urteil {
	font-family: var(--anzeige);
	font-size: clamp(1.12rem, 1rem + 0.5vw, 1.34rem);
	line-height: 1.3;
}

.rahmenprobe__warum {
	font-size: 0.99rem;
}

.rahmenprobe__arbeit {
	margin-bottom: 0;
	padding: 0.7rem 0.85rem;
	background: var(--kalkputz);
	border-left: 3px solid var(--nussrot);
	font-weight: 600;
	font-size: 0.97rem;
}

.lage--tafel .rahmenprobe__arbeit {
	background: var(--leinen);
}

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

.rahmenprobe__ursache {
	padding: 0.5rem 0.62rem;
	background: var(--leinen);
	border: 1px solid var(--faden);
	border-left-width: 4px;
	border-left-color: var(--faden);
	border-radius: 2px;
	font-size: 0.9rem;
	color: var(--graphit);
}

.lage--tafel .rahmenprobe__ursache {
	background: var(--kalkputz);
}

.rahmenprobe__ursache--offen {
	border-left-color: var(--petrol);
	color: var(--russholz);
}

.rahmenprobe__ursache--weg {
	border-left-color: var(--faden);
	color: var(--graphit);
	text-decoration: line-through;
	text-decoration-color: var(--keder);
}

.rahmenprobe__ursache--bleibt {
	border-left-color: var(--nussrot);
	background: var(--kalkputz);
	color: var(--russholz);
	font-weight: 600;
}

.lage--tafel .rahmenprobe__ursache--bleibt {
	background: var(--leinen);
}

.rahmenprobe__bild img {
	width: 100%;
	border: 1px solid var(--keder);
	border-radius: 2px;
}

/* =========================================================================
   14. Werkzeug 4: Verschleissfolge
   ========================================================================= */

.verschleissfolge {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.4fr);
	gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
	align-items: start;
}

.verschleissfolge__bild img {
	width: 100%;
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.verschleissfolge__vor {
	color: var(--graphit);
}

.verschleissfolge__stufen {
	margin: 1.2rem 0;
	padding: 1.1rem 1.2rem;
	background: var(--kalkputz);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.lage--tafel .verschleissfolge__stufen {
	background: var(--leinen);
}

.verschleissfolge__stufe {
	margin: 0 0 0.9rem;
	padding: 0;
	border: 0;
}

.verschleissfolge__stufe legend {
	padding: 0;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--graphit);
	margin-bottom: 0.4rem;
}

.verschleissfolge__wahl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.42rem;
}

/* Der Chip ist das Etikett und nicht der gezeichnete Kreis: die Raukante, die
   ein Daumen trifft, ist dieses Etikett, und darum steht die Mindesthoehe
   hier. Die Regel greift ausdruecklich nicht als .verschleissfolge__stufen
   label, damit ein Behaelter mit Elementnamen sie nicht ueberfaehrt. */
.stufenchip {
	display: inline-flex;
	align-items: center;
	gap: 0.46rem;
	min-height: 44px;
	padding: 0.36rem 0.8rem;
	background: var(--leinen);
	border: 1px solid var(--keder);
	border-radius: 2px;
	font-size: 0.93rem;
	font-weight: 600;
	cursor: pointer;
}

.lage--tafel .stufenchip {
	background: var(--kalkputz);
}

.stufenchip:hover {
	border-color: var(--nussrot);
}

.stufenchip input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--nussrot);
	flex: 0 0 auto;
}

.stufenchip__wort {
	display: block;
}

.stufenchip:has(input:checked) {
	background: var(--nussrot);
	border-color: var(--nussrot);
	color: var(--leinen);
}

.verschleissfolge__aus {
	padding: 1.2rem 1.3rem;
	background: var(--leinen);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.lage--tafel .verschleissfolge__aus {
	background: var(--kalkputz);
}

.verschleissfolge__satz {
	font-family: var(--anzeige);
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	line-height: 1.32;
}

.verschleissfolge__rangliste {
	margin: 1rem 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

.verschleissfolge__rang {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.44rem 0.6rem;
	background: var(--kalkputz);
	border: 1px solid var(--faden);
	border-radius: 2px;
}

.lage--tafel .verschleissfolge__rang {
	background: var(--leinen);
}

/* Grossziffern in der Fuellung der Hauptgamme, nicht in der Randfarbe: der
   Kontrast von --nussrot auf --leinen ist 6.29 und auf --kalkputz 5.51. */
.verschleissfolge__nummer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	flex: 0 0 auto;
	background: var(--nussrot);
	color: var(--leinen);
	font-family: var(--koerper);
	font-size: 1.02rem;
	font-weight: 600;
	border-radius: 2px;
}

.verschleissfolge__lage {
	display: block;
	font-weight: 600;
}

.verschleissfolge__rang:first-child .verschleissfolge__lage {
	color: var(--nussrot);
}

.verschleissfolge__rang:last-child .verschleissfolge__nummer {
	background: var(--petrol);
}

.verschleissfolge__rang:last-child .verschleissfolge__lage {
	color: var(--petrol);
}

.verschleissfolge__grund {
	font-size: 0.99rem;
}

.verschleissfolge__zweit {
	font-size: 0.96rem;
	color: var(--graphit);
}

.verschleissfolge__zweit span {
	color: var(--russholz);
	font-weight: 600;
}

.verschleissfolge__letzte {
	margin-bottom: 0;
	padding: 0.62rem 0.8rem;
	background: var(--kalkputz);
	border-left: 3px solid var(--petrol);
	font-size: 0.96rem;
}

.lage--tafel .verschleissfolge__letzte {
	background: var(--leinen);
}

/* =========================================================================
   15. Karten, Tafeln und Zahlen
   ========================================================================= */

/* Vier Karten ausdruecklich zwei mal zwei: auto-fit legt vier Karten in einem
   Raster von drei Spalten als 3+1 aus, und die letzte sieht dann vergessen aus. */
.arbeitsgitter {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.3rem;
}

.schichtkarte {
	display: flex;
	flex-direction: column;
	background: var(--kalkputz);
	border: 1px solid var(--keder);
	border-radius: 2px;
	overflow: hidden;
}

.schichtkarte__bild {
	width: 100%;
	border-bottom: 1px solid var(--keder);
}

.schichtkarte__wort {
	padding: 1.1rem 1.15rem;
}

.schichtkarte__lage {
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--petrol);
	margin-bottom: 0.5rem;
}

.schichtkarte__dauer {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--faden);
	font-size: 0.9rem;
	color: var(--graphit);
}

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

.kostenzeile {
	padding: 1.1rem 1.2rem;
	background: var(--leinen);
	border-left: 4px solid var(--nussrot);
}

.kostenzeile__lage {
	font-size: 0.88rem;
	color: var(--petrol);
	font-weight: 600;
}

.kostenzeile__dauer {
	margin-bottom: 0;
	font-size: 0.9rem;
	color: var(--graphit);
}

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

.stoffkarte {
	padding: 1.1rem 1.2rem;
	background: var(--kalkputz);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.hinweisblock {
	margin-top: 1.6rem;
	padding: 1.2rem 1.3rem;
	background: var(--leinen);
	border: 1px solid var(--keder);
	border-left-width: 4px;
	border-left-color: var(--petrol);
	border-radius: 2px;
}

.lage--grund .hinweisblock {
	background: var(--kalkputz);
}

.hinweisblock h3 {
	margin-bottom: 0.5rem;
}

.zargenrand {
	overflow-x: auto;
	border: 1px solid var(--keder);
	border-radius: 2px;
	background: var(--leinen);
}

.lage--grund .zargenrand {
	background: var(--kalkputz);
}

.lagentabelle,
.preisliste {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.lagentabelle caption,
.preisliste caption {
	padding: 0.9rem 1rem;
	text-align: left;
	font-weight: 600;
	color: var(--graphit);
	border-bottom: 1px solid var(--faden);
}

.lagentabelle th,
.lagentabelle td,
.preisliste th,
.preisliste td {
	padding: 0.72rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--faden);
}

.lagentabelle thead th,
.preisliste thead th {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--graphit);
	white-space: nowrap;
	border-bottom: 1px solid var(--keder);
}

.lagentabelle tbody th,
.preisliste tbody th {
	font-weight: 600;
	color: var(--russholz);
}

.lagentabelle tbody tr:last-child th,
.lagentabelle tbody tr:last-child td,
.preisliste tbody tr:last-child th,
.preisliste tbody tr:last-child td {
	border-bottom: 0;
}

.abzaehlung {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.1rem;
}

.kennzahl {
	padding: 1.1rem 1.15rem;
	background: var(--kalkputz);
	border-top: 3px solid var(--nussrot);
}

/* Zahlen immer im Koerperschriftschnitt: die Anzeigeschrift bleibt den
   Kopfzeilen aus Woertern vorbehalten. */
.kennzahl__zahl {
	font-family: var(--koerper);
	font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--nussrot);
	margin-bottom: 0.35rem;
}

.kennzahl__einheit {
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--graphit);
	letter-spacing: 0.02em;
}

.kennzahl__was {
	margin-bottom: 0;
	font-size: 0.94rem;
	color: var(--graphit);
}

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

.ablauf__stufe {
	position: relative;
	padding: 1.1rem 1.2rem 1.1rem 3.6rem;
	background: var(--kalkputz);
	border: 1px solid var(--faden);
	border-radius: 2px;
}

.ablauf__stufe::before {
	counter-increment: schritt;
	content: counter(schritt);
	position: absolute;
	left: 1.1rem;
	top: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	background: var(--petrol);
	color: var(--leinen);
	font-family: var(--koerper);
	font-size: 0.94rem;
	font-weight: 600;
	border-radius: 2px;
}

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

/* =========================================================================
   16. Rueckmeldungen: die Schnittkante
   -------------------------------------------------------------------------
   Die untere Kante ist mit einer Zackenschere geschnitten. Gezeichnet wird sie
   als eingebettetes SVG und nicht mit clip-path: ein clip-path schneidet auch
   den Umriss weg, und auf kleinen Groessen wird die Figur dann unlesbar.
   ========================================================================= */

.stimmenstapel {
	display: grid;
	gap: 1.4rem;
	max-width: 60rem;
}

.schnittkante {
	position: relative;
	margin: 0;
	padding: 1.3rem 1.4rem 0.9rem;
	max-width: 44rem;
	background: var(--kalkputz);
	border: 1px solid var(--keder);
	border-bottom: 0;
}

.lage--tafel .schnittkante {
	background: var(--leinen);
}

.schnittkante--links {
	margin-right: auto;
}

.schnittkante--rechts {
	margin-left: auto;
}

.schnittkante__wort {
	margin: 0 0 0.9rem;
	font-family: var(--anzeige);
	font-size: clamp(1.06rem, 0.98rem + 0.5vw, 1.26rem);
	line-height: 1.42;
}

.schnittkante__wort p {
	margin: 0;
}

.schnittkante__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--faden);
}

.schnittkante__wer {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--graphit);
}

.schnittkante__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.34rem;
}

.schnittkante__chip {
	display: block;
	padding: 0.2rem 0.55rem;
	background: var(--petrol);
	color: var(--leinen);
	border-radius: 2px;
	font-size: 0.8rem;
	font-weight: 600;
}

.schnittkante__zacke {
	display: block;
	width: 100%;
	height: 9px;
}

.schnittkante__zacke polygon {
	fill: var(--kalkputz);
	stroke: var(--keder);
	stroke-width: 0.6;
}

.lage--tafel .schnittkante__zacke polygon {
	fill: var(--leinen);
}

.stimmenband {
	width: 100%;
	margin-bottom: 2rem;
	border: 1px solid var(--keder);
	border-radius: 2px;
}

/* =========================================================================
   17. Leute, Zuspruch
   ========================================================================= */

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

.handbild {
	display: grid;
	grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
	gap: 1.1rem;
	align-items: start;
	padding: 1.1rem;
	background: var(--leinen);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.lage--grund .handbild {
	background: var(--kalkputz);
}

.handbild img {
	width: 100%;
	border: 1px solid var(--faden);
}

.handbild h3 {
	margin-bottom: 0.24rem;
}

.handbild__rolle {
	margin-bottom: 0.2rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--nussrot);
}

.handbild__seit {
	margin-bottom: 0.7rem;
	font-size: 0.88rem;
	color: var(--graphit);
}

.handbild__wort p:last-child {
	margin-bottom: 0;
	font-size: 0.96rem;
}

.zuspruch__reihe {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.4rem, 1rem + 1.8vw, 2.6rem);
	align-items: center;
}

.zuspruch__bild img {
	width: 100%;
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.zuspruch__wort {
	padding: 1.4rem 1.5rem;
	background: var(--kalkputz);
	border-left: 4px solid var(--nussrot);
}

.zuspruch__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.3rem;
}

/* =========================================================================
   18. Aufschnitt: die Liste der Berichte
   -------------------------------------------------------------------------
   Der Balken aus fuenf Lagen liegt hinter der Zeile und wird zuerst
   gezeichnet, weil er im Dokument vor dem Text steht. Damit braucht kein
   z-index gesetzt zu werden, und der Text liegt trotzdem oben.
   ========================================================================= */

.aufschnitt {
	display: grid;
	gap: 1rem;
}

.lagenzeile {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--keder);
	border-radius: 2px;
	background: var(--leinen);
}

.lage--tafel .lagenzeile {
	background: var(--kalkputz);
}

.lagenzeile__balken {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
}

/* Die fünf Bänder tragen den Text, und darum bekommen sie die Panelfarbe und
   nicht die Haarlinienfarbe: --faden liegt bei 4.07 gegen --graphit und bei
   4.17 gegen --petrol, also unter der Anforderung. Die Haarlinie trennt die
   Bänder nur, und die markierte Lage wird durch einen kräftigen Balken in
   --nussrot bezeichnet. Genau diesen Fehler hat die Pixelprobe gefunden: die
   gewöhnliche Contrastprobe sieht ein Band hinter dem Text nicht. */
.lagenzeile__lage {
	display: block;
	flex: 1 1 20%;
	background: var(--kalkputz);
	border-bottom: 1px solid var(--faden);
}

.lage--tafel .lagenzeile__lage {
	background: var(--leinen);
}

.lagenzeile__lage:last-child {
	border-bottom: 0;
}

.lagenzeile__lage--wach {
	box-shadow: inset 7px 0 0 0 var(--nussrot);
}

.lagenzeile__wort {
	position: relative;
	padding: 1.1rem 1.2rem 1.1rem 1.6rem;
}

.lagenzeile__marke {
	margin-bottom: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--petrol);
}

.lagenzeile h2,
.lagenzeile h3 {
	font-size: clamp(1.14rem, 1.02rem + 0.6vw, 1.44rem);
	margin-bottom: 0.44rem;
}

.lagenzeile h2 a,
.lagenzeile h3 a {
	display: inline-block;
	min-height: 36px;
	color: var(--russholz);
	text-decoration-color: var(--keder);
}

.lagenzeile h2 a:hover,
.lagenzeile h3 a:hover,
.lagenzeile h2 a:focus,
.lagenzeile h3 a:focus {
	color: var(--nussrot);
}

.lagenzeile__kurz {
	margin-bottom: 0;
	max-width: 52rem;
	font-size: 0.98rem;
	color: var(--graphit);
}

/* =========================================================================
   19. Werkbericht mit Randlage
   ========================================================================= */

.werkbericht {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	gap: clamp(1.4rem, 1rem + 1.6vw, 2.6rem);
	align-items: start;
}

.randlage {
	position: sticky;
	top: calc(var(--saum) + 1.4rem);
	padding: 1rem 1.1rem;
	background: var(--kalkputz);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.randlage__kopf {
	margin-bottom: 0.6rem;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--graphit);
}

.randlage__stapel {
	margin: 0 0 0.8rem;
	padding: 0;
	list-style: none;
}

.randlage__lage {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.24rem 0;
	font-size: 0.9rem;
	color: var(--graphit);
}

.randlage__band {
	display: block;
	width: 22px;
	height: 8px;
	flex: 0 0 auto;
	background: var(--faden);
	border-radius: 1px;
}

.randlage__name {
	display: block;
}

.randlage__lage--wach {
	color: var(--nussrot);
	font-weight: 600;
}

.randlage__lage--wach .randlage__band {
	background: var(--nussrot);
	height: 10px;
}

.randlage__satz {
	margin-bottom: 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--faden);
	font-size: 0.86rem;
	color: var(--graphit);
}

.werkbericht__wort {
	max-width: var(--eng);
}

.werkbericht__wort p {
	margin-bottom: 1.15em;
}

/* =========================================================================
   20. Nachfragen
   ========================================================================= */

.nachfragen {
	display: grid;
	gap: 0.6rem;
	max-width: 58rem;
}

.nachfrage {
	background: var(--kalkputz);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.lage--tafel .nachfrage {
	background: var(--leinen);
}

.nachfrage summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0.7rem 1rem;
	font-weight: 600;
	cursor: pointer;
}

.nachfrage summary::marker {
	color: var(--nussrot);
}

.nachfrage p {
	margin: 0;
	padding: 0 1rem 1rem;
	color: var(--graphit);
}

/* =========================================================================
   21. Rechtliche Bloecke
   ========================================================================= */

.rechtsblock {
	max-width: 58rem;
}

.rechtsblock--eng {
	max-width: var(--eng);
}

.rechtsblock h2 {
	margin-top: 2rem;
	font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.62rem);
}

.rechtsblock h2:first-child {
	margin-top: 0;
}

.rechtsblock h3 {
	margin-top: 1.5rem;
}

.rechtspunkte {
	margin: 0 0 1.1em;
	padding-left: 1.3rem;
}

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

.rechtsliste,
.zeitenliste {
	margin: 0 0 1.2rem;
}

.rechtsliste__paar,
.zeitenliste__paar {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	gap: 0.3rem 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--faden);
}

.rechtsliste dt,
.zeitenliste dt {
	font-weight: 600;
}

.rechtsliste dd,
.zeitenliste dd {
	margin: 0;
	color: var(--graphit);
}

.anschriftblock {
	margin: 0 0 1.1rem;
	font-style: normal;
}

.anschriftblock__name {
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.anschriftblock a {
	display: inline-block;
	min-height: 36px;
	line-height: 36px;
}

/* =========================================================================
   22. Formulare
   ========================================================================= */

.bogenreihe {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.6rem, 1.2rem + 2vw, 3rem);
	align-items: start;
}

.bogenreihe--gedreht .aufnahmebogen {
	order: 1;
}

.bogenreihe--gedreht .bogenreihe__wort {
	order: 2;
}

.aufnahmebogen {
	padding: 1.3rem 1.4rem;
	background: var(--leinen);
	border: 1px solid var(--keder);
	border-radius: 2px;
}

.lage--grund .aufnahmebogen {
	background: var(--kalkputz);
}

.aufnahmebogen h2 {
	margin-bottom: 1rem;
}

.zeilenfeld {
	display: grid;
	gap: 0.34rem;
	margin-bottom: 1rem;
}

.zeilenfeld label {
	font-size: 0.92rem;
	font-weight: 600;
}

.zeilenfeld input,
.zeilenfeld select,
.zeilenfeld textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.7rem;
	background: var(--leinen);
	border: 1px solid var(--keder);
	border-radius: 2px;
	font-family: var(--koerper);
	font-size: 1rem;
	color: var(--russholz);
}

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

.zeilenfeld input:focus,
.zeilenfeld select:focus,
.zeilenfeld textarea:focus {
	border-color: var(--nussrot);
}

/* Die Falle fuer Robots wird ausserhalb des Bildschirms geparkt und nicht auf
   display none gesetzt: manche Robots ueberspringen unsichtbare Felder. */
.heftfaden {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aufnahmebogen__fein {
	margin-top: 1rem;
	margin-bottom: 0;
	font-size: 0.86rem;
	color: var(--graphit);
}

.posteingang {
	margin: 0 0 1.1rem;
	padding: 0.8rem 1rem;
	border-left: 4px solid var(--petrol);
	background: var(--kalkputz);
	font-size: 0.97rem;
}

.lage--grund .posteingang {
	background: var(--leinen);
}

.posteingang--schlecht {
	border-left-color: var(--rissrot);
	color: var(--rissrot);
	font-weight: 600;
}

/* =========================================================================
   23. Bodenplatte, also der Fuss
   ========================================================================= */

.bodenplatte {
	background: var(--kalkputz);
	border-top: 1px solid var(--keder);
	padding: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem) 0 1.4rem;
}

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

.bodenplatte__marke {
	font-family: var(--anzeige);
	font-size: 1.24rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.bodenplatte__satz {
	font-size: 0.92rem;
	color: var(--graphit);
	max-width: 26rem;
}

.bodenplatte__anschrift {
	font-style: normal;
	font-size: 0.95rem;
	line-height: 1.9;
}

.bodenplatte__anschrift a {
	display: inline-block;
	min-height: 36px;
	line-height: 36px;
}

.bodenplatte__kopf {
	font-family: var(--koerper);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--graphit);
	margin-bottom: 0.7rem;
}

.bodenplatte__liste {
	margin: 0 0 0.8rem;
	padding: 0;
	list-style: none;
}

.bodenplatte__liste a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	font-size: 0.95rem;
	color: var(--russholz);
	text-decoration-color: var(--keder);
}

.bodenplatte__liste a:hover,
.bodenplatte__liste a:focus {
	color: var(--nussrot);
}

.bodenplatte__zeiten {
	font-size: 0.9rem;
	color: var(--graphit);
}

.bodenplatte__kiel {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.4rem;
	margin-top: 1.8rem;
	padding-top: 1rem;
	border-top: 1px solid var(--faden);
}

.bodenplatte__klein {
	margin: 0;
	font-size: 0.85rem;
	color: var(--graphit);
}

/* =========================================================================
   24. Merkleiste
   -------------------------------------------------------------------------
   Volle Breite unten, zwei gleichwertige Schaltflaechen nebeneinander: gleiche
   Groesse, gleiche Farbe, gleicher Kontrast, gleiches Schriftbild. Ablehnen
   kostet keinen Klick mehr als Zustimmen.
   Der zweite und letzte benannte z-index auf diesem Terrain.
   ========================================================================= */

.merkleiste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--leinen);
	border-top: 2px solid var(--nussrot);
	box-shadow: 0 -6px 18px rgba(33, 29, 25, 0.16);
}

.merkleiste__reihe {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
	gap: 1rem 1.6rem;
	align-items: center;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
}

.merkleiste__kopf {
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.merkleiste__text {
	font-size: 0.92rem;
	color: var(--graphit);
	max-height: 40vh;
	overflow-y: auto;
}

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

.merkleiste__text strong {
	color: var(--russholz);
}

.merkleiste__knoepfe {
	display: grid;
	gap: 0.6rem;
}

.merkleiste__knopf {
	width: 100%;
}

.merkleiste__mehr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	font-size: 0.9rem;
}

/* =========================================================================
   25. Fehlnaht
   ========================================================================= */

.fehlnaht__reihe {
	display: grid;
	grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
	gap: clamp(1.4rem, 1rem + 1.6vw, 2.6rem);
	align-items: start;
}

/* Die grosse Zahl steht in --graphit: 6.24 auf dem Grund. Eine dekorative
   Grossziffer in der Randfarbe waere bei 1.53 und damit unbrauchbar. */
.fehlnaht__zahl:not(.fehlnaht__wort) {
	font-family: var(--koerper);
	font-size: clamp(4rem, 3rem + 6vw, 7rem);
	font-weight: 600;
	line-height: 0.9;
	color: var(--graphit);
	margin: 0;
}

.fehlnaht__wege {
	margin: 1.2rem 0;
	padding-left: 1.2rem;
}

.fehlnaht__wege li {
	margin-bottom: 0.3rem;
}

.fehlnaht__wege a {
	display: inline-block;
	min-height: 36px;
	line-height: 36px;
}

.fehlnaht__fein {
	font-size: 0.92rem;
	color: var(--graphit);
	max-width: 44rem;
}

/* =========================================================================
   26. Aufpolstern: das Aufgehen beim Scrollen
   -------------------------------------------------------------------------
   Die Durchsichtigkeit haengt an der Klasse js, die ein Skript im Kopf setzt.
   Ohne Javascript steht der ganze Inhalt sofort da. Es gibt genau eine Stelle
   mit opacity 0 im ganzen Stil, damit kein Element ohne seine Klasse
   unsichtbar haengen bleibt.
   ========================================================================= */

.js .aufpolstern {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .aufpolstern.aufpolstern--voll {
	opacity: 1;
	transform: none;
}

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

/* =========================================================================
   27. Breiten
   ========================================================================= */

/* Zwischen 900 und 1200 px wird es in der Saumkante eng: sieben Menuepunkte,
   das Logo und die Schaltflaeche. Statt umzubrechen ruecken die Punkte
   zusammen. */
@media (max-width: 1200px) {
	.saumkante__reihe {
		gap: 1rem;
	}

	.naehgang__reihe {
		gap: 0.2rem 0.85rem;
	}

	.naehgang__reihe a {
		font-size: 0.92rem;
	}

	.saumkante__ahle {
		padding-left: 1rem;
		padding-right: 1rem;
		font-size: 0.94rem;
	}
}

@media (max-width: 1080px) {
	.schichtenschnitt {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'stapel' 'zugriff' 'bild';
	}

	.gurtgitter,
	.rahmenprobe,
	.verschleissfolge {
		grid-template-columns: minmax(0, 1fr);
	}

	.gurtgitter__bild,
	.verschleissfolge__bild {
		order: 2;
	}

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

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

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

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

	.randlage {
		position: static;
		max-width: 26rem;
	}

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

@media (max-width: 900px) {
	.oese {
		display: flex;
		order: 3;
		margin-left: 0;
	}

	.saumkante__ahle {
		order: 2;
		margin-left: auto;
	}

	.naehgang {
		order: 4;
		display: none;
		flex: 1 1 100%;
		padding-bottom: 0.9rem;
	}

	.naehgang.naehgang--offen {
		display: block;
	}

	.saumkante__reihe {
		flex-wrap: wrap;
		gap: 0.7rem 1rem;
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}

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

	.naehgang__reihe li {
		border-top: 1px solid var(--faden);
	}

	.naehgang__reihe a {
		min-height: 48px;
		border-bottom: 0;
	}

	.zuschnitt__reihe,
	.duo,
	.duo--gedreht,
	.zuspruch__reihe,
	.bogenreihe,
	.fehlnaht__reihe {
		grid-template-columns: minmax(0, 1fr);
	}

	.duo--gedreht .duo__wort,
	.duo--gedreht .duo__bild,
	.bogenreihe--gedreht .aufnahmebogen,
	.bogenreihe--gedreht .bogenreihe__wort {
		order: 0;
	}

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

	.arbeitsgitter,
	.arbeitsliste,
	.werkstattleute,
	.ablauf {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.rechtsliste__paar,
	.zeitenliste__paar,
	.lagenliste__paar {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 660px) {
	body {
		font-size: 1rem;
	}

	.abzaehlung,
	.hinweisgitter,
	.rahmenprobe__rest,
	.bodenplatte__reihe {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.merkleiste__reihe {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.7rem;
	}

	/* Auf einem Telefon darf die Leiste nicht die halbe Höhe nehmen; die drei
	   Angaben, die ohne Scrollen zu sehen sein müssen, stehen im zweiten
	   Absatz und bleiben darum vollständig im Bild. */
	.merkleiste__reihe {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}

	.merkleiste__text {
		font-size: 0.82rem;
		line-height: 1.45;
	}

	.merkleiste__text p {
		margin-bottom: 0.5em;
	}

	.merkleiste__kopf {
		margin-bottom: 0.25rem;
	}

	.merkleiste__knoepfe {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	.merkleiste__mehr {
		grid-column: 1 / -1;
	}

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

	.handbild img {
		max-width: 15rem;
	}

	.schichtenschnitt__stufe {
		grid-template-columns: 2.1rem minmax(0, 1fr);
	}

	.schichtenschnitt__rolle {
		grid-column: 2;
	}

	/* Die Tafeln werden in Stapel umgebaut. Der Kopf wird ganz genommen und
	   nicht auf ein Pixel gestaucht: gestauchte Kopfzellen bleiben in voller
	   Groesse als unsichtbare Rechtecke ueber der ersten Zeile liegen und
	   fangen dort jeden Klick. Der caption wird mit umgeschaltet, sonst
	   zerfaellt er in eine Spalte aus einzelnen Woertern. */
	.zargenrand {
		overflow-x: visible;
	}

	.lagentabelle,
	.preisliste {
		display: block;
	}

	.lagentabelle caption,
	.preisliste caption {
		display: block;
		width: auto;
	}

	.lagentabelle thead,
	.preisliste thead {
		display: none;
	}

	.lagentabelle tbody,
	.preisliste tbody,
	.lagentabelle tr,
	.preisliste tr {
		display: block;
	}

	.lagentabelle tr,
	.preisliste tr {
		padding: 0.6rem 0;
		border-bottom: 1px solid var(--keder);
	}

	.lagentabelle tbody tr:last-child,
	.preisliste tbody tr:last-child {
		border-bottom: 0;
	}

	.lagentabelle th,
	.lagentabelle td,
	.preisliste th,
	.preisliste td {
		display: block;
		padding: 0.3rem 1rem;
		border-bottom: 0;
		white-space: normal;
	}

	.lagentabelle td::before,
	.preisliste td::before {
		content: attr(data-kopf);
		display: block;
		font-size: 0.76rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--graphit);
	}

	.lagentabelle tbody th,
	.preisliste tbody th {
		font-family: var(--anzeige);
		font-size: 1.1rem;
	}
}

@media (max-width: 420px) {
	.zuschnitt__knoepfe .ahle,
	.zuspruch__knoepfe .ahle,
	.rahmenprobe__antwort .ahle {
		width: 100%;
	}

	.schnittkante__fuss {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media print {
	.saumkante,
	.merkleiste,
	.gurtband {
		display: none;
	}
}