/* SAWTec Auftragsbuch - Gestaltung
   Ein einziges Stylesheet, keine externen Abhaengigkeiten, damit die
   Anwendung auch ohne Internetzugang im Firmennetz vollstaendig laeuft. */

:root {
  color-scheme: light dark;

  --grund:        #f4f5f7;
  --flaeche:      #ffffff;
  --flaeche-2:    #fafbfc;
  --rand:         #dfe3e8;
  --rand-stark:   #c5cbd3;
  --schrift:      #1b1f24;
  --schrift-matt: #626b76;
  --akzent:       #1f5fa8;
  --akzent-hell:  #e8f0fa;
  --akzent-text:  #ffffff;
  --gut:          #1a7f4b;
  --gut-hell:     #e5f4ec;
  --warn:         #a35a00;
  --warn-hell:    #fdf1e0;
  /* Gelb und Orange getrennt: der Auftragsstatus unterscheidet „aus
     Angebot" (gelb) von „Neu" (orange), und mit einer Farbe fuer beides
     saehe man den Unterschied nicht. */
  --gelb:         #8a6d00;
  --gelb-hell:    #fbf6da;
  --fehler:       #b3261e;
  --fehler-hell:  #fbeae9;
  --schatten:     0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  --radius:       10px;
  --radius-klein: 7px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:        #14171c;
    --flaeche:      #1b1f26;
    --flaeche-2:    #21262e;
    --rand:         #2e343d;
    --rand-stark:   #414a55;
    --schrift:      #e6e9ee;
    --schrift-matt: #98a2b0;
    --akzent:       #559bec;
    --akzent-hell:  #17263a;
    --akzent-text:  #0d1117;
    --gut:          #4ac48a;
    --gut-hell:     #14291f;
    --warn:         #e0a458;
    --warn-hell:    #2c2216;
    --gelb:         #d8c256;
    --gelb-hell:    #2a2713;
    --fehler:       #f27a72;
    --fehler-hell:  #2f1a19;
    --schatten:     0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

/* Kein Zucken beim Seitenwechsel (Kevin am 12.09.2026: „die seite zuckt,
   wenn man links auf einen reiter drückt").
   - Der Platz für die Scrollleiste bleibt immer frei: sonst rückte der
     ganze Inhalt zur Seite, sobald eine Seite kürzer oder länger war
     (Mac mit Maus, Windows).
   - Der Browser blendet zwischen zwei Seiten kurz über statt hart zu
     schneiden; die Leiste links bleibt dabei stehen. Browser ohne diese
     Möglichkeit wechseln wie bisher, wer weniger Bewegung eingestellt
     hat, ebenso. */
html { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .12s; }
.seitenleiste { view-transition-name: seitenleiste; }
::view-transition-old(seitenleiste),
::view-transition-new(seitenleiste) { animation: none; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.rahmen { display: flex; min-height: 100vh; }

.seitenleiste {
  width: 232px;
  flex: 0 0 232px;
  background: var(--flaeche);
  border-right: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marke {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rand);
  display: block;
  color: var(--schrift);
}
.marke:hover { text-decoration: none; }
.marke b { display: block; font-size: 13.5px; letter-spacing: -.1px; margin-top: 9px; }
.marke span { display: block; font-size: 12px; color: var(--schrift-matt); margin-top: 1px; }
.marke span svg { width: 1em; height: 1em; vertical-align: -.15em; margin-right: 5px; fill: currentColor; }

.marke .logo {
  display: block;
  width: auto;
  max-width: 100%;
  /* Nach oben begrenzt, damit ein hohes Logo nicht das halbe Menue
     verdeckt - die Seitenleiste ist 100vh hoch und teilt sich den
     Platz mit acht Abteilungen (10.09.2026). Ein breites Logo darf
     die volle Breite nehmen, ein quadratisches bleibt klein. */
  max-height: 46px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}
/* Helles Logo auf dunklem Grund und umgekehrt. Drei Faelle: feste Wahl
   hell, feste Wahl dunkel, und "wie Windows" ueber prefers-color-scheme. */
.marke .logo.dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"]) .marke .logo.hell { display: none; }
  body:not([data-farbe="hell"]) .marke .logo.dunkel { display: block; }
}
body[data-farbe="dunkel"] .marke .logo.hell { display: none; }
body[data-farbe="dunkel"] .marke .logo.dunkel { display: block; }
body[data-farbe="hell"] .marke .logo.hell { display: block; }
body[data-farbe="hell"] .marke .logo.dunkel { display: none; }

.menue { padding: 12px 10px; flex: 1; overflow-y: auto; }
.menue a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-klein);
  color: var(--schrift);
  font-weight: 500;
  margin-bottom: 2px;
}
.menue a:hover { background: var(--flaeche-2); text-decoration: none; }

/* Abmelden ist ein Formular (POST), sieht aber aus wie ein Link - im
   Menü wie die Menüpunkte daneben. */
form.abmelden { display: inline; margin: 0; }
.als-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--akzent); cursor: pointer;
}
.als-link:hover { text-decoration: underline; }
.benutzerfeld .als-link { font-size: 12px; }
.menue form.abmelden { display: block; }
.menue form.abmelden .als-link {
  display: flex; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--radius-klein);
  color: var(--schrift); font-weight: 500; margin-bottom: 2px;
}
.menue form.abmelden .als-link:hover {
  background: var(--flaeche-2); text-decoration: none;
}
body[data-layout="werkstatt"] .menue form.abmelden .als-link {
  padding: 13px 15px; font-size: 16px;
}
.menue a.aktiv { background: var(--akzent-hell); color: var(--akzent); }
.menue .gruppe {
  /* Kevin am 26.08.2026: "die Schrift dicker und mehr staerker sichtbar" */
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--schrift);
  padding: 14px 12px 6px;
  font-weight: 800;
}

.benutzerfeld {
  padding: 14px 16px;
  border-top: 1px solid var(--rand);
  font-size: 13px;
}
.benutzerfeld b { display: block; }
.benutzerfeld span { color: var(--schrift-matt); font-size: 12px; }
.benutzerfeld a { font-size: 12px; }

.inhalt { flex: 1; min-width: 0; padding: 26px 32px 60px; }

.kopfzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.kopfzeile h1 { margin: 0; font-size: 23px; letter-spacing: -.3px; }
.kopfzeile p { margin: 4px 0 0; color: var(--schrift-matt); font-size: 14px; }
.kopfzeile .werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Karten */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  margin-bottom: 18px;
  overflow: hidden;
}
.karte > h2 {
  margin: 0;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--rand);
  background: var(--flaeche-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.karte > h2 small { font-weight: 400; color: var(--schrift-matt); }
.karte .inhalt-block { padding: 18px; }

/* Deutlich hervorgehobene Karte - z. B. wenn Zeit fuer einen Kollegen
   nachgetragen wird und man das auf keinen Fall uebersehen soll. */
.karte.hervor {
  border-color: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-hell);
}
.karte.hervor > h2 { background: var(--warn-hell); color: var(--warn); }
.karte.hervor > h2 small { color: var(--warn); }

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.kachel {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--schatten);
}
.kachel .wert { font-size: 26px; font-weight: 650; letter-spacing: -.5px; }
.kachel .titel { font-size: 12.5px; color: var(--schrift-matt); margin-top: 2px; }

a.kachel {
  color: var(--schrift);
  display: block;
  transition: border-color .12s, transform .12s;
}
a.kachel:hover {
  text-decoration: none;
  border-color: var(--akzent);
  transform: translateY(-1px);
}
a.kachel:hover .titel { color: var(--akzent); }
.kachel-pfeil {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--akzent);
  margin-top: 7px;
  opacity: 0;
  transition: opacity .12s;
}
a.kachel:hover .kachel-pfeil { opacity: 1; }
a.kachel.wichtig { border-left: 3px solid var(--warn); }

/* ---------------------------------------------------------------- Tabelle */

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

table.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
table.liste th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--schrift-matt);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rand);
  background: var(--flaeche-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.liste td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}
table.liste tbody tr:hover { background: var(--flaeche-2); }
table.liste tbody tr:last-child td { border-bottom: none; }
.rechts { text-align: right; }
.eng { white-space: nowrap; }
.matt { color: var(--schrift-matt); }
.klein { font-size: 12.5px; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.leer {
  padding: 44px 20px;
  text-align: center;
  color: var(--schrift-matt);
}

/* ---------------------------------------------------------------- Marken */

.marker {
  display: inline-block;
  padding: 2.5px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  color: var(--schrift-matt);
}
.marker.gut    { background: var(--gut-hell);    color: var(--gut);    border-color: transparent; }
.marker.warn   { background: var(--warn-hell);   color: var(--warn);   border-color: transparent; }
.marker.fehler { background: var(--fehler-hell); color: var(--fehler); border-color: transparent; }
.marker.info   { background: var(--akzent-hell); color: var(--akzent); border-color: transparent; }
.marker.gelb   { background: var(--gelb-hell);   color: var(--gelb);   border-color: transparent; }
/* Orange ist derselbe Ton wie warn - eine eigene Klasse, damit im Makro
   steht, was gemeint ist, und nicht „warn" fuer einen neuen Auftrag. */
.marker.orange { background: var(--warn-hell);   color: var(--warn);   border-color: transparent; }

/* ---------------------------------------------------------------- Formulare */

.feldgitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px 18px;
}
.feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.feld.breit { grid-column: 1 / -1; }
.feld label { font-size: 12.5px; font-weight: 600; color: var(--schrift-matt); }

input[type=text], input[type=number], input[type=date], input[type=password],
input[type=search], select, textarea {
  font: inherit;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  padding: 8px 10px;
  width: 100%;
  min-width: 0;
}
textarea { resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: -1px;
  border-color: var(--akzent);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--flaeche-2);
  color: var(--schrift-matt);
  cursor: not-allowed;
}
.ankreuz { flex-direction: row; align-items: center; gap: 8px; }
.ankreuz input { width: auto; }
.ankreuz label { font-weight: 500; color: var(--schrift); }

.knopf {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-klein);
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
  color: var(--schrift);
  cursor: pointer;
  white-space: nowrap;
}
.knopf:hover { background: var(--flaeche-2); text-decoration: none; }
.knopf.haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
}
.knopf.haupt:hover { filter: brightness(1.08); }
.knopf.gefahr { color: var(--fehler); border-color: var(--rand-stark); }
.knopf.gefahr:hover { background: var(--fehler-hell); }
.knopf.klein { padding: 5px 11px; font-size: 13px; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }

.knopfzeile {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ---------------------------------------------------------------- Suchleiste */

.suchleiste {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rand);
  background: var(--flaeche-2);
}
.suchleiste .feld { flex: 0 0 auto; }
.suchleiste .feld.wachsend { flex: 1 1 260px; }

/* ---------------------------------------------------------------- Hinweise */

.hinweis {
  padding: 11px 16px;
  border-radius: var(--radius-klein);
  margin-bottom: 12px;
  font-size: 14px;
  border: 1px solid transparent;
}
.hinweis.ok      { background: var(--gut-hell);    color: var(--gut);    }
.hinweis.warnung { background: var(--warn-hell);   color: var(--warn);   }
.hinweis.fehler  { background: var(--fehler-hell); color: var(--fehler); }

.schutzband {
  background: var(--warn-hell);
  color: var(--warn);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--rand);
}

/* ---------------------------------------------------------------- Blättern */

.blaettern {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--rand);
  font-size: 13.5px;
  color: var(--schrift-matt);
  flex-wrap: wrap;
}
.blaettern .fuellung { flex: 1; }

/* ---------------------------------------------------------------- Positionen */

.position {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: var(--flaeche);
  overflow: hidden;
}
.position > summary {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  /* Seit die Arbeitsgaenge ihren Namen tragen, wird die Zeile lang.
     Sie bricht lieber um, als seitlich zu scrollen. */
  flex-wrap: wrap;
  gap: 12px;
  background: var(--flaeche-2);
  font-size: 14px;
  list-style: none;
}
.position > summary::-webkit-details-marker { display: none; }
.position > summary::before {
  content: "▸";
  color: var(--schrift-matt);
  transition: transform .15s;
}
.position[open] > summary::before { transform: rotate(90deg); }
.position > summary .nr {
  font-weight: 700;
  min-width: 26px;
  color: var(--schrift-matt);
}
.position > summary .bez { font-weight: 600; flex: 1; min-width: 0; }
.position .koerper { padding: 16px; border-top: 1px solid var(--rand); }

.unterliste { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.unterliste th, .unterliste td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--rand);
  text-align: left;
}
.unterliste th { color: var(--schrift-matt); font-weight: 600; font-size: 11.5px; text-transform: uppercase; }

.abschnitt-titel {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--schrift-matt);
  margin: 18px 0 6px;
}

.summenblock {
  margin-left: auto;
  width: min(340px, 100%);
  font-size: 14px;
}
.summenblock div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}
.summenblock div.gesamt {
  border-top: 2px solid var(--rand-stark);
  margin-top: 4px;
  padding-top: 10px;
  font-weight: 700;
  font-size: 17px;
}

/* ---------------------------------------------------------------- Anmeldung */

.anmeldeseite {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.anmeldekarte {
  width: min(420px, 100%);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 14px;
  box-shadow: var(--schatten);
  padding: 32px;
}
.anmeldekarte h1 { margin: 0 0 4px; font-size: 21px; text-align: center; }
.anmeldekarte p.unter { text-align: center; }
.anmeldekarte .logo.dunkel { display: none !important; }
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"]) .anmeldekarte .logo.hell { display: none !important; }
  body:not([data-farbe="hell"]) .anmeldekarte .logo.dunkel { display: block !important; }
}
body[data-farbe="dunkel"] .anmeldekarte .logo.hell { display: none !important; }
body[data-farbe="dunkel"] .anmeldekarte .logo.dunkel { display: block !important; }
.anmeldekarte p.unter { margin: 0 0 24px; color: var(--schrift-matt); font-size: 14px; }
.anmeldekarte .feld { margin-bottom: 14px; }
.anmeldekarte .knopf { width: 100%; justify-content: center; padding: 11px; }
.pin-feld { letter-spacing: 6px; font-size: 18px; text-align: center; }

/* ---------------------------------------------------------------- Reiter */

.reiter {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.reiter-knopf {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  background: none;
  color: var(--schrift-matt);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.reiter-knopf:hover { color: var(--schrift); }
.reiter-knopf.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }

.reiter-inhalt { display: none; }
.reiter-inhalt.aktiv { display: block; }

/* ---------------------------------------------------------------- Scanliste */

.scanliste {
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  max-height: 260px;
  overflow-y: auto;
  margin-top: 6px;
  background: var(--flaeche);
}
.scanliste button {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--rand);
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--schrift);
  cursor: pointer;
}
.scanliste button:last-child { border-bottom: none; }
.scanliste button:hover { background: var(--flaeche-2); }
.scanliste button.gewaehlt { background: var(--akzent-hell); color: var(--akzent); }
.scanliste button .name { flex: 1; font-variant-numeric: tabular-nums; }
.scanliste button .neben { color: var(--schrift-matt); font-size: 12px; white-space: nowrap; }
.scanliste button.gewaehlt .neben { color: var(--akzent); }
.scanliste .platzhalter { padding: 14px; color: var(--schrift-matt); font-size: 13px; }

input[type=file] {
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--schrift);
  width: 100%;
}

/* ---------------------------------------------------------------- Diagramme */

.balken { display: flex; flex-direction: column; gap: 9px; }
.balken-zeile {
  display: grid;
  grid-template-columns: minmax(min(120px, 100%), 210px) 1fr auto auto;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.balken-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.balken-spur {
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 5px;
  height: 20px;
  overflow: hidden;
}
.balken-fuellung {
  height: 100%;
  background: var(--akzent);
  border-radius: 4px 0 0 4px;
  min-width: 2px;
}
.balken-fuellung.zweit { background: var(--gut); }
.balken-wert { min-width: 74px; text-align: right; font-weight: 600; }
.balken-anteil { min-width: 46px; text-align: right; font-size: 12.5px; }

.saeulen {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 150px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rand-stark);
  overflow-x: auto;
}
.saeule {
  flex: 1 0 6px;
  min-width: 6px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.saeule-fuellung {
  width: 100%;
  background: var(--akzent);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: background .12s;
}
.saeule:hover .saeule-fuellung { background: var(--gut); }
.saeulen-achse {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  gap: 10px;
}

@media (max-width: 700px) {
  .balken-zeile { grid-template-columns: 1fr auto; }
  .balken-spur, .balken-anteil { display: none; }
}

/* ------------------------------------------------------- Zeichnungsvorschau */

.vorschaugitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  gap: 14px;
}
.vorschaukachel {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche);
  display: flex;
  flex-direction: column;
}
.vorschaubild {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border-bottom: 1px solid var(--rand);
}
.vorschauleer {
  height: 170px;
  display: grid;
  place-items: center;
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--rand);
  color: var(--schrift-matt);
  font-size: 12.5px;
  text-align: center;
  padding: 12px;
}
.vorschautext { padding: 9px 11px; font-size: 12.5px; flex: 1; }
.vorschautext b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschaufuss {
  display: flex;
  gap: 6px;
  padding: 0 11px 11px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- Beleg-Druck */

.brief { max-width: 190mm; margin: 0 auto; background: var(--flaeche); color: var(--schrift); }
.brief-kopf { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
.brief-firma { font-size: 12px; line-height: 1.5; text-align: right; }
.brief-firma b { font-size: 15px; display: block; margin-bottom: 3px; }
.brief-anschrift { margin: 34px 0 26px; line-height: 1.55; font-size: 14px; }
.brief-titel { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.brief-zeilen { display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px; margin-bottom: 20px; }
.brief-zeilen div span { color: var(--schrift-matt); display: block; font-size: 11.5px; }
table.brieftabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.brieftabelle th {
  text-align: left;
  border-bottom: 2px solid var(--schrift);
  padding: 7px 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
table.brieftabelle td { padding: 8px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.brief-fuss { margin-top: 30px; font-size: 11px; color: var(--schrift-matt); line-height: 1.6;
              border-top: 1px solid var(--rand); padding-top: 12px; }

@media print {
  /* Der Brief (Mahnung) haette gern etwas mehr Rand als ein Beleg. Das geht
     nur ueber eine benannte Seite - ein zweites schlichtes @page wuerde die
     Raender ALLER Ausdrucke ueberschreiben, auch die der Rechnungen. */
  .brief { max-width: none; page: brief; }
}
@page brief { size: A4; margin: 18mm 16mm; }

/* Lieferscheine und Rechnungen nebeneinander - auf schmalen Bildschirmen
   und im Werkstatt-Layout untereinander. */
.belegspalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px;
}
.belegspalten .abschnitt-titel { margin-top: 0; }

/* ================================================ Geschäftsbrief SAW
   Rechnung und Lieferschein im Layout des Altsystems (Muster R1688/26).
   Wie beim Prüfprotokoll bewusst feste Größen in Millimetern und schwarze
   Schrift statt der Themenfarben: das Blatt geht an den Kunden und muss
   gedruckt immer gleich aussehen.
   ========================================================================== */

/* Ein Blatt ist ein Blatt: 210 x 297 mm, mit denselben Raendern wie beim
   Drucken (@page unten). Dadurch zeigt der Bildschirm genau das, was aus dem
   Drucker kommt - Umbrueche inbegriffen. Vorher war das Blatt beliebig lang
   und lief beim Drucken unten heraus. */
.sawblatt {
  background: #fff;
  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 40px;
  /* Dieselben Raender wie @page weiter unten (14 mm oben/unten, 12 mm
     links/rechts). Nur so ist der Platz am Bildschirm derselbe wie im
     Druck - vorher waren es hier 12/14, also 4 mm mehr Hoehe, und ein
     Beleg, der am Bildschirm gerade noch passte, warf im Druck die
     Fusszeile auf ein zweites Blatt. */
  padding: 14mm 12mm;
  box-shadow: var(--schatten);
  font-size: 10pt;
  line-height: 1.35;
  /* Der Fuss sitzt unten am Blatt, nicht direkt unter der letzten Zeile. */
  display: flex;
  flex-direction: column;
}
.saw-inhalt { flex: 1 1 auto; }

/* Durchgaengig schwarz: sonst faerben allgemeine Regeln wie .klein oder
   .matt einzelne Stellen im Theme-Grau ein - auf einem Beleg, der zum Kunden
   geht, soll nichts blass oder blaeulich sein. */
.sawblatt, .sawblatt * { color: #000; }
/* Das Logo steht gross in der Mitte ueber dem Briefkopf - auf jedem
   gedruckten Beleg: Angebot, Auftragsbestaetigung, Lieferschein,
   Rechnung, Mahnung. Kevin am 09.09.2026. */
.saw-logoband { text-align: center; margin-bottom: 5mm; }
.saw-logo {
  display: block;
  height: 24mm;
  max-width: 120mm;
  object-fit: contain;
  margin: 0 auto;
}
.saw-trenner { border-top: 0.3mm solid #9a9a9a; margin-bottom: 5mm; }

/* Das Logo ganz oben auf jedem Beleg, mittig ueber der ganzen Breite
   (10.09.2026). Kevin: "nicht links immer mittig" - auf einem
   Briefbogen steht der Kopf in der Mitte, und alle Ausdrucke sollen
   gleich aussehen, ob Angebot, Lieferschein oder Rechnung. */
.saw-logozeile {
  margin-bottom: 6mm;
  line-height: 0;
  text-align: center;
}
.saw-logozeile .saw-logo {
  max-width: 105mm;
  width: auto;
  /* `margin: 0 auto` kommt aus `.saw-logo` und zentriert - genau so
     soll es sein. */
  object-fit: contain;
}

.saw-kopf { display: flex; gap: 12mm; align-items: flex-start; }
.saw-links { flex: 1 1 auto; min-width: 0; }
.saw-absenderzeile {
  font-size: 7.5pt;
  text-decoration: underline;
  margin-bottom: 8mm;
}
.saw-anschrift { font-size: 11pt; line-height: 1.5; padding-left: 3mm; }
.saw-firma { width: 62mm; flex: 0 0 62mm; font-size: 9pt; line-height: 1.32; }
.saw-lueckchen { height: 2.5mm; }

.saw-datum { margin-top: 8mm; text-align: right; }
.saw-datumlabel { font-size: 13pt; }
.saw-datum b { font-size: 14pt; }
.saw-seite { font-size: 9pt; margin-top: 1mm; }

.saw-nummern { margin-top: 2mm; }
.saw-nrzeile { display: flex; align-items: baseline; gap: 4mm; flex-wrap: wrap; }
.saw-nrzeile b { font-size: 12pt; }
.saw-nrwert { font-size: 11pt; }
.saw-bedingung { font-size: 9.5pt; margin-top: 2mm; }
.saw-freitext { font-size: 10pt; margin: 2.5mm 0 0; }

.saw-tabelle { width: 100%; border-collapse: collapse; margin-top: 3mm; }
.saw-tabelle th {
  font-size: 9.5pt;
  font-weight: 700;
  text-align: left;
  padding: 0 2mm 1.5mm;
  border-bottom: 0.3mm solid #000;
  color: #000;
}
.saw-tabelle td {
  padding: 1.5mm 2mm 2mm;
  vertical-align: top;
  color: #000;
  font-size: 10pt;
}
.saw-tabelle .mitte, .saw-fuss .mitte, .saw-summen .mitte { text-align: center; }
/* "Termin aus Angebot" muss in eine Zeile passen - ein Umbruch macht die
   Kopfzeile hoeher und schiebt die Fussleiste auf ein eigenes Blatt. */
.saw-tabelle th.terminkopf { font-size: 8pt; white-space: nowrap; }
.saw-zeichnr { font-family: Consolas, "Courier New", monospace; font-size: 9pt; }
.saw-langtext { margin: 1mm 0 0 8mm; font-size: 9.5pt; line-height: 1.32; }

.saw-abschluss {
  display: flex;
  justify-content: space-between;
  gap: 10mm;
  margin-top: 10mm;
}
.saw-lieferhinweis { font-size: 10pt; max-width: 70mm; padding-top: 1mm; }
.saw-summen { border-collapse: collapse; min-width: 78mm; }
.saw-summen td {
  padding: 1.5mm 2mm;
  border-bottom: 0.3mm solid #000;
  font-size: 11pt;
  color: #000;
}
.saw-summen tr:first-child td { font-weight: 700; }
.saw-summen .saw-endsumme td { font-weight: 700; border-bottom: none; }

.saw-zahlbar { text-align: center; font-size: 10pt; margin-top: 4mm; }
.saw-zahlbar.rechts { text-align: right; }

/* --------------------------------------------------------------- Mahnung
   Aufbau nach den Ausdrucken aus dem Altsystem: Titel, Anrede, Begruendung,
   dann die Tabelle mit Re.Nr. bis Mahnstufe, darunter Mahngebuehren und
   "Zu zahlen". Alles auf demselben Briefbogen wie Rechnung und
   Lieferschein. */
.mahn-titel {
  font-size: 14pt;
  font-weight: 700;
  margin: 8mm 0 6mm;
  color: #000;
}
.mahn-text {
  font-size: 10.5pt;
  line-height: 1.45;
  margin: 0 0 4mm;
  color: #000;
  /* Der Fliesstext soll nicht ueber die halbe Seite hinaus laufen -
     im Original bricht er ebenfalls frueh um. */
  max-width: 150mm;
}
.mahn-waehrung {
  text-align: right;
  font-size: 10pt;
  margin-top: 8mm;
  color: #000;
}
.mahn-tabelle { width: 100%; border-collapse: collapse; margin-top: 1mm; }
.mahn-tabelle th {
  font-size: 10pt;
  font-weight: 700;
  text-align: left;
  padding: 0 2mm 1.5mm;
  border-bottom: 0.3mm solid #000;
  color: #000;
}
.mahn-tabelle td {
  padding: 2mm;
  font-size: 10pt;
  color: #000;
}
.mahn-tabelle .rechts { text-align: right; }

/* Gebuehr und Endsumme sind Zeilen derselben Tabelle - so stehen alle
   Betraege in einer Flucht und man kann die Rechnung nachvollziehen. */
.mahn-zusatz td { padding-top: 0; }
.mahn-endsumme td {
  font-weight: 700;
  font-size: 11pt;
  padding-top: 1.5mm;
  border-top: 0.3mm solid #000;
}
/* Der Strich gehoert nur unter die Betragsspalten, nicht unter die
   Mahnstufe ganz rechts. */
.mahn-endsumme td:last-child { border-top: none; }

/* Angebot und Auftragsbestätigung: Nummernblock links, Datum rechts */
.saw-belegkopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10mm;
  margin-top: 6mm;
}
.saw-nrblock { border-collapse: collapse; }
.saw-nrblock td { padding: 0 4mm 1.5mm 0; vertical-align: baseline; color: #000; }
.saw-nrlabel { font-size: 12pt; font-weight: 700; white-space: nowrap; }
.saw-datumblock { text-align: right; white-space: nowrap; }
.saw-bestellzeile {
  display: flex;
  align-items: baseline;
  gap: 4mm;
  margin-top: 4mm;
}
.saw-bestellzeile b { font-size: 12pt; }
/* Der Liefertermin - ausdruecklich benannt, damit ihn niemand mit dem
   Belegdatum oben rechts verwechselt. */
.saw-liefertermin {
  display: flex; align-items: baseline; gap: 4mm; margin-top: 2mm;
}
.saw-liefertermin b { font-size: 12pt; }
.saw-belegtitel {
  font-size: 13pt;
  font-weight: 700;
  margin: 5mm 0 0;
  color: #000;
}

/* Empfangsbestaetigung und - beim Lieferschein - der Instagram-Hinweis
   stehen nebeneinander. Der Hinweis nutzt damit den Platz, der rechts
   neben den Unterschriftszeilen ohnehin frei ist, und macht den Beleg
   keinen Millimeter laenger: die 39 mm, die DRUCK_MASSE fuer den
   Abschlussblock zuruecklegt (repo.py), bleiben unveraendert gueltig.
   Ohne den Hinweis ist es eine Zeile mit einem einzigen Kind und sieht
   aus wie vorher. Die Empfangsbestaetigung gibt es ohnehin nur auf dem
   Lieferschein - Rechnung und Angebot sind nicht betroffen. */
.saw-empfang { margin-top: 16mm; display: flex; align-items: flex-start; gap: 10mm; }
.saw-empfang-text { flex: 1 1 auto; min-width: 0; }

/* Der Hinweis selbst. 18 mm ist die Groesse, ab der ein Handy den Code aus
   normaler Leseentfernung sicher erfasst; die Ruhezone von zwei Modulen
   steckt bereits in der Grafik, deshalb hier kein zusaetzlicher Rand.
   Der Block ist niedriger als die Unterschriftszeilen daneben und
   bestimmt die Hoehe des Abschlusses damit nicht mit. */
.saw-social { flex: none; display: flex; gap: 3mm; font-size: 8.5pt; line-height: 1.3; }
.saw-social-code { width: 18mm; height: 18mm; display: block; flex: none; }
.saw-social-titel { font-weight: 700; }
.saw-unterschriften { display: flex; gap: 14mm; margin-top: 12mm; }
.saw-unterschriften > div { flex: 1; }
.saw-unterlinie { border-top: 0.3mm solid #000; margin-bottom: 1.5mm; }

.saw-fuss {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  /* Nur der Mindestabstand. Die Fusszeile sitzt durch die Flex-Anordnung
     des Blattes ohnehin unten am Papier - die frueheren 24 mm haben oben
     Platz fuer eine ganze Position gekostet. */
  margin-top: 8mm;
  padding-top: 2mm;
  border-top: 0.3mm solid #9a9a9a;
  font-size: 9.5pt;
}
.saw-fuss > div { flex: 1 1 0; }
/* Der mittlere Block traegt den laengsten Text ("Geschäftsführer SAW
   Technologie GmbH") und darf dafuer breiter werden als die Randspalten. */
.saw-fuss > div:nth-child(2) { flex: 2 1 0; white-space: nowrap; }


/* Positionen nie zerschneiden - weder am Bildschirm noch im Druck. Steht
   ausserhalb von @media print, weil Chrome die Regel sonst beim Erzeugen des
   PDF teilweise ignoriert. */
.saw-tabelle tbody tr,
.saw-abschluss,
.saw-empfang,
.saw-summen,
.saw-fuss { break-inside: avoid; page-break-inside: avoid; }

/* Spaltenkoepfe wiederholen sich, falls eine Tabelle doch einmal umbricht. */
.saw-tabelle thead { display: table-header-group; }
.saw-tabelle tfoot { display: table-footer-group; }

@media print {
  /* Im Druck traegt die Seite selbst den Rand (@page), das Blatt darf ihn
     nicht noch einmal aufschlagen. */
  .sawblatt {
    box-shadow: none;
    margin: 0;
    padding: 0;
    width: auto;
    /* Das Blatt soll genau eine Druckseite hoch sein - dann sitzt die
       Fusszeile mit Gerichtsstand und HRB auf JEDER Seite unten und
       rutscht nicht allein auf ein Folgeblatt.

       Genau das ist frueher passiert: hier standen 270 mm, weiter unten
       verkleinerte ein zweites @page die Seite aber auf 269 mm. Ein
       Millimeter zu viel - und der Fuss war auf einer eigenen Seite.

       Zwei Angaben, die zweite gewinnt, wo sie verstanden wird:
       264 mm als feste Ruecklage (A4 minus 2x14 mm Rand, minus 5 mm Luft),
       und 100vh - das ist im Druck genau die Seite abzueglich der Raender.
       Damit stimmt es auch dann noch, wenn jemand im Druckdialog andere
       Raender einstellt. */
    min-height: 264mm;
    min-height: 100vh;
    break-after: page;
    page-break-after: always;
  }
  .sawblatt:last-of-type { break-after: auto; page-break-after: auto; }
}

/* Es darf nur EIN @page geben. Steht die Regel mehrfach in der Datei, gilt
   die letzte fuer das ganze Dokument - unabhaengig davon, welches Blatt
   gerade gedruckt wird. Deshalb hier einmal zentral fuer alle Ausdrucke:
   Belege, Mahnungen und Pruefprotokolle. */
@page { size: A4; margin: 14mm 12mm; }

/* ============================================================ Prüfprotokoll
   Nachbau des Vordrucks Massprotokoll.pdf. Bewusst mit festen Schriftgroessen
   und schwarzen Linien statt der Themenfarben: das Blatt geht als Nachweis
   zum Kunden und soll gedruckt immer gleich aussehen, egal welches Farbschema
   am Bildschirm eingestellt ist.
   ========================================================================== */

.pp-blatt {
  background: #fff;
  color: #000;
  max-width: 210mm;
  margin: 0 auto 40px;
  padding: 16mm 15mm 20mm;
  box-shadow: var(--schatten);
}
/* Mehrere Bauteile in einem Ausdruck: jedes Blatt auf eine eigene Seite. */
.pp-blatt + .pp-blatt { page-break-before: always; break-before: page; }

/* Bauteilauswahl auf der Uebersicht */
.bauteilliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 10px;
}
.bauteilkachel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-2);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.bauteilkachel:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.bt-pos { font-size: 11px; color: var(--schrift-matt); }
.bt-name { font-weight: 600; }
.bt-los { color: var(--akzent); margin-top: 4px; }
.bauteilreiter { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-logo {
  display: block;
  height: 26mm;
  margin-bottom: 12mm;
  text-align: center;
}
/* Das Logo im Pruefprotokoll und auf den Werkstattlisten. Ueberall
   dieselbe Groessenordnung wie auf den Belegen, damit ein Stapel
   Ausdrucke einheitlich aussieht (10.09.2026). */
.pp-logobild {
  max-height: 26mm;
  max-width: 100mm;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}
.druck-logozeile {
  margin-bottom: 6mm;
  line-height: 0;
  text-align: center;
}
.druck-logozeile img {
  max-height: 20mm;
  max-width: 90mm;
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}
.pp-titel {
  font-size: 17pt;
  color: #14476b;
  margin: 0 0 8mm;
}

.pp-kopf { width: 100%; border-collapse: collapse; margin-bottom: 5mm; }
.pp-kopf td { padding: 1mm 2mm 1mm 0; font-size: 10pt; vertical-align: bottom; }
.pp-kopf .pp-label { white-space: nowrap; width: 1%; color: #000; }
.pp-kopf .pp-wert {
  border-bottom: 0.4mm solid #000;
  padding-left: 2mm;
  padding-right: 6mm;
  min-width: 30mm;
  font-weight: 600;
}

.pp-werte {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6mm;
  font-size: 10pt;
}
.pp-werte th, .pp-werte td {
  border: 0.3mm solid #000;
  padding: 2.6mm 2mm;
  text-align: left;
  color: #000;
}
.pp-werte th { font-weight: 700; text-align: center; background: #fff; }
.pp-werte td { height: 8mm; }
/* Auch hier mit .pp-werte davor - sonst gewinnt die allgemeine
   Zellenregel mit text-align: left, und die Positionsnummer klebt links. */
.pp-werte td.pp-pos { text-align: center; font-weight: 700; }
.pp-pos { text-align: center; font-weight: 700; }
/* Mit .pp-werte davor: die allgemeine Zellenregel oben setzt text-align
   auf links und ist als „Klasse + Element" staerker als eine Klasse
   allein. Ohne diesen Vorsatz stand die Toleranz im Ausdruck links,
   obwohl die Zelle als mittig ausgezeichnet war. */
.pp-werte td.pp-mitte { text-align: center; font-weight: 600; }
.pp-mitte { text-align: center; font-weight: 600; }
/* Die Farbe muss die allgemeine Zellenregel oben ueberschreiben - daher mit
   .pp-werte davor. Sonst bleibt n.i.O. schwarz und faellt nicht auf. */
.pp-werte td.pp-gut { color: #1d6b2a; }
.pp-werte td.pp-schlecht { color: #a5231d; font-weight: 700; }

.pp-bemerkung { margin-top: 5mm; font-size: 10pt; }

.pp-fuss { display: flex; gap: 20mm; margin-top: 20mm; }
.pp-unterschrift { flex: 1; max-width: 70mm; }
.pp-linie { border-bottom: 0.3mm solid #000; height: 12mm; }
.pp-fusslabel { font-size: 9pt; padding-top: 1.5mm; }

/* Bewertung am Bildschirm einfaerben, damit n.i.O. sofort auffaellt. */
select.bewertung-gut { color: var(--gut); font-weight: 600; }
select.bewertung-schlecht { color: var(--fehler); font-weight: 600; }
table.protokolltabelle td { padding: 4px 5px; }
table.protokolltabelle input, table.protokolltabelle select { width: 100%; }

@media print {
  .nichtdrucken { display: none !important; }
  /* Auf dem Papier nuetzt ein Menue niemandem, und die Plantafel
     braucht jeden Millimeter Breite. */
  .seitenleiste { display: none !important; }
  .inhalt { padding: 0 !important; }
  body { background: #fff; }
  .pp-blatt { box-shadow: none; margin: 0; padding: 0; max-width: none; }
}

/* ---------------------------------------------------------- Neue Positionen */

.neupos {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin-bottom: 12px;
  background: var(--flaeche-2);
}
.neupos-kopf { display: flex; gap: 10px; align-items: center; }
.neupos-nr {
  font-weight: 700;
  color: var(--schrift-matt);
  min-width: 22px;
  font-size: 15px;
}
.neupos-kopf input { flex: 1; font-weight: 600; }

.scanwahl {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
}
.scanwahl[hidden] { display: none; }
.scanwahl .scanliste { max-height: 200px; margin-top: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px 4px 11px;
  border-radius: 20px;
  background: var(--akzent-hell);
  color: var(--akzent);
  font-size: 12.5px;
  font-weight: 600;
  max-width: 100%;
}
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
  opacity: .7;
}
.chip button:hover { opacity: 1; }

/* ---------------------------------------------------------------- Merkliste */

.menue a.merkeintrag {
  display: block;
  padding: 7px 12px;
  line-height: 1.3;
}
.merknr {
  display: block;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.merkunter {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--schrift-matt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menue a.merkeintrag.aktiv .merkunter { color: var(--akzent); }
.merkleer {
  padding: 4px 12px 8px;
  font-size: 11.5px;
  color: var(--schrift-matt);
  line-height: 1.45;
}
.menue > a.klein { font-size: 12px; font-weight: 500; padding: 6px 12px; }

@media (max-width: 860px) {
  .menue .merkeintrag, .menue .merkleer, .menue > a.klein { display: none; }
}

/* ---------------------------------------------------------------- Vorschlagsliste */

.vorschlagsfeld { position: relative; }
.vorschlaege {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.vorschlaege.offen { display: block; }
.vorschlaege button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  font: inherit;
  color: var(--schrift);
  cursor: pointer;
  border-bottom: 1px solid var(--rand);
}
.vorschlaege button:last-child { border-bottom: none; }
.vorschlaege button:hover, .vorschlaege button.markiert { background: var(--akzent-hell); }
.vorschlaege button small { display: block; color: var(--schrift-matt); font-size: 12px; }

/* ---------------------------------------------------------------- Schmal
   Auf dem Telefon liegt das Menue in einer Schublade hinter einem
   Knopf.

   Vorher wurde die Seitenleiste hier quer gelegt und durfte seitlich
   scrollen. Das Ergebnis sah Kevin am 16.09.2026 auf seinem Handy: ein
   Block ueber den halben Bildschirm, Menuepunkte abgeschnitten
   ("Arbeitspla...", "Dashboar..."), der Inhalt weit darunter. Eine
   waagerechte Liste mit dreissig Punkten ist kein Menue - man sieht
   immer nur drei davon und weiss nie, wie viele noch kommen.

   Gesteuert wird mit einem Ankreuzfeld, nicht mit JavaScript: an einem
   alten Werkstattbildschirm muss das Menue auch dann aufgehen, wenn
   ein Skript nicht laeuft. */

.handyleiste, .menueknopf, .menuehinterrund, .menue-schalter { display: none; }

@media (max-width: 860px) {
  .rahmen { flex-direction: column; }

  /* --- die Leiste oben: Knopf, Firmenname, Konto --- */
  .handyleiste {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 10px 14px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
  }
  .handyleiste b {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 15px;
  }
  .menueknopf {
    width: 40px; height: 36px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid var(--rand); border-radius: var(--radius-klein);
    cursor: pointer;
  }
  /* Drei Striche aus einem Element: der mittlere ist das Kaestchen
     selbst, die beiden anderen haengen davor und dahinter. */
  .menueknopf span,
  .menueknopf span::before,
  .menueknopf span::after {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--schrift); content: "";
  }
  .menueknopf span { position: relative; }
  .menueknopf span::before { position: absolute; top: -6px; }
  .menueknopf span::after { position: absolute; top: 6px; }
  .handykonto {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--akzent-hell, rgba(85,155,236,.16));
    color: var(--akzent);
    font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  }

  /* --- die Schublade --- */
  .seitenleiste {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(290px, 84vw);
    flex: none;
    height: 100dvh;
    /* Ueber allem, was fest auf der Seite klebt - auch ueber dem
       Berater (60). */
    z-index: 70;
    overflow-y: auto;
    border-right: 1px solid var(--rand-stark);
    box-shadow: var(--schatten);
    transform: translateX(-102%);
    transition: transform .22s ease;
  }
  .menue-schalter:checked ~ .seitenleiste { transform: none; }

  .menuehinterrund {
    display: block;
    position: fixed; inset: 0; z-index: 65;
    background: rgba(0, 0, 0, .5);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .menue-schalter:checked ~ .menuehinterrund {
    opacity: 1; pointer-events: auto;
  }

  .inhalt { padding: 18px 16px 50px; }

  /* In der Schublade ist Platz - die Gruppen duerfen wieder dastehen. */
  .menue .gruppe { display: block; }

  /* Der Berater sitzt fest unten rechts (z-index 60) und lag damit
     ueber dem offenen Menue. Solange die Schublade offen ist, tritt er
     zurueck - zwei Dinge uebereinander sind eins zu viel. */
  body:has(.menue-schalter:checked) .beraterecke { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .seitenleiste, .menuehinterrund { transition: none; }
}

@media print {
  .seitenleiste, .knopfzeile, .suchleiste, .blaettern, .werkzeuge { display: none !important; }
  body { background: #fff; }
  .karte { box-shadow: none; break-inside: avoid; }
}

/* ------------------------------------------------------------- Ergebnis */

.ergebnisleiste {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  border: 1px solid var(--rand);
  border-left: 5px solid var(--gut);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.ergebnisleiste.verlust { border-left-color: var(--fehler); }

.ergebniszahl .wert {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--gut);
  font-variant-numeric: tabular-nums;
}
.ergebnisleiste.verlust .ergebniszahl .wert { color: var(--fehler); }
.ergebniszahl .titel { font-size: 12.5px; color: var(--schrift-matt); margin-top: 1px; }

.ergebnisteile {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 13px;
}
.ergebnisteile div { display: flex; flex-direction: column; gap: 2px; }
.ergebnisteile span { color: var(--schrift-matt); font-size: 11.5px; }
.ergebnisteile b { font-size: 15px; }

@media (max-width: 700px) {
  .ergebnisteile { margin-left: 0; gap: 16px; }
}

/* ------------------------------------------------------------- Plantafel */

.plantafel {
  --pt-name: 210px;
  font-size: 12.5px;
  overflow-x: auto;
}
.pt-kopf, .pt-zeile {
  display: grid;
  grid-template-columns: var(--pt-name) minmax(min(520px, 100%), 1fr);
  gap: 10px;
  align-items: center;
}
.pt-kopf { padding-bottom: 6px; border-bottom: 1px solid var(--rand); }

.pt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.pt-name b { font-size: 12.5px; }
.pt-name span { display: block; }
/* Der Kunde steht zuoberst - vor der Auftragsnummer. */
.pt-name .pt-kunde {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-spur {
  position: relative;
  height: 40px;
  background: var(--flaeche-2);
  border-radius: 4px;
  overflow: hidden;
}
.pt-kopf .pt-spur { height: 40px; background: none; overflow: visible; }

/* Wochenraster im Kopf, mit Auslastungssäule */
.pt-woche {
  position: absolute;
  bottom: 0;
  height: 100%;
  border-left: 1px solid var(--rand);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pt-woche.aktuell { background: var(--akzent-hell); }
.pt-last {
  position: absolute;
  bottom: 14px;
  left: 2px;
  right: 2px;
  background: var(--akzent);
  opacity: .30;
  border-radius: 2px 2px 0 0;
  min-height: 0;
}
.pt-kw {
  position: relative;
  font-size: 10px;
  color: var(--schrift-matt);
  font-variant-numeric: tabular-nums;
  padding-bottom: 1px;
}
.pt-woche.aktuell .pt-kw { color: var(--akzent); font-weight: 700; }

.pt-raster {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--rand);
  opacity: .55;
}

.pt-koerper { padding-top: 6px; }
.pt-zeile { padding: 3px 0; }
.pt-zeile:hover .pt-spur { background: var(--akzent-hell); }

.pt-balken {
  position: absolute;
  /* So hoch wie die Spur dahinter - Kevin am 24.08.2026: „so dick wie
     das feld im hintergrund ... das ich besser lesen kann." */
  top: 0;
  height: 100%;
  background: var(--akzent);
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: #fff;
  min-width: 3px;
}
.pt-balken.eng { background: var(--warn); }
.pt-balken.ueberfaellig { background: var(--fehler); }
/* Alle Arbeitsgaenge fertig: gruen schlaegt eng und ueberfaellig -
   die Arbeit ist durch, der Termin ist kein Alarm mehr. */
.pt-balken.fertig { background: var(--gut); }

/* Fremdbearbeitung liegt als eigener Streifen im unteren Teil des Balkens */
.pt-fremd {
  position: absolute;
  top: 25px;
  height: 13px;
  background: var(--gut);
  border-radius: 2px;
  border: 1px solid var(--flaeche);
  display: flex;
  align-items: center;
  padding: 0 3px;
  overflow: hidden;
}
.pt-fremd.offen { background: var(--gut); }
.pt-fremd:not(.offen) { background: var(--gut); opacity: .45; }
.pt-fremd.ueberfaellig { background: var(--fehler); }
.pt-fremd .pt-beschriftung { font-size: 10.5px; color: #fff; }

.pt-beschriftung {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.pt-heute {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--fehler);
  opacity: .75;
  z-index: 3;
}
.pt-kopf .pt-heute { z-index: 4; }

.pt-ausserhalb {
  position: absolute;
  top: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fehler);
  white-space: nowrap;
}
.pt-ausserhalb.links { left: 2px; }
.pt-ausserhalb.rechts { right: 2px; color: var(--schrift-matt); }

.pt-legende {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}
.pt-legende span { display: inline-flex; align-items: center; gap: 6px; }
.pt-probe {
  width: 16px;
  height: 9px;
  border-radius: 2px;
  background: var(--akzent);
  display: inline-block;
}
.pt-probe.eng { background: var(--warn); }
.pt-probe.ueberfaellig { background: var(--fehler); }
.pt-probe.fremd { background: var(--gut); opacity: .45; }
.pt-probe.fremdoffen { background: var(--gut); }
.pt-probe.heute { width: 3px; height: 14px; background: var(--fehler); }

body[data-layout="werkstatt"] .plantafel { font-size: 14px; --pt-name: 240px; }
body[data-layout="werkstatt"] .pt-spur { height: 32px; }
body[data-layout="werkstatt"] .pt-balken { height: 100%; }
body[data-layout="werkstatt"] .pt-fremd { top: 20px; height: 10px; }

body[data-layout="kompakt"] .plantafel { --pt-name: 180px; }
body[data-layout="kompakt"] .pt-spur { height: 22px; }
body[data-layout="kompakt"] .pt-balken { height: 100%; top: 0; }
body[data-layout="kompakt"] .pt-fremd { top: 12px; height: 8px; }

/* ------------------------------------------------------------- Stempeln */

.posauswahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 10px;
}
.poskachel {
  display: grid;
  /* Dritte Zeile fuer die Arbeitsgangwahl. Ohne eigene Flaeche landete
     sie im Zaehlerfeld und quetschte die Bezeichnung auf einen
     Buchstaben je Zeile. */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "nr bez" "nr zeit" "gang gang";
  gap: 2px 10px;
  align-items: center;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  background: var(--flaeche);
}
.poskachel:hover { border-color: var(--rand-stark); }
.poskachel:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.poskachel input { display: none; }
.poskachel .posnr {
  grid-area: nr;
  font-size: 20px;
  font-weight: 700;
  color: var(--schrift-matt);
  min-width: 26px;
}
.poskachel:has(input:checked) .posnr { color: var(--akzent); }
.poskachel .posbez { grid-area: bez; font-weight: 600; }
.poskachel .poszeit { grid-area: zeit; }
.poskachel .posgang { grid-area: gang; margin-top: 8px; }
.poskachel .posgang select { width: 100%; max-width: 100%; }
/* Der Text darf die Kachel nicht sprengen: lange Bezeichnungen wie
   "Schieber SCH-221-G" brechen an der Wortgrenze um. */
.poskachel .posbez, .poskachel .poszeit { min-width: 0; overflow-wrap: anywhere; }

.zeitknoepfe { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.zeitknoepfe .knopf { min-width: 46px; }

body[data-layout="werkstatt"] .poskachel { padding: 16px 18px; }
body[data-layout="werkstatt"] .poskachel .posnr { font-size: 26px; }
body[data-layout="werkstatt"] .zeitknoepfe .knopf { min-width: 60px; }

/* ------------------------------------------------------------ Zeitraumwahl */

.zeitraumwahl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.zeitraumwahl span { margin-right: 4px; }

/* ---------------------------------------------------------------- Material */

.marker.gross {
  font-size: 15px;
  padding: 7px 16px;
  border-radius: 8px;
}
.materialzeile {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.menue a .marker {
  margin-left: auto;
  font-size: 11px;
  padding: 1px 7px;
}
.menue a { justify-content: space-between; }

/* ---------------------------------------------------------- Layout-Auswahl */

.layoutgitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 14px;
}
.layoutgitter.schmal { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

.layoutwahl {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  padding: 13px;
  cursor: pointer;
  background: var(--flaeche);
  transition: border-color .12s, background .12s;
}
.layoutwahl:hover { border-color: var(--rand-stark); }
.layoutwahl.gewaehlt { border-color: var(--akzent); background: var(--akzent-hell); }
.layoutwahl input[type=radio] { display: none; }
.layouttext { min-width: 0; font-size: 13px; line-height: 1.45; }
.layouttext b { display: block; margin-bottom: 3px; font-size: 14px; }
.layouttext span { color: var(--schrift-matt); }

/* Skizze des Aufbaus */
.skizze {
  flex: 0 0 84px;
  width: 84px;
  height: 64px;
  border: 1px solid var(--rand-stark);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  background: var(--flaeche-2);
}
.skizze.breit { flex-direction: column; }
.sk-links {
  width: 20px;
  background: var(--akzent);
  opacity: .82;
  padding: 4px 3px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sk-links span { display: block; height: 3px; background: #fff; opacity: .8; border-radius: 1px; }
.sk-oben {
  height: 12px;
  background: var(--akzent);
  opacity: .82;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 4px;
}
.sk-oben span { width: 11px; height: 3px; background: #fff; opacity: .8; border-radius: 1px; }
.sk-flaeche { flex: 1; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.sk-kacheln { display: flex; gap: 3px; margin-bottom: 2px; }
.sk-kacheln i { flex: 1; height: 9px; background: var(--rand-stark); border-radius: 2px; }
.sk-zeile { height: 4px; background: var(--rand); border-radius: 1px; }
.skizze.kompakt .sk-zeile { height: 3px; }
.skizze.werkstatt .sk-zeile { height: 7px; }
.skizze.werkstatt .sk-kacheln i { height: 13px; }
.skizze.werkstatt .sk-links { width: 24px; }

/* Hintergrundprobe */
.grundprobe {
  flex: 0 0 62px;
  width: 62px;
  height: 50px;
  border: 1px solid var(--rand-stark);
  border-radius: 4px;
  background-color: var(--grund);
}
.grundprobe.hg-blau {
  background-image: linear-gradient(150deg, rgba(31,95,168,.45), rgba(85,155,236,.12) 70%);
}
.grundprobe.hg-gruen {
  background-image: linear-gradient(150deg, rgba(26,127,75,.45), rgba(74,196,138,.12) 70%);
}
.grundprobe.hg-warm {
  background-image: linear-gradient(150deg, rgba(196,106,22,.45), rgba(224,164,88,.12) 70%);
}
.grundprobe.hg-violett {
  background-image: linear-gradient(150deg, rgba(110,72,170,.45), rgba(157,122,214,.12) 70%);
}
.grundprobe.hg-stahl {
  background-image: linear-gradient(150deg, rgba(70,84,99,.5), rgba(140,155,172,.12) 70%);
}
.grundprobe.hg-firma {
  background-image: linear-gradient(150deg, rgba(13,68,103,.6), rgba(41,51,53,.2) 70%);
}

/* Farbprobe */
.farbprobe {
  flex: 0 0 62px;
  width: 62px;
  height: 50px;
  border: 1px solid var(--rand-stark);
  border-radius: 4px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.farbprobe .fp-kopf { height: 8px; border-radius: 2px; }
.farbprobe .fp-zeile { height: 4px; border-radius: 1px; }
.farbprobe .fp-zeile.kurz { width: 60%; }
.farbprobe.hell { background: #ffffff; }
.farbprobe.hell .fp-kopf { background: #1f5fa8; }
.farbprobe.hell .fp-zeile { background: #c5cbd3; }
.farbprobe.dunkel { background: #1b1f26; }
.farbprobe.dunkel .fp-kopf { background: #559bec; }
.farbprobe.dunkel .fp-zeile { background: #414a55; }
.farbprobe.system { background: linear-gradient(115deg, #ffffff 50%, #1b1f26 50%); }
.farbprobe.system .fp-kopf { background: linear-gradient(115deg, #1f5fa8 50%, #559bec 50%); }
.farbprobe.system .fp-zeile { background: linear-gradient(115deg, #c5cbd3 50%, #414a55 50%); }

/* ==========================================================================
   Farbschema erzwingen
   Ohne Angabe folgt die Anwendung der Windows-Einstellung (weiter oben).
   Hier kann der Benutzer das ueberstimmen.
   ========================================================================== */

body[data-farbe="hell"] {
  --grund: #f4f5f7; --flaeche: #ffffff; --flaeche-2: #fafbfc;
  --rand: #dfe3e8; --rand-stark: #c5cbd3;
  --schrift: #1b1f24; --schrift-matt: #626b76;
  --akzent: #1f5fa8; --akzent-hell: #e8f0fa; --akzent-text: #ffffff;
  --gut: #1a7f4b; --gut-hell: #e5f4ec;
  --warn: #a35a00; --warn-hell: #fdf1e0;
  --fehler: #b3261e; --fehler-hell: #fbeae9;
  --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  color-scheme: light;
}

body[data-farbe="dunkel"] {
  --grund: #14171c; --flaeche: #1b1f26; --flaeche-2: #21262e;
  --rand: #2e343d; --rand-stark: #414a55;
  --schrift: #e6e9ee; --schrift-matt: #98a2b0;
  --akzent: #559bec; --akzent-hell: #17263a; --akzent-text: #0d1117;
  --gut: #4ac48a; --gut-hell: #14291f;
  --warn: #e0a458; --warn-hell: #2c2216;
  --fehler: #f27a72; --fehler-hell: #2f1a19;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* ==========================================================================
   Hintergrund
   Durchscheinende Verlaeufe ueber der Grundfarbe. Weil sie durchsichtig sind,
   funktionieren dieselben Werte in Hell und Dunkel - der Verlauf legt sich
   jeweils ueber den passenden Grundton. Karten und Tabellen bleiben deckend,
   damit die Lesbarkeit nicht leidet.
   ========================================================================== */

body[data-hintergrund] { background-attachment: fixed; }

@media print {
  body[data-hintergrund] { background-image: none; }
}

/* ==========================================================================
   Layout: Kompakt
   Mehr Zeilen auf den Bildschirm - fuer die taegliche Arbeit im Buero, wo
   man lange Listen ueberblicken will.
   ========================================================================== */

body[data-layout="kompakt"] { font-size: 13.5px; }
body[data-layout="kompakt"] .seitenleiste { width: 190px; flex-basis: 190px; }
body[data-layout="kompakt"] .inhalt { padding: 16px 20px 40px; }
body[data-layout="kompakt"] .kopfzeile { margin-bottom: 14px; }
body[data-layout="kompakt"] .kopfzeile h1 { font-size: 19px; }
body[data-layout="kompakt"] .karte { margin-bottom: 12px; }
body[data-layout="kompakt"] .karte > h2 { padding: 9px 13px; font-size: 13px; }
body[data-layout="kompakt"] .karte .inhalt-block { padding: 13px; }
body[data-layout="kompakt"] table.liste { font-size: 13px; }
body[data-layout="kompakt"] table.liste th { padding: 6px 10px; }
body[data-layout="kompakt"] table.liste td { padding: 5px 10px; }
body[data-layout="kompakt"] .kachel { padding: 11px 13px; }
body[data-layout="kompakt"] .kachel .wert { font-size: 21px; }
body[data-layout="kompakt"] .kacheln { gap: 10px; margin-bottom: 14px; }
body[data-layout="kompakt"] .suchleiste { padding: 10px 13px; }
body[data-layout="kompakt"] input, body[data-layout="kompakt"] select,
body[data-layout="kompakt"] textarea { padding: 5px 8px; }
body[data-layout="kompakt"] .knopf { padding: 5px 12px; font-size: 13px; }
body[data-layout="kompakt"] .position > summary { padding: 8px 13px; }
body[data-layout="kompakt"] .feldgitter { gap: 10px 14px; }

/* ==========================================================================
   Layout: Werkstatt
   Grosse Schrift, grosse Klickflaechen, kraeftige Kontraste - fuer Tablets
   an den Maschinen und fuer Bildschirme, auf die man aus zwei Metern schaut.
   ========================================================================== */

body[data-layout="werkstatt"] { font-size: 17px; }
body[data-layout="werkstatt"] .seitenleiste { width: 260px; flex-basis: 260px; }
body[data-layout="werkstatt"] .menue a { padding: 13px 15px; font-size: 16px; }
body[data-layout="werkstatt"] .inhalt { padding: 26px 28px 70px; }
body[data-layout="werkstatt"] .kopfzeile h1 { font-size: 27px; }
body[data-layout="werkstatt"] .karte > h2 { padding: 16px 20px; font-size: 16px; }
body[data-layout="werkstatt"] table.liste { font-size: 16px; }
body[data-layout="werkstatt"] table.liste th { font-size: 12.5px; padding: 12px 15px; }
body[data-layout="werkstatt"] table.liste td { padding: 14px 15px; }
body[data-layout="werkstatt"] .kachel .wert { font-size: 32px; }
body[data-layout="werkstatt"] .kachel .titel { font-size: 14px; }
body[data-layout="werkstatt"] .knopf { padding: 12px 20px; font-size: 16px; min-height: 46px; }
body[data-layout="werkstatt"] .knopf.klein { padding: 9px 15px; font-size: 15px; min-height: 40px; }
body[data-layout="werkstatt"] input, body[data-layout="werkstatt"] select,
body[data-layout="werkstatt"] textarea { padding: 12px 13px; font-size: 16px; min-height: 46px; }
body[data-layout="werkstatt"] .ankreuz input[type=checkbox] {
  width: 24px; height: 24px; min-height: 0;
}
body[data-layout="werkstatt"] .position > summary { padding: 16px 18px; font-size: 16px; }
body[data-layout="werkstatt"] .marker { font-size: 13px; padding: 4px 12px; }
body[data-layout="werkstatt"] .klein { font-size: 14px; }
body[data-layout="werkstatt"] .balken-zeile { font-size: 16px; }
body[data-layout="werkstatt"] .balken-spur { height: 26px; }

/* ==========================================================================
   Layout: Breit
   Navigation als Leiste oben, Inhalt ueber die volle Bildschirmbreite -
   gut fuer breite Tabellen wie Rechnungs- und Mahnlisten.
   ========================================================================== */

body[data-layout="breit"] .rahmen { flex-direction: column; }
body[data-layout="breit"] .seitenleiste {
  width: 100%;
  flex: none;
  height: auto;
  position: sticky;
  top: 0;
  z-index: 20;
  flex-direction: row;
  align-items: center;
  border-right: none;
  border-bottom: 1px solid var(--rand);
  overflow-x: auto;
}
body[data-layout="breit"] .marke {
  border-bottom: none;
  border-right: 1px solid var(--rand);
  white-space: nowrap;
  padding: 12px 18px;
}
body[data-layout="breit"] .marke span,
body[data-layout="breit"] .marke b { display: none; }
body[data-layout="breit"] .marke { padding: 8px 16px; }
body[data-layout="breit"] .marke .logo { max-width: 130px; }
body[data-layout="breit"] .menue {
  display: flex;
  gap: 3px;
  padding: 8px 10px;
  flex: 1;
  overflow: visible;
}
body[data-layout="breit"] .menue a { white-space: nowrap; padding: 8px 13px; }
body[data-layout="breit"] .menue .gruppe {
  display: flex;
  align-items: center;
  padding: 0 6px 0 12px;
  border-left: 1px solid var(--rand);
  margin-left: 6px;
}
body[data-layout="breit"] .menue .merkeintrag,
body[data-layout="breit"] .menue .merkleer { display: none; }
body[data-layout="breit"] .benutzerfeld {
  border-top: none;
  border-left: 1px solid var(--rand);
  white-space: nowrap;
  padding: 10px 18px;
}
body[data-layout="breit"] .inhalt { padding: 22px 28px 60px; }
body[data-layout="breit"] .kacheln {
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

/* Summenzeile unter Listen - dieselbe Rechnung wie die Kachel auf der
   Startseite, damit sich beide Zahlen gegeneinander pruefen lassen. */
table.liste tfoot .summenzeile td {
  border-top: 2px solid var(--rand);
  padding-top: 10px;
  font-weight: 600;
  background: var(--flaeche-2);
}

/* Positionsauswahl bei der Fremdbearbeitung: mehrere Teile eines Auftrags
   gehen selten gemeinsam raus, deshalb einzeln ankreuzbar. */
.posauswahl-fremd {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-2);
}
.posauswahl-fremd .poszeile {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.posauswahl-fremd .poszeile:hover { background: var(--akzent-hell); }
.posauswahl-fremd input { margin: 0; }

/* Zeichnungen je Position: die beiden Wege (hochladen / verknüpfen) stehen
   direkt in der Position, dezent abgesetzt. */
.zeichnungsupload {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-2);
}
.zeichnungsupload form + form { margin-top: 10px; }

/* ------------------------------------------------------- Arbeitsplanung */
/* Die Ampel der Werkstatt. Rot heisst "hat noch niemand" - das ist kein
   gespeicherter Zustand, sondern die fehlende Zuweisung. Farbe allein
   entscheidet nie: jeder Knopf traegt den Status zusaetzlich als Wort. */

.mitarbeiterreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.mitarbeiterknopf {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 128px;
  padding: 8px 12px;
  border-radius: var(--radius-klein);
  border: 1.5px solid var(--ampel-rand, var(--rand-stark));
  background: var(--ampel-flaeche, var(--flaeche));
  color: var(--schrift);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.mitarbeiterknopf:hover { filter: brightness(.97); text-decoration: none; }
.mitarbeiterknopf b { font-weight: 700; }
.mitarbeiterknopf .zustand {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ampel-rand, var(--matt));
}
.mitarbeiterknopf .was { font-size: 11.5px; color: var(--matt); }

.ampel-rot    { --ampel-rand: var(--fehler); --ampel-flaeche: var(--fehler-hell); }
.ampel-gelb   { --ampel-rand: var(--warn);   --ampel-flaeche: var(--warn-hell); }
.ampel-blau   { --ampel-rand: var(--akzent); --ampel-flaeche: var(--akzent-hell); }
.ampel-gruen  { --ampel-rand: var(--gut);    --ampel-flaeche: var(--gut-hell); }
.ampel-orange { --ampel-rand: var(--warn);   --ampel-flaeche: var(--warn-hell); }

.marker.ampel-rot    { background: var(--fehler-hell); color: var(--fehler); border-color: transparent; }
.marker.ampel-gelb   { background: var(--warn-hell);   color: var(--warn);   border-color: transparent; }
.marker.ampel-blau   { background: var(--akzent-hell); color: var(--akzent); border-color: transparent; }
.marker.ampel-gruen  { background: var(--gut-hell);    color: var(--gut);    border-color: transparent; }
.marker.ampel-orange { background: var(--warn-hell);   color: var(--warn);   border-color: transparent; }

/* Arbeitsliste des Mitarbeiters - grosse Flaechen, die man mit Handschuhen
   trifft. Deshalb Kachel statt Tabellenzeile. */
.arbeitsliste { display: grid; gap: 12px; }
.arbeitskachel {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--rand);
  border-left: 6px solid var(--ampel-rand, var(--rand-stark));
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--schrift);
}
.arbeitskachel:hover { background: var(--flaeche-2); text-decoration: none; }
.arbeitskachel .zeile1 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
.arbeitskachel .auftragnr { font-weight: 700; font-size: 17px; }
.arbeitskachel .bauteil { font-size: 16px; }
.arbeitskachel .zeile2 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--matt);
}
.arbeitskachel.prio1 { background: var(--warn-hell); }
.arbeitskachel.prio2 { background: var(--fehler-hell); }

/* Kopfdaten der Arbeitskarte: Beschriftung ueber dem Wert, damit die
   Angaben auch auf dem Tablet an der Maschine lesbar bleiben. */
.werteblock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 12px 18px;
}
.werteblock > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.werteblock span { font-size: 12px; color: var(--schrift-matt); }
.werteblock b { font-size: 15px; word-break: break-word; }

.langtext {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Die Uhr auf der Arbeitskarte */
.uhrzeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.uhrknopf { font-size: 17px; padding: 14px 26px; }
.uhrlaeuft {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--akzent);
}

/* Gesamtuebersicht: eine Spalte je Mitarbeiter */
.planungsspalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  align-items: start;
}
.planungsspalte {
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  overflow: hidden;
}
/* Die Spalte mit dem, was noch niemand hat. Sie steht vorn und faellt
   auf - sie ist die einzige, die etwas verlangt. Kevin am 07.09.2026:
   die Arbeit wird an Mitarbeiter verteilt, nicht an Maschinen. */
.planungsspalte.offenspalte {
  border-color: var(--warn);
  box-shadow: inset 3px 0 0 var(--warn);
}
.planungsspalte > h3 {
  margin: 0;
  padding: 10px 12px;
  font-size: 15px;
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--rand);
}
.planungsspalte > h3 span { font-weight: 500; font-size: 12px; color: var(--matt); }
.planungsspalte .arbeiten { padding: 10px; display: grid; gap: 8px; }
.planungskarte {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--rand);
  border-left: 5px solid var(--ampel-rand, var(--rand-stark));
  border-radius: 6px;
  color: var(--schrift);
  font-size: 13px;
}
.planungskarte:hover { background: var(--flaeche-2); text-decoration: none; }
.planungskarte b { display: block; }

body[data-layout="werkstatt"] .arbeitskachel .auftragnr { font-size: 20px; }
body[data-layout="werkstatt"] .arbeitskachel .bauteil { font-size: 18px; }
body[data-layout="werkstatt"] .uhrknopf { font-size: 20px; padding: 18px 32px; }

/* Pfad zum Konstruktionsordner - lang, deshalb umbrechend statt abgeschnitten:
   wer ihn kopieren will, braucht ihn vollstaendig. */
.ordnerpfad {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: 6px 10px;
  word-break: break-all;
  max-width: 100%;
}

/* ==========================================================================
   Akzentfarbe
   Faerbt alles, was von Haus aus blau ist: Links, den aktiven Menuepunkt,
   die Hauptschaltflaechen und farbige Hinterlegungen. Fuer jede Farbe drei
   Faelle - fest hell, fest dunkel und "wie Windows".
   ========================================================================== */
body[data-akzent="firma"] {
  --akzent: #0d5c8a; --akzent-hell: #e4f0f7; --akzent-text: #ffffff;
  --akzent-tief: #0d4467;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="firma"] {
  --akzent: #4fa8dd; --akzent-hell: #10293a; --akzent-text: #08131c;
  --akzent-tief: #0d4467;
  }
}
body[data-farbe="dunkel"][data-akzent="firma"] {
  --akzent: #4fa8dd; --akzent-hell: #10293a; --akzent-text: #08131c;
  --akzent-tief: #0d4467;
}
body[data-farbe="hell"][data-akzent="firma"] {
  --akzent: #0d5c8a; --akzent-hell: #e4f0f7; --akzent-text: #ffffff;
  --akzent-tief: #0d4467;
}
body[data-akzent="blau"] {
  --akzent: #1f5fa8; --akzent-hell: #e8f0fa; --akzent-text: #ffffff;
  --akzent-tief: #123f73;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="blau"] {
  --akzent: #559bec; --akzent-hell: #17263a; --akzent-text: #0d1117;
  --akzent-tief: #123f73;
  }
}
body[data-farbe="dunkel"][data-akzent="blau"] {
  --akzent: #559bec; --akzent-hell: #17263a; --akzent-text: #0d1117;
  --akzent-tief: #123f73;
}
body[data-farbe="hell"][data-akzent="blau"] {
  --akzent: #1f5fa8; --akzent-hell: #e8f0fa; --akzent-text: #ffffff;
  --akzent-tief: #123f73;
}
body[data-akzent="himmel"] {
  --akzent: #0a7ea4; --akzent-hell: #e0f3f9; --akzent-text: #ffffff;
  --akzent-tief: #0b5a75;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="himmel"] {
  --akzent: #49bede; --akzent-hell: #0f2a33; --akzent-text: #06181f;
  --akzent-tief: #0b5a75;
  }
}
body[data-farbe="dunkel"][data-akzent="himmel"] {
  --akzent: #49bede; --akzent-hell: #0f2a33; --akzent-text: #06181f;
  --akzent-tief: #0b5a75;
}
body[data-farbe="hell"][data-akzent="himmel"] {
  --akzent: #0a7ea4; --akzent-hell: #e0f3f9; --akzent-text: #ffffff;
  --akzent-tief: #0b5a75;
}
body[data-akzent="tuerkis"] {
  --akzent: #0f6b73; --akzent-hell: #e0f2f3; --akzent-text: #ffffff;
  --akzent-tief: #0a4b51;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="tuerkis"] {
  --akzent: #3fb8c4; --akzent-hell: #0e2a2d; --akzent-text: #06171a;
  --akzent-tief: #0a4b51;
  }
}
body[data-farbe="dunkel"][data-akzent="tuerkis"] {
  --akzent: #3fb8c4; --akzent-hell: #0e2a2d; --akzent-text: #06171a;
  --akzent-tief: #0a4b51;
}
body[data-farbe="hell"][data-akzent="tuerkis"] {
  --akzent: #0f6b73; --akzent-hell: #e0f2f3; --akzent-text: #ffffff;
  --akzent-tief: #0a4b51;
}
body[data-akzent="gruen"] {
  --akzent: #1a7f4b; --akzent-hell: #e5f4ec; --akzent-text: #ffffff;
  --akzent-tief: #125837;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="gruen"] {
  --akzent: #4ac48a; --akzent-hell: #14291f; --akzent-text: #08160f;
  --akzent-tief: #125837;
  }
}
body[data-farbe="dunkel"][data-akzent="gruen"] {
  --akzent: #4ac48a; --akzent-hell: #14291f; --akzent-text: #08160f;
  --akzent-tief: #125837;
}
body[data-farbe="hell"][data-akzent="gruen"] {
  --akzent: #1a7f4b; --akzent-hell: #e5f4ec; --akzent-text: #ffffff;
  --akzent-tief: #125837;
}
body[data-akzent="oliv"] {
  --akzent: #5a7419; --akzent-hell: #eef3df; --akzent-text: #ffffff;
  --akzent-tief: #3f5211;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="oliv"] {
  --akzent: #a3c65a; --akzent-hell: #232a13; --akzent-text: #12160a;
  --akzent-tief: #3f5211;
  }
}
body[data-farbe="dunkel"][data-akzent="oliv"] {
  --akzent: #a3c65a; --akzent-hell: #232a13; --akzent-text: #12160a;
  --akzent-tief: #3f5211;
}
body[data-farbe="hell"][data-akzent="oliv"] {
  --akzent: #5a7419; --akzent-hell: #eef3df; --akzent-text: #ffffff;
  --akzent-tief: #3f5211;
}
body[data-akzent="gelb"] {
  --akzent: #8a6b00; --akzent-hell: #fdf4d6; --akzent-text: #ffffff;
  --akzent-tief: #5f4900;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="gelb"] {
  --akzent: #e5c250; --akzent-hell: #2b2410; --akzent-text: #191400;
  --akzent-tief: #5f4900;
  }
}
body[data-farbe="dunkel"][data-akzent="gelb"] {
  --akzent: #e5c250; --akzent-hell: #2b2410; --akzent-text: #191400;
  --akzent-tief: #5f4900;
}
body[data-farbe="hell"][data-akzent="gelb"] {
  --akzent: #8a6b00; --akzent-hell: #fdf4d6; --akzent-text: #ffffff;
  --akzent-tief: #5f4900;
}
body[data-akzent="bernstein"] {
  --akzent: #a35a00; --akzent-hell: #fdf1e0; --akzent-text: #ffffff;
  --akzent-tief: #703e00;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="bernstein"] {
  --akzent: #e0a458; --akzent-hell: #2c2216; --akzent-text: #1a1209;
  --akzent-tief: #703e00;
  }
}
body[data-farbe="dunkel"][data-akzent="bernstein"] {
  --akzent: #e0a458; --akzent-hell: #2c2216; --akzent-text: #1a1209;
  --akzent-tief: #703e00;
}
body[data-farbe="hell"][data-akzent="bernstein"] {
  --akzent: #a35a00; --akzent-hell: #fdf1e0; --akzent-text: #ffffff;
  --akzent-tief: #703e00;
}
body[data-akzent="kupfer"] {
  --akzent: #9c4a21; --akzent-hell: #fbeade; --akzent-text: #ffffff;
  --akzent-tief: #6d3316;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="kupfer"] {
  --akzent: #dd8f66; --akzent-hell: #2b1a12; --akzent-text: #180d07;
  --akzent-tief: #6d3316;
  }
}
body[data-farbe="dunkel"][data-akzent="kupfer"] {
  --akzent: #dd8f66; --akzent-hell: #2b1a12; --akzent-text: #180d07;
  --akzent-tief: #6d3316;
}
body[data-farbe="hell"][data-akzent="kupfer"] {
  --akzent: #9c4a21; --akzent-hell: #fbeade; --akzent-text: #ffffff;
  --akzent-tief: #6d3316;
}
body[data-akzent="rot"] {
  --akzent: #b3261e; --akzent-hell: #fbeae9; --akzent-text: #ffffff;
  --akzent-tief: #7d1a14;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="rot"] {
  --akzent: #f27a72; --akzent-hell: #2f1a19; --akzent-text: #1a0d0c;
  --akzent-tief: #7d1a14;
  }
}
body[data-farbe="dunkel"][data-akzent="rot"] {
  --akzent: #f27a72; --akzent-hell: #2f1a19; --akzent-text: #1a0d0c;
  --akzent-tief: #7d1a14;
}
body[data-farbe="hell"][data-akzent="rot"] {
  --akzent: #b3261e; --akzent-hell: #fbeae9; --akzent-text: #ffffff;
  --akzent-tief: #7d1a14;
}
body[data-akzent="pink"] {
  --akzent: #a8246b; --akzent-hell: #fbe6f0; --akzent-text: #ffffff;
  --akzent-tief: #751849;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="pink"] {
  --akzent: #ef7fb4; --akzent-hell: #2e1522; --akzent-text: #1a0b13;
  --akzent-tief: #751849;
  }
}
body[data-farbe="dunkel"][data-akzent="pink"] {
  --akzent: #ef7fb4; --akzent-hell: #2e1522; --akzent-text: #1a0b13;
  --akzent-tief: #751849;
}
body[data-farbe="hell"][data-akzent="pink"] {
  --akzent: #a8246b; --akzent-hell: #fbe6f0; --akzent-text: #ffffff;
  --akzent-tief: #751849;
}
body[data-akzent="violett"] {
  --akzent: #6e48aa; --akzent-hell: #f0eafa; --akzent-text: #ffffff;
  --akzent-tief: #4c3177;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="violett"] {
  --akzent: #a98ae0; --akzent-hell: #221a33; --akzent-text: #120c1c;
  --akzent-tief: #4c3177;
  }
}
body[data-farbe="dunkel"][data-akzent="violett"] {
  --akzent: #a98ae0; --akzent-hell: #221a33; --akzent-text: #120c1c;
  --akzent-tief: #4c3177;
}
body[data-farbe="hell"][data-akzent="violett"] {
  --akzent: #6e48aa; --akzent-hell: #f0eafa; --akzent-text: #ffffff;
  --akzent-tief: #4c3177;
}
body[data-akzent="anthrazit"] {
  --akzent: #3c4652; --akzent-hell: #eceff2; --akzent-text: #ffffff;
  --akzent-tief: #2b333c;
}
@media (prefers-color-scheme: dark) {
  body:not([data-farbe="hell"])[data-akzent="anthrazit"] {
  --akzent: #9aa7b6; --akzent-hell: #22272e; --akzent-text: #0f1216;
  --akzent-tief: #2b333c;
  }
}
body[data-farbe="dunkel"][data-akzent="anthrazit"] {
  --akzent: #9aa7b6; --akzent-hell: #22272e; --akzent-text: #0f1216;
  --akzent-tief: #2b333c;
}
body[data-farbe="hell"][data-akzent="anthrazit"] {
  --akzent: #3c4652; --akzent-hell: #eceff2; --akzent-text: #ffffff;
  --akzent-tief: #2b333c;
}

/* ==========================================================================
   Navigationsleiste
   Die Leiste links (im Layout "Breit" oben) bekommt eigene Farbwerte. Weil
   alles darin ueber Variablen faerbt, genuegt es, die Variablen innerhalb
   der Leiste zu ueberschreiben - Menue, Marke und Benutzerfeld ziehen mit.
   ========================================================================== */

/* Ruecklage, falls keine Akzentfarbe gewaehlt ist */
body { --akzent-tief: #123f73; }

body[data-leiste="akzent"] .seitenleiste,
body[data-leiste="verlauf"] .seitenleiste,
body[data-leiste="dunkel"] .seitenleiste {
  --flaeche-2:    rgba(255, 255, 255, .13);
  --rand:         rgba(255, 255, 255, .16);
  --rand-stark:   rgba(255, 255, 255, .28);
  --schrift:      #f2f5f8;
  --schrift-matt: rgba(242, 245, 248, .70);
  --akzent:       #ffffff;
  --akzent-hell:  rgba(255, 255, 255, .20);
}
/* Auf dunklem Grund immer das helle Logo */
body[data-leiste="akzent"] .marke .logo.hell,
body[data-leiste="verlauf"] .marke .logo.hell,
body[data-leiste="dunkel"] .marke .logo.hell { display: none !important; }
body[data-leiste="akzent"] .marke .logo.dunkel,
body[data-leiste="verlauf"] .marke .logo.dunkel,
body[data-leiste="dunkel"] .marke .logo.dunkel { display: block !important; }

body[data-leiste="akzent"] .seitenleiste { background: var(--akzent-tief); }
body[data-leiste="dunkel"] .seitenleiste { background: #202730; }
body[data-leiste="verlauf"] .seitenleiste {
  background: linear-gradient(180deg, var(--akzent-tief) 0%, #1a2028 100%);
}
body[data-layout="breit"][data-leiste="verlauf"] .seitenleiste {
  background: linear-gradient(90deg, var(--akzent-tief) 0%, #1a2028 100%);
}

body[data-leiste="hell"] .seitenleiste {
  background: #ffffff;
  --flaeche-2: #f1f3f6; --rand: #e0e4e9;
  --schrift: #1b1f24; --schrift-matt: #626b76;
}
body[data-leiste="hell"] .marke .logo.hell { display: block !important; }
body[data-leiste="hell"] .marke .logo.dunkel { display: none !important; }

body[data-leiste="glas"] .seitenleiste {
  background: var(--flaeche);
  background: color-mix(in srgb, var(--flaeche) 60%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media print {
  .seitenleiste { display: none; }
}

/* ==========================================================================
   Durchsichtigkeit
   Karten, Kacheln und Suchleisten lassen den Hintergrund durchscheinen.
   Drei Stufen ueber "aus" hinaus. Beim Drucken wird alles wieder deckend -
   ein durchscheinendes Angebot waere unbrauchbar.
   ========================================================================== */

body[data-glas="leicht"] { --glas-weich:  8px; --glas-deck: 88%; }
body[data-glas="mittel"] { --glas-weich: 12px; --glas-deck: 74%; }
body[data-glas="stark"]  { --glas-weich: 18px; --glas-deck: 58%; }

body[data-glas="leicht"] .karte,  body[data-glas="leicht"] .kachel,
body[data-glas="leicht"] .suchleiste,
body[data-glas="mittel"] .karte,  body[data-glas="mittel"] .kachel,
body[data-glas="mittel"] .suchleiste,
body[data-glas="stark"] .karte,   body[data-glas="stark"] .kachel,
body[data-glas="stark"] .suchleiste {
  /* Erst die deckende Farbe, dann die durchsichtige: kann ein Browser
     color-mix nicht, bleibt es einfach deckend. */
  background: var(--flaeche);
  background: color-mix(in srgb, var(--flaeche) var(--glas-deck), transparent);
  backdrop-filter: blur(var(--glas-weich));
  -webkit-backdrop-filter: blur(var(--glas-weich));
}

@media print {
  body[data-glas] .karte, body[data-glas] .kachel, body[data-glas] .suchleiste {
    background: #ffffff;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   Hintergrundverlaeufe
   Durchscheinende Verlaeufe ueber der Grundfarbe. Weil sie durchsichtig
   sind, funktionieren dieselben Werte in Hell und Dunkel.
   ========================================================================== */
body[data-hintergrund="blau"] {
  background-image:
    linear-gradient(160deg, rgba(31, 95, 168, .16) 0%, rgba(31, 95, 168, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(85, 155, 236, .12), transparent 70%);
}
body[data-hintergrund="himmel"] {
  background-image:
    linear-gradient(160deg, rgba(10, 126, 164, .16) 0%, rgba(10, 126, 164, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(73, 190, 222, .12), transparent 70%);
}
body[data-hintergrund="tuerkis"] {
  background-image:
    linear-gradient(160deg, rgba(15, 107, 115, .16) 0%, rgba(15, 107, 115, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(63, 184, 196, .12), transparent 70%);
}
body[data-hintergrund="gruen"] {
  background-image:
    linear-gradient(160deg, rgba(26, 127, 75, .16) 0%, rgba(26, 127, 75, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(74, 196, 138, .12), transparent 70%);
}
body[data-hintergrund="mint"] {
  background-image:
    linear-gradient(160deg, rgba(22, 145, 121, .16) 0%, rgba(22, 145, 121, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(94, 214, 185, .12), transparent 70%);
}
body[data-hintergrund="oliv"] {
  background-image:
    linear-gradient(160deg, rgba(90, 116, 25, .16) 0%, rgba(90, 116, 25, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(163, 198, 90, .12), transparent 70%);
}
body[data-hintergrund="gelb"] {
  background-image:
    linear-gradient(160deg, rgba(196, 158, 20, .16) 0%, rgba(196, 158, 20, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(232, 195, 74, .12), transparent 70%);
}
body[data-hintergrund="sonne"] {
  background-image:
    linear-gradient(160deg, rgba(214, 140, 20, .16) 0%, rgba(214, 140, 20, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(245, 200, 90, .12), transparent 70%);
}
body[data-hintergrund="warm"] {
  background-image:
    linear-gradient(160deg, rgba(196, 106, 22, .16) 0%, rgba(196, 106, 22, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(224, 164, 88, .12), transparent 70%);
}
body[data-hintergrund="kupfer"] {
  background-image:
    linear-gradient(160deg, rgba(156, 74, 33, .16) 0%, rgba(156, 74, 33, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(221, 143, 102, .12), transparent 70%);
}
body[data-hintergrund="rose"] {
  background-image:
    linear-gradient(160deg, rgba(178, 76, 118, .16) 0%, rgba(178, 76, 118, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(236, 150, 184, .12), transparent 70%);
}
body[data-hintergrund="violett"] {
  background-image:
    linear-gradient(160deg, rgba(110, 72, 170, .16) 0%, rgba(110, 72, 170, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(157, 122, 214, .12), transparent 70%);
}
body[data-hintergrund="stahl"] {
  background-image:
    linear-gradient(160deg, rgba(70, 84, 99, .16) 0%, rgba(70, 84, 99, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(140, 155, 172, .12), transparent 70%);
}
body[data-hintergrund="grafit"] {
  background-image:
    linear-gradient(160deg, rgba(38, 44, 52, .16) 0%, rgba(38, 44, 52, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(110, 122, 138, .12), transparent 70%);
}

/* Staerke des Verlaufs - blasser oder kraeftiger als der Standard */
body[data-verlauf="zart"][data-hintergrund="blau"] {
  background-image:
    linear-gradient(160deg, rgba(31, 95, 168, .08) 0%, rgba(31, 95, 168, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(85, 155, 236, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="himmel"] {
  background-image:
    linear-gradient(160deg, rgba(10, 126, 164, .08) 0%, rgba(10, 126, 164, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(73, 190, 222, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="tuerkis"] {
  background-image:
    linear-gradient(160deg, rgba(15, 107, 115, .08) 0%, rgba(15, 107, 115, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(63, 184, 196, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="gruen"] {
  background-image:
    linear-gradient(160deg, rgba(26, 127, 75, .08) 0%, rgba(26, 127, 75, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(74, 196, 138, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="mint"] {
  background-image:
    linear-gradient(160deg, rgba(22, 145, 121, .08) 0%, rgba(22, 145, 121, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(94, 214, 185, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="oliv"] {
  background-image:
    linear-gradient(160deg, rgba(90, 116, 25, .08) 0%, rgba(90, 116, 25, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(163, 198, 90, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="gelb"] {
  background-image:
    linear-gradient(160deg, rgba(196, 158, 20, .08) 0%, rgba(196, 158, 20, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(232, 195, 74, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="sonne"] {
  background-image:
    linear-gradient(160deg, rgba(214, 140, 20, .08) 0%, rgba(214, 140, 20, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(245, 200, 90, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="warm"] {
  background-image:
    linear-gradient(160deg, rgba(196, 106, 22, .08) 0%, rgba(196, 106, 22, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(224, 164, 88, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="kupfer"] {
  background-image:
    linear-gradient(160deg, rgba(156, 74, 33, .08) 0%, rgba(156, 74, 33, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(221, 143, 102, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="rose"] {
  background-image:
    linear-gradient(160deg, rgba(178, 76, 118, .08) 0%, rgba(178, 76, 118, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(236, 150, 184, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="violett"] {
  background-image:
    linear-gradient(160deg, rgba(110, 72, 170, .08) 0%, rgba(110, 72, 170, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(157, 122, 214, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="stahl"] {
  background-image:
    linear-gradient(160deg, rgba(70, 84, 99, .08) 0%, rgba(70, 84, 99, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(140, 155, 172, .06), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="grafit"] {
  background-image:
    linear-gradient(160deg, rgba(38, 44, 52, .08) 0%, rgba(38, 44, 52, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(110, 122, 138, .06), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="blau"] {
  background-image:
    linear-gradient(160deg, rgba(31, 95, 168, .30) 0%, rgba(31, 95, 168, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(85, 155, 236, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="himmel"] {
  background-image:
    linear-gradient(160deg, rgba(10, 126, 164, .30) 0%, rgba(10, 126, 164, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(73, 190, 222, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="tuerkis"] {
  background-image:
    linear-gradient(160deg, rgba(15, 107, 115, .30) 0%, rgba(15, 107, 115, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(63, 184, 196, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="gruen"] {
  background-image:
    linear-gradient(160deg, rgba(26, 127, 75, .30) 0%, rgba(26, 127, 75, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(74, 196, 138, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="mint"] {
  background-image:
    linear-gradient(160deg, rgba(22, 145, 121, .30) 0%, rgba(22, 145, 121, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(94, 214, 185, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="oliv"] {
  background-image:
    linear-gradient(160deg, rgba(90, 116, 25, .30) 0%, rgba(90, 116, 25, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(163, 198, 90, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="gelb"] {
  background-image:
    linear-gradient(160deg, rgba(196, 158, 20, .30) 0%, rgba(196, 158, 20, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(232, 195, 74, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="sonne"] {
  background-image:
    linear-gradient(160deg, rgba(214, 140, 20, .30) 0%, rgba(214, 140, 20, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(245, 200, 90, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="warm"] {
  background-image:
    linear-gradient(160deg, rgba(196, 106, 22, .30) 0%, rgba(196, 106, 22, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(224, 164, 88, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="kupfer"] {
  background-image:
    linear-gradient(160deg, rgba(156, 74, 33, .30) 0%, rgba(156, 74, 33, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(221, 143, 102, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="rose"] {
  background-image:
    linear-gradient(160deg, rgba(178, 76, 118, .30) 0%, rgba(178, 76, 118, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(236, 150, 184, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="violett"] {
  background-image:
    linear-gradient(160deg, rgba(110, 72, 170, .30) 0%, rgba(110, 72, 170, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(157, 122, 214, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="stahl"] {
  background-image:
    linear-gradient(160deg, rgba(70, 84, 99, .30) 0%, rgba(70, 84, 99, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(140, 155, 172, .22), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="grafit"] {
  background-image:
    linear-gradient(160deg, rgba(38, 44, 52, .30) 0%, rgba(38, 44, 52, 0) 55%),
    radial-gradient(1200px 600px at 100% 0%, rgba(110, 122, 138, .22), transparent 70%);
}

/* Der Firmenverlauf aus dem Logo bleibt, wie er ist */
body[data-hintergrund="firma"] {
  background-image:
    linear-gradient(155deg, rgba(13, 68, 103, .20) 0%, rgba(13, 68, 103, 0) 50%),
    radial-gradient(1000px 700px at 100% 10%, rgba(41, 51, 53, .14), transparent 70%);
}
body[data-verlauf="zart"][data-hintergrund="firma"] {
  background-image:
    linear-gradient(155deg, rgba(13, 68, 103, .10) 0%, rgba(13, 68, 103, 0) 50%),
    radial-gradient(1000px 700px at 100% 10%, rgba(41, 51, 53, .07), transparent 70%);
}
body[data-verlauf="kraeftig"][data-hintergrund="firma"] {
  background-image:
    linear-gradient(155deg, rgba(13, 68, 103, .34) 0%, rgba(13, 68, 103, 0) 50%),
    radial-gradient(1000px 700px at 100% 10%, rgba(41, 51, 53, .24), transparent 70%);
}

/* ==========================================================================
   Farbproben auf der Seite "Darstellung"
   ========================================================================== */

.farbgitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr));
  gap: 10px;
}
.farbwahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 6px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  cursor: pointer;
  text-align: center;
  font-size: 12.5px;
  background: var(--flaeche);
}
.farbwahl:hover { border-color: var(--rand-stark); }
.farbwahl.gewaehlt {
  border-color: var(--akzent);
  box-shadow: 0 0 0 2px var(--akzent-hell);
}
.farbwahl input { display: none; }
.farbkreis {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 -9px 14px rgba(0, 0, 0, .14);
}
.leisteprobe {
  width: 100%; height: 46px; border-radius: 5px;
  border: 1px solid var(--rand); overflow: hidden;
  display: flex;
}
.leisteprobe i { display: block; width: 36%; height: 100%; }
.leisteprobe b { flex: 1; background: var(--flaeche-2); }
.glasprobe {
  width: 100%; height: 46px; border-radius: 5px;
  border: 1px solid var(--rand);
  background:
    linear-gradient(135deg, rgba(31, 95, 168, .45), rgba(26, 127, 75, .45)),
    repeating-linear-gradient(45deg, #9aa3ad 0 6px, #cbd2d9 6px 12px);
  display: flex; align-items: center; justify-content: center;
}
.glasprobe span {
  width: 68%; height: 58%; border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .5);
}
.glasprobe.g-aus span    { background: #ffffff; }
.glasprobe.g-leicht span { background: rgba(255, 255, 255, .86); }
.glasprobe.g-mittel span { background: rgba(255, 255, 255, .68); }
.glasprobe.g-stark span  { background: rgba(255, 255, 255, .42); }
.verlaufprobe {
  width: 100%; height: 46px; border-radius: 5px;
  border: 1px solid var(--rand);
  background: var(--grund);
}

/* ==========================================================================
   Nächste Schritte - die Fertigungs-Inbox
   Jede Karte ist eine Frage an die Fertigungsleitung. Die Ampel links sagt,
   wie eilig sie ist; sie bleibt stehen, bis entschieden wurde.
   ========================================================================== */

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.filterknopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--schrift);
  font-size: 13.5px;
}
.filterknopf:hover { border-color: var(--rand-stark); text-decoration: none; }
.filterknopf b {
  min-width: 20px;
  text-align: center;
  background: var(--flaeche-2);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 12px;
}
.filterknopf.aktiv {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
}
.filterknopf.aktiv b { background: rgba(255, 255, 255, .25); color: inherit; }

.schrittkarte { border-left: 5px solid var(--rand-stark); }
.schrittkarte.ampel-gelb   { border-left-color: #e2b100; }
.schrittkarte.ampel-orange { border-left-color: #e07b00; }
.schrittkarte.ampel-rot    { border-left-color: var(--fehler); }
.schrittkarte.ampel-gruen  { border-left-color: var(--gut); }

.schrittampel {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: baseline;
  background: var(--rand-stark);
}
.ampel-gelb   .schrittampel { background: #e2b100; }
.ampel-orange .schrittampel { background: #e07b00; }
.ampel-rot    .schrittampel { background: var(--fehler); }
.ampel-gruen  .schrittampel { background: var(--gut); }

/* Noch nicht angesehen: die Karte pocht kurz, damit sie auffaellt. Nach
   dem ersten Ansehen hoert es auf - die Aufgabe bleibt trotzdem stehen. */
@keyframes saw-pochen {
  0%, 100% { box-shadow: var(--schatten); }
  50%      { box-shadow: 0 0 0 4px var(--warn-hell), var(--schatten); }
}
.schrittkarte.ist-neu { animation: saw-pochen 1.6s ease-in-out 4; }
.schrittkarte.ist-neu.ampel-rot { animation-iteration-count: 8; }

@keyframes saw-blinken {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.menue a.blinkt .glocke { animation: saw-blinken 1.2s ease-in-out infinite; }
.menue a.blinkt .marker { animation: saw-blinken 1.2s ease-in-out infinite; }
.glocke { font-size: 13px; }
/* Die Menuepunkte schieben ihr letztes Element nach rechts
   (justify-content: space-between). Die Glocke soll aber direkt hinter dem
   Wort stehen - der Zaehler darf weiter an den rechten Rand. */
.menue a .glocke { margin-right: auto; }

.schrittkopf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 14px 20px;
  margin-bottom: 12px;
}
.schritttext {
  margin: 0 0 12px;
  padding: 9px 12px;
  background: var(--warn-hell);
  border-radius: var(--radius-klein);
  font-size: 14px;
}
.schrittwahl { border-top: 1px solid var(--rand); padding-top: 12px; }
.weitergabe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.weitergabe .feld { min-width: 130px; }
.schrittknoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.schrittknoepfe form { margin: 0; }
.knopf.gut { border-color: var(--gut); color: var(--gut); }
.knopf.gut:hover { background: var(--gut-hell); }
.knopf.gross { padding: 11px 20px; font-size: 15px; }

/* Positionen, die fertigungstechnisch durch sind */
.posfertig {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gut);
  font-weight: 600;
  font-size: 12.5px;
}

@media (prefers-reduced-motion: reduce) {
  .schrittkarte.ist-neu, .menue a.blinkt .glocke, .menue a.blinkt .marker {
    animation: none;
  }
}

/* Sprechblase, wenn jemand fertig meldet. Sie verschwindet von selbst -
   die Aufgabe bleibt in der Liste stehen, verloren geht also nichts. */
.schrittblase {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 320px;
  padding: 13px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  border-left: 5px solid var(--warn);
  background: var(--flaeche);
  box-shadow: 0 8px 28px rgba(16, 24, 40, .22);
  color: var(--schrift);
  animation: saw-blase-rein .25s ease-out;
}
.schrittblase:hover { text-decoration: none; border-color: var(--akzent); }
.schrittblase b { font-size: 14px; }
.schrittblase.weg { opacity: 0; transition: opacity .8s ease; }

@keyframes saw-blase-rein {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media print { .schrittblase { display: none; } }

/* Wann ist das Material im Haus - steht neben dem Materialstand. */
.mattermin {
  font-size: 13px;
  color: var(--schrift-matt);
}
.mattermin b { color: var(--schrift); }
.mattermin.faellig b { color: var(--warn); }
.terminfeld { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.terminfeld input[type="date"] { padding: 3px 6px; font-size: 12.5px; }

/* ==========================================================================
   Positionen umsortieren
   Am Griff ziehen, woanders loslassen. Die Nummern vergibt danach der
   Server neu - am Bildschirm wird nur die Reihenfolge vorgezeigt.
   ========================================================================== */

.ziehgriff {
  cursor: grab;
  color: var(--schrift-matt);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  user-select: none;
}
.ziehgriff:hover { background: var(--flaeche-2); color: var(--schrift); }
.ziehgriff:active { cursor: grabbing; }

.position.zieht { opacity: .45; }
.position.zielmarke.oberhalb { box-shadow: 0 -3px 0 0 var(--akzent); }
.position.zielmarke.unterhalb { box-shadow: 0 3px 0 0 var(--akzent); }

/* Die Pfeile sitzen im Kopf der Position und gehen ohne Maus. */
.schiebepfeile { display: inline-flex; gap: 3px; margin-left: auto; }
.schiebepfeile .knopf {
  padding: 1px 8px;
  line-height: 1.5;
  min-width: 0;
}
.schiebepfeile .knopf[disabled] { opacity: .35; cursor: default; }

@media print { .ziehgriff, .schiebepfeile { display: none; } }

/* ==========================================================================
   Zeiterfassung: das Buchungsformular klappt unter dem Auftrag auf
   Frueher stand es als eigene Karte weit unter der Liste - wer den ersten
   Auftrag waehlte, musste jedes Mal ans Seitenende scrollen.
   ========================================================================== */

table.stempelliste { table-layout: fixed; width: 100%; }
table.stempelliste td { overflow-wrap: anywhere; }

tr.buchzeile > td {
  padding: 0;
  background: var(--akzent-hell);
  border-top: 2px solid var(--akzent);
}
tr.buchzeile h2 {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 16px;
  background: none;
  border: none;
}
tr.buchzeile .inhalt-block { padding: 12px 16px; }
tr.buchzeile .feldgitter { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
tr.buchzeile .posauswahl { max-height: 320px; overflow-y: auto; }

/* Der Auftrag der Werkstattpflege steht immer oben und faellt auf. */
table.stempelliste tr:first-child .marker.gut.klein { margin-top: 3px; }

/* ==========================================================================
   Werkzeuge: Kachelwand, Warenkorb, Bestellungen
   Auf dem Werkstatt-Tablet wird mit dem Finger getippt - die Kacheln sind
   deshalb gross und die Trefferflaeche ist die ganze Kachel.
   ========================================================================== */

.kachelwand {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  gap: 12px;
}

.werkzeugkachel {
  position: relative;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.werkzeugkachel.leer {
  border-style: dashed;
  background: none;
  align-items: center;
  justify-content: center;
  padding: 18px 10px;
  min-height: 150px;
  text-align: center;
}
/* Der farbige Streifen oben zeigt den Bestand auf einen Blick. */
.werkzeugkachel::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--rand-stark);
}
.werkzeugkachel.bestand-gruen::before { background: var(--gut); }
.werkzeugkachel.bestand-gelb::before  { background: #e2b100; }
.werkzeugkachel.bestand-rot::before   { background: var(--fehler); }

.kachelform { margin: 0; display: flex; flex-direction: column; flex: 1; }
.kachelknopf {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 10px 8px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.kachelknopf:hover { background: var(--akzent-hell); text-decoration: none; }
.kachelknopf:active { transform: scale(.98); }
.kachelbild {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-klein);
  background: var(--flaeche-2);
  overflow: hidden;
}
.kachelbild img { width: 100%; height: 100%; object-fit: contain; }
.kachelleer { font-size: 30px; opacity: .45; }
.kachelname { font-size: 14px; line-height: 1.25; }

.kachelfuss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px 8px;
  border-top: 1px solid var(--rand);
}
.kachelmenge { width: 58px; padding: 3px 6px; text-align: center; }

.lagerampel {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 0 8px 8px;
}
.lagerampel form { margin: 0; }
.ampelpunkt {
  border: 1px solid var(--rand);
  background: var(--flaeche-2);
  border-radius: 999px;
  padding: 3px;
  cursor: pointer;
  line-height: 0;
}
.ampelpunkt span {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--rand-stark);
  opacity: .35;
}
.ampelpunkt.gruen span { background: var(--gut); }
.ampelpunkt.gelb span  { background: #e2b100; }
.ampelpunkt.rot span   { background: var(--fehler); }
.ampelpunkt.an span { opacity: 1; }
.ampelpunkt.an { border-color: var(--rand-stark); }

.kachelpflege { border-top: 1px solid var(--rand); padding: 6px 8px; }
.kachelpflege summary { cursor: pointer; color: var(--schrift-matt); }
.kachelpflege .feld { margin-bottom: 6px; }
.kachelpflege input { width: 100%; }

.korbbild {
  width: 46px; height: 46px;
  object-fit: contain;
  border-radius: 5px;
  background: var(--flaeche-2);
}
.mengenform {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.mengenform .knopf { padding: 2px 10px; font-size: 15px; line-height: 1.4; }

/* Abgeschickte Anforderungen faerben sich - die sind dran. */
tr.bestellzeile.wartet td { background: var(--warn-hell); }

/* Grosser Knopf fuers Tablet */
.knopf.gross { padding: 11px 20px; font-size: 15px; }

body[data-layout="werkstatt"] .kachelwand {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
body[data-layout="werkstatt"] .kachelbild { width: 104px; height: 104px; }
body[data-layout="werkstatt"] .kachelname { font-size: 16px; }

/* Text der Kachel aendern - offen fuer alle, auch die Werkstatt. */
.textfeld { border-top: 1px solid var(--rand); padding: 6px 8px; }
.textfeld summary { cursor: pointer; color: var(--schrift-matt); }
.textfeld.fehlt summary { color: var(--warn); font-weight: 600; }
.textfeld input {
  width: 100%;
  margin-bottom: 5px;
  padding: 4px 7px;
  font-size: 12.5px;
}
.textfeld .knopf { width: 100%; }

/* Art, Groesse, Eckenradius - was beim Anklicken mitgewaehlt wird. */
.auswahlfeld {
  display: flex;
  gap: 5px;
  padding: 0 8px 6px;
}
.auswahlfeld select {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-size: 12.5px;
}


/* ==========================================================================
   Interner Chat
   ========================================================================== */
/* Zwei Spalten: links die Kanaele, rechts der Verlauf. Unter 900 px
   Fensterbreite untereinander - an einem Terminal in der Werkstatt steht
   das Fenster oft schmal. */
.chatseite {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  .chatseite { grid-template-columns: 1fr; }
}
/* Der Inhaltsbereich laesst sonst 60 px Luft nach unten - hier stoert die
   nur, weil das Chatfenster ohnehin genau bis zum Rand reicht. Kann ein
   Browser :has() nicht, rollt die Seite eben um diese 60 px; nichts geht
   dabei verloren. */
.inhalt:has(> .chatseite) { padding-bottom: 14px; }

.chatliste {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 8px;
  /* dvh statt vh: auf dem Tablet schrumpft die sichtbare Hoehe, sobald die
     Adressleiste einblendet - mit vh raegte der Chat dann darunter. */
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  position: sticky;
  top: 12px;
}
.chatlistekopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 4px 6px 10px;
}
.chateintrag {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--schrift);
  text-decoration: none;
}
.chateintrag:hover { background: var(--flaeche-2); text-decoration: none; }
.chateintrag.aktiv { background: var(--akzent-hell); color: var(--akzent); }
.chateintrag.rund { border-bottom: 1px solid var(--rand); border-radius: 8px 8px 0 0;
                    margin-bottom: 4px; padding-bottom: 10px; }
.chatname { font-weight: 600; }
.chatvorschau {
  grid-column: 1 / -1;
  font-size: 11.5px; color: var(--schrift-matt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Die Unterpunkte in der Seitenleiste, zusammenklappbar. */
.menue a.chatmenue { padding-left: 24px; font-size: 12.5px; }
.chatgruppe > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 24px;
  font-size: 12.5px; color: var(--schrift-matt);
  cursor: pointer; border-radius: 8px;
  list-style: none;
}
/* Das Standarddreieck weg - stattdessen ein eigenes, das sich mitdreht. */
.chatgruppe > summary::-webkit-details-marker { display: none; }
.chatgruppe > summary::before {
  content: "B8"; font-size: 10px;
  transition: transform .15s ease;
}
.chatgruppe[open] > summary::before { transform: rotate(90deg); }
.chatgruppe > summary:hover { background: var(--flaeche-2); }
.chatgruppe > summary span:first-of-type { margin-right: auto; }

.chatfenster {
  display: flex;
  flex-direction: column;
  /* Feste Hoehe, nicht min-height: das Eingabefeld sitzt unten im Fenster
     und muss sichtbar bleiben, ohne dass man erst die Seite herunterrollt.
     Gescrollt wird innen, im Verlauf. Den genauen Wert setzt app.js nach -
     je nach Layout und ob gerade ein Hinweisband steht, faengt der Inhalt
     unterschiedlich hoch an. Dieser Wert hier haelt auch ohne Skript. */
  height: calc(100dvh - 120px);
  min-height: 360px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}
.chatkopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rand);
}
.chatkopf h1 { margin: 0; font-size: 19px; }
.chatsuche { display: flex; gap: 6px; align-items: center; }
.chatsuche input { min-width: 210px; }

.chatverlauf {
  flex: 1;
  padding: 14px 16px;
  overflow-y: auto;
  /* Genug Platz, damit die letzte Blase nicht am Eingabefeld klebt. */
  scroll-padding-bottom: 20px;
}
.chattrenner {
  text-align: center; margin: 14px 0 10px;
  font-size: 11.5px; color: var(--schrift-matt);
}
.chattrenner span {
  background: var(--flaeche-2); border-radius: 20px; padding: 3px 12px;
}
.chatnochnichts {
  text-align: center; color: var(--schrift-matt); padding: 50px 20px;
}
/* Die Frist steht oben im Verlauf - unaufdringlich, aber nicht zu uebersehen. */
.chathinweis {
  text-align: center;
  font-size: 11.5px;
  color: var(--schrift-matt);
  background: var(--flaeche-2);
  border: 1px dashed var(--rand);
  border-radius: 10px;
  padding: 6px 12px;
  margin-bottom: 12px;
}

.chatzeile { display: flex; flex-direction: column; margin-bottom: 10px; }
.chatzeile.meine { align-items: flex-end; }
.chatzeile.fremde { align-items: flex-start; }

.chatblase {
  max-width: min(560px, 78%);
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  word-break: break-word;
}
.chatzeile.meine .chatblase {
  background: var(--akzent-hell);
  border-color: var(--akzent-hell);
}
.chatabsender {
  font-size: 11.5px; font-weight: 600; color: var(--akzent);
  margin-bottom: 2px;
}
/* Zeilenumbrueche aus dem Eingabefeld bleiben erhalten. */
.chattext { white-space: pre-wrap; }
.chatbild {
  max-width: 100%; max-height: 340px;
  border-radius: 10px; display: block; margin-bottom: 4px;
  background: var(--flaeche);
}
.chatanhang { display: inline-block; margin-bottom: 4px; font-weight: 600; }
.chatfuss {
  font-size: 11px; color: var(--schrift-matt);
  margin-top: 3px; display: flex; gap: 6px; align-items: center;
  justify-content: flex-end;
}
.chatzeile.fremde .chatfuss { justify-content: flex-start; }
.haken { letter-spacing: -1px; }
.haken.gelesen { color: var(--akzent); font-weight: 700; }

/* Systemmeldungen des Bestellsystems - schmal und mittig, damit sie sich
   von echten Nachrichten unterscheiden. */
.chatsystem {
  margin: 10px auto;
  max-width: 480px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--flaeche-2);
  border: 1px dashed var(--rand);
  font-size: 12.5px;
}
.chatsystem .systemtext { white-space: pre-wrap; }
.chatsystem .chatfuss { justify-content: center; }

/* --------------------------------------------------------- Schreiben */
.chateingabe {
  border-top: 1px solid var(--rand);
  padding: 10px 16px 12px;
  background: var(--flaeche);
}
.schnellzeile {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.schnellknopf {
  border: 1px solid var(--rand);
  background: var(--flaeche-2);
  color: var(--schrift);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.schnellknopf:hover { border-color: var(--akzent); color: var(--akzent); }
.artikelwahl { border-radius: 20px; padding: 5px 10px; font-size: 12.5px; }

.eingabezeile { display: flex; gap: 8px; align-items: flex-end; }
.eingabezeile textarea {
  flex: 1; resize: vertical; min-height: 44px; font: inherit;
}
.dateiknopf { cursor: pointer; white-space: nowrap; }
.chateingabe .dateiname { color: var(--akzent); margin-top: 5px; }

.chatleer { align-self: start; }

/* ------------------------------------------- Schon angefordert
   Steht auf der Kachel, direkt ueber der Mengenzeile: wer gleich klicken
   will, liest vorher, dass ein Kollege das schon angefordert hat. Genau
   dort faellt der Blick hin, bevor die Hand auf den Knopf geht. */
.schonda {
  margin: 6px 8px 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--warn-hell);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
}
.schonda b { display: block; font-size: 11.5px; }
.anfordername { font-weight: 600; }

/* Die ganze Kachel bekommt einen Rand, damit es auch aus drei Metern
   Entfernung auffaellt - an der Maschine steht man nicht mit der Nase
   am Bildschirm. */
.werkzeugkachel.laeuftschon { border-color: var(--warn); }

.unterwegsgruppe + .unterwegsgruppe { margin-top: 14px; }
.unterwegsgruppe h3 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--schrift-matt);
}
table.liste.schmal td { padding: 4px 8px; }

@media print {
  /* Ein Chatverlauf wird gelegentlich ausgedruckt - dann ohne Eingabefeld
     und ohne Kanalliste, und vollstaendig statt gescrollt. */
  .chatliste, .chateingabe, .chatsuche { display: none; }
  .chatseite { grid-template-columns: 1fr; }
  .chatfenster { height: auto; min-height: 0; border: 0; }
  .chatverlauf { overflow: visible; max-height: none; }
  .chatzeile, .chatsystem { break-inside: avoid; }
}

/* ==========================================================================
   Angebot automatisch erstellen
   ========================================================================== */
/* Die Ablageflaeche fuer Zeichnungen. Gross genug, dass man sie mit einer
   Handvoll Dateien trifft, ohne zu zielen. */
.ablage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 30px 20px;
  margin: 12px 0;
  border: 2px dashed var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche-2);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.ablage:hover, .ablage.drueber {
  border-color: var(--akzent);
  background: var(--akzent-hell);
}
.ablagezeichen { font-size: 30px; line-height: 1; }
.ablage .klein { color: var(--schrift-matt); }
#ablageliste { margin-top: 6px; color: var(--akzent); font-weight: 600; }

/* Woher ein Wert stammt - Dateiname oder Zeichnung. Wer das sieht, weiss,
   wie weit er dem Wert trauen kann. */
.herkunft {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 20px;
  background: var(--gut-hell);
  color: var(--gut);
  white-space: nowrap;
}
.herkunft.ausdatei { background: var(--akzent-hell); color: var(--akzent); }

/* Eine Zeile, aus der nichts gelesen werden konnte. */
tr.nichtlesbar td { background: var(--warn-hell); }

.positionsfelder { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.positionsfelder .feld.wachsend { flex: 1 1 260px; }
.zeichnungsliste { margin: 12px 0; }
.umhaengen summary { cursor: pointer; color: var(--schrift-matt); }
.umhaengenfeld {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end;
  margin-top: 5px;
}

/* Der Übernehmen-Knopf bleibt beim Scrollen stehen: wer unten eine Farbe
   anklickt, sieht die Wirkung sofort und muss den Knopf nicht suchen. */
.darstellungfuss {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
#darstellungstand.offen { color: var(--warn); font-weight: 600; }

/* ------------------------------------------- Material je Position
   Manches wird bestellt, manches stellt der Kunde bei, manches liegt im
   Lager - und das gilt je Position, nicht je Auftrag. */
.materialpositionen td { vertical-align: top; }
.materialpositionen tr.offenzeile td { background: var(--warn-hell); }
.matwahl { display: flex; flex-wrap: wrap; gap: 4px; }
.mattermin-feld { margin-top: 5px; }
.mattermin-feld summary { cursor: pointer; color: var(--schrift-matt); font-size: 11.5px; }
.mattermin-feld form { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.mattermin-feld input[type=text] { min-width: 140px; }
.materialpositionen .faellig { color: var(--fehler); font-weight: 600; }

/* Eine Arbeit, die seit ueber acht Stunden laeuft, ist meist ein
   vergessenes Stopp und keine echte Laufzeit. */
.langelaeufer { color: var(--fehler); font-weight: 700; }
/* Die Kachel der laufenden Arbeiten - gruen, solange etwas laeuft. */
.kachel.gut { border-color: var(--gut); }
.kachel.gut .wert { color: var(--gut); }

/* ==========================================================================
   Prozesskette
   ========================================================================== */
/* Der Streifen in der Positionszeile: die ganze Fertigungsfolge auf einen
   Blick, ohne aufzuklappen. */
/* Kevin am 09.09.2026: "bei positionen die gruen sind dort auch der
   name der taetigkeit drin steht das man weiss was wirklich ist."
   Vorher stand der Arbeitsgang nur im title - man musste mit der Maus
   daraufgehen und warten. */
.kettenstreifen {
  display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center;
  padding: 2px 4px; border-radius: 20px;
  background: var(--flaeche-2); border: 1px solid var(--rand);
  max-width: 100%;
}
.kettenstreifen .kettenglied {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 11px; line-height: 1.5;
  padding: 0 7px; border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.kettenstreifen .gliedzeichen { font-size: 10px; }
.kettenstreifen .kettenglied.stand-fertig {
  color: var(--gut); background: var(--gut-hell); border-color: var(--gut);
}
.kettenstreifen .kettenglied.stand-laeuft {
  color: var(--akzent); font-weight: 700;
  background: var(--akzent-hell); border-color: var(--akzent);
}
.kettenstreifen .kettenglied.stand-aussen {
  color: var(--warn); background: var(--warn-hell); border-color: var(--warn);
}
.kettenstreifen .kettenglied.stand-wartet {
  color: var(--schrift-matt); border-color: var(--rand);
}

.prozesskette { margin-bottom: 16px; }
.kettentabelle td { vertical-align: top; }
.kettentabelle .gross { font-size: 15px; }
/* Der Schritt, an dem gerade gearbeitet wird - und der, der zu lange
   draussen ist. */
.kettentabelle tr.jetzt td { background: var(--akzent-hell); }
.kettentabelle tr.ueberfaellig td { background: var(--fehler-hell); }
.kettenknoepfe { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.kettenpfeile { display: inline-flex; gap: 2px; }
.kettenplanung { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.kettenplanung .reihe { gap: 6px; }
.versandfeld summary { cursor: pointer; color: var(--schrift-matt); }
.versandfeld form { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.versandfeld input[type=text] { min-width: 150px; }
.versandfeld input[type=number] { width: 90px; }

table.liste tr.ueberfaellig td { background: var(--fehler-hell); }
.faellig { color: var(--fehler); font-weight: 600; }
.vorlagenzeile { padding: 8px 0; border-bottom: 1px solid var(--rand); }
.vorlagenzeile:last-child { border-bottom: none; }

/* Eine Position innerhalb einer Fremdbearbeitung - mit eigenem Stand.
   Von drei Bauteilen beim Haerter ist oft nur eines zurueck. */
.fremdposition {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 3px 0; border-bottom: 1px dashed var(--rand);
}
.fremdposition:last-child { border-bottom: none; }
.fremdposition.zurueck { opacity: .7; }
.fremdposition form { margin-left: auto; }

/* Wer macht diesen Arbeitsgang - direkt in der Kettenzeile aenderbar. */
.wersteuer select { width: 100%; max-width: 170px; font-size: 12px; padding: 2px 4px; }
.vorlage.ausgeblendet { opacity: .6; }

/* Was aus einer Prozesskette noch kommt, aber noch nicht dran ist.
   Bewusst blass: es ist Information, keine Aufforderung. */
.karte.warteschlange { border-left: 3px solid var(--warn); }
.arbeitskachel.wartet {
  background: var(--flaeche2); border-style: dashed; cursor: default; opacity: .85;
}
.arbeitskachel.wartet:hover { transform: none; box-shadow: none; }

/* ================================================ Liste "Aufträge in Arbeit"
   Ein Arbeitsblatt fuer das eigene Haus - kein Beleg fuer den Kunden.
   Deshalb kein Briefkopf, dafuer viele Zeilen auf wenig Papier.
   ========================================================================== */
.arbeitsliste { font-size: 9pt; }
.al-kopf {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 8mm; border-bottom: 0.5mm solid #000; padding-bottom: 2mm;
  margin-bottom: 4mm;
}
.al-titel { font-size: 15pt; margin: 0; }
.al-unterzeile { font-size: 8.5pt; margin-top: 1mm; }
.al-datum { font-size: 8.5pt; white-space: nowrap; }

.al-positionen {
  width: 100%; border-collapse: collapse; margin-bottom: 3mm;
  /* Ein Auftrag bleibt auf einem Blatt. Kevin am 21.08.2026: „bitte die
     liste oder aufträge nicht abschneiden ... nicht schneiden wenn es
     geht." Das kostet unten etwas Papier, aber in der Werkstatt steht man
     sonst mit einem halben Auftrag in der Hand. */
  break-inside: avoid; page-break-inside: avoid;
}
/* „wenn es geht" ist woertlich zu nehmen: ein Auftrag mit mehr Positionen,
   als auf ein Blatt passen, MUSS umbrechen. Dann wiederholt der Drucker
   den <thead> - und die Auftragsnummer steht auch auf dem Folgeblatt. */
.al-positionen thead { display: table-header-group; }
.al-positionen tr { break-inside: avoid; page-break-inside: avoid; }

.al-auftragkopf th {
  background: #ececec; padding: 1mm 2mm; border: none;
  border-top: 0.4mm solid #000;
}
.al-auftragkopf th > span { display: inline; }
.al-nr { font-weight: 700; font-family: var(--mono); white-space: nowrap; }
.al-firma { font-weight: 600; }
.al-termin { float: right; white-space: nowrap; font-size: 9pt; font-weight: 400; }
.al-spaet { font-weight: 700; text-decoration: underline; }

.al-notizzeile th {
  font-weight: 400; font-size: 8pt; text-align: left;
  padding: 0.6mm 2mm 0; border: none;
}

.al-spalten th {
  text-align: left; font-size: 7.5pt; font-weight: 600;
  border-bottom: 0.2mm solid #666; padding: 0.6mm 2mm;
}
.al-positionen td {
  padding: 0.65mm 2mm; vertical-align: top;
  border-bottom: 0.2mm dotted #ccc;
}
.al-positionen tbody tr:last-child td { border-bottom: none; }
.al-positionen .rechts { text-align: right; }
.al-zusatz { font-size: 8pt; }
.al-marke {
  font-size: 7pt; border: 0.2mm solid #666; padding: 0 1mm;
  margin-left: 1.5mm; white-space: nowrap;
}
/* Geliefertes steht nur zur Vollstaendigkeit da - es traegt sich blasser. */
.al-erledigt td { color: #666 !important; }

@media print {
  .arbeitsliste .al-auftragkopf th {
    background: #ececec; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* Liegt das Material? Die Frage steht vor jedem Start, deshalb steht die
   Antwort als Erstes im Reiter - nicht zwischen den Knoepfen versteckt. */
.materialampel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: 6px; margin-bottom: 12px;
  border-left: 4px solid;
}
.materialampel b { font-size: 15px; }
.materialampel span { font-size: 13px; }
.materialampel.da    { background: var(--gut-hell);  border-color: var(--gut);  color: var(--gut); }
.materialampel.fehlt { background: var(--warn-hell); border-color: var(--warn); color: var(--warn); }

/* Was fuer denselben Lieferanten bereitliegt - gebuendelt, damit nicht
   dreimal einzeln zum selben Haerter gefahren wird. */
.sammelfahrt {
  border: 1px solid var(--rand); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 10px;
}
.sammelkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.sammelteile { list-style: none; margin: 8px 0; padding: 0; }
.sammelteile li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 3px 0; border-bottom: 1px dashed var(--rand); font-size: 13px;
}
.sammelteile li:last-child { border-bottom: none; }

/* Was in einem Auftrag liegt, direkt in der Liste "Material fehlt" -
   sonst muss man jeden Auftrag einzeln aufmachen, um zu wissen, was zu
   bestellen ist. */
.materialteile { font-size: 13px; max-width: 320px; }
.materialteile > div { padding: 1px 0; }

/* ==================================================== Prüfungen & Sicherheit
   Die digitale Sicherheitsakte. Die Ampel ist das Herzstück: eine Farbe,
   eine Frage - muss ich heute etwas tun?
   ========================================================================== */
.ampel {
  font-size: 15px; line-height: 1; vertical-align: middle;
  text-shadow: 0 0 3px rgba(0,0,0,.15);
}
.ampel.gruen { color: var(--gut); }
.ampel.gelb  { color: var(--warn); }
.ampel.rot   { color: var(--fehler); }
.ampel.grau  { color: var(--matt); }

/* Überfällige Zeilen fallen auf - sie dürfen nicht übersehen werden. */
.pruefliste tr.ueberfaellig { background: var(--fehler-hell); }
.pruefliste tr.ueberfaellig td { font-weight: 500; }

/* Das Sicherheits-Dashboard: eine Zahl, die morgens in zwei Sekunden sagt,
   ob alles in Ordnung ist. */
.sicherheitskarte { border-left: 4px solid var(--akzent); }
.sicherheit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 26px;
}
.quote { text-align: center; min-width: 150px; }
.quotenwert { font-size: 44px; font-weight: 700; line-height: 1.05; }
.quote.gut .quotenwert      { color: var(--gut); }
.quote.mittel .quotenwert   { color: var(--warn); }
.quote.schlecht .quotenwert { color: var(--fehler); }
.quotentitel { font-size: 13px; margin-top: 2px; }
.quotenliste { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.quotenliste li { padding: 2px 0; }
.quotenliste li b { display: inline-block; min-width: 34px; font-size: 16px; }
.quotenliste li.warn b   { color: var(--warn); }
.quotenliste li.fehler b { color: var(--fehler); }
.quotenhinweis { flex: 1 1 220px; min-width: 200px; }

/* Der Stand einer einzelnen Prüfung - fünf Angaben nebeneinander. */
.pruefstand {
  display: flex; flex-wrap: wrap; gap: 26px;
  border-left: 4px solid transparent;
}
.pruefstand.gruen { border-color: var(--gut); }
.pruefstand.gelb  { border-color: var(--warn); }
.pruefstand.rot   { border-color: var(--fehler); background: var(--fehler-hell); }
.pruefstand.grau  { border-color: var(--rand); }
.pruefstand .gross { font-size: 17px; }
.pruefstand.rot .gross { color: var(--fehler); }

/* Der Kalender: ein Tagesblock, daneben die Prüfung. */
.kalenderliste { display: flex; flex-direction: column; gap: 6px; }
.kalendertag {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px;
  text-decoration: none; color: inherit; border-left-width: 4px;
}
.kalendertag:hover { background: var(--flaeche2); }
.kalendertag.ampel-gruen { border-left-color: var(--gut); }
.kalendertag.ampel-gelb  { border-left-color: var(--warn); }
.kalendertag.ampel-rot   { border-left-color: var(--fehler); background: var(--fehler-hell); }
.kalendertag.ampel-grau  { border-left-color: var(--rand); }
.kaltag {
  text-align: center; min-width: 46px; padding: 2px 4px;
  background: var(--flaeche2); border-radius: 5px;
}
.kalzahl { font-size: 20px; font-weight: 700; line-height: 1.1; }
.kalmonat { font-size: 10px; text-transform: uppercase; }
.kalinhalt { flex: 1 1 auto; min-width: 0; }
.kalinhalt .zeile1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }

/* Nachweise eines Mitarbeiters: Ersthelfer, Staplerschein, Unterweisung. */
.nachweisliste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.nachweis {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 9px; border: 1px solid var(--rand); border-radius: 5px;
  text-decoration: none; color: inherit; border-left-width: 3px;
}
.nachweis:hover { background: var(--flaeche2); }
.nachweis.ampel-gruen { border-left-color: var(--gut); }
.nachweis.ampel-gelb  { border-left-color: var(--warn); }
.nachweis.ampel-rot   { border-left-color: var(--fehler); background: var(--fehler-hell); }
.nachweis.ampel-grau  { border-left-color: var(--rand); }

/* Die Bemerkung in der Auftragsliste: worum es geht, ohne den Auftrag zu
   oeffnen. Zwei Zeilen genuegen fuer „Entgasungsstopfen K70/Blindstopfen
   K150E" - was laenger ist, steht im Titel und beim Aufmachen. */
.bemerkzelle {
  font-size: 13px; max-width: 230px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Storniert ist rot wie „angemahnt", meint aber das Gegenteil: dort muss
   jemand hinterher, hier gerade nicht mehr. Der Durchstrich macht den
   Unterschied auf einen Blick. */
.marker.storniert { text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ============================================ Toleranzen im Prüfprotokoll
   Nennmass gross, die beiden Abmasse klein rechts uebereinander - genau
   so, wie die Toleranz auf der Zeichnung steht:

        +0,2
     40 -0,1
   ========================================================================= */
/* Die Zelle mit dem Sollmass: Nennmass, Abmasse, Grenzen und der
   freie Text stehen untereinander. */
.protokolltabelle td.tolzelle { vertical-align: top; }
.toleranz { display: flex; align-items: center; gap: 4px; }
.toleranz .tolnenn {
  flex: 1 1 auto; min-width: 54px; text-align: center;
  font-size: 15px; font-weight: 600; font-family: var(--mono);
  padding-left: 4px; padding-right: 4px;
}
/* Breit genug fuer „+0,02": mit 62 px war die Zahl abgeschnitten und
   man sah nur „+0". Ein Eingabefeld, dessen Inhalt man nicht lesen kann,
   ist keins. */
/* Breit genug fuer feine Abmasse wie „+0,0017“ - mit 80 px war bei
   vier Nachkommastellen das Ende abgeschnitten. Ein Eingabefeld, dessen
   Inhalt man nicht lesen kann, ist keins. */
.tolabmasse { display: flex; flex-direction: column; gap: 1px; width: 112px; }
.tolabmasse input {
  text-align: center; font-size: 12.5px; padding: 2px 2px;
  font-family: var(--mono); line-height: 1.35; height: auto;
  letter-spacing: -0.2px;
}
.toloben  { border-bottom-width: 0 !important; border-radius: 4px 4px 0 0 !important; }
.tolunten { border-radius: 0 0 4px 4px !important; }

/* Das errechnete Toleranzfeld - von … bis, damit man beim Messen weiss,
   was noch geht. */
.tolgrenzen {
  text-align: center; font-size: 10.5px; font-family: var(--mono);
  color: var(--schrift-matt); margin-top: 2px;
}
.tolfrei { font-size: 11.5px; margin-top: 3px; text-align: center; }

/* Kevin am 22.08.2026: „alles was ich eintrage muss mittig stehen in der
   spalte zentriert und sauber." */
.protokolltabelle input.mitte,
.protokolltabelle td.mitte,
.protokolltabelle th { text-align: center; }
.protokolltabelle td.mitte select { margin: 0 auto; }
.protokolltabelle th:nth-child(2),
.protokolltabelle td:nth-child(2) { text-align: left; }

/* Wenn der gemessene Wert etwas anderes sagt als die eingetragene
   Bewertung. Ein Hinweis, kein Urteil - freigeben tut der Prüfer. */
.tolwiderspruch {
  font-size: 10.5px; margin-top: 3px; color: var(--fehler); font-weight: 600;
}
.tolvorschlag { font-size: 10.5px; margin-top: 3px; color: var(--schrift-matt); }

/* Die Toleranz im Ausdruck - dieselbe Schreibweise wie auf der Zeichnung.
   Feste Punktgroessen, weil das Blatt gedruckt immer gleich aussehen muss. */
.pp-toleranz { display: inline-flex; align-items: center; gap: 1.2mm; }
.pp-nenn { font-size: 11pt; font-weight: 700; }
.pp-abmasse {
  display: inline-flex; flex-direction: column;
  font-size: 7pt; line-height: 1.15; text-align: left;
}
.pp-abmasse > span:first-child { border-bottom: 0.2mm solid #555; padding-bottom: 0.2mm; }
.pp-sollfrei { font-size: 8pt; margin-top: 0.6mm; }

/* Erledigte Arbeitsgaenge auf der Plantafel: Streifen im oberen Teil des
   Balkens, feste Farbe je Arbeitsgang (die Fremdbearbeitung liegt unten).
   So sagt der Balken selbst, was schon gemacht ist - Drehen fertig,
   Fraesen fertig - ohne den Auftrag zu oeffnen. */
.pt-arbeit {
  position: absolute;
  /* Obere Haelfte des Balkens (der beginnt bei 5px): die Fremdbearbeitung
     liegt unten ab 22px, so kommen sich beide nicht in die Quere. */
  top: 7px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid var(--flaeche);
  display: flex;
  align-items: center;
  padding: 0 3px;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}
.pt-probe.arbeit { background: #7e57c2; }

/* Erledigte Arbeitsgaenge in der Balkenbeschriftung: Farbpunkt + Name.
   Der Streifen zeigt WANN, die Beschriftung sagt WAS - denn eine
   eintaegige Arbeit ergibt einen Streifen, der zu schmal fuer Text ist. */
.pt-gang {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 9px; font-size: 13px; white-space: nowrap;
}
.pt-gang i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
  border: 1px solid rgba(255,255,255,.7);
}

/* Pool-Arbeit: frei fuer alle mit passender Rolle. Gruen umrandet, weil
   sie ergriffen werden will - im Gegensatz zur blassen Warteschlange. */
.karte.poolkarte { border-left: 3px solid var(--gut); }
.arbeitskachel.poolfrei { border-style: solid; border-color: var(--gut); cursor: default; }
.arbeitskachel.poolfrei:hover { transform: none; box-shadow: none; }

/* Mehrere Taetigkeiten je Mitarbeiter - als Haken nebeneinander. */
.rollenhaken { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 4px; }
.rollenhak {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; white-space: nowrap; cursor: pointer;
}
.rollenhak input { width: auto; margin: 0; }

/* Die Zeichnung als kleine Vorschau direkt beim Materialbestellen - ein
   Klick oeffnet sie gross. */
.matzeichnung {
  width: 74px; height: 52px; object-fit: cover; object-position: top left;
  border: 1px solid var(--rand); border-radius: 4px; background: #fff;
  display: inline-block; vertical-align: middle;
}
.matzeichnung:hover { outline: 2px solid var(--akzent); }

/* In der Liste "Material fehlt" etwas kleiner als am Auftrag. */
.matzeichnung.klein { width: 52px; height: 38px; }
.materialteilzeile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Lagerbestand im Menue: zum Ausklappen, mit den beiden Unterpunkten. */
.navklapp > summary { cursor: pointer; list-style: none; }
.navklapp > summary::-webkit-details-marker { display: none; }
.navklapp > summary.gruppe::after { content: " ▸"; font-size: 9px; }
.navklapp[open] > summary.gruppe::after { content: " ▾"; }

/* Rahmen um die fest eingebaute Kalkulation: fuellt die volle Resthoehe
   des Fensters, die linke Leiste des Auftragsbuchs bleibt stehen. */
.kalkrahmen {
  display: block;
  width: 100%;
  height: calc(100vh - 60px);
  border: 0;
  border-radius: 12px;
  background: #fff;
}

/* Fertigungshinweis je Arbeitsgang der Prozesskette */
.hinweissteuer {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  align-items: center;
}
.hinweissteuer input[type="text"] {
  flex: 1;
  min-width: 120px;
  font-size: 12px;
  padding: 3px 6px;
}
.hinweissteuer button { flex: 0 0 auto; }
.prozesshinweis {
  margin-top: 4px;
  font-size: 12px;
  padding: 3px 7px;
  border-left: 3px solid var(--warn);
  background: var(--warn-hell);
  border-radius: 0 4px 4px 0;
}

/* ---------------------------------------------------------- Leitstand */
/* Kontrollansicht der Prozessketten: jede Kette ein Weg von links nach
   rechts, der aktuelle Schritt eingerahmt. */
/* Etwas gedrungener als die Startseite - hier stehen sieben Zahlen */
.kacheln.leitzahlen { grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr)); gap: 10px; }
.leitzahlen .kachel { padding: 11px 13px; }
.leitzahlen .kachel .wert { font-size: 22px; }
.kachel.achtung { border-color: var(--warn); }
.kachel.achtung .wert { color: var(--warn); }
.kachel.spaet { border-color: var(--fehler); }
.kachel.spaet .wert { color: var(--fehler); }

.gangverteilung { padding: 8px 4px 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.karte.leitkarte { padding: 12px 14px; margin-bottom: 10px; }
.karte.leitkarte.ueberfaellig { border-left: 3px solid var(--fehler); }
.karte.leitkarte.fertigkette { opacity: .68; }

.leitkopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.leittitel { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.leitbauteil { font-weight: 600; }
.leitrechts { display: flex; align-items: center; gap: 8px; }
.leitfortschritt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--flaeche-2);
}

/* Der Weg selbst - waagerecht scrollbar, damit lange Ketten nicht umbrechen */
.kettenweg {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 0 8px;
}
/* An `.kettenweg` gebunden: dieselbe Klasse heisst in der
   Positionszeile etwas anderes, und diese Regeln stehen spaeter in der
   Datei. Ohne die Bindung wurden dort 118 Pixel breite Kaesten daraus. */
.kettenweg .kettenglied {
  flex: 0 0 auto;
  min-width: 118px;
  border: 1px solid var(--rand);
  border-radius: 7px;
  padding: 5px 9px;
  background: var(--flaeche);
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
}
.gliedzeichen { font-size: 14px; line-height: 1.1; }
.gliedname { font-weight: 600; font-size: 12.5px; }
.gliedwer { opacity: .8; }
.offenwer { color: var(--warn); font-weight: 600; }
.gliedhinweis { position: absolute; top: 4px; right: 6px; opacity: .65; }

.kettenweg .kettenglied.stand-fertig { background: var(--gut-hell); border-color: var(--gut); }
.kettenweg .kettenglied.stand-fertig .gliedzeichen { color: var(--gut); }
.kettenweg .kettenglied.stand-wartet { opacity: .6; }
.kettenweg .kettenglied.stand-aussen,
.kettenweg .kettenglied.stand-bereit,
.kettenweg .kettenglied.stand-sammeln { background: var(--flaeche-2); }
.kettenweg .kettenglied.spaet { border-color: var(--fehler); }

/* Hier steht die Kette gerade - deutlich hervorgehoben */
.kettenweg .kettenglied.jetzt {
  border: 2px solid var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-hell);
  background: var(--flaeche);
}
.kettenweg .kettenglied.jetzt .gliedname { font-size: 13px; }

.kettenpfeil {
  align-self: center;
  font-size: 17px;
  opacity: .45;
  flex: 0 0 auto;
}

.leitsatz {
  border-top: 1px solid var(--rand);
  padding-top: 7px;
}
.jetzttext { color: var(--akzent); }
.leithinweis {
  margin-top: 5px;
  padding: 3px 8px;
  border-left: 3px solid var(--warn);
  background: var(--warn-hell);
  border-radius: 0 4px 4px 0;
}

/* --------------------------------------------- Klappbare Abteilungen */
/* Kevin am 25.08.2026: zwischen jeder Abteilung ein Cut mit blauer
   Linie; alle Abteilungen offen, aber zuklappbar. */
.navgruppe {
  /* grau, nicht blau - Kevin am 26.08.2026 */
  border-top: 2px solid var(--rand);
  margin-top: 10px;
  padding-top: 4px;
}
.navgruppe:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.navgruppe > summary,
.navklapp > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.navgruppe > summary::-webkit-details-marker { display: none; }
.navgruppe > summary::after,
.navklapp > summary.gruppe::after {
  content: "▾";
  margin-left: auto;
  font-size: 10px;
  opacity: .55;
  transition: transform .15s;
}
.navgruppe:not([open]) > summary::after,
.navklapp:not([open]) > summary.gruppe::after { transform: rotate(-90deg); }
.navgruppe > summary:hover, .navklapp > summary.gruppe:hover { color: var(--akzent); }

/* Vorgabezeiten je Position - intern, nie auf einem Kundenbeleg */
.vorgabeblock { margin-top: 14px; }
.vorgabetabelle input[type="number"] { width: 62px; text-align: right; }
.vorgabezeile { display: inline-flex; align-items: center; gap: 4px; }
.vorgabefuss {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.vorgabeknoepfe { display: flex; gap: 8px; align-items: center; }
.vorgabetabelle tr.vorgabesumme td {
  border-top: 1px solid var(--rand);
  font-weight: 600;
}

/* Vorgabezeit auf der Arbeitskarte - auffaellig, aber kein Alarm */
.vorgabehinweis {
  margin: 8px 0;
  padding: 7px 12px;
  border-left: 3px solid var(--akzent);
  background: var(--akzent-hell);
  border-radius: 0 6px 6px 0;
  font-size: 14px;
}

/* ------------------------- Einklappbare Rubriken der Auftragsseite */
/* Kevin am 26.08.2026: alle Rubriken zu, Status trotzdem im Kopf. */
.karte.rubrik > h2 {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.karte.rubrik > h2::after {
  content: "\25be";               /* ▾ */
  margin-left: auto;
  font-size: 13px;
  opacity: .55;
  transition: transform .15s;
}
.karte.rubrik.zu > h2::after { transform: rotate(-90deg); }
.karte.rubrik.zu > h2 { margin-bottom: 0; }
.karte.rubrik.zu > *:not(h2) { display: none; }
.karte.rubrik > h2:hover { color: var(--akzent); }

/* Dashboard: wo gerade gearbeitet wird, blinkt es gruen. */
@keyframes arbeitspuls {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.karte.leitkarte.arbeitet { border-left: 4px solid var(--gut); }
.arbeitspunkt {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gut);
  animation: arbeitspuls 1.4s ease-in-out infinite;
  flex: 0 0 auto;
}
.kettenglied.stand-laeuft {
  background: var(--gut-hell);
  border-color: var(--gut);
  animation: arbeitspuls 1.4s ease-in-out infinite;
}
.kettenglied.stand-laeuft .gliedzeichen,
.kettenglied.stand-laeuft .gliedname { color: var(--gut); }
/* Wer blinkende Elemente abgeschaltet hat, bekommt Ruhe - gruen bleibt. */
@media (prefers-reduced-motion: reduce) {
  .arbeitspunkt, .kettenglied.stand-laeuft { animation: none; }
}

/* Arbeitsplan: laufende Zeit blinkt, Kachel bekommt gruenen Rand. */
.marker.uhrblinkt { animation: arbeitspuls 1.4s ease-in-out infinite; }
.arbeitskachel.zeitlaeuft,
.planungskarte.zeitlaeuft {
  border-left: 4px solid var(--gut);
  animation: arbeitspuls 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .marker.uhrblinkt, .arbeitskachel.zeitlaeuft,
  .planungskarte.zeitlaeuft { animation: none; }
}

/* Dashboard: Blinken nur bei wirklich laufender Uhr. */
.arbeitspunkt.still { animation: none; opacity: .5; }
.kettenglied.uhrlaeuft { animation: arbeitspuls 1.4s ease-in-out infinite; }
.kettenglied .gliedscheibe { margin-top: 3px; align-self: flex-start; font-size: 11px; }
@media (prefers-reduced-motion: reduce) {
  .kettenglied.uhrlaeuft { animation: none; }
}

/* Fertigungshinweise aus der Werkstatt - Verlauf an der Position. */
.werkstattnotizen {
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--gut);
  background: var(--gut-hell);
  border-radius: 0 6px 6px 0;
}
.werkstattnotiz { margin-top: 4px; }
.werkstattnotiz .notiztext { font-weight: 600; }

/* ================================================================
   Zerspano-Ergänzungen: Produktseite, Anmeldung, Abo-Module
   ================================================================ */

.produktkopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Umbrechen statt ausbrechen: Marke, Preise, Anmelden, "Kostenlos
     testen" und die Sprachwahl sind zusammen 476 Pixel breit. Auf
     einem Telefon mit 390 schob sich sonst die ganze Seite seitlich
     weg (16.09.2026). */
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 28px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
.produktkopf .marke { border: 0; padding: 0; display: flex; align-items: center; }
/* Logo aus marke/ (11.09.2026): Zeichen in der Akzentfarbe, Schrift in
   der Textfarbe - so wechselt es mit dem Dunkelmodus von selbst. */
.zlogo { display: block; height: 30px; width: auto; }
.zlogo-zeichen { fill: var(--akzent); }
.zlogo-wort { fill: var(--schrift); }
.produktkopf nav {
  display: flex; gap: 16px; align-items: center;
  flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}

/* Auf dem Telefon steht die Marke oben und die Knoepfe darunter -
   nebeneinander waere beides gequetscht. */
@media (max-width: 560px) {
  .produktkopf { padding: 12px 16px; gap: 8px; justify-content: center; }
  .produktkopf nav { justify-content: center; gap: 10px; font-size: 14px; }
  .produktmitte { padding: 20px 16px 48px; }
}

.produktmitte { max-width: 980px; margin: 0 auto; padding: 26px 24px 60px; }

.held { text-align: center; padding: 56px 16px 40px; }
.held h1 { font-size: 34px; letter-spacing: -.5px; line-height: 1.2; margin: 0 0 14px; }
.held p { max-width: 620px; margin: 0 auto 20px; color: var(--schrift-matt); font-size: 16px; }

.produktkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 14px;
}

.anmeldekarte { max-width: 420px; margin: 48px auto; }

.modulkarte { display: flex; flex-direction: column; gap: 6px; }
.modulkarte .modulkopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.modulkarte h3 { margin: 0; font-size: 15px; }
.modulkarte p { margin: 0; color: var(--schrift-matt); font-size: 13.5px; }
.modulkarte form { margin-top: 8px; }

/* --- WorkPool: Umkreis, Ruf, Karte -----------------------------------
   Kevin am 15.09.2026: Umkreisstufen zum Anklicken, dazu ein
   Schieberegler, Bewertungen an jeder Karte und eine Kartenansicht. */
.wp-umkreis { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-stufe { position: relative; }
.wp-stufe input { position: absolute; opacity: 0; pointer-events: none; }
.wp-stufe span {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  background: var(--flaeche);
  white-space: nowrap;
}
.wp-stufe input:checked + span,
.wp-stufe.an span {
  background: var(--akzent-hell);
  color: var(--akzent);
  border-color: var(--akzent);
  font-weight: 600;
}
.wp-stufe input:focus-visible + span { outline: 2px solid var(--akzent); }

.wp-regler { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wp-regler input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--akzent); }
.wp-regler output { min-width: 96px; font-weight: 600; color: var(--akzent); }

.wp-kennzahlen {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; margin-top: 4px;
}
.wp-kennzahlen a { text-decoration: none; }
.wp-abzeichen { font-size: 15px; cursor: help; }
.wp-abzeichen.gross {
  font-size: 13px; padding: 4px 10px; border-radius: 999px;
  background: var(--gut-hell); color: var(--gut); font-weight: 600;
}
.wp-abzeichen-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.wp-ansichtwahl {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; flex-wrap: wrap;
}

.wp-sterne { color: var(--gelb, #c99700); letter-spacing: 1px; }
.wp-ruf { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.wp-ruf-note { text-align: center; min-width: 120px; }
.wp-ruf-zahl { font-size: 38px; font-weight: 700; line-height: 1.1; }
.wp-ruf-punkte { display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.wp-kategorien { display: grid; gap: 6px; margin-bottom: 14px; }
.wp-kategorie {
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between; max-width: 420px;
}
.wp-kategorie > span:first-child { color: var(--schrift-matt); }
.wp-bewertungsliste { display: flex; flex-direction: column; gap: 12px; }
.wp-bewertung {
  border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px;
  background: var(--flaeche-2);
}
.wp-bewertung-kopf {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 4px;
}
.wp-verfahrenreihe { display: flex; flex-wrap: wrap; gap: 6px; }

.wp-partnerzeile {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--rand);
}
.wp-partnerzeile:last-child { border-bottom: none; }
.wp-partnerruf { text-align: right; min-width: 160px; }

/* Die schematische Deutschlandkarte. Kein Kachelserver - der Umriss
   steht als Pfad in der Seite, die Punkte sitzen an ihrer Leitregion. */
.wp-karte-huelle { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.wp-karte { width: 340px; max-width: 100%; height: auto; flex: 0 0 auto; }
.wp-land {
  fill: var(--flaeche-2); stroke: var(--rand); stroke-width: 1.4;
  stroke-linejoin: round; stroke-linecap: round;
}
.wp-punkt circle {
  fill: var(--akzent); opacity: .85; cursor: pointer;
  transition: opacity .15s ease;
}
.wp-punkt circle:hover { opacity: 1; }
.wp-punkt.notfall circle { fill: var(--fehler); }
.wp-ich circle { fill: var(--gut); stroke: var(--flaeche); stroke-width: 2; }
.wp-karte-liste { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.wp-karte-zeile {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  align-items: baseline; padding: 6px 8px; border-radius: 6px;
  text-decoration: none; color: inherit;
}
.wp-karte-zeile:hover { background: var(--flaeche-2); }
.wp-karte-zeile.notfall { border-left: 3px solid var(--fehler); }

/* Wie lange ein gekuendigtes Modul noch laeuft. Geschrieben wie der
   Hinweis zur Testphase auf /abo - dieselbe Sache, dieselbe Optik. */
.restlaufzeit {
  margin-top: 4px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  background: var(--akzent-hell);
  color: var(--akzent);
}
.restlaufzeit.knapp { background: var(--warn-hell); color: var(--warn); }

.menue a.gesperrt { color: var(--schrift-matt); font-weight: 400; }
.menue a.gesperrt:hover { background: var(--flaeche-2); }
.schloss { font-size: 11px; margin-left: auto; opacity: .75; }

.fusszeile {
  text-align: center;
  color: var(--schrift-matt);
  font-size: 13px;
  padding: 22px;
  border-top: 1px solid var(--rand);
}

/* --------------------------------------------- Aufklappbare Gruppen
   Aus dem SAWTec-Kalkulationsprogramm übernommen (style.css) — dort
   sind die Abschnitte der Kalkulation <details class="karte gruppe">
   mit dem Schritt rechts in der Kopfzeile. Farben auf die Variablen
   des Auftragsbuchs umgesetzt. */

details.karte.gruppe { padding: 0; }
details.karte.gruppe > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  background: var(--flaeche-2);
  border-radius: var(--radius);
  transition: background .12s;
  user-select: none;
}
details.karte.gruppe > summary::-webkit-details-marker { display: none; }
details.karte.gruppe > summary::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--schrift-matt);
  border-bottom: 2px solid var(--schrift-matt);
  transform: rotate(-45deg);
  margin-left: 3px;
  margin-right: 2px;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}
details.karte.gruppe[open] > summary::before { transform: rotate(45deg); }
details.karte.gruppe > summary:hover::before { border-color: var(--akzent); }
details.karte.gruppe > summary h2 {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
}
details.karte.gruppe > summary .anzahl {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--schrift-matt);
  background: var(--grund);
  padding: 4px 11px;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
details.karte.gruppe[open] > summary {
  border-bottom: 1px solid var(--rand);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ------------------------------------------------------ Rechtstexte
   Impressum, Datenschutz, AGB, AV-Vertrag. Fliesstext statt Tabellen:
   schmalere Zeilen, damit man beim Lesen die Zeile nicht verliert. */
.rechtstext .inhalt-block { max-width: 78ch; }
.rechtstext h3 {
  margin: 26px 0 8px;
  font-size: 15px;
  color: var(--schrift);
}
.rechtstext h3:first-child { margin-top: 0; }
.rechtstext h3.anlage {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 2px solid var(--rand);
}
.rechtstext p { line-height: 1.65; margin: 0 0 10px; }
.rechtstext ul { line-height: 1.65; margin: 0 0 12px; padding-left: 20px; }
.rechtstext li { margin-bottom: 5px; }
.rechtstext .tabelle-huelle { margin: 6px 0 16px; max-width: none; }

/* Unterschriftenfeld unter dem AV-Vertrag - nur beim Ausdruck wirklich
   gebraucht, stoert am Bildschirm aber auch nicht. */
.unterschriften {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 30px;
  margin-top: 46px;
  font-size: 12px;
  color: var(--schrift-matt);
}
.unterschriften .linie {
  border-bottom: 1px solid var(--schrift-matt);
  height: 40px;
  margin-bottom: 5px;
}

/* Die Verweise in der Fusszeile und unter dem Benutzerfeld. */
.fussverweise a { margin-left: 14px; }
.benutzerfeld .fussverweise {
  display: block;
  margin-top: 6px;
}
.benutzerfeld .fussverweise a { margin: 0 10px 0 0; }

@media print {
  /* Auf Papier bleibt nur der Vertrag - Kopfleiste, Menue und die
     Knoepfe darunter haben dort nichts zu suchen. */
  .rechtstext { border: none; box-shadow: none; }
  .produktkopf, .fusszeile { display: none; }
  .rechtstext .inhalt-block { max-width: none; }
}

/* --------------------------------------- Fertigungsstand je Position
   Uebernommen aus dem Auftragsbuch: rot = offen, gruen = erledigt, und
   waehrend eine Uhr laeuft blinkt der Knopf - wie im Dashboard. */
tr.arbeitklapp { cursor: pointer; }
tr.arbeitklapp .klapppfeil {
  display: inline-block; width: 14px; color: var(--akzent, inherit);
  font-size: 12px;
}
tr.arbeitzeile > td { background: var(--flaeche-2); padding: 10px 14px; }
.schrittliste { margin: 0; }
.schrittleiste { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.schrittleiste form { margin: 0; display: inline; }
.schrittknopf {
  border: 0; border-radius: 7px; padding: 5px 12px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: #fff; cursor: pointer; line-height: 1.2;
}
.schrittknopf.rot { background: var(--fehler); }
.schrittknopf.gruen { background: var(--gut); }
.schrittknopf:hover { filter: brightness(1.12); }
.schrittknopf.laeuft {
  background: var(--gut);
  animation: arbeitspuls 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .schrittknopf.laeuft { animation: none; }
}

/* "Bauteil komplett abgeschlossen": Knopf ganz rechts in der Leiste;
   die Zeile wird transparent gruen, damit die gruenen Knoepfe weiter
   gut sichtbar bleiben. */
.komplettform { margin-left: auto !important; }
.komplettknopf {
  border: 1px solid var(--gut); border-radius: 7px; padding: 4px 12px;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  color: var(--gut); background: transparent; cursor: pointer;
}
.komplettknopf:hover { background: var(--gut-hell); }
.komplettknopf.fertig { background: var(--gut); color: #fff; }
.schrittliste tr.komplettzeile > td {
  background: rgba(26, 127, 75, .13);
  background: color-mix(in srgb, var(--gut) 14%, transparent);
}

/* Alle Bauteile eines Auftrags durch: die ganze Zeile leuchtet ganz
   leicht gruen - Gruen auf Zeile UND Zellen, sonst bleiben Luecken. */
table.liste tr.arbeitklapp.auftragfertig,
table.liste tr.arbeitklapp.auftragfertig > td {
  background: rgba(26, 127, 75, .035) !important;
  background: color-mix(in srgb, var(--gut) 4%, transparent) !important;
}

/* Beim Verschieben in der Seitenleiste: der gepackte Eintrag bzw. die
   gepackte Abteilung wird halb durchsichtig, der Gruppentitel zeigt mit
   dem Greifcursor, dass man ihn packen kann. */
.menue .zieht { opacity: .45; }
.menue details.navgruppe > summary { cursor: grab; }
.menue details.navgruppe > summary:active { cursor: grabbing; }

/* -------------------------------------------------------- Der Berater
   Frage und Antwort untereinander wie im Chat, aber ruhiger: keine
   Sprechblasen, nur ein Strich links und ein bisschen Farbe. */
.beratung { display: flex; flex-direction: column; gap: 14px; }
.beratungszeile { border-left: 3px solid var(--rand); padding-left: 12px; }
.beratungszeile.gefragt { border-left-color: var(--akzent); }
.beratungszeile.geantwortet { border-left-color: var(--gut); }
.beratungszeile .wer {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--schrift-matt); margin-bottom: 3px;
}
.beratungszeile .wer .klein { font-weight: 400; text-transform: none;
  letter-spacing: 0; margin-left: 8px; }
/* Zeilenumbrueche aus der Antwort bleiben stehen - Aufzaehlungen des
   Modells zerfallen sonst zu einem Absatz. */
.beratungszeile .was { white-space: pre-wrap; line-height: 1.6; }
.knopf.vorschlag { font-weight: 400; }

/* --------------------------------------------- Berater als Sprechblase
   Unten rechts, auf jeder Seite ausser der Hilfe selbst. Wer mitten im
   Auftrag steht und kurz etwas nachschlaegt, soll danach wieder im
   Auftrag stehen - deshalb ein Fenster und keine neue Seite. */
.beraterecke {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

/* Der runde Knopf. Immer da, auch wenn die Blase weggeklickt wurde. */
.beraterknopf {
  width: 52px; height: 52px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--akzent); color: #fff;
  font-size: 24px; font-weight: 700; line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  transition: transform .12s, filter .12s;
}
.beraterknopf:hover { filter: brightness(1.1); transform: translateY(-1px); }
.beraterknopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

/* Die Ansprache, die nach kurzer Zeit aufgeht. */
.beraterblase {
  position: relative;
  max-width: 260px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 12px 12px 4px 12px;
  padding: 12px 30px 12px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
  font-size: 13.5px; line-height: 1.5;
  animation: blase-rein .22s ease-out;
}
.beraterblase b { display: block; margin-bottom: 3px; }
.beraterblase span { color: var(--schrift-matt); }
.beraterblase i { font-style: italic; }
.blasezu {
  position: absolute; top: 4px; right: 6px;
  border: 0; background: none; cursor: pointer;
  color: var(--schrift-matt); font-size: 18px; line-height: 1;
  padding: 2px 5px; border-radius: 4px;
}
.blasezu:hover { background: var(--flaeche-2); color: var(--schrift); }

@keyframes blase-rein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .beraterblase { animation: none; }
}

/* `display: flex` ueberstimmt das eingebaute [hidden] des Browsers -
   ohne diese Zeile nimmt das geschlossene Fenster weiter Platz weg und
   schiebt die Sprechblase in die Mitte des Bildschirms. */
.beraterecke [hidden] { display: none !important; }

/* Das Fenster mit dem Gespraech. */
.beraterfenster {
  width: min(360px, calc(100vw - 44px));
  max-height: min(520px, calc(100vh - 130px));
  display: flex; flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.beraterkopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--rand);
  background: var(--flaeche-2);
}
.beraterkopf > div { display: flex; align-items: center; gap: 10px; }
.beraterkopf a { font-size: 12px; }
.beraterkopf button {
  border: 0; background: none; cursor: pointer; font-size: 20px;
  line-height: 1; color: var(--schrift-matt); padding: 0 3px;
}
.beraterkopf button:hover { color: var(--schrift); }
.beraterlauf {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 13.5px;
}
.beraterlauf .beratungszeile { border-left-width: 2px; padding-left: 9px; }
.beraterfuss {
  display: flex; gap: 6px; padding: 10px;
  border-top: 1px solid var(--rand);
}
.beraterfuss input { flex: 1; min-width: 0; }

/* Waehrend gefragt wird: drei Punkte statt einer leeren Flaeche. */
.beraterlauf .denkt { color: var(--schrift-matt); font-style: italic; }

/* Auf schmalen Bildschirmen fuellt das Fenster fast alles - an einem
   Werkstatt-Tablet ist ein 360-px-Kasten in der Ecke zu klein. */
@media (max-width: 560px) {
  .beraterecke { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
  .beraterblase { max-width: none; }
  .beraterfenster { width: auto; max-height: calc(100vh - 110px); }
  .beraterknopf { align-self: flex-end; }
}
@media print { .beraterecke { display: none !important; } }

/* ------------------------------------------------------ Gefuehrte Wege
   Das Element, auf das es gerade ankommt, bekommt einen blinkenden
   Rahmen. Bewusst ein Rahmen und kein Abdunkeln der Seite: der Benutzer
   soll den Zusammenhang weiter sehen, nicht nur das eine Feld. */
.fuehrung-ziel {
  position: relative;
  z-index: 61;
  border-radius: 6px;
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  animation: fuehrung-puls 1.3s ease-in-out infinite;
}
@keyframes fuehrung-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 95, 168, .45); }
  50%      { box-shadow: 0 0 0 9px rgba(31, 95, 168, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fuehrung-ziel { animation: none; }
}

/* Der Hinweis daneben: was hier zu tun ist. */
.fuehrung-kasten {
  position: fixed; z-index: 70;
  max-width: 320px;
  background: var(--flaeche);
  border: 1px solid var(--akzent);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
  font-size: 13.5px; line-height: 1.5;
}
.fuehrung-kasten .zaehler {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 4px;
}
.fuehrung-kasten .was { margin-bottom: 10px; }
.fuehrung-kasten .knoepfe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Die Rueckmeldung am Ende - kurz, dann wieder weg. */
.fuehrung-fertig {
  position: fixed; right: 22px; bottom: 88px; z-index: 70;
  background: var(--gut); color: #fff;
  padding: 10px 15px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

/* Das Angebot im Chat: die zwei Knoepfe unter der Frage. */
.fuehrungsangebot .knoepfe {
  display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px;
}

/* ===================================================== Arbeitskarte
   Die Seite, auf die der Mitarbeiter an der Maschine schaut. Grosse
   Schrift, ruhige Flaechen - sie wird aus zwei Metern Abstand gelesen
   und mit oeligen Fingern bedient. */

/* Ein Wert, den man nur liest - sieht aus wie ein Feld, ist aber
   keines. So steht "Bauteil" neben "Menge" in derselben Zeile. */
.wertfeld {
  padding: 7px 0 0;
  font-size: 16px;
  line-height: 1.4;
  min-height: 26px;
}

/* Der Vermerk des Vorgaengers: welches Werkzeug, welche Spannung. */
.hinweisfeld {
  margin-top: 14px;
  padding: 11px 14px;
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: 15px;
}

/* Vorgabe gegen gebucht - die einzige Zahl, die an der Maschine
   zaehlt. Keine Preise. */
.sollist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rand);
}
.sollist > div { display: flex; flex-direction: column; gap: 1px; }
.sollist span { font-size: 13px; color: var(--matt); }
.sollist b { font-size: 21px; line-height: 1.15; }
.sollist small { font-size: 12px; }
.sollist b.zuviel { color: var(--fehler); }

/* Die drei Formulare unter der Uhr stehen nicht direkt aneinander. */
.nachtragen, .hinweisform, .problemform {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rand);
}

/* Die Zeile, um die es gerade geht - der eigene Schritt in der Liste
   der Geschwister, die laufende Buchung. */
.liste tr.zeile-gut > td {
  background: color-mix(in srgb, var(--gut) 8%, transparent);
}

/* Eine schlichte Aufzaehlung ohne Punkte. */
ul.schlicht { list-style: none; margin: 12px 0 0; padding: 0; }
ul.schlicht li { padding: 5px 0; border-bottom: 1px solid var(--rand); }
ul.schlicht li:last-child { border-bottom: 0; }

/* An der Maschine wird getippt, nicht geklickt: die Knoepfe der
   Arbeitskarte sind groesser als sonst. */
.uhrknopf { min-height: 46px; padding-left: 22px; padding-right: 22px; }


/* ==========================================================================
   Kalkulation: Verfahrensauswahl und Maßtripel
   Übernommen aus 05-SAWTec-Kalkulation/app/static/style.css (Z220, Z720).
   ========================================================================== */
.masse { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.verfahrensauswahl {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rand);
}
.va-kopf {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.va-kopf > span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--schrift-matt); font-weight: 700;
}
.va-knoepfe { display: flex; gap: 6px; }
.va-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr));
  gap: 6px 14px;
}
.va-eintrag {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 9px; border-radius: 5px; font-size: 14px;
  border: 1px solid transparent;
}
.va-eintrag:hover { background: var(--flaeche-2); border-color: var(--rand); }
/* Der Stundensatz ganz rechts. */
.va-eintrag .mono { margin-left: auto; }
.va-eintrag input { flex-shrink: 0; }
/* Was nicht kalkuliert wird, tritt zurück. */
.va-eintrag:has(input:not(:checked)) { opacity: .5; }


/* ==========================================================================
   Kalkulation: seine Karten
   Übernommen aus 05-SAWTec-Kalkulation/app/static/style.css.
   ========================================================================== */

/* --- Kennzahlenzeile über den Karten (Z298) --- */
.kennzahlen {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.kennzahl {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 10px; padding: 14px 16px;
}
.kennzahl .wert {
  font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.025em; line-height: 1.1;
}
.kennzahl .titel {
  font-size: 10.5px; color: var(--schrift-matt); text-transform: uppercase;
  letter-spacing: .07em; margin-top: 5px; font-weight: 700;
}

/* --- Vergleichbare Aufträge (Z262) --- */
.treffer {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--rand);
}
.treffer:last-child { border-bottom: 0; }
.treffer.waehlbar { cursor: pointer; }
.treffer .balken {
  width: 120px; height: 6px; background: var(--rand);
  border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
.treffer .balken > i { display: block; height: 100%; background: var(--akzent); }
.treffer .prozent {
  width: 44px; font-weight: 650; font-variant-numeric: tabular-nums;
  text-align: right; flex-shrink: 0;
}
.treffer .info { flex: 1; min-width: 0; }
.treffer .preis {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hoch { color: var(--warn); font-weight: 600; }
.niedrig { color: var(--gut); font-weight: 600; }

/* --- Wo der Vorschlag nicht trägt (Z341) --- */
.karte.warnrand { border-left: 3px solid var(--warn); }
.luecken { margin: 0; padding-left: 20px; }
.luecken li { margin-bottom: 6px; }

/* --- Zahlenblöcke in Rohteil, Bohrbild, Werkzeug (Z439) --- */
.vorschaudaten { display: grid; gap: 9px; align-content: start; }
.vorschaudaten.waagrecht {
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
}
.vorschaudaten > div { font-size: 14px; }
.vorschaudaten span {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--schrift-matt); font-weight: 700;
}
.vorschaudaten em {
  color: var(--schrift-matt); font-style: normal; font-size: 12px;
}

/* --- Flächen im Modell zuordnen (Z625) --- */
.flaechen-leiste { margin-top: 14px; opacity: .45; pointer-events: none; }
.flaechen-leiste.bereit { opacity: 1; pointer-events: auto; }
.flaechen-titel {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--schrift-matt); font-weight: 700;
  margin-bottom: 8px;
}
.verfahren-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.verfahren-knopf {
  margin: 0; padding: 7px 14px; font-size: 13px; font-weight: 600;
  background: transparent; color: var(--schrift-matt); cursor: pointer;
  border: 1px solid var(--rand); border-radius: 20px; font-family: inherit;
  box-shadow: none; transition: all .12s;
}
.verfahren-knopf:hover { color: var(--schrift); }
.verfahren-knopf.an {
  background: var(--akzent); color: #fff; border-color: var(--akzent);
}
.flaechen-tabelle { margin-top: 12px; }
.flaechen-tabelle table { font-size: 13px; width: 100%; border-collapse: collapse; }
.flaechen-tabelle td, .flaechen-tabelle th {
  padding: 5px 8px; border-bottom: 1px solid var(--rand); text-align: left;
}
.flaechen-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.farbpunkt {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline;
}

/* --- Schruppwerkzeug (Z677) --- */
.werkzeugblock {
  margin-top: 14px; padding: 14px; background: var(--flaeche-2);
  border: 1px solid var(--rand); border-radius: 10px;
}
.werkzeug-kopf {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--schrift-matt); font-weight: 700; margin-bottom: 11px;
  display: flex; align-items: center; gap: 8px;
}
.werkzeugzeile { font-size: 13px; margin-bottom: 5px; }
.werkzeugzeile:last-child { margin-bottom: 0; }

/* --- Rüsten und CAM (Z851) --- */
.ruestcam {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px; margin: 12px 0;
}
.ruestcam-spalte h3 {
  margin: 0 0 8px; font-size: 15px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
table.posten { width: 100%; border-collapse: collapse; }
table.posten td { padding: 4px 0; vertical-align: top; font-size: 13.5px; }
table.posten td.rechts { text-align: right; white-space: nowrap; }
table.posten tr.summe td { border-top: 1px solid var(--rand); padding-top: 6px; }
.ruestcam-eingabe {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  border-top: 1px solid var(--rand); padding-top: 12px;
}
.ruestcam-eingabe .feld { min-width: 150px; }
.ruestcam-eingabe input { width: 110px; }

.rohteilinfo { font-size: 14px; }

@media (max-width: 760px) {
  .kennzahlen { grid-template-columns: repeat(2, 1fr); }
  .treffer .balken { width: 60px; }
}

/* --- Der vorgeschlagene Angebotspreis (style.css Z275) --- */
.preisblock {
  background: var(--akzent-hell);
  border: 1px solid var(--akzent);
  border-radius: 10px;
  padding: 22px 24px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.preisblock .beschriftung {
  font-size: 11px; color: var(--schrift-matt); text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700;
}
.preisblock .betrag {
  font-size: 38px; font-weight: 750; font-variant-numeric: tabular-nums;
  letter-spacing: -.035em; line-height: 1; color: var(--akzent);
}
.vorschlagstabelle tr.summe td { border-top: 1px solid var(--rand); }


/* --- Schon einmal gefertigt (style.css der Kalkulation) --- */
.verlaufkarte .verlauf-summe {
  background: var(--flaeche-2); border: 1px solid var(--rand);
  border-radius: 10px; padding: 12px 14px;
}
.verlauf-kopf { font-size: 15px; margin-bottom: 8px; }
.verlauf-gangliste { margin-top: 4px; }
.verlauf-treffer tr.treffer-nummer td { background: var(--gut-hell); }

/* --- Auswertung der Nachkalkulation (style.css Z371, Z417) --- */
.kennzahlen.drei { grid-template-columns: repeat(3, 1fr); }
.abwbalken {
  position: relative; height: 8px; background: var(--rand); border-radius: 4px;
}
.abwbalken .mitte {
  position: absolute; left: 50%; top: -2px; width: 1px; height: 12px;
  background: var(--schrift-matt); opacity: .6;
}
.abwbalken i { position: absolute; top: 0; height: 100%; border-radius: 4px; }
.abwbalken i.plus { left: 50%; background: var(--warn); }
.abwbalken i.minus { right: 50%; background: var(--gut); }

@media (max-width: 720px) {
  .kennzahlen.drei { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WorkPool — das Netzwerk zwischen den Firmen
   ========================================================================== */
.wp-kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px; margin-bottom: 20px;
}
.wp-kachel {
  display: block; text-decoration: none; color: inherit;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 12px; padding: 22px 20px; transition: all .15s;
}
a.wp-kachel:hover {
  border-color: var(--akzent); transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.wp-kachel.matt { opacity: .55; }
.wp-kachel .wp-zeichen { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.wp-kachel h3 { margin: 0 0 4px; font-size: 17px; }
.wp-kachel p { margin: 0; font-size: 13.5px; color: var(--schrift-matt); }
.wp-kachel .wp-zahl {
  margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--akzent);
}
.wp-notfall-zahl { color: var(--fehler); }

/* --- Eine Auftragskarte --- */
.wp-auftrag {
  border: 1px solid var(--rand); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px; background: var(--flaeche);
}
.wp-auftrag.notfall { border-left: 4px solid var(--fehler); }
.wp-auftrag-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
}
.wp-auftrag-kopf h3 { margin: 0 0 3px; font-size: 16px; }
.wp-auftrag-kopf h3 a { text-decoration: none; }
.wp-notfall {
  background: var(--fehler); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; padding: 2px 8px; border-radius: 4px;
  margin-right: 6px; white-space: nowrap;
}
.wp-auftrag-daten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 8px 14px; margin: 12px 0;
}
.wp-auftrag-daten > div { font-size: 13.5px; }
.wp-auftrag-daten span {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--schrift-matt); font-weight: 700;
}

/* --- Der Match --- */
.wp-match {
  text-align: center; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--rand); background: var(--flaeche-2); flex: 0 0 auto;
}
.wp-match .wp-match-zahl {
  font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.wp-match.gross .wp-match-zahl { font-size: 32px; }
.wp-match .wp-match-text {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--schrift-matt); font-weight: 700; margin-top: 3px;
}
.wp-match.gut { border-color: var(--gut); background: var(--gut-hell); }
.wp-match.gut .wp-match-zahl { color: var(--gut); }
.wp-match.mittel { border-color: var(--warn); background: var(--warn-hell); }
.wp-match.mittel .wp-match-zahl { color: var(--warn); }
.wp-match.schwach .wp-match-zahl { color: var(--schrift-matt); }

.karte.wp-notfallkarte { border-left: 3px solid var(--fehler); }

/* --- Die Statuskette --- */
.wp-kette {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-bottom: 14px;
}
.wp-glied {
  font-size: 12px; padding: 3px 9px; border-radius: 20px;
  border: 1px solid var(--rand); color: var(--schrift-matt);
}
.wp-glied.erreicht {
  color: var(--gut); border-color: var(--gut); background: var(--gut-hell);
}
.wp-glied.jetzt {
  color: #fff; background: var(--akzent); border-color: var(--akzent);
  font-weight: 700;
}
.wp-pfeil { color: var(--schrift-matt); opacity: .5; }

/* Fremdbearbeitung: was ueber dem Rueckliefertermin liegt, wird ganz
   markiert - nicht nur die Termin-Zelle. Rot heisst: nachfragen. */
.liste tr.ueberfaellig > td { background: var(--fehler-hell); }
.liste tr.ueberfaellig > td:first-child { box-shadow: inset 3px 0 0 var(--fehler); }

/* Pruefungen & Arbeitssicherheit: der Punkt vor jeder Zeile. Die Frage,
   die man morgens hat, ist immer dieselbe - muss ich heute etwas tun?
   Rot heisst ja. */
span.ampel { font-size: 15px; line-height: 1; }
span.ampel.rot   { color: var(--fehler); }
span.ampel.gelb  { color: var(--warn); }
span.ampel.gruen { color: var(--gut); }
span.ampel.grau  { color: var(--rand-stark); }

/* Zweiter Faktor: QR-Code und Notfallcodes (10.09.2026). Der QR braucht
   einen hellen Grund - auf dunklem Hintergrund lesen ihn viele
   Handykameras nicht. */
.qrfeld {
  display: inline-block;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  margin: 8px 0;
}
/* Breite statt fester Hoehe: die viewBox haelt das Verhaeltnis.
   240px sind rund 5 Bildschirmpunkte je Modul - darunter tun sich
   Handykameras vor einem Monitor schwer. */
.qrfeld svg { display: block; width: 240px; height: auto; }
ul.notfallcodes {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 8px;
}
ul.notfallcodes code {
  font-size: 1.05rem;
  letter-spacing: .06em;
}

/* ------------------------------------------------ Fertigungswissen
   Das Tabellenbuch in Zerspano (11.09.2026). Gebraucht wird es an der
   Maschine, oft mit Handschuhen oder vom Tablet aus: grosse Felder,
   grosse Zahlen, und der Fertigungsbereich als eine Zeile, die man aus
   zwei Metern lesen kann. */
.fw-suche label { display: block; font-weight: 600; margin-bottom: 6px; }
.fw-suchzeile { display: flex; gap: 10px; flex-wrap: wrap; }
.fw-suchzeile input {
  flex: 1 1 280px;
  font-size: 1.25rem;
  padding: 12px 14px;
}
.fw-beispiele {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
}
.fw-bereiche {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 14px;
  margin: 14px 0;
}
.fw-bereich { color: inherit; display: block; }
.fw-bereich:hover { border-color: var(--akzent); text-decoration: none; }
.fw-formular { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.fw-formular .feld input { font-size: 1.15rem; min-width: 10em; }
.fw-formular .knopfzeile { margin: 0; }

.fw-fertigungsbereich {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 6px solid var(--akzent);
  border-radius: var(--radius-klein, 6px);
  padding: 14px 18px;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fw-fertigungsbereich span { color: var(--schrift-matt); font-size: .95rem; }
.fw-fertigungsbereich b {
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.fw-ergebnis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.fw-werte td.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fw-passungsart {
  border: 1px solid var(--rand);
  border-left: 6px solid var(--schrift-matt);
  border-radius: var(--radius-klein, 6px);
  background: var(--flaeche);
  padding: 14px 18px;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fw-passungsart.fw-spiel { border-left-color: #2f8f4e; }
.fw-passungsart.fw-uebergang { border-left-color: #c98a16; }
.fw-passungsart.fw-uebermass { border-left-color: #c0392b; }
.fw-passungsart > b { font-size: 1.2rem; }
.fw-passungswerte { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 6px; }
.fw-passungswerte div { display: flex; flex-direction: column; }
.fw-passungswerte b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }

.fw-diagramm svg { width: 100%; max-width: 520px; height: auto; display: block; }
.fw-nulllinie { stroke: var(--schrift); stroke-width: 1.5; stroke-dasharray: 6 4; }
.fw-nulltext, .fw-kastentext, .fw-kastenname { fill: var(--schrift); font-size: 12px; }
.fw-kastenname { font-weight: 600; }
.fw-kasten { stroke-width: 1.5; }
.fw-kasten.fw-bohrung { fill: var(--akzent); fill-opacity: .3; stroke: var(--akzent); }
.fw-kasten.fw-welle { fill: #d98c1f; fill-opacity: .3; stroke: #d98c1f; }

/* Fertigungswissen: Werkstoffe. Der Datenkopf nutzt den gruenen Balken
   des Fertigungsbereichs, die Kennwerte die Kacheln der Passung. */
.fw-datenkopf b { font-size: 1.4rem; }
.fw-datenkopf span + span { margin-top: 4px; }
.fw-kennwerte { border-left-color: var(--rahmen, #5b6b7a); }
.fw-kennwerte .fw-passungswerte div b { font-size: 0.95rem; line-height: 1.35; }
.fw-werkstoffliste td.klein { max-width: 260px; }
.fw-werkstoffliste .marker { white-space: nowrap; }

/* Fertigungswissen: Zeichnungssymbole. Kacheln mit Bild; die Bilder
   zeichnen in currentColor und passen so in beide Themen. */
.fw-symbole { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.fw-symbol { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--rahmen, #3a4450); border-radius: 8px; text-decoration: none; color: inherit; }
.fw-symbol:hover, .fw-symbol.aktiv { border-color: var(--akzent, #4c8dff); }
.fw-symbol svg { width: 100%; height: auto; display: block; }
.fw-symbol b { font-size: 0.9rem; line-height: 1.3; }
.fw-zeichen { font-size: 1.25em; margin-right: 2px; }
.fw-symbol-inhalt { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.fw-symbol-bild { flex: 0 0 260px; max-width: 100%; }
.fw-symbol-bild svg { width: 260px; max-width: 100%; height: auto; }
.fw-symbol-texte { flex: 1 1 320px; }
.fw-symbol-texte h3 { margin: 0 0 4px; font-size: 0.95rem; }
.fw-symbol-texte p { margin: 0 0 14px; }

/* Fertigungswissen: lange Nachschlagetabellen (Gewinde und folgende)
   etwas dichter, damit viele Zeilen auf den Schirm passen. */
.fw-tabelle th, .fw-tabelle td { padding: 5px 10px; }
.fw-tabelle td.mono { font-variant-numeric: tabular-nums; }
/* Lange Tabellen (Härte-Umwertung) scrollen in sich, statt die Seite
   endlos zu machen. */
.fw-hoch { max-height: 520px; overflow-y: auto; }
.fw-hoch thead th { position: sticky; top: 0; background: var(--karte, #fff); }

/* Fertigungswissen: Rechnerformulare (Schnittdaten, Rechner). Felder
   nebeneinander, auf schmalen Schirmen umbrechend. */
.fw-rechnerzeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.fw-rechnerzeile .feld { flex: 1 1 150px; min-width: 0; margin: 0; }
.fw-rechnerzeile .feld input, .fw-rechnerzeile .feld select { width: 100%; }
.fw-rechnerzeile .knopfzeile { margin: 0; }
.fw-herkunft { margin: 0 0 10px; padding-left: 18px; }
.fw-herkunft li { margin-bottom: 4px; }

/* Schnittdaten, einfache Fassung: Drehzahl und Vorschub groß, die
   Tabellen der Kalkulation zum Aufklappen. */
.fw-schnitt span { display: block; }
.fw-schnittwerte { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 8px; }
.fw-schnittwerte > div { display: flex; flex-direction: column; }
.fw-schnittwerte small { color: var(--schrift-matt); }
.fw-schnittwerte b { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fw-schnittwerte span { color: var(--schrift-matt); font-size: .9rem; }
details.fw-klapp > summary, details.fw-klein-klapp > summary { cursor: pointer; font-weight: 600; }
details.fw-klapp > summary { padding: 14px 18px; }
details.fw-klapp[open] > summary { border-bottom: 1px solid var(--rahmen, #3a4450); margin-bottom: 8px; }
details.fw-klein-klapp { margin-top: 10px; }

/* Schnittdaten: Werkzeug und Aufnahme als Bild unter den Werten
   (12.09.2026). Metall in Grautönen - trägt hell und dunkel. */
#fw-wz [hidden] { display: none !important; }
/* Der Hinweis „mit Kontaktpunkt …“ neben den Zahlen, nicht darunter:
   so schiebt er beim Erscheinen nichts nach unten. */
.fw-schnittwerte .fw-bild-hinweis { align-self: flex-end; max-width: 18em; visibility: hidden; }
.fw-schnittwerte .fw-bild-hinweis.an { visibility: visible; }
.fw-werkstoff-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.fw-werkstoff-zeile label { font-weight: 600; }
.fw-werkstoff-zeile select { min-width: 18em; max-width: 100%; }
.fw-wz-titel { margin: 0 0 10px; font-size: 1.15rem; }
.fw-wz-wahl { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 14px; }
.fw-wz-wahl .feld { margin: 0; }
.fw-wz-wahl input[type=number] { width: 7.5em; }
.fw-wz-flaeche { display: grid; grid-template-columns: minmax(min(260px, 100%), 1.15fr) minmax(min(230px, 100%), 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .fw-wz-flaeche { grid-template-columns: 1fr; } }
.fw-wz-svg {
  width: 100%; height: 540px; display: block;
  background: var(--flaeche-2, var(--grund));
  border: 1px solid var(--rand); border-radius: var(--radius-klein, 7px);
  touch-action: none; user-select: none;
}
.fw-wz-svg.zieht { cursor: grabbing; }
.fw-wz-svg.fw-wz-lupe { height: 220px; max-width: 320px; cursor: crosshair; margin-bottom: 4px; }
.fw-wz-svg .werkstueck { fill: var(--gut); fill-opacity: .14; stroke: none; }
.fw-wz-svg * { vector-effect: non-scaling-stroke; }
.fw-wz-svg .spindel { fill: var(--rand); stroke: var(--rand-stark); stroke-width: 1; }
.fw-wz-svg .halter { fill: #c7cdd4; stroke: #4a545f; stroke-width: 1; }
.fw-wz-svg .name { fill: #2b323a; text-anchor: middle; font-weight: 600; }
.fw-wz-svg .versteckt { fill: none; stroke: #4a545f; stroke-width: 1; stroke-dasharray: 4 3; }
.fw-wz-svg .werkzeug { cursor: ns-resize; }
.fw-wz-svg .schaft { fill: #9ea6af; stroke: #3a434c; stroke-width: 1; }
.fw-wz-svg .schneide { fill: #6d7784; stroke: none; }
.fw-wz-svg .nut { stroke: #262d35; stroke-width: 1; opacity: .6; fill: none; }
.fw-wz-svg .nutband { fill: #3b434d; opacity: .75; }
.fw-wz-svg .achse { stroke: var(--schrift-matt); stroke-width: 1; stroke-dasharray: 10 3 2 3; }
.fw-wz-svg .mass { stroke: var(--schrift-matt); stroke-width: 1; fill: none; }
.fw-wz-svg .masspfeil { fill: var(--schrift-matt); }
.fw-wz-svg .masstext { fill: var(--schrift); font-variant-numeric: tabular-nums; }
.fw-wz-svg .deff-text { fill: var(--akzent); font-weight: 600; }
.fw-wz-svg .kugelbahn { fill: var(--akzent); fill-opacity: .08; stroke: var(--akzent); stroke-width: 2; cursor: pointer; }
.fw-wz-svg .kontakt { fill: var(--akzent); stroke: #fff; stroke-width: 2; cursor: grab; }
.fw-wz-svg .deff { stroke: var(--akzent); stroke-width: 2; }
.fw-wz-svg .radius { stroke: var(--akzent); stroke-width: 1; stroke-dasharray: 3 3; }
.fw-wz-svg .flaeche { stroke: var(--gut); stroke-width: 2.5; }
.fw-wz-svg .griff { cursor: ns-resize; }
.fw-wz-svg .griff rect { fill: var(--akzent); }
.fw-wz-svg .griff .pfeil { stroke: #fff; stroke-width: 2; fill: none; }
.fw-wz-svg [tabindex]:focus { outline: none; }
.fw-wz-svg [tabindex]:focus-visible { stroke: var(--schrift); stroke-width: 3; }
.fw-wz-werte { display: flex; flex-direction: column; gap: 10px; }
.fw-wz-zeile { display: flex; flex-direction: column; }
.fw-wz-zeile small { color: var(--schrift-matt); }
.fw-wz-zeile > b { font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fw-wz-zeile span { color: var(--schrift-matt); font-size: .9rem; }
.fw-wz-zeile span b { color: var(--schrift); }
.fw-wz-werte .hinweis { margin: 0; }
.fw-wz-bedienung { margin: 12px 0 0; }

/* Fertigungswissen: die direkte Antwort unter der Frage. */
.fw-antworten { display: grid; gap: 12px; margin-bottom: 16px; }
.fw-antwort { border-left: 4px solid var(--akzent, #4c8dff); }
.fw-antwortsatz { font-size: 1.2rem; font-weight: 600; line-height: 1.4; margin: 4px 0 10px; }

/* Die Vorschau der Drehkontur. Sie ist dasselbe SVG, das gleich ins
   PDF wandert - deshalb bekommt sie einen hellen Grund, auch im
   dunklen Fenster: eine technische Zeichnung ist schwarz auf weiss,
   und wer sie am Bildschirm prueft, soll genau das sehen, was er
   spaeter in der Hand haelt. */
.konturvorschau {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 10px;
  overflow-x: auto;
  margin: 10px 0;
}
.konturvorschau svg {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}

/* --------------------------------------------------------------------
   Messen am 3D-Modell

   Uebernommen aus seinem Auftragsbuch (app/static/app.css, 14.09.2026):
   links das Modell mit der Messleiste, rechts eine schmale Spalte mit
   Messung, Festgehaltenem, Bauteildaten und Durchmesserliste.
   -------------------------------------------------------------------- */
.mess-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) { .mess-layout { grid-template-columns: 1fr; } }

.messkarte { padding: 12px; }
.messleiste {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: center; margin-bottom: 10px;
}
.messleiste .knopfgruppe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.messleiste input[type="range"] { width: 150px; }
.messleiste select.winzig { padding: 4px 8px; font-size: 12px; }

.messflaeche {
  position: relative;
  width: 100%;
  height: min(70vh, 620px);
  min-height: 340px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  overflow: hidden;
  background: var(--flaeche-2);
  cursor: crosshair;
  touch-action: none;
}
.messflaeche canvas { display: block; width: 100% !important; height: 100% !important; }
.messhilfe { margin-top: 8px; }

/* Meldung waehrend des Ladens - der Kernel braucht einen Moment. */
.viewer-meldung {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  background: var(--flaeche-2); color: var(--schrift-matt);
  font-size: 14px;
}
.viewer-meldung.laedt::before {
  content: ""; width: 14px; height: 14px; margin-right: 10px;
  border: 2px solid var(--akzent); border-right-color: transparent;
  border-radius: 50%; animation: messdreh .8s linear infinite;
}
@keyframes messdreh { to { transform: rotate(360deg); } }

/* Das Mass direkt am gemessenen Abschnitt. */
.messmarke {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--akzent); color: #fff;
  padding: 3px 9px; border-radius: 20px;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.messspalte { display: grid; gap: 14px; }
.messergebnis { min-height: 66px; }
.messtitel { font-size: 12px; color: var(--schrift-matt); text-transform: uppercase;
             letter-spacing: .04em; }
.messwert { font-size: 19px; font-weight: 600; line-height: 1.35; margin: 2px 0 8px;
            font-variant-numeric: tabular-nums; }
.messwert .klein { font-size: 13px; font-weight: 400; }

.messliste { display: grid; gap: 6px; margin-bottom: 10px; }
.messzeile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 9px; border: 1px solid var(--rand); border-radius: 7px;
  background: var(--flaeche-2); font-size: 13px;
}
.werteblock.schmal { grid-template-columns: 1fr; gap: 6px; }

/* Sehr kleine Knoepfe - fuer Werkzeugleisten an Modell und Position.
   In der Werkstatt-Ansicht bleiben sie fingergerecht gross. */
.knopf.winzig { padding: 4px 9px; font-size: 12px; }
body[data-layout="werkstatt"] .knopf.winzig { padding: 8px 13px; font-size: 14px; min-height: 38px; }

/* --- Der Shop ------------------------------------------------------
   Kacheln mit Bildfeld, Name, Preis und einem Knopf. Das Bildfeld ist
   vorerst ein Zeichen: Produktbilder kommen erst, wenn ein Haendler
   welche hochlaedt - ein Platzhalterfoto waere geschwindelt. */
.shop-suche {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 0 0 18px;
}
.shop-suche input[type="search"] { flex: 1 1 320px; min-width: 0; }
.shop-suche select { flex: 0 1 220px; }

.shop-kategorien {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.shop-kat {
  display: block; padding: 14px 16px; border: 1px solid var(--rand);
  border-radius: 12px; background: var(--flaeche); text-decoration: none;
}
.shop-kat:hover { background: var(--flaeche-2); text-decoration: none; }
.shop-kat .zeichen { font-size: 22px; display: block; margin-bottom: 6px; }
.shop-kat b { display: block; }
.shop-kat small { color: var(--schrift-matt); font-size: 12px; }

.shop-haendler {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.shop-haendlerkachel {
  display: grid; gap: 5px; padding: 14px 16px; border: 1px solid var(--rand);
  border-radius: 12px; background: var(--flaeche); text-decoration: none;
  align-content: start;
}
.shop-haendlerkachel:hover { background: var(--flaeche-2); text-decoration: none; }
.shop-haendlerkachel small { color: var(--schrift-matt); font-size: 12.5px; }
.shop-haendlerkachel .marke-klein { justify-self: start; }

.shop-gitter {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.shop-kachel {
  display: flex; flex-direction: column; border: 1px solid var(--rand);
  border-radius: 12px; background: var(--flaeche); overflow: hidden;
}
.shop-bild {
  display: flex; align-items: center; justify-content: center;
  height: 96px; background: var(--flaeche-2); font-size: 34px;
  text-decoration: none;
}
.shop-text { padding: 12px 14px; display: grid; gap: 5px; flex: 1; }
.shop-name { font-weight: 600; text-decoration: none; }
.shop-klein { font-size: 12.5px; color: var(--schrift-matt); }
.shop-preis { font-size: 17px; font-weight: 650; }
.shop-preis small { font-weight: 400; font-size: 12px; color: var(--schrift-matt); }
.shop-knoepfe {
  display: flex; gap: 8px; padding: 0 14px 14px; align-items: center;
}
.shop-knoepfe form { display: flex; gap: 6px; align-items: center; }
.shop-knoepfe input[type="number"] { width: 62px; }

.shop-detail {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 2fr) minmax(min(260px, 100%), 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .shop-detail { grid-template-columns: 1fr; }
}
.shop-beschreibung { font-size: 15.5px; }
.shop-grosspreis { font-size: 30px; font-weight: 650; letter-spacing: -.5px; }
.shop-schnittdaten {
  background: var(--flaeche-2); padding: 12px 14px; border-radius: 10px;
  overflow-x: auto; font-size: 13px; white-space: pre-wrap;
}
.shop-bestellform {
  display: flex; gap: 10px; align-items: flex-end; margin: 14px 0 10px;
}
.shop-bestellform input[type="number"] { width: 84px; }
.mengenform { display: inline-flex; gap: 6px; align-items: center; }
.mengenform input[type="number"] { width: 84px; }

/* Die Abschnitte der Betreiber-Ansicht: Fertigungsbetriebe, Haendler,
   Intern. Kevin am 15.09.2026: "im reiter betrieb moechte ich nur die
   betriebe sehen die sich anmelden und auch die haendler." */
h2.abschnitt {
  margin: 30px 0 12px; font-size: 19px; display: flex;
  align-items: baseline; gap: 12px; flex-wrap: wrap;
}
h2.abschnitt small { font-size: 13px; font-weight: 400; color: var(--schrift-matt); }
details.karte > summary.gruppe { list-style: revert; }
details.karte > summary.gruppe small {
  font-weight: 400; color: var(--schrift-matt); font-size: 13px;
}