/**
 * UNDERDOCK - 3D Button Library
 * 
 * Spezifikation:
 * - 2 Größen: Klein (btn--sm) & Groß (btn--big / btn--lg)
 * - 2 Farbvarianten: Hell (btn--light / Standard) & Dunkel (btn--dark)
 * - 3D Effekt: Hover schiebt die obere Ebene um 4px nach oben, darunter liegt die Füllfarbe der Outline
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  
  /* Auf Hug gestellt mit min-width 120px */
  width: fit-content;
  min-width: 120px;
  
  /* Abgerundete Ecken */
  border-radius: 18px;
  border: 1px solid transparent;
  
  /* Geschmeidiger 3D Übergang */
  transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.15s cubic-bezier(0.2, 0, 0, 1);
  position: relative;
  z-index: 5;
}

/* ====================================================
   1. GRÖSSEN (SMALL & BIG)
   ==================================================== */

/* Kleiner Button: Vollständig abgerundet (Pill-Form), Padding 9px oben/unten, 25px links/rechts */
.btn--sm {
  padding: 9px 25px;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  border-radius: 9999px;
}

/* Großer Button: Fester 18px Radius, Padding 18px oben/unten, 40px links/rechts */
.btn--big,
.btn--lg {
  padding: 18px 40px;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 18px;
}

/* ====================================================
   2. FARB- & 3D-VARIANTEN
   ==================================================== */

/* Hell (Light): Hauptfarbe UD White, Text UD Black, 1px Outline #DEDAD1 */
.btn--light,
.btn--white {
  background-color: var(--ud-white);
  color: var(--ud-black);
  border-color: var(--btn-outline-light);
  box-shadow: 0 0 0 var(--btn-outline-light);
}

.btn--light:hover,
.btn--white:hover {
  transform: translateY(-4px);
  /* 3D-Fläche darunter mit der Füllfarbe der Outline */
  box-shadow: 0 4px 0 var(--btn-outline-light);
}

.btn--light:active,
.btn--white:active {
  transform: translateY(0);
  box-shadow: 0 0 0 var(--btn-outline-light);
}

/* Dunkel (Dark): Hauptfarbe UD Black, Text UD White, 1px Outline & 3D-Fläche #4C4C4C */
.btn--dark {
  background-color: var(--ud-black);
  color: var(--ud-white);
  border-color: var(--btn-outline-dark);
  box-shadow: 0 0 0 var(--btn-outline-dark);
}

.btn--dark:hover {
  transform: translateY(-4px);
  /* 3D-Fläche darunter mit der Füllfarbe der Outline */
  box-shadow: 0 4px 0 var(--btn-outline-dark);
}

.btn--dark:active {
  transform: translateY(0);
  box-shadow: 0 0 0 var(--btn-outline-dark);
}