@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Kalam:wght@400;700&display=swap");

/* ==========================================================================
   Lastenrad Werkstatt Plagwitz — Explosionszeichnung auf der Werkstatt-Tafel
   Tafelgrün ist die Grundfarbe, Kreide die Linie, Gelb die Handlung.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --tafelgruen: #1F4636;
  --kreideweiss: #F3F4EF;
  --kreidestaub: #E7EAE2;
  --gelbe-kreide: #F2C230;
  --schiefer: #4A6358;
  --pruefrot: #A8321F;

  /* Fläche „Blatt“ (Standard) */
  --ground: var(--kreidestaub);
  --ink: var(--tafelgruen);
  --ink-soft: var(--schiefer);
  --line: rgba(74, 99, 88, .45);
  --focus: var(--tafelgruen);
  --field: var(--kreideweiss);

  /* Schrift */
  --font-grot: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;

  --fs-0: .875rem;
  --fs-1: 1.0625rem;
  --fs-2: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
  --fs-3: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  --fs-4: clamp(2rem, 1.25rem + 3.2vw, 3.75rem);
  --fs-mega: clamp(2.5rem, 1rem + 7.2vw, 7rem);
  --fs-hand: clamp(1.2rem, 1.1rem + .4vw, 1.45rem);

  /* Raum */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --section: clamp(3.5rem, 2.5rem + 5vw, 7.5rem);
  --wrap: 78rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 64ch;

  /* Kanten: nur Bedienelemente sind gerundet */
  --radius-control: 4px;
  --edge: 2px;
  --rule: 4px;

  --ease: cubic-bezier(.22, .8, .26, 1);
}

.tafel {
  --ground: var(--tafelgruen);
  --ink: var(--kreideweiss);
  --ink-soft: rgba(243, 244, 239, .8);
  --line: rgba(243, 244, 239, .32);
  --focus: var(--gelbe-kreide);
  background-color: var(--ground);
  color: var(--ink);
}

.blatt {
  --ground: var(--kreidestaub);
  --ink: var(--tafelgruen);
  --ink-soft: var(--schiefer);
  --line: rgba(74, 99, 88, .45);
  --focus: var(--tafelgruen);
  background-color: var(--ground);
  color: var(--ink);
}

/* ---------- 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,
ol {
  padding: 0;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---------- Grundtypografie ---------- */
body {
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--font-grot);
  font-size: var(--fs-1);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.62;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-grot);
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-mega);
  font-stretch: 62%;
  font-weight: 820;
  line-height: .92;
  letter-spacing: -.01em;
  word-spacing: .08em;
}

h2 {
  font-size: var(--fs-4);
  font-stretch: 68%;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.005em;
}

h3 {
  font-size: var(--fs-3);
  font-stretch: 80%;
  font-weight: 720;
  line-height: 1.12;
}

h4 {
  font-size: var(--fs-2);
  font-stretch: 90%;
  font-weight: 700;
  line-height: 1.25;
}

p,
li,
dd {
  max-width: var(--measure);
}

.lead {
  font-size: var(--fs-2);
  line-height: 1.5;
  max-width: 56ch;
}

strong {
  font-weight: 650;
}

small,
.small {
  font-size: var(--fs-0);
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-color: currentColor;
  transition: text-decoration-thickness .15s ease, color .15s ease;
}

a:hover {
  text-decoration-thickness: 4px;
}

.tafel a:not(.btn) {
  text-decoration-color: var(--gelbe-kreide);
}

/* ---------- Fokus ---------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Hilfsklassen ---------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 50;
  padding: var(--s-3) var(--s-4);
  background: var(--gelbe-kreide);
  color: var(--tafelgruen);
  font-weight: 700;
  text-decoration: none;
  border: var(--edge) solid var(--tafelgruen);
  border-radius: var(--radius-control);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

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

/* ---------- Abschnitte: Abstände an genau dieser Stelle ---------- */
main > section {
  padding-block: var(--pad-top, var(--section)) var(--section);
}

.tafel + .tafel {
  --pad-top: var(--s-4);
}

.blatt + .blatt > .wrap {
  border-top: var(--edge) solid var(--line);
  padding-top: var(--section);
}

.blatt + .blatt {
  --pad-top: 0px;
}

/* Abschnittskopf links, Inhalt rechts */
.section-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.section-head > p {
  color: var(--ink-soft);
}

.layout {
  display: grid;
  gap: var(--s-6);
}

/* Rasterzellen dürfen schmaler werden als ihr Inhalt (Tabellen scrollen in sich) */
.layout > *,
.split > *,
.section-head > * {
  min-width: 0;
}

.flow > * + * {
  margin-top: var(--s-4);
}

.flow > h3 {
  margin-top: var(--s-6);
}

/* ---------- Knöpfe ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: .7rem 1.25rem .72rem;
  border: var(--edge) solid var(--tafelgruen);
  border-radius: var(--radius-control);
  background: var(--gelbe-kreide);
  color: var(--tafelgruen);
  font-family: var(--font-grot);
  font-size: 1.0625rem;
  font-stretch: 88%;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 0 0 var(--tafelgruen);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.tafel .btn {
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, .28);
}

.btn:hover {
  background: var(--kreideweiss);
}

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 0 var(--tafelgruen);
}

.btn svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: currentColor;
  box-shadow: none;
}

.tafel .btn--quiet {
  box-shadow: none;
}

.btn--quiet:hover {
  background: var(--ink);
  color: var(--ground);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* ---------- Kopf und Navigation ---------- */
.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.75rem;
  padding-block: var(--s-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}

.brand svg {
  width: 3.4rem;
  height: auto;
  flex: none;
}

.brand__name {
  display: grid;
  font-stretch: 66%;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: .98;
}

.brand__name span:last-child {
  color: var(--gelbe-kreide);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  min-width: 44px;
  padding: .5rem .9rem;
  background: transparent;
  border: var(--edge) solid var(--ink);
  border-radius: var(--radius-control);
  color: var(--ink);
  font-weight: 700;
  font-stretch: 88%;
  cursor: pointer;
}

.nav-toggle__icon {
  position: relative;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  transition: box-shadow .15s ease, transform .15s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  box-shadow: none;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: rotate(90deg);
}

#site-nav {
  display: none;
}

#site-nav[data-open="true"] {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--tafelgruen);
  border-top: 1px solid var(--line);
  border-bottom: var(--rule) solid var(--gelbe-kreide);
  padding: var(--s-4) var(--gutter) var(--s-6);
}

.nav-list {
  list-style: none;
  display: grid;
}

.nav-list a {
  display: block;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.6rem;
  font-stretch: 70%;
  font-weight: 760;
  text-decoration: none;
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--gelbe-kreide);
}

.nav-call {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  color: var(--gelbe-kreide);
  font-weight: 750;
  font-stretch: 85%;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}

.nav-call svg {
  width: 1.1em;
  height: 1.1em;
}

.tafel a.nav-call:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---------- Hero ---------- */
.hero {
  --pad-top: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.hero__head {
  display: grid;
  gap: var(--s-5);
  align-items: end;
}

.hero__head .lead {
  color: var(--ink-soft);
}

.hero__head .lead strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Explosionszeichnung ---------- */
.explode {
  margin-top: var(--s-6);
  margin-inline: calc(var(--gutter) * -.6);
}

.explode__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.explode .ln {
  fill: none;
  stroke: var(--kreideweiss);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.explode .ln--rohr {
  stroke-width: 5;
}

.explode .ln--steuer {
  stroke-width: 8;
}

.explode .ln--reifen {
  stroke-width: 6;
}

.explode .ln--duenn,
.explode .ln--speiche {
  stroke-width: 1.6;
  opacity: .75;
}

.explode .ln--fill {
  fill: var(--tafelgruen);
}

.explode .ln--montage {
  stroke-width: 1.8;
  stroke-dasharray: 2 9;
  opacity: .7;
}

.explode .ln--leader {
  stroke: var(--gelbe-kreide);
  stroke-width: 1.8;
}

.explode__badge circle {
  fill: var(--tafelgruen);
  stroke: var(--gelbe-kreide);
  stroke-width: 3;
}

.explode__badge text {
  fill: var(--gelbe-kreide);
  font-family: var(--font-grot);
  font-size: 24px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}

.explode figcaption {
  margin-top: var(--s-3);
  padding-inline: calc(var(--gutter) * .6);
  font-size: var(--fs-0);
  color: var(--ink-soft);
}

.explode__label {
  fill: var(--kreideweiss);
  font-family: var(--font-hand);
  font-size: 27px;
  font-weight: 400;
  display: none;
}

/* Teile: gezeichnet in Einbaulage, verschoben in die Explosion */
.xp {
  transform: translate(var(--dx, 0px), var(--dy, 0px));
}

.xp--hinterrad { --dx: -80px; }
.xp--vorderrad { --dx: 80px; }
.xp--kiste     { --dy: -185px; }
.xp--bank      { --dy: -305px; }
.xp--lenker    { --dx: -10px; --dy: -130px; }
.xp--sattel    { --dy: -110px; }
.xp--akku      { --dy: 120px; }
.xp--motor     { --dx: -25px; --dy: 95px; }

/* Verleih: das Rad steht zusammengebaut */
.explode[data-state="assembled"] .xp {
  transform: none;
}

.explode[data-state="assembled"] .explode__notes {
  display: none;
}

/* ---------- Stückliste ---------- */
.parts {
  list-style: none;
  border-top: var(--edge) solid var(--line);
}

.parts__row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-5);
  border-bottom: var(--edge) solid var(--line);
  max-width: none;
}

.parts__pos {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid var(--gelbe-kreide);
  border-radius: 50%;
  color: var(--gelbe-kreide);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
}

.parts__part {
  font-family: var(--font-hand);
  font-size: var(--fs-hand);
  line-height: 1.25;
  color: var(--ink-soft);
}

.parts__service {
  font-size: var(--fs-3);
}

.parts__text {
  color: var(--ink-soft);
}

.parts__text a {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* Auf dem Blatt: gelber Knopf statt gelbem Ring, keine Kreide-Schrift */
.blatt .parts__pos {
  border-color: var(--tafelgruen);
  background: var(--gelbe-kreide);
  color: var(--tafelgruen);
}

.blatt .parts__part {
  font-family: var(--font-grot);
  font-size: var(--fs-0);
  font-weight: 650;
  line-height: 1.45;
}

/* ---------- Zwei Anlässe ---------- */
.split {
  display: grid;
  gap: var(--s-6);
}

.split__half {
  display: grid;
  align-content: start;
  gap: var(--s-4);
}

.split__half + .split__half {
  border-top: var(--rule) solid var(--ink);
  padding-top: var(--s-6);
}

/* ---------- Listen ---------- */
.dash-list {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.dash-list li {
  position: relative;
  padding-left: 1.75rem;
}

.dash-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 1.05rem;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-4deg);
}

.chalk-list {
  list-style: none;
  display: grid;
  gap: var(--s-2);
  font-family: var(--font-hand);
  font-size: var(--fs-hand);
  line-height: 1.3;
}

.chalk-list li {
  padding-bottom: var(--s-2);
  border-bottom: 1px dashed var(--line);
}

.chalk-board {
  padding: var(--s-5);
  border: var(--edge) solid var(--line);
}

.chalk-board h3 {
  margin-bottom: var(--s-4);
}

.plain-list {
  padding-left: 1.25rem;
  display: grid;
  gap: var(--s-2);
}

/* ---------- Arbeitsschritte (echte Reihenfolge) ---------- */
.steps {
  list-style: none;
  counter-reset: schritt;
  display: grid;
  gap: var(--s-6) var(--s-5);
}

.steps > li {
  counter-increment: schritt;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding-top: var(--s-4);
  border-top: 6px solid var(--ink);
  max-width: none;
}

.steps > li::before {
  content: counter(schritt);
  font-size: 2.75rem;
  font-stretch: 62%;
  font-weight: 820;
  line-height: 1;
}

.steps h3 {
  font-size: 1.45rem;
}

.steps p {
  color: var(--ink-soft);
}

/* ---------- Anhänger (Kachel) ---------- */
.tiles {
  display: grid;
  gap: var(--s-6) var(--s-5);
}

.tile {
  --cut: 1.1rem;
  position: relative;
  padding: var(--edge);
  background: var(--ink);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}

.tile__body {
  height: 100%;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-5) var(--s-5);
  background: var(--kreideweiss);
  color: var(--tafelgruen);
  clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% 100%, 0 100%, 0 calc(var(--cut) - 1px));
}

.tile__body::before {
  content: "";
  position: absolute;
  top: .9rem;
  left: 50%;
  width: .9rem;
  height: .9rem;
  margin-left: -.45rem;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: inset 0 0 0 var(--edge) var(--ink);
}

.tile h3 {
  color: var(--tafelgruen);
}

.tile p {
  color: var(--schiefer);
}

.tile__meta {
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--schiefer);
}

/* ---------- Hinweis: kleine Tafel ---------- */
.note {
  --ground: var(--tafelgruen);
  --ink: var(--kreideweiss);
  --focus: var(--gelbe-kreide);
  position: relative;
  padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 6px);
  background: var(--tafelgruen);
  color: var(--kreideweiss);
  font-family: var(--font-hand);
  font-size: var(--fs-hand);
  line-height: 1.3;
  max-width: 44rem;
}

.note::before {
  content: "";
  position: absolute;
  left: var(--s-3);
  top: var(--s-4);
  bottom: var(--s-4);
  width: 4px;
  border-radius: 2px;
  background: var(--gelbe-kreide);
}

.note a {
  text-decoration-color: var(--gelbe-kreide);
}

/* ---------- Handlungsband ---------- */
.cta {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-6) var(--s-5);
  background: var(--tafelgruen);
  color: var(--kreideweiss);
  --ink: var(--kreideweiss);
  --focus: var(--gelbe-kreide);
}

.cta__line {
  font-size: var(--fs-4);
  font-stretch: 66%;
  font-weight: 800;
  line-height: 1;
  color: var(--kreideweiss);
  max-width: 20ch;
}

.cta .btn {
  justify-self: start;
}

/* ---------- Kontaktfakten ---------- */
.address-big {
  font-size: var(--fs-4);
  font-stretch: 64%;
  font-weight: 820;
  line-height: .98;
}

.address-big span {
  display: block;
  font-size: var(--fs-3);
  font-stretch: 80%;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: var(--s-2);
}

.facts {
  display: grid;
  gap: var(--s-4);
}

.facts__item {
  display: grid;
  gap: var(--s-1);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--ink-soft);
}

.facts dd {
  font-size: var(--fs-3);
  font-stretch: 80%;
  font-weight: 720;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.facts dd a {
  text-decoration-thickness: 2px;
}

/* ---------- Karte ---------- */
.map {
  border: var(--edge) solid var(--ink);
  background: var(--tafelgruen);
}

.map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

.map figcaption {
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-0);
  color: var(--kreideweiss);
}

/* ---------- Tabelle ---------- */
.table-wrap {
  overflow-x: auto;
  border-top: var(--edge) solid var(--ink);
}

.table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-1);
}

.table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: var(--s-3);
  font-size: var(--fs-0);
  color: var(--ink-soft);
}

.table th,
.table td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.table thead th {
  font-size: var(--fs-0);
  font-weight: 650;
  color: var(--ink-soft);
  border-bottom: var(--edge) solid var(--ink);
}

.table tbody th {
  font-stretch: 80%;
  font-weight: 720;
  font-size: 1.15rem;
}

/* ---------- FAQ ---------- */
.faq {
  border-top: var(--edge) solid var(--ink);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  position: relative;
  display: block;
  padding: var(--s-4) 3rem var(--s-4) 0;
  font-size: 1.3rem;
  font-stretch: 82%;
  font-weight: 720;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: .6rem;
  top: 50%;
  width: 1.1rem;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .15s ease;
}

.faq__item summary::after {
  transform: rotate(90deg);
}

.faq__item[open] summary::after {
  transform: rotate(0deg);
}

.faq__answer {
  padding-bottom: var(--s-5);
  color: var(--ink-soft);
}

/* ---------- Formular ---------- */
.form {
  display: grid;
  gap: var(--s-5);
  max-width: 40rem;
}

.form__row {
  display: grid;
  gap: var(--s-5);
}

.form__field {
  display: grid;
  gap: var(--s-2);
}

.form__field label {
  font-weight: 650;
  font-size: 1rem;
}

.form__hint {
  font-size: var(--fs-0);
  color: var(--ink-soft);
}

.form__input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .85rem;
  background: var(--field);
  color: var(--tafelgruen);
  border: var(--edge) solid var(--schiefer);
  border-radius: var(--radius-control);
  line-height: 1.4;
  transition: border-color .15s ease;
}

textarea.form__input {
  min-height: 9rem;
  resize: vertical;
}

select.form__input {
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tafelgruen) 50%),
    linear-gradient(135deg, var(--tafelgruen) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: .35rem .35rem;
  background-repeat: no-repeat;
}

.form__input:hover {
  border-color: var(--tafelgruen);
}

.form__input:focus-visible {
  border-color: var(--tafelgruen);
  outline: 3px solid var(--tafelgruen);
  outline-offset: 2px;
}

.form__input[aria-invalid="true"] {
  border-color: var(--pruefrot);
  box-shadow: inset 4px 0 0 var(--pruefrot);
}

.form__error {
  color: var(--pruefrot);
  font-size: var(--fs-0);
  font-weight: 650;
}

.form__error:empty {
  display: none;
}

.form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-0);
}

.form__check input {
  width: 1.35rem;
  height: 1.35rem;
  margin: .1rem 0 0;
  accent-color: var(--tafelgruen);
}

.form__status {
  padding: var(--s-3) var(--s-4);
  border-left: 6px solid transparent;
  font-weight: 600;
}

.form__status:empty {
  display: none;
}

.form__status[data-state="pending"] {
  border-left-color: var(--schiefer);
  background: var(--kreideweiss);
  color: var(--schiefer);
}

.form__status[data-state="success"] {
  border-left-color: var(--gelbe-kreide);
  background: var(--tafelgruen);
  color: var(--kreideweiss);
}

.form__status[data-state="error"] {
  border-left-color: var(--pruefrot);
  background: var(--kreideweiss);
  color: var(--pruefrot);
}

/* ---------- Fließtext (Impressum, Datenschutz, lange Texte) ---------- */
.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--s-4);
}

.prose h2 {
  font-size: var(--fs-3);
  font-stretch: 76%;
  margin-top: var(--s-7);
}

.prose h3 {
  font-size: 1.3rem;
  font-stretch: 86%;
  margin-top: var(--s-6);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: var(--s-2);
}

.prose address {
  font-style: normal;
}

.gap {
  padding: 0 .3em;
  background: var(--gelbe-kreide);
  color: var(--tafelgruen);
  font-weight: 650;
}

/* ---------- Fuß mit Schriftfeld ---------- */
.site-footer {
  padding-block: var(--s-7) var(--s-6);
  border-top: var(--rule) solid var(--gelbe-kreide);
}

.site-footer__grid {
  display: grid;
  gap: var(--s-6);
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}

.footer-nav a {
  display: inline-block;
  padding-block: var(--s-2);
  font-weight: 600;
}

.titleblock {
  display: grid;
  grid-template-columns: 1fr;
  border: var(--edge) solid var(--kreideweiss);
  font-size: var(--fs-0);
}

.titleblock__cell {
  display: grid;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
}

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

.titleblock dt {
  font-size: .78rem;
  color: var(--ink-soft);
}

.titleblock dd {
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.titleblock__name dd {
  font-size: 1.15rem;
  font-stretch: 75%;
  font-weight: 780;
}

.site-footer__small {
  margin-top: var(--s-6);
  font-size: var(--fs-0);
  color: var(--ink-soft);
}

/* ---------- Styleguide-Hilfen ---------- */
.swatches {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-4);
}

.swatch {
  display: grid;
  gap: var(--s-2);
  max-width: none;
}

.swatch__chip {
  height: 5.5rem;
  border: var(--edge) solid var(--tafelgruen);
}

.swatch__chip--tafelgruen { background: var(--tafelgruen); }
.swatch__chip--kreideweiss { background: var(--kreideweiss); }
.swatch__chip--kreidestaub { background: var(--kreidestaub); }
.swatch__chip--gelbe-kreide { background: var(--gelbe-kreide); }
.swatch__chip--schiefer { background: var(--schiefer); }
.swatch__chip--pruefrot { background: var(--pruefrot); }

.swatch code,
.specimen code {
  font-family: var(--font-grot);
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--ink-soft);
}

.specimen {
  display: grid;
  gap: var(--s-5);
}

.specimen > div {
  display: grid;
  gap: var(--s-1);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.specimen__hand {
  font-family: var(--font-hand);
  font-size: var(--fs-hand);
}

code {
  font-family: var(--font-grot);
  font-size: .92em;
  font-weight: 650;
}

.h1-sample {
  display: block;
  font-size: var(--fs-mega);
  font-stretch: 62%;
  font-weight: 820;
  line-height: .92;
  overflow-wrap: break-word;
  hyphens: auto;
}

.h1-sample strong {
  font-weight: inherit;
}

.sg-h2 {
  font-size: var(--fs-4);
  font-stretch: 68%;
  font-weight: 780;
  line-height: 1;
}

.sg-contact {
  margin-top: var(--s-7);
}

.sg-block + .sg-block {
  margin-top: var(--s-7);
}

.sg-block > h3 {
  margin-bottom: var(--s-4);
}

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

/* ab 600 px: Zeichnung beschriftet, Zweispalter */
@media (min-width: 600px) {
  .explode {
    margin-inline: 0;
  }

  .explode figcaption {
    padding-inline: 0;
  }

  .explode__label {
    display: inline;
  }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .split__half {
    padding-right: var(--s-6);
  }

  .split__half + .split__half {
    border-top: 0;
    border-left: var(--rule) solid var(--ink);
    padding: 0 0 0 var(--s-6);
  }

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

  .tiles {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .form__row {
    grid-template-columns: 1fr 1fr;
  }

  .facts--row {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4) var(--s-6);
  }

  .titleblock {
    grid-template-columns: 1fr 1fr;
  }

  .titleblock__cell {
    border-right: 1px solid var(--line);
  }

  /* Feld 1 ist die Benennung über die volle Breite, danach stehen die rechten Felder auf ungeraden Plätzen */
  .titleblock__cell:nth-child(2n + 1) {
    border-right: 0;
  }

  .titleblock__name {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .titleblock__cell:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .cta {
    grid-template-columns: 1fr auto;
    padding: var(--s-7) var(--s-6);
  }

  .cta .btn {
    justify-self: end;
  }
}

/* ab 900 px: 12-Spalten-Raster, Navigation ausgeklappt */
@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  #site-nav,
  #site-nav[data-open="true"] {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    position: static;
    padding: 0;
    background: none;
    border: 0;
  }

  .nav-list {
    display: flex;
    gap: var(--s-5);
  }

  .nav-list a {
    padding: var(--s-2) 0;
    border-bottom: 0;
    font-size: 1.1rem;
    font-stretch: 85%;
    font-weight: 650;
  }

  .nav-list a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--gelbe-kreide);
    text-decoration-thickness: 3px;
    text-underline-offset: .35em;
  }

  .nav-call {
    margin-top: 0;
    font-size: 1.15rem;
    padding: var(--s-2) var(--s-3);
    border: var(--edge) solid var(--gelbe-kreide);
    border-radius: var(--radius-control);
  }

  .tafel a.nav-call:hover {
    background: var(--gelbe-kreide);
    color: var(--tafelgruen);
    text-decoration: none;
  }

  .brand__name {
    font-size: 1.45rem;
  }

  .section-head,
  .layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5);
  }

  .section-head > * {
    grid-column: 1 / span 7;
  }

  .layout > .layout__side {
    grid-column: 1 / span 5;
  }

  .layout > .layout__main {
    grid-column: 6 / -1;
  }

  .layout > .layout__main--wide {
    grid-column: 7 / -1;
  }

  .layout__side h2 {
    position: sticky;
    top: var(--s-5);
  }

  .parts__row {
    grid-template-columns: 4rem minmax(0, 3fr) minmax(0, 5fr);
    grid-template-areas:
      "pos part service"
      "pos part text";
    column-gap: var(--s-5);
    align-items: start;
  }

  .parts__pos {
    grid-area: pos;
    grid-row: auto;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.4rem;
  }

  .parts__part {
    grid-area: part;
    padding-top: .35rem;
  }

  .parts__service {
    grid-area: service;
  }

  .parts__text {
    grid-area: text;
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .site-footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5);
    align-items: end;
  }

  .site-footer__nav {
    grid-column: 1 / span 5;
  }

  .titleblock {
    grid-column: 7 / -1;
  }
}

/* ab 1200 px: Hero-Kopf nebeneinander */
@media (min-width: 1200px) {
  .hero__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5);
  }

  .hero__head h1 {
    grid-column: 1 / span 7;
  }

  .hero__head .hero__aside {
    grid-column: 8 / -1;
    padding-bottom: .6rem;
  }

  .explode {
    margin-top: var(--s-5);
  }

  .parts__row {
    grid-template-columns: 4.5rem minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
    grid-template-areas: "pos part service text";
  }

  .parts__service {
    padding-top: .15rem;
  }
}

/* Telefon: Positionsnummern der Zeichnung größer, Beschriftung steht in der Stückliste */
@media (max-width: 599px) {
  .brand svg {
    width: 2.6rem;
  }

  .brand__name {
    font-size: 1.15rem;
  }

  .explode__badge {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.7);
  }

  .explode .ln--leader {
    display: none;
  }
}

/* ---------- Der eine Moment: das Rad geht auseinander ---------- */
@media (prefers-reduced-motion: no-preference) {
  .explode--animate .xp {
    animation: auseinander 1.3s var(--ease) var(--t, .5s) both;
  }

  .xp--hinterrad,
  .xp--vorderrad { --t: .45s; }
  .xp--motor,
  .xp--akku      { --t: .6s; }
  .xp--kiste     { --t: .75s; }
  .xp--sattel,
  .xp--lenker    { --t: .85s; }
  .xp--bank      { --t: 1s; }

  .explode--animate .explode__notes {
    animation: kreide-auf .6s ease-out 2.1s both;
  }

  html:focus-within {
    scroll-behavior: smooth;
  }
}

@keyframes auseinander {
  from {
    transform: translate(0, 0);
  }
}

@keyframes kreide-auf {
  from {
    opacity: 0;
  }
}

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

/* ---------- Druck ---------- */
@media print {
  .nav-toggle,
  #site-nav,
  .skip-link,
  .explode {
    display: none !important;
  }

  .tafel,
  .blatt {
    background: #fff;
    color: #000;
  }
}

/* === leistungen: tafelstreifen (Kopf mit verkleinerter Zeichnung rechts) === */
.strip {
  display: grid;
  gap: var(--s-5);
  align-items: end;
}

.strip__text {
  display: grid;
  gap: var(--s-4);
}

.strip__text .lead {
  color: var(--ink-soft);
}

.strip .explode {
  margin-top: 0;
}

/* Verkleinert wären die Kreide-Beschriftungen unlesbar: Die Teilenamen stehen in .pos-links */
.strip .explode__label {
  display: none;
}

.strip .explode__badge {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.7);
}

@media (min-width: 900px) {
  .strip {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5);
  }

  .strip__text {
    grid-column: 1 / span 7;
    padding-bottom: .6rem;
  }

  .strip .explode {
    grid-column: 8 / -1;
  }
}

/* === leistungen: positionsverweise (die vier Nummern führen zu den Abschnitten) === */
.pos-links {
  list-style: none;
  display: grid;
  margin-top: var(--s-6);
  border-top: var(--edge) solid var(--line);
}

.pos-links li {
  max-width: none;
  border-bottom: var(--edge) solid var(--line);
}

.pos-links a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--s-4);
  align-items: center;
  padding-block: var(--s-4);
  color: var(--ink);
  text-decoration: none;
}

.pos-links__num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid var(--gelbe-kreide);
  border-radius: 50%;
  color: var(--gelbe-kreide);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
}

.pos-links__part {
  font-family: var(--font-hand);
  font-size: var(--fs-hand);
  line-height: 1.25;
  color: var(--ink-soft);
}

.pos-links__service {
  font-size: 1.3rem;
  font-stretch: 80%;
  font-weight: 720;
  line-height: 1.15;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gelbe-kreide);
  text-underline-offset: .22em;
  transition: text-decoration-thickness .15s ease;
}

.pos-links a:hover .pos-links__service {
  text-decoration-thickness: 4px;
}

@media (min-width: 600px) {
  .pos-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-6);
  }
}

@media (min-width: 1200px) {
  .pos-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--s-5);
  }
}

/* === leistungen: positionsnummer vor der überschrift === */
.pos-mark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--s-4);
  border: 3px solid var(--gelbe-kreide);
  border-radius: 50%;
  color: var(--gelbe-kreide);
  font-size: 1.4rem;
  font-stretch: 100%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.blatt .pos-mark {
  border-color: var(--tafelgruen);
  background: var(--gelbe-kreide);
  color: var(--tafelgruen);
}

/* === verleih: zeichnung zusammengebaut, rad steht auf dem boden === */
.explode .ln--boden {
  stroke-width: 2.4;
  opacity: .6;
}

/* === impressum/datenschutz: fliesstext über mehrere abschnitte === */
.prose > :first-child {
  margin-top: 0;
}