/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   KNOPF — eine Basis, sechs Aufsätze.
       <button class="btn">Neben-Aktion</button>
       <button class="btn btn-primaer">Haupt-Aktion</button>
       btn-gefahr · btn-leise · btn-loeschen · btn-klein · btn-symbol
       btn-instrument (Versalien, durchsichtig — für Cockpit-Oberflächen)
   Die Basis IST die Neben-Aktion; jede Variante sagt nur, was sie
   unterscheidet. Auch ein <a> darf ein Knopf sein. */

/* Ein Symbol vor dem Text: Inline-SVG in currentColor, kein Bild-Asset. */
.btn svg { width: 14px; height: 14px; flex-shrink: 0; margin-right: var(--abstand-4); }

.btn {
    border: 1px solid var(--linie);
    background: var(--flaeche-erhaben);
    color: var(--text);
    font-family: inherit;
    font-size: var(--schrift-sm);
    font-weight: var(--gewicht-mittel);
    padding: var(--abstand-8) var(--abstand-14);
    /* 34 px ist die Anatomie des Knopfs, keine Rolle: Ohne feste Höhe sind
       Knöpfe verschieden hoch, je nachdem, wie groß ihre Schrift gerade ist. */
    min-height: 34px;
    border-radius: var(--rundung-mittel);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-6);
    /* Ein <a> als Knopf (etwa ein Download mit echter Adresse) trüge sonst
       den Unterstrich des Browsers … */
    text-decoration: none;
    /* … und die Zeilenhöhe der Seite statt der eines <button> — 0,84 px
       höher als sein Nachbar, ein Zittern in der Kante. */
    line-height: normal;
    /* Gezielt statt `all`: `all` animierte beim Umschalten der Farbwelt auch
       jede Rahmenfarbe hinterher. */
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Hover nur dort, wo es einen Zeiger gibt — am Handy bliebe die Fläche
   nach dem Antippen sonst kleben. */
@media (hover: hover) {
    .btn:hover { background: var(--linie-zart); }
}

/* ── Haupt-Aktion ── der Knopf, den man sucht. Er hebt sich durch Farbe und
   Gewicht ab, nicht durch Größe: Ein höherer Hauptknopf neben 34-px-Nachbarn
   sieht aus wie ein Versehen. */
.btn-primaer {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--text-auf-akzent);
    font-weight: var(--gewicht-halbfett);
}
@media (hover: hover) {
    .btn-primaer:hover { background: var(--akzent-aktiv); border-color: var(--akzent-aktiv); }
}

/* ── Leise ── Tabellen-Aktionen und Nebenwege; ohne Fläche und Rahmen, aber
   ein volles Treffer-Ziel (34 px aus der Basis). */
.btn-leise {
    border: 0;
    background: transparent;
    color: var(--text-gedaempft);
    font-size: var(--schrift-kompakt);
    padding: var(--abstand-8) var(--abstand-10);
}
@media (hover: hover) {
    .btn-leise:hover { background: var(--linie-zart); color: var(--text); }
}
/* Löschen als Text — die leise Form des Entfernens, wo eine rote Fläche zu
   laut wäre. Der Hover hält die Farbe, damit sie nicht ins Neutrale kippt. */
.btn-loeschen { color: var(--fehler); }
@media (hover: hover) {
    .btn-loeschen:hover { color: var(--fehler); }
}

/* ── Zerstörend ── rote Fläche für den Punkt ohne Wiederkehr. Auch die
   Schrift darauf ist eine Rolle, kein Weiß. */
.btn-gefahr {
    background: var(--fehler-flaeche);
    border-color: var(--fehler-flaeche);
    color: var(--text-auf-akzent);
    font-weight: var(--gewicht-halbfett);
}
@media (hover: hover) {
    .btn-gefahr:hover { background: var(--fehler-flaeche-aktiv); border-color: var(--fehler-flaeche-aktiv); }
}

/* ── Klein ── für Zeilen und enge Köpfe. Die 2 px sind Feinjustage unter
   dem Raster. */
.btn-klein {
    min-height: 26px;
    padding: 2px var(--abstand-8);
    font-size: var(--schrift-xs);
}
/* ── Symbol ── ein Quadrat für ein einzelnes Zeichen, so hoch wie die Basis. */
.btn-symbol {
    width: 34px;
    padding: var(--abstand-6);
}

/* Ausgegraut: neutrale Fläche statt Deckkraft auf der Akzentfarbe —
   Deckkraft allein ergab auf Navy einen matschigen Graublau-Ton. */
.btn:disabled,
.btn:disabled:hover {
    background: var(--linie-zart);
    border-color: var(--linie);
    color: var(--text-leise);
    cursor: not-allowed;
    opacity: 0.55;
}

/* ── Instrument ── derselbe Knopf in der Typografie des Cockpits: Versalien,
   2xs, Laufweite, gedämpft, durchsichtig — die Sprache, die dort jede
   Beschriftung spricht. Keine eigene Höhe: Charakter und Größe sind zwei
   Achsen (Standard 34, klein 26 per .btn-klein). `.active` = Zustand an. */
.btn.btn-instrument {
    padding-inline: 12px;
    background: transparent;
    border-color: var(--linie);
    color: var(--text-gedaempft);
    font-size: var(--schrift-2xs);
    font-weight: var(--gewicht-mittel);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
}
@media (hover: hover) {
    .btn.btn-instrument:hover { color: var(--text); border-color: var(--linie-stark); background: var(--flaeche-schwebend); }
}
.btn.btn-instrument.active { color: var(--text); border-color: var(--linie-stark); background: var(--flaeche-schwebend); }
.btn.btn-instrument:disabled, .btn.btn-instrument:disabled:hover {
    opacity: 0.4; color: var(--text-leise); border-color: var(--linie); background: transparent;
}