/* Seitenstil für /unterstuetzen (Wall of Stars).

   Stand bis 2026-09: rund 45 KB als Inline-<style> in unterstuetzen.php. Die
   Seite ist no-store, also wurde der Block bei jedem Aufruf neu übertragen und
   nie gecacht. Als eigene Datei kommt er über sw_asset_url() mit ?v=mtime
   und SRI und bleibt im Browser-Cache. Wer ihn zurück inline legt, zahlt die
   45 KB wieder bei jedem Aufruf.

   Bewusst OHNE .min-Partner: scripts/minify-css.ps1 (und sw_minify_css_inline)
   kürzen ":\s+" auch innerhalb von Zeichenketten. Aus den Selektoren
   [style*="--sd: 1"] weiter unten würde "--sd:1" – das passt dann weder auf
   das serverseitige Markup (style="… --sd: 1") noch auf die per JS gesetzten
   Sterne (der Browser serialisiert "--sd: 3;"), und alle Sterne blinkten
   wieder im Gleichtakt. Vor einer .min-Datei zuerst diese Selektoren
   umstellen. */

/* Sternenfeld: die Wand ist der eigentliche Blickfang der Seite. */
/* Kein eigener Kopfabstand mehr: den setzt .hero zentral in global.css,
   damit die Seite denselben Abstand hat wie alle anderen. */
.sw-support-wrap { max-width: 1080px; margin: 0 auto; padding: 0 1rem 4rem; }
/* Design 2026 (global.css): Kopf, Kicker, Formular-Karte und Knöpfe
   sprechen dieselbe Sprache wie die übrigen Seiten – Violett als
   Akzent, Navy-Fläche mit feiner Linie, Knöpfe mit Radius 10 und
   ruhigem Hover. Vorher standen hier Gold-/Cyan-Knöpfe mit Radius 8
   und translateY, dazu ältere 999px-Regeln, die weiter unten wieder
   überschrieben wurden. Das Gold bleibt dem Sternenhimmel (Wand,
   Stufen, Zähler) vorbehalten; dessen CSS ist unverändert.
   Überschriftgröße, -breite und -farbe setzt der Kopf-Sammler in
   global.css per !important – die früheren Angaben hier (3.5rem,
   13ch, #F4EEFF) kamen nie an und sind entfallen. */
.sw-support-hero { max-width: 880px; margin: 1.25rem 0 2rem; text-align: left; }
.sw-support-hero h1 { margin: 0 0 .85rem; }
.sw-support-kicker { display: inline-flex; align-items: center; gap: .45rem;
                     padding: .34rem .85rem; margin-bottom: 1rem;
                     border-radius: 999px; font-size: .74rem; font-weight: 700;
                     letter-spacing: .08em; text-transform: uppercase;
                     color: var(--sws-brand-3); border: 1px solid var(--sws-brand-line);
                     background: var(--sws-brand-bg); }
.sw-support-kicker i { color: var(--sws-warn); }
.sw-support-lead { max-width: 65ch; margin: 0; font-size: 1.08rem;
                   color: var(--sws-muted); line-height: 1.65; }

/* Statusmeldung: modern-alert stammt aus dem Dashboard-Stylesheet und
   wäre hier unsichtbar geblieben -- ausgerechnet die Danke-Meldung
   nach einer Zahlung. */
.sw-support-flash { max-width: 62ch; margin: 0 auto 1.6rem; padding: .8rem 1.1rem;
                    border-radius: 12px; font-size: .92rem; line-height: 1.5;
                    border: 1px solid rgba(167,139,250,.4);
                    background: rgba(139,92,246,.14); color: #e9e3ff; }
.sw-support-flash--success { border-color: rgba(74,222,128,.45);
                             background: rgba(34,197,94,.14); color: #dcfce7; }
.sw-support-flash--danger  { border-color: rgba(248,113,113,.5);
                             background: rgba(239,68,68,.14); color: #fee2e2; }

.sw-support-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sw-support-grid { grid-template-columns: 380px minmax(0, 1fr); align-items: start; } }

.sw-support-card { width: min(100%, 760px); margin: 0 auto; padding: 1.75rem;
                   background: linear-gradient(180deg, rgba(148,163,184,.035), transparent 120px), var(--sws-surface-2);
                   border: 1px solid var(--sws-line); border-radius: var(--sws-r-lg);
                   box-shadow: var(--sws-shadow-2); }
.sw-support-card h2 { margin: 0 0 .2rem; font-size: 1.45rem; font-weight: 750; color: var(--sws-text); }
.sw-support-card h3 { margin: 1.3rem 0 .4rem; font-size: 1rem; font-weight: 700; color: var(--sws-text); }
.sw-amount-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                 gap: .5rem; margin: .75rem 0; }
/* Betragsknöpfe: gewählt = violette Fläche UND Haken-Icon, damit der
   Zustand nicht nur an der Farbe hängt. aria-pressed setzt das
   Skript unten, daran ändert sich nichts. */
.sw-amount-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
                 min-width: 0; min-height: 46px; border-radius: 10px; cursor: pointer;
                 border: 1px solid var(--sws-line-2); background: rgba(148,163,184,.06);
                 color: var(--sws-text-2); font-weight: 700; font-variant-numeric: tabular-nums;
                 transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.sw-amount-btn:hover { border-color: var(--sws-brand-line); background: rgba(148,163,184,.1); color: #fff; }
.sw-amount-btn[aria-pressed="true"] { border-color: rgba(196,181,253,.6); color: #fff;
                                       background: rgba(139,92,246,.28);
                                       box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.sw-amount-btn[aria-pressed="true"]::before { content: "\f00c"; font-family: "Font Awesome 6 Free";
                                               font-weight: 900; font-size: .8em; color: var(--sws-brand-3); }
.sw-amount-free { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.sw-amount-free input { flex: 1 1 auto; min-height: 44px; border-radius: 10px; padding: .5rem .75rem;
                        border: 1px solid rgba(167,139,250,.35); background: rgba(10,8,26,.6); color: #fff; }

.sw-mode-list { display: grid; gap: .45rem; margin: .5rem 0 1rem; }
.sw-mode-list label { display: flex; gap: .55rem; align-items: flex-start; padding: .55rem .7rem;
                      border: 1px solid rgba(167,139,250,.22); border-radius: 10px; cursor: pointer; }
.sw-mode-list small { display: block; color: var(--text-secondary, #b9bed4); }

/* ── Sternenfeld ──────────────────────────────────────────────────
   Drei Ebenen: ein Nachthimmel als Verlauf, zwei Punktraster darüber,
   dazu die Unterstützer als Sterne. Alles rein über CSS -- kein Timer,
   kein Canvas, keine Last auf schwachen Geräten.

   Die Wand ist eine Flex-Spalte: der Sternbereich nimmt den freien
   Platz und zentriert seinen Inhalt. Sonst klebte bei wenigen Sternen
   alles oben links und darunter stand ein leeres Feld. */
.sw-wall { position: relative; display: flex; flex-direction: column;
           border-radius: 18px; padding: 1.5rem 1.35rem 1.2rem; overflow: hidden;
           min-height: clamp(430px, 46vh, 640px);
           background:
               radial-gradient(760px 300px at 15% -12%, rgba(139,92,246,.28), transparent 62%),
               radial-gradient(520px 260px at 88% 6%, rgba(56,189,248,.14), transparent 60%),
               radial-gradient(420px 220px at 62% 108%, rgba(216,180,254,.10), transparent 65%),
               linear-gradient(165deg, #080c1c 0%, #120d29 55%, #0a0a1f 100%);
           border: 1px solid rgba(167,139,250,.32);
           box-shadow: inset 0 0 90px rgba(0,0,0,.45); }
/* Bei wenigen Sternen etwas flacher -- aber bewusst noch groß genug,
   damit der Himmel wirkt. */
.sw-wall--sparse { min-height: clamp(360px, 38vh, 500px); }

/* Polarlicht: ein weiches, langsam wanderndes Band. Gibt der Fläche
   Tiefe, ohne dass ein Bild geladen werden muss. */
.sw-wall-aurora { position: absolute; inset: -30% -10% auto -10%; height: 70%;
                  pointer-events: none; opacity: .5; filter: blur(38px);
                  background:
                      radial-gradient(60% 100% at 20% 50%, rgba(139,92,246,.55), transparent 70%),
                      radial-gradient(50% 100% at 55% 40%, rgba(56,189,248,.30), transparent 70%),
                      radial-gradient(55% 100% at 85% 60%, rgba(216,180,254,.35), transparent 70%);
                  animation: sw-aurora 24s ease-in-out infinite alternate; }
@keyframes sw-aurora {
    from { transform: translate3d(-4%, 0, 0) scaleY(1); }
    to   { transform: translate3d(4%, 6%, 0) scaleY(1.18); }
}

/* Sterngewölbe: zwei Punktraster in unterschiedlicher Dichte und Tempo.
   Die zweite Ebene driftet zusätzlich langsam -- dadurch entsteht Tiefe
   ohne ein einziges Bild. */
.sw-wall::before, .sw-wall::after {
    content: ""; position: absolute; inset: -10%; pointer-events: none;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.85), transparent 55%),
        radial-gradient(1.6px 1.6px at 63% 14%, rgba(255,255,255,.65), transparent 55%),
        radial-gradient(1.6px 1.6px at 82% 41%, rgba(216,180,254,.8), transparent 55%),
        radial-gradient(1.6px 1.6px at 27% 68%, rgba(255,255,255,.6), transparent 55%),
        radial-gradient(1.6px 1.6px at 46% 88%, rgba(167,139,250,.7), transparent 55%),
        radial-gradient(1.6px 1.6px at 91% 79%, rgba(255,255,255,.55), transparent 55%),
        radial-gradient(2.2px 2.2px at 38% 51%, rgba(255,255,255,.5), transparent 60%),
        radial-gradient(1.6px 1.6px at 7% 54%, rgba(255,255,255,.45), transparent 55%),
        radial-gradient(1.6px 1.6px at 74% 92%, rgba(216,180,254,.5), transparent 55%);
    animation: sw-twinkle 5.5s ease-in-out infinite;
}
.sw-wall::after {
    background-image:
        radial-gradient(1px 1px at 34% 33%, rgba(255,255,255,.55), transparent 55%),
        radial-gradient(1px 1px at 71% 57%, rgba(255,255,255,.45), transparent 55%),
        radial-gradient(1px 1px at 19% 47%, rgba(255,255,255,.4), transparent 55%),
        radial-gradient(1px 1px at 57% 76%, rgba(255,255,255,.45), transparent 55%),
        radial-gradient(1px 1px at 88% 24%, rgba(255,255,255,.4), transparent 55%),
        radial-gradient(1px 1px at 44% 9%, rgba(255,255,255,.35), transparent 55%),
        radial-gradient(1px 1px at 24% 86%, rgba(255,255,255,.4), transparent 55%);
    animation: sw-twinkle 8.5s ease-in-out 1.4s infinite, sw-drift 46s linear infinite;
}
@keyframes sw-twinkle { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes sw-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(3%, -2%, 0); } }

/* Die eigene Stil-Ebene für stille Unterstützungen ist entfallen:
   ihre Sterne stehen jetzt im Feld selbst (.sw-sky-star--anon), mit
   derselben Verteilung wie alle anderen. Früher lagen sie als
   separate Punkte dahinter -- und wurden dadurch doppelt gezeigt. */
/* Sternschnuppe: ein einzelner Streifen, der selten durchs Bild zieht.
   Eigenes Element statt Pseudo -- .sw-wall-stars ist ein Flex-Container,
   ein ::before darin würde als Flex-Kind das Layout verschieben. */
.sw-wall-comet { position: absolute; top: 12%; left: -12%; width: 140px; height: 1px;
                 pointer-events: none; opacity: 0;
                 background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
                 filter: drop-shadow(0 0 6px rgba(216,180,254,.9));
                 animation: sw-comet 18s ease-in infinite; }
/* Der Weg beginnt erst bei 88 % -- ohne den Halt davor würde die
   Schnuppe die ganze Zeit unsichtbar mitwandern und erst kurz vor dem
   Bildrand aufblitzen. */
@keyframes sw-comet {
    0%, 88%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(14deg); }
    90%       { opacity: .9; }
    100%      { opacity: 0; transform: translate3d(115vw, 40vh, 0) rotate(14deg); }
}

.sw-wall-head { position: relative; z-index: 1; display: flex; flex-wrap: wrap;
                align-items: center; gap: .7rem; margin-bottom: 1rem; }
.sw-wall-head h2 { margin: 0; }
/* Zähler als Pille statt grauer Fließtext: er ist die eigentliche
   Botschaft der Wand und ging vorher neben der Überschrift unter. */
.sw-wall-count { display: inline-flex; align-items: center; gap: .4rem;
                 padding: .26rem .7rem; border-radius: 999px;
                 font-size: .82rem; font-weight: 600; color: #e9d5ff;
                 border: 1px solid rgba(167,139,250,.38);
                 background: rgba(139,92,246,.16); }

/* Die frühere Darstellung als Pillen in einer Flex-Reihe ist
   entfallen. Sie ließ sich nicht zu einem Sternbild machen: die
   Chips standen dicht nebeneinander, und Verbindungslinien
   zwischen ihnen wirkten wie ein Fehler statt wie eine Figur.
   Ersetzt durch ein Feld mit freien Positionen (siehe unten). */

/* ── Sternenhimmel ────────────────────────────────────────────────────
   Das Feld ist eine Fläche, kein Textfluss. Jeder Stern sitzt an einer
   festen Prozentposition, dadurch bleibt die Verteilung beim Vergrößern
   des Fensters formgleich.

   Die Höhe wächst mit der Wurzel aus der Anzahl: doppelt so viele Sterne
   brauchen nur rund 1,4-fache Fläche, damit die Dichte gleich bleibt.
   Ohne das würden tausend Sterne zu einem weißen Fleck. */
.sw-sky { position: absolute; inset: 0; z-index: 1;
          transform: translate(var(--map-x, 0), var(--map-y, 0)) scale(var(--map-zoom, 1));
          transform-origin: center; transition: transform .22s ease; }
.sw-sky--empty { flex: 0 0 auto; min-height: 0; }

.sw-map-tools { position: relative; z-index: 3; display: flex; align-items: center;
                justify-content: space-between; gap: .75rem; min-height: 38px;
                margin: .1rem 0 .45rem; color: #9fb0c9; font-size: .72rem; }
.sw-map-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-map-actions { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.sw-map-action { display: inline-grid; place-items: center; width: 34px; height: 34px;
                 padding: 0; border-radius: 6px; cursor: pointer; color: #dbeafe;
                 border: 1px solid rgba(125,211,252,.25); background: rgba(14,165,233,.08); }
.sw-map-action:hover, .sw-map-action:focus-visible { color: #fff;
                 border-color: rgba(125,211,252,.6); background: rgba(14,165,233,.18); }
.sw-map-action:focus-visible { outline: 2px solid #bae6fd; outline-offset: 2px; }
.sw-map-action:disabled { opacity: .35; cursor: default; }
.sw-map-zoom { min-width: 3.1rem; text-align: center; font-variant-numeric: tabular-nums; }

.sw-sky-viewport { position: relative; z-index: 1; flex: 1 1 auto;
                   min-height: var(--sky-hoehe, clamp(280px, 32vh, 420px)); overflow: hidden;
                   border: 1px solid rgba(125,211,252,.12); border-radius: 6px;
                   background: rgba(2,6,23,.16); user-select: none; }
.sw-sky-viewport.is-zoomed { cursor: grab; touch-action: none; }
.sw-sky-viewport.is-dragging { cursor: grabbing; }
.sw-sky-viewport.is-3d { min-height: clamp(420px, 58vh, 720px); touch-action: none; }
.sw-sky-viewport.is-3d .sw-sky,
.sw-sky-viewport.is-3d .sw-map-grid { display: none; }
.sw-star-map-canvas { position: absolute; inset: 0; display: block;
                      z-index: 4; width: 100%; height: 100%; cursor: grab; outline: 0;
                      pointer-events: auto; user-select: none; touch-action: none; }
.sw-star-map-tooltip { position: absolute; z-index: 8; max-width: min(280px, 70vw);
                       transform: translate(-50%, calc(-100% - 14px)); pointer-events: none;
                       padding: .36rem .55rem; border-radius: 6px; color: #f8fafc;
                       border: 1px solid rgba(125,211,252,.35);
                       background: rgba(3,7,18,.94); box-shadow: 0 8px 24px rgba(0,0,0,.42);
                       font-size: .72rem; line-height: 1.3; white-space: nowrap; }
        .sw-star-map-label { position: absolute; z-index: 6;
                                                 transform: translate(-50%, .65rem); pointer-events: none;
                                                 color: #f8fafc; font-size: .74rem; font-weight: 800;
                                                 text-shadow: 0 1px 5px #020617, 0 0 12px #020617;
                                                 white-space: nowrap; user-select: none; }
.sw-map-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
               background-image:
                   repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(125,211,252,.075) 12.5%),
                   repeating-linear-gradient(0deg, transparent 0, transparent calc(16.666% - 1px), rgba(125,211,252,.075) 16.666%); }
.sw-map-axis { position: absolute; display: grid; color: rgba(186,230,253,.34);
           font-size: .58rem; line-height: 1; }
.sw-map-axis--columns { top: .35rem; left: 0; right: 0;
            grid-template-columns: repeat(8, 1fr); text-align: center; }
.sw-map-axis--rows { top: 0; bottom: 0; left: .4rem;
             grid-template-rows: repeat(6, 1fr); align-items: center; }

.sw-sky.is-filtered .sw-sky-star { opacity: .16; }
.sw-sky.is-filtered .sw-sky-star.is-tier-match { opacity: 1; z-index: 5; }
.sw-sky.is-filtered .sw-sky-star.is-tier-match .sw-sky-dot {
    outline: 1px solid rgba(255,255,255,.9); outline-offset: 7px; }

.sw-sky-star { position: absolute; left: var(--sx); top: var(--sy);
               --sw-par-x: 0px; --sw-par-y: 0px;
               z-index: 1; display: flex; flex-direction: column;
               align-items: center; gap: .3rem;
               transform: translate(calc(-50% + var(--sw-par-x)), calc(-50% + var(--sw-par-y)));
               transition: transform .25s ease;
               animation: sw-star-in .6s ease-out both; }

/* Der Punkt selbst: harter Kern, weicher Schein. Zwei Schatten statt
   eines Verlaufs -- schärfer im Zentrum, damit er als Stern liest. */
.sw-sky-dot { position: relative; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
              background: #fff;
              box-shadow: 0 0 6px 1px rgba(216,180,254,.85),
                          0 0 16px 4px rgba(139,92,246,.45);
              animation: sw-star-pulse 4.2s ease-in-out infinite; }
@keyframes sw-star-pulse { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
/* Versetzte Takte, sonst blinkt die ganze Wand im Gleichschritt. */
.sw-sky-star[style*="--sd: 1"] .sw-sky-dot { animation-delay: -.9s; animation-duration: 5.3s; }
.sw-sky-star[style*="--sd: 2"] .sw-sky-dot { animation-delay: -2.1s; animation-duration: 3.8s; }
.sw-sky-star[style*="--sd: 3"] .sw-sky-dot { animation-delay: -3.4s; animation-duration: 4.9s; }
.sw-sky-star[style*="--sd: 4"] .sw-sky-dot { animation-delay: -1.5s; animation-duration: 6.1s; }
.sw-sky-star[style*="--sd: 5"] .sw-sky-dot { animation-delay: -2.8s; animation-duration: 4.4s; }
.sw-sky-star[style*="--sd: 6"] .sw-sky-dot { animation-delay: -4.0s; animation-duration: 5.7s; }

.sw-sky-name { font-size: .78rem; font-weight: 600; letter-spacing: .01em;
               color: #e6e2ff; white-space: nowrap;
               text-shadow: 0 1px 6px rgba(5,8,22,.95), 0 0 14px rgba(5,8,22,.8); }

/* ── Dichtestufen ─────────────────────────────────────────────────────
   Der entscheidende Punkt für Skalierung: bei tausend Sternen kann nicht
   jeder Name stehen -- sie lägen übereinander und keiner wäre lesbar.
   Deshalb werden Namen mit steigender Dichte zurückgenommen, zuerst bei
   den kleinen Stufen. Lesbar bleibt jeder Name per Zeigen (title-Attribut
   und Einblenden beim Überfahren) -- er verschwindet also nicht, er
   drängt sich nur nicht mehr auf. */
.sw-sky--mittel .sw-sky-dot { width: 5px; height: 5px; }
/* Ab hier nur noch die oberen Stufen beschriftet. */
.sw-sky--mittel .sw-sky-star--stern .sw-sky-name,
.sw-sky--mittel .sw-sky-star--funkelstern .sw-sky-name { display: none; }

.sw-sky--dicht .sw-sky-dot { width: 4px; height: 4px;
                             box-shadow: 0 0 4px 1px rgba(216,180,254,.7),
                                         0 0 10px 3px rgba(139,92,246,.3);
                             animation: none; }
.sw-sky--dicht .sw-sky-star--stern .sw-sky-name,
.sw-sky--dicht .sw-sky-star--funkelstern .sw-sky-name,
.sw-sky--dicht .sw-sky-star--riese .sw-sky-name,
.sw-sky--dicht .sw-sky-star--supernova .sw-sky-name,
.sw-sky--dicht .sw-sky-star--nova .sw-sky-name { display: none; }
.sw-sky--dicht .sw-sky-name { font-size: .72rem; }

/* Beim Überfahren erscheint der Name immer -- unabhängig von der Stufe.
   Ausgeblendete Namen sind bereits absolut positioniert. Würde diese
   Geometrie erst bei :hover gesetzt, schrumpfte der Flex-Container und
   spränge durch translate(-50%, -50%) unter dem Mauszeiger weg. */
.sw-sky--mittel .sw-sky-star--stern .sw-sky-name,
.sw-sky--mittel .sw-sky-star--funkelstern .sw-sky-name,
.sw-sky--dicht .sw-sky-star--stern .sw-sky-name,
.sw-sky--dicht .sw-sky-star--funkelstern .sw-sky-name,
.sw-sky--dicht .sw-sky-star--riese .sw-sky-name,
.sw-sky--dicht .sw-sky-star--supernova .sw-sky-name,
.sw-sky--dicht .sw-sky-star--nova .sw-sky-name {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); margin-top: .3rem;
    padding: .1rem .4rem; border-radius: 6px;
    background: rgba(8,12,30,.92); z-index: 3; }
.sw-sky-star:hover .sw-sky-name,
.sw-sky-star:focus-visible .sw-sky-name {
    display: block; }
.sw-sky-star { cursor: default; }
.sw-sky-star--anon .sw-sky-name { display: none; position: absolute; top: 100%; left: 50%;
                  transform: translateX(-50%); margin-top: .3rem;
                  padding: .1rem .4rem; border-radius: 6px; z-index: 3;
                  color: #aebbd3; background: rgba(8,12,30,.92);
                  font-weight: 600; }

  /* Anonyme Sterne behalten die volle Lichtsignatur ihrer Klasse. Nur
      Name, Tooltip und Fokus fehlen; optisch sind sie gleichwertig. */

  /* Stufen: klar erkennbare Lichtsignaturen. Die Unterschiede
      bleiben auf Kern, Farbe und Schein begrenzt; Namen werden nicht
      größer und niemand wird durch Ranglisten-Zahlen vorgeführt. */
  .sw-sky-star--funkelstern .sw-sky-dot { width: 7px; height: 7px;
                                                        background: #e0f2fe;
                                                        box-shadow: 0 0 8px 2px rgba(125,211,252,.82),
                                                                        0 0 18px 5px rgba(14,165,233,.35); }
  .sw-sky-star--funkelstern .sw-sky-name { color: #bae6fd; }

.sw-sky-star--riese .sw-sky-dot { width: 8px; height: 8px;
                                  box-shadow: 0 0 8px 2px rgba(216,180,254,.9),
                                              0 0 20px 6px rgba(139,92,246,.5); }
.sw-sky-star--riese .sw-sky-name { color: #efe7ff; }

.sw-sky-star--supernova .sw-sky-dot { width: 10px; height: 10px;
                                      background: #fdf4ff;
                                      box-shadow: 0 0 10px 3px rgba(232,205,255,.95),
                                                  0 0 26px 8px rgba(168,85,247,.55); }
.sw-sky-star--supernova .sw-sky-name { color: #f3e8ff; font-weight: 700; }

.sw-sky-star--nova .sw-sky-dot { width: 12px; height: 12px;
                                 background: #fffbeb;
                                 box-shadow: 0 0 12px 3px rgba(253,224,71,.9),
                                             0 0 30px 10px rgba(250,204,21,.45); }
.sw-sky-star--nova .sw-sky-name { color: #fde68a; font-weight: 800; }

.sw-sky-star--hypernova .sw-sky-dot { width: 14px; height: 14px;
                      background: #fdf2f8;
                      box-shadow: 0 0 12px 3px rgba(249,168,212,.95),
                          0 0 34px 11px rgba(219,39,119,.42); }
.sw-sky-star--hypernova .sw-sky-name { color: #fbcfe8; font-weight: 800; }

.sw-sky-star--pulsar .sw-sky-dot { width: 15px; height: 15px;
                   background: #ecfeff;
                   box-shadow: 0 0 13px 3px rgba(165,243,252,.98),
                           0 0 38px 12px rgba(6,182,212,.48); }
.sw-sky-star--pulsar .sw-sky-dot::after { content: ""; position: absolute;
                       left: 50%; top: -8px; width: 1px; height: 31px;
                       transform: translateX(-50%); opacity: .55;
                       background: linear-gradient(transparent, #cffafe, transparent); }
.sw-sky-star--pulsar .sw-sky-name { color: #cffafe; font-weight: 800; }

.sw-sky-star--quasar .sw-sky-dot { width: 17px; height: 17px;
                   background: #fffbeb;
                   box-shadow: 0 0 14px 4px rgba(254,240,138,1),
                           0 0 42px 14px rgba(245,158,11,.52),
                           0 0 70px 18px rgba(56,189,248,.18); }
.sw-sky-star--quasar .sw-sky-name { color: #fef3c7; font-weight: 800; }

.sw-sky-star--galaxie .sw-sky-dot { width: 19px; height: 19px;
                    background: #fff;
                    box-shadow: 0 0 14px 4px rgba(255,255,255,1),
                        0 0 38px 13px rgba(125,211,252,.5),
                        0 0 62px 20px rgba(244,114,182,.3); }
.sw-sky-star--galaxie .sw-sky-dot::after { content: ""; position: absolute;
                        inset: -7px; border-radius: 50%;
                        border: 1px solid rgba(253,230,138,.72);
                        box-shadow: 0 0 14px rgba(253,230,138,.38); }
.sw-sky-star--galaxie .sw-sky-name { color: #fff; font-weight: 800; }

.sw-sky-star--spiralgalaxie .sw-sky-dot { width: 20px; height: 20px;
                      background: #fff7ed;
                      box-shadow: 0 0 15px 4px rgba(255,255,255,1),
                              0 0 42px 14px rgba(56,189,248,.48),
                              0 0 68px 22px rgba(251,146,60,.28); }
.sw-sky-star--spiralgalaxie .sw-sky-dot::after { content: ""; position: absolute;
                         inset: -9px -15px; border-radius: 50%;
                         border: 1px solid rgba(186,230,253,.75);
                         transform: rotate(-24deg); }
.sw-sky-star--spiralgalaxie .sw-sky-name { color: #ffedd5; font-weight: 800; }

.sw-sky-star--galaxienhaufen .sw-sky-dot { width: 21px; height: 21px;
                       background: #f8fafc;
                       box-shadow: -10px -5px 0 -7px #bae6fd,
                               11px 6px 0 -7px #fbcfe8,
                               0 0 17px 5px rgba(255,255,255,1),
                               0 0 48px 16px rgba(167,139,250,.5); }
.sw-sky-star--galaxienhaufen .sw-sky-name { color: #ede9fe; font-weight: 800; }

.sw-sky-star--superhaufen .sw-sky-dot { width: 23px; height: 23px;
                     background: #f0fdfa;
                     box-shadow: -12px 7px 0 -8px #67e8f9,
                             13px -8px 0 -8px #fde68a,
                             0 0 18px 5px rgba(204,251,241,1),
                             0 0 54px 18px rgba(20,184,166,.52); }
.sw-sky-star--superhaufen .sw-sky-name { color: #ccfbf1; font-weight: 800; }

.sw-sky-star--kosmisches-netz .sw-sky-dot { width: 24px; height: 24px;
                        background: #eff6ff;
                        box-shadow: 0 0 20px 6px rgba(219,234,254,1),
                            0 0 58px 19px rgba(59,130,246,.48),
                            0 0 82px 27px rgba(236,72,153,.18); }
.sw-sky-star--kosmisches-netz .sw-sky-dot::after { content: ""; position: absolute;
                           inset: -14px; border-radius: 50%;
                           border: 1px dashed rgba(147,197,253,.72);
                           box-shadow: 0 0 18px rgba(244,114,182,.35); }
.sw-sky-star--kosmisches-netz .sw-sky-name { color: #dbeafe; font-weight: 800; }

.sw-sky-star--universum .sw-sky-dot { width: 26px; height: 26px;
                      background: #020617;
                      border: 2px solid rgba(255,255,255,.95);
                      box-shadow: 0 0 12px 4px rgba(255,255,255,.95),
                          0 0 38px 13px rgba(34,211,238,.62),
                          0 0 68px 23px rgba(168,85,247,.45),
                          0 0 94px 31px rgba(251,191,36,.2); }
.sw-sky-star--universum .sw-sky-dot::after { content: ""; position: absolute;
                         inset: -11px; border-radius: 50%;
                         border: 1px solid rgba(253,230,138,.82); }
.sw-sky-star--universum .sw-sky-name { color: #fff; font-weight: 800; }

.sw-sky-star .sw-sky-dot { transition: filter .16s ease; }
.sw-sky-star:hover .sw-sky-dot,
.sw-sky-star:focus-visible .sw-sky-dot { filter: brightness(1.35); }

/* Einladung: unten mittig, gestrichelter Ring statt Lichtpunkt --
   erkennbar als Angebot, nicht als vergebener Platz. */
.sw-sky-invite { position: absolute; left: 50%; bottom: 4%;
                 transform: translateX(-50%); z-index: 2;
                 display: flex; align-items: center; gap: .45rem;
                 padding: .34rem .8rem; border-radius: 999px;
                 text-decoration: none; color: #d7cbff;
                 border: 1px dashed rgba(216,180,254,.45);
                 background: rgba(139,92,246,.12);
                 transition: border-color .18s ease, background .18s ease, color .18s ease; }
.sw-sky-invite:hover { border-color: rgba(216,180,254,.9);
                       background: rgba(139,92,246,.24); color: #fff; }
.sw-sky-invite .sw-sky-dot { width: 5px; height: 5px; animation: none;
                             background: rgba(216,180,254,.7); box-shadow: none; }
.sw-sky-invite .sw-sky-name { font-size: .74rem; color: inherit; text-shadow: none; }

/* Die Stufen-Regeln der alten Pillen sind entfallen. Ihre
   Abstufung steckt jetzt in .sw-sky-star--<stufe> weiter oben,
   wo sie auf Punktgröße und Schein wirkt statt auf Schriftgrad. */

/* Twitch-Anmeldung: Twitch-Lila, damit sofort klar ist, wohin der Klick
   führt. Eigene Klasse -- die Dashboard-Buttons liegen in einem
   Stylesheet, das diese Seite nicht lädt. */
/* Anbieterfarbe bleibt wie beim Discord-Login in global.css:
   Wiedererkennung schlägt die Markenfarbe. Radius 10 statt Pille,
   Hover nur über die Helligkeit, Fokusring aus global.css. */
.sw-support-twitch { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
                     margin-top: .65rem; padding: .6rem 1.15rem; min-height: 44px;
                     border-radius: 10px; text-decoration: none;
                     font-size: .92rem; font-weight: 700; color: #fff;
                     /* Vorher #9b59ff -> #9146FF: Weiß darauf 3,99-4,64:1, also unter
                        4,5:1 für die 14,7-px-Beschriftung. Eine Stufe dunkler im selben
                        Twitch-Lila (#8a3ffc -> #772ce8) hält 5,00/6,34:1. Zurück auf die
                        helleren Werte heißt: Knopftext wieder unter AA. */
                     background: linear-gradient(180deg, #8a3ffc 0%, #772ce8 100%);
                     border: 1px solid rgba(255,255,255,.18);
                     box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px rgba(145,70,255,.28);
                     transition: filter .15s ease, box-shadow .15s ease; }
.sw-support-twitch:hover, .sw-support-twitch:focus-visible {
    color: #fff; filter: brightness(1.08); }

.sw-support-signout { margin-left: .35rem; color: #d8b4fe; text-decoration: underline; white-space: nowrap; }

/* Nachträgliche Änderung der Nennung: optisch abgesetzt, damit sie nicht
   als weiterer Schritt des Bezahlvorgangs gelesen wird. */
.sw-support-prefs { margin-top: 1.4rem; padding-top: 1.2rem;
                    border-top: 1px solid rgba(167,139,250,.22); }
.sw-support-prefs h3 { margin-top: 0; }
.sw-support-prefs-save { min-height: 42px; padding: .5rem 1.1rem; border-radius: 10px;
                         border: 1px solid var(--sws-line-2); cursor: pointer;
                         background: rgba(148,163,184,.08); color: var(--sws-text); font-weight: 700;
                         transition: background-color .15s ease, border-color .15s ease; }
.sw-support-prefs-save:hover, .sw-support-prefs-save:focus-visible {
    background: rgba(148,163,184,.15); border-color: rgba(196,181,253,.45); color: #fff; }

/* Zustimmungen: eigene Klasse -- die generische sw-consent gibt es in
   global.css nicht, ohne sie klebten beide Haken als Fließtext. */
.sw-support-consent { display: grid; gap: .55rem; margin: 1rem 0 .25rem; }
.sw-support-consent label { display: flex; gap: .55rem; align-items: flex-start;
                            font-size: .84rem; line-height: 1.5; color: #c9cfe6; cursor: pointer; }
.sw-support-consent input[type="checkbox"] { margin-top: .2rem; width: 1.1rem; height: 1.1rem;
                                             accent-color: var(--sws-brand, #8b5cf6); flex: 0 0 auto; }
.sw-support-consent a { color: #d8b4fe; }

/* Eigener Button: btn-plan-start lebt in dashboard-inline.css, das diese
   Seite nicht einbindet -- übrig blieb der graue Bootstrap-Standard auf
   dunklem Grund, praktisch unlesbar. */
.sw-support-submit { display: flex; align-items: center; justify-content: center; gap: .5rem;
                     width: 100%; min-height: 50px; margin-top: 1rem;
                     padding: .7rem 1.1rem; border-radius: 10px;
                     font-size: 1rem; font-weight: 800; letter-spacing: .01em;
                     color: #fff; cursor: pointer;
                     background: var(--sws-cta-grad, linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%));
                     border: 1px solid rgba(196,181,253,.38);
                     box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px rgba(124,58,237,.32);
                     transition: box-shadow .15s ease, filter .15s ease, border-color .15s ease; }
.sw-support-submit:hover, .sw-support-submit:focus-visible {
    background: var(--sws-cta-grad-hover, linear-gradient(180deg, #8349f1 0%, #7432e6 100%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 30px rgba(124,58,237,.42); }
@media (prefers-reduced-motion: reduce) {
    .sw-support-submit, .sw-support-twitch { transition: none; }
}

/* Leerer Himmel: soll einladen statt nach Fehlermeldung aussehen.
   Wächst wie der Sternbereich, damit die Einladung mittig steht. */
.sw-wall-empty { position: relative; z-index: 1; color: #b9bed4; flex: 1 1 auto;
                 display: flex; flex-direction: column; align-items: center;
                 justify-content: center;
                 text-align: center; gap: .35rem; padding: 2.2rem 1rem 1.6rem; }
.sw-wall-empty-star { font-size: 2.4rem; line-height: 1; color: #e9d5ff;
                      filter: drop-shadow(0 0 14px rgba(216,180,254,.55));
                      animation: sw-empty-pulse 3.6s ease-in-out infinite; }
.sw-wall-empty-title { margin: .35rem 0 0; font-size: 1.02rem; font-weight: 700; color: #efe9ff; }
.sw-wall-empty-text { margin: 0; font-size: .88rem; max-width: 34ch; }
@keyframes sw-empty-pulse { 0%,100% { opacity: .75; transform: scale(1); }
                            50% { opacity: 1; transform: scale(1.08); } }
/* .sw-wall-meta gibt es nicht mehr -- die Wand endet mit den Sternen. */
.sw-wall-sentinel { height: 1px; }
.sw-wall-loading { position: relative; z-index: 1; margin-top: .8rem; color: #b9bed4; font-size: .85rem; }
.sw-legal { font-size: .82rem; color: var(--text-secondary, #b9bed4); line-height: 1.5; }

/* Seitenkomposition: Die Wall ist die Hauptbühne, der Checkout folgt
   als klar abgegrenzter zweiter Schritt. */
.sw-support-wrap { max-width: 1240px; padding-inline: 1.25rem; }
.sw-support-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.35rem; }
.sw-support-action { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
                     min-height: 46px; padding: .65rem 1.15rem; border-radius: 10px;
                     font-weight: 700; text-decoration: none;
                     transition: background-color .15s ease, border-color .15s ease,
                                 box-shadow .15s ease, color .15s ease; }
.sw-support-action--primary { color: #fff; border: 1px solid rgba(196,181,253,.38);
                              background: var(--sws-cta-grad, linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%));
                              box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px rgba(124,58,237,.28); }
.sw-support-action--primary:hover, .sw-support-action--primary:focus-visible {
    color: #fff; background: var(--sws-cta-grad-hover, linear-gradient(180deg, #8349f1 0%, #7432e6 100%));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 28px rgba(124,58,237,.38); }
.sw-support-action--primary i { color: var(--sws-warn); }
.sw-support-action--secondary { color: var(--sws-text); border: 1px solid var(--sws-line-2);
                                background: rgba(148,163,184,.08); }
.sw-support-action--secondary:hover, .sw-support-action--secondary:focus-visible {
    color: #fff; border-color: rgba(196,181,253,.45); background: rgba(148,163,184,.15); }

.sw-support-grid { display: flex; flex-direction: column; gap: 2rem; }
.sw-wall { order: -1; width: 100%; min-height: 560px; border-radius: 8px;
           padding: 1.6rem 1.7rem 1.35rem;
           border-color: rgba(125,211,252,.24);
           box-shadow: inset 0 0 110px rgba(0,0,0,.48), 0 24px 70px rgba(3,7,18,.2); }
.sw-wall--sparse { min-height: 520px; }
.sw-wall-head { justify-content: space-between; margin-bottom: .35rem; }
.sw-wall-head h2 { font-size: 1.55rem; letter-spacing: 0; }
.sw-wall-count { color: #fef3c7; border-color: rgba(250,204,21,.3);
                 background: rgba(250,204,21,.08); }
.sw-wall-count::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                         background: #facc15; box-shadow: 0 0 10px rgba(250,204,21,.9); }
.sw-sky-invite { bottom: 2%; border-radius: 8px; border-color: rgba(125,211,252,.4);
                 color: #bae6fd; background: rgba(14,165,233,.08); }

.sw-support-form-intro { margin: .35rem 0 1.15rem; color: var(--sws-muted); line-height: 1.6; }
.sw-support-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                       gap: .65rem; margin: 0 0 1.4rem; }
.sw-support-promise { display: flex; align-items: center; gap: .55rem; min-width: 0;
                      padding: .7rem .75rem; border: 1px solid var(--sws-line);
                      border-radius: var(--sws-r-sm);
                      color: var(--sws-text-2); background: var(--sws-surface-3);
                      font-size: .82rem; line-height: 1.35; }
.sw-support-promise i { color: var(--sws-brand-2); }
.sw-amount-free { padding: .4rem .75rem; border: 1px solid rgba(167,139,250,.28);
                  border-radius: 8px; background: rgba(4,8,20,.42); }
.sw-amount-free:focus-within { border-color: rgba(125,211,252,.65);
                              box-shadow: 0 0 0 3px rgba(14,165,233,.1); }
.sw-amount-free input { border: 0; padding-inline: 0; font-size: 1.18rem; font-weight: 800;
                        background: transparent; outline: 0; }
.sw-mode-list label { border-radius: 8px; }
.sw-mode-list label:has(input:checked) { border-color: rgba(125,211,252,.5);
                                         background: rgba(14,165,233,.08); }
.sw-support-checkout-note { display: flex; align-items: center; justify-content: center;
                            gap: .45rem; margin: .75rem 0 0; color: var(--sws-faint);
                            font-size: .78rem; text-align: center; }
.sw-support-checkout-note i { color: var(--sws-ok); }

.sw-tier-strip { position: relative; z-index: 2; display: grid;
         grid-template-columns: repeat(7, minmax(0, 1fr));
                 align-items: center; gap: .08rem .28rem;
                 min-height: 42px; margin: 0 -.15rem .2rem;
                 padding: .28rem .2rem .4rem;
         border-bottom: 1px solid rgba(125,211,252,.12); }
/* Schrift vorher .62rem (9,9 px) und Zähler .58rem (9,3 px) - die Knöpfe sind
   echte Filter (aria-pressed), ihre Beschriftung ist Inhalt, kein Zierrat.
   .75rem = 12 px ist die Untergrenze für lesbaren Bedientext; min-height 24 px
   hält die Zielgröße auch bei einzeiliger Beschriftung. */
.sw-tier-strip-item { display: inline-flex; align-items: center; gap: .38rem;
              width: 100%; min-width: 0; min-height: 24px; color: #b9c6dd; font-size: .75rem;
          line-height: 1; white-space: nowrap; cursor: pointer;
          padding: .2rem .28rem; border: 1px solid transparent; border-radius: 5px;
          background: transparent; }
.sw-tier-strip-item:hover, .sw-tier-strip-item:focus-visible,
.sw-tier-strip-item[aria-pressed="true"] { color: #fff; border-color: rgba(125,211,252,.34);
                        background: rgba(14,165,233,.1); }
.sw-tier-strip-item:focus-visible { outline: 2px solid #bae6fd; outline-offset: 2px; }
/* Leere Klassen: nur der Punkt wird gedimmt, nicht der ganze Knopf. Vorher
   opacity .52 auf dem Knopf - der Text #b9c6dd fiel damit auf 2,95-3,5:1,
   und im Betrieb sind die meisten Klassen leer, also fast die ganze Leiste.
   Der Knopf bleibt ein bedienbarer Filter und braucht vollen Kontrast (6,8:1);
   "leer" zeigen der blasse Punkt und die 0 im Zähler. */
.sw-tier-strip-item:not(.is-present) .sw-sky-dot { opacity: .4; }
.sw-tier-count { min-width: 1.2rem; padding: .12rem .28rem; border-radius: 999px;
         text-align: center; color: #bae6fd; background: rgba(14,165,233,.13);
         font-size: .7rem; font-variant-numeric: tabular-nums; }
.sw-tier-strip-item .sw-sky-dot { animation: none; transform: scale(.48); }
/* transform verkleinert nur das Bild, nicht den Platz: der Punkt der oberen
   Klassen belegte weiter 21-26 px Breite (Kosmisches Netz 24 px für 11,5 px
   Sichtbares). Mit 12-px-Schrift lief "Kosmisches Netz 0" dadurch bei 1101 px
   (7 Spalten) um 12 px über den Knopf hinaus. zoom verkleinert Bild UND Platz
   um denselben Faktor, der Punkt sieht gleich aus. Browser ohne zoom (Firefox
   vor 126) behalten die transform-Fassung. */
@supports (zoom: .5) {
    /* margin-right: die Ringe von Spiralgalaxie/Kosmisches Netz ragen rund
       7 px über den Punkt hinaus und berührten ohne den Abstand die Schrift. */
    .sw-tier-strip-item .sw-sky-dot { transform: none; zoom: .48; margin-right: 3px; }
}
/* Letzte Sicherung: eine lange Beschriftung mit mehrstelligem Zähler wird
   gekürzt statt in den Nachbarknopf zu laufen. Der volle Name steht im
   aria-label des Knopfs. */
/* line-height 1.4: bei line-height 1 (vom Knopf) plus overflow:hidden wurden
   die Unterlängen (g, p, y) um 2 px abgeschnitten – „Spiralgalaxie“ las sich
   wie „Spiralqalaxie“. Die Knopfhöhe bleibt unter der 24-px-Mindesthöhe. */
.sw-tier-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }

/* Vier statt sieben Spalten schon unter 1200 px (vorher 1100): mit 12-px-
   Schrift braucht "Kosmisches Netz" samt Zähler rund 150 px, eine von sieben
   Spalten hat bei 1101 px nur 139 px (gemessen), bei 1200 px 154 px. */
@media (max-width: 1199px) {
    .sw-tier-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .sw-support-wrap { padding-inline: .9rem; }
    .sw-support-hero { margin-top: .5rem; }
    .sw-support-lead { font-size: 1rem; }
    .sw-support-actions { display: grid; grid-template-columns: 1fr; }
    .sw-wall, .sw-wall--sparse { min-height: 440px; padding: 1.1rem .9rem 1rem; }
    .sw-wall-head { align-items: flex-start; }
    .sw-wall-head h2 { font-size: 1.25rem; }
    .sw-wall-count { font-size: .72rem; }
    .sw-support-card { padding: 1.2rem 1rem; }
    .sw-support-promises { grid-template-columns: 1fr; }
    .sw-amount-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sw-tier-strip { grid-template-columns: repeat(2, minmax(0, 1fr));
                     gap: .25rem .35rem; min-height: 48px; margin-bottom: .2rem;
                     padding: .4rem .1rem .5rem; }
    /* Zwei Spalten ab 375 px: engere Abstände, damit "Kosmisches Netz" bei
       12 px ganz hineinpasst (gemessen 375 px: 156 px Knopf). */
    .sw-tier-strip-item { gap: .25rem; padding: .22rem .2rem; font-size: .75rem; }
    .sw-tier-count { min-width: 1rem; padding-inline: .2rem; }
    .sw-sky-viewport.is-3d { min-height: 470px; }
}

/* Unter 350 px (320er-Telefone) fehlten auch mit engeren Abständen 2 px für
   "Kosmisches Netz 0": dort lieber ganze Wörter in 11,2 px als 12 px mit
   Auslassungspunkten. Vorher standen hier überall 9,8 px. */
@media (max-width: 349px) {
    .sw-tier-strip-item { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sw-support-action { transition: none; }
    .sw-wall::before, .sw-wall::after { animation: none; opacity: .6; }
    /* Die Anordnung bleibt (das ist Aufbau, keine Bewegung), nur das
       Einblenden, Funkeln und Anheben entfallen. Die Parallaxe schaltet
       sich zusätzlich im Skript selbst ab. */
    .sw-sky-star { animation: none; transition: none; }
    .sw-sky-star--named:hover { transform: translate(-50%, -50%); }
    .sw-sky-dot { animation: none; }
    .sw-wall-aurora { animation: none; }
    /* Lichter bleiben sichtbar, nur das Funkeln entfällt -- die stillen
       Sterne stecken in .sw-sky-dot und sind oben schon abgedeckt. */
    .sw-wall-empty-star { animation: none; }
    /* Sternschnuppe ganz aus: eine querfliegende Linie ist genau die
       Art Bewegung, die hier stört. */
    .sw-wall-comet { display: none; }
}

/* ── Umbau 2026-10-09: Kopf und Formular nebeneinander, Ablauf, FAQ ─────────
   Vorher: Kopf links mit leerer rechter Hälfte, darunter die bis zu 720 px
   hohe Sternenkarte und erst danach das Formular. Jetzt steht das Formular
   ab 980 px neben dem Kopf (oben im Blick), die Karte folgt in voller Breite.
   Unter 980 px bleibt die Reihenfolge Kopf → Formular → Karte. */
.sw-support-wrap { max-width: 1180px; }
.sw-support-top { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr);
                  align-items: start; margin-bottom: 2.25rem; }
@media (min-width: 980px) {
    .sw-support-top { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 2.5rem; }
    /* Das Formular steht direkt daneben – der Sprungknopf dorthin ist überflüssig. */
    .sw-support-top .sw-support-action--primary { display: none; }
}
.sw-support-top .sw-support-hero { max-width: none; margin: 1.25rem 0 0; }
.sw-support-top .sw-support-card { width: 100%; margin: 0; }
@media (min-width: 980px) { .sw-support-top .sw-support-card { margin-top: 1.25rem; } }

.sw-support-steps { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.sw-support-steps li { display: flex; align-items: flex-start; gap: .8rem; color: var(--sws-text-2);
                       line-height: 1.45; }
.sw-support-steps strong { display: block; color: var(--sws-text); font-weight: 700; }
.sw-support-step-num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px;
                       border-radius: 50%; font-weight: 800; font-size: .9rem; color: #fff;
                       background: var(--sws-cta-grad, linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%));
                       box-shadow: 0 0 0 4px rgba(124,58,237,.16); }
.sw-support-hero .sw-support-promises { margin: 1.5rem 0 0; }

/* Formular: Beträge klarer, gewählter Betrag deutlich markiert. */
.sw-support-top .sw-amount-btn { min-height: 48px; font-size: 1rem; }
.sw-support-top .sw-amount-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px rgba(196,181,253,.55), 0 8px 22px rgba(124,58,237,.25); }

/* Sternenklassen: leere ausgeblendet, bis „Alle zeigen“ gewählt ist. */
.sw-tier-strip:not(.is-all) .sw-tier-strip-item:not(.is-present) { display: none; }
.sw-tier-toggle { align-self: flex-start; margin: .2rem 0 .6rem; padding: .3rem .75rem; border-radius: 999px;
                  border: 1px solid rgba(125,211,252,.28); background: rgba(14,165,233,.08);
                  color: #bae6fd; font-size: .78rem; font-weight: 600; cursor: pointer; }
.sw-tier-toggle:hover, .sw-tier-toggle:focus-visible { border-color: rgba(125,211,252,.55); color: #fff; }

/* Häufige Fragen */
.sw-support-faq { max-width: 860px; margin: 3rem auto 0; }
.sw-support-faq h2 { margin: 0 0 1rem; font-size: 1.45rem; font-weight: 750; color: var(--sws-text); }
.sw-support-faq-item { border: 1px solid var(--sws-line); border-radius: var(--sws-r-sm, 10px);
                       background: var(--sws-surface-3, rgba(15,23,42,.55)); margin-bottom: .6rem; }
.sw-support-faq-item > summary { cursor: pointer; list-style: none; padding: .9rem 1.1rem; font-weight: 700;
                                 color: var(--sws-text); display: flex; justify-content: space-between; gap: 1rem; }
.sw-support-faq-item > summary::-webkit-details-marker { display: none; }
.sw-support-faq-item > summary::after { content: "+"; color: var(--sws-brand-2, #a78bfa); font-weight: 800; }
.sw-support-faq-item[open] > summary::after { content: "–"; }
.sw-support-faq-item > p { margin: 0; padding: 0 1.1rem 1rem; color: var(--sws-muted); line-height: 1.6; }
@media (max-width: 640px) {
    .sw-support-hero .sw-support-promises { grid-template-columns: 1fr; }
}

/* Nennung früherer Unterstützungen: eigene Karte in der linken Spalte (2026-10-10). */
.sw-support-left { min-width: 0; }
.sw-support-left .sw-support-prefs { margin-top: 1.75rem; padding: 1.25rem 1.35rem;
                                     border: 1px solid var(--sws-line); border-radius: var(--sws-r-lg, 14px);
                                     background: var(--sws-surface-3, rgba(15,23,42,.55)); max-width: 560px; }
.sw-support-left .sw-support-prefs h3 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 700; color: var(--sws-text); }
.sw-support-left .sw-support-prefs .sw-mode-list { margin: .75rem 0 .9rem; }

/* Feinschliff 2026-10-10 ─────────────────────────────────────────────────
   Klassenleiste: Mit nur wenigen vergebenen Klassen verteilte das 7-Spalten-
   Raster vier Einträge mit großen Lücken über die ganze Breite. Gefiltert
   stehen sie jetzt dicht nebeneinander; „Alle zeigen“ nutzt wieder das Raster. */
.sw-tier-strip:not(.is-all) { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.sw-tier-strip:not(.is-all) .sw-tier-strip-item { width: auto; }
/* Wenige Sterne: Die 3D-Karte war unabhängig von der Anzahl mindestens 420 px
   hoch – bei fünf Sternen fast nur leerer Himmel. */
.sw-wall--sparse { min-height: 0; }
.sw-wall--sparse .sw-sky-viewport.is-3d { min-height: clamp(320px, 40vh, 440px); }
/* Häufige Fragen zweispaltig: Überschrift links, Antworten rechts – passt zur
   Breite der Karte darüber statt schmal in der Mitte zu stehen. */
.sw-support-faq { max-width: none; }
.sw-support-faq-head p { margin: .4rem 0 0; color: var(--sws-muted); line-height: 1.55; }
.sw-support-faq-head a { color: var(--sws-brand-3, #c4b5fd); font-weight: 600; }
@media (min-width: 980px) {
    .sw-support-faq { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
    .sw-support-faq-head { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 6rem; }
    .sw-support-faq-item { grid-column: 2; }
}

/* ── Himmel als Bühne (2026-10-10) ────────────────────────────────────────
   Vorher: ein flacher dunkler Grund, darauf Karten, und der Himmel als
   eigene Karte mitten in der Seite – man sah Kästen, aber nicht, worum es
   geht. Jetzt liegt ein Himmel aus Nebel und Staub fest hinter der ganzen
   Seite (.sw-cosmos), alle Inhalte stehen als Glaskarten davor, und die Wall
   of Stars ist ein offenes Fenster, in dem die echten Unterstützer-Sterne
   stehen (.sw-wall-sky). Wer .hero und footer das z-index nimmt, schiebt den
   Himmel VOR die Inhalte. */
.hero, footer { position: relative; z-index: 1; }

.sw-cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
             background:
                 radial-gradient(1200px 700px at 78% -10%, rgba(139,92,246,.22), transparent 60%),
                 radial-gradient(900px 620px at 6% 32%, rgba(56,189,248,.10), transparent 62%),
                 radial-gradient(1000px 700px at 50% 118%, rgba(216,180,254,.12), transparent 60%),
                 linear-gradient(170deg, #050817 0%, #0c0a22 52%, #060716 100%); }
.sw-cosmos-nebula { position: absolute; inset: -20%;
                    background:
                        radial-gradient(38% 28% at 28% 42%, rgba(124,58,237,.18), transparent 70%),
                        radial-gradient(34% 26% at 74% 64%, rgba(14,165,233,.11), transparent 70%),
                        radial-gradient(30% 22% at 58% 18%, rgba(244,114,182,.07), transparent 70%);
                    filter: blur(28px); animation: sw-nebula 70s ease-in-out infinite alternate; }
@keyframes sw-nebula { from { transform: translate3d(-2%, 0, 0) rotate(0deg); }
                       to   { transform: translate3d(2%, 2%, 0) rotate(4deg); } }
/* Zwei gekachelte Staubebenen: Kachelgröße statt fester Positionen, damit
   der Himmel auf jeder Bildschirmgröße gleich dicht bleibt. */
.sw-cosmos-dust { position: absolute; inset: -12%; background-repeat: repeat; }
.sw-cosmos-dust--fern { opacity: .6; background-size: 300px 300px;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1px 1px at 44% 7%, rgba(255,255,255,.5), transparent 60%),
        radial-gradient(1px 1px at 71% 33%, rgba(216,180,254,.6), transparent 60%),
        radial-gradient(1px 1px at 27% 56%, rgba(255,255,255,.45), transparent 60%),
        radial-gradient(1px 1px at 88% 61%, rgba(255,255,255,.55), transparent 60%),
        radial-gradient(1px 1px at 58% 79%, rgba(186,230,253,.5), transparent 60%),
        radial-gradient(1px 1px at 9% 87%, rgba(255,255,255,.4), transparent 60%),
        radial-gradient(1px 1px at 36% 94%, rgba(255,255,255,.35), transparent 60%);
    animation: sw-twinkle 7s ease-in-out infinite, sw-drift 140s linear infinite; }
.sw-cosmos-dust--nah { opacity: .75; background-size: 540px 540px;
    background-image:
        radial-gradient(1.6px 1.6px at 18% 24%, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(1.4px 1.4px at 66% 12%, rgba(216,180,254,.75), transparent 60%),
        radial-gradient(1.8px 1.8px at 82% 47%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1.4px 1.4px at 39% 66%, rgba(186,230,253,.7), transparent 60%),
        radial-gradient(1.6px 1.6px at 7% 72%, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(1.4px 1.4px at 54% 91%, rgba(253,230,138,.55), transparent 60%);
    animation: sw-twinkle 9.5s ease-in-out 2s infinite, sw-drift 90s linear infinite reverse; }
.sw-cosmos .sw-wall-aurora { inset: -12% -10% auto -10%; height: 55%; opacity: .3; }
.sw-cosmos .sw-wall-comet { top: 20%; }

/* Die echten Sterne stehen im Fenster der Wand (.sw-wall-sky), bündig bis an
   deren Rand. In der ersten Fassung lagen sie fest auf Bildschirmpositionen
   hinter der Seite – dann standen sie neben dem Rahmen und quer durch die
   Überschriften. */
.sw-wall-sky { position: relative; z-index: 1; flex: 1 1 auto; min-height: clamp(300px, 44vh, 520px);
               margin: .5rem -1.6rem 0; }
.sw-wall-sky:has(> .sw-sky-viewport[hidden]) { display: none; }
.sw-wall-sky > .sw-sky-viewport { position: absolute; inset: 0; min-height: 0 !important;
                                  border: 0; border-radius: 0; background: none; }
.sw-wall-sky .sw-map-grid { display: none; }
/* Die 3D-Karte setzt beim Start is-3d und blendet damit die 2D-Sterne aus.
   Im Fenster sollen sie nach dem Erkunden wieder stehen; 3D zeichnet nur im
   Erkunden-Modus. */
.sw-sky-viewport.is-3d:not(.is-exploring) .sw-sky { display: block; }
/* !important: three.js setzt am Canvas display:block als Inline-Stil. */
.sw-sky-viewport:not(.is-exploring) .sw-star-map-canvas,
.sw-sky-viewport:not(.is-exploring) .sw-star-map-label,
.sw-sky-viewport:not(.is-exploring) .sw-star-map-tooltip { display: none !important; }
@media (max-width: 767px) { .sw-wall-sky { margin-inline: -.95rem; min-height: 340px; } }

/* Erkunden-Modus: Inhalte treten zurück, das Feld hängt das Skript in den body
   und zeigt es bildschirmfüllend unter der Navigation. */
html.sw-exploring { overflow: hidden; }
.hero .sw-support-wrap, footer { transition: opacity .3s ease, visibility 0s linear 0s; }
html.sw-exploring .hero .sw-support-wrap,
html.sw-exploring footer { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.sw-sky-viewport.is-exploring { position: fixed; inset: 76px 0 0; z-index: 1040; min-height: 0 !important;
                                border: 0; border-radius: 0; background: rgba(3,6,18,.35); }
.sw-sky-viewport.is-exploring.is-3d .sw-sky,
.sw-sky-viewport.is-exploring.is-3d .sw-map-grid { display: none; }

.sw-explore-bar { display: none; }
html.sw-exploring .sw-explore-bar:not([hidden]) {
    display: flex; position: fixed; z-index: 1060; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%); width: min(780px, calc(100% - 24px)); margin: 0;
    padding: .45rem .5rem .45rem 1rem; border-radius: 14px;
    border: 1px solid rgba(125,211,252,.28); background: rgba(5,9,24,.84);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 18px 50px rgba(0,0,0,.45); color: #cbd5e1; font-size: .78rem; }
.sw-explore-exit { display: inline-flex; align-items: center; gap: .4rem; min-height: 34px; margin-left: .35rem;
                   padding: 0 .85rem; border-radius: 8px; cursor: pointer; white-space: nowrap;
                   border: 1px solid rgba(196,181,253,.45); background: rgba(139,92,246,.24);
                   color: #fff; font: inherit; font-weight: 700; }
.sw-explore-exit:hover, .sw-explore-exit:focus-visible { background: rgba(139,92,246,.38); border-color: rgba(216,180,254,.75); }
.sw-explore-exit:focus-visible { outline: 2px solid #e9d5ff; outline-offset: 2px; }
@media (max-width: 560px) {
    html.sw-exploring .sw-explore-bar:not([hidden]) { flex-wrap: wrap; justify-content: center; padding: .5rem; }
    html.sw-exploring .sw-explore-bar .sw-map-status { flex: 1 1 100%; text-align: center; }
}

/* Glaskarten: der Himmel scheint gedämpft durch, Text bleibt kontrastreich
   (Fläche bei 74 % Deckung, darunter höchstens Nebel und kleine Punkte). */
.sw-support-card,
.sw-support-left .sw-support-prefs,
.sw-support-faq-item,
.sw-support-how .sw-support-steps li {
    background: linear-gradient(180deg, rgba(148,163,184,.05), transparent 140px), rgba(9,12,30,.74);
    border-color: rgba(167,139,250,.22);
    -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); }
.sw-support-hero h1, .sw-support-lead { text-shadow: 0 2px 18px rgba(5,8,23,.85); }

.sw-support-sky-hint { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0;
                       color: #ede9fe; font-weight: 650; line-height: 1.45; }
.sw-support-sky-hint i { flex: 0 0 auto; color: #facc15; filter: drop-shadow(0 0 8px rgba(250,204,21,.75)); }
.sw-support-hero .sw-support-promises { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0 0; }
.sw-support-hero .sw-support-promise { padding: .42rem .8rem; border-radius: 999px;
                                       background: rgba(9,12,30,.62); border-color: rgba(148,163,184,.2);
                                       -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Ablauf als eigene Reihe. */
.sw-support-how { margin: 0 0 2.5rem; }
.sw-support-how-title { margin: 0 0 .85rem; font-size: 1.15rem; font-weight: 750; color: var(--sws-text); }
.sw-support-how .sw-support-steps { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.sw-support-how .sw-support-steps li { padding: 1.05rem 1.1rem; border: 1px solid rgba(167,139,250,.22);
                                       border-radius: var(--sws-r-lg, 14px); }
@media (max-width: 767px) {
    .sw-support-how .sw-support-steps { grid-template-columns: 1fr; }
}

/* Wall of Stars als Fenster: oben Erklärung und Klassen, unten die Knöpfe,
   dazwischen bleibt der Himmel frei. Der obere Verlauf hält den Text lesbar,
   ohne den Himmel darunter zuzudecken. */
.sw-support-grid .sw-wall { overflow: visible; min-height: min(82vh, 820px);
                            padding: 1.5rem 1.6rem 1.4rem; border-radius: 18px;
                            border: 1px solid rgba(125,211,252,.18);
                            background: linear-gradient(180deg, rgba(5,8,23,.66) 0%, rgba(5,8,23,.28) 30%, rgba(5,8,23,0) 52%, rgba(5,8,23,0) 80%, rgba(5,8,23,.5) 100%);
                            box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.sw-support-grid .sw-wall--sparse { min-height: min(72vh, 700px); }
.sw-support-grid .sw-wall::before, .sw-support-grid .sw-wall::after { content: none; }
.sw-wall-intro { position: relative; z-index: 1; max-width: 64ch; margin: .2rem 0 .85rem;
                 color: #dbe4f3; line-height: 1.6; text-shadow: 0 1px 10px rgba(5,8,23,.9); }
.sw-wall-legend { position: relative; z-index: 1; list-style: none; margin: 0 0 .85rem; padding: 0;
                  display: flex; flex-wrap: wrap; gap: .45rem .55rem; }
.sw-wall-legend li { display: inline-flex; align-items: center; gap: .5rem; padding: .36rem .75rem;
                     border-radius: 999px; border: 1px solid rgba(148,163,184,.2);
                     background: rgba(9,12,30,.66); color: #cbd5e1; font-size: .82rem;
                     -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sw-wall-legend strong { color: #fff; font-weight: 700; }
.sw-wall-legend i { color: #c4b5fd; }
.sw-wall-legend .sw-wall-legend-dot { width: 7px; height: 7px; animation: none; }
.sw-support-grid .sw-tier-strip { border-bottom: 0; border-radius: 10px; margin: 0 0 .25rem;
                                  background: rgba(9,12,30,.5); }
.sw-wall-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .6rem;
                   margin-top: auto; padding-top: 1.25rem; }
.sw-support-action--sky { cursor: pointer; color: #fff; font: inherit; font-weight: 700;
                          border: 1px solid rgba(125,211,252,.5);
                          background: linear-gradient(180deg, rgba(14,165,233,.36), rgba(14,165,233,.18));
                          box-shadow: 0 8px 22px rgba(14,165,233,.2); }
.sw-support-action--sky:hover, .sw-support-action--sky:focus-visible {
    color: #fff; border-color: rgba(186,230,253,.8); background: linear-gradient(180deg, rgba(14,165,233,.48), rgba(14,165,233,.26)); }
.sw-support-action--sky i { color: #bae6fd; }
@media (max-width: 767px) {
    .sw-support-grid .sw-wall, .sw-support-grid .sw-wall--sparse { min-height: min(78vh, 680px); padding: 1.1rem .95rem 1rem; }
    .sw-wall-actions { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .sw-cosmos-nebula, .sw-cosmos-dust { animation: none; }
    .hero .sw-support-wrap, footer,
    html.sw-exploring .hero .sw-support-wrap, html.sw-exploring footer { transition: none; }
}