/* =========================================================
   BUTTONS – FINAL EDITORIAL SYSTEM
   passend zu Index / Article / Portal
========================================================= */

/* ---------------------------------------------------------
   Base
--------------------------------------------------------- */
.btn{
  border-radius:12px;
  font-weight:700;
  line-height:1.2;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
  opacity:1;
}

.btn:active{
  transform:translateY(0);
}

.btn:focus-visible{
  outline:0;
  box-shadow:
    var(--ui-focus-ring),
    0 8px 20px rgba(17,24,39,.10) !important;
}

body.dark .btn:focus-visible{
  box-shadow:
    var(--ui-focus-ring-dark),
    0 12px 24px rgba(0,0,0,.30) !important;
}

.btn i{
  width:1.1em;
  text-align:center;
}

/* ---------------------------------------------------------
   Sizes
--------------------------------------------------------- */
.btn-sm{
  min-height:36px;
  padding:.46rem .78rem !important;
  border-radius:10px !important;
  font-size:.9rem;
  font-weight:700;
}

.btn-lg{
  min-height:50px;
  padding:.82rem 1.2rem !important;
  border-radius:14px !important;
}

/* ---------------------------------------------------------
   Primary
--------------------------------------------------------- */
.btn-primary{
  border:1px solid rgba(17,24,39,.12) !important;
  color:#fff !important;
  background:linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  box-shadow:0 8px 18px rgba(17,24,39,.16);
}

.btn-primary:hover,
.btn-primary:focus{
  color:#fff !important;
  background:linear-gradient(135deg, #111827 0%, #0b1220 100%) !important;
  box-shadow:0 12px 24px rgba(17,24,39,.22);
}

.btn-primary:active{
  color:#fff !important;
  background:linear-gradient(135deg, #0f172a 0%, #0b1220 100%) !important;
  box-shadow:0 6px 14px rgba(17,24,39,.18);
}

body.dark .btn-primary{
  color:#f8fafc !important;
  background:linear-gradient(135deg, #273449 0%, #1b2638 100%) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}

body.dark .btn-primary:hover,
body.dark .btn-primary:focus{
  background:linear-gradient(135deg, #32445f 0%, #223147 100%) !important;
  box-shadow:0 16px 30px rgba(0,0,0,.34);
}

body.dark .btn-primary:active{
  background:linear-gradient(135deg, #223147 0%, #182334 100%) !important;
}

/* ---------------------------------------------------------
   Secondary
--------------------------------------------------------- */
.btn-secondary{
  border:1px solid rgba(181,135,53,.14) !important;
  color:#2f271f !important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.70),
    rgba(240,228,200,.42)
  ) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.btn-secondary:hover,
.btn-secondary:focus{
  color:#2b241c !important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.90),
    rgba(240,228,200,.60)
  ) !important;
  border-color:rgba(181,135,53,.24) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.btn-secondary:active{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.82),
    rgba(240,228,200,.52)
  ) !important;
}

body.dark .btn-secondary{
  color:#e7d3a5 !important;
  border-color:rgba(181,135,53,.24) !important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(181,135,53,.12)
  ) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}

body.dark .btn-secondary:hover,
body.dark .btn-secondary:focus{
  color:#fff !important;
  background:rgba(181,135,53,.18) !important;
  border-color:rgba(181,135,53,.30) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.30);
}

/* ---------------------------------------------------------
   Outline Secondary
--------------------------------------------------------- */
.btn-outline-secondary{
  color:#2f271f !important;
  border:1px solid rgba(181,135,53,.14) !important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.65),
    rgba(240,228,200,.35)
  ) !important;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  color:#2b241c !important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.85),
    rgba(240,228,200,.55)
  ) !important;
  border-color:rgba(181,135,53,.24) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.btn-outline-secondary:active{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.78),
    rgba(240,228,200,.48)
  ) !important;
}

body.dark .btn-outline-secondary{
  color:#e7d3a5 !important;
  border-color:rgba(181,135,53,.25) !important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(181,135,53,.12)
  ) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}

body.dark .btn-outline-secondary:hover,
body.dark .btn-outline-secondary:focus{
  background:rgba(181,135,53,.18) !important;
  border-color:rgba(181,135,53,.30) !important;
  color:#fff !important;
  box-shadow:0 14px 28px rgba(0,0,0,.30);
}

body.dark .btn-outline-secondary:active{
  background:rgba(181,135,53,.14) !important;
}

/* ---------------------------------------------------------
   Outline Primary
--------------------------------------------------------- */
.btn-outline-primary{
  color:#1f2937 !important;
  border:1px solid rgba(17,24,39,.14) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus{
  color:#111827 !important;
  border-color:rgba(17,24,39,.22) !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.btn-outline-primary:active{
  background:rgba(255,255,255,.90) !important;
}

body.dark .btn-outline-primary{
  color:#e5e7eb !important;
  border-color:rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.06) !important;
}

body.dark .btn-outline-primary:hover,
body.dark .btn-outline-primary:focus{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.20) !important;
}

body.dark .btn-outline-primary:active{
  background:rgba(255,255,255,.08) !important;
}

/* ---------------------------------------------------------
   Outline Dark
--------------------------------------------------------- */
.btn-outline-dark{
  color:#111827 !important;
  border:1px solid rgba(17,24,39,.14) !important;
  background:rgba(255,255,255,.76) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus{
  color:#111827 !important;
  border-color:rgba(17,24,39,.22) !important;
  background:rgba(255,255,255,.95) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

body.dark .btn-outline-dark{
  color:#e5e7eb !important;
  border-color:rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.06) !important;
}

body.dark .btn-outline-dark:hover,
body.dark .btn-outline-dark:focus{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.20) !important;
}

/* ---------------------------------------------------------
   Outline Danger
--------------------------------------------------------- */
.btn-outline-danger{
  color:#9f1239 !important;
  border:1px solid rgba(159,18,57,.18) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus{
  color:#7f1d1d !important;
  border-color:rgba(159,18,57,.26) !important;
  background:rgba(255,245,247,.96) !important;
  box-shadow:0 8px 18px rgba(159,18,57,.08);
}

body.dark .btn-outline-danger{
  color:#fda4af !important;
  border-color:rgba(253,164,175,.18) !important;
  background:rgba(255,255,255,.05) !important;
}

body.dark .btn-outline-danger:hover,
body.dark .btn-outline-danger:focus{
  background:rgba(253,164,175,.08) !important;
  border-color:rgba(253,164,175,.28) !important;
}

/* ---------------------------------------------------------
   Dark solid button
--------------------------------------------------------- */
.btn-dark{
  border:1px solid rgba(17,24,39,.12) !important;
  color:#fff !important;
  background:linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  box-shadow:0 8px 18px rgba(17,24,39,.14);
}

.btn-dark:hover,
.btn-dark:focus{
  color:#fff !important;
  background:linear-gradient(135deg, #111827 0%, #0b1220 100%) !important;
  box-shadow:0 12px 24px rgba(17,24,39,.20);
}

.btn-dark:active{
  background:linear-gradient(135deg, #0f172a 0%, #0b1220 100%) !important;
}

body.dark .btn-dark{
  background:linear-gradient(135deg, #32445f 0%, #223147 100%) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.30);
}

body.dark .btn-dark:hover,
body.dark .btn-dark:focus{
  background:linear-gradient(135deg, #3b516f 0%, #2a3c55 100%) !important;
}

/* ---------------------------------------------------------
   Utility / icon buttons
--------------------------------------------------------- */
.header-icon-btn,
.site-footer .btn.btn-outline-secondary.btn-sm,
.sidebar-sticky .btn.btn-outline-secondary.btn-sm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ---------------------------------------------------------
   Full-width action buttons
--------------------------------------------------------- */
.btn.w-100{
  justify-content:center;
}

/* ---------------------------------------------------------
   Disabled
--------------------------------------------------------- */
.btn:disabled,
.btn.disabled{
  transform:none !important;
  opacity:.62 !important;
  box-shadow:none !important;
  cursor:not-allowed;
}

/* ---------------------------------------------------------
   Group harmony
--------------------------------------------------------- */
.d-flex.gap-2 .btn,
.d-flex.flex-wrap.gap-2 .btn{
  white-space:nowrap;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width:576px){
  .btn-sm{
    min-height:34px;
    padding:.44rem .76rem !important;
  }

  .btn{
    border-radius:10px;
  }

  .btn-lg{
    min-height:46px;
    padding:.74rem 1rem !important;
    border-radius:12px !important;
  }
}