@charset "utf-8";
/*--------------------------------------
  Variablen für Buttons
  - Erlauben zentrale Steuerung von Farben, Padding, Radius, Schriftgröße etc.
  - Ideal für Themes und einfache Anpassung
  - Verwendet globale Farben aus standard.css
  
  VERSION: 2.0
  DATUM: 2025-10-04
  ÄNDERUNGEN:
  - Alle Button-Farben referenzieren globale Variablen aus standard.css
  - Breakpoint auf 540px vereinheitlicht
  - Transitions nutzen globale Transition-Variablen
--------------------------------------*/
:root {
  /* Primärfarben aus standard.css */
  --btn-primary-bg: var(--color-primary, #00b7ea);
  --btn-primary-hover: var(--color-primary-hover, #0095c6);
  --btn-primary-active: var(--color-primary-active, #007aa3);

  --btn-secondary-bg: var(--color-secondary, #6c757d);
  --btn-secondary-hover: var(--color-secondary-hover, #5a6268);
  --btn-secondary-active: var(--color-secondary-active, #495057);

  --btn-success-bg: var(--color-success, #28a745);
  --btn-success-hover: var(--color-success-hover, #218838);
  --btn-success-active: var(--color-success-active, #1e7e34);

  --btn-danger-bg: var(--color-danger, #dc3545);
  --btn-danger-hover: var(--color-danger-hover, #c82333);
  --btn-danger-active: var(--color-danger-active, #bd2130);

  --btn-padding-vertical: 12px;
  --btn-padding-horizontal: 24px;
  --btn-font-size: 17px;
  --btn-border-radius: 6px;
  --btn-transition: background-color var(--transition-standard, 0.3s ease), transform var(--transition-transform, 0.1s ease);
}

/*--------------------------------------
  Basis-Reset für Links und Buttons
--------------------------------------*/
.button a,
button {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-sans, Verdana, Arial, Helvetica, sans-serif);
  font-weight: bold;
  cursor: pointer;
  border: none;
  padding: var(--btn-padding-vertical) var(--btn-padding-horizontal);
  font-size: var(--btn-font-size);
  line-height: 1.2;
  box-sizing: border-box;
  border-radius: var(--btn-border-radius);
  white-space: nowrap;
  transition: var(--btn-transition);
  color: var(--color-text-light, #fff);
  margin: 5px;
}

/*--------------------------------------
  Primary-Button
--------------------------------------*/
.button a.primary,
button.primary { background-color: var(--btn-primary-bg); }

.button a.primary:hover,
button.primary:hover {
  background-color: var(--btn-primary-hover);
  transform: scale(1.03);
}

.button a.primary:active,
button.primary:active {
  background-color: var(--btn-primary-active);
  transform: scale(0.98);
}

/*--------------------------------------
  Secondary-Button
--------------------------------------*/
.button a.secondary,
button.secondary { background-color: var(--btn-secondary-bg); }

.button a.secondary:hover,
button.secondary:hover {
  background-color: var(--btn-secondary-hover);
  transform: scale(1.03);
}

.button a.secondary:active,
button.secondary:active {
  background-color: var(--btn-secondary-active);
  transform: scale(0.98);
}

/*--------------------------------------
  Success-Button
--------------------------------------*/
.button a.success,
button.success { background-color: var(--btn-success-bg); }

.button a.success:hover,
button.success:hover {
  background-color: var(--btn-success-hover);
  transform: scale(1.03);
}

.button a.success:active,
button.success:active {
  background-color: var(--btn-success-active);
  transform: scale(0.98);
}

/*--------------------------------------
  Danger-Button
--------------------------------------*/
.button a.danger,
button.danger { background-color: var(--btn-danger-bg); }

.button a.danger:hover,
button.danger:hover {
  background-color: var(--btn-danger-hover);
  transform: scale(1.03);
}

.button a.danger:active,
button.danger:active {
  background-color: var(--btn-danger-active);
  transform: scale(0.98);
}

/*--------------------------------------
  Responsive Anpassungen
  HINWEIS: 540px entspricht var(--breakpoint-mobile)
--------------------------------------*/
@media (max-width: 540px) {
  .button a,
  button {
    font-size: calc(var(--btn-font-size) - 2px);
    padding: 10px 20px;
  }
}

@media (min-width: 541px) and (max-width: 768px) {
  .button a,
  button {
    font-size: var(--btn-font-size);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .button a,
  button {
    font-size: var(--btn-font-size);
  }
}

@media (min-width: 1025px) {
  .button a,
  button {
    font-size: calc(var(--btn-font-size) + 1px);
  }
}

/*--------------------------------------
  Block-Level Buttons
--------------------------------------*/
.button.block a,
button.block {
  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
}