/* Landing page of Betriebsverstand, direction "Werkhalle": flat areas, edges, big numerals, warning stripes.
   Colours, fonts and the radius come from brand.css (generated from brand/tokens.json).
   Mobile first. No inline styles anywhere: the Content-Security-Policy forbids them.
   Text and ground only in pairs checked in tokens.json: white, yellow and Nebel on Anthrazit, black on yellow,
   on Hallenboden and on white, Stahl dunkel on light grounds, Fehler on its light red. Yellow never carries
   text on a light ground. Only three font files are used: Barlow Condensed 800, Barlow 400 and 600. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--hallenboden); color: var(--schwarz); font: 400 1.0625rem/1.55 var(--schrift-text); overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, fieldset, legend, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration-thickness: .09em; text-underline-offset: .18em; }
b { font-weight: 600; }

h1, h2, h3, .knopf, .ziffer b { font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; }
h1, h2 { line-height: .98; letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 11.5vw, 5rem); }
h2 { font-size: clamp(2.25rem, 9vw, 3.5rem); }
h3 { font-size: 1.5rem; line-height: 1.05; letter-spacing: .01em; }

/* two-tone focus ring: the black line shows on light and yellow grounds, the yellow one on dark */
:focus-visible, .chip input:focus-visible + label { outline: 3px solid var(--schwarz); outline-offset: 2px; box-shadow: 0 0 0 8px var(--signalgelb); }
.sprung { position: absolute; left: .5rem; top: -5rem; z-index: 5; background: var(--signalgelb); color: var(--schwarz); padding: .6rem 1rem; font-weight: 600; }
.sprung:focus { top: .5rem; }

/* ── frame ─────────────────────────────────────────────────────────── */
.breite { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 1.25rem; }
.breite.schmal { max-width: 46rem; }
.band { padding: 3rem 0; }
.band.weiss { background: var(--weiss); }
.band.gelb { background: var(--signalgelb); }
/* dark ground with a fine grid, like a hall floor */
.dunkel { background-color: var(--anthrazit); color: var(--weiss); background-size: 3rem 3rem;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); }
/* warning stripes: only as a narrow edge between sections, never behind text */
.streifen { height: .75rem; background: repeating-linear-gradient(135deg, var(--signalgelb) 0 .75rem, var(--schwarz) .75rem 1.5rem); }
.dach, .leitsatz, .ziffer { font: 600 .875rem/1.25 var(--schrift-text); letter-spacing: .1em; text-transform: uppercase; }
.dach { color: var(--stahl-dunkel); margin-bottom: .6rem; }
.dunkel .dach, .dunkel .leitsatz { color: var(--nebel); }
.einleitung { font-size: 1.25rem; line-height: 1.35; font-weight: 600; margin-top: .8rem; max-width: 40rem; text-wrap: balance; }
.klein { font-size: .95rem; }
p.klein { color: var(--stahl-dunkel); }
.schluss { margin-top: 2rem; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.5rem; padding: .8rem 1.4rem; font-size: 1.4rem; line-height: 1.05; letter-spacing: .03em; text-align: center; text-decoration: none; border: 0; border-radius: var(--radius); cursor: pointer; }
.knopf.gelb { background: var(--signalgelb); color: var(--schwarz); }
.knopf.gelb:hover { background: var(--weiss); }
.knopf.schwarz { background: var(--schwarz); color: var(--weiss); }
.knopf.schwarz:hover { background: var(--anthrazit); }
.knopf.breit { width: 100%; }

/* ── head ──────────────────────────────────────────────────────────── */
.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.marke { flex: none; display: block; }
.marke img { width: 10.5rem; }
.kopflink { font-weight: 600; white-space: nowrap; }
.buehne { padding-bottom: 2.75rem; }
.buehne .kopfzeile { padding-left: 0; padding-right: 0; }
.buehne .leitsatz { margin-bottom: .8rem; }
.auftakt { padding-top: 1.1rem; }
.auftakt h1 mark { background: var(--signalgelb); color: var(--schwarz); padding: 0 .14em; white-space: nowrap; }
.vorspann { font-size: 1.125rem; line-height: 1.4; margin-top: 1rem; max-width: 34rem; }
.auftakt .knopf { margin-top: 1.4rem; width: 100%; padding-left: .9rem; padding-right: .9rem; font-size: 1.25rem; }
.auftakt .knopf span { display: none; }
.schilder { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.schilder li, .schild { font: 600 .8rem/1 var(--schrift-text); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; padding: .45rem .6rem; border: 2px solid var(--nebel); }
.schild { color: var(--signalgelb); border-color: var(--signalgelb); }

/* the board: where time is lost, like a shift board */
.tafel { margin-top: 2.5rem; background: var(--schwarz); border: 2px solid var(--stahl-dunkel); padding: 1.1rem 1.1rem 1.2rem; }
.tafelkopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .85rem; border-bottom: 2px solid var(--stahl-dunkel); }
.tafel h2 { font-size: 1.65rem; }
.tafel ol { counter-reset: zeile; }
.tafel li { counter-increment: zeile; display: grid; grid-template-columns: 2.75rem 1fr; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--stahl-dunkel); font-weight: 600; line-height: 1.3; }
.tafel li::before { content: counter(zeile, decimal-leading-zero); font: 800 1.6rem/1 var(--schrift-titel); color: var(--stahl); }
.tafel p { margin-top: .9rem; color: var(--nebel); }

/* ── the check in three numerals ───────────────────────────────────── */
.zahlen { display: grid; gap: .75rem; margin-top: 1.75rem; }
.zahlen li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: center; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem; }
.ziffer { color: var(--stahl-dunkel); }
.ziffer b { display: block; font-size: 4.25rem; line-height: .85; letter-spacing: 0; color: var(--schwarz); }
.ziffer b::after { content: ""; display: block; width: 2.5rem; height: .4rem; margin: .5rem 0 .45rem; background: var(--signalgelb); }

/* ── four services ─────────────────────────────────────────────────── */
.leistungen { display: grid; gap: 2rem; margin-top: 2rem; }
.leistungen li { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 1rem; row-gap: .5rem; align-items: start; }
.zeichen { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; background: var(--anthrazit); color: var(--weiss); border-radius: var(--radius); }
.leistungen h3 { min-height: 3.25rem; display: flex; align-items: center; }
.leistungen p { grid-column: 1 / -1; }
.beispiel { border-left: .35rem solid var(--signalgelb); padding-left: .75rem; }

/* ── stations: a hall plan from above ──────────────────────────────── */
.stationen { counter-reset: station; margin-top: 2rem; display: grid; }
.stationen li { counter-increment: station; position: relative; min-height: 5rem; padding: 0 0 1.9rem 4.5rem; }
.stationen li::before { content: counter(station); position: absolute; left: 0; top: 0; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; font: 800 2rem/1 var(--schrift-titel); border: 2px solid var(--weiss); background: var(--anthrazit); }
.stationen li.erste::before { background: var(--signalgelb); border-color: var(--signalgelb); color: var(--schwarz); }
.stationen li:not(:last-child) { background: linear-gradient(var(--stahl), var(--stahl)) calc(1.625rem - 1px) 3.25rem / 2px calc(100% - 3.25rem - .6rem) no-repeat; }
.stationen li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.625rem - 6px); bottom: .3rem; border: 6px solid transparent; border-top: 8px solid var(--stahl); border-bottom: 0; }
.stationen h3 { padding-top: .1rem; }
.stationen p { margin-top: .3rem; color: var(--weiss); }

/* ── the form, on the yellow of the videos' last frame ─────────────── */
.anfrage { display: grid; gap: 1.5rem; }
.anfragekopf h1, .anfragekopf h2 { font-size: clamp(2.75rem, 12vw, 4.5rem); }
.anfragekopf p:last-child { margin-top: .8rem; max-width: 30rem; }
.formular { display: grid; gap: 1.4rem; background: var(--weiss); border-radius: var(--radius); padding: 1.25rem; }
.feld { display: grid; gap: .45rem; }
label, legend { font-weight: 600; }
legend { margin-bottom: .45rem; }
.hinweis { font-weight: 400; color: var(--stahl-dunkel); }
label.klein { font-weight: 400; }
.feld > label.klein { margin-top: .5rem; }
input[type=text], input[type=email], input[type=tel], select, textarea { display: block; width: 100%; min-height: 3rem; margin: 0; padding: .65rem .75rem; font: inherit; color: var(--schwarz); background-color: var(--weiss); border: 2px solid var(--schwarz); border-radius: var(--radius); }
textarea { resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-repeat: no-repeat; background-size: .4rem .4rem; background-position: calc(100% - 1.25rem) 50%, calc(100% - .85rem) 50%;
  background-image: linear-gradient(45deg, transparent 50%, var(--schwarz) 50%), linear-gradient(135deg, var(--schwarz) 50%, transparent 50%); }
.paar { display: grid; gap: .75rem; }
.paar > div { display: grid; gap: .3rem; align-content: start; }

/* choices as plates to tap; the real input lies invisible on top, so keyboard and screen reader still work */
.wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip label { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .7rem; font-weight: 400; background: var(--weiss); border: 2px solid var(--schwarz); border-radius: var(--radius); }
.chip input:checked + label { background: var(--schwarz); color: var(--weiss); }
.mehr .chip label::before { content: ""; flex: none; width: .9rem; height: .9rem; border: 2px solid currentColor; }
.mehr .chip input:checked + label::before { background: var(--signalgelb); border-color: var(--signalgelb); }
.haken { display: grid; grid-template-columns: 1.75rem 1fr; gap: .75rem; align-items: start; }
.haken input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin: .1rem 0 0; background: var(--weiss); border: 2px solid var(--schwarz); border-radius: var(--radius); cursor: pointer; }
.haken input:checked { background: var(--schwarz); }
.haken input:checked::before { content: ""; width: .5rem; height: .9rem; border: solid var(--signalgelb); border-width: 0 .2rem .2rem 0; transform: translateY(-.1rem) rotate(45deg); }
.haken label { font-weight: 400; }
.nachsatz { font-size: .95rem; color: var(--stahl-dunkel); margin-top: -.5rem; }
/* the trap for machines: off screen, out of the tab order, people never see it */
.leer { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fehlerbox { display: grid; gap: .4rem; padding: .9rem 1rem; font-weight: 600; background: var(--fehler-flaeche); color: var(--fehler); border-left: .4rem solid var(--fehler); }
.fehlerbox ul { list-style: disc; padding-left: 1.2rem; font-weight: 400; }
.fehler { justify-self: start; padding: .3rem .6rem; font-size: .95rem; font-weight: 600; background: var(--fehler-flaeche); color: var(--fehler); }
[aria-invalid="true"] { border-color: var(--fehler); }

/* ── objections ────────────────────────────────────────────────────── */
.einwaende { display: grid; gap: 1rem; margin-top: 1.75rem; }
.einwaende li { display: grid; gap: .7rem; align-content: start; background: var(--weiss); border: 1px solid var(--linie); border-top: .4rem solid var(--schwarz); border-radius: var(--radius); padding: 1.25rem; }
.einwaende h3 { font-size: 1.65rem; }

/* ── foot ──────────────────────────────────────────────────────────── */
.fuss { padding: 2.25rem 0 2.75rem; color: var(--nebel); font-size: .95rem; }
.fuss .breite { display: grid; gap: .6rem; }
.fuss .leitsatz { color: var(--weiss); margin-bottom: .4rem; }
.fuss p { max-width: 38rem; }
.fuss nav { display: flex; gap: 1.75rem; margin-top: .5rem; }
.fuss nav a { color: var(--weiss); font-weight: 600; padding: .6rem 0; }

/* ── thank-you page, legal pages, placeholder ──────────────────────── */
.schritte { counter-reset: schritt; display: grid; gap: .75rem; margin: 1.25rem 0 1.5rem; }
.schritte li { counter-increment: schritt; position: relative; min-height: 4.25rem; padding: 1rem 1rem 1rem 4.25rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.schritte li::before { content: counter(schritt); position: absolute; left: 1rem; top: 1rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; font: 800 1.4rem/1 var(--schrift-titel); background: var(--schwarz); color: var(--weiss); }
.schritte b { display: block; }
.text { display: grid; gap: .9rem; }
.text h1 { margin-bottom: .5rem; }
.text h2 { font: 600 1.25rem/1.3 var(--schrift-text); text-transform: none; letter-spacing: 0; margin-top: 1.1rem; }
.text ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: .3rem; }
.text .kurz { list-style: none; padding: 1rem 1.1rem; gap: .5rem; background: var(--weiss); border-left: .4rem solid var(--signalgelb); font-weight: 600; }
.baustelle { min-height: 100vh; }
.baustelle main { display: grid; gap: 1.5rem; justify-items: start; padding-top: 20vh; padding-bottom: 4rem; }
.baustelle h1 { font-size: clamp(2.25rem, 9vw, 4rem); max-width: 14em; }
.baustelle p { color: var(--nebel); }

/* ── wider screens ─────────────────────────────────────────────────── */
@media (min-width: 34rem) {
  .paar { grid-template-columns: 1fr 1fr; }
  .auftakt .knopf { width: auto; padding-left: 1.4rem; padding-right: 1.4rem; font-size: 1.4rem; }
  .auftakt .knopf span { display: inline; }
  .vorspann { font-size: 1.2rem; }
  .formular { padding: 1.75rem; }
}
@media (min-width: 48rem) {
  .band { padding: 4.5rem 0; }
  .marke img { width: 14.25rem; }
  .zahlen { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .zahlen li { display: block; padding: 1.5rem; }
  .ziffer { margin-bottom: .9rem; }
  .ziffer b { font-size: 6.5rem; }
  .leistungen { grid-template-columns: 1fr 1fr; gap: 2.75rem 3rem; }
  .leistungen p { grid-column: 2; }
  .zeichen { grid-row: span 3; }
  .einwaende { grid-template-columns: repeat(3, 1fr); }
  .buehne .kopfzeile { padding-top: 1.5rem; }
}
@media (min-width: 62rem) {
  .buehne { padding-bottom: 4.5rem; }
  .auftakt { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: end; padding-top: 3.5rem; }
  .tafel { margin-top: 0; }
  .anfrage { grid-template-columns: .8fr 1.2fr; gap: 3.5rem; align-items: start; }
  .anfragekopf { position: sticky; top: 2rem; }
  .formular { padding: 2.25rem; }
  .stationen { grid-template-columns: repeat(4, 1fr); }
  .stationen li { padding: 4.4rem 1.75rem 0 0; }
  .stationen li:not(:last-child) { background: linear-gradient(var(--stahl), var(--stahl)) 3.25rem calc(1.625rem - 1px) / calc(100% - 3.25rem - .7rem) 2px no-repeat; }
  .stationen li:not(:last-child)::after { left: auto; bottom: auto; right: .35rem; top: calc(1.625rem - 6px); border: 6px solid transparent; border-left: 8px solid var(--stahl); border-right: 0; }
}