/* =====================================================================
   supers.css
   Die Spendenseite, die waehrend der Livestreams laeuft
   (supers/index.php). Angelegt am 23.09.2026.

   Wichtig: An der Seite selbst wurde nichts umgebaut. Dieselben
   Bausteine, dieselbe Reihenfolge, dieselben Klassen, dasselbe
   Verhalten. Nur das Aussehen ist neu.

   Der eine Gedanke dahinter: bisher sahen alle sechs Stufen gleich
   aus, grau mit tuerkisem Rand, und ihre Farbe kam erst nach dem
   Anklicken zum Vorschein. Jetzt traegt jede Stufe ihre Farbe von
   Anfang an. Damit sieht man die Leiter von Weiss bis Gold auf einen
   Blick, und das Ganze glitzert, ohne dass ein Knopf verschoben wurde.

   Der alte Style-Block steht in index.php weiter drin, ist dort aber
   mit if (false) abgeschaltet.
   ===================================================================== */

.supers-container{
  --sp-text:#FFFFFF;
  --sp-leise:#B6C4D4;
  --sp-stumm:#8195A9;
  --sp-linie:rgba(255,255,255,.12);
  --sp-kasse:#00FFFF;

  width:100%;max-width:680px;margin:0 auto;
  padding:clamp(28px,5vw,44px) clamp(18px,4vw,30px) clamp(36px,6vw,56px);
  text-align:left;

  /* Eine ruhige Tafel unter dem Formular, damit es nicht direkt auf
     dem bewegten Seitenverlauf schwimmt. */
  background:linear-gradient(180deg, rgba(10,16,28,.72) 0%, rgba(6,10,18,.82) 100%);
  border:1px solid rgba(0,255,255,.16);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  margin-top:clamp(16px,3vw,32px);
  margin-bottom:clamp(24px,4vw,48px);
}
.supers-container *{box-sizing:border-box;letter-spacing:normal}

.supers-container h1{
  margin:0 0 .5rem;
  font-size:clamp(1.8rem,5.5vw,2.6rem);font-weight:700;line-height:1.1;
  color:var(--sp-text);text-align:left;
  text-shadow:0 2px 20px rgba(0,255,255,.18);
}
.supers-intro{
  font-size:16px;line-height:1.65;color:var(--sp-leise);
  margin:0 0 clamp(22px,4vw,32px);max-width:56ch;text-align:left;
}

/* ================== Ueberschrift der Betragsleiter ================== */
.supers-section-label{
  display:flex;align-items:center;gap:.9rem;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sp-stumm);margin-bottom:14px;text-align:left;
}
.supers-section-label::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, rgba(0,255,255,.3), rgba(0,255,255,0));
}

/* ================== Die sechs Stufen ================== */
.supers-badges{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;
}

.supers-badge{
  --ton:#E8EEF5;
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--ton) 14%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid color-mix(in srgb, var(--ton) 34%, transparent);
  border-radius:14px;
  padding:16px 12px 14px;text-align:center;cursor:pointer;
  transition:transform .2s ease, border-color .25s ease, box-shadow .3s ease, background .25s ease;
}
/* Rueckfall fuer Browser ohne color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .supers-badge{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
}

.supers-badge:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--ton) 65%, transparent);
  box-shadow:0 10px 26px rgba(0,0,0,.45),
             0 0 22px color-mix(in srgb, var(--ton) 30%, transparent);
}

.supers-badge-emoji{
  display:block;font-size:32px;line-height:1;margin-bottom:8px;
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--ton) 55%, transparent));
  transition:transform .25s ease;
}
.supers-badge-label{
  display:block;font-weight:600;font-size:15px;color:var(--sp-text);line-height:1.25;
}
.supers-badge-amount{
  display:block;margin-top:3px;
  font-size:13px;font-weight:600;color:var(--ton);
  text-shadow:0 0 14px color-mix(in srgb, var(--ton) 45%, transparent);
}

/* Die Farbe jeder Stufe. Sie gilt jetzt immer, nicht erst nach dem
   Anklicken. Von Weiss bis Gold wird die Leiter sichtbar. */
.supers-badge[data-glow="white"]  { --ton:#E8EEF5 }
.supers-badge[data-glow="blue"]   { --ton:#8AA8FF }
.supers-badge[data-glow="cyan"]   { --ton:#4EDFF0 }
.supers-badge[data-glow="orange"] { --ton:#FF8A3D }
.supers-badge[data-glow="yellow"] { --ton:#FFCC33 }
.supers-badge[data-glow="gold"]   { --ton:#FFD700 }

/* Ausgewaehlt: kraeftiger Rand, Schein, Haken oben rechts */
.supers-badge.active{
  transform:translateY(-3px);
  border-color:var(--ton);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--ton) 26%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.5),
             0 0 30px color-mix(in srgb, var(--ton) 42%, transparent),
             inset 0 1px 0 rgba(255,255,255,.14);
}
.supers-badge.active .supers-badge-emoji{transform:scale(1.14)}
.supers-badge.active::after{
  content:"\2713";
  position:absolute;top:8px;right:9px;
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#07131A;
  background:var(--ton);
  box-shadow:0 0 14px color-mix(in srgb, var(--ton) 60%, transparent);
}
/* Ein Glanz laeuft einmal ueber die gewaehlte Stufe */
.supers-badge.active::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  transform:skewX(-18deg);
  animation:spGlanz 2.6s ease-in-out .1s 1;
  pointer-events:none;
}
@keyframes spGlanz{
  0%{left:-60%}
  60%,100%{left:130%}
}

/* ================== Eigener Betrag ================== */
.supers-custom-wrap{position:relative;margin-bottom:26px}
.supers-custom-wrap input{
  width:100%;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(0,255,255,.22);
  border-radius:12px;color:var(--sp-text);
  font-family:'Poppins',sans-serif;font-size:17px;font-weight:600;
  padding:16px 52px 16px 18px;outline:none;
  transition:border-color .2s, box-shadow .25s, background .2s;
}
.supers-custom-wrap input::placeholder{color:var(--sp-stumm);font-weight:400}
.supers-custom-wrap input:focus{
  border-color:var(--sp-kasse);background:rgba(0,0,0,.36);
  box-shadow:0 0 0 3px rgba(0,255,255,.12), 0 0 26px rgba(0,255,255,.16);
}
/* Die Pfeilchen des Zahlenfeldes stoeren hier nur */
.supers-custom-wrap input::-webkit-outer-spin-button,
.supers-custom-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.supers-custom-wrap input[type=number]{-moz-appearance:textfield}
.supers-custom-wrap .supers-suffix{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  color:var(--sp-leise);font-weight:600;font-size:17px;pointer-events:none;
}

/* ================== Felder ================== */
.supers-field{margin-bottom:16px}
.supers-field input[type="text"],
.supers-field textarea{
  width:100%;
  background:rgba(0,0,0,.24);
  border:1px solid var(--sp-linie);
  border-radius:12px;color:var(--sp-text);
  font-family:'Poppins',sans-serif;font-size:15px;line-height:1.6;
  padding:14px 16px;outline:none;
  transition:border-color .2s, box-shadow .25s, background .2s;
}
.supers-field input[type="text"]::placeholder,
.supers-field textarea::placeholder{color:var(--sp-stumm)}
.supers-field input[type="text"]:focus,
.supers-field textarea:focus{
  border-color:rgba(0,255,255,.55);background:rgba(0,0,0,.32);
  box-shadow:0 0 0 3px rgba(0,255,255,.1);
}
.supers-field textarea{resize:vertical;min-height:88px;max-height:150px}

.supers-char-counter{
  text-align:right;font-size:12px;color:var(--sp-stumm);margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.supers-char-counter.warn{color:#FF8A8A}

.supers-checkbox-wrap{
  display:flex;align-items:center;gap:12px;
  margin:0 0 18px;padding:12px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--sp-linie);border-radius:12px;
  cursor:pointer;font-size:15px;color:var(--sp-leise);
  transition:border-color .2s,color .2s;
}
.supers-checkbox-wrap:hover{border-color:rgba(0,255,255,.35);color:var(--sp-text)}
.supers-checkbox-wrap input[type="checkbox"]{
  width:20px;height:20px;flex:0 0 20px;accent-color:var(--sp-kasse);cursor:pointer;
}

.supers-hint{
  font-size:13px;line-height:1.6;color:var(--sp-stumm);
  margin:0 0 6px;text-align:left;letter-spacing:normal;
}
.supers-hint:last-of-type{margin-bottom:18px}

/* ================== Der Knopf ================== */
.supers-submit-btn{
  position:relative;overflow:hidden;
  width:100%;margin-top:6px;
  background:linear-gradient(135deg,#7DFFF6 0%,#00FFFF 35%,#00A8CC 100%);
  border:none;border-radius:14px;color:#062026;
  font-family:'Poppins',sans-serif;font-size:18px;font-weight:700;
  padding:18px;cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 28px rgba(0,255,255,.28);
  transition:transform .15s ease, box-shadow .3s ease, filter .3s ease;
}
.supers-submit-btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
  animation:spGlanz 4.5s ease-in-out infinite;
  pointer-events:none;
}
.supers-submit-btn:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 18px 42px rgba(0,0,0,.55), 0 0 44px rgba(0,255,255,.5);
  filter:brightness(1.04);
}
.supers-submit-btn:active{transform:translateY(0) scale(.995)}
.supers-submit-btn:disabled{
  opacity:.45;cursor:not-allowed;transform:none;
  box-shadow:none;filter:grayscale(.5);
}
.supers-submit-btn:disabled::after{display:none}

.supers-error-msg{
  background:rgba(255,60,60,.12);
  border:1px solid rgba(255,60,60,.4);
  border-left:3px solid #FF6B6B;
  border-radius:10px;color:#FFB3B3;
  padding:13px 15px;font-size:14px;line-height:1.5;
  margin-bottom:18px;display:none;
}

/* ================== Handy ================== */
@media (max-width:560px){
  .supers-container{
    border-radius:16px;margin-left:0;margin-right:0;
    padding:24px 16px 32px;
  }
  .supers-badges{grid-template-columns:repeat(2,1fr);gap:10px}
  .supers-badge{padding:14px 8px 12px}
  .supers-badge-emoji{font-size:28px}
  .supers-badge-label{font-size:14px}
  .supers-submit-btn{font-size:17px;padding:17px}
}
@media (max-width:360px){
  .supers-badges{grid-template-columns:1fr 1fr;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .supers-container *{transition:none !important;animation:none !important}
  .supers-badge:hover,.supers-badge.active{transform:none}
  .supers-submit-btn:hover{transform:none}
}