/* ====================================================================
   ISO-9001-App im Band-Alpin-Erscheinungsbild
   ====================================================================

   Bis 16.08.2026 lief die App auf einem eigenen Blau, Inter von Google
   und Tailwind-Rundungen. Sie war damit das einzige Modul ausserhalb des
   Erscheinungsbildes und sah aus wie eine Dateiablage.

   Diese Datei liegt NACH tailwind.css und zieht die App auf die Werte aus
   ci/bandalpin-ci.css. Sie greift bewusst breit statt Klasse fuer Klasse:
   Tailwind setzt Rundungen und Schriften an hunderten Stellen, und die
   sollen hier alle gleich aussehen.

   Die drei Merkmale, an denen man das Erscheinungsbild erkennt:
     1. ECKIG. --ba-radius ist 0. Keine abgerundeten Karten, keine Pillen.
     2. ARCHIVO fuer Auszeichnung, Inter fuer Text, Plex Mono fuer Zahlen
        und Kennungen. Nichts davon kommt von einem fremden Server.
     3. EIN bunter Ton. Alpenblau. Alles andere ist Grau.
   ==================================================================== */

/* --- Grundschrift ------------------------------------------------- */
html, body, #root {
  font-family: var(--ba-font-body);
  color: var(--ba-ink-secondary);
  background: var(--ba-canvas-soft);
  -webkit-font-smoothing: antialiased;
}

/* --- Eckig. Das ist das auffaelligste Merkmal des Erscheinungsbildes.
       Ausgenommen sind nur echte Kreise (Punkte, Avatare). --------- */
[class*="rounded"]:not(.rounded-full) {
  border-radius: 0 !important;
}

/* --- Auszeichnung: Archivo, leicht negativ gesperrt ---------------- */
h1, h2, h3, h4,
.font-bold, .font-black, .font-extrabold, .font-semibold {
  font-family: var(--ba-font-display);
  letter-spacing: -0.015em;
  color: var(--ba-ink);
}

/* --- Zahlen und Kennungen: Plex Mono mit Tabellenziffern ---------- */
.font-mono, .ba-num {
  font-family: var(--ba-font-mono) !important;
  font-feature-settings: "tnum";
}

/* --- Kopfband. Dasselbe Dunkel wie im Druck und auf der Homepage.
       Ersetzt die weisse Leiste, die wie eine Symbolleiste wirkte. -- */
.ba-kopfband {
  background: var(--ba-dark);
  border-bottom: none !important;
  color: var(--ba-on-dark);
}
.ba-kopfband h1,
.ba-kopfband .ba-modul { color: var(--ba-on-dark); }
.ba-kopfband p,
.ba-kopfband .ba-kopf-unter { color: var(--ba-on-dark-mute); }
.ba-kopfband input {
  background: var(--ba-dark-raised) !important;
  border-color: var(--ba-hairline-dark) !important;
  color: var(--ba-on-dark);
}
.ba-kopfband input::placeholder { color: var(--ba-on-dark-mute); }
.ba-kopfband a,
.ba-kopfband button { color: var(--ba-on-dark-mute); }
.ba-kopfband a:hover,
.ba-kopfband button:hover { color: var(--ba-on-dark); background: var(--ba-dark-raised); }
.ba-kopfband .ba-hauptknopf {
  background: var(--ba-primary) !important;
  color: #fff !important;
}
.ba-kopfband .ba-hauptknopf:hover { background: var(--ba-primary-soft) !important; }

/* --- Die Wortmarke im Kopf. Inline-SVG, damit sie die Schrift der
       Seite erbt; als <img> faellt Archivo aus und es steht ein
       anderes Logo da. ------------------------------------------- */
.ba-wortmarke-svg { height: 15px; width: auto; display: block; }
.ba-wortmarke-svg .ink { fill: var(--ba-on-dark); }
.ba-wortmarke-svg .akzent { fill: var(--ba-primary-soft); }
.ba-wortmarke-svg .akzent-strich { stroke: var(--ba-primary-soft); }

/* --- Mikroschrift ueber Bloecken: Mono, gesperrt, Versalien ------- */
.ba-marke {
  font-family: var(--ba-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ba-ink-mute);
}

/* --- Karten: Hairline statt Schatten, mehr Luft ------------------- */
.ba-flaeche {
  background: var(--ba-canvas);
  border: 1px solid var(--ba-hairline);
  box-shadow: none;
}

/* --- Tabellenkopf wie im Druck: Versalien, klein, ruhiger Grund --- */
thead th {
  font-family: var(--ba-font-display) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ba-ink) !important;
  background: var(--ba-canvas-soft);
  border-bottom: 1px solid var(--ba-hairline) !important;
}

/* --- Zeilen: Hairline, ruhiges Hover, mehr Hoehe ------------------ */
tbody tr { border-bottom: 1px solid var(--ba-hairline); }
tbody tr:hover { background: var(--ba-hervor-bg, #EAF6F7); }
tbody td { padding-top: 14px !important; padding-bottom: 14px !important; }

/* --- Knoepfe: Archivo, gesperrte Versalien, eckig ----------------- */
button, .ba-btn {
  font-family: var(--ba-font-display);
}

/* --- Fortschrittsbalken der Statusampel: schmal statt wuchtig ----- */
.ba-ampel { height: 4px !important; background: var(--ba-hairline); }

/* --- Auswahl im Verzeichnisbaum: Balken links statt Flaeche ------- */
.ba-rail-aktiv {
  background: var(--ba-hervor-bg, #EAF6F7) !important;
  box-shadow: inset 3px 0 0 var(--ba-primary);
  color: var(--ba-primary-press) !important;
}

/* --- Nachtrag 16.08.2026: Klassen, die im statischen Tailwind-Build fehlen.
       flex-wrap, order-* und gap-y-* sind dort nicht enthalten und wirkten
       lautlos nicht — der Kopf blieb einzeilig und die Elemente lagen am
       Handy uebereinander. Statt den Build neu zu erzeugen, stehen die
       wenigen benoetigten Regeln hier; sie gelten fuer beide Ansichten. --- */
.ba-umbruch { flex-wrap: wrap; }
.ba-zeile-2 { order: 3; }
.ba-zeile-3 { order: 4; }
.ba-luecke-y { row-gap: 0.5rem; }

/* Ab Tablet steht der Kopf wieder in einer Zeile. */
@media (min-width: 640px) {
  .ba-zeile-2, .ba-zeile-3 { order: 0; }
}

/* --- Hauptbereich: am Handy untereinander, ab 1024 px nebeneinander.
       Die Tailwind-Praefixe sm: und lg: stehen NICHT im gebauten CSS —
       der Build wurde auf die urspruenglich verwendeten Klassen
       zusammengestrichen. Deshalb stehen die Regeln hier. ------------ */
.ba-hauptbereich { display: flex; flex-direction: column; gap: 1.25rem; }
.ba-seitenbereich { width: 100%; }

@media (min-width: 1024px) {
  .ba-hauptbereich { flex-direction: row; overflow: hidden; padding-left: 1.5rem; padding-right: 1.5rem; }
  .ba-seitenbereich { width: 15rem; flex-shrink: 0; overflow-y: auto; }
}

/* Kopf: ab 640 px wieder einzeilig, Marke und Knopfgruppe nicht mehr
   ueber die volle Breite. */
@media (min-width: 640px) {
  .ba-kopf-marke { width: auto !important; }
  .ba-kopf-aktionen { width: auto !important; margin-left: auto; }
  .ba-kopf-suche { width: auto; max-width: 20rem; margin-left: 1rem; }
}

/* Dokumentzeile: am Handy untereinander, ab 640 px nebeneinander. */
.ba-dokzeile { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 640px) {
  .ba-dokzeile { flex-direction: row; align-items: center; gap: 1rem; }
}

/* ====================================================================
   Der Kapitelbaum
   ====================================================================
   Bis 16.08.2026 standen links die Navigation und rechts die Gliederung —
   zwei Haelften desselben Gedankens, und am Handy zweimal dasselbe
   untereinander. Jetzt ein Baum: Kapitel als Knoten, Dokumente eingerueckt
   darunter, verbunden durch eine durchgehende Linie.

   Die Linie ist das, was eine gruppierte Liste von einem Baum
   unterscheidet. Ohne sie muss man die Zugehoerigkeit erschliessen; mit
   ihr sieht man sie. -------------------------------------------------- */

.ba-knoten {
  background: var(--ba-canvas-soft);
  border-top: 1px solid var(--ba-hairline);
}
.ba-knoten:hover { background: var(--ba-primary-subdued); }

/* Der Zweig: Einrueckung plus senkrechte Linie auf Hoehe der Kapitelnummer.
   28 px entsprechen der Position der Nummer im Knoten darueber, damit die
   Linie unter ihr steht und nicht daneben. */
.ba-zweig {
  position: relative;
  padding-left: 46px;
  padding-right: 20px;
  border-top: 1px solid var(--ba-hairline);
}
.ba-zweig::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ba-hairline);
}
/* Waagrechter Anschluss zum Eintrag */
.ba-zweig::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--ba-hairline);
}
/* Beim letzten Eintrag endet die Linie am Anschluss, statt ins Leere zu
   laufen. */
.ba-zweig:last-child::before { bottom: 50%; }

.ba-zweig:hover { background: var(--ba-hervor-bg, #EAF6F7); }
.ba-zweig:hover::before,
.ba-zweig:hover::after { background: var(--ba-primary-subdued); }

/* Ohne die linke Spalte darf der Baum die volle Breite nehmen. */
@media (min-width: 1024px) {
  .ba-hauptbereich { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ====================================================================
   Kapitel als redaktionelle Abschnitte
   ====================================================================
   Die Ablage sah aus wie ein Dateiregister: Zeilen von 13 px Hoehe,
   Ordnersymbole, Spalten voll Metadaten. Was fehlte, war nicht Farbe,
   sondern Rhythmus — Auszeichnung, Luft, eine Aussage je Block.

   Aufbau je Kapitel, wie auf der Homepage: Kennung in Mono-Versalien,
   Ueberschrift in Archivo, ein Vorspann, dann der Inhalt. Die Dokumente
   sind Karten, keine Zeilen: eine Karte traegt eine Sache, eine Zeile
   traegt Spalten. ---------------------------------------------------- */

.ba-kapitelfolge { display: flex; flex-direction: column; gap: 0; }

.ba-kapitel { border-top: 1px solid var(--ba-hairline); }
.ba-kapitel:first-child { border-top: none; }

.ba-kapitelkopf {
  display: block;
  width: 100%;
  position: relative;
  text-align: left;
  padding: 34px 56px 22px 0;
  background: none;
}
.ba-kapitelkopf:hover { background: none; }
.ba-kapitelkopf:hover .ba-kapiteltitel { color: var(--ba-primary-press); }

.ba-kapitelnr { display: block; color: var(--ba-primary) !important; }

.ba-kapiteltitel {
  font-family: var(--ba-font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ba-ink);
  margin: 8px 0 0;
  transition: color .15s;
}

.ba-kapitelvorspann {
  font-size: 13.5px;
  color: var(--ba-ink-mute);
  margin: 8px 0 0;
}

.ba-kapitelpfeil {
  position: absolute;
  right: 8px;
  top: 40px;
  color: var(--ba-ink-mute);
  transition: transform .18s;
}

/* Karten: eine Sache je Karte, eckig, Hairline statt Schatten. */
.ba-kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 1px;
  background: var(--ba-hairline);
  border: 1px solid var(--ba-hairline);
  margin-bottom: 34px;
}

.ba-karte {
  background: var(--ba-canvas);
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .15s;
}
.ba-karte:hover { background: var(--ba-hervor-bg, #EAF6F7); }

.ba-karte-nr { color: var(--ba-primary) !important; }

.ba-karte-titel {
  font-family: var(--ba-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ba-ink);
  margin: 0;
  flex: 1;
}

.ba-karte-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ba-hairline);
}

.ba-karte-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ba-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ba-ink-secondary);
}
.ba-punkt { width: 6px; height: 6px; border-radius: 9999px; display: inline-block; }

.ba-karte-aktionen { display: inline-flex; align-items: center; gap: 12px; }
.ba-karte-version { font-size: 11px; color: var(--ba-ink-mute); }

.ba-karte-pdf {
  font-family: var(--ba-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ba-primary-deep);
  background: none;
  padding: 0;
}
.ba-karte-pdf:hover { color: var(--ba-primary-press); background: none; text-decoration: underline; }

/* Am Handy schmaler und mit weniger Vorlauf. */
@media (max-width: 639px) {
  .ba-kapitelkopf { padding: 26px 44px 18px 0; }
  .ba-kapiteltitel { font-size: 22px; }
  .ba-kartenraster { grid-template-columns: 1fr; }
}

/* --- Einzug der Kapitelabschnitte (16.08.2026) ----------------------
   Kennung, Überschrift und Karten standen hart an der linken Kante,
   während rechts Fläche frei blieb. Ein redaktioneller Block braucht
   eine Anschlagkante, an der alles ausgerichtet ist — die Trennlinie
   läuft weiterhin über die volle Breite, damit die Gliederung sichtbar
   bleibt. ---------------------------------------------------------- */
.ba-kapitel { padding-left: 44px; padding-right: 24px; }

@media (max-width: 1023px) {
  .ba-kapitel { padding-left: 24px; padding-right: 16px; }
}
@media (max-width: 639px) {
  .ba-kapitel { padding-left: 16px; padding-right: 12px; }
}

/* Der Aufklapppfeil sitzt an der rechten Kante des Abschnitts, nicht
   mehr an der des Fensters. */
.ba-kapitelpfeil { right: 0; }

/* ====================================================================
   Fehlende Tailwind-Klassen nachgereicht (18.08.2026)
   --------------------------------------------------------------------
   vendor/tailwind.css ist ein FERTIG GEBAUTES Stylesheet, kein Tailwind
   zur Laufzeit. Klassen, die beim Bauen nicht im Quelltext standen,
   fehlen darin - und wirken dann lautlos nicht. Aufgefallen ist es an
   der Auditor-Anmeldung: Sie lief ueber die volle Fensterbreite und
   klebte oben, weil max-w-sm und min-h-screen fehlten.

   Eine Pruefung aller verwendeten Klassen gegen den Build ergab 27
   Fehlstellen in audit.jsx und 40 in app.jsx, groesstenteils dieselben.
   Sie stehen hier zusammen, damit beide Apps davon profitieren.

   Die Werte folgen der Tailwind-Skala (1 = 0.25rem = 4px), damit sich
   nachgereichte und gebaute Klassen nicht widersprechen.
   ==================================================================== */

/* --- Groessen und Rahmen --- */
.min-h-screen { min-height: 100vh; }
.max-w-sm     { max-width: 24rem; }
.h-6          { height: 1.5rem; }
.h-2\.5       { height: 0.625rem; }
.h-1\.5       { height: 0.375rem; }
.w-1\.5       { width: 0.375rem; }
.w-px         { width: 1px; }
.flex-shrink-0 { flex-shrink: 0; }

/* --- Innenabstaende --- */
.p-1\.5  { padding: 0.375rem; }
.p-2\.5  { padding: 0.625rem; }
.p-6     { padding: 1.5rem; }
.pt-6    { padding-top: 1.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4    { padding-top: 1rem; padding-bottom: 1rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.pr-2\.5 { padding-right: 0.625rem; }

/* --- Aussenabstaende --- */
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-3\.5 { margin-top: 0.875rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.mb-3\.5 { margin-bottom: 0.875rem; }

/* --- Abstaende in Flex-/Grid-Bereichen --- */
.gap-1\.5   { gap: 0.375rem; }
.gap-2\.5   { gap: 0.625rem; }
.gap-3\.5   { gap: 0.875rem; }
.gap-x-5    { column-gap: 1.25rem; }
.gap-x-6    { column-gap: 1.5rem; }
.gap-y-1    { row-gap: 0.25rem; }

/* --- Schrift --- */
.text-lg           { font-size: 1.125rem; line-height: 1.75rem; }
.italic            { font-style: italic; }
.tracking-wider    { letter-spacing: 0.05em; }
.underline-offset-2 { text-underline-offset: 2px; }
.decoration-dotted { text-decoration-style: dotted; }
.whitespace-nowrap  { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }

/* --- Positionierung: die Lupe im Suchfeld sitzt darauf auf --- */
.top-1\/2            { top: 50%; }
.-translate-y-1\/2   { transform: translateY(-50%); }

/* --- Zustaende --- */
.hover\:bg-slate-200:hover   { background-color: #E2E8F0; }
.hover\:bg-\[\#FAFBFD\]:hover { background-color: #FAFBFD; }
.active\:scale-\[0\.98\]:active { transform: scale(0.98); }

/* --- Haltepunkte: im Build fehlen die sm-Varianten dieser beiden --- */
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
}