/* ═══════════════════════════════════════════════════════════════════════════
   ARVELA · KNOEPFE
   ═══════════════════════════════════════════════════════════════════════════
   EINZIGE Quelle der beiden Knopfformen. Jede Flaeche verlinkt diese Datei:
       <link rel="stylesheet" href="/buttons.css">
   Heute: views/demand.hbs, views/buchen.hbs, admin-tools/aurelis-micropage-template.html

   ZWEI Arten, und der Unterschied ist eine Aussage, keine Laune:

   .btn-arvela  NAVIGATION. Etwas oeffnet sich, etwas wird geladen, man geht
                weiter. Weisse Flaeche mit Goldkontur, dunkle Schrift, so breit
                wie die Beschriftung. Weiss und nicht Carta, damit der Knopf
                sich vom Seitengrund abhebt statt mit ihm zu verschwimmen.
                Gold traegt dabei NIE die Flaeche, nur die Linie
                (Design-Leitplanke). Erst im Hover fuellt sie sich in Notte.

   .kf-send     HANDLUNG. Etwas wird abgeschickt und ist danach unterwegs.
                Dunkel gefuellt, volle Spaltenbreite: der eine Knopf einer
                Seite, der etwas ausloest, das man nicht zuruecknehmen kann,
                soll auch wie der eine aussehen.

   GEMEINSAM sind Schrift, Groesse, Laufweite und Zeilenhoehe. NICHT gemeinsam
   sind Breite und Innenabstand.
   line-height steht ausdruecklich hier und wird nicht vom Rumpf geerbt: die
   einbindenden Flaechen setzen unterschiedliche Rumpf-Zeilenhoehen, und daraus
   waeren verschiedene Knopfhoehen geworden.

   ABHAENGIGKEIT: die Token --oro, --notte, --carta, --lago und --mono muessen
   auf der einbindenden Flaeche definiert sein. Die Micropage fuehrt sie in
   ihrem .bkg-Block zusaetzlich zu ihren Altnamen.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-arvela,
.kf-send{
  text-align:center; border-radius:0; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  line-height:1.2;
}

.btn-arvela{
  display:inline-block; width:auto; padding:14px 36px;
  background:#FFFFFF; border:1px solid var(--oro); color:var(--notte);
  text-decoration:none;
  transition:background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn-arvela:hover,
.btn-arvela:focus-visible{
  background:var(--notte); border-color:var(--notte); color:var(--carta);
}
/* Zusaetzlich zur Fuellung eine sichtbare Fokuslinie: die Farbumkehr allein
   traegt den Tastaturfokus nicht, sie sieht aus wie ein Mauszeiger darueber. */
.btn-arvela:focus-visible{ outline:2px solid var(--lago); outline-offset:2px; }
.btn-arvela[disabled]{ opacity:.4; cursor:default; }
.btn-arvela[disabled]:hover{ background:#FFFFFF; border-color:var(--oro); color:var(--notte); }
/* Ein <a> kennt kein disabled. Fuer Links, die kein Ziel haben, sperrt diese
   Klasse tatsaechlich, statt nur blass auszusehen. */
.btn-arvela.is-disabled{ opacity:.35; pointer-events:none; }
/* Auf dem Handy volle Breite: ein Knopf von der Breite seiner Beschriftung ist
   mit dem Daumen schlechter zu treffen als einer ueber die ganze Spalte. Die
   Grenze liegt bei 480px, unterhalb der gaengigen Geraetebreiten (390, 414). */
@media(max-width:480px){
  .btn-arvela{ display:block; width:100%; }
}

.kf-send{
  display:block; width:100%; padding:16px 28px;
  background:var(--notte); border:1px solid var(--notte); color:var(--carta);
  transition:background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.kf-send:hover{ background:var(--lago); border-color:var(--lago); }
.kf-send[disabled]{ opacity:.4; cursor:default; }
.kf-send[disabled]:hover{ background:var(--notte); border-color:var(--notte); }
.kf-send:focus-visible{ outline:2px solid var(--lago); outline-offset:2px; }