/* QM-Lieferscheine (qm.html). Tokens, Shell, Knoepfe: basis.css.
   Design "Bauplatz": Wareneingang als Laderampe (Dropzone), Kennzahlen
   als Kloetze, Vorgangsliste und Detail als zwei Tafeln nebeneinander. */
.qm-inhalt { display: flex; flex-direction: column; gap: 24px; }
.feldkopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feldkopf .rechts { margin-left: auto; }
.feldkopf h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gruen); display: flex; align-items: center; gap: 10px; }
.feldkopf h2::before { content: ""; width: 18px; height: 3px; background: var(--holz); border-radius: 2px; }
.feldkopf label.kasten { font-size: 13px; }
.fehler { color: var(--rot); font-size: 13.5px; min-height: 18px; }
.abschnitt { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grau); margin-bottom: 6px; }
.abschnitt-block { margin-top: 12px; }

/* Upload: die Laderampe - gestreifte Holzflaeche, Pfeil nach oben */
.dropzone {
  position: relative; overflow: hidden;
  border: 1.5px dashed var(--beige); border-radius: var(--radius);
  background:
    repeating-linear-gradient(90deg, rgba(143, 109, 72, 0.06) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #fbf8f2, var(--beige-zart));
  padding: 30px 18px 26px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: inset 0 -4px 0 var(--holz);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dropzone:hover { border-color: var(--gruen); transform: translateY(-1px); }
.dropzone.aktiv { border-color: var(--gruen); background: var(--beige-hell); box-shadow: inset 0 -4px 0 var(--gruen), 0 0 0 4px var(--fokus); }
.dropzone .symbol {
  width: 52px; height: 52px; padding: 12px; color: var(--gruen); margin-bottom: 8px;
  background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 50%;
  box-shadow: 0 3px 0 var(--rahmen);
}
.dropzone.aktiv .symbol { transform: translateY(-4px); }
.dropzone b { color: var(--gruen); font-size: 16px; }
.dateiliste { display: flex; flex-wrap: wrap; gap: 8px; }
.dateiliste:empty { display: none; }
.datei-chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--flaeche);
  border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 4px 6px 4px 12px; font-size: 13.5px;
  box-shadow: 0 2px 0 var(--rahmen);
}
.datei-chip .groesse { color: var(--grau); font-size: 12px; }
.datei-chip button { background: none; border: none; color: var(--grau); padding: 0 6px; font-size: 16px; line-height: 1; box-shadow: none; }
.datei-chip button:hover:not(:disabled) { color: var(--rot); background: none; transform: none; }
.pruefwerte { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.pruefwerte label, .anlagen-titel { display: block; font-size: 12.5px; color: var(--grau); margin-bottom: 3px; }
input, select { width: 100%; font-size: 14px; }
.zeile label.kasten { color: var(--grau); font-size: 13.5px; }

/* Bericht: Kennzahlen-Kloetze mit farbiger Stirnseite */
.kacheln { display: flex; flex-wrap: wrap; gap: 12px; }
.kachel {
  position: relative;
  border: 1px solid var(--rahmen); border-radius: var(--radius);
  padding: 12px 18px 12px 20px; font-size: 13px; color: var(--grau); background: var(--flaeche); min-width: 150px;
  box-shadow: var(--kante), 0 10px 18px -14px rgba(3, 44, 29, 0.5);
  transition: transform 0.2s ease;
}
.kachel::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 3px 3px 0; background: var(--beige); }
.kachel:hover { transform: translateY(-2px); }
.kachel b { display: block; font-size: 28px; color: var(--schwarz); font-weight: 600; line-height: 1.15; }
.kachel b.klein { font-size: 14px; line-height: 2; }
.kachel.gut::before { background: #1d6b3c; } .kachel.gut b { color: #1d6b3c; }
.kachel.offen::before { background: #8a6413; } .kachel.offen b { color: #8a6413; }
.kachel.rot::before { background: var(--rot); } .kachel.rot b { color: var(--rot); }

/* Liste + Detail */
.spalten { display: grid; grid-template-columns: minmax(440px, 1fr) minmax(400px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .spalten { grid-template-columns: 1fr; } }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th { text-align: left; color: var(--grau); font-weight: 500; padding: 6px 8px; border-bottom: 2px solid var(--beige-hell); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
td { padding: 9px 8px; border-bottom: 1px solid var(--beige-hell); vertical-align: top; }
td .dateiname { overflow-wrap: anywhere; }
tr.waehlbar { cursor: pointer; transition: background 0.15s ease; } tr.waehlbar:hover { background: var(--beige-zart); }
tr.aktiv { background: var(--beige-hell); box-shadow: inset 4px 0 0 var(--holz); }
.status { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.s-ERFOLGREICH { background: #e6f1e9; color: #1d6b3c; border-color: #c6dfcd; }
/* Chip-Farben auf mindestens 4,5:1 zum hellen Hintergrund (21.09.2026): Bernstein
   #7a5710 statt #8a6413, Kupfer #7e4922 statt #9a5b2f. */
.s-MANUELLE_PRUEFUNG { background: #f8efdc; color: #7a5710; border-color: #ead9b3; }
.s-BEREITS_VORHANDEN, .s-UEBERSPRUNGEN, .s-UNTERBROCHEN { background: var(--beige-zart); color: var(--grau); border-color: var(--rahmen); }
.s-DUBLETTE { background: #f4e6dd; color: #7e4922; border-color: #e6cdbc; }
.s-FEHLER { background: #f6e0dc; color: var(--rot); border-color: #e8c3bd; }
.s-DRY_RUN, .s-lauf { background: #e4ebf3; color: #33567c; border-color: #c9d6e5; }
.detail .detailtitel { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--schwarz); overflow-wrap: anywhere; flex: 1; }
.detail .detailtitel::before { display: none; }
.detail dl { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; font-size: 13.5px; margin: 0; }
.detail dt { color: var(--grau); } .detail dd { margin: 0; overflow-wrap: anywhere; }
.dateien { display: grid; gap: 6px; }
.datei-zeile { display: flex; gap: 10px; align-items: center; font-size: 13.5px; background: var(--beige-zart); border-radius: var(--radius); padding: 7px 10px; box-shadow: 0 2px 0 var(--rahmen); }
.datei-zeile .titel { min-width: 130px; color: var(--grau); }
.datei-zeile a { color: var(--gruen); text-decoration: underline; overflow-wrap: anywhere; }
.datei-zeile .pfad { color: var(--grau); font-size: 12px; }
.datei-zeile .fehlt { color: var(--rot); }
.datei-zeile.anlage button { margin-left: auto; background: none; border: none; color: var(--grau); padding: 0 6px; font-size: 16px; line-height: 1; box-shadow: none; }
.datei-zeile.anlage button:hover:not(:disabled) { color: var(--rot); background: none; transform: none; }
/* Formularbloecke (Zuordnung, Freigabe): Klotz mit Holzkante links */
.block {
  display: grid; gap: 8px; margin-top: 12px; padding: 16px;
  border: 1px solid var(--rahmen); border-left: 4px solid var(--holz); border-radius: var(--radius);
  background: var(--flaeche); box-shadow: var(--kante), var(--schatten);
}
.block strong { font-size: 14px; }
.block label { font-size: 12.5px; color: var(--grau); }
.block label.kasten { color: var(--schwarz); }
.block button[type="submit"] { margin-top: 6px; justify-self: start; }

/* Anlagen: weitere Unterlagen/Fotos im selben BV-Ordner */
.anlagen-feld { grid-column: 1 / -1; }
.anlagen-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.anlagen-knoepfe button { padding: 6px 12px; font-size: 13px; }
.anlagen-feld .dateiliste { margin-top: 8px; }
.form-anlagen { display: grid; gap: 6px; padding: 8px 0 2px; }
.protokoll { background: var(--beige-zart); border-radius: var(--radius); padding: 8px 10px; font-size: 12.5px; max-height: 220px; overflow: auto; box-shadow: inset 0 2px 4px rgba(29, 29, 27, 0.06); }
.protokoll b { color: var(--grau); font-weight: 500; margin-right: 6px; }
iframe { width: 100%; height: 440px; border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--kante); }
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Unterschrift */
.signatur-zeile { gap: 16px; }
.sig-vorschau {
  min-width: 220px; min-height: 70px; border: 1px dashed var(--beige); border-radius: var(--radius);
  background: var(--flaeche); display: flex; align-items: center; justify-content: center; padding: 8px;
  box-shadow: inset 0 2px 4px rgba(29, 29, 27, 0.05);
}
.sig-vorschau img { max-height: 70px; max-width: 320px; }

/* Ablage pruefen */
.krumen { font-size: 14px; }
.krumen a { color: var(--gruen); text-decoration: none; }
.krumen a:hover { text-decoration: underline; }
a.dateiname { color: var(--gruen); }
.ordner-symbol { vertical-align: -2px; margin-right: 4px; color: var(--gruen); }

/* Ladeanzeige: ein kleines Haus baut sich auf - die SVG-Linien werden
   nacheinander gezeichnet (pathLength="100" im Markup normiert jede
   Linie auf 100, so beginnt das Zeichnen ohne Verzoegerung), darunter
   Logo (gesaeuberte schwarze Fassung) und Text. */
#laden {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: rgba(243, 239, 232, 0.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#laden img { height: 52px; }
#laden .text { font-size: 14px; color: var(--grau); letter-spacing: .02em; }
#laden .haus { width: 96px; height: 84px; }
#laden .haus path { fill: none; stroke: var(--gruen); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: bauen 2.6s ease-in-out infinite; }
#laden .haus .wand { stroke: var(--holz-dunkel); }
#laden .haus .dach { animation-delay: 0.5s; }
#laden .haus .fenster { animation-delay: 0.9s; stroke: var(--holz-dunkel); }
@keyframes bauen { 0% { stroke-dashoffset: 100; opacity: 0.25; } 40%, 78% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  table { min-width: 560px; }
  iframe { height: 380px; }
}

/* ---------- Handy ---------- */
@media (max-width: 640px) {
  .qm-inhalt { gap: 14px; }
  .dropzone { padding: 18px 12px; }
  .dropzone b { font-size: 15px; }
  .pruefwerte { grid-template-columns: 1fr; }
  .zeile { flex-direction: column; align-items: stretch; }
  .zeile button, form.block button[type="submit"] { width: 100%; padding: 12px; font-size: 15px; }
  .feldkopf .rechts { margin-left: 0; }
  .kacheln { gap: 8px; }
  .kachel { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); padding: 8px 10px 8px 14px; }
  .kachel b { font-size: 20px; }
  table { min-width: 0; font-size: 13px; }
  th, td { padding: 6px 5px; }
  th.optional, td.optional { display: none; }     /* Spalte "Sicher" ausblenden */
  .detail dl { grid-template-columns: 1fr; gap: 0; }
  .detail dt { margin-top: 8px; font-size: 12px; }
  .detail dd { margin-bottom: 2px; }
  .datei-zeile { flex-wrap: wrap; gap: 4px 10px; }
  .datei-zeile .titel { min-width: 0; width: 100%; }
  iframe { height: 300px; }
  .protokoll { max-height: 180px; }
}