/* Gemeinsame Button-Basis. Farbe, Rahmen und typografische Variante bleiben
   ueber bestehende bzw. kuenftige Modifikatoren steuerbar. */
.lhb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  box-sizing: border-box;
  min-height: var(--lhb-action-height);
  max-width: 100%;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
}
.lhb-button i,
.lhb-button svg { flex: 0 0 auto; }
.lhb-button:disabled,
.lhb-button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
@media (max-width: 520px) {
  .lhb-button { white-space: normal; }
}

/* Komponentenvertrag 1.1: verbindliche Funktionsvarianten. Lokale Klassen
   duerfen nur noch Farbe oder Sonderkontext ergaenzen, nicht die Geometrie
   der Grundkomponente neu definieren. */
.lhb-button--primary,
.lhb-button--secondary,
.lhb-button--inverse {
  min-height: var(--lhb-action-height);
}
.lhb-button--compact {
  min-height: 38px;
}

/* v343: Die Funktionsvarianten besitzen wieder eine vollstaendige globale
   Darstellung. Damit fallen echte <button>-Elemente ohne lokale Altklasse
   nicht auf Browser-Standardstile zurueck. */
.lhb-button--primary,
.lhb-button--secondary {
  padding: 12px 16px;
  border: var(--lhb-line-width-medium) solid var(--lhb-line-color);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--lhb-font-display);
  font-size: var(--lhb-type-ui-size);
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}
.lhb-button--primary {
  border-color: var(--lila);
  background: var(--lila);
  color: var(--weiss);
}
.lhb-button--secondary {
  background: var(--weiss);
  color: var(--schwarz);
}
.lhb-button--primary:hover,
.lhb-button--secondary:hover {
  border-color: var(--schwarz);
  background: var(--schwarz);
  color: var(--weiss);
}
.lhb-button > :where(i, svg) {
  line-height: 1;
}


/* v291: Mehrzeilige Buttonlabels verwenden die globale Textzeilenhöhe 1.2. */

/* Outline-Aktion v1.0 – ersetzt lokale .lhb-btn-Geometrien. */
.lhb-button--outline{
  padding:12px 14px;
  border:var(--lhb-line-width-medium) solid var(--lhb-line-color);
  background:var(--weiss);
  color:var(--schwarz);
  font-family:var(--lhb-font-display);
  font-size:var(--lhb-type-ui-size);
  font-weight:800;
  letter-spacing:.12em;
  line-height:1.2;
  text-transform:uppercase;
  text-decoration:none;
}
.lhb-button--outline:hover{background:var(--schwarz);color:var(--weiss)}
.lhb-button--on-accent{
  border-color:var(--weiss);
  background:transparent;
  color:var(--weiss);
}
.lhb-button--on-accent:hover{background:var(--weiss);color:var(--lila)}

/* v325: Globale Gleichbreitenregel. Die Runtime erkennt automatisch, wenn
   mehrere direkte Buttons desselben Aktionscontainers untereinander stehen.
   Der alte Opt-in bleibt nur aus Kompatibilitaetsgruenden zulaessig. */
.lhb-button-group--equal > .lhb-button,
.lhb-button-group--auto-equal > .lhb-button {
  width: var(--lhb-button-group-equal-width, auto);
}

/* v364: Einzeilige Primaer-/Sekundaeraktionen folgen auf Desktop exakt dem
   zentralen Aktionshoehen-Token. `min-height` allein liess je nach Elementtyp
   und Kontext unterschiedliche reale Hoehen zu. Auf kleinen Viewports bleibt
   die Hoehe inhaltsgetrieben, damit lange Labels sicher umbrechen koennen. */
@media (min-width: 521px) {
  .lhb-button--primary,
  .lhb-button--secondary {
    height: var(--lhb-action-height);
    min-height: var(--lhb-action-height);
    padding-top: 0;
    padding-bottom: 0;
  }
}