/* ====================================================================================
   ARCHIV — interne Ablage (Runde 74). Namensraum ar-.
   ------------------------------------------------------------------------------------
   Grundsatz wie im Rest der App: keine harte Farbe. Flächen nehmen
   var(--lila|gruen|rot|amber|blau), Text nimmt die -t-Variante (--lilat, --rott, …).
   Damit stimmt der Nachtmodus von selbst, ohne dass hier eine einzige html.nacht-Regel
   nötig wäre.

   Der Rahmen kommt aus den gemeinsamen Bausteinen in styles.css: .kb-split (zwei Spalten),
   .kb-kopf (Kopfzeile), .kb-chip (Etikett), .kb-leer (leerer Zustand). Sie standen seit
   Runde 73 ungenutzt da, weil sich TEAM, ZEIT und PLANER jeweils eine eigene Fassung
   gebaut haben. Hier werden sie benutzt: eine sechste Eigenbau-Variante desselben
   zweispaltigen Blatts hätte niemandem geholfen.
   ==================================================================================== */

/* --kb-links und --kb-oben sind die Stellschrauben von .kb-split. Die Ordnerspalte darf
   schmaler sein als die 280 px der Vorgabe: darin stehen kurze Namen, und jedes Pixel
   fehlt sonst der Dateiliste. --kb-oben deckt Polster, Kopfzeile mit Unterzeile und den
   Rand unten ab. */
.ar-split { --kb-links: 262px; --kb-oben: 190px; }

/* ---------- Ordnerbaum (linke Spalte) ---------- */

/* Senkrecht dasselbe Polster wie .card (20 px oben), waagerecht enger: in der schmalen Spalte
   ist jedes Pixel für den Ordnernamen da, die Höhe kostet dagegen nichts. Vorher standen hier
   12 px oben gegen die 20 px des Blatts daneben — der Inhalt der beiden Spalten begann damit
   8 px versetzt (gemessen 12,0 gegen 20,0; am Handy 12,0 gegen 16,0). */
.ar-baum {
  display: flex; flex-direction: column; min-height: 0;
  padding: var(--s5) var(--s3) var(--s3);
  overflow: hidden;
}
.ar-baum-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.ar-baum-kopf b { flex: 1; font-size: var(--fs-fein); text-transform: uppercase; letter-spacing: .04em; color: var(--tsoft); }
.ar-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: none; border: none; cursor: pointer; color: var(--lilat);
}
.ar-mini:hover { background: var(--soft); }

/* Die Liste rollt für sich. Ohne min-height: 0 wächst sie im Flex-Kasten über ihre Höhe
   hinaus und rollt gar nicht — dieselbe Falle wie bei .rail-apps in der Icon-Leiste. */
.ar-baum-liste { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 6px; }

.ar-knoten {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px calc(8px + var(--tiefe, 0) * 14px);
  border-radius: 9px; cursor: pointer;
  font-size: var(--fs-text); line-height: 1.3;
  color: var(--text);
}
.ar-knoten:hover { background: var(--soft); }
.ar-knoten:focus-visible { outline: 2px solid var(--lilat); outline-offset: -2px; }
.ar-knoten.aktiv { background: var(--soft); color: var(--lilat); font-weight: 600; }
.ar-knoten.wurzel { margin-bottom: 2px; font-weight: 600; }
.ar-knoten svg { flex: none; color: var(--lilat); }
.ar-knoten-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-knoten em {
  flex: none; font-style: normal; font-size: var(--fs-mikro); font-weight: 700;
  color: var(--tsoft); background: var(--bg); border-radius: var(--r-pille); padding: 1px 7px;
}
/* 26 px, nicht 18: gemessen war die Trefferfläche 18x18 px und lag damit unter den 24x24 aus
   WCAG 2.5.8, die tools/mess-handy-regeln.js für den Finger fordert. Das Zeichen bleibt 13 px
   groß, nur der Kasten wächst — und er ist jetzt so groß wie .ar-mini in derselben Kopfzeile. */
.ar-pfeil {
  flex: none; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--tsoft);
  transition: transform .12s;
}
.ar-pfeil.auf { transform: rotate(90deg); }
.ar-pfeil[disabled] { opacity: 0; cursor: default; }
.ar-baum-leer { padding: 10px 12px; color: var(--tsoft); font-size: var(--fs-fein); }
.ar-baum-fuss {
  flex: none; border-top: 1px solid var(--line); padding: 9px 10px 2px;
  font-size: var(--fs-mikro); color: var(--tsoft);
}
.ar-baum-fuss span { display: block; margin-top: 2px; }

/* ---------- Blatt (rechte Spalte) ---------- */

.ar-blatt { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ar-kopf { flex: none; }
.ar-kopf .kb-titel { flex-wrap: wrap; font-size: var(--fs-karte); }
.ar-kopf .kb-titel a { color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.ar-kopf .kb-titel a:hover { color: var(--lilat); }
.ar-kopf .kb-titel svg { color: var(--lilat); flex: none; }
.ar-krume-x {
  background: none; border: none; cursor: pointer; padding: 0 0 0 6px;
  font-size: var(--fs-fein); font-weight: 600; color: var(--lilat);
}

/* Der Weg zurück zum Ordnerbaum. Am Rechner ausgeblendet, weil der Baum dort danebensteht; das
   Markup ist trotzdem bei jeder Breite dasselbe, sonst hinge die Bedienbarkeit am Zeitpunkt des
   Zeichnens statt an der Fensterbreite.
   36 px hoch: tools/mess-handy-regeln.js meldet unter 24 px einen Fehler und unter 36 px, dass es
   fummelig wird. */
.ar-zurueck {
  display: none; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 13px 6px 10px; margin-right: 2px;
  border: 1.5px solid var(--line); border-radius: var(--r2);
  background: var(--bg); color: var(--lilat);
  font: inherit; font-size: var(--fs-fein); font-weight: 700; cursor: pointer;
}
.ar-zurueck svg { flex: none; }
.ar-zurueck:hover { border-color: var(--lilat); }

.ar-suche { position: relative; display: flex; align-items: center; }
.ar-suche svg { position: absolute; left: 10px; color: var(--tsoft); pointer-events: none; }
.ar-suche input {
  width: 220px; max-width: 44vw;
  border: 1.5px solid var(--feldrand); background: var(--weiss); color: var(--text);
  border-radius: var(--r2); padding: 8px 11px 8px 32px; outline: none;
  font: inherit; font-size: var(--fs-text);
}
.ar-suche input:focus { border-color: var(--lilat); }

.ar-umschalter { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.ar-umschalter button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: none; border: none; cursor: pointer; color: var(--tsoft);
}
.ar-umschalter button:hover { background: var(--soft); }
.ar-umschalter button.an { background: var(--soft); color: var(--lilat); }

/* Warnbalken, wenn der Dateispeicher fehlt. Eigene Klasse statt .hint: .hint ist die
   lilafarbene Kleinschrift unter einem Formularfeld, und eine Warnung, die genauso aussieht
   wie ein Bedienhinweis, liest niemand als Warnung. */
.ar-hinweis {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 9px 13px;
  border-radius: var(--r2);
  background: var(--amber-soft); color: var(--ambert);
  font-size: var(--fs-fein); font-weight: 600;
}
.ar-hinweis svg { flex: none; }

/* Die Angaben zur Datei im Bearbeiten-Fenster: Größe, Art, wer und wann. */
.ar-meta { font-size: var(--fs-mikro); color: var(--tsoft); padding-top: 2px; }

/* ---------- Inhaltsfläche samt Ablegezone ---------- */

.ar-inhalt {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 2px 6px; position: relative;
  border-radius: var(--r3);
}
/* Beim Ziehen einer Datei über die Fläche. Der Rahmen liegt INNEN (inset), damit sich die
   Fläche beim Aufleuchten nicht um zwei Pixel verschiebt und die Liste darunter springt. */
.ar-inhalt.ziel { box-shadow: inset 0 0 0 2px var(--lilat); background: var(--soft); }
.ar-inhalt.ziel::after {
  content: 'Zum Hochladen hier ablegen';
  position: absolute; inset: auto 0 12px; text-align: center;
  font-size: var(--fs-fein); font-weight: 700; color: var(--lilat);
  pointer-events: none;
}

/* laufende Uploads */
.ar-laufend { display: flex; flex-direction: column; gap: 6px; }
.ar-lauf {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: var(--r2);
  background: var(--soft); color: var(--lilat);
  font-size: var(--fs-fein);
}
.ar-lauf span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Ohne Deckkraft. Die 80 %, die hier standen, drückten den Fehlerton (--rott auf --rot-soft)
   auf 4,04:1 — WCAG AA verlangt 4,5:1 für Text dieser Größe. Zurückhaltend wirkt die Zeile
   jetzt über die Schriftstärke: daneben steht span mit 600, hier bleibt es bei normal. */
.ar-lauf em { font-style: normal; }
.ar-lauf.fehler { background: var(--rot-soft); color: var(--rott); }

/* Unterordner als Reihe über den Dateien */
.ar-ordnerzeile { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-ordnerkachel {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px; border-radius: var(--r2);
  border: 1.5px solid var(--line); background: var(--bg); color: var(--text);
  font: inherit; font-size: var(--fs-text); font-weight: 600; cursor: pointer;
  max-width: 100%;
}
.ar-ordnerkachel:hover { border-color: var(--lilat); color: var(--lilat); }
.ar-ordnerkachel svg { flex: none; color: var(--lilat); }
.ar-ordnerkachel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Liste ---------- */

.ar-liste { display: flex; flex-direction: column; }
/* Umbruch erlaubt. Vorher stand alles in EINER Zeile, und weil der Kundenchip nicht schrumpfen
   kann, nahm er den Platz dem Namen weg: gemessen bei 320, 375, 901 und 1000 px stand
   .ar-zeile-haupt auf 0,0 px — der Dateiname war nicht gekürzt, sondern verschwunden. Ab jetzt
   rückt die rechte Gruppe (Chip und Knöpfe) in die zweite Zeile, sobald dem Namen weniger als
   die Grundbreite von .ar-zeile-haupt bleibt. */
.ar-zeile {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 9px 8px; border-bottom: 1px solid var(--linie-fein);
  border-radius: 10px;
}
.ar-zeile:hover { background: var(--bg); }
/* Grundbreite 220 px: davon gehen 34 px Symbol und 11 px Lücke ab, es bleiben rund 25 Zeichen
   Name. Wird es enger, ist die zweite Zeile besser als ein Name ohne Zeichen. */
.ar-zeile-haupt { display: flex; align-items: center; gap: 11px; flex: 1 1 220px; min-width: 0; color: var(--text); }
/* Chip und Knöpfe gehören zusammen und wandern gemeinsam. Als EIN Kasten, weil sie sonst
   einzeln umbrechen und die Zeile bei 1000 px auf drei Zeilen auseinanderfällt. */
.ar-zeile-rand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; }
/* Der Chip ist der nachrangige Wert und weicht als Erster: er darf schrumpfen und wird gekürzt
   (display: block, weil text-overflow an einem Flex-Kasten nichts kürzt). Der volle Firmenname
   steht im title, siehe arListeHtml. */
.ar-zeile-rand .kb-chip { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ar-sym {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--soft); color: var(--lilat);
}
.ar-zeile-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ar-zeile-text b { font-size: var(--fs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-zeile-text small { font-size: var(--fs-mikro); color: var(--tsoft); }
.ar-zeile-text i {
  font-style: normal; font-size: var(--fs-mikro); color: var(--tsoft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-zeile-haupt:hover b { color: var(--lilat); }

/* ---------- Kacheln ---------- */

.ar-kacheln {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.ar-kachel {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--weiss); overflow: hidden;
  display: flex; flex-direction: column;
}
.ar-kachel:hover { border-color: var(--lilat); }
.ar-kachel-bild {
  height: 116px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ar-kachel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-kachel-sym { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--lilat); }
.ar-kachel-sym em { font-style: normal; font-size: var(--fs-mikro); font-weight: 700; letter-spacing: .06em; }
.ar-kachel-fuss { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ar-kachel-fuss b { font-size: var(--fs-fein); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-kachel-fuss small { font-size: var(--fs-mikro); color: var(--tsoft); }
.ar-kachel-fuss .kb-chip { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Aktionsknöpfe an Zeile und Kachel ---------- */

/* 8 px statt der 2 px, die hier standen: „Herunterladen", „Bearbeiten" und „Löschen" lagen mit
   gemessenen 2,0 px Abstand nebeneinander, und ganz rechts steht die Löschung ohne Papierkorb.
   Ab 6 px meldet tools/mess-handy-regeln.js nichts mehr, --s2 ist die nächste Rasterstufe. */
.ar-akt { display: flex; gap: var(--s2); flex: none; }
.ar-kachel .ar-akt {
  position: absolute; top: 6px; right: 6px;
  background: var(--weiss); border-radius: var(--r2); padding: 2px;
  box-shadow: var(--shadow);
  opacity: 0; transition: opacity .12s;
}
/* Am Zeigegerät erscheinen die Knöpfe beim Überfahren. Auf einem Berührungsbildschirm gibt
   es kein Überfahren, deshalb stehen sie dort dauerhaft da: sonst wäre „Löschen" am Telefon
   überhaupt nicht erreichbar. */
.ar-kachel:hover .ar-akt, .ar-kachel:focus-within .ar-akt { opacity: 1; }
@media (hover: none) { .ar-kachel .ar-akt { opacity: 1; } }

.ar-akt button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: none; border: none; cursor: pointer; color: var(--tsoft);
}
.ar-akt button:hover { background: var(--soft); color: var(--lilat); }
.ar-akt button.weg:hover { background: var(--rot-soft); color: var(--rott); }

/* ---------- Kundenzuordnung im Dateifenster ---------- */

.ar-kundenwahl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-kunde-ist { flex: 1; min-width: 120px; font-size: var(--fs-text); color: var(--text); }
.ar-kundenliste {
  margin-top: 8px; max-height: 190px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r2);
}
.ar-kundenliste button {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 8px 12px; background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--linie-fein); color: var(--text); font: inherit;
}
.ar-kundenliste button:last-child { border-bottom: none; }
.ar-kundenliste button:hover { background: var(--soft); }
.ar-kundenliste small { font-size: var(--fs-mikro); color: var(--tsoft); }
.ar-kundenleer { padding: 10px 12px; color: var(--tsoft); font-size: var(--fs-fein); }

/* ---------- Ansicht „Nach Kunde" ---------- */

.ar-kundenkarten {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.ar-kundenkarte {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--bg); color: var(--text);
}
.ar-kundenkarte:hover { border-color: var(--lilat); }
.ar-kundenkarte b { font-size: var(--fs-text); }
.ar-kundenkarte small { font-size: var(--fs-mikro); color: var(--tsoft); }
.ar-kundenkarte em { font-style: normal; font-size: var(--fs-mikro); font-weight: 700; color: var(--lilat); margin-top: 4px; }

/* ---------- Herkunft: Archiv oder Kundenakte (Runde 75, Teil 4) ---------- */

/* Der Hinweis über der Liste eines Kunden. Eigene Klasse statt .hint, aus demselben Grund wie bei
   .ar-hinweis: .hint ist die Kleinschrift unter einem Formularfeld, und eine Aussage über die
   Herkunft der Daten darf nicht aussehen wie ein Bedienhinweis. Fläche und Text kommen als Paar
   aus den Variablen, damit der Nachtmodus von selbst stimmt. */
.ar-quellen {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 13px; border-radius: var(--r2);
  background: var(--soft); color: var(--lilat);
  font-size: var(--fs-fein); line-height: 1.5;
}
.ar-quellen svg { flex: none; margin-top: 2px; }
.ar-quellen b { font-weight: 700; }

/* Der Satz an der einzelnen Zeile. Er steht bewusst IM Text der Zeile und nicht nur im title:
   am Handy gibt es kein Überfahren, und „warum fehlt hier der Löschknopf" ist genau die Frage,
   die sonst offen bliebe. */
.ar-akte-hinweis {
  font-style: normal; font-size: var(--fs-mikro); font-weight: 600; color: var(--lilat);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ar-kundenkarte-quellen { color: var(--tsoft); }

/* ---------- Handy ---------- */

@media (max-width: 900px) {
  /* RUNDE 75, TEIL 3: unter 900 px ist EINE Ansicht sichtbar, nicht zwei gequetschte Spalten.
     Bastian am 01.09.2026: „aufm Handy sieht das komisch verbacken aus."

     Vorher standen Ordnerbaum und Inhaltsblatt untereinander, der Baum mit 232 px Deckel. Wer
     eine Datei suchte, rollte erst an einer halben Ordnerliste vorbei; wer einen Ordner suchte,
     sah drei Zeilen davon. Jetzt zeigt .ar-split genau eine der beiden Spalten, und der Knopf
     „Ordner" im Brotkrumenpfad ist der Weg zurück in den Baum. Am Rechner (ab 901 px) hat die
     Klasse keine Wirkung: dort stehen beide Spalten nebeneinander, wie bisher.

     Der Nachbarwähler (`>`) ist Absicht: er trifft nur die beiden echten Spalten und nicht
     zufällig eine gleichnamige Klasse weiter innen. */
  .ar-split.zeigt-inhalt > .ar-baum { display: none; }
  .ar-split.zeigt-ordner > .ar-blatt { display: none; }
  /* Kein Höhendeckel mehr: der Baum IST jetzt die ganze Ansicht, solange er sichtbar ist. */
  .ar-baum { max-height: none; padding: var(--s4) var(--s3) var(--s3); }
  .ar-zurueck { display: inline-flex; }
  .ar-akte-hinweis { white-space: normal; overflow-wrap: anywhere; }
  .ar-zeile-text i { white-space: normal; overflow-wrap: anywhere; }
  .ar-inhalt { overflow: visible; }
  .ar-suche input { width: 100%; max-width: none; }
  /* 18 px statt 14. iOS-Safari zoomt beim Antippen in jedes Feld unter 16 px hinein und nicht
     zurück; deshalb steht in styles.css die Regel, dass am Handy ALLE Felder --fs-karte tragen.
     Sie hat hier verloren, weil `.ar-suche input` dieselbe Spezifität hat und später kommt.
     Gemessen: 14,0 px bei 320, 375 und 414 px, während jedes andere Feld der App 18 px trug. */
  .ar-suche input { font-size: var(--fs-karte); }
  .ar-kopf .kb-akt { width: 100%; }
  .ar-kacheln { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

  /* Der Dateiname bricht um, statt zu enden. Am Handy gibt es kein Überfahren, der volle Name
     im title wäre dort also nicht erreichbar — und gemessen waren bei 320 px 89 px Kasten für
     385 px Text, also elf von rund fünfzig Zeichen. In einer Ablage für Verträge und Ausweise
     ist der Name das einzige Unterscheidungsmerkmal. `anywhere`, weil Dateinamen oft aus einem
     einzigen langen Wort bestehen und sonst über den Rand hinausliefen. */
  .ar-zeile-text b { white-space: normal; overflow-wrap: anywhere; }
  /* 36 px: darunter meldet der Handy-Messstand „ab 36 wird es fummelig". Die Knöpfe stehen am
     Handy ohnehin in ihrer eigenen Zeile, die Breite kostet den Namen also nichts mehr. */
  .ar-zeile .ar-akt button { width: 36px; height: 36px; }
}