/* Werkstatthandbuch für den Tag nach dem Unfall. Mobile first, Breakpoints 600 / 900 / 1200. */

/* ---------- Grundlage ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-4);
  scrollbar-color: var(--c-tusche-weich) var(--c-papier);
  background: var(--c-papier);
}

body {
  font-family: var(--f-text);
  font-size: var(--fs-text);
  line-height: 1.55;
  color: var(--c-tusche);
  background: var(--c-papier);
  caret-color: var(--c-teal);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

::selection { background: var(--c-teal); color: var(--c-auf-teal); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--c-teal); }

:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

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

.sprung {
  position: absolute; left: var(--rand); top: -4rem; z-index: 50;
  background: var(--c-tusche); color: var(--c-papier); padding: .6rem 1rem; border-radius: var(--radius);
}
.sprung:focus { top: .75rem; }

/* Normschrift: Nummern, Beschriftungen, Maße */
.norm,
.kapitel__nr, .leistung__nr, .arbeitsschritt__nr, .schritte__nr, .teileliste__nr,
.abb__unterschrift, .register__nr, .register__titel, .daten th, .positionsliste th,
.schriftfeld dt, .schriftfeld__titel, .masskette__jahr, .masskette__mass, .anruf__schritt, .kopf__ort, .kopf__vorschau,
.marke, .positionsliste td:first-child a, .verweis, .abschluss, .zeichnung text {
  font-family: var(--f-norm);
  font-weight: 400;
  font-style: oblique 15deg;   /* Normschrift nach ISO 3098, Form B geneigt */
  letter-spacing: .02em;
}

/* Unbelegt: gestrichelt wie eine verdeckte Kante */
.offen {
  text-decoration: underline dashed var(--c-teal) 1.5px;
  text-underline-offset: .24em;
  text-decoration-skip-ink: none;
}
.offen-rahmen { border: 1.5px dashed var(--c-teal); border-radius: var(--radius); }

.symbol { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex: none; }

/* ---------- Laufkopf ---------- */

.kopf {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  padding: .9rem var(--rand) .8rem;
  border-bottom: var(--l-breit) solid var(--c-tusche);
}
.kopf__marke img { width: auto; height: 1.85rem; }
.kopf__ort { display: none; color: var(--c-grau); font-size: var(--fs-norm); }
.kopf__vorschau {
  grid-column: 1 / -1; grid-row: 2;
  font-size: .8125rem; color: var(--c-grau);
}
.kopf__anruf {
  grid-column: 3;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border: 1.5px solid var(--c-teal); border-radius: 999px;
  color: var(--c-teal); font-weight: 650; text-decoration: none; font-size: .9375rem;
  transition: background-color .2s var(--ease-aus), color .2s var(--ease-aus);
}
.kopf__anruf:hover { background: var(--c-teal); color: var(--c-auf-teal); }

/* ---------- Griffregister ---------- */

.register {
  position: fixed; right: 0; top: 50%; z-index: 30;
  transform: translateY(-50%);
}
.register ol { list-style: none; padding: 0; display: grid; gap: 3px; }
.register a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  width: var(--register); min-height: 3.25rem; margin-left: auto;
  background: var(--c-tusche); color: var(--c-papier);
  border-radius: 6px 0 0 6px; text-decoration: none;
  transition: width .25s var(--ease-aus), background-color .2s var(--ease-aus);
}
.register a:hover { background: var(--c-tusche-weich); }
.register a[aria-current="true"] { width: calc(var(--register) + .5rem); background: var(--c-teal); }
.register__nr { font-size: 1.15rem; line-height: 1; }
.register__titel { display: none; }
body.auf-teal .register a[aria-current="true"] { background: var(--c-papier); color: var(--c-teal-tief); box-shadow: inset 0 0 0 2px var(--c-teal-tief); }

/* ---------- Kapitel ---------- */

.kapitel {
  padding: var(--s-6) calc(var(--rand) + var(--register)) var(--s-6) var(--rand);
}
.kapitel > * { max-width: var(--maxbreite); margin-inline: auto; }
.kapitel + .kapitel { border-top: var(--l-breit) solid var(--c-tusche); }

h1 {
  font-size: var(--fs-h1);
  font-weight: 830;
  font-style: italic;
  font-stretch: 118%;
  line-height: .95;
  letter-spacing: -.025em;
  max-width: 11ch;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  font-style: italic;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 20ch;
  margin-bottom: var(--s-5);
}
.kapitel > h2 { margin-inline: auto; max-width: var(--maxbreite); }
.kapitel > h2 { padding-right: max(0px, calc(100% - 20ch)); }

.kapitel__nr {
  display: inline-block;
  color: var(--c-teal);
  font-size: 1.12em;
  margin-right: .18em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 750;
  font-stretch: 106%;
  line-height: 1.2;
}

/* ---------- Abbildungen ---------- */

.abb { position: relative; min-width: 0; }

/* Grid-Kinder dürfen schmaler werden als ihr Inhalt (sonst drückt die Positionsliste die Seite auf) */
.unfall, .gutachten, .ablauf, .person, .kontakt { grid-template-columns: minmax(0, 1fr); }
.unfall > *, .gutachten > *, .ablauf > *, .person > *, .kontakt > * { min-width: 0; }
.abb__unterschrift {
  margin-top: var(--s-2);
  font-size: var(--fs-norm);
  line-height: 1.45;
  color: var(--c-tusche-weich);
  max-width: 62ch;
}
.abb__nr { color: var(--c-teal); margin-right: .35em; }

/* ---------- Kapitel 1: Unfall ---------- */

.kapitel--unfall { padding-top: var(--s-4); }

.unfall {
  display: grid;
  grid-template-areas: "titel" "abb" "schritte" "anruf" "lead" "liste";
  gap: var(--s-3);
}
.unfall__text { display: contents; }
.unfall h1 { grid-area: titel; }
.unfall__lead { grid-area: lead; font-size: var(--fs-lead); line-height: 1.45; max-width: 34ch; }
.schritte { grid-area: schritte; }
.unfall .anruf { grid-area: anruf; }
.abb--zeichnung { grid-area: abb; }
.teileliste-block { grid-area: liste; }

.schritte { list-style: none; padding: 0; display: grid; gap: .65rem; }
.schritte li { display: grid; grid-template-columns: 2.1rem 1fr; align-items: center; gap: .7rem; }
.schritte__nr {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border: 1.5px solid var(--c-teal); border-radius: 50%; color: var(--c-teal); font-size: 1.05rem;
}

.anruf {
  display: grid; gap: .35rem;
  padding: var(--s-2) var(--s-3) 1.1rem;
  background: var(--c-teal); color: var(--c-auf-teal);
  border-radius: var(--radius); text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(3, 85, 105, .7);
  transition: background-color .2s var(--ease-aus), transform .2s var(--ease-aus);
}
.anruf:hover { background: var(--c-teal-tief); transform: translateY(-1px); }
.anruf:focus-visible { outline-color: var(--c-tusche); }
.anruf__schritt { font-size: var(--fs-norm); color: var(--c-auf-teal); }
.anruf__nummer { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 800; font-style: italic; font-stretch: 110%; line-height: 1.1; }
.anruf .offen { text-decoration-color: rgba(255, 255, 255, .75); }

/* Zeichnung: Linienarten nach ISO 128 */
.zeichnung-rahmen { overflow: hidden; }
.zeichnung { width: 100%; height: auto; overflow: visible; }
.zeichnung path, .zeichnung circle, .zeichnung rect {
  fill: none; stroke: var(--c-tusche);
  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
}
.zeichnung .k-breit { stroke-width: 1.75; }
.zeichnung .k-schmal { stroke-width: .9; }
.zeichnung .k-boden { stroke: var(--c-grau); }
.zeichnung .k-mitte { stroke: var(--c-grau); stroke-width: .9; stroke-dasharray: 18 4 2 4; }
.zeichnung .k-phantom { stroke: var(--c-grau); stroke-width: .9; stroke-dasharray: 16 4 2 4 2 4; }
.zeichnung .k-montage { stroke: var(--c-teal); stroke-width: .9; stroke-dasharray: 10 4 2 4; opacity: .75; }
.zeichnung .k-hinweis { stroke: var(--c-teal); stroke-width: 1.2; }
.zeichnung .punkt { fill: var(--c-teal); stroke: none; }
.zeichnung .kreis { fill: var(--c-papier); stroke: var(--c-teal); stroke-width: 1.5; }
.zeichnung text { font-size: 21px; fill: var(--c-teal); text-anchor: middle; }
.zeichnung .flaeche { fill: transparent; stroke: none; }
.zeichnung .schaden { fill: url(#schraffur); stroke: none; }
.zeichnung .schraffur-linie { stroke: var(--c-teal); stroke-width: 1.3; vector-effect: none; }

.teil { cursor: pointer; }
.teil__koerper { transition: transform .35s var(--ease-aus); }
.teil .flaeche { transition: fill .2s var(--ease-aus); }
.teil.aktiv .teil__koerper { transform: translateY(-7px); }
.teil.aktiv .flaeche { fill: var(--c-teal-hauch); }
.teil.aktiv .k-breit { stroke: var(--c-teal); }
.position.aktiv .kreis { fill: var(--c-teal); }
.position.aktiv text { fill: var(--c-auf-teal); }
.position .kreis, .position text { transition: fill .2s var(--ease-aus); }

.teileliste {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  border-top: var(--l-schmal) solid var(--c-tusche);
}
.teileliste button {
  width: 100%; display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .55rem .4rem; min-height: 2.75rem;
  background: none; border: 0; border-bottom: var(--l-schmal) solid var(--c-linie);
  font-size: .9375rem; line-height: 1.25; cursor: pointer;
  transition: background-color .2s var(--ease-aus);
}
.teileliste__nr {
  flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  border: 1.5px solid var(--c-teal); border-radius: 50%; color: var(--c-teal); font-size: .95rem;
  transition: background-color .2s var(--ease-aus), color .2s var(--ease-aus);
}
.teileliste button:hover, .teileliste button[aria-pressed="true"] { background: var(--c-teal-hauch); }
.teileliste__weiter { margin-top: .75rem; font-size: .9375rem; }
.teileliste__weiter a { color: var(--c-teal-tief); text-decoration-color: var(--c-teal); }
.teileliste button[aria-pressed="true"] .teileliste__nr,
.teileliste button.aktiv .teileliste__nr { background: var(--c-teal); color: var(--c-auf-teal); }

/* Technische Daten */
.daten {
  margin-top: var(--s-6);
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.daten caption {
  text-align: left; font-weight: 800; font-style: italic; font-stretch: 112%;
  font-size: var(--fs-h3); padding-bottom: var(--s-2);
  border-bottom: var(--l-breit) solid var(--c-tusche);
}
.daten tr { border-bottom: var(--l-schmal) solid var(--c-linie); }
.daten th, .daten td { text-align: left; vertical-align: baseline; padding: .7rem 0; }
.daten th { color: var(--c-grau); font-size: var(--fs-norm); width: 40%; padding-right: var(--s-2); }

/* ---------- Kapitel 2: Gutachten ---------- */

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

.raster { position: relative; aspect-ratio: var(--seitenverhaeltnis); }
.raster img, .raster canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.raster canvas { color: var(--c-tusche); }
.raster img { filter: grayscale(1) contrast(1.05); }
.raster.gerastert img { visibility: hidden; }
.abb--platzhalter .raster { outline: 1.5px dashed var(--c-teal); outline-offset: 6px; }

.marke {
  position: absolute; left: var(--x); top: var(--y);
  width: 2.3rem; height: 2.3rem; translate: -50% -50%;
  display: grid; place-items: center;
  font-family: var(--f-norm); font-size: 1.1rem; text-decoration: none;
  color: var(--c-teal); background: var(--c-papier);
  border: 1.5px solid var(--c-teal); border-radius: 50%;
  box-shadow: 0 4px 10px -4px rgba(30, 34, 40, .45);
  transition: background-color .2s var(--ease-aus), color .2s var(--ease-aus);
}
.marke:hover { background: var(--c-teal); color: var(--c-auf-teal); }

.leistungen { display: grid; gap: 0; align-content: start; }
.leistung { padding-block: var(--s-3) var(--s-4); border-top: var(--l-schmal) solid var(--c-tusche); }
.leistung h3 { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .55rem; }
.leistung__nr { color: var(--c-teal); font-weight: 400; font-size: .95em; }
.leistung__fall { font-style: italic; font-weight: 600; margin-bottom: .35rem; }
.leistung p { max-width: 60ch; }
.leistung p:not(.leistung__fall) { color: var(--c-tusche-weich); }
.leistung:first-child h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); font-style: italic; font-stretch: 112%; font-weight: 800; }

.verweis { color: var(--c-teal-tief); text-decoration-color: var(--c-teal); }
.hinweis { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); }
.hinweis__titel { font-weight: 750; margin-bottom: .25rem; }

/* ---------- Kapitel 3: Ablauf ---------- */

.ablauf { display: grid; gap: var(--s-5); }
.ablauf h2 { margin-bottom: var(--s-4); }

.arbeitsschritte { list-style: none; padding: 0; display: grid; gap: var(--s-3); counter-reset: none; }
.arbeitsschritt {
  display: grid; grid-template-columns: 3.2rem 1fr; column-gap: var(--s-2);
  transition: color .35s var(--ease-aus);
}
.arbeitsschritt__nr {
  grid-row: span 2; align-self: start;
  width: 3.2rem; height: 3.2rem; display: grid; place-items: center;
  border: 1.5px solid var(--c-teal); border-radius: 50%;
  color: var(--c-teal); font-size: 1.05rem;
  transition: background-color .3s var(--ease-aus), color .3s var(--ease-aus), border-style .3s;
}
.arbeitsschritt h3 { align-self: end; }
.arbeitsschritt p { color: var(--c-tusche-weich); max-width: 46ch; }

/* Zustände, nur wenn das Scrollen den Ablauf steuert */
/* Zustände über Farbe statt Deckkraft: Nebentext #5B646D bleibt bei 5,4:1 auf Papier */
.ablauf--gesteuert .arbeitsschritt h3 { color: var(--c-grau); }
.ablauf--gesteuert .arbeitsschritt p { color: var(--c-grau); }
.ablauf--gesteuert .arbeitsschritt .arbeitsschritt__nr { border-color: var(--c-linie); color: var(--c-grau); }
.ablauf--gesteuert .arbeitsschritt.angekuendigt .arbeitsschritt__nr { border-style: dashed; border-color: var(--c-teal); color: var(--c-teal); }
.ablauf--gesteuert .arbeitsschritt.erledigt h3 { color: var(--c-tusche-weich); }
.ablauf--gesteuert .arbeitsschritt.erledigt .arbeitsschritt__nr { border-color: var(--c-teal); color: var(--c-teal); }
.ablauf--gesteuert .arbeitsschritt.aktiv h3 { color: var(--c-tusche); }
.ablauf--gesteuert .arbeitsschritt.aktiv p { color: var(--c-tusche-weich); }
.ablauf--gesteuert .arbeitsschritt.aktiv .arbeitsschritt__nr { background: var(--c-teal); color: var(--c-auf-teal); }

.liste-rahmen { overflow-x: auto; border-top: var(--l-breit) solid var(--c-tusche); border-bottom: var(--l-breit) solid var(--c-tusche); }
.positionsliste {
  width: 100%; min-width: 34rem; border-collapse: collapse;
  font-size: .9375rem; line-height: 1.35; font-variant-numeric: tabular-nums;
}
.positionsliste th {
  text-align: left; font-size: .875rem; color: var(--c-grau);
  padding: .7rem .6rem .55rem; border-bottom: var(--l-schmal) solid var(--c-tusche);
}
.positionsliste td { padding: .75rem .6rem; border-bottom: var(--l-schmal) solid var(--c-linie); vertical-align: top; }
.positionsliste th:first-child, .positionsliste td:first-child { width: 3.2rem; padding-left: 0; }
.positionsliste td:first-child a {
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border: 1.5px solid var(--c-teal); border-radius: 50%;
  color: var(--c-teal); text-decoration: none; font-family: var(--f-norm);
  transition: background-color .2s var(--ease-aus), color .2s var(--ease-aus);
}
.positionsliste td:first-child a:hover,
.positionsliste tr.aktiv td:first-child a { background: var(--c-teal); color: var(--c-auf-teal); }
.positionsliste tfoot td { border-bottom: 0; padding-block: 1rem; }
.positionsliste tfoot td:first-child { width: auto; }

.feld { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.feld__wert { display: inline-block; }
.feld.leer .feld__wert { opacity: 0; }
.feld.leer::before {
  content: "—";
  content: "—" / "";
  position: absolute; left: 0; top: 0; color: var(--c-grau);
}

.abschluss { color: var(--c-teal-tief); }

/* ---------- Kapitel 4: Person ---------- */

.person { display: grid; gap: var(--s-5); }
.abb--portraet { max-width: 30rem; }
.person__text { display: grid; gap: var(--s-2); align-content: start; }
.person__text > p { max-width: 62ch; }
.person__lead { font-size: var(--fs-lead); line-height: 1.45; font-weight: 500; }

.masskette { margin-top: var(--s-4); }
.masskette .abb__unterschrift { margin: 0 0 var(--s-2); }
.masskette__zeichnung {
  display: grid; grid-template-columns: 1fr 1fr;
  border-left: var(--l-schmal) solid var(--c-tusche);
}
.masskette__mass {
  position: relative; display: block; text-align: center;
  padding: .25rem 0 1.15rem; border-right: var(--l-schmal) solid var(--c-tusche);
  font-size: var(--fs-norm);
}
.masskette__mass::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: .5rem; height: 1px;
  background: var(--c-tusche); transform-origin: left center;
  transform: scaleX(var(--strich, 1));
}
.masskette__mass::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(.5rem - 4px); height: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M0 4.5 14 1v7z' fill='%231E2228'/%3E%3C/svg%3E") left center / 14px 9px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M14 4.5 0 1v7z' fill='%231E2228'/%3E%3C/svg%3E") right center / 14px 9px no-repeat;
  opacity: var(--pfeil, 1);
}
.masskette__punkte { list-style: none; padding: 0; margin-top: var(--s-2); display: grid; gap: .5rem; }
.masskette__punkte li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .5rem; font-size: .9375rem; }
.masskette__jahr { color: var(--c-teal); font-size: 1.05rem; }

/* ---------- Kapitel 5: Kontakt ---------- */

.kapitel--kontakt { background: var(--c-teal-tief); color: var(--c-auf-teal); }
.kapitel + .kapitel--kontakt { border-top-color: var(--c-teal-tief); }
.kapitel--kontakt :focus-visible { outline-color: var(--c-auf-teal); }
.kapitel--kontakt .kapitel__nr { color: #4FD3E6; } /* Logo-Cyan aufgehellt: 4,7:1 auf Tiefteal */
.kapitel--kontakt .offen { text-decoration-color: rgba(255, 255, 255, .8); }
.kapitel--kontakt ::selection { background: var(--c-papier); color: var(--c-teal-tief); }

.kontakt { display: grid; gap: var(--s-5); align-items: start; }
.kontakt__text { display: grid; gap: var(--s-3); justify-items: start; }
.kontakt h2 { margin-bottom: 0; }
.kontakt__lead { font-size: var(--fs-lead); max-width: 34ch; color: var(--c-auf-teal-leise); }
.anruf--hell { background: var(--c-papier); color: var(--c-tusche); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6); }
.anruf--hell:hover { background: var(--c-auf-teal); }
.anruf--hell .anruf__schritt { color: var(--c-teal-tief); }
.anruf--hell .offen { text-decoration-color: var(--c-teal); }
.kontakt__route { color: var(--c-auf-teal); font-weight: 600; }

.schriftfeld {
  width: 100%; max-width: 36rem;
  color: var(--c-tusche); background: var(--c-papier);
  border: var(--l-breit) solid var(--c-tusche);
}
.schriftfeld__titel {
  padding: .8rem 1rem .7rem; font-size: var(--fs-norm); letter-spacing: .03em;
  border-bottom: var(--l-breit) solid var(--c-tusche);
}
.schriftfeld__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schriftfeld__felder > div {
  padding: .55rem 1rem .7rem; border-bottom: var(--l-schmal) solid var(--c-tusche);
}
.schriftfeld__links { border-right: var(--l-schmal) solid var(--c-tusche); }
.schriftfeld__breit { grid-column: 1 / -1; }
.schriftfeld__felder > div:last-child { border-bottom: 0; }
.schriftfeld dt { font-size: .8125rem; color: var(--c-grau); }
.schriftfeld dd { font-weight: 650; line-height: 1.35; }
.schriftfeld .offen { text-decoration-color: var(--c-teal); }

/* ---------- Fuß ---------- */

.fuss {
  /* eine Spur so breit wie die Inhaltsspalte, mittig: Fuß fluchtet mit den Kapiteln */
  display: grid; gap: var(--s-1); justify-items: start;
  grid-template-columns: minmax(0, var(--maxbreite)); justify-content: center;
  padding: var(--s-5) calc(var(--rand) + var(--register)) calc(var(--s-6) + env(safe-area-inset-bottom)) var(--rand);
  border-top: var(--l-breit) solid var(--c-tusche);
}
.fuss__marke { width: 9rem; height: auto; margin-bottom: var(--s-1); }
.fuss__claim { letter-spacing: .28em; text-transform: uppercase; font-size: .8125rem; font-weight: 500; }
.fuss__adresse { color: var(--c-grau); font-size: .9375rem; }
.fuss__links { list-style: none; padding: 0; display: flex; gap: var(--s-3); margin-top: var(--s-2); }
.fuss__design { color: var(--c-grau); font-size: .8125rem; margin-top: var(--s-1); }

/* ---------- Anrufleiste (mobil) ---------- */

.anrufleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem var(--rand) calc(.9rem + env(safe-area-inset-bottom));
  background: var(--c-teal); color: var(--c-auf-teal); text-decoration: none; font-weight: 700;
  box-shadow: 0 -8px 24px -12px rgba(3, 85, 105, .55);
  transition: transform .35s var(--ease-aus);
}
.anrufleiste__nummer { margin-left: auto; font-weight: 500; }
.anrufleiste .offen { text-decoration-color: rgba(255, 255, 255, .75); }
.js .anrufleiste { transform: translateY(110%); }
.js .anrufleiste.sichtbar { transform: none; }

/* ---------- ab 600 px ---------- */

@media (min-width: 600px) {
  .kopf { grid-template-columns: auto 1fr auto auto; }
  .kopf__vorschau { grid-column: 3; grid-row: 1; }
  .kopf__anruf { grid-column: 4; }
  .teileliste { grid-template-columns: repeat(4, 1fr); }
  .masskette__punkte { grid-template-columns: repeat(3, 1fr); }
  .masskette__punkte li { grid-template-columns: 1fr; gap: .15rem; }
  .masskette__punkte li:nth-child(2) { text-align: center; }
  .masskette__punkte li:nth-child(3) { text-align: right; }
}

/* ---------- ab 900 px ---------- */

@media (min-width: 900px) {
  .kopf__marke img { height: 2.25rem; }
  .kopf__ort { display: block; }
  .register a { min-height: 7.25rem; padding-block: .75rem; }
  .register__titel {
    display: block; writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: .9rem; letter-spacing: .04em;
  }
  .anrufleiste { display: none; }

  .gutachten { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .person { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .kontakt { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
  /* linksbündig in der Inhaltsspalte, nicht am Seitenrand (sonst rutscht sie auf breiten Schirmen nach links) */
  .daten { max-width: 46rem; margin-inline: max(0px, (100% - var(--maxbreite)) / 2) auto; }
  .daten th { width: 14rem; }
}

/* ---------- ab 1000 px: zweispaltige Handbuchseite ---------- */

@media (min-width: 1000px) {
  .kapitel--unfall { min-height: calc(100svh - 4.5rem); }
  .unfall {
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
    grid-template-areas: "text abb" "text liste";
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: var(--s-5);
    row-gap: var(--s-2);
  }
  .unfall__text { align-self: center; grid-row: 1 / span 2; }
  .abb--zeichnung { align-self: end; }
  .teileliste-block { align-self: start; }
  .unfall h1 { max-width: none; font-size: clamp(3.5rem, 1rem + 4.2vw, 5rem); font-stretch: 112%; }
  .unfall__text { display: grid; grid-area: text; gap: var(--s-3); align-content: center; }
  .unfall .unfall__text > * { grid-area: auto; }
  .ablauf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-6); align-items: center; }
}

/* ---------- Mobil: Zeichnung als Ausschnitt der Fahrzeugfront ---------- */

@media (max-width: 599px) {
  .abb--zeichnung .zeichnung-rahmen { margin-right: calc(-1 * var(--s-1)); }
  .abb--zeichnung .zeichnung { width: 148%; max-width: none; }
  .kapitel--unfall { padding-top: 1.25rem; }
  .unfall { gap: 1.1rem; }
  .zeichnung text { font-size: 25px; }
  .abb--zeichnung .abb__unterschrift { font-size: .875rem; margin-top: .25rem; }

  /* Positionsliste gestapelt: Bauteil oben, Befund und Maßnahme als beschriftete Zeilen */
  .positionsliste { min-width: 0; }
  .positionsliste thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .positionsliste tbody tr {
    display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .6rem;
    padding-block: .85rem; border-bottom: var(--l-schmal) solid var(--c-linie);
  }
  .positionsliste tbody td { display: block; border: 0; padding: 0; width: auto; }
  .positionsliste tbody td:first-child { grid-row: span 3; }
  .positionsliste td[data-label="Bauteil"] { font-weight: 650; margin-bottom: .2rem; }
  .positionsliste td[data-label="Befund"],
  .positionsliste td[data-label="Maßnahme"] { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); }
  .positionsliste td[data-label="Befund"]::before,
  .positionsliste td[data-label="Maßnahme"]::before {
    content: attr(data-label) ":";
    font-family: var(--f-norm); font-style: oblique 15deg; color: var(--c-grau);
  }
  .positionsliste tfoot tr, .positionsliste tfoot td { display: block; }

  .schriftfeld__felder { grid-template-columns: minmax(0, 1fr); }
  .schriftfeld__links { border-right: 0; }
}

/* Auftakt: erst sichtbar, wenn GSAP übernimmt. Fällt GSAP aus, greift nach 3 s die Sicherung. */
@media (prefers-reduced-motion: no-preference) {
  .js .zeichnung, .js .kopf__marke img {
    visibility: hidden;
    animation: sicherung 0s 3s forwards;
  }
}
@keyframes sicherung { to { visibility: visible; } }

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

/* ---------- Rechtstexte ---------- */

.rechtstext { --register: 0px; }
.rechtstext main.kapitel { border-top: 0; }
.rechtstext h1 { font-size: var(--fs-h2); max-width: var(--maxbreite); margin-bottom: var(--s-4); }
.rechtstext__inhalt { max-width: 65ch; margin-inline: max(0px, (100% - var(--maxbreite)) / 2) auto; }
.rechtstext__inhalt h2 {
  font-size: var(--fs-h3); font-style: normal; font-stretch: 100%; font-weight: 750;
  max-width: none; margin: var(--s-4) 0 var(--s-1);
}
.rechtstext__inhalt p + p { margin-top: var(--s-1); }