/* ════════════════════════════════════════════════════════════════════════
   ONO-DS Molecule · button-canonical (Atomic-Design)
   
   ATOMS:
     .btn-icon    — flat SVG icon-wrapper (16-22px)
     .btn-label   — text content
   
   MOLECULE VARIANTS:
     .btn                  — Primary (orange-fill, weiß-text)
     .btn-ghost            — Secondary (orange-outlined, var(--fg)-text)
     .btn-icon-only        — Round icon-button (44px touch-target)
     .btn--lg              — Large variant
     .btn--sm              — Small variant
   
   ICON-COMPOSITION:
     <a class="btn"><span class="btn-label">spenden</span><span class="btn-icon">→</span></a>
     <a class="btn btn-ghost"><span class="btn-icon"><svg.../></span><span class="btn-label">filter</span></a>
   
   HEILIGE REGELN: orange-fill primary / orange-outlined ghost
   Schwarz hover (light) / weiß hover (dark) — 100% schwarz/weiß, kein grau
   ════════════════════════════════════════════════════════════════════════ */

/* ───────── BASE ATOM ───────── */
.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  corner-shape: superellipse;
  -webkit-corner-shape: superellipse;
  font-family: "Haffer", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "ss03" 1, "ss04" 1, "ss05" 1, "tnum" 1, "zero" 1;
  font-size: 15px;
  font-weight: 618;
  text-transform: lowercase;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  min-height: 44px;
}

/* ───────── PRIMARY · orange-fill ───────── */
.btn:not(.btn-ghost):not(.btn-secondary) {
  background: var(--orange, #FD9501);
  color: #fff;
  border: 1.5px solid var(--orange, #FD9501);
}
.btn:not(.btn-ghost):not(.btn-secondary):hover,
.btn-primary:hover,
button.btn:hover,
a.btn:not(.btn-ghost):not(.btn-secondary):hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
[data-theme="dark"] .btn:not(.btn-ghost):not(.btn-secondary):hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] button.btn:hover,
[data-theme="dark"] a.btn:not(.btn-ghost):not(.btn-secondary):hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* ───────── GHOST · orange-outlined ───────── */
.btn-ghost,
.btn-secondary {
  background: transparent !important;
  color: var(--fg) !important;
  border: 1.5px solid var(--orange, #FD9501) !important;
}
.btn-ghost:hover,
.btn-secondary:hover {
  background: var(--orange, #FD9501) !important;
  color: #fff !important;
  border-color: var(--orange, #FD9501) !important;
}

/* ───────── ICON-ATOMS ───────── */
.btn-icon,
.btn .btn-icon,
.btn-ghost .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.btn-icon svg,
.btn .btn-icon svg,
.btn-ghost .btn-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn .btn-label,
.btn-ghost .btn-label {
  display: inline-block;
}

/* ───────── ICON-ONLY variant (44px touch-target) ───────── */
.btn-icon-only {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--orange, #FD9501);
  color: var(--fg);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-icon-only:hover {
  background: var(--orange, #FD9501) !important;
  color: #fff !important;
  border-color: var(--orange, #FD9501) !important;
}
.btn-icon-only svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

/* ───────── SIZE variants ───────── */
.btn--lg {
  padding: 16px 32px;
  font-size: 17px;
  min-height: 56px;
}
.btn--sm {
  padding: 8px 16px;
  font-size: 13px;
  min-height: 36px;
  gap: 6px;
}
.btn--sm .btn-icon {
  width: 14px;
  height: 14px;
}

/* ───────── DISABLED state ───────── */
.btn:disabled,
.btn[aria-disabled="true"],
.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
  opacity: 0.382;
  pointer-events: none;
  cursor: not-allowed;
}

/* ───────── FOCUS-RING (canonical, kein default-outline) ───────── */
.btn:focus,
.btn-ghost:focus,
.btn-icon-only:focus {
  outline: none;
}
.btn:focus-visible,
.btn-ghost:focus-visible,
.btn-icon-only:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange, #FD9501) 50%, transparent);
}

/* ───────── PHOTO-CONTEXT override ───────── */
[data-btn-context="photo"] .btn:hover,
[data-btn-context="photo"] a.btn:hover {
  background: rgba(0,0,0,0.618) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ───────── Global a:hover · excludes interaktive elements ───────── */
a:not([class*="btn"]):not([class*="pill"]):not([class*="ono-headroom-nav"]):not([class*="phi-pill-toggle"]):not([class*="counter"]):not([class*="tab"]):hover {
  opacity: 0.618;
  transition: opacity 0.15s ease;
}