/* ==========================================================================
   DMW-Performance — Buttons
   ==========================================================================
   Button system: base + variants (primary, secondary, outline, ghost),
   sizes, and modifiers (icon, block, disabled).
   ========================================================================== */

/* ==========================================================================
   Base button
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 2px solid transparent;
  background-color: transparent;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-fast),
    box-shadow var(--transition-base);
  vertical-align: middle;
}

.btn:hover,
.btn:focus-visible {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Variant: Primary
   Solid accent (navy) → hover transitions to gold
   ========================================================================== */
.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Dark mode: navy btn-primary is invisible on dark bg → use gold */
[data-theme="dark"] .btn-primary {
  background-color: var(--color-primary);
  color: var(--color-accent);
  border-color: var(--color-primary);
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus-visible {
  background-color: var(--color-primary-dark);
  color: var(--color-accent);
  border-color: var(--color-primary-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-accent);
    border-color: var(--color-primary);
  }
  :root:not([data-theme="light"]) .btn-primary:hover,
  :root:not([data-theme="light"]) .btn-primary:focus-visible {
    background-color: var(--color-primary-dark);
    color: var(--color-accent);
    border-color: var(--color-primary-dark);
  }
}

/* Gleiche Begruendung wie im Dunkelmodus, nur eine Ebene tiefer: Der Hero der
   Startseite ist auch im hellen Modus ein fast schwarzes Bild. Der navyfarbene
   Knopf verschwand darauf — ausgerechnet der Termin-Knopf, also das Wichtigste
   im ganzen Bereich. In Gold ist er der hellste Punkt und zieht den Blick.
   Steht bewusst NACH den Dunkelmodus-Regeln, damit er in allen vier
   Kombinationen aus Modus und Bildschirmbreite dasselbe Gold zeigt. */
.hero .btn-primary {
  background-color: var(--color-primary);
  color: var(--color-accent);
  border-color: var(--color-primary);
}

.hero .btn-primary:hover,
.hero .btn-primary:focus-visible {
  background-color: var(--color-primary-dark);
  color: var(--color-accent);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Variant: Secondary
   Solid gold → hover darker gold
   ========================================================================== */
.btn-secondary {
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-primary-text);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Variant: Outline
   Transparent with accent border → hover fills with accent
   ========================================================================== */
.btn-outline {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

/* Dark-mode: navy border invisible on dark bg → use gold border */
[data-theme="dark"] .btn-outline {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn-outline:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-accent);
  border-color: var(--color-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-outline {
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
  :root:not([data-theme="light"]) .btn-outline:hover,
  :root:not([data-theme="light"]) .btn-outline:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-accent);
    border-color: var(--color-primary);
  }
}

/* ==========================================================================
   Variant: Ghost
   No background, no border → hover surfaces a subtle bg
   ========================================================================== */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: var(--color-bg-subtle);
  color: var(--color-text);
}

/* ==========================================================================
   Disabled state
   ========================================================================== */
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* ==========================================================================
   Sizes
   ========================================================================== */
.btn--small {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.btn--large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

/* ==========================================================================
   Modifiers
   ========================================================================== */

/* Icon-only square button */
.btn--icon {
  padding: var(--space-3);
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
}

.btn--icon.btn--small {
  width: 36px;
  height: 36px;
  padding: var(--space-2);
}

.btn--icon.btn--large {
  width: 52px;
  height: 52px;
  padding: var(--space-4);
}

/* Full width */
.btn--block {
  display: flex;
  width: 100%;
}

/* Group of buttons */
.btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Icon inside button */
.btn .fa,
.btn .fas,
.btn .far,
.btn .fab,
.btn svg {
  font-size: 0.95em;
  flex-shrink: 0;
}

/* Auf schmalen Bildschirmen darf die Beschriftung umbrechen.
   .btn traegt white-space: nowrap, damit kurze Beschriftungen nicht mitten im
   Wort umklappen. Bei langen Beschriftungen wie "Alle Google-Bewertungen
   ansehen" wird der Knopf dadurch aber breiter als das Telefon — auf einem
   320px-Geraet liess sich die Startseite deshalb seitlich schieben.
   Unterhalb von 480px wiegt ein zweizeiliger Knopf leichter als eine Seite,
   die verrutscht. */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    text-wrap: balance;
  }
}