/* HKM Maschinen — M1. Die App wird in der Halle am Telefon und im Büro am Schirm
   benutzt; deshalb Kacheln, die auf 390 px einspaltig und auf 1440 px vierspaltig
   stehen, und Tippziele nie unter 44 px (Hausregel seit E5/G2.5). */

/* Die geteilte Hallen-Basis (/liefern/style.css) deckelt `main` auf 620 px — richtig
   für ein Formular am Telefon, falsch für elf Maschinenkacheln nebeneinander. Im
   Browser nachgesehen: bei 1440 px standen vier Kacheln in einer 620-px-Spalte und
   die Namen brachen dreizeilig um. Hier also breiter, aber nicht randlos: Fließtext
   (Akte, Listen) bleibt in Lesebreite, siehe .karte unten.  */
main { max-width: 1180px; }
h1 { text-align: left; }
.hinweis { text-align: left; }
.karte { padding: 0.9rem 1.1rem; margin-bottom: 0.9rem; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 12px; }
.karte h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.karte h3 { margin: 0.9rem 0 0.4rem; font-size: 0.95rem; }

.m-kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; }

.m-kacheln { display: grid; gap: 0.7rem; grid-template-columns: 1fr; margin: 0.8rem 0; }
@media (min-width: 620px)  { .m-kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .m-kacheln { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1320px) { .m-kacheln { grid-template-columns: repeat(4, 1fr); } }

.m-kachel { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start;
  min-height: 96px; padding: 0.8rem 0.9rem; text-align: left; font-family: inherit;
  background: var(--flaeche); color: var(--text); cursor: pointer;
  border: 1px solid var(--rand); border-left: 6px solid var(--rand-stark);
  border-radius: 12px; touch-action: manipulation; }
.m-kachel:hover { border-color: var(--akzent-nr, #1275bb); }
.m-kachel b { font-size: 1.15rem; }
.m-kachel small { font-size: 0.8rem; color: var(--text-gedimmt); }
.m-kachel .m-status { font-weight: 800; letter-spacing: 0.03em; }
.m-kachel .m-fa { font-variant-numeric: tabular-nums; }
.m-kachel .m-fuss { margin-top: auto; opacity: 0.75; }

/* Der Zustand trägt die Farbe, nicht die Schrift — auf zwei Meter Abstand liest man
   in der Halle den Streifen, nicht das Wort. */
.m-kachel.laeuft   { border-left-color: #2e9e5b; }
.m-kachel.laeuft   .m-status { color: #2e9e5b; }
.m-kachel.ruestet  { border-left-color: #d79a00; }
.m-kachel.ruestet  .m-status { color: #d79a00; }
.m-kachel.stoerung { border-left-color: #c8362f; background: rgba(200, 54, 47, 0.07); }
.m-kachel.stoerung .m-status { color: #c8362f; }
.m-kachel .m-stoer { color: #c8362f; }

.zurueck { margin-bottom: 0.8rem; min-height: 44px; }

.b-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: 0.9rem 1.1rem; margin-bottom: 0.9rem;
  border: 1px solid var(--rand); border-left: 8px solid var(--rand-stark);
  border-radius: 12px; background: var(--flaeche); }
.b-kopf h1 { margin: 0; }
.b-kopf .hinweis { margin: 0.2rem 0 0; }
.b-status { font-weight: 900; font-size: 1.1rem; letter-spacing: 0.04em; }
.b-kopf.laeuft   { border-left-color: #2e9e5b; } .b-kopf.laeuft   .b-status { color: #2e9e5b; }
.b-kopf.ruestet  { border-left-color: #d79a00; } .b-kopf.ruestet  .b-status { color: #d79a00; }
.b-kopf.stoerung { border-left-color: #c8362f; } .b-kopf.stoerung .b-status { color: #c8362f; }

.kacheln-klein { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .kacheln-klein { grid-template-columns: repeat(4, 1fr); } }
.kacheln-klein div { padding: 0.6rem 0.7rem; border: 1px solid var(--rand);
  border-radius: 10px; background: var(--flaeche-hell); }
.kacheln-klein b { display: block; font-size: 1.1rem; }
.kacheln-klein small { color: var(--text-gedimmt); font-size: 0.78rem; }

.gross { font-size: 1.6rem; font-weight: 900; margin: 0.2rem 0 0.6rem;
  font-variant-numeric: tabular-nums; }
.gross .hinweis { display: block; font-size: 0.85rem; font-weight: 400; }
.ampel-gruen { color: #2e9e5b; } .ampel-gelb { color: #b57f00; } .ampel-rot { color: #c8362f; }

/* Ein fehlender Wert bekommt eine eigene Farbe, nicht die Null. Der Unterschied
   zwischen „stand still" und „wurde nicht abgelesen" entscheidet, wen man anspricht. */
.fehlt { color: #c8362f; font-weight: 600; }
.wartung-fehlt { border-top: 1px dashed var(--rand); padding-top: 0.6rem; margin-top: 0.8rem; }

.balken { display: flex; align-items: flex-end; gap: 3px; height: 110px;
  overflow-x: auto; padding-bottom: 1.2rem; }
.b-tag { display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; min-width: 26px; height: 100%; position: relative; }
.b-saeule { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #1275bb, #004e70); }
.b-tag span { position: absolute; bottom: -1.15rem; font-size: 0.62rem;
  color: var(--text-gedimmt); white-space: nowrap; }

.st-liste, .a-liste, .g-liste { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.45rem; }
.st-liste li, .a-liste li { display: grid; gap: 0.2rem 0.6rem; align-items: baseline;
  grid-template-columns: 1fr; padding-bottom: 0.45rem; border-bottom: 1px solid var(--rand); }
@media (min-width: 620px) {
  .st-liste li { grid-template-columns: auto 1fr auto; }
  .a-liste li  { grid-template-columns: auto 1fr auto; }
}
.st-liste li:last-child, .a-liste li:last-child { border-bottom: none; padding-bottom: 0; }
.st-liste li.offen { color: #c8362f; font-weight: 600; }
.st-zeit, .a-nr { color: var(--text-gedimmt); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.a-nr { font-weight: 800; color: var(--text); }
.st-dauer { font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-text em, .a-was em { font-style: normal; color: var(--text-gedimmt); }
.a-lage { white-space: nowrap; }
.a-lage .laeuft { color: #2e9e5b; }
.a-lage small { display: block; color: var(--text-gedimmt); }

.chip { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--rand); background: var(--flaeche-hell); font-size: 0.85rem; }
.chip.stern { border-color: var(--akzent-nr, #1275bb); font-weight: 700; }

/* Der Ruf-Knopf ist im Störungsfall das Wichtigste auf dem Blatt. Am Telefon steht
   die Nummer deshalb UNTER dem Namen statt daneben — im Browser gemessen brach sonst
   „Hermle-Service" zweizeilig um und die Nummer rutschte an den Rand. */
.service-ruf { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px;
  padding: 0.5rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 700;
  background: var(--akzent-nr, #1275bb); color: #fff; }
.service-ruf .nr { font-variant-numeric: tabular-nums; font-weight: 400; }
@media (max-width: 720px) {
  .service-ruf { display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.1rem; padding: 0.6rem 1rem; }
  .service-ruf .nr { font-size: 1.05rem; font-weight: 700; }
}

/* Die Akte ist Fließtext — sie bekommt Lesebreite, auch wenn das Blatt breiter ist.
   Zeilen über 100 Zeichen liest niemand gern, schon gar nicht an der Maschine. */
.akte-karte .akte { font-size: 0.92rem; line-height: 1.55; max-width: 72ch;
  max-height: 60vh; overflow-y: auto; }
@media (max-width: 720px) {
  /* Am Telefon KEIN Kasten mit eigenem Rollbalken: eine Scrollfläche in einer
     Scrollfläche trifft man mit dem Daumen nicht zuverlässig. Die Akte fließt
     einfach mit der Seite. */
  .akte-karte .akte { max-height: none; overflow-y: visible; }
}
.akte-karte .akte h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.akte-karte .akte h4 { margin: 0.9rem 0 0.3rem; font-size: 0.95rem;
  color: var(--akzent-nr, #1275bb); }
.akte-karte .akte h5 { margin: 0.7rem 0 0.2rem; font-size: 0.9rem; }
.akte-karte .akte p { margin: 0.35rem 0; }
.akte-karte .akte ul { margin: 0.2rem 0 0.5rem; padding-left: 1.1rem; }
.akte-karte .akte li { margin: 0.15rem 0; }

.stamm { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; margin: 0; }
.stamm dt { color: var(--text-gedimmt); }
.stamm dd { margin: 0; font-weight: 600; }