/* SEHO Service-Portal · Grundstil nach docs/design.md (ADR-0012).
   Dicht, werkzeughaft, eine Akzentfarbe, keine Schatten, keine Karten.
   Alle Farben nur hier in :root; Komponenten nutzen Variablen. */

/* Schrift Archivo (SIL OFL, variabel), selbst gehostet (ADR-0012, Variante A „Werkzeug“) */
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo-latin-variable.8f704806dbed.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --farbe-text: #1a1a1a;
  --farbe-text-2: #5c5c5c;
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-2: #f3f4f5;
  --farbe-linie: #d9dcdf;
  --farbe-akzent: #0b5fa5; /* Platzhalter bis CD-Daten vorliegen */
  --farbe-akzent-text: #ffffff;
  --farbe-warnung: #b4540a;
  --farbe-fehler: #a61b1b;
  --farbe-ok: #1f6f3f;
  --farbe-schleier: rgb(0 0 0 / 40%); /* Hintergrund hinter Dialogen */
  --schrift: "Archivo", system-ui, sans-serif;
  --groesse-0: 0.8125rem;
  --groesse-1: 0.9375rem;
  --groesse-2: 1.125rem;
  --groesse-3: 1.5rem;
  --abstand: 0.5rem;
  --radius: 3px;
  --punkt: 0.5rem; /* Ersatzteil-Punkt, Statusmarke, Verlauf */
  --markierung: 3px; /* Linie links: Treffer, Hinweis, Fehlerzeile */
  --zeile: 2.25rem;
  --zeile-touch: 2.75rem;
  --breite-max: 1440px;
}

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

html {
  font-family: var(--schrift);
  font-size: 100%;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: var(--groesse-1);
  line-height: 1.4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3 {
  margin: 0 0 var(--abstand);
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: var(--groesse-3);
}

h2 {
  font-size: var(--groesse-2);
}

h3 {
  font-size: var(--groesse-1);
}

p {
  margin: 0 0 var(--abstand);
}

a {
  color: var(--farbe-akzent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

code,
.nummer,
.tabelle td.menge,
.tabelle td.artikel {
  font-variant-numeric: tabular-nums;
}

code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--groesse-0);
}

:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 2px;
}

.sprung {
  position: absolute;
  left: -200vw;
  top: var(--abstand);
  background: var(--farbe-flaeche);
  padding: var(--abstand);
}

.sprung:focus {
  left: var(--abstand);
  z-index: 10;
}

/* Kopfzeile: Logo links, Titel, Navigation rechts, einzeilig */
.kopf {
  display: flex;
  align-items: center;
  gap: calc(var(--abstand) * 2);
  min-height: calc(var(--zeile) + var(--abstand));
  padding: 0 calc(var(--abstand) * 2);
  border-bottom: 1px solid var(--farbe-linie);
  max-width: var(--breite-max);
  width: 100%;
}

.kopf__logo {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--farbe-text);
  text-decoration: none;
}

.kopf__titel {
  color: var(--farbe-text-2);
  font-size: var(--groesse-0);
}

.kopf__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(var(--abstand) * 2);
  min-width: 0;
}

.kopf__nav .meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inhalt {
  flex: 1;
  width: 100%;
  max-width: var(--breite-max);
  padding: calc(var(--abstand) * 2);
}

.fuss {
  padding: var(--abstand) calc(var(--abstand) * 2);
  border-top: 1px solid var(--farbe-linie);
  color: var(--farbe-text-2);
  font-size: var(--groesse-0);
  max-width: var(--breite-max);
  width: 100%;
}

.fuss a {
  margin-left: calc(var(--abstand) * 2);
}

.meta {
  color: var(--farbe-text-2);
  font-size: var(--groesse-0);
}

/* Tabelle: kompakt, zebra, sortierbar */
.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--groesse-0);
}

.tabelle th,
.tabelle td {
  height: var(--zeile);
  padding: 0 var(--abstand);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--farbe-linie);
}

.tabelle th {
  background: var(--farbe-flaeche-2);
  font-weight: 600;
}

.tabelle tbody tr:nth-child(even) {
  background: var(--farbe-flaeche-2);
}

.tabelle td.menge,
.tabelle th.menge {
  text-align: right;
}

/* Ersatzteil: Punkt in Akzentfarbe vor der Artikelnummer */
.ersatzteil::before {
  content: "";
  display: inline-block;
  width: var(--punkt);
  height: var(--punkt);
  border-radius: 50%;
  background: var(--farbe-akzent);
  margin-right: var(--abstand);
  vertical-align: middle;
}

/* Formulare */
.feld {
  display: block;
  margin-bottom: calc(var(--abstand) * 2);
}

.feld__label {
  display: block;
  font-size: var(--groesse-0);
  margin-bottom: calc(var(--abstand) / 2);
}

.feld__eingabe,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  font: inherit;
  width: 100%;
  min-height: var(--zeile);
  padding: 0 var(--abstand);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}

.feld__fehler {
  color: var(--farbe-fehler);
  font-size: var(--groesse-0);
  margin-top: calc(var(--abstand) / 2);
}

.feld--fehler .feld__eingabe {
  border-color: var(--farbe-fehler);
}

/* Buttons: primär, sekundär, gefährlich */
.knopf {
  font: inherit;
  min-height: var(--zeile);
  padding: 0 calc(var(--abstand) * 2);
  border: 1px solid var(--farbe-akzent);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--abstand);
}

.knopf--primaer {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
}

.knopf--gefaehrlich {
  border-color: var(--farbe-fehler);
  color: var(--farbe-fehler);
}

.knopf:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Statusmarke: Text mit Farbpunkt, keine Fläche; überall gleich groß, auch in Überschriften */
.status {
  white-space: nowrap;
}

.status::before {
  content: "";
  display: inline-block;
  width: var(--punkt);
  height: var(--punkt);
  border-radius: 50%;
  margin-right: var(--abstand);
  background: var(--farbe-text-2);
  vertical-align: middle;
}

.status--ok::before {
  background: var(--farbe-ok);
}

.status--warnung::before {
  background: var(--farbe-warnung);
}

.status--fehler::before {
  background: var(--farbe-fehler);
}

/* Hinweisbox: eine Linie links in Farbe, kein Verlauf */
.hinweis {
  border-left: var(--markierung) solid var(--farbe-akzent);
  padding: var(--abstand) calc(var(--abstand) * 2);
  margin: calc(var(--abstand) * 2) 0;
  background: var(--farbe-flaeche-2);
}

.hinweis--warnung {
  border-left-color: var(--farbe-warnung);
}

.hinweis--fehler {
  border-left-color: var(--farbe-fehler);
}

/* Dialog nur für Bestätigungen */
.dialog {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: calc(var(--abstand) * 3);
  max-width: 32rem;
}

.dialog::backdrop {
  background: var(--farbe-schleier);
}

/* Leerzustand: ein Satz plus Aktion */
.leer {
  color: var(--farbe-text-2);
  padding: calc(var(--abstand) * 4) 0;
}

/* Seitennummerierung */
.seiten {
  display: flex;
  gap: var(--abstand);
  list-style: none;
  padding: 0;
  margin: calc(var(--abstand) * 2) 0;
}

.seiten a[aria-current="page"] {
  font-weight: 600;
  text-decoration: none;
}

/* Brotkrumen */
.brotkrumen {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--abstand);
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  font-size: var(--groesse-0);
}

.brotkrumen li {
  display: inline-flex;
  align-items: center;
}

.brotkrumen li + li::before {
  content: "›";
  margin-right: var(--abstand);
  color: var(--farbe-text-2);
}

/* Formulare für Anmeldung und Konto: schmal, linksbündig (AP-10) */
.formular {
  max-width: 28rem;
}

.formular .knopf {
  margin-top: var(--abstand);
}

.feld__hilfe {
  color: var(--farbe-text-2);
  font-size: var(--groesse-0);
  margin-top: calc(var(--abstand) / 2);
}

.feld--kontrolle {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand);
}

.feld--kontrolle input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}

.inline {
  display: inline;
}

.knopf--leise {
  border-color: transparent;
  padding: 0 var(--abstand);
}

.codes {
  list-style: none;
  padding: 0;
  margin: var(--abstand) 0;
  columns: 2;
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--groesse-1);
  font-variant-numeric: tabular-nums;
}

.codes li {
  padding: calc(var(--abstand) / 2) 0;
}

.qr {
  width: 12rem;
  height: 12rem;
  margin: var(--abstand) 0;
}

.qr svg {
  width: 100%;
  height: 100%;
}

.geheimnis {
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.08em;
  word-break: break-all;
}

/* Bewegung nur als Antwort, kurz; respektiert reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Touch: höhere Zeilen, Ziele mindestens 44 px (auch Tablets in voller Breite) */
@media (pointer: coarse), (max-width: 640px) {
  .tabelle th,
  .tabelle td {
    height: var(--zeile-touch);
  }

  .knopf {
    min-height: var(--zeile-touch);
    min-width: var(--zeile-touch);
  }

  .kopf__nav a,
  .brotkrumen a,
  .seiten a,
  .tabelle td a {
    display: inline-flex;
    align-items: center;
    min-height: var(--zeile-touch);
  }

  .seiten a {
    min-width: var(--zeile-touch);
    justify-content: center;
  }
}

/* Schmal: auf 380 px nutzbar */
@media (max-width: 640px) {
  .kopf,
  .kopf__nav {
    gap: var(--abstand);
  }

  .kopf {
    padding: 0 var(--abstand);
  }

  .inhalt {
    padding: var(--abstand);
  }
}

/* --- Portal: Maschinenliste und Geräteakte (AP-12) ------------------------------------------ */

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

.kopf__suche {
  flex: 1;
  min-width: 7rem;
  max-width: 28rem;
}

.kopf__suche input {
  min-height: calc(var(--zeile) - var(--abstand));
}

.kopf__nav a {
  white-space: nowrap;
  text-decoration: none;
  column-gap: 0.25em; /* als inline-flex (Touch) ginge sonst das Leerzeichen vor der Zahl verloren */
}

.kopf__nav a:hover,
.kopf__nav a[aria-current="page"] {
  text-decoration: underline;
}

.kopf__nav a[aria-current="page"] {
  font-weight: 600;
}

/* Filterleiste über Tabellen und Bäumen */
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--abstand) calc(var(--abstand) * 2);
  margin-bottom: calc(var(--abstand) * 2);
}

.filter__feld {
  display: block;
  min-width: 12rem;
}

.filter__feld--breit {
  flex: 1;
  max-width: 32rem;
}

.tabelle-rahmen {
  overflow-x: auto;
}

.tabelle td.nummer,
.tabelle td.artikel {
  white-space: nowrap;
}

/* Kopf der Geräteakte */
.akte-kopf {
  margin-bottom: calc(var(--abstand) * 2);
}

.akte-kopf h1 .nummer {
  margin-right: var(--abstand);
}

.kopfdaten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand) calc(var(--abstand) * 4);
  margin: 0;
  font-size: var(--groesse-0);
}

.kopfdaten dt {
  color: var(--farbe-text-2);
}

.kopfdaten > div {
  display: flex;
  gap: calc(var(--abstand) / 2);
}

.kopfdaten dd {
  margin: 0;
}


/* Baum: Liste mit Zeilen im Raster; die Einrückung steckt nur in der Artikelspalte, damit die
   übrigen Spalten untereinander stehen. Aufklappen über <details>, Nachladen per HTMX.
   Pfeil (Baugruppe) und Punkt (Ersatzteil) hängen links in einer festen Rinne, damit Nummern
   gleicher Tiefe fluchten. Treffer: Akzentlinie links, die einzige auffällige Markierung. */
.baum__liste,
.baum__kinder {
  list-style: none;
  margin: 0;
  padding: 0;
}

.baumzeile {
  --rinne: 1rem;
  display: grid;
  grid-template-columns: 3.5rem minmax(10rem, 16rem) 2rem minmax(0, 1fr) 8rem minmax(0, 11rem);
  align-items: center;
  gap: 0 var(--abstand);
  min-height: var(--zeile);
  padding: 2px var(--abstand) 2px calc(var(--abstand) - var(--markierung));
  border-left: var(--markierung) solid transparent;
  border-bottom: 1px solid var(--farbe-linie);
  font-size: var(--groesse-0);
}

.baum__kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--farbe-flaeche-2);
  font-weight: 600;
}

summary.baumzeile {
  cursor: pointer;
  list-style: none;
}

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

summary.baumzeile:focus-visible {
  outline-offset: -2px;
}

.baumzeile:hover {
  background: var(--farbe-flaeche-2);
}

.baumzeile__pos {
  padding-left: var(--rinne);
}

.baumzeile__artikel {
  padding-left: calc(var(--rinne) + var(--stufe, 0) * var(--abstand) * 2);
  overflow-wrap: anywhere;
}

.baumzeile .ersatzteil::before {
  margin-left: calc(var(--rinne) * -1);
}

/* Pfeil als Fläche, nicht als Zeichen: hängt nicht an der Schrift */
summary.baumzeile .baumzeile__pos::before {
  content: "";
  display: inline-block;
  width: 0.4375rem;
  height: 0.625rem;
  margin: 0 calc(var(--rinne) - 0.4375rem) 0 calc(var(--rinne) * -1);
  background: var(--farbe-text-2);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  vertical-align: middle;
  transition: transform 150ms ease-out;
}

details[open] > summary.baumzeile .baumzeile__pos::before {
  transform: rotate(90deg);
}

.baum__knoten--treffer > .baumzeile,
.baum__knoten--treffer > details > summary.baumzeile {
  border-left-color: var(--farbe-akzent);
  font-weight: 600;
}

.baumzeile__menge {
  text-align: right;
  white-space: nowrap;
}

.baumzeile__text {
  overflow-wrap: anywhere;
}

.baum__laden {
  padding: var(--abstand);
}

.vorschau {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  background: var(--farbe-flaeche);
}

.tiefe-2 { --stufe: 1; }
.tiefe-3 { --stufe: 2; }
.tiefe-4 { --stufe: 3; }
.tiefe-5 { --stufe: 4; }
.tiefe-6 { --stufe: 5; }
.tiefe-7 { --stufe: 6; }
.tiefe-8 { --stufe: 7; }
.tiefe-9 { --stufe: 8; }
.tiefe-10 { --stufe: 9; }
.tiefe-11 { --stufe: 10; }
.tiefe-12 { --stufe: 11; }

@media (pointer: coarse), (max-width: 640px) {
  .baumzeile {
    min-height: var(--zeile-touch);
  }
}

/* Handy: Positionsnummer (mit Pfeil) und Bezeichnung in einer Zeile unter der Artikelnummer;
   die ganze Zeile wird eingerückt, Spalten müssen hier nicht fluchten. */
@media (max-width: 640px) {
  .baumzeile {
    grid-template-columns: 3rem auto minmax(0, 1fr) auto;
    grid-template-areas:
      "bild artikel artikel menge"
      "bild pos text aktion";
    padding-left: calc(var(--abstand) - var(--markierung) + var(--stufe, 0) * var(--abstand));
  }

  .baum__kopf {
    display: none;
  }

  .baumzeile__pos { grid-area: pos; }
  .baumzeile__bild { grid-area: bild; }
  .baumzeile__artikel { grid-area: artikel; padding-left: var(--rinne); }
  .baumzeile__text { grid-area: text; }
  .baumzeile__menge { grid-area: menge; }
  .baumzeile__aktion { grid-area: aktion; justify-self: end; }

  .vorschau {
    width: 3rem;
    height: 3rem;
  }

  .kopf__suche {
    display: none;
  }
}

/* Hoher Kontrast (Windows): Punkte und Pfeil sonst unsichtbar */
@media (forced-colors: active) {
  .ersatzteil::before,
  .status::before,
  .verlauf li::before,
  details.abschnitt > summary::before,
  summary.fundzeile .fundzeile__pfeil::before,
  summary.baumzeile .baumzeile__pos::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* --- Positionsdetail (AP-13, P-05) ----------------------------------------------------------- */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(16rem, 1fr);
  gap: calc(var(--abstand) * 4);
  align-items: start;
}

.detail__bild {
  margin: 0;
}

.detail__bild img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 600px;
  border: 1px solid var(--farbe-linie);
  background: var(--farbe-flaeche);
}

.detail__bild figcaption {
  margin-top: var(--abstand);
}

.detail__text {
  font-size: var(--groesse-2);
  margin-bottom: calc(var(--abstand) * 2);
  white-space: pre-line;
}

.kopfdaten--spalte {
  flex-direction: column;
  gap: var(--abstand);
  margin-bottom: calc(var(--abstand) * 2);
}

.korb-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 calc(var(--abstand) * 2);
  padding: calc(var(--abstand) * 2) 0;
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
  margin-bottom: calc(var(--abstand) * 2);
}

.korb-formular .feld {
  margin-bottom: 0;
}

.korb-formular__menge {
  width: 7rem;
}

.korb-formular__bemerkung {
  flex: 1 1 12rem;
  max-width: 24rem;
}

.korb-formular__antwort {
  flex-basis: 100%;
  margin: var(--abstand) 0 0;
  min-height: 1.4em;
}

@media (max-width: 640px) {
  .detail {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--abstand) * 2);
  }
}

/* --- Warenkorb, Anfragen, Schnell-Hinzufügen (AP-14) ---------------------------------------- */

.zahl {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kopf__links {
  display: flex;
  align-items: center;
  gap: calc(var(--abstand) * 2);
}

/* Kleiner Knopf in Tabellen- und Baumzeilen; auf Touch trotzdem 44 px (siehe unten) */
.knopf--klein {
  min-height: calc(var(--zeile) - var(--abstand));
  padding: 0 var(--abstand);
  font-size: var(--groesse-0);
  white-space: nowrap;
}

/* Schnell-Hinzufügen im Baum: ruhiger Rand, damit lange Listen nicht nach Knöpfen aussehen */
.korb-schnell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

.korb-schnell .knopf {
  border-color: var(--farbe-linie);
  font-weight: 400;
}

.korb-schnell .knopf:hover,
.korb-schnell .knopf:focus-visible {
  border-color: var(--farbe-akzent);
}

.korb-schnell__antwort {
  flex-basis: 100%;
  font-weight: 400;
  padding: calc(var(--abstand) / 2) 0;
}

.korb-schnell__antwort:empty {
  display: none;
}

.korb-schnell__antwort .feld__fehler {
  margin: 0;
}

/* Warenkorb: Menge und Bemerkung stehen in einem Formular über zwei Spalten. Die Breite der
   Mengenspalte entspricht Eingabe + Einheit, damit die Bemerkung unter ihrer Überschrift steht. */
.korb-tabelle th.korb-tabelle__menge {
  width: 9.5rem;
}

.korb-zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand);
  margin: 0;
  padding: calc(var(--abstand) / 2) 0;
}

.korb-zeile input {
  min-height: calc(var(--zeile) - var(--abstand));
}

.korb-zeile__menge {
  flex: 0 0 5.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.korb-zeile__einheit {
  flex: 0 0 2.5rem;
  overflow-wrap: anywhere;
}

.korb-zeile__bemerkung {
  flex: 1 1 8rem;
  min-width: 0;
}

.korb-tabelle__entfernen {
  text-align: right;
}

.korb-tabelle__entfernen form {
  margin: 0;
}

/* Fehlerzeile: dieselbe Linie wie Treffer und Hinweis, in Fehlerfarbe; keine Fläche. Alle Zeilen
   tragen die Linie unsichtbar, damit die Spalten nicht springen. */
.korb-tabelle tr {
  border-left: var(--markierung) solid transparent;
}

.korb-tabelle tr.zeile--fehler,
.zeile--fehler {
  border-left: var(--markierung) solid var(--farbe-fehler);
}

/* Abschnitte einer Seite; aufklappbar als <details> mit demselben Pfeil wie der Baum */
.abschnitt {
  margin-top: calc(var(--abstand) * 4);
}

details.abschnitt > summary {
  display: flex;
  align-items: center;
  gap: var(--abstand);
  min-height: var(--zeile);
  cursor: pointer;
  list-style: none;
}

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

details.abschnitt > summary::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.625rem;
  background: var(--farbe-text-2);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 150ms ease-out;
}

details.abschnitt[open] > summary::before {
  transform: rotate(90deg);
}

details.abschnitt[open] > summary {
  margin-bottom: var(--abstand);
}

h2.inline,
summary h2 {
  margin: 0;
}

/* Anfrage: Status neben der Nummer in Textgröße, wie in der Liste */
h1 .status {
  font-size: var(--groesse-1);
  font-weight: 400;
  margin-left: var(--abstand);
  vertical-align: middle;
}

.inhalt > h2 {
  margin-top: calc(var(--abstand) * 3);
}

.text-block,
.verlauf__kommentar {
  white-space: pre-line;
  max-width: 70ch;
}

.text-block {
  margin-top: calc(var(--abstand) * 2);
}

/* Statushistorie: eine Linie, die die Reihenfolge zeigt; der aktuelle Stand in Akzentfarbe */
.verlauf {
  list-style: none;
  margin: 0 0 0 calc(var(--punkt) / 2);
  padding: 0;
  font-size: var(--groesse-0);
}

.verlauf li {
  position: relative;
  padding: 0 0 calc(var(--abstand) * 2) calc(var(--abstand) * 2);
  border-left: 1px solid var(--farbe-linie);
}

.verlauf li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.verlauf li::before {
  content: "";
  position: absolute;
  left: calc(var(--punkt) / -2 - 0.5px);
  top: 0.35em;
  width: var(--punkt);
  height: var(--punkt);
  border-radius: 50%;
  background: var(--farbe-text-2);
}

.verlauf li:last-child::before {
  background: var(--farbe-akzent);
}

.verlauf .nummer {
  color: var(--farbe-text-2);
  margin-right: var(--abstand);
}

.verlauf__kommentar {
  margin: calc(var(--abstand) / 2) 0 0;
  font-size: var(--groesse-1);
}

/* Aktionen am Seitenende: harmlose links, Storno mit Abstand daneben bzw. darunter */
.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--abstand) * 2) calc(var(--abstand) * 6);
  margin-top: calc(var(--abstand) * 4);
}

.aktionen form {
  margin: 0;
}

.aktionen .formular {
  flex: 1 1 18rem;
}

.aktionen .formular .feld {
  margin-bottom: var(--abstand);
}

.detail__bild .detail__platzhalter {
  max-width: 12rem;
}

@media (pointer: coarse), (max-width: 640px) {
  .korb-zeile input,
  .knopf--klein {
    min-height: var(--zeile-touch);
  }

  details.abschnitt > summary {
    min-height: var(--zeile-touch);
  }
}

@media (max-width: 640px) {
  /* Kopf: Logo, Name und Abmelden oben, die Portal-Links als zweite Zeile in voller Breite */
  .kopf:has(.kopf__links) {
    position: relative;
    flex-wrap: wrap;
  }

  .kopf:has(.kopf__links) .kopf__logo {
    position: absolute;
    top: 0;
    left: var(--abstand);
    display: flex;
    align-items: center;
    height: var(--zeile-touch);
  }

  .kopf:has(.kopf__links) .kopf__nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-left: 4rem;
  }

  .kopf:has(.kopf__links) .kopf__nav .meta {
    flex: 1 1 0;
    text-align: right;
  }

  .kopf__links {
    order: 1;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0 calc(var(--abstand) * 2);
    margin-left: -4rem;
  }

  /* Baum: Rückmeldung des Schnell-Hinzufügens als eigene Zeile, damit sie die Spalten nicht
     verbreitert; Knopf und Antwort werden dazu direkte Rasterelemente. */
  .baumzeile {
    grid-template-areas:
      "bild artikel artikel menge"
      "bild pos text aktion"
      "bild antwort antwort antwort";
  }

  .baumzeile__aktion,
  .korb-schnell {
    display: contents;
  }

  .korb-schnell .knopf {
    grid-area: aktion;
    justify-self: end;
  }

  .korb-schnell__antwort {
    grid-area: antwort;
  }

  /* Warenkorb als Liste: Artikel, Maschine und Entfernen oben, Bezeichnung, dann Menge und
     Bemerkung mit sichtbarer Beschriftung. */
  .korb-tabelle,
  .korb-tabelle tbody {
    display: block;
  }

  .korb-tabelle thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .korb-tabelle tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "artikel maschine entfernen"
      "text text text"
      "aendern aendern aendern";
    align-items: center;
    gap: 0 var(--abstand);
    padding: var(--abstand) var(--abstand) var(--abstand) calc(var(--abstand) - var(--markierung));
    border-bottom: 1px solid var(--farbe-linie);
  }

  .korb-tabelle td {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
  }

  .korb-tabelle__artikel { grid-area: artikel; }
  .korb-tabelle__maschine { grid-area: maschine; }
  .korb-tabelle__entfernen { grid-area: entfernen; }
  .korb-tabelle__text { grid-area: text; padding-bottom: var(--abstand); }
  .korb-tabelle__aendern { grid-area: aendern; }

  .korb-zeile {
    display: grid;
    grid-template-columns: auto minmax(0, 6rem) minmax(0, 1fr) auto;
    grid-template-areas:
      "lm menge einheit knopf"
      "lb bemerkung bemerkung bemerkung";
    gap: var(--abstand);
    padding: 0;
  }

  .korb-zeile__label.nur-vorleser {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    color: var(--farbe-text-2);
  }

  .korb-zeile__label[for^="menge"] { grid-area: lm; }
  .korb-zeile__label[for^="bemerkung"] { grid-area: lb; }
  .korb-zeile__menge { grid-area: menge; }
  .korb-zeile__einheit { grid-area: einheit; }
  .korb-zeile__bemerkung { grid-area: bemerkung; }
  .korb-zeile .knopf { grid-area: knopf; }

  .aktionen {
    flex-direction: column;
    align-items: stretch;
  }

  .aktionen .formular {
    flex: none;
  }
}

/* --- Rückmeldungen aus der Vorführung (2026-11-02) ------------------------------------------- */

/* „Wo verbaut?“: eine Zeile je Maschine, Baugruppe und Artikel, Mehrfachvorkommen klappen mit
   <details> auf (Pfeil wie im Baum); ein Raster für Kopf, Gruppen und Einzelzeilen. */
.fund {
  min-width: 48rem;
}

.fund__liste,
.fund__einzel {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fundzeile {
  display: grid;
  grid-template-columns:
    1rem minmax(7rem, 1fr) 2rem minmax(10rem, 3fr) minmax(6rem, 2fr) minmax(6rem, 2fr) 4.5rem 7rem;
  align-items: center;
  gap: 0 var(--abstand);
  min-height: var(--zeile);
  padding: 2px var(--abstand);
  border-bottom: 1px solid var(--farbe-linie);
  font-size: var(--groesse-0);
  overflow-wrap: anywhere;
}

.fund__kopf {
  background: var(--farbe-flaeche-2);
  font-weight: 600;
}

.fundzeile__anzahl,
.fundzeile__menge {
  text-align: right;
  white-space: nowrap;
}

summary.fundzeile {
  cursor: pointer;
  list-style: none;
}

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

summary.fundzeile:hover {
  background: var(--farbe-flaeche-2);
}

summary.fundzeile:focus-visible {
  outline-offset: -2px;
}

summary.fundzeile .fundzeile__pfeil::before {
  content: "";
  display: block;
  width: 0.4375rem;
  height: 0.625rem;
  background: var(--farbe-text-2);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 150ms ease-out;
}

details[open] > summary.fundzeile .fundzeile__pfeil::before {
  transform: rotate(90deg);
}

.fund__einzel {
  background: var(--farbe-flaeche-2);
}

/* Mittlere Breiten: die Suche rutscht in eine eigene Zeile, damit die Navigation nicht abreißt */
@media (min-width: 641px) and (max-width: 900px) {
  .kopf {
    flex-wrap: wrap;
  }

  .kopf__suche {
    order: 1;
    flex-basis: 100%;
    max-width: none;
    padding-bottom: var(--abstand);
  }
}

/* Sprachumschalter im Kopf: „DE | EN“; die aktive Sprache ist Text, die andere ein Knopf */
.sprache {
  display: inline-flex;
  margin: 0;
}

.sprache > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--zeile);
  padding: 0 var(--abstand);
}

.sprache > * + * {
  border-left: 1px solid var(--farbe-linie);
}

.sprache__aktiv {
  font-weight: 600;
}

.sprache button {
  font: inherit;
  color: var(--farbe-akzent);
  background: none;
  border: 0;
  border-left: 1px solid var(--farbe-linie);
  cursor: pointer;
}

[hidden] {
  display: none !important; /* .knopf setzt display; hidden muss trotzdem gelten */
}

/* Bestätigungsdialog (natives <dialog>, geöffnet von Alpine). Ohne JavaScript bleibt das
   <details> daneben als zweistufige Rückfrage; portal.js blendet es aus. */
.dialog__frage {
  font-size: var(--groesse-2);
  font-weight: 600;
  margin-bottom: calc(var(--abstand) * 2);
}

.dialog__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
}

.dialog .formular {
  max-width: none;
}

.dialog .formular .knopf {
  margin-top: 0;
}

@media (pointer: coarse), (max-width: 640px) {
  .sprache > *,
  summary.fundzeile {
    min-height: var(--zeile-touch);
    min-width: var(--zeile-touch);
  }

  .fundzeile a {
    display: inline-flex;
    align-items: center;
    min-height: var(--zeile-touch);
  }
}

/* Listenform bis 480 px für „Wo verbaut?“ und Tabellen mit .tabelle--liste (Anfragen): jede
   Zeile ein Block, jede Zelle mit sichtbarer Beschriftung aus data-label (gettext im Markup). */
@media (max-width: 480px) {
  .fund {
    min-width: 0;
  }

  .fund__kopf {
    display: none;
  }

  .fundzeile {
    grid-template-columns: 3rem 1rem minmax(0, 1fr);
    grid-template-areas:
      "bild pfeil artikel"
      "bild . text"
      "bild . maschine"
      "bild . baugruppe"
      "bild . anzahl"
      "bild . menge";
    align-items: start;
    padding: var(--abstand);
  }

  .fundzeile__pfeil { grid-area: pfeil; padding-top: 1rem; }
  .fundzeile__artikel { grid-area: artikel; font-size: var(--groesse-1); font-weight: 600; }
  .fundzeile__bild { grid-area: bild; }
  .fundzeile__text { grid-area: text; }
  .fundzeile__maschine { grid-area: maschine; }
  .fundzeile__baugruppe { grid-area: baugruppe; }
  .fundzeile__anzahl { grid-area: anzahl; }
  .fundzeile__menge { grid-area: menge; }

  .fundzeile__anzahl,
  .fundzeile__menge {
    text-align: left;
  }

  .fundzeile > :empty:not(.fundzeile__pfeil),
  .tabelle--liste td:empty {
    display: none;
  }

  [data-label]::before {
    content: attr(data-label) ": ";
    color: var(--farbe-text-2);
  }

  .tabelle--liste,
  .tabelle--liste tbody {
    display: block;
  }

  .tabelle--liste thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tabelle--liste tbody tr {
    display: block;
    padding: var(--abstand);
    border-bottom: 1px solid var(--farbe-linie);
    background: none;
  }

  .tabelle--liste td {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    white-space: normal;
    text-align: left;
  }

  .tabelle--liste td:first-child {
    font-size: var(--groesse-1);
    font-weight: 600;
  }
}