/* org.das-kartell.donations – CSS */
/* -------------------------------------------------------------- */
/* Grundsetup / Variablen */
.donationBox{
  /* Brand */
  --brand-orange:#E77E23;
  --brand-orange-dark:#D6701F;

  /* PayPal / Chips / Oberflächen */
  --paypal-bg:#1a1d21;           /* von dir vorgegeben */
  --paypal-bg-hover:#22262c;
  --paypal-border:#2a2f34;
  --paypal-border-hover:#313844;
  --paypal-text:#fff;

  --chip-bg:var(--paypal-bg);    /* Chips = gleiche Fläche wie PayPal */
  --chip-border:#2b323d;

  /* Text- & Rahmenfarben */
  --sidebar-border:#39414D;
  --sidebar-text:#D1D2D3;
  --muted:#98a0ab;

  /* Progress/Slider */
  --track-bg:#343b45;
  --slider-fill:var(--brand-orange);
  --slider-track:var(--track-bg);
  --slider-thumb:#fff;

  /* Abstände & Größen (symmetrisch) */
  --row-pad:.15rem;
  --gap-after-intro:.75rem;
  --gap-before-progress:.6rem;
  --expl-top-gap:.55rem;
  --progress-height:14px;

  --gap-before-slider:1.15rem;   /* ↑ Abstand zwischen Laufzeit-Text und Slider-Block */
  --gap-after-slider:0rem;       /* nicht nötig, wir steuern über Actions */
  --gap-actions:1.15rem;         /* ↓ Abstand zwischen Slider-Block und Buttons */
  --actions-gap:.5rem;
  --button-min-height:30px;

  color:var(--sidebar-text);
  font-size:.95rem;
}

/* Intro */
.donationBox .dbx-intro{
  margin:0 0 var(--gap-after-intro);
  font-size:.92rem; line-height:1.4; opacity:.85;
}

/* Werte-Zeilen */
.donationBox .dbx-rows{ display:flex; flex-direction:column; gap:.35rem; margin-top:.25rem; }
.donationBox .dbx-row{ display:flex; justify-content:space-between; align-items:baseline; padding:var(--row-pad) 0; }
.donationBox .dbx-row span{ opacity:.85; }
.donationBox .dbx-row strong{
  font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  padding:.18rem .45rem;
  border-radius:6px;            /* leicht, nicht pillenförmig */
}

/* Trenner */
.donationBox .dbx-sep{ height:1px; background:rgba(255,255,255,.06); margin:.5rem 0 0; border-radius:1px; }

/* Progress – FLAT */
.donationBox .dbx-progress{ margin:var(--gap-before-progress) 0 0; }
.donationBox .dbx-progress__track{
  position:relative; height:var(--progress-height);
  border:1px solid var(--sidebar-border);
  border-radius:8px;
  background:var(--track-bg);
  overflow:hidden;
  box-shadow:none;               /* flach */
}
.donationBox .dbx-progress__fill{
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--brand-orange);
  box-shadow:none;               /* flach */
}
.donationBox .dbx-progress__label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.70rem; font-weight:600; color:rgba(255,255,255,.82);
  text-transform:uppercase; letter-spacing:.04em;
  pointer-events:none;
}
/* Laufzeit-Hinweis unter dem Balken – wie Eyebrow */
.donationBox .dbx-expl{
  margin:var(--expl-top-gap) 0 0;
  font-size:.72rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; text-align:center;
}

/* Slider-Block (symmetrischer Raum) */
.donationBox .dbx-slider{
  position:relative;
  margin: var(--gap-before-slider) 0 var(--gap-after-slider);
  display:flex; flex-direction:column; gap:.65rem;
}
.donationBox .dbx-slider-head{ display:block; }
.donationBox .dbx-slider-title{
  font-weight:700; white-space:nowrap;
}
.donationBox .dbx-slider-row{ display:flex; flex-direction:column; gap:.45rem; }
.donationBox .dbx-eyebrow{            /* BETRAG (EINMALIG) */
  font-size:.72rem; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}
.donationBox .dbx-slider-amount{ font-weight:600; font-variant-numeric:tabular-nums; }

/* Range (FLAT) */
.donationBox .dbx-range{ -webkit-appearance:none; width:100%; height:10px; border-radius:8px; background:var(--slider-track); outline:none; }
.donationBox .dbx-range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--slider-thumb); border:1px solid var(--sidebar-border); box-shadow:0 1px 2px rgba(0,0,0,.35); cursor:pointer; margin-top:-4px; }
.donationBox .dbx-range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--slider-thumb); border:1px solid var(--sidebar-border); box-shadow:0 1px 2px rgba(0,0,0,.35); cursor:pointer; }
/* Füllstand (WebKit via --_fill) */
.donationBox .dbx-range::-webkit-slider-runnable-track{
  height:10px; border-radius:8px;
  background:linear-gradient(to right, var(--slider-fill) var(--_fill,0%), var(--slider-track) var(--_fill,0%));
}
.donationBox .dbx-range::-moz-range-track{ height:10px; border-radius:8px; background:var(--slider-track); }
.donationBox .dbx-range::-moz-range-progress{ height:10px; border-radius:8px; background:var(--slider-fill); }

/* Logo/Badge (deaktiviert, aber Styles bleiben) */
.donationBox .dbx-logoBadge{ position:absolute; top:0; right:0; height:44px; display:inline-flex; align-items:flex-start; transform:translateX(10px); }
.donationBox .dbx-logoImg{ display:block; height:100%; width:auto; object-fit:contain; }
.donationBox .dbx-badge{
  position:absolute; right:30px; top:-10px; width:22px; height:22px; border-radius:9999px;
  background:var(--track-bg); border:2px solid var(--sidebar-border); color:var(--sidebar-text); font-weight:700; font-size:.75rem;
  display:flex; align-items:center; justify-content:center; transform:translate(1px,-1px);
}

/* Buttons */
.donationBox .dbx-actions{ margin: var(--gap-actions) 0 0; display:flex; gap:.5rem; align-items:stretch; }
.donationBox .dbx-article, .donationBox .dbx-paypal{ flex:1 1 0; display:flex; flex-direction:column; gap:.2rem; }
.donationBox .dbx-btn{ display:flex; justify-content:center; align-items:center; min-height:var(--button-min-height); padding:0 .7rem; border-radius:6px; font-weight:600; line-height:1; white-space:nowrap; letter-spacing:-0.1px; transition:background .15s, border-color .15s, color .15s; }
.donationBox .dbx-btn fa-icon, .donationBox .dbx-btn fa-brand{ margin-right:.4rem; }
.donationBox .dbx-btn, .donationBox .dbx-btn:link, .donationBox .dbx-btn:visited{ text-decoration:none; }

/* Artikel (Brand) */
.donationBox .dbx-btn--brand,
.donationBox .dbx-btn--brand:link,
.donationBox .dbx-btn--brand:visited{
  border:1px solid var(--brand-orange);
  background:var(--brand-orange);
  color:#fff;
}
.donationBox .dbx-btn--brand:hover,
.donationBox .dbx-btn--brand:focus{
  background:var(--brand-orange-dark);
  border-color:var(--brand-orange-dark);
  color:#fff;
}

/* PayPal */
.donationBox .dbx-btn--paypal,
.donationBox .dbx-btn--paypal:link,
.donationBox .dbx-btn--paypal:visited{
  background:var(--paypal-bg);
  border:1px solid var(--paypal-border);
  color:var(--paypal-text);
}
.donationBox .dbx-btn--paypal:hover,
.donationBox .dbx-btn--paypal:focus{
  background:var(--paypal-bg-hover);
  border-color:var(--paypal-border-hover);
  color:#fff;
}
.donationBox .dbx-btn--paypal:focus-visible{ outline:2px solid rgba(255,255,255,.25); outline-offset:2px; }

/* Hinweis unter PayPal */
.donationBox .dbx-paypal-note{ font-size:.76rem; opacity:.75; text-align:center; }

/* Responsive */
@media (max-width: 380px){
  .donationBox .dbx-slider-title{ white-space:normal; }
  .donationBox .dbx-logoBadge{ height:34px; }
}

/* Explizite Spacing-Overrides (falls andere Styles reinfunken) */
.donationBox .dbx-slider{
  margin-top:var(--gap-before-slider) !important;
  margin-bottom:0 !important;
}
.donationBox .dbx-actions{
  margin-top:var(--gap-actions) !important;
}