/* =====================================================================
   Unfallskizze — Editor

   Farbwerte und Maße stehen in tokens.css; sie werden mit dem Monobild-
   Werkzeug geteilt. Hier steht nur, was den Editor betrifft.
   ===================================================================== */


* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; overscroll-behavior: none; }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* Der Editor bringt eigenes Zoomen mit. Ohne diese Sperre löst eine
     Zwei-Finger-Geste zusätzlich den Seitenzoom aus und die Skizze springt. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- Rahmen */

.app { position: relative; height: 100dvh; width: 100vw; overflow: hidden; background: var(--flaeche); }

.stage { position: absolute; inset: 0; }
.canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  background: var(--flaeche);
}

/* ------------------------------------------------------------- Kopfleiste */

.bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--chrome-0) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}

.mark {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: -.015em; white-space: nowrap;
}
.mark svg { width: 22px; height: 22px; color: var(--akzent); }

.case {
  position: relative;
  display: flex; align-items: center;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  min-width: 0;
}

.case__button {
  border: 0; background: transparent;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  padding: 6px 22px 6px 8px;
  border-radius: 7px;
  max-width: 34ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 17px, calc(100% - 8px) 17px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.case__button:hover { background-color: var(--chrome-2); color: var(--ink); }

/* --- Menü --- */

/* Muss VOR/mit höherer Spezifität als das display:flex unten greifen: das
   hidden-Attribut allein wird sonst von `.menu { display:flex }` überstimmt,
   und das Menü ließe sich nicht schließen (leeres Feld von Anfang an). */
.menu[hidden] { display: none; }

.menu {
  position: absolute;
  top: calc(100% + 6px); left: 8px;
  width: 300px;
  display: flex; flex-direction: column;
  padding: 6px;
  background: var(--chrome-0);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--schatten-2);
  z-index: 30;
  max-height: 70dvh; overflow-y: auto;
}

.menu__field { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 10px; }
.menu__field span { font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.menu__field input {
  font: inherit; font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--chrome-1); color: var(--ink);
  min-height: 38px;
}

.menu__field select {
  font: inherit; font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--chrome-1); color: var(--ink);
  min-height: 38px; cursor: pointer;
}

.menu__note {
  margin: -4px 8px 4px;
  font-size: 11.5px; line-height: 1.4; color: var(--ink-3);
}

.menu__heading {
  font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 8px 6px;
}

.menu__item {
  display: flex; flex-direction: column; gap: 1px;
  text-align: left;
  border: 0; background: transparent;
  padding: 9px 10px; border-radius: var(--r-ctrl);
  min-height: 44px; justify-content: center;
}
.menu__item:hover { background: var(--chrome-2); }
.menu__item b  { font-size: 13.5px; font-weight: 560; }
.menu__item em { font-style: normal; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.menu__item--strong { color: var(--akzent); font-weight: 570; font-size: 13.5px; }

.bar__spacer { flex: 1; }

.modes { display: inline-flex; padding: 3px; gap: 2px; background: var(--chrome-2); border-radius: 10px; }
.modes button {
  border: 0; background: transparent; color: var(--ink-2);
  font-size: 13px; font-weight: 550;
  padding: 6px 14px; border-radius: 8px;
}
.modes button[aria-pressed="true"] {
  background: var(--chrome-0); color: var(--ink); box-shadow: var(--schatten-1);
}

/* Speicherzustand: ein Punkt, kein Satz. Im Normalfall ist er die
   uninteressanteste Information auf dem Schirm. */
.saved { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.saved i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.saved[data-save="saved"]  i { background: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-2); }
.saved[data-save="saving"] i { background: var(--ink-3); animation: puls 1.1s ease-in-out infinite; }
.saved[data-save="dirty"]  i { background: var(--ink-3); }
.saved[data-save="error"],
.saved[data-save="conflict"] { color: var(--warnung); font-weight: 550; }
.saved[data-save="error"] i,
.saved[data-save="conflict"] i { background: var(--warnung); }

@keyframes puls { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* --------------------------------------------------------------- Palette */

.panel {
  position: absolute;
  top: calc(var(--bar-h) + 12px); left: 12px; bottom: 12px;
  width: var(--lib-w);
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--chrome-0) 92%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--schatten-2);
  overflow: hidden;
  z-index: 15;
}

/* Die Rollenwahl steht vor der Bibliothek, nicht darin: Sie ist die
   folgenreichste Entscheidung im ganzen Werkzeug — sie bestimmt, welches
   Fahrzeug im Gutachten als das eigene gilt. */
.roles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 12px; border-bottom: 1px solid var(--line);
}
.role {
  border: 1.5px solid var(--line);
  background: transparent;
  border-radius: var(--r-ctrl);
  padding: 8px 4px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 550; color: var(--ink-2);
  min-height: 46px;
}
.role b { width: 22px; height: 9px; border-radius: 3px; display: block; }
.role[data-role="own"] b   { background: var(--rolle-eigen); }
.role[data-role="other"] b { background: var(--rolle-gegner); }
.role[data-role="third"] b { background: var(--rolle-weitere); }
.role[aria-pressed="true"] { color: var(--ink); background: var(--chrome-2); }
.role[data-role="own"][aria-pressed="true"]   { border-color: var(--rolle-eigen); }
.role[data-role="other"][aria-pressed="true"] { border-color: var(--rolle-gegner); }
.role[data-role="third"][aria-pressed="true"] { border-color: var(--rolle-weitere); }

.lib { overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 12px; flex: 1; scrollbar-width: thin; touch-action: pan-y; }

.lib h2 {
  font-size: 10.5px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 14px 0 8px;
  position: sticky; top: 0;
  background: var(--chrome-0);
  padding: 4px 0 3px;
}

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* Die Kachel zeigt die Form, nicht ihren Namen. Ein Sattelzug ist als
   Umriss in einer Zehntelsekunde erkannt; „Sattelzug" muss gelesen werden.
   Die Vorschau entsteht aus derselben Zeichenfunktion wie das Objekt auf
   der Fläche — sie kann also gar nicht davon abweichen. */
.tile {
  border: 1.5px solid transparent;
  background: var(--chrome-1);
  border-radius: var(--r-ctrl);
  padding: 7px 3px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 46px;
}
.tile:hover { border-color: var(--line-2); background: var(--chrome-2); }
.tile svg { width: 100%; height: 30px; display: block; overflow: visible; }
.tile span {
  font-size: 10px; font-weight: 500; color: var(--ink-2);
  line-height: 1.15; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* Lineare Objekte quer über die volle Breite: Eine Fahrbahn in einer
   schmalen Spalte wäre ein Strich ohne Aussage. */
.tile[data-wide] {
  grid-column: span 3; flex-direction: row; gap: 9px;
  padding: 8px 10px; min-height: 46px;
}
.tile[data-wide] svg { width: 58px; height: 28px; flex: none; }
.tile[data-wide] span { text-align: left; flex: 1; font-size: 11.5px; }
.tile[data-wide] em { font-family: var(--mono); font-style: normal; font-size: 10.5px; color: var(--ink-3); }

/* ------------------------------------------------------ Schwebende Regler */

.dock {
  position: absolute;
  display: flex; gap: 3px; padding: 4px;
  background: color-mix(in srgb, var(--chrome-0) 92%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--schatten-2);
  z-index: 15;
}
.dock--tools { top: calc(var(--bar-h) + 12px); left: calc(var(--lib-w) + 24px); }
.dock--zoom  { right: 12px; bottom: 12px; }

.icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  border-radius: 8px; color: var(--ink-2);
}
.icon:hover:not(:disabled) { background: var(--chrome-2); color: var(--ink); }
.icon:disabled { opacity: .32; cursor: default; }
.icon[aria-pressed="true"] { background: var(--akzent-2); color: var(--akzent); }
.icon svg { width: 19px; height: 19px; }
.dock hr { width: 1px; height: 22px; align-self: center; border: 0; background: var(--line); margin: 0 3px; }

/* --- Ebenen --- */

.layers {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  width: 236px;
  padding: 6px;
  background: var(--chrome-0);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--schatten-2);
  z-index: 30;
}
.layers[hidden] { display: none; }

.layer {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  border: 0; background: transparent;
  padding: 8px 10px; border-radius: var(--r-ctrl);
  min-height: 40px;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
}
.layer:hover { background: var(--chrome-2); }
.layer svg { width: 17px; height: 17px; flex: none; color: var(--ink-2); }
.layer span { flex: 1; }
.layer em {
  font-style: normal; font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* Ausgeblendet tritt zurück, verschwindet aber nicht: Man muss die Zeile
   ja wiederfinden, um sie einzuschalten. */
.layer[aria-pressed="false"] { color: var(--ink-3); }
.layer[aria-pressed="false"] svg { color: var(--ink-3); }
.layer[aria-pressed="true"] svg { color: var(--akzent); }

.bar__save { flex: 0 0 auto; padding: 9px 16px; font-size: 13.5px; }

/* ------------------------------------------------------------ Dialogfeld */

.sheet {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(3px);
  z-index: 50;
}

.sheet__box {
  width: min(460px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px;
  background: var(--chrome-0);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--schatten-2);
}

.sheet__title { margin: 0; font-size: 20px; font-weight: 620; letter-spacing: -.02em; }
.sheet__text  { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.sheet__hint  { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

.sheet__section { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.sheet__legend {
  margin: 4px 0 0; font-size: 10.5px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}

.sheet__field { display: flex; flex-direction: column; gap: 4px; }
.sheet__field span { font-size: 12.5px; color: var(--ink-2); }
.sheet__field input,
.linkrow input {
  font: inherit; font-size: 14px;
  padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--chrome-1); color: var(--ink);
  width: 100%;
}
.sheet__field input:focus,
.linkrow input:focus { outline: none; border-color: var(--akzent); }

.linkrow { display: flex; gap: 8px; }
.linkrow input { font-family: var(--mono); font-size: 12.5px; }
.linkrow .btn { flex: 0 0 auto; }

/* Das Häkchen ist bewusst nicht vorbelegt. Ein vorangekreuztes Kästchen ist
   nach der Rechtsprechung des EuGH keine wirksame Einwilligung. */
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--chrome-1);
  cursor: pointer;
}
.consent:has(input:checked) { border-color: var(--akzent); background: var(--akzent-2); }
.consent input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--akzent); flex: none; }
.consent span { display: flex; flex-direction: column; gap: 2px; }
.consent b  { font-size: 13.5px; font-weight: 560; line-height: 1.4; }
.consent em { font-style: normal; font-size: 12px; color: var(--ink-3); line-height: 1.45; }

.sheet__status { margin: 0; font-size: 13px; color: var(--ink-2); min-height: 1.2em; }
.sheet__status[data-error] { color: var(--warnung); }

.sheet__foot { display: flex; gap: 8px; padding-top: 4px; }

/* --------------------------------------------------------- Eigenschaften */

/* Erscheint nur bei Auswahl. Ein dauerhaft leeres Feld nähme Platz weg und
   erzählte nichts. */
.props {
  position: absolute;
  top: calc(var(--bar-h) + 12px); right: 12px;
  width: 244px;
  max-height: calc(100dvh - var(--bar-h) - 84px);
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--chrome-0) 92%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--schatten-2);
  overflow: hidden;
  z-index: 15;
}
.props[hidden] { display: none; }

.props__head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.props__head h2 { margin: 0; font-size: 14.5px; font-weight: 620; letter-spacing: -.01em; }
.props__head span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

.props__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; overscroll-behavior: contain; }
.props__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.prop { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prop__label { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.prop__hint { font-size: 11px; color: var(--ink-3); }

.prop__input {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  background: var(--chrome-1);
  min-height: 38px;
  padding: 0 8px;
  font: inherit; font-size: 13px; color: var(--ink);
  width: 100%;
}
.prop__input:focus-within { border-color: var(--akzent); }

.prop__input input {
  border: 0; background: transparent; color: inherit;
  font: inherit; font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  width: 100%; min-width: 0; padding: 8px 0;
}
.prop__input input:focus { outline: none; }
.prop__input em { font-style: normal; font-size: 11px; color: var(--ink-3); font-family: var(--mono); }

input.prop__input { padding: 8px 10px; font-size: 13px; }
select.prop__input { padding: 8px 6px; cursor: pointer; }

/* Die Pfeilchen der Zahlenfelder nehmen Platz und werden nie benutzt —
   getippt oder gezogen wird, nicht geklickt. */
.prop__input input[type="number"]::-webkit-outer-spin-button,
.prop__input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prop__input input[type="number"] { -moz-appearance: textfield; }

.prop__slider { display: flex; align-items: center; gap: 9px; min-height: 38px; }
.prop__slider input { flex: 1; min-width: 0; accent-color: var(--akzent); }
.prop__slider em {
  font-style: normal; font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  min-width: 5ch; text-align: right;
}

/* Fehlt das Bild einer Pausschicht, bleibt ein Platzhalter im richtigen
   Maß. Ein unsichtbares Objekt wäre schlimmer — man kann es nicht anfassen
   und fragt sich, warum die Skizze verrutscht aussieht. */
.base-missing {
  fill: color-mix(in srgb, var(--ink-3) 12%, transparent);
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 8 5;
  vector-effect: non-scaling-stroke;
}

.props__foot { padding: 10px 14px; border-top: 1px solid var(--line); }
.props__foot .btn { width: 100%; }

/* ---------------------------------------------------------------- Phasen */

/* Unten mittig: Der Ablauf gehört unter die Zeichnung wie eine Zeitleiste,
   nicht an den Rand zu den Werkzeugen. */
.phases {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  /* Eine Zeile über dem Ablesefeld und den Zoomknöpfen. Auf gleicher Höhe
     stießen sie zusammen, sobald das Fenster schmaler wurde — und zwar
     genau dann, wenn ohnehin wenig Platz ist. */
  bottom: 60px;
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  background: color-mix(in srgb, var(--chrome-0) 92%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--schatten-2);
  z-index: 15;
  max-width: calc(100vw - 2 * var(--lib-w) - 60px);
}

.phases__strip { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.phases__strip::-webkit-scrollbar { display: none; }
.phases__tools { display: flex; gap: 2px; padding-left: 4px; border-left: 1px solid var(--line); }

.phase {
  display: flex; align-items: center; gap: 7px;
  border: 0; background: transparent;
  color: var(--ink-2);
  padding: 0 12px 0 8px;
  min-height: 36px;
  border-radius: 8px;
  font-size: 12.5px;
  white-space: nowrap;
}
.phase:hover { background: var(--chrome-2); color: var(--ink); }
.phase b {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--chrome-2);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--ink-2);
}
.phase[aria-pressed="true"] { background: var(--akzent-2); color: var(--akzent); font-weight: 560; }
.phase[aria-pressed="true"] b { background: var(--akzent); color: #fff; }

.phase-tool {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  border-radius: 8px; color: var(--ink-2);
}
.phase-tool:hover:not(:disabled) { background: var(--chrome-2); color: var(--ink); }
.phase-tool:disabled { opacity: .3; cursor: default; }
.phase-tool svg { width: 17px; height: 17px; }

/* --- Schatten früherer Lagen --- */

/* Die Deckkraft setzt der Renderer je Lage: weiter zurück heißt blasser.
   Zeiger gehen hindurch — ein Schatten ist Darstellung, kein Objekt, und
   darf beim Auswählen nicht im Weg stehen. */
.ghost { pointer-events: none; }

.trail__line {
  stroke: var(--akzent);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.trail__head { fill: var(--akzent); }
.trail__dot  { fill: var(--akzent); opacity: .55; }
.trail { pointer-events: none; }

/* ------------------------------------------------------------- Ablesefeld */

/* Wie die Anzeige eines Messgeräts: schmal, einfarbig, Ziffern gleicher
   Breite, damit die Zahlen beim Schieben nicht zappeln. */
.readout {
  position: absolute;
  left: calc(var(--lib-w) + 24px); bottom: 12px;
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--chrome-0) 92%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--schatten-1);
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  z-index: 15;
  max-width: calc(100vw - var(--lib-w) - 200px);
}
.readout div { padding: 7px 11px; border-right: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.readout div:last-child { border-right: 0; }
.readout b { color: var(--ink); font-weight: 600; }
.readout .sel { color: var(--akzent); overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------- Einfacher Modus */

.guide {
  position: absolute;
  top: calc(var(--bar-h) + 12px); left: 12px; bottom: 12px;
  width: 300px;
  display: none; flex-direction: column;
  background: color-mix(in srgb, var(--chrome-0) 94%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--schatten-2);
  z-index: 15;
  overflow: hidden;
}

.guide__head { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.guide__step { font-family: var(--mono); font-size: 11px; color: var(--akzent); letter-spacing: .06em; }
.guide__head h2 { margin: 6px 0 5px; font-size: 19px; font-weight: 620; letter-spacing: -.02em; text-wrap: balance; }
.guide__head p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

.guide__body { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }

/* Große Ziele statt kleiner Kacheln: Hier sitzt jemand nach einem Unfall
   am Telefon, kein Sachverständiger am Schreibtisch. */
.choice {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--line);
  background: var(--chrome-1);
  border-radius: 11px;
  padding: 11px 13px; text-align: left; min-height: 60px;
}
.choice:hover { border-color: var(--line-2); }
.choice[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-2); }
.choice svg { width: 52px; height: 30px; flex: none; overflow: visible; }
.choice span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.choice b { font-size: 14px; font-weight: 570; }
.choice em { font-style: normal; font-size: 12px; color: var(--ink-3); }

.guide__foot { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
/* Auch für Verweise, die wie Knöpfe aussehen — die Leiste enthält beides.
   Ohne inline-flex und die Textauszeichnung säße ein <a> hier unterstrichen
   und auf falscher Höhe. */
.btn {
  flex: 1; border: 0; border-radius: var(--r-ctrl);
  padding: 11px 14px; font-size: 14px; font-weight: 560;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.btn--ghost { background: var(--chrome-2); color: var(--ink-2); flex: 0 0 auto; }
.btn--go { background: var(--akzent); color: #fff; }
.btn:disabled { opacity: .4; cursor: default; }

.dots { display: flex; gap: 5px; padding: 0 18px 14px; }
.dots i { height: 3px; flex: 1; border-radius: 2px; background: var(--line); }
.dots i[data-on] { background: var(--akzent); }

:root[data-mode="simple"] .panel,
:root[data-mode="simple"] .dock--tools,
:root[data-mode="simple"] .props,
:root[data-mode="simple"] .phases,
:root[data-mode="simple"] .readout { display: none; }
:root[data-mode="simple"] .guide { display: flex; }

/* ================================================================ Skizze */

.grid-line { stroke: var(--raster); stroke-width: 1; }

/* --- Fahrzeuge ---
   Die Rollenfarbe wird einmal auf der Gruppe gesetzt und von den Teilen
   geerbt. Ohne currentColor bräuchte jede Rolle eine eigene Regel je Teil,
   und das wären bei elf Fahrzeugtypen dreißig Regeln für eine Farbe. */

.shape--vehicle            { color: var(--rolle-weitere); }
.shape--vehicle.role-own   { color: var(--rolle-eigen); }
.shape--vehicle.role-other { color: var(--rolle-gegner); }
.shape--vehicle.role-third { color: var(--rolle-weitere); }

.shape .body {
  fill: color-mix(in srgb, currentColor 18%, transparent);
  stroke: currentColor; stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.shape .cabin {
  fill: color-mix(in srgb, currentColor 32%, transparent);
  stroke: currentColor; stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.shape .glass, .shape .nose, .shape .drawbar {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.shape .wheel { fill: color-mix(in srgb, currentColor 70%, #000 30%); stroke: none; }
.shape .pivot { fill: currentColor; stroke: none; }

/* --- Fahrbahn --- */

.road-edge    { stroke: var(--markierung); }
.road-surface { stroke: var(--asphalt); }
.road-surface-flat { fill: var(--asphalt); stroke: none; }
.road-track   { stroke: color-mix(in srgb, var(--asphalt) 70%, #8b7355 30%); }
.road-center  { stroke: var(--markierung); fill: none; }
.road-marking { stroke: var(--markierung); stroke-width: .12; }
.road-marking-fill { fill: var(--markierung); stroke: none; }
.road-bike   { stroke: color-mix(in srgb, #a5342b 68%, var(--asphalt) 32%); }
.road-walk   { stroke: color-mix(in srgb, #d6d6d6 55%, var(--asphalt) 45%); }
.road-island { fill: color-mix(in srgb, #7fa262 55%, var(--asphalt) 45%); stroke: var(--markierung); stroke-width: .12; }
.road-line   { stroke: var(--markierung); fill: none; }

/* --- Umfeld --- */

.green {
  fill: color-mix(in srgb, #2f8f4e 28%, transparent);
  stroke: #2f8f4e; stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.trunk    { fill: #6b4f2a; stroke: none; }
.solid    { fill: var(--rolle-weitere); stroke: none; }
.barrier  { stroke: var(--rolle-weitere); }
.kerb     { stroke: color-mix(in srgb, var(--rolle-weitere) 55%, var(--asphalt)); }
.building {
  fill: color-mix(in srgb, var(--rolle-weitere) 20%, transparent);
  stroke: var(--rolle-weitere); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* --- Spuren --- */

.skidmark { stroke: #1f2937; stroke-width: .20; opacity: .8; }
.scrape   { stroke: #6b7280; stroke-width: .12; stroke-dasharray: .3 .25; }
.path-line {
  stroke: var(--akzent); stroke-width: 2;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}
.path-head { fill: var(--akzent); stroke: none; }
.impact    { fill: #DC2626; stroke: none; }
.debris {
  fill: color-mix(in srgb, #9ca3af 30%, transparent);
  stroke: #9ca3af; stroke-width: 1; stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

/* --- Bemaßung ---
   Achtung: Diese Texte liegen in der Weltgruppe, wo eine Einheit ein Meter
   ist. Die Schriftgröße wird deshalb im JavaScript in Metern gesetzt und
   hier bewusst nicht angefasst — „11px" wären elf Meter hohe Buchstaben.
   Der Freistellungsrand soll dagegen konstant bleiben: non-scaling-stroke. */

.dimension-line { stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.dimension-text, .note-text, .label {
  fill: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--flaeche);
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.label { font-weight: 500; dominant-baseline: hanging; }
.north-mark { fill: var(--ink); stroke: none; }

.unknown {
  fill: none; stroke: var(--ink-3);
  stroke-dasharray: 4 3; stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --- Auswahl --- */

.selection__outline { fill: none; stroke: var(--akzent); stroke-width: 1.5; stroke-dasharray: 5 3; }
.selection__stem    { stroke: var(--akzent); stroke-width: 1.5; }
.handle { fill: var(--chrome-0); stroke: var(--akzent); stroke-width: 2; cursor: pointer; }
.handle--rotate { cursor: grab; }
.handle--scale  { cursor: nwse-resize; }

/* --- Maßstabsleiste und Nordpfeil --- */

.scalebar__line, .scalebar__tick { stroke: var(--ink); stroke-width: 1.5; }
.scalebar__text, .north__text { fill: var(--ink); font: 500 11px var(--sans); }
.north__ring {
  fill: color-mix(in srgb, var(--chrome-0) 80%, transparent);
  stroke: var(--line); stroke-width: 1;
}
.north__needle { fill: var(--ink); }

/* ------------------------------------------------------------ Schmales Gerät */

@media (max-width: 860px) {
  .panel, .guide {
    top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto; height: 46dvh;
  }
  .dock--tools { left: 8px; top: calc(var(--bar-h) + 8px); }

  /* Über die Palette, nicht darauf: Unten füllt die Bibliothek die volle
     Breite, und die Zoomknöpfe lägen sonst auf den Kacheln. */
  .dock--zoom { bottom: calc(46dvh + 16px); right: 8px; }

  /* Über der Palette, links neben den Zoomknöpfen. Die Namen der Phasen
     entfallen — auf 375 Pixeln zählt die Nummer, nicht das Wort. */
  .phases {
    left: 8px; transform: none;
    bottom: calc(46dvh + 16px);
    max-width: calc(100vw - 150px);
  }
  .phase span { display: none; }
  .phase { padding: 0 8px; }

  .readout { display: none; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tile[data-wide] { grid-column: span 4; }

  /* Die Eigenschaften legen sich über die Bibliothek statt neben sie: Bei
     375 Pixeln ist für zwei Spalten kein Platz, und wer gerade ein Objekt
     bemaßt, braucht die Palette in dem Moment nicht. */
  .props {
    top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto; max-height: 46dvh;
  }
  :root[data-selected] .panel { display: none; }

  .case__button { max-width: 14ch; font-size: 11.5px; }

  /* Nicht mehr an der Aktenzeile aufhängen: Die ist selbst eingerückt, und
     das Menü ragte dadurch rechts aus dem Bild. Auf schmalen Geräten hängt
     es am Fenster, nicht am Knopf. */
  .menu {
    position: fixed;
    top: calc(var(--bar-h) + 6px);
    left: 8px; right: 8px;
    width: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tile, .icon, .role, .choice, .modes button { transition: background .13s, border-color .13s, color .13s; }
}
@media (prefers-reduced-motion: reduce) {
  .saved i { animation: none; }
}