/* ============================================================
   kaffeekasse.css – Kaffeekasse (PayPal.me) für ArGla Tools
   Nutzt die Variablen aus style.css (:root)
   ============================================================ */

.coffee-section .container { position: relative; z-index: 2; }

.coffee-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--clr-surface2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  align-items: center;
  box-shadow: var(--shadow-card);
}

.coffee-cup {
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(183, 255, 0, 0.06);
  border: 1px solid rgba(183, 255, 0, 0.35);
  color: var(--clr-accent);
  position: relative;
}

.coffee-cup-svg {
  width: 76px;
  height: 76px;
  overflow: visible;
}

/* Dampf-Animation (Line-Style) */
.coffee-cup-svg .steam {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: coffeeSteam 2.8s ease-in-out infinite;
}
.coffee-cup-svg .steam-2 { animation-delay: .9s; }
.coffee-cup-svg .steam-3 { animation-delay: 1.8s; }

@keyframes coffeeSteam {
  0%   { transform: translateY(5px) scaleY(.7); opacity: 0; }
  40%  { opacity: .8; }
  100% { transform: translateY(-6px) scaleY(1.05); opacity: 0; }
}

.coffee-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.coffee-body > p {
  color: var(--clr-text-muted);
  margin-bottom: var(--space-6);
}

.coffee-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.coffee-chip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: .55rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  background: transparent;
  color: var(--clr-text);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
.coffee-chip:hover { border-color: rgba(183, 255, 0, .5); }
.coffee-chip[aria-pressed="true"] {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: #000;
}
.coffee-chip small { font-weight: 400; opacity: .75; margin-left: .25rem; }

.coffee-custom {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding-right: .8rem;
  transition: border-color var(--duration) var(--ease);
}
.coffee-custom:focus-within { border-color: var(--clr-accent); }
.coffee-custom input {
  width: 5.5rem;
  background: transparent;
  border: 0;
  color: var(--clr-text);
  font: inherit;
  font-weight: 600;
  padding: .55rem .4rem .55rem .9rem;
  outline: none;
  -moz-appearance: textfield;
}
.coffee-custom input::-webkit-outer-spin-button,
.coffee-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.coffee-custom span { color: var(--clr-text-muted); }

.coffee-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.coffee-note {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  margin-top: var(--space-4);
  line-height: 1.6;
}
.coffee-note a { color: var(--clr-accent); }

/* Kleiner Kaffee-Link im Footer */
.footer-coffee { color: var(--clr-accent) !important; }

/* Kleine Line-Tasse in Hero-Button und Footer-Link */
.icon-cup {
  width: 1.25em;
  height: 1.25em;
  margin-right: .45em;
  vertical-align: -0.28em;
  color: var(--clr-accent);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .coffee-card { grid-template-columns: 1fr; text-align: center; }
  .coffee-cup { margin: 0 auto; }
  .coffee-amounts, .coffee-actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .coffee-cup-svg .steam { animation: none; opacity: .6; }
}

/* ── Zahlart-Tabs (PayPal / Wero) ── */
.coffee-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.coffee-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  padding: .45rem 1rem; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--clr-text-muted); cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.coffee-tab:hover { color: var(--clr-text); }
.coffee-tab[aria-selected="true"] { background: var(--clr-surface); color: var(--clr-text); box-shadow: inset 0 0 0 1px rgba(183,255,0,.35); }
.wero-dot {
  display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: var(--clr-accent); color: #000; font-size: .7rem; font-weight: 800;
}

/* ── Wero-Panel ── */
.coffee-wero[hidden], .coffee-actions[hidden] { display: none; }
.wero-address { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.wero-label { color: var(--clr-text-muted); font-size: var(--fs-sm); }
.wero-address code {
  font-size: 1rem; font-weight: 600; color: var(--clr-accent);
  background: var(--clr-surface); border: 1px solid var(--clr-border);
  padding: .55rem .9rem; border-radius: var(--radius-md); user-select: all; word-break: break-all;
}
.wero-steps {
  margin: var(--space-4) 0 0 1.1rem; color: var(--clr-text-muted);
  font-size: var(--fs-sm); line-height: 1.8;
}
.wero-steps strong { color: var(--clr-text); }

@media (max-width: 600px) {
  .wero-address { justify-content: center; }
  .wero-steps { text-align: left; display: inline-block; }
}