@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800;900&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ==========================================================================
   Roehrenwerkstatt Bergland zwei — „Der Messschrieb“
   Messpapier, Bakelit, Schreibertinte. Ein Protokollbogen unter einer Kurve.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --messpapier: #E4E8C8;
  --rasterlinie: #C3CB94;
  --bakelit: #2B1D14;
  --gehaeuse: #5C4A3A;
  --tinte: #8A1F5C;
  --gluehfaden: #F2A23A;
  /* abgeleitet */
  --blatt: #F3F5E4;
  --ok: #3F5B22;
  --bakelit-linie: #4A3a2e;

  /* Schrift */
  --f-display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', sans-serif;
  --f-text: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --t-schrieb: clamp(3.2rem, 9.5vw, 8rem);
  --t-feld: clamp(2.2rem, 5.2vw, 4rem);
  --t-eintrag: clamp(1.35rem, 2.4vw, 1.75rem);
  --t-lead: clamp(1.15rem, 1.8vw, 1.35rem);
  --t-text: 1.0625rem;
  --t-klein: 0.9rem;
  --t-achse: 0.95rem;

  /* Raum */
  --rand: clamp(1rem, 4vw, 3rem);
  --abstand-feld: clamp(3rem, 8vw, 6.5rem);
  --luecke: clamp(1.25rem, 3vw, 2.5rem);
  --max: 76rem;
  --zeile: 66ch;

  /* Form */
  --taste-radius: 3px;
  --linie: 1px solid var(--rasterlinie);
  --kante: 2px solid var(--bakelit);

  --z-kopf: 20;
  --z-menue: 30;
  --z-skip: 50;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }

/* ---------- Grundschrift ---------- */
body {
  background: var(--messpapier);
  color: var(--bakelit);
  font-family: var(--f-text);
  font-size: var(--t-text);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--bakelit);
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--t-schrieb); font-weight: 900; line-height: 0.86; letter-spacing: -0.01em; text-transform: uppercase; }
h2 { font-size: var(--t-feld); font-weight: 800; line-height: 0.95; text-transform: uppercase; }
h3 { font-size: var(--t-eintrag); font-weight: 800; line-height: 1.05; letter-spacing: 0.01em; }

p { max-width: var(--zeile); }
p + p { margin-top: 1em; }
strong { font-weight: 600; }

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

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

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 38ch;
}

/* ---------- Hilfsklassen ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: var(--rand); top: 0;
  z-index: var(--z-skip);
  transform: translateY(-120%);
  background: var(--bakelit);
  color: var(--messpapier);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.15rem;
  padding: 0.6rem 1rem;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0.5rem); outline-color: var(--gluehfaden); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ---------- Kopf ---------- */
.kopf {
  position: relative;
  z-index: var(--z-kopf);
  background: var(--messpapier);
  border-bottom: var(--kante);
}
.kopf__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "marke toggle" "nav nav";
  align-items: center;
  column-gap: var(--luecke);
  padding-block: 0.75rem;
}
.marke {
  grid-area: marke;
  display: flex;
  flex-direction: column;
  color: var(--bakelit);
  text-decoration: none;
  font-family: var(--f-display);
  line-height: 1;
  min-width: 0;
}
.marke__test {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gehaeuse);
}
.marke__name {
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.marke:hover .marke__name { color: var(--tinte); }

.kopf__tel {
  grid-area: tel;
  display: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  color: var(--bakelit);
  text-decoration: none;
  white-space: nowrap;
}
.kopf__tel svg { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.3em; vertical-align: -0.05em; }
.kopf__tel:hover { color: var(--tinte); }

.nav-toggle {
  grid-area: toggle;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  background: var(--bakelit);
  color: var(--messpapier);
  border: 0;
  border-radius: var(--taste-radius);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle[aria-expanded="true"] { background: var(--tinte); }

#site-nav {
  grid-area: nav;
  display: none;
}
#site-nav[data-open="true"] { display: block; }
#site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0 0.25rem;
  display: flex;
  flex-direction: column;
}
#site-nav a {
  display: block;
  padding: 0.65rem 0;
  border-top: var(--linie);
  color: var(--bakelit);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
}
#site-nav a:hover { color: var(--tinte); }
#site-nav a[aria-current="page"] { color: var(--tinte); }

/* ---------- Abschnitte: Abstand an EINER Stelle ---------- */
main > section:not(.schrieb) { padding-block: var(--abstand-feld); }
main > section:not(.schrieb) + section { border-top: var(--linie); }

/* ---------- Feld (Protokollzeile) ---------- */
.feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--luecke);
}
.feld__kopf { min-width: 0; }
.feld__kopf h2 + p { margin-top: 0.9rem; color: var(--gehaeuse); font-size: var(--t-klein); max-width: 24ch; }
.feld__inhalt { min-width: 0; }
.feld__inhalt > * + * { margin-top: 1.5rem; }

/* ---------- Messschrieb (Hero) ---------- */
.schrieb {
  position: relative;
  isolation: isolate;
  border-bottom: var(--kante);
  overflow: hidden;
}
.schrieb__raster {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: var(--rasterlinie);
}
.schrieb__raster .dekade { stroke-width: 2; }
.schrieb__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--luecke);
  padding-top: clamp(2.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.schrieb__text h1 { max-width: 11ch; hyphens: manual; }
.schrieb__seite > * + * { margin-top: 1.25rem; }
.schrieb__seite .lead { background: var(--messpapier); box-shadow: 0 0 0 0.35rem var(--messpapier); }
.schrieb__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.schrieb__kurve {
  position: relative;
  height: clamp(150px, 22vw, 280px);
}
.schrieb__kurve svg { width: 100%; height: 100%; overflow: visible; }
.kurve { fill: none; stroke: var(--tinte); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.nulllinie { stroke: var(--gehaeuse); stroke-width: 1; stroke-dasharray: 6 5; }
.schrieb__db {
  position: absolute;
  left: 0.35rem;
  top: 36%;
  transform: translateY(-120%);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-achse);
  color: var(--gehaeuse);
}

.schrieb__achse {
  position: relative;
  height: 2.6rem;
  border-top: var(--kante);
  margin: 0;
  padding: 0;
  list-style: none;
}
.achse__wert {
  position: absolute;
  top: 0;
  left: var(--x);
  transform: translateX(-50%);
  padding-top: 0.55rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-achse);
  letter-spacing: 0.04em;
  color: var(--gehaeuse);
  white-space: nowrap;
}
.achse__wert::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 2px; height: 0.4rem;
  background: var(--bakelit);
}
.achse__wert:first-child { transform: none; margin-left: 0.4rem; }
.achse__wert:first-child::before { left: 0; }
.achse__wert:last-child { transform: translateX(-100%); margin-left: -0.4rem; }
.achse__wert:last-child::before { left: auto; right: 0; }
.achse__wert--klein { display: none; }

.schrieb__legende {
  padding-block: 0.8rem 1.1rem;
  font-size: var(--t-klein);
  color: var(--gehaeuse);
}

/* flache Variante für Unterseiten */
.schrieb--flach .schrieb__text { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.schrieb--flach h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); max-width: none; }

/* Die eine Bewegung: die Feder zieht die Kurve */
@media (prefers-reduced-motion: no-preference) {
  .schrieb__kurve svg {
    animation: feder 1.8s cubic-bezier(.45, .05, .3, 1) .25s both;
  }
  @keyframes feder {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  .knopf, a, .nav-toggle, .form__input { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.55rem 1.3rem 0.5rem;
  background: var(--bakelit);
  color: var(--messpapier);
  border: 2px solid var(--bakelit);
  border-radius: var(--taste-radius);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.knopf svg { width: 1.1rem; height: 1.1rem; flex: none; }
.knopf:hover { background: var(--tinte); border-color: var(--tinte); color: var(--blatt); }
.knopf--rahmen { background: transparent; color: var(--bakelit); }
.knopf--rahmen:hover { background: var(--bakelit); border-color: var(--bakelit); color: var(--messpapier); }
.knopf--hell { background: var(--messpapier); border-color: var(--messpapier); color: var(--bakelit); }
.knopf--hell:hover { background: var(--gluehfaden); border-color: var(--gluehfaden); color: var(--bakelit); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.link { font-weight: 600; }

/* ---------- Fließtext ---------- */
.prosa { max-width: var(--zeile); }
.prosa > * + * { margin-top: 1rem; }
.prosa h2 { margin-top: 3rem; }
.prosa h3 { margin-top: 2.2rem; }
.prosa h3 + p, .prosa h2 + p { margin-top: 0.6rem; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li + li { margin-top: 0.4rem; }
.prosa ul li::marker { color: var(--tinte); }
.prosa ol li::marker { font-family: var(--f-display); font-weight: 800; color: var(--tinte); }

/* Liste mit Lötpunkten (Checkliste) */
.punkte { list-style: none; padding: 0; max-width: var(--zeile); }
.punkte li { position: relative; padding-left: 1.8rem; }
.punkte li + li { margin-top: 0.7rem; }
.punkte li::before {
  content: "";
  position: absolute;
  left: 0.2rem; top: 0.5em;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--messpapier);
  border: 2px solid var(--tinte);
}

/* ---------- Protokolltabelle ---------- */
.tabelle-rahmen { width: 100%; }
.tabelle {
  width: 100%;
  border-top: var(--kante);
  border-bottom: var(--kante);
  text-align: left;
}
.tabelle caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 0.7rem;
  font-size: var(--t-klein);
  color: var(--gehaeuse);
}
.tabelle th, .tabelle td { padding: 0.9rem 1rem 0.9rem 0; vertical-align: top; }
.tabelle thead th {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-achse);
  letter-spacing: 0.04em;
  color: var(--gehaeuse);
  border-bottom: var(--linie);
}
.tabelle tbody th {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-eintrag);
  line-height: 1.05;
  hyphens: auto;
  overflow-wrap: break-word;
}
.tabelle tbody tr + tr > * { border-top: var(--linie); }

/* ---------- Protokollbogen (Illustration) ---------- */
.protokoll {
  background: var(--blatt);
  border: var(--kante);
  padding: 1.25rem;
  max-width: 30rem;
}
.protokoll__titel {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  padding-bottom: 0.7rem;
  border-bottom: var(--kante);
}
.protokoll__zeile {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.55rem;
  border-bottom: var(--linie);
  font-size: 0.95rem;
}
.protokoll__zeile dt { font-family: var(--f-display); font-weight: 600; color: var(--gehaeuse); letter-spacing: 0.03em; }
.protokoll__zeile dd { margin: 0; }
.protokoll__kurve { margin-top: 1rem; color: var(--rasterlinie); }
.protokoll__kurve svg { width: 100%; height: auto; }
.protokoll__kurve .kurve { stroke-width: 2.5; }
.protokoll figcaption, .protokoll__fuss { margin-top: 0.6rem; font-size: 0.85rem; color: var(--gehaeuse); }

/* ---------- Split (Text + Objekt) ---------- */
.zweiteilig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--luecke);
  align-items: start;
}

/* ---------- Signalweg (Ablauf) ---------- */
.signalweg-flaeche {
  background: var(--bakelit);
  color: var(--messpapier);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.signalweg-flaeche h3, .signalweg-flaeche h2 { color: var(--messpapier); }
.signalweg {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: stufe;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.signalweg__stufe {
  counter-increment: stufe;
  position: relative;
  padding: 0 0 1.75rem 2.6rem;
}
.signalweg__stufe:last-child { padding-bottom: 0; }
/* Leiterbahn */
.signalweg__stufe::after {
  content: "";
  position: absolute;
  left: 0.72rem; top: 1.6rem; bottom: 0;
  width: 2px;
  background: var(--gluehfaden);
}
.signalweg__stufe:last-child::after { display: none; }
/* Lötpunkt mit Schrittnummer */
.signalweg__stufe::before {
  content: counter(stufe);
  position: absolute;
  left: 0; top: 0;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--gluehfaden);
  color: var(--bakelit);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.6rem;
  text-align: center;
}
.signalweg__stufe h3 { font-size: 1.5rem; }
.signalweg__stufe p { margin-top: 0.4rem; font-size: 0.98rem; color: var(--blatt); }
.signalweg-flaeche a { color: var(--gluehfaden); }
.signalweg-flaeche :focus-visible { outline-color: var(--gluehfaden); }

/* ---------- Versandetikett (Callout) ---------- */
.etikett {
  position: relative;
  background: var(--blatt);
  border: var(--kante);
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  max-width: 26rem;
}
.etikett__kopf {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 0.6rem;
  border-bottom: 2px dashed var(--bakelit);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
}
.etikett__kopf svg { width: 2rem; height: 2rem; flex: none; }
.etikett address {
  font-style: normal;
  margin-top: 0.9rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.etikett__vermerk {
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: var(--linie);
  font-size: var(--t-klein);
}

/* ---------- Hinweis ---------- */
.hinweis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 0.9rem 1rem;
  border: 2px solid var(--tinte);
  background: var(--blatt);
  max-width: var(--zeile);
}
.hinweis svg { width: 1.4rem; height: 1.4rem; color: var(--tinte); margin-top: 0.15rem; }
.hinweis p { font-size: 0.98rem; }

/* ---------- Kacheln ---------- */
.kacheln {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: var(--kante);
}
.kachel {
  padding: 1.25rem 0;
  border-bottom: var(--linie);
}
.kachel h3 { margin-bottom: 0.5rem; }
.kachel p { font-size: 0.98rem; }
.kachel a { font-weight: 600; }

/* ---------- Fragen (FAQ) ---------- */
.fragen { border-top: var(--kante); max-width: 52rem; }
.frage { border-bottom: var(--linie); }
.frage summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 44px;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-eintrag);
  line-height: 1.1;
  overflow-wrap: break-word;
  hyphens: auto;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "";
  width: 1rem; height: 1rem;
  border-right: 3px solid var(--tinte);
  border-bottom: 3px solid var(--tinte);
  transform: rotate(45deg) translate(-25%, -25%);
}
.frage[open] summary::after { transform: rotate(-135deg) translate(-25%, -25%); }
.frage summary:hover { color: var(--tinte); }
.frage__antwort { padding-bottom: 1.25rem; }

/* ---------- Werkstattfakten ---------- */
.fakten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--kante);
}
.fakten > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.2rem;
  padding-block: 0.9rem;
  border-bottom: var(--linie);
}
.fakten dt {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-achse);
  letter-spacing: 0.04em;
  color: var(--gehaeuse);
}
.fakten dd {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.fakten dd a { color: var(--bakelit); text-decoration-color: var(--tinte); }
.fakten dd a:hover { color: var(--tinte); }
.fakten address { font-style: normal; }
.fakten dd a[href^="mailto:"] { font-size: 0.72em; }

/* ---------- Aufruf-Leiste (CTA) ---------- */
.aufruf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding-block: 1.5rem;
  border-top: var(--kante);
  border-bottom: var(--kante);
}
.aufruf p {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  max-width: 22ch;
}

/* ---------- Karte (iframe) ---------- */
.karte {
  border: var(--kante);
  background: var(--blatt);
  aspect-ratio: 4 / 3;
  width: 100%;
}
.karte iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.6); }

/* ---------- Formular ---------- */
.form { display: grid; gap: 1.25rem; max-width: 42rem; }
.form__field { display: grid; gap: 0.35rem; }
.form__field label {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
}
.form__hilfe { font-size: 0.9rem; color: var(--gehaeuse); }
.form__input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  background: var(--blatt);
  color: var(--bakelit);
  border: 2px solid var(--bakelit);
  border-radius: var(--taste-radius);
  font-size: 1rem;
  line-height: 1.4;
}
textarea.form__input { min-height: 10rem; resize: vertical; }
select.form__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bakelit) 50%), linear-gradient(135deg, var(--bakelit) 50%, transparent 50%); background-position: calc(100% - 1.3rem) 55%, calc(100% - 0.9rem) 55%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.form__input::placeholder { color: var(--gehaeuse); opacity: 1; }
.form__input:hover { border-color: var(--tinte); }
.form__input:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
.form__input[aria-invalid="true"] { border-color: var(--tinte); border-width: 3px; background: #F6E9EE; }
.form__error { min-height: 0; font-size: 0.92rem; font-weight: 600; color: var(--tinte); }
.form__error:empty { display: none; }
.form__check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: 0.95rem; }
.form__check input { width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; accent-color: var(--tinte); }
.form__status { font-weight: 600; max-width: 42rem; }
.form__status:empty { display: none; }
.form__status[data-state] { padding: 0.8rem 1rem; border: 2px solid currentColor; background: var(--blatt); }
.form__status[data-state="pending"] { color: var(--gehaeuse); }
.form__status[data-state="success"] { color: var(--ok); }
.form__status[data-state="error"] { color: var(--tinte); }

/* ---------- Rechtstext ---------- */
.rechtstext { max-width: var(--zeile); }
.rechtstext h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: 2.75rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { margin-top: 1.75rem; }
.rechtstext p, .rechtstext ul, .rechtstext address { margin-top: 0.75rem; }
.rechtstext address { font-style: normal; }
.rechtstext ul { padding-left: 1.3rem; }
.luecke {
  display: inline;
  padding: 0 0.3em;
  background: var(--blatt);
  border: 1px dashed var(--tinte);
  color: var(--tinte);
  font-weight: 600;
}

/* ---------- Fuß ---------- */
.fuss {
  background: var(--bakelit);
  color: var(--messpapier);
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
}
.fuss__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.fuss__name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.fuss p, .fuss address { font-style: normal; font-size: var(--t-klein); color: var(--blatt); }
.fuss a { color: var(--messpapier); }
.fuss a:hover { color: var(--gluehfaden); }
.fuss :focus-visible { outline-color: var(--gluehfaden); }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.fuss__recht {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bakelit-linie);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-size: var(--t-klein);
}

/* ---------- Styleguide-eigene Hilfen ---------- */
.muster { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; list-style: none; padding: 0; }
.muster__farbe { border: var(--kante); }
.muster__flaeche { height: 5rem; background: var(--c); border-bottom: var(--kante); }
.muster__farbe p { padding: 0.5rem 0.6rem; font-size: 0.85rem; line-height: 1.35; }
.muster__farbe strong { display: block; font-family: var(--f-display); font-size: 1.15rem; font-weight: 800; }
.skala > * + * { margin-top: 1.25rem; padding-top: 1.25rem; border-top: var(--linie); }
.probe-h1 { max-width: none; font-family: var(--f-display); font-size: var(--t-schrieb); font-weight: 900; line-height: 0.86; letter-spacing: -0.01em; text-transform: uppercase; overflow-wrap: break-word; hyphens: auto; }
.reihe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.probe-bakelit { background: var(--bakelit); padding: 1.25rem; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* ab 600 px */
@media (min-width: 37.5em) {
  .fakten > div { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--luecke); }
  .aufruf { grid-template-columns: minmax(0, 1fr) auto; }
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* unter 600 px: Tabelle als Blöcke */
@media (max-width: 37.49em) {
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle tr, .tabelle th, .tabelle td { display: block; }
  .tabelle tbody tr { padding-block: 0.9rem; }
  .tabelle tbody tr + tr { border-top: var(--linie); }
  .tabelle tbody tr + tr > * { border-top: 0; }
  .tabelle th, .tabelle td { padding: 0.2rem 0; }
  .tabelle td[data-spalte]::before {
    content: attr(data-spalte);
    display: block;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: var(--t-achse);
    letter-spacing: 0.04em;
    color: var(--gehaeuse);
    margin-top: 0.4rem;
  }
}

/* ab 900 px: Navigation offen, Protokollraster */
@media (min-width: 56.25em) {
  .kopf__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marke nav tel";
    padding-block: 1rem;
  }
  .nav-toggle { display: none; }
  .kopf__tel { display: inline-block; }
  #site-nav, #site-nav[data-open="false"] { display: block; }
  #site-nav ul { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.1rem; padding: 0; justify-content: center; }
  #site-nav a { border-top: 0; padding: 0.35rem 0; font-size: 1.25rem; border-bottom: 3px solid transparent; }
  #site-nav a:hover { border-bottom-color: var(--rasterlinie); }
  #site-nav a[aria-current="page"] { border-bottom-color: var(--tinte); }

  .achse__wert--klein { display: block; }
  .feld { grid-template-columns: minmax(12rem, 3fr) 9fr; }
  .schrieb__text { grid-template-columns: 7fr 5fr; align-items: end; }
  .zweiteilig { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .signalweg { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.25rem; }
  .signalweg__stufe { padding: 2.6rem 0 0 0; }
  .signalweg__stufe::after { left: 1.6rem; right: -1.25rem; top: 0.72rem; bottom: auto; width: auto; height: 2px; }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--luecke); }
  .fakten > div { grid-template-columns: minmax(0, 1fr); }
  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ab 1200 px */
@media (min-width: 75em) {
  .schrieb__text { grid-template-columns: 8fr 4fr; }
  .fuss__raster { grid-template-columns: 2fr 1fr 1fr; }
}

/* Druck: ein Protokoll soll sich drucken lassen */
@media print {
  .kopf, .nav-toggle, .fuss__recht, .schrieb__knoepfe { display: none; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* === index: Achsenpositionen ohne style-Attribut === */
.achse__wert--20hz { --x: 0%; }
.achse__wert--50hz { --x: 13.26%; }
.achse__wert--100hz { --x: 23.3%; }
.achse__wert--500hz { --x: 46.6%; }
.achse__wert--1khz { --x: 56.63%; }
.achse__wert--5khz { --x: 79.93%; }
.achse__wert--10khz { --x: 89.97%; }
.achse__wert--20khz { --x: 100%; }

/* === messplatz: Pegelachse === */
.schrieb--pegel .schrieb__kurve,
.schrieb--pegel .schrieb__achse { margin-left: 3.75rem; }
.schrieb__pegel {
  position: absolute;
  top: 0; bottom: 0;
  left: -3.75rem;
  width: 3.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: var(--kante);
}
.pegel__wert {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  padding-right: 0.6rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-achse);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--gehaeuse);
  white-space: nowrap;
}
.pegel__wert::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 0.4rem; height: 2px;
  background: var(--bakelit);
}
.pegel__wert--plus3 { top: 16%; }
.pegel__wert--null { top: 36%; color: var(--bakelit); }
.pegel__wert--minus3 { top: 56%; }
.pegel__wert--minus6 { top: 76%; }

/* === messplatz: Signalweg mit drei Stufen === */
@media (min-width: 56.25em) {
  .signalweg--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* === messplatz: großer Protokollbogen === */
.protokoll--gross { max-width: 44rem; padding: clamp(1.25rem, 3vw, 2rem); }
.protokoll--gross .protokoll__titel { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.protokoll--gross .protokoll__zeile { font-size: 1rem; }
.protokoll__achse {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--gehaeuse);
}
@media (min-width: 37.5em) {
  .protokoll--gross .protokoll__zeile { grid-template-columns: 9rem minmax(0, 1fr); }
}
@media (min-width: 56.25em) {
  .zweiteilig--bogen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* === leistungen: Aufruf-Leiste mit Überschrift === */
.aufruf h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1;
  max-width: 22ch;
}
.aufruf .aufruf__einleitung {
  margin-top: 0.75rem;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: var(--t-text);
  line-height: 1.65;
  text-transform: none;
  max-width: 48ch;
}

/* === einsenden: großes Versandetikett === */
.etikett--gross { max-width: 44rem; padding: clamp(1.25rem, 3vw, 2rem); }
.etikett--gross .etikett__kopf { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
.etikett--gross .etikett__kopf svg { width: 2.5rem; height: 2.5rem; }
.etikett--gross address { font-size: clamp(1.75rem, 6vw, 3.25rem); line-height: 1; }
.etikett--gross .etikett__vermerk { font-size: 1rem; }

/* === kontakt: Feldkopf mit h1 === */
.feld__kopf h1 {
  font-size: var(--t-feld);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0;
}
.feld__kopf h1 + p { margin-top: 0.9rem; color: var(--gehaeuse); font-size: var(--t-klein); max-width: 24ch; }

/* === kontakt: Auswahlgruppe im Formular === */
.form__gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.form__gruppe legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
}
.form__gruppe .form__check + .form__check { margin-top: 0.5rem; }

/* === kontakt: Karte mit Einwilligung === */
.karte__einwilligung {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1rem;
  height: 100%;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}
.karte__einwilligung p { font-size: 0.98rem; }
.karte iframe[hidden], .karte__einwilligung[hidden] { display: none; }
.form__field .form__check label {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
}