/* ====================================================================
   BAND ALPIN — Erscheinungsbild, eine Quelle für alles
   ====================================================================

   DIESE DATEI IST DAS ORIGINAL. Alle anderen Vorkommen sind Kopien,
   die `node ci/verteilen.mjs` erzeugt. Wer eine Kopie ändert, verliert
   die Änderung beim nächsten Verteilen.

   Ändert sich die Marke — neues Logo, andere Hausfarbe — wird HIER
   geändert und einmal verteilt. Homepage, Certo Trace und Certo Vision
   ziehen dann gemeinsam nach. Genau darum steht die Datei hier oben und
   nicht in einem der drei Projekte.

   Die Namen (--ba-*) stammen aus Certo Vision und bleiben unverändert,
   damit die dortigen Klassen weiterlaufen; getauscht wurden nur die
   Werte. Vorher war Certo Vision violett, die Homepage blaugrün und
   Certo Trace tailwind-teal — drei Systeme, drei Handschriften.

   Stand: 09.08.2026
   ==================================================================== */

:root {
  /* --- Hausfarbe -------------------------------------------------
     Das Alpenblau der Wortmarke. Es ist der einzige bunte Ton im
     ganzen System; alles andere ist Grau. Wird die Marke umgefärbt,
     sind es diese fünf Zeilen. */
  --ba-primary: #0A7E8C;          /* Flächen, Schaltflächen, Akzent   */
  --ba-primary-deep: #086874;     /* gedrückt / Hover                 */
  --ba-primary-press: #05525C;    /* aktiv                            */
  --ba-primary-soft: #16A5B5;     /* helle Variante auf Dunkelheit    */
  --ba-primary-subdued: #B7E3E8;  /* Hinterlegungen, Markierungen     */
  /* Auf Fotografie braucht der Akzent mehr Helligkeit, sonst reicht
     der Kontrast für Kleintext nicht (geprüft: 4,5:1 nach WCAG AA). */
  --ba-primary-on-photo: #63DAE6;

  /* --- Dunkel und Schrift ---------------------------------------- */
  --ba-dark: #0E1A21;             /* dunkle Bänder, Kopfzeilen        */
  --ba-dark-raised: #16242D;      /* Karten auf dunklem Grund         */
  --ba-ink: #0D1418;              /* Überschriften                    */
  --ba-ink-secondary: #38444B;    /* Fließtext                        */
  --ba-ink-mute: #66757D;         /* Beiwerk, Beschriftungen          */
  --ba-on-dark: #F4F7F8;          /* Schrift auf dunklem Grund        */
  --ba-on-dark-mute: #9FB0B8;

  /* --- Flächen ---------------------------------------------------- */
  --ba-canvas: #FFFFFF;
  --ba-canvas-soft: #F2F4F5;
  --ba-cream: #F5E9D4;            /* Hinweisfelder                    */
  --ba-hairline: #E2E6E8;
  --ba-hairline-input: #C3CDD2;
  --ba-hairline-dark: #24343D;    /* Trennlinien auf Dunkelheit       */

  /* --- Rückmeldungen ---------------------------------------------- */
  --ba-gut: #0F7B4F;
  --ba-schlecht: #C2274B;
  --ba-ruby: #C2274B;             /* Altname, gleiche Farbe           */
  --ba-warnung: #B57314;

  /* --- Schriften --------------------------------------------------
     Archivo trägt die Marke, Inter den Text, IBM Plex Mono alles
     Technische: Nummern, Chargen, Messwerte. Die Dateien liegen je
     Projekt lokal, nichts wird von fremden Servern geladen. */
  --ba-font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --ba-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ba-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* --- Form -------------------------------------------------------
     Kanten statt Rundungen: Das Haus baut Werkzeuge, keine Apps.
     Einzige Ausnahme sind runde Marken (Punkte, Zähler). */
  --ba-radius: 0px;
  --ba-radius-rund: 9999px;

  --ba-shadow-1: rgba(13,20,24,0.06) 0 1px 3px;
  --ba-shadow-2: rgba(13,20,24,0.08) 0 8px 24px, rgba(13,20,24,0.04) 0 2px 6px;
}

/* --- Marken-Bausteine ------------------------------------------------
   Damit die Wortmarke in allen drei Anwendungen identisch gesetzt ist
   und nicht dreimal leicht anders nachgebaut wird.

   ACHTUNG, seit der Logo-Entscheidung vom 09.08.2026: Das Logo ist
   `logo-wortmarke.svg` - BANDALPIN als ein Wort, dessen A ein Berg ist.
   Als reiner Text laesst sich dieser Berg nicht setzen. `.ba-wortmarke`
   unten ist deshalb NICHT das Logo, sondern nur dessen Notbehelf fuer
   Stellen, an denen ausschliesslich Text moeglich ist (Betreffzeilen,
   Klartext-Mails). Ueberall, wo Auszeichnung erlaubt ist, gehoert die
   SVG hinein - inline, damit sie Schrift und Textfarbe der Seite erbt. */

.ba-wortmarke {
  font-family: var(--ba-font-display);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ba-ink);
}
.ba-wortmarke span { color: var(--ba-primary); }
.ba-auf-dunkel .ba-wortmarke,
.ba-wortmarke.auf-dunkel { color: var(--ba-on-dark); }
.ba-wortmarke.auf-dunkel span { color: var(--ba-primary-soft); }

/* Kennzeichnung eines Moduls: "Certo Trace", "Certo Vision" */
.ba-modul {
  font-family: var(--ba-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.ba-display { font-family: var(--ba-font-display); font-weight: 700; letter-spacing: -0.015em; color: var(--ba-ink); }
.ba-num { font-family: var(--ba-font-mono); font-feature-settings: "tnum"; }

.ba-card {
  background: var(--ba-canvas);
  border: 1px solid var(--ba-hairline);
  border-radius: var(--ba-radius);
  box-shadow: var(--ba-shadow-1);
}

.ba-btn {
  background: var(--ba-primary);
  color: #fff;
  border-radius: var(--ba-radius);
  padding: 10px 18px;
  font-family: var(--ba-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  transition: background .2s;
}
.ba-btn:hover { background: var(--ba-primary-deep); }
.ba-btn:active { background: var(--ba-primary-press); }

.ba-tag {
  font-family: var(--ba-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ba-primary-subdued);
  color: var(--ba-primary-press);
  padding: 3px 7px;
}