/* ============================================================
   AURORA – Oberfläche
   ------------------------------------------------------------
   Grundsatz: Die Karte liegt vollflächig und ist immer sichtbar.
   Alles andere schwebt als kompakte, glänzende Elemente darüber.
   Keine gestapelten Leisten, die die Karte zusammendrücken.

   Farbsprache: jede Fläche ist ein Paar aus zwei satten Farben mit
   Glanzlicht darauf. Die Paare wiederholen sich, dadurch entsteht
   Wiedererkennung.
   ============================================================ */

:root {
  /* Farbpaare: je zwei vollgesättigte Töne */
  --magenta-1:#FF1E7A; --magenta-2:#8B1EFF;
  --cyan-1:#00E0FF;   --cyan-2:#2B6CFF;
  --amber-1:#FFD012; --amber-2:#FF5A00;
  --lime-1:#B4FF1E;  --lime-2:#00C48C;
  --violett-1:#E23BFF;--violett-2:#5B1EFF;
  --koralle-1:#FF5E7E;--koralle-2:#FF9A2B;

  /* Status – unveränderlich, das ist die Orientierung der Roamer */
  --gruen:#00C853; --gelb:#FFAB00; --rot:#FF2D3C; --blau:#1E90FF;

  --tinte:#161329;
  --tinte-weich:#6A6480;
  --papier:#FFFFFF;
  --papier-2:#F4F2FB;
  --linie:#E6E2F3;

  /* Glas: halbtransparente Flächen, die den Untergrund durchscheinen
     lassen. Der helle Innenrand oben simuliert eine Lichtkante, der
     dunkle unten die Materialstärke – dadurch wirkt die Fläche wie
     eine Scheibe und nicht wie ein aufgeklebtes Rechteck. */
  --glas: rgba(255,255,255,.58);
  --glas-dicht: rgba(255,255,255,.76);
  --glas-dunkel: rgba(18,14,38,.42);
  --glas-kante: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(18,14,38,.08);
  --glas-kante-dunkel: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.25);
  --rand: 1px solid rgba(255,255,255,.5);
  --rand-dunkel: 1px solid rgba(255,255,255,.16);

  /* Gestufte Schatten: nah, mittel, weit. Weiche Verläufe statt eines
     harten Versatzes – das ist der Unterschied zur flachen Optik. */
  --schatten: 0 2px 6px rgba(18,14,38,.10), 0 8px 20px rgba(18,14,38,.14), 0 20px 44px rgba(18,14,38,.20);
  --schatten-klein: 0 1px 3px rgba(18,14,38,.10), 0 4px 12px rgba(18,14,38,.14), 0 10px 26px rgba(18,14,38,.14);
  --schatten-farbe: 0 6px 18px rgba(139,30,255,.32), 0 14px 40px rgba(255,30,122,.24);

  --schrift: "Bricolage Grotesque", -apple-system, "Segoe UI", Roboto, sans-serif;
  --takt: cubic-bezier(.32,.72,0,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;font-family:var(--schrift);color:var(--tinte);background:#0B0818;-webkit-font-smoothing:antialiased}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.versteckt{display:none!important}

/* ---------- 9:16-Bühne ---------- */
.buehne{position:fixed;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 80% at 50% 0%,#3B1466 0%,#0B0818 62%)}
.buehne-licht{position:absolute;width:min(70vw,600px);aspect-ratio:1;
  background:linear-gradient(120deg,var(--cyan-1),var(--magenta-2),var(--amber-1));
  filter:blur(120px);opacity:.28;pointer-events:none}

.app{position:relative;overflow:hidden;background:#DCE6F0;
  width:min(100vw,calc(100dvh*9/16));height:min(100dvh,calc(100vw*16/9))}
@media (min-aspect-ratio:10/16) and (min-width:480px){
  .app{border-radius:42px;box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 0 10px #100C22,0 0 0 11px #3B2A6B;
    height:min(94dvh,calc(100vw*16/9));width:calc(min(94dvh,100vw*16/9)*9/16)}
}

/* ---------- Karte: vollflächig, immer sichtbar ---------- */
.karte{position:absolute;inset:0;z-index:0;background:#DCE6F0}
.leaflet-container{font-family:var(--schrift);background:#DCE6F0}
.leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.7)}
/* Kräftig eingefärbte Kacheln – die Karte gehört zur bunten Gestaltung */
.leaflet-tile-pane{filter:saturate(2.2) contrast(1.06) brightness(1.04)}

/* Nadeln: Farbe UND Form, damit sie auf bunter Karte eindeutig bleiben */
.nadel{width:30px;height:30px;border:3px solid rgba(255,255,255,.92);
  box-shadow:0 2px 6px rgba(18,14,38,.3),0 8px 18px rgba(18,14,38,.22),inset 0 1px 2px rgba(255,255,255,.5)}
.nadel.gruen{background:var(--gruen);border-radius:50%}
.nadel.gelb{background:var(--gelb);border-radius:7px;transform:rotate(45deg)}
.nadel.rot{background:var(--rot);border-radius:5px}
.nadel.blau{background:var(--blau);border-radius:50%;box-shadow:0 0 0 5px rgba(30,144,255,.4),var(--schatten-klein)}
@keyframes welle{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.3);opacity:0}}
.nadel.winkt{animation:winkt 1.1s var(--takt) 2}
@keyframes winkt{0%,100%{transform:scale(1)}35%{transform:scale(1.5) translateY(-8px)}}
.nadel.gelb.winkt{animation-name:winkt-raute}
@keyframes winkt-raute{0%,100%{transform:rotate(45deg) scale(1)}35%{transform:rotate(45deg) scale(1.5) translateY(-8px)}}
.eigener-punkt{width:18px;height:18px;border-radius:50%;background:var(--cyan-1);
  border:4px solid #fff;box-shadow:0 0 0 7px rgba(0,224,255,.3)}
.karte.blitzt{animation:karte-blitzt 1s ease-out}
@keyframes karte-blitzt{40%{box-shadow:inset 0 0 0 6px var(--amber-1)}}

/* ---------- Schwebende Kopfzone ---------- */
.oben{position:absolute;top:0;left:0;right:0;z-index:400;
  padding:max(10px,env(safe-area-inset-top)) 12px 0;pointer-events:none}
.oben>*{pointer-events:auto}

.leiste{display:flex;align-items:center;gap:8px;margin-bottom:9px}


.suche{flex:1;min-width:0;height:46px;border-radius:17px;background:var(--glas);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:var(--rand);box-shadow:var(--schatten-klein),var(--glas-kante);
  display:flex;align-items:center;padding:0 14px}
.suche input{width:100%;border:0;background:none;outline:none;font-size:15px;font-weight:700}
.suche input::placeholder{color:var(--tinte-weich);font-weight:600}
.suche input::-webkit-search-cancel-button{display:none}

.rund{width:46px;height:46px;flex-shrink:0;border:var(--rand);border-radius:17px;cursor:pointer;
  display:grid;place-items:center;background:var(--glas);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  color:var(--tinte);box-shadow:var(--schatten-klein),var(--glas-kante);position:relative;overflow:hidden;
  transition:transform .16s var(--takt),box-shadow .16s var(--takt)}
.rund svg{width:20px;height:20px}
.rund:active{transform:scale(.93)}
.konto{background:linear-gradient(140deg,var(--amber-1),var(--amber-2));color:#fff;font-weight:900;font-size:17px}

.musik-balken{display:flex;align-items:flex-end;gap:2.5px;height:16px}
.musik-balken i{width:3px;border-radius:2px;background:var(--tinte-weich)}
/* Im Ruhezustand unterschiedlich hohe Balken - sonst liest man drei
   Punkte statt eines Symbols. */
.musik-balken i:nth-child(1){height:6px}
.musik-balken i:nth-child(2){height:13px}
.musik-balken i:nth-child(3){height:9px}
.musik-balken i:nth-child(4){height:15px}
#btn-musik[aria-pressed="true"]{background:linear-gradient(140deg,var(--lime-1),var(--lime-2))}
#btn-musik[aria-pressed="true"] .musik-balken i{background:#0A3A24}
#btn-musik[aria-pressed="true"] .musik-balken i:nth-child(1){animation:tanzt .9s ease-in-out infinite}
#btn-musik[aria-pressed="true"] .musik-balken i:nth-child(2){animation:tanzt .9s ease-in-out .15s infinite}
#btn-musik[aria-pressed="true"] .musik-balken i:nth-child(3){animation:tanzt .9s ease-in-out .3s infinite}
#btn-musik[aria-pressed="true"] .musik-balken i:nth-child(4){animation:tanzt .9s ease-in-out .45s infinite}
@keyframes tanzt{0%,100%{height:4px}50%{height:16px}}



/* ---------- Standortsteuerung ---------- */
.ortsteuerung{position:absolute;right:12px;bottom:200px;z-index:400;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ortsteuerung .rund{color:var(--cyan-2)}
.live{height:38px;padding:0 14px;border:var(--rand);border-radius:15px;cursor:pointer;
  display:flex;align-items:center;gap:7px;font-size:13px;font-weight:900;
  background:var(--glas);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  color:var(--tinte-weich);box-shadow:var(--schatten-klein),var(--glas-kante);transition:transform .16s var(--takt)}
.live:active{transform:scale(.94)}
.live-punkt{width:9px;height:9px;border-radius:50%;background:var(--linie)}
.live[aria-pressed="true"]{background:linear-gradient(140deg,var(--lime-1),var(--lime-2));color:#0A3A24}
.live[aria-pressed="true"] .live-punkt{background:#0A3A24;animation:schlag 1.5s ease-in-out infinite}
@keyframes schlag{50%{opacity:.4;transform:scale(.7)}}


/* ---------- Spenden-Knopf ---------- */
.spenden-knopf{position:absolute;left:12px;bottom:200px;z-index:410;border:0;cursor:pointer;
  display:flex;align-items:center;gap:7px;padding:14px 20px;border-radius:999px;
  font-size:15px;font-weight:900;color:#3A1400;
  background:linear-gradient(140deg,var(--amber-1),var(--amber-2));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 4px 14px rgba(255,90,0,.42),0 12px 34px rgba(255,90,0,.3),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .16s var(--takt),box-shadow .16s var(--takt)}
.spenden-knopf:active{transform:scale(.95);box-shadow:0 2px 8px rgba(255,90,0,.4)}
.spenden-plus{font-size:20px;line-height:1}
.spenden-knopf.zuckt{animation:zuckt .7s var(--takt)}
@keyframes zuckt{35%{transform:scale(1.08) rotate(-2deg)}65%{transform:scale(1.03) rotate(1deg)}}

/* ---------- Fußnavigation ---------- */
.fuss{position:absolute;left:0;right:0;bottom:0;z-index:420;display:flex;gap:6px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.72);backdrop-filter:blur(28px) saturate(190%);
  -webkit-backdrop-filter:blur(28px) saturate(190%);
  border-top:var(--rand);border-radius:28px 28px 0 0;
  box-shadow:0 -2px 10px rgba(18,14,38,.10),0 -14px 40px rgba(18,14,38,.22),var(--glas-kante)}
.fuss-knopf{flex:1;border:0;border-radius:16px;padding:8px 4px;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;font-weight:900;color:var(--tinte-weich);transition:all .2s var(--takt);position:relative}
.fuss-knopf svg{width:21px;height:21px}
.fuss-knopf.aktiv{color:#fff}
#nav-karte.aktiv{background:linear-gradient(140deg,var(--cyan-1),var(--cyan-2));
  box-shadow:0 4px 14px rgba(43,108,255,.45),inset 0 1px 0 rgba(255,255,255,.45)}
#nav-rangliste.aktiv{background:linear-gradient(140deg,var(--amber-1),var(--amber-2));
  box-shadow:0 4px 14px rgba(255,90,0,.45),inset 0 1px 0 rgba(255,255,255,.5);color:#3A1400}
#nav-guthaben.aktiv{background:linear-gradient(140deg,var(--magenta-1),var(--magenta-2));
  box-shadow:0 4px 14px rgba(139,30,255,.45),inset 0 1px 0 rgba(255,255,255,.4)}
.fuss-badge{position:absolute;top:4px;right:50%;margin-right:-16px;width:9px;height:9px;
  border-radius:50%;background:var(--amber-1);box-shadow:0 0 0 2px var(--papier)}

/* Rollenabhängig: weniger auf dem Schirm, je nach Aufgabe */

/* ---------- Sheets ---------- */
.sheet-schicht{position:absolute;inset:0;z-index:500;background:rgba(11,8,24,.55);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s var(--takt)}
.sheet-schicht.an{opacity:1;pointer-events:auto}
.sheet-schicht{backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%)}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:510;max-height:86%;overflow-y:auto;
  overscroll-behavior:contain;padding:8px 18px calc(20px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.82);backdrop-filter:blur(34px) saturate(190%);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
  border-top:var(--rand);border-radius:32px 32px 0 0;
  box-shadow:0 -4px 16px rgba(11,8,24,.14),0 -20px 60px rgba(11,8,24,.35),var(--glas-kante);
  transform:translateY(102%);transition:transform .38s var(--takt)}
.sheet.an{transform:translateY(0)}
.sheet-griff{width:40px;height:5px;margin:6px auto 16px;border-radius:999px;background:var(--linie)}
.sheet-titel{font-size:26px;font-weight:800;letter-spacing:-.025em;margin:0 0 4px;
  background:linear-gradient(110deg,var(--magenta-1),var(--magenta-2));-webkit-background-clip:text;background-clip:text;color:transparent}
#app[data-rolle="sammeln"] .sheet-titel{background:linear-gradient(110deg,#00A88F,#5FA800);-webkit-background-clip:text;background-clip:text}
.sheet-unter{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--tinte-weich);line-height:1.45}
.schritt-leiste{display:flex;gap:5px;margin-bottom:16px}
.schritt-leiste i{flex:1;height:4px;border-radius:999px;background:var(--linie)}
.schritt-leiste i.an{background:linear-gradient(90deg,var(--magenta-1),var(--magenta-2))}

/* ---------- Knöpfe ---------- */
.knopf{display:block;width:100%;border:0;border-radius:18px;padding:16px 18px;
  font-size:17px;font-weight:900;cursor:pointer;transition:transform .14s var(--takt)}
.knopf[disabled]{opacity:.45;cursor:not-allowed}
.knopf-haupt{color:#fff;background:linear-gradient(140deg,var(--magenta-1),var(--magenta-2));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:var(--schatten-farbe),inset 0 1px 0 rgba(255,255,255,.4)}
.knopf-haupt:active:not([disabled]){transform:scale(.97);box-shadow:0 3px 12px rgba(139,30,255,.35)}
#app[data-rolle="sammeln"] .knopf-haupt{color:#0A3A24;
  background:linear-gradient(140deg,var(--lime-1),var(--lime-2));
  box-shadow:0 6px 18px rgba(0,196,140,.4),0 14px 40px rgba(180,255,30,.22),inset 0 1px 0 rgba(255,255,255,.5)}
.knopf-neben{background:rgba(244,242,251,.8);backdrop-filter:blur(14px);color:var(--tinte);
  border:1px solid rgba(22,19,41,.07);box-shadow:0 2px 8px rgba(18,14,38,.08),var(--glas-kante)}
.knopf-neben:active{transform:scale(.97)}
.knopf-still{background:none;color:var(--tinte-weich);font-weight:800;box-shadow:none}
.knopf-gold{color:#3A1400;background:linear-gradient(140deg,var(--amber-1),var(--amber-2));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 6px 18px rgba(255,90,0,.42),0 14px 38px rgba(255,208,18,.24),inset 0 1px 0 rgba(255,255,255,.5)}
.knopf-reihe{display:flex;gap:10px;margin-top:10px}
.knopf-reihe .knopf{margin-top:0}

/* ---------- Formulare ---------- */
.feld-label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:800;color:var(--tinte-weich)}
.eingabe-feld{width:100%;margin-bottom:14px;padding:14px 15px;border:2px solid var(--linie);
  border-radius:16px;background:var(--papier-2);font-size:16px;font-weight:600;outline:none;resize:vertical}
.eingabe-feld:focus{border-color:var(--magenta-2)}
.foto-feld{display:block;margin-bottom:16px;border:3px dashed var(--linie);border-radius:22px;
  cursor:pointer;overflow:hidden}
.foto-feld.gefuellt{border-style:solid;border-color:var(--magenta-2)}
.foto-platzhalter{display:flex;flex-direction:column;align-items:center;gap:10px;padding:38px 16px;
  font-size:14px;font-weight:800;color:var(--tinte-weich)}
.foto-platzhalter svg{width:34px;height:34px}
.foto-vorschau{width:100%;aspect-ratio:4/3;object-fit:cover}
.standort-karte{display:grid;place-items:center;height:104px;margin-bottom:12px;border-radius:20px;
  background:var(--papier-2);border:2px solid var(--linie)}
.standort-status{font-size:14px;font-weight:800;color:var(--tinte-weich);text-align:center;padding:0 16px}
.standort-status.gesetzt{color:var(--gruen)}

.meldung{margin-bottom:14px;padding:13px 15px;border-radius:16px;font-size:13.5px;font-weight:600;line-height:1.45}
.meldung-fehler{background:rgba(255,45,60,.12);color:#A8131E}
.meldung-info{background:rgba(139,30,255,.1);color:#6112B3}
.meldung a{color:inherit;word-break:break-all}
.klein-text{margin:12px 0 0;font-size:11.5px;font-weight:600;text-align:center;color:var(--tinte-weich)}
.leer-hinweis{padding:30px 12px;text-align:center;font-size:15px;font-weight:800;color:var(--tinte-weich)}
.leer-hinweis::before{content:"";display:block;width:80px;height:80px;margin:0 auto 14px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff 0 10%,transparent 11%),
             linear-gradient(140deg,var(--magenta-1),var(--magenta-2));
  box-shadow:var(--schatten-klein);animation:wippt 3.2s ease-in-out infinite}

/* ---------- Standort der Spende ---------- */
.ort-karte{padding:13px 15px;margin-bottom:16px;border-radius:18px;background:var(--papier-2);border:2px solid var(--linie)}
.ort-karte-kopf{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:11.5px;font-weight:900;color:var(--magenta-2)}
.ort-karte-kopf svg{width:15px;height:15px}
.ort-name{margin:0 0 3px;font-size:15px;font-weight:800;line-height:1.3}
.ort-koordinaten{margin:0;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tinte-weich)}
.ort-kopfzeile{display:flex;flex-direction:column;gap:1px;padding:10px 14px;margin-bottom:14px;border-radius:16px;
  background:linear-gradient(120deg,rgba(255,30,122,.12),rgba(139,30,255,.12));border:2px solid rgba(139,30,255,.2)}
.ort-kopf-label{font-size:10.5px;font-weight:900;color:var(--magenta-2)}
.ort-kopf-name{font-size:14px;font-weight:800;line-height:1.3}
.ort-kopf-koord{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tinte-weich)}

/* ---------- Flaschen-Detail ---------- */
.detail-bild-rahmen{position:relative;margin-bottom:14px}
.detail-foto{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;background:var(--papier-2)}
.zeit-marke{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:900;color:#fff;background:rgba(11,8,24,.7);backdrop-filter:blur(10px)}
.zeit-marke i{width:9px;height:9px;border-radius:50%}
.zeit-marke.gruen i{background:var(--gruen)}.zeit-marke.gelb i{background:var(--gelb)}
.zeit-marke.rot i{background:var(--rot)}.zeit-marke.blau i{background:var(--blau)}
.detail-kommentar{margin:0 0 12px;font-size:16px;font-weight:600;line-height:1.5}
.detail-meta{margin:0 0 14px;font-size:13px;font-weight:700;color:var(--tinte-weich)}
.vergleich{display:flex;gap:10px;margin-bottom:18px}
.vergleich figure{flex:1;margin:0}
.vergleich img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:var(--papier-2)}
.vergleich figcaption{margin-top:6px;text-align:center;font-size:11.5px;font-weight:800;color:var(--tinte-weich)}

/* ---------- Rangliste & Guthaben ---------- */
.reiter{display:flex;gap:6px;margin-bottom:14px}
.reiter button{flex:1;border:1px solid rgba(22,19,41,.06);border-radius:999px;padding:10px;
  background:rgba(244,242,251,.8);backdrop-filter:blur(14px);
  font-size:13.5px;font-weight:900;color:var(--tinte-weich);cursor:pointer;
  box-shadow:0 2px 8px rgba(18,14,38,.07)}
.reiter button.aktiv{color:#fff;background:linear-gradient(140deg,var(--magenta-1),var(--magenta-2));
  border-color:transparent;box-shadow:0 5px 16px rgba(139,30,255,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.rang-zeile{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:2px solid var(--papier-2)}
.rang-platz{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;
  background:var(--papier-2);font-size:12.5px;font-weight:900;color:var(--tinte-weich)}
.rang-zeile:nth-child(1) .rang-platz{background:linear-gradient(140deg,var(--amber-1),var(--amber-2));color:#3A1400}
.rang-zeile:nth-child(2) .rang-platz{background:linear-gradient(140deg,var(--cyan-1),var(--cyan-2));color:#fff}
.rang-zeile:nth-child(3) .rang-platz{background:linear-gradient(140deg,var(--koralle-1),var(--koralle-2));color:#fff}
.rang-name{flex:1;font-weight:800;font-size:15px}
.rang-punkte{font-weight:900;font-size:15px;color:var(--magenta-1)}
.guthaben-karte{display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:10px;border-radius:22px;
  background:rgba(244,242,251,.85);border:1px solid rgba(255,255,255,.5);
  box-shadow:0 4px 14px rgba(18,14,38,.1),var(--glas-kante)}
.guthaben-karte.gold{background:linear-gradient(140deg,var(--amber-1),var(--amber-2));color:#3A1400}
.guthaben-karte:nth-of-type(2){background:linear-gradient(140deg,var(--cyan-1),var(--cyan-2));color:#fff}
.guthaben-karte:nth-of-type(3){background:linear-gradient(140deg,var(--lime-1),var(--lime-2));color:#0A3A24}
.guthaben-zahl{font-size:32px;font-weight:900;line-height:1;min-width:44px;text-align:center}
.guthaben-text{font-size:13.5px;font-weight:600;line-height:1.4}
.guthaben-text b{display:block;font-size:15px;font-weight:900;margin-bottom:2px}

/* ---------- Funke ---------- */
.funke{position:absolute;z-index:430;width:16px;height:16px;pointer-events:none;
  background:var(--funke-farbe,var(--magenta-1));
  clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);
  animation:funke 1.4s ease-out forwards}
@keyframes funke{0%{transform:scale(0);opacity:0}30%{transform:scale(1.3) rotate(80deg);opacity:1}
  100%{transform:scale(0) rotate(180deg);opacity:0}}

/* ---------- Toast ---------- */
.toast{position:absolute;left:50%;top:calc(66px + env(safe-area-inset-top));z-index:700;
  transform:translate(-50%,-10px);max-width:84%;padding:11px 18px;border-radius:999px;
  background:var(--glas-dunkel);backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);border:var(--rand-dunkel);
  color:#fff;font-size:13px;font-weight:700;text-align:center;
  box-shadow:var(--schatten),var(--glas-kante-dunkel);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--takt)}
.toast.an{opacity:1;transform:translate(-50%,0)}

/* ---------- Jackpot ---------- */
.jackpot{position:absolute;inset:0;z-index:800;display:none;align-items:center;justify-content:center;padding:18px;
  background:radial-gradient(70% 50% at 50% 38%,rgba(139,30,255,.6),transparent 70%),rgba(11,8,24,.94)}
.jackpot.an{display:flex;animation:auf .3s ease}
@keyframes auf{from{opacity:0}}
.jackpot-konfetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.automat{position:relative;z-index:1;width:100%;max-width:330px;padding:16px 18px 18px;border-radius:30px;
  background:linear-gradient(180deg,rgba(58,46,110,.72),rgba(20,15,46,.86));
  backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);
  border:1px solid rgba(255,208,18,.45);
  box-shadow:0 0 40px rgba(255,208,18,.26),0 20px 50px rgba(0,0,0,.5),0 40px 90px rgba(0,0,0,.6),var(--glas-kante-dunkel);
  animation:rein .5s cubic-bezier(.22,1.3,.4,1)}
@keyframes rein{from{transform:scale(.82) translateY(16px);opacity:0}}
.automat-lampen{position:absolute;inset:-7px;border-radius:35px;pointer-events:none}
.lampe{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--amber-1);
  box-shadow:0 0 7px var(--amber-1);opacity:.28}
.automat.leuchtet .lampe{animation:lampe 1s linear infinite}
@keyframes lampe{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.automat-kopf{text-align:center;margin-bottom:14px;font-size:13px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber-1)}
.walzen{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:9px;
  border-radius:18px;background:#0B0818;box-shadow:inset 0 3px 14px rgba(0,0,0,.8);margin-bottom:16px}
.walze{position:relative;height:88px;overflow:hidden;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(222,227,238,.92));
  box-shadow:inset 0 10px 14px -8px rgba(0,0,0,.6),inset 0 -10px 14px -8px rgba(0,0,0,.6)}
.walze-band{display:flex;flex-direction:column;will-change:transform}
.walze-symbol{height:88px;flex-shrink:0;display:grid;place-items:center;font-size:40px;line-height:1}
.walze-linie{position:absolute;left:9px;right:9px;top:50%;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,rgba(255,208,18,.85),transparent);pointer-events:none}
.walzen.treffer{animation:treffer .5s ease 2}
@keyframes treffer{50%{box-shadow:inset 0 3px 14px rgba(0,0,0,.8),0 0 30px 6px var(--amber-1)}}
.automat-anzeige{text-align:center;min-height:92px}
.jackpot-titel{margin:0 0 6px;font-size:25px;font-weight:900;letter-spacing:-.02em;line-height:1.15;
  background:linear-gradient(120deg,#FFE27A,var(--amber-1),#FFE27A);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.jackpot-titel.glanz{animation:glanztext 1.6s linear infinite}
@keyframes glanztext{to{background-position:-220% 0}}
.jackpot-titel.blass{background:none;-webkit-text-fill-color:#7E77A0;color:#7E77A0;font-size:19px;font-weight:700}
.jackpot-text{margin:0 0 12px;font-size:14px;font-weight:600;line-height:1.5;color:#B9B2D6}
.jackpot-zaehler{display:inline-flex;align-items:baseline;gap:8px;padding:7px 16px;border-radius:999px;
  background:rgba(255,208,18,.14);border:2px solid rgba(255,208,18,.4);margin-bottom:4px}
.zaehler-wert{font-size:26px;font-weight:900;color:#FFE27A;line-height:1}
.zaehler-label{font-size:11.5px;font-weight:800;color:var(--amber-1)}
.jackpot-aktionen{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.jackpot-aktionen .knopf-neben{background:rgba(255,255,255,.1);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.18);color:#E6E2F3;
  box-shadow:0 4px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.jackpot-aktionen .knopf-still{color:#8981AB}
.jackpot-aktionen .eingabe-feld{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.jackpot-aktionen .eingabe-feld::placeholder{color:#7E77A0}
.jackpot-aktionen .meldung-info{background:rgba(255,255,255,.08);color:#C3BEDD;text-align:left}
.konfetti{position:absolute;top:-10%;width:10px;height:16px;border-radius:2px;opacity:.9;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(120vh) rotate(540deg);opacity:0}}

/* Der Glanz-Sammelselektor setzt position:relative. Der Teilen-Knopf
   und die Nadeln liegen aber absolut auf der Karte – hier wieder
   durchsetzen, sonst rutschen sie aus dem Layout. */
.spenden-knopf{position:absolute}

/* ============================================================
   Glanz und Schimmer
   ------------------------------------------------------------
   Ein einziges Verfahren für die ganze Oberfläche, übernommen vom
   wechselnden Riegel: eine feste Lichtkuppe oben links plus ein
   breiter, weicher Lichtstreifen, der von rechts nach links wandert.

   Der Streifen läuft überall gleich schnell. Versetzt wird nur der
   Startzeitpunkt, und zwar nach Bereichen: Kopfzone, Karte, Teilen,
   Riegel und Fussleiste starten nacheinander. Dadurch wandert das
   Licht sichtbar über den Bildschirm, statt dass alles gleichzeitig
   aufblitzt.
   ============================================================ */

@keyframes schimmer{
  0%   {background-position:0 0, 190% 0}
  100% {background-position:0 0, -90% 0}
}

/* Der gemeinsame Schimmer. Beide Verläufe liegen auf demselben
   Element: der erste steht fest, der zweite wandert. */
.schimmert{position:relative;overflow:hidden;isolation:isolate}
.schimmert::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(85% 60% at 20% -15%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
  background-size:auto, 280% 100%;
  background-repeat:no-repeat;
  animation:schimmer 4.2s linear infinite;
  animation-delay:var(--schimmer-verzug, 0s)}

/* Inhalte über dem Schimmer halten */
.schimmert>*{position:relative;z-index:4}

/* ---------- Zeitversatz nach Bereichen ---------- */
.oben .schimmert{--schimmer-verzug:0s}
.ortsteuerung .schimmert{--schimmer-verzug:.7s}
.spenden-knopf{--schimmer-verzug:1.4s}
.fuss .schimmert{--schimmer-verzug:2.8s}
.sheet .schimmert{--schimmer-verzug:.5s}

/* Innerhalb der Kopfzone laufen die Elemente von links nach rechts
   nach, damit das Licht auch dort wandert statt zu blitzen. */
.leiste>*:nth-child(1){--schimmer-verzug:0s}
.leiste>*:nth-child(2){--schimmer-verzug:.16s}
.leiste>*:nth-child(3){--schimmer-verzug:.32s}

/* ---------- Anwendung ---------- */
.suche,.rund,.konto,.live,
.fuss-knopf.aktiv,
.knopf-haupt,.knopf-gold,.knopf-neben,.reiter button.aktiv,
.spenden-knopf,  position:relative;overflow:hidden;isolation:isolate}

.suche::after,.rund::after,.konto::after,.live::after,
.fuss-knopf.aktiv::after,
.knopf-haupt::after,.knopf-gold::after,.reiter button.aktiv::after,
.spenden-knopf::after,.nadel::after,.guthaben-karte.gold::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(85% 60% at 20% -15%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
  background-size:auto, 280% 100%;
  background-repeat:no-repeat;
  animation:schimmer 4.2s linear infinite;
  animation-delay:var(--schimmer-verzug, 0s)}

/* Auf hellen Glasflächen wäre der Streifen zu blass – dort kräftiger */
.suche::after,.rund::after,.live::after,.knopf-neben::after{
  background:
    radial-gradient(85% 60% at 20% -15%, rgba(255,255,255,.7), transparent 62%),
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  background-size:auto, 280% 100%;background-repeat:no-repeat}

/* Inhalte über den Schimmer heben */
.knopf-haupt>*,.knopf-gold>*,.spenden-knopf>*,.konto>*,
.fuss-knopf.aktiv>*,.live>*,.suche>*,.rund>*{position:relative;z-index:4}
#konto-initiale{position:relative;z-index:4}

/* ---------- Nadeln ---------- */
/* Die Nadeln bekommen denselben Streifen, aber jede einen eigenen
   Startpunkt. Der Versatz wird beim Zeichnen gesetzt (map.js), damit
   das Licht nicht über alle Nadeln gleichzeitig läuft. */
.nadel::after{animation-duration:3.4s}
.nadel::before{
  content:"";position:absolute;left:13%;top:9%;width:44%;height:32%;z-index:4;
  border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.2));
  pointer-events:none}
.nadel.gelb::before{transform:rotate(-45deg)}

/* Der Wellenring der frischen Nadeln liegt ausserhalb. */
.nadel-welle{position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  border:3px solid var(--gruen);animation:welle 2.2s ease-out infinite}
.nadel-huelle{position:relative;width:30px;height:30px}

/* Der Riegel trug den Schimmer bisher über ein eigenes Element –
   jetzt übernimmt ihn der gemeinsame Selektor. */

/* Der Schimmer-Sammelselektor setzt position:relative. Teilen-Knopf und
   Riegel liegen aber absolut über der Karte – hier wieder durchsetzen,
   sonst fallen beide aus dem Layout. */
.spenden-knopf{position:absolute}

/* ============================================================
   Einheitlicher Knopfstil
   ------------------------------------------------------------
   Vorbild ist der Teilen-Knopf: halbtransparente Glasfläche, weicher
   gestufter Schatten, durchgehend runde Kapselform. Jeder Knopf behält
   seine eigene Farbe, übernimmt aber Transparenz, Schatten, Rundung.

   Die Farben stehen bewusst als RGB-Anteile in Variablen und werden mit
   rgba() zusammengesetzt. Naheliegender wäre color-mix() gewesen, das
   gibt es aber erst ab Chrome 111 / Safari 16.2 – kennt der Browser es
   nicht, verwirft er die komplette background-Regel und der Knopf hat
   überhaupt keinen Hintergrund mehr. rgba() versteht jeder Browser.
   ============================================================ */

:root{
  --knopf-rundung:999px;
  --knopf-schatten:
    0 1px 3px rgba(18,14,38,.12),
    0 6px 16px rgba(18,14,38,.18),
    0 14px 34px rgba(18,14,38,.16);

  /* Farbanteile für rgba() */
  --rgb-magenta-1:255,30,122;  --rgb-magenta-2:139,30,255;
  --rgb-cyan-1:0,224,255;      --rgb-cyan-2:43,108,255;
  --rgb-amber-1:255,208,18;    --rgb-amber-2:255,90,0;
  --rgb-lime-1:180,255,30;     --rgb-lime-2:0,196,140;
  --rgb-glas-1:255,255,255;    --rgb-glas-2:238,236,248;
}

.knopf,.spenden-knopf,.rund,.konto,.live,.reiter button,
.rollen-knopf,.suche{
  --ton-a:var(--rgb-glas-1);
  --ton-b:var(--rgb-glas-2);
  border:1px solid rgba(255,255,255,.45);
  border-radius:var(--knopf-rundung);
  background:linear-gradient(140deg, rgba(var(--ton-a),.74), rgba(var(--ton-b),.74));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--knopf-schatten), inset 0 1px 0 rgba(255,255,255,.55);
  color:var(--tinte);
  transition:transform .16s var(--takt);
  touch-action:manipulation;
}
.knopf:active:not([disabled]),.spenden-knopf:active,.rund:active,
.konto:active,.live:active,.reiter button:active,.rollen-knopf:active{
  transform:scale(.96)}

/* Eigene Farben – Form, Transparenz und Schatten bleiben gleich */
.knopf-haupt{--ton-a:var(--rgb-magenta-1);--ton-b:var(--rgb-magenta-2);color:#fff}
#app[data-rolle="sammeln"] .knopf-haupt{--ton-a:var(--rgb-lime-1);--ton-b:var(--rgb-lime-2);color:#0A3A24}
.knopf-gold{--ton-a:var(--rgb-amber-1);--ton-b:var(--rgb-amber-2);color:#3A1400}
.knopf-still{background:none;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--tinte-weich)}
.spenden-knopf{--ton-a:var(--rgb-amber-1);--ton-b:var(--rgb-amber-2);color:#3A1400}
#btn-konto{--ton-a:var(--rgb-amber-1);--ton-b:var(--rgb-amber-2);color:#3A1400}
#btn-musik[aria-pressed="true"]{--ton-a:var(--rgb-lime-1);--ton-b:var(--rgb-lime-2)}
#btn-musik[aria-pressed="true"] .musik-balken i{background:#0A3A24}
.live[aria-pressed="true"]{--ton-a:var(--rgb-lime-1);--ton-b:var(--rgb-lime-2);color:#0A3A24}
.reiter button.aktiv{--ton-a:var(--rgb-magenta-1);--ton-b:var(--rgb-magenta-2);color:#fff}
#rolle-sammeln[aria-pressed="true"]{--ton-a:var(--rgb-lime-1);--ton-b:var(--rgb-lime-2);color:#0A3A24}
#rolle-teilen[aria-pressed="true"]{--ton-a:var(--rgb-magenta-1);--ton-b:var(--rgb-magenta-2);color:#fff}

/* Fussleiste: nur der aktive Bereich trägt die Knopfhülle */
.fuss-knopf{border:1px solid transparent;border-radius:var(--knopf-rundung);
  background:none;box-shadow:none;color:var(--tinte-weich);touch-action:manipulation;
  transition:all .2s var(--takt)}
.fuss-knopf.aktiv{
  border-color:rgba(255,255,255,.45);color:#fff;
  background:linear-gradient(140deg, rgba(var(--ton-a),.82), rgba(var(--ton-b),.82));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--knopf-schatten), inset 0 1px 0 rgba(255,255,255,.5)}
#nav-karte.aktiv{--ton-a:var(--rgb-cyan-1);--ton-b:var(--rgb-cyan-2)}
#nav-rangliste.aktiv{--ton-a:var(--rgb-amber-1);--ton-b:var(--rgb-amber-2);color:#3A1400}
#nav-guthaben.aktiv{--ton-a:var(--rgb-magenta-1);--ton-b:var(--rgb-magenta-2)}

.spenden-knopf{position:absolute;left:12px;bottom:20px;z-index:1200;
  display:flex;align-items:center;gap:7px;padding:13px 19px;
  font-size:15px;font-weight:900;cursor:pointer}
/* Fussleiste ist rund 71 px hoch, plus Luft darüber. */
#app[data-angemeldet="ja"] .spenden-knopf{bottom:84px}
#app:not([data-angemeldet="ja"]) .fuss{display:none}

/* Rollenwahl in der Anmeldung */
.rollenwahl{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.rollen-knopf{text-align:left;padding:13px 16px;cursor:pointer;border-radius:20px}
.rollen-knopf b{display:block;font-size:15px;font-weight:900}
.rollen-knopf small{display:block;font-size:12px;font-weight:600;color:var(--tinte-weich);margin-top:2px}
.rollen-knopf[aria-pressed="true"] small{color:inherit;opacity:.85}

.suche{display:flex;align-items:center;padding:0 16px;height:46px}
.fuss{background:rgba(255,255,255,.66);border-radius:28px 28px 0 0}

/* ============================================================
   Ein Schimmer für alles
   Gleicher Verlauf, gleiche Dauer, überall. Versetzt wird nur der
   Startzeitpunkt über --schimmer-verzug.
   ============================================================ */
@keyframes schimmer{
  0%   {background-position:0 0, 190% 0}
  100% {background-position:0 0, -90% 0}
}

/* Der Teilen-Knopf fehlt in dieser Liste mit Absicht: er liegt absolut
   über der Karte. Stünde er hier, würde position:relative seine
   Platzierung überschreiben und er fiele aus dem Layout. */
.suche,.rund,.konto,.live,.knopf,.reiter button,
.rollen-knopf,.fuss-knopf.aktiv,.nadel,.guthaben-karte{
  position:relative;overflow:hidden;isolation:isolate}

.spenden-knopf{overflow:hidden;isolation:isolate}

.suche::after,.rund::after,.konto::after,.live::after,.knopf::after,
.spenden-knopf::after,.reiter button::after,.rollen-knopf::after,
.fuss-knopf.aktiv::after,.nadel::after,.guthaben-karte::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(85% 60% at 20% -15%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
  background-size:auto, 280% 100%;
  background-repeat:no-repeat;
  animation:schimmer 4.2s linear infinite;
  animation-delay:var(--schimmer-verzug, 0s)}
.knopf-still::after{display:none}

/* Zeitversatz: das Licht wandert von oben nach unten */
.suche{--schimmer-verzug:0s}
.leiste>*:nth-child(2){--schimmer-verzug:.18s}
.leiste>*:nth-child(3){--schimmer-verzug:.36s}
.ortsteuerung .rund{--schimmer-verzug:.9s}
.ortsteuerung .live{--schimmer-verzug:1.1s}
.spenden-knopf{--schimmer-verzug:1.6s}
.fuss-knopf:nth-child(1).aktiv{--schimmer-verzug:2.3s}
.fuss-knopf:nth-child(2).aktiv{--schimmer-verzug:2.5s}
.fuss-knopf:nth-child(3).aktiv{--schimmer-verzug:2.7s}
.sheet .knopf{--schimmer-verzug:.4s}
.sheet .knopf-neben{--schimmer-verzug:.6s}
.rollen-knopf:nth-child(1){--schimmer-verzug:.2s}
.rollen-knopf:nth-child(2){--schimmer-verzug:.45s}

/* ============================================================
   Bedienbarkeit
   Die Karte spannt sich über die ganze Fläche. Damit die Bedienung
   darüber sicher erreichbar bleibt – auch wenn die Kartenbibliothek
   eigene Ebenen einzieht – liegt sie deutlich höher und ohne
   pointer-events-Tricks.
   ============================================================ */
.karte{z-index:0}
.oben{z-index:1200;pointer-events:auto}
.ortsteuerung{z-index:1200}
.fuss{z-index:1300}
.sheet-schicht{z-index:1400}
.sheet{z-index:1500}
.toast{z-index:1600;pointer-events:none}
.jackpot{z-index:1700}
.leaflet-control-container{pointer-events:none}
.leaflet-control-attribution{pointer-events:auto}