/* =====================================================================
   wochenente.css  --  Design-System "Dunkler Kartentresor"
   ---------------------------------------------------------------------
   Handgeschriebenes CSS mit Custom Properties. KEIN Build-Schritt,
   kein Tailwind, kein npm. Alles selbst gehostet, KEINE externe
   Ressource (Datenschutz: keine Besucherdaten an Dritte).

   Namensraum: alle Klassen mit Praefix "we-" (WochenEnte), damit sie
   nicht mit den inline-Styles der bestehenden Seiten kollidieren.

   Grundhaltung:
   - Dunkles Anthrazit als Grundzustand, Grau als Traeger.
   - FARBE ausschliesslich ueber die Seltenheit. Sonst neutral.
   - Kartenbilder (400x400 PNG) bringen ihren Rahmen selbst mit ->
     KEIN zweiter Border ueber dem Bild. Wir arbeiten mit Abstand,
     Schatten und Glanz.
   - WCAG 2.2 AA, sichtbarer Fokus, prefers-reduced-motion, Touch >=44px.

   Inhalt:
     1. Tokens (:root)
     2. Reset / Grundlagen
     3. Kopfzeile + Tab-Navigation
     4. Buttons
     5. Formularfelder
     6. Hinweise / Fehlermeldungen
     7. Karten-Raster + Kartenkachel (inkl. Seltenheit/Zustaende)
     8. Set-Fortschritt
     9. Booster-Buehne (Aufdeckung)
    10. Tabelle (Leaderboard)
    11. Textseite (Verkaufsseite)
    12. Utilities
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  /* --- Farbe: Traeger (neutral, KEINE Markenfarbe) ------------------ */
  --we-bg:            #0e1116;   /* tiefes Anthrazit, Seiten-Grund       */
  --we-bg-2:          #131820;   /* zweiter Verlaufspol                  */
  --we-surface:       #1a1f28;   /* Karten-/Panel-Traeger                */
  --we-surface-2:     #222835;   /* erhoehte Flaeche (Hover, Menue)      */
  --we-surface-3:     #2b3342;   /* Reihen-Hover, aktive Zelle           */
  --we-inset:         #0b0e13;   /* vertiefte Mulde (leere Album-Slots)  */

  --we-line:          rgba(255,255,255,0.08);  /* Standard-Trennlinie    */
  --we-line-strong:   rgba(255,255,255,0.16);  /* betonter Rand          */

  /* --- Farbe: Text (Kontraste gegen --we-surface/-bg, AA geprueft) -- */
  --we-text:          #eaeef4;   /* Vordergrund, ~14:1 auf --we-surface  */
  --we-text-muted:    #a7b0bf;   /* sekundaer, ~6.3:1 auf --we-surface   */
  --we-text-faint:    #7c8698;   /* tertiaer/Captions, ~3.8:1 -> nur     */
                                 /* fuer Grossschrift/Deko, nie Fliesst. */

  /* --- Seltenheit: hier lebt ALLE Farbe. Index 0..3 wie im Backend -- */
  /* NICHT frei gewaehlt: die Werte folgen den GEMALTEN Rahmen in       */
  /* images/Rahmen/*.png. Die sind Teil des 400x400-Kartenbildes und    */
  /* nicht aenderbar - eine Kachel in Fremdfarbe wuerde bei jeder       */
  /* einzelnen Karte gegen das Bild arbeiten. Gemessen am 12.08.2026    */
  /* (Randabtastung der vier PNG):                                     */
  /*   Common    Farbton 4-36 Grad, Saettigung 65%  -> Bronze/Kupfer   */
  /*   Rare      Saettigung 0%                      -> reines Silber   */
  /*   Ultimate  #BE974D                            -> Gold           */
  /*   Prismatic Farbton 198-250 Grad, Saett. 12%   -> eisiges Blau-   */
  /*             Violett, KEIN Regenbogen                             */
  /* Die Leiter Bronze -> Silber -> Gold -> Eis ist damit auch         */
  /* semantisch eine Rangfolge. Wer sie aendert, muss die PNG neu      */
  /* zeichnen lassen - nicht umgekehrt.                               */

  /* 0 Common  -- Bronze/Kupfer, warm und stumpf: die Basis            */
  --we-r0:            #c98f63;
  --we-r0-weich:      rgba(201,143,99,0.16);
  --we-r0-glanz:      rgba(201,143,99,0.30);

  /* 1 Rare  -- Silber, neutral und kuehl: eine Stufe darueber         */
  --we-r1:            #c9d1dc;
  --we-r1-weich:      rgba(201,209,220,0.16);
  --we-r1-glanz:      rgba(201,209,220,0.34);

  /* 2 Ultimate  -- Gold: warm, teuer, deutlich saftiger als Bronze    */
  --we-r2:            #f3b03f;
  --we-r2-weich:      rgba(243,176,63,0.18);
  --we-r2-glanz:      rgba(243,176,63,0.45);

  /* 3 Prismatic  -- eisiger Schimmer, darf glaenzen, aber statisch.   */
  /* Verlauf Cyan -> Blau -> Violett, im gemessenen Farbtonfenster.    */
  --we-r3:            #a8c6ff;
  --we-r3-weich:      rgba(168,198,255,0.20);
  --we-r3-verlauf:    linear-gradient(120deg,
                        #7fe3f0 0%, #8ab4ff 45%,
                        #b79cff 100%);

  /* --- Seltenheits-Schein fuer den RUHEZUSTAND der Kartenkachel ------ */
  /* Die "-weich"/"-glanz"-Werte oben sind fuer Raender und Hover gedacht */
  /* und im Raster zu zurueckhaltend: eine Karte soll man auch ohne      */
  /* Mauszeiger als Gold oder Silber erkennen. Deshalb kraeftigere       */
  /* Werte, bewusst nur hier - Silber und Gold am staerksten, Bronze     */
  /* bleibt die ruhige Basis, sonst leuchtet das haeufigste am meisten.  */
  /*                                                                         */
  /* DIE LEITER MUSS STEIGEN: Bronze < Silber < Gold < Eis. Kontrolliert     */
  /* wird das gerechnet, als relative Leuchtdichte (WCAG) der Farbe mal      */
  /* Deckkraft - das schaetzt man nicht, das rechnet man nach, weil ein      */
  /* helles Grau bei gleicher Zahl viel praesenter wirkt als ein dunkler,    */
  /* gesaettigter Ton. Am 12.08.2026 nachgemessen und korrigiert; vorher     */
  /* stand die Leiter zweimal auf dem Kopf:                                  */
  /*   Silber 0.83 mal 0.78 = 0.65 gegen Gold 0.50 mal 0.65 = 0.33 und      */
  /*   Prismatic 0.56 mal 0.55 = 0.31. Silber, die ZWEITE Stufe, war also   */
  /*   die praesenteste von allen.                                          */
  /*                                                                         */
  /* Wichtig fuer kuenftige Aenderungen: Gold kann Silber ueber Helligkeit   */
  /* NICHT einholen. Die Goldfarbe hat 0.50 Leuchtdichte, Silber 0.83 -      */
  /* selbst bei voller Deckkraft bleibt Gold darunter. Heller machen wuerde  */
  /* es nur blass. Also musste Silber herunter (0.78 -> 0.55 = 0.46) und     */
  /* Gold auf fast volle Deckkraft hinauf (siehe --we-r2-kante). Gold liegt  */
  /* danach rechnerisch nur knapp vor Silber, wirkt aber klar davor, weil    */
  /* seine Saettigung dazukommt. Denselben Weg geht Prismatic (r3-kante).    */
  /*                                                                         */
  /* Bronze bleibt die ruhige Basis - sonst leuchtet das Haeufigste am       */
  /* meisten.                                                               */
  --we-r0-schein:     rgba(201,143,99,0.45);   /* 0.33 mal 0.45 = 0.15 */
  --we-r1-schein:     rgba(228,236,247,0.55);  /* 0.83 mal 0.55 = 0.46 */
  --we-r2-schein:     rgba(243,176,63,0.85);   /* 0.50 mal 0.85 = 0.42 */
  --we-r3-schein:     rgba(198,222,255,0.95);  /* 0.71 mal 0.95 = 0.68 */

  /* Eigene Kante fuer Gold, damit der Ring nicht mehr auf -glanz (0.45)        */
  /* laeuft: das war der Grund, warum Gold im Raster hinter Silber lag.         */
  --we-r2-kante:      rgba(243,176,63,0.95);   /* 0.50 mal 0.95 = 0.47 */

  /* Eigene Kante fuer Prismatic. Ein noch hellerer Ring haette nicht geholfen: */
  /* je heller, desto silbriger liest er, und dann stehen die beiden obersten   */
  /* Stufen erst recht gleich aus. Deshalb gewinnt Prismatic nicht ueber        */
  /* Helligkeit, sondern ueber SAETTIGUNG - das gesaettigte Eis-Cyan aus dem    */
  /* Verlauf (Leuchtdichte 0.66, also auf Silber-Hoehe, aber unverwechselbar    */
  /* kuehl) plus einen zweiten, engeren Schein, den keine andere Stufe hat.     */
  --we-r3-kante:      rgba(127,227,240,0.95);

  /* --- Verweise: braucht einen EIGENEN Ton -------------------------- */
  /* Vorher lief a{} auf die Rare-Farbe. Seit Rare silber ist, waeren   */
  /* Links vom Fliesstext kaum zu unterscheiden - also eigener Wert.    */
  --we-link:          #7cc4ff;
  --we-link-weich:    rgba(124,196,255,0.18);

  /* --- Zustands-/Systemfarben (funktional, nicht dekorativ) --------- */
  --we-erfolg:        #46c98a;
  --we-erfolg-weich:  rgba(70,201,138,0.14);
  --we-warnung:       #f3b03f;
  --we-warnung-weich: rgba(243,176,63,0.14);
  --we-gefahr:        #ff6b6b;
  --we-gefahr-weich:  rgba(255,107,107,0.14);

  /* --- Fokus-Ring: hoch sichtbar, kontraststark auf Dunkel ---------- */
  --we-fokus:         #7cc4ff;

  /* --- Abstaende (8er-Raster, Dichte 6/10) ------------------------- */
  --we-space-0:  0;
  --we-space-1:  4px;
  --we-space-2:  8px;
  --we-space-3:  12px;
  --we-space-4:  16px;
  --we-space-5:  24px;
  --we-space-6:  32px;
  --we-space-7:  48px;
  --we-space-8:  64px;

  /* --- Radien ------------------------------------------------------ */
  --we-radius-sm:  8px;
  --we-radius:     12px;
  --we-radius-lg:  16px;
  --we-radius-pill: 999px;

  /* --- Schatten (Tiefe statt Rahmen) ------------------------------- */
  --we-shadow-1:  0 1px 2px rgba(0,0,0,0.4);
  --we-shadow-2:  0 4px 12px rgba(0,0,0,0.45);
  --we-shadow-3:  0 12px 30px rgba(0,0,0,0.55);
  /* vertiefte Mulde fuer leere Album-Slots (nach innen) */
  --we-shadow-mulde: inset 0 2px 8px rgba(0,0,0,0.7),
                     inset 0 0 0 1px rgba(255,255,255,0.03);

  /* --- Typografie: reine System-Font-Stacks (keine Fremd-Fonts) ---- */
  /* Sans: Prosa/UI. Mono: alle Zahlen (Besitz, 128/165, Rang) ->      */
  /* gibt der Sammlung den "Tresor/Ledger"-Charakter.                  */
  --we-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --we-font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono",
                  "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Typo-Skala (1.20 Minor Third, Basis 16px) */
  --we-fs-xs:   0.75rem;   /* 12px  Captions, Badges          */
  --we-fs-sm:   0.875rem;  /* 14px  sekundaerer Text          */
  --we-fs-base: 1rem;      /* 16px  Fliesstext                */
  --we-fs-md:   1.25rem;   /* 20px                            */
  --we-fs-lg:   1.5rem;    /* 24px  Abschnittstitel           */
  --we-fs-xl:   2rem;      /* 32px                            */
  --we-fs-2xl:  2.75rem;   /* 44px  Seiten-/Hero-Titel        */

  --we-lh-tight: 1.15;
  --we-lh:       1.55;

  /* --- Motion ------------------------------------------------------ */
  --we-dur-fast: 120ms;
  --we-dur:      200ms;
  --we-dur-slow: 340ms;
  --we-ease:     cubic-bezier(0.4, 0, 0.2, 1);   /* Standard           */
  --we-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* leichtes Ueberschwingen */

  /* --- Layout ------------------------------------------------------ */
  --we-maxw: 1180px;
  --we-header-h: 60px;
}


/* =====================================================================
   2. RESET / GRUNDLAGEN
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.we {
  margin: 0;
  min-height: 100vh;
  font-family: var(--we-font-sans);
  font-size: var(--we-fs-base);
  line-height: var(--we-lh);
  color: var(--we-text);
  /* Grund: Anthrazit mit leichtem, ruhigem Verlauf nach oben */
  background:
    radial-gradient(1200px 600px at 50% -8%, var(--we-bg-2), transparent 60%),
    var(--we-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.we img { max-width: 100%; display: block; }

.we h1, .we h2, .we h3 { line-height: var(--we-lh-tight); margin: 0; }
.we h1 { font-size: var(--we-fs-2xl); font-weight: 700; letter-spacing: -0.02em; }
.we h2 { font-size: var(--we-fs-lg); font-weight: 650; letter-spacing: -0.01em; }
.we h3 { font-size: var(--we-fs-md); font-weight: 600; }
.we p  { margin: 0 0 var(--we-space-4); }
.we a  { color: var(--we-link); text-decoration: none; }
.we a:hover { text-decoration: underline; }

/* Eyebrow / Kennzeichnung ueber Titeln -- Struktur, keine Deko */
.we-eyebrow {
  font-family: var(--we-font-mono);
  font-size: var(--we-fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--we-text-faint);
  margin-bottom: var(--we-space-2);
}

/* Zentraler Seiten-Container */
.we-container {
  width: 100%;
  max-width: var(--we-maxw);
  margin-inline: auto;
  padding-inline: var(--we-space-4);
}

/* Globaler, deutlich sichtbarer Fokus-Stil (Tastaturbedienung) */
.we :focus-visible,
.we-focusable:focus-visible {
  outline: 3px solid var(--we-fokus);
  outline-offset: 2px;
  border-radius: var(--we-radius-sm);
}
/* Maus-Klick soll den Ring nicht zeigen, Tastatur schon */
.we :focus:not(:focus-visible) { outline: none; }

/* Nur fuer Screenreader */
.we-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* =====================================================================
   3. KOPFZEILE + TAB-NAVIGATION
   ===================================================================== */
.we-kopfzeile {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14,17,22,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--we-line);
}
.we-kopfzeile__innen {
  max-width: var(--we-maxw);
  margin-inline: auto;
  min-height: var(--we-header-h);
  padding: var(--we-space-2) var(--we-space-4);
  display: flex;
  align-items: center;
  gap: var(--we-space-4);
}

.we-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--we-space-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--we-text);
}
.we-marke__logo {
  width: 28px; height: 28px; border-radius: var(--we-radius-sm);
  object-fit: cover;
}

/* Profilmenue-Platz: schiebt sich nach rechts */
.we-kopfzeile__profil { margin-left: auto; }

.we-profil-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--we-space-2);
  min-height: 44px;
  padding: var(--we-space-1) var(--we-space-3) var(--we-space-1) var(--we-space-1);
  background: var(--we-surface);
  border: 1px solid var(--we-line);
  border-radius: var(--we-radius-pill);
  color: var(--we-text);
  font: inherit;
  cursor: pointer;
  transition: background var(--we-dur) var(--we-ease),
              border-color var(--we-dur) var(--we-ease);
}
.we-profil-knopf:hover { background: var(--we-surface-2); border-color: var(--we-line-strong); }
.we-profil-knopf__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--we-surface-3);
  object-fit: cover; flex: none;
}
.we-profil-knopf__name {
  font-size: var(--we-fs-sm);
  max-width: 12ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Tab-Navigation: Sammlung / Schmiede / Booster / Leaderboard --- */
.we-tabs {
  display: flex;
  gap: var(--we-space-1);
  overflow-x: auto;                 /* auf Handy horizontal scrollbar   */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.we-tabs::-webkit-scrollbar { display: none; }

.we-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--we-space-2);
  min-height: 44px;
  padding: 0 var(--we-space-3);
  white-space: nowrap;
  color: var(--we-text-muted);
  font: inherit;
  font-weight: 550;
  background: none;
  border: 0;
  border-radius: var(--we-radius-sm);
  cursor: pointer;
  transition: color var(--we-dur) var(--we-ease),
              background var(--we-dur) var(--we-ease);
}
.we-tab:hover { color: var(--we-text); background: var(--we-surface); }

/* Aktiver Tab: heller Text + duenner Unterstrich (Traeger, keine Farbe) */
.we-tab[aria-current="page"],
.we-tab.is-aktiv {
  color: var(--we-text);
}
.we-tab[aria-current="page"]::after,
.we-tab.is-aktiv::after {
  content: "";
  position: absolute;
  left: var(--we-space-3);
  right: var(--we-space-3);
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--we-text);
}
.we-tab__zahl {                     /* z.B. Anzahl offener Booster       */
  font-family: var(--we-font-mono);
  font-size: var(--we-fs-xs);
  padding: 1px 7px;
  border-radius: var(--we-radius-pill);
  background: var(--we-surface-2);
  color: var(--we-text-muted);
}


/* =====================================================================
   4. BUTTONS
   ===================================================================== */
.we-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--we-space-2);
  min-height: 44px;               /* Touch-Ziel */
  padding: 0 var(--we-space-5);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--we-radius);
  cursor: pointer;
  user-select: none;
  transition: transform var(--we-dur-fast) var(--we-ease),
              background var(--we-dur) var(--we-ease),
              border-color var(--we-dur) var(--we-ease),
              box-shadow var(--we-dur) var(--we-ease);
}
.we-btn:active { transform: translateY(1px); }
.we-btn:disabled,
.we-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none;
}

/* Primaer: heller, kontrastreicher Block (Text dunkel -> AA) */
.we-btn--primaer {
  background: var(--we-text);
  color: #0e1116;
  box-shadow: var(--we-shadow-1);
}
.we-btn--primaer:hover { background: #ffffff; box-shadow: var(--we-shadow-2); }

/* Sekundaer: ruhiger Traeger mit Rand */
.we-btn--sekundaer {
  background: var(--we-surface);
  color: var(--we-text);
  border-color: var(--we-line-strong);
}
.we-btn--sekundaer:hover { background: var(--we-surface-2); }

/* Gefaehrlich: nur fuer zerstoerende Aktionen (Loeschen, Kuendigen) */
.we-btn--gefahr {
  background: var(--we-gefahr-weich);
  color: #ffd3d3;
  border-color: rgba(255,107,107,0.5);
}
.we-btn--gefahr:hover { background: rgba(255,107,107,0.22); border-color: var(--we-gefahr); }

/* Dezenter Text-Button */
.we-btn--geist {
  background: none; color: var(--we-text-muted); min-height: 44px;
}
.we-btn--geist:hover { color: var(--we-text); background: var(--we-surface); }

.we-btn--voll { width: 100%; }

/* --- Knoepfe, die <a> sind: Farbe ausdruecklich zurueckholen -------- */
/* `.we a` hat Spezifitaet (0,1,1) und schlaegt damit `.we-btn--primaer`  */
/* (0,1,0). Ohne diesen Block bekommt ein Knopf-Link die Verweisfarbe -   */
/* auf dem hellen Primaer-Block also Hellblau auf fast Weiss, unlesbar.   */
/* Am 12.08.2026 im Browser aufgefallen, nicht im Quelltext.              */
.we a.we-btn--primaer   { color: #0e1116; }
.we a.we-btn--sekundaer { color: var(--we-text); }
.we a.we-btn--gefahr    { color: #ffd3d3; }
.we a.we-btn--geist     { color: var(--we-text-muted); }
.we a.we-btn--geist:hover { color: var(--we-text); }
.we-btn--klein { min-height: 36px; padding: 0 var(--we-space-4); font-size: var(--we-fs-sm); }


/* =====================================================================
   5. FORMULARFELDER
   ===================================================================== */
.we-feld { margin-bottom: var(--we-space-4); }

.we-label {
  display: block;
  margin-bottom: var(--we-space-2);
  font-size: var(--we-fs-sm);
  font-weight: 600;
  color: var(--we-text);
}
.we-hilfetext {
  margin-top: var(--we-space-2);
  font-size: var(--we-fs-xs);
  color: var(--we-text-muted);
}

.we-input,
.we-select,
.we-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--we-space-3);
  font: inherit;
  color: var(--we-text);
  background: var(--we-inset);
  border: 1px solid var(--we-line-strong);
  border-radius: var(--we-radius);
  transition: border-color var(--we-dur) var(--we-ease),
              box-shadow var(--we-dur) var(--we-ease);
}
.we-textarea { min-height: 120px; resize: vertical; line-height: var(--we-lh); }
.we-input::placeholder,
.we-textarea::placeholder { color: var(--we-text-faint); }

.we-input:focus,
.we-select:focus,
.we-textarea:focus {
  outline: none;
  border-color: var(--we-fokus);
  box-shadow: 0 0 0 3px rgba(124,196,255,0.28);
}

/* Fehlerzustand am Feld */
.we-input.is-fehler,
.we-select.is-fehler,
.we-textarea.is-fehler { border-color: var(--we-gefahr); }
.we-feldfehler {
  margin-top: var(--we-space-2);
  font-size: var(--we-fs-xs);
  color: #ffb3b3;
}


/* =====================================================================
   6. HINWEISE / FEHLERMELDUNGEN (Bloecke)
   ===================================================================== */
.we-hinweis {
  display: flex;
  gap: var(--we-space-3);
  padding: var(--we-space-3) var(--we-space-4);
  border: 1px solid var(--we-line-strong);
  border-radius: var(--we-radius);
  background: var(--we-surface);
  color: var(--we-text);
  font-size: var(--we-fs-sm);
}
.we-hinweis__titel { font-weight: 650; margin: 0 0 2px; }
/* farbiger Statusstreifen links -- Bedeutung nicht nur ueber Farbe:    */
/* Titel benennt den Zustand ("Fehler", "Erfolg") zusaetzlich.          */
.we-hinweis { border-left-width: 3px; }
.we-hinweis--info    { border-left-color: var(--we-link); }
.we-hinweis--erfolg  { border-left-color: var(--we-erfolg);  background: var(--we-erfolg-weich); }
.we-hinweis--warnung { border-left-color: var(--we-warnung); background: var(--we-warnung-weich); }
.we-hinweis--fehler  { border-left-color: var(--we-gefahr);  background: var(--we-gefahr-weich); }


/* =====================================================================
   7. KARTEN-RASTER + KARTENKACHEL
   ---------------------------------------------------------------------
   WICHTIG: Das 400x400-PNG bringt seinen gemalten Rahmen selbst mit.
   Deshalb bekommt das Bild NIEMALS einen CSS-Border. Die Seltenheit
   zeigt sich als:
     - farbiger Schein/Ring AUSSERHALB des Bild-Abstands (box-shadow)
     - duenne Akzentleiste + Label in der Fusszeile
   Nie als Rahmen direkt am Bild.
   ===================================================================== */
.we-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--we-space-4);
}
@media (min-width: 768px) {
  .we-raster { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

.we-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--we-surface);
  border: 1px solid var(--we-line);        /* Rand der KACHEL, nicht des Bildes */
  border-radius: var(--we-radius-lg);
  padding: var(--we-space-3);
  transition: transform var(--we-dur) var(--we-ease),
              box-shadow var(--we-dur) var(--we-ease),
              border-color var(--we-dur) var(--we-ease);
}

/* Bildbuehne: haelt Abstand zum gemalten Rahmen, quadratisch (400x400) */
.we-karte__buehne {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--we-radius);
  overflow: hidden;
  background: var(--we-inset);
}
.we-karte__bild {
  width: 100%; height: 100%;
  object-fit: contain;                      /* Rahmen im Bild bleibt heil */
}

/* Fusszeile: Name + Zahlen (Zahlen in Mono) */
.we-karte__fuss {
  display: flex;
  align-items: center;
  gap: var(--we-space-2);
  margin-top: var(--we-space-3);
}
.we-karte__name {
  font-size: var(--we-fs-sm);
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Besitzanzahl (z.B. x3) -- Mono-Pille, rechtsbuendig */
.we-besitz {
  margin-left: auto;
  flex: none;
  font-family: var(--we-font-mono);
  font-size: var(--we-fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--we-radius-pill);
  background: var(--we-surface-2);
  color: var(--we-text);
  letter-spacing: 0.02em;
}

/* Seltenheits-Label -- Textbadge, Farbe kommt aus der Seltenheitsklasse */
.we-selten {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--we-font-mono);
  font-size: var(--we-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--we-text-muted);
}
.we-selten::before {                        /* Farb-Punkt = zweiter, nicht-Farb-Kanal ist das Wort */
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}

/* --- Seltenheits-Anmutungen (Index 0..3) --------------------------- */
/* Jede Stufe: eigener Rand-Ton, eigener Aussen-Schein, eigener        */
/* Label-Ton. Ruhezustand dezent, Hover verstaerkt den Schein.         */

/* 0 Common -- Stahlgrau, kaum Schein: das "Grundrauschen" */
.we-karte--r0 { border-color: var(--we-r0-weich); }
.we-karte--r0:hover {
  transform: translateY(-3px);
  border-color: var(--we-r0-glanz);
  box-shadow: var(--we-shadow-2);
}
.we-selten--r0 { color: var(--we-r0); }

/* 1 Rare -- Azur-Schein */
.we-karte--r1 {
  border-color: var(--we-r1-weich);
  box-shadow: 0 0 0 1px var(--we-r1-weich);
}
.we-karte--r1:hover {
  transform: translateY(-3px);
  border-color: var(--we-r1);
  box-shadow: var(--we-shadow-2), 0 0 22px var(--we-r1-weich);
}
.we-selten--r1 { color: var(--we-r1); }

/* 2 Ultimate -- Bernstein/Gold-Schein, waermer und staerker */
.we-karte--r2 {
  border-color: var(--we-r2-weich);
  box-shadow: 0 0 0 1px var(--we-r2-weich);
}
.we-karte--r2:hover {
  transform: translateY(-3px);
  border-color: var(--we-r2);
  box-shadow: var(--we-shadow-2), 0 0 26px var(--we-r2-weich);
}
.we-selten--r2 { color: var(--we-r2); }

/* 3 Prismatic -- irisierender Rand-Verlauf. Schimmer NUR auf Hover,    */
/* keine Dauer-Animation (165 Karten sollen die CPU nicht fressen).     */
.we-karte--r3 {
  border-color: transparent;
  /* Verlaufsrand via zwei Hintergruende: innen Surface, aussen Iris.  */
  background:
    linear-gradient(var(--we-surface), var(--we-surface)) padding-box,
    var(--we-r3-verlauf) border-box;
  border: 1px solid transparent;
}
.we-karte--r3:hover {
  transform: translateY(-3px);
  box-shadow: var(--we-shadow-3), 0 0 30px var(--we-r3-weich);
}
.we-selten--r3 {
  color: transparent;
  background: var(--we-r3-verlauf);
  -webkit-background-clip: text; background-clip: text;
}
.we-selten--r3::before { background: #b98cff; }  /* Punkt bleibt sichtbar */

/* Prismatic-Schimmer: diagonaler Glanz, der beim Hover EINMAL laeuft.  */
.we-karte--r3 .we-karte__buehne::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
     transparent 30%, rgba(255,255,255,0.28) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0;
}
.we-karte--r3:hover .we-karte__buehne::after {
  animation: we-schimmer var(--we-dur-slow) var(--we-ease) 1;
}
@keyframes we-schimmer {
  from { transform: translateX(-120%); opacity: 1; }
  to   { transform: translateX(120%);  opacity: 0; }
}

/* --- Zustand: NICHT BESESSEN (Luecke im Album) --------------------- */
/* Sichtbare, vertiefte Mulde statt Karte -> das Album hat ein "Loch".  */
.we-karte--leer {
  background: var(--we-inset);
  border: 1px dashed var(--we-line-strong);
  box-shadow: var(--we-shadow-mulde);
}
.we-karte--leer:hover { transform: none; }   /* Mulde reagiert nicht */
.we-karte--leer .we-karte__buehne {
  background: transparent;
  display: grid;
  place-items: center;
}
.we-karte__leer-silhouette {
  /* Fragezeichen-/Silhouetten-Platzhalter (Kartenruecken kann per      */
  /* <img> in .we-karte__bild ergaenzt werden, gedimmt).                */
  font-family: var(--we-font-mono);
  font-size: var(--we-fs-2xl);
  color: var(--we-text-faint);
  opacity: 0.5;
}
.we-karte--leer .we-karte__name { color: var(--we-text-faint); }

/* --- Zustand: BESESSEN, aber GESPERRT ----------------------------- */
/* Karte ist da, aber gedaempft + Schloss-Abzeichen. Nicht "leer".      */
.we-karte--gesperrt .we-karte__bild {
  filter: grayscale(0.7) brightness(0.6);
}
.we-karte--gesperrt::after {          /* dezenter Schleier ueber der Buehne */
  content: "";
  position: absolute;
  inset: var(--we-space-3);
  bottom: auto;
  aspect-ratio: 1/1;
  border-radius: var(--we-radius);
  background: rgba(11,14,19,0.35);
  pointer-events: none;
}
.we-abzeichen {                        /* Schloss-Abzeichen oben rechts */
  position: absolute;
  top: calc(var(--we-space-3) + 6px);
  right: calc(var(--we-space-3) + 6px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: var(--we-font-mono);
  font-size: var(--we-fs-xs);
  font-weight: 600;
  color: var(--we-text);
  background: rgba(11,14,19,0.85);
  border: 1px solid var(--we-line-strong);
  border-radius: var(--we-radius-pill);
  backdrop-filter: blur(4px);
}


/* =====================================================================
   8. SET-FORTSCHRITT  (z.B. 128 / 165)
   ===================================================================== */
.we-fortschritt { margin: var(--we-space-4) 0; }
.we-fortschritt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--we-space-3);
  margin-bottom: var(--we-space-2);
}
.we-fortschritt__label { font-weight: 600; }
.we-fortschritt__zahl {
  font-family: var(--we-font-mono);
  font-size: var(--we-fs-sm);
  color: var(--we-text-muted);
}
.we-fortschritt__zahl b { color: var(--we-text); font-weight: 700; }

.we-fortschritt__bahn {
  height: 10px;
  border-radius: var(--we-radius-pill);
  background: var(--we-inset);
  box-shadow: var(--we-shadow-mulde);
  overflow: hidden;
}
/* Breite per inline-style setzen: style="width:77%"                    */
.we-fortschritt__fuellung {
  height: 100%;
  border-radius: inherit;
  /* neutraler heller Verlauf -- Fortschritt ist keine Seltenheit */
  background: linear-gradient(90deg, var(--we-text-muted), var(--we-text));
  transition: width var(--we-dur-slow) var(--we-ease);
}
/* Vollstaendiges Set darf golden feiern */
.we-fortschritt.is-komplett .we-fortschritt__fuellung {
  background: linear-gradient(90deg, var(--we-r2), #ffd27a);
}


/* =====================================================================
   9. BOOSTER-BUEHNE (Aufdeckung)
   ---------------------------------------------------------------------
   Kurze, klare Bewegung: Kartenruecken -> Vorderseite per Flip.
   Reihenweise per --we-verzoeg (inline-style Staffelung) ausloesbar.
   ===================================================================== */
.we-booster {
  display: grid;
  place-items: center;
  gap: var(--we-space-5);
  padding: var(--we-space-6) var(--we-space-4);
  text-align: center;
}
.we-booster__reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--we-space-4);
}

/* Eine aufzudeckende Karte: 3D-Flip-Container */
.we-aufdeckung {
  width: 150px;
  aspect-ratio: 1 / 1;
  perspective: 900px;
  cursor: pointer;
  background: none; border: 0; padding: 0;
}
.we-aufdeckung__innen {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--we-dur-slow) var(--we-ease-spring);
  transition-delay: var(--we-verzoeg, 0ms);
}
/* Klasse per JS setzen, wenn die Karte aufgedeckt werden soll */
.we-aufdeckung.is-auf .we-aufdeckung__innen { transform: rotateY(180deg); }

.we-aufdeckung__seite {
  position: absolute; inset: 0;
  border-radius: var(--we-radius);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.we-aufdeckung__ruecken {
  background: var(--we-surface-2);
  display: grid; place-items: center;
  box-shadow: var(--we-shadow-2);
}
.we-aufdeckung__vorne {
  transform: rotateY(180deg);
  background: var(--we-inset);
}
.we-aufdeckung__vorne img { width: 100%; height: 100%; object-fit: contain; }

/* Aufleuchten der Vorderseite je Seltenheit direkt nach dem Flip */
.we-aufdeckung.is-auf.we-glanz--r1 { box-shadow: 0 0 30px var(--we-r1-weich); }
.we-aufdeckung.is-auf.we-glanz--r2 { box-shadow: 0 0 34px var(--we-r2-weich); }
.we-aufdeckung.is-auf.we-glanz--r3 { box-shadow: 0 0 40px var(--we-r3-weich); }


/* =====================================================================
   10. TABELLE (Leaderboard)
   ===================================================================== */
.we-tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.we-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--we-fs-sm);
}
.we-tabelle th,
.we-tabelle td {
  padding: var(--we-space-3) var(--we-space-4);
  text-align: left;
  border-bottom: 1px solid var(--we-line);
}
.we-tabelle thead th {
  position: sticky; top: var(--we-header-h);
  background: var(--we-bg);
  font-size: var(--we-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--we-text-muted);
  font-weight: 600;
}
.we-tabelle tbody tr { transition: background var(--we-dur-fast) var(--we-ease); }
.we-tabelle tbody tr:hover { background: var(--we-surface); }
/* Zahlen (Rang, Punkte) monospaced und rechtsbuendig, tabellarisch */
.we-tabelle .we-num {
  font-family: var(--we-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.we-tabelle .we-rang {
  font-family: var(--we-font-mono);
  font-weight: 700;
  color: var(--we-text-muted);
  width: 3ch;
}
/* Treppchen (1-3) dezent hervorgehoben -- ueber Text, nicht nur Farbe  */
/* Gold/Silber/Bronze faellt jetzt mit r2/r1/r0 zusammen - dieselbe     */
/* Leiter wie bei den Seltenheiten, also keine zweite Farbsprache.     */
.we-tabelle tr.we-podest--1 .we-rang { color: var(--we-r2); }
.we-tabelle tr.we-podest--2 .we-rang { color: var(--we-r1); }
.we-tabelle tr.we-podest--3 .we-rang { color: var(--we-r0); }
/* Eigene Zeile: Verweis-Ton, damit sie nicht wie "Rare" gelesen wird. */
.we-tabelle tr.is-ich { background: var(--we-link-weich); }
.we-tabelle tr.is-ich:hover { background: rgba(124,196,255,0.26); }


/* =====================================================================
   11. TEXTSEITE (Verkaufsseite u.ae.)
   ---------------------------------------------------------------------
   Schlichte, lesbare Prosa-Spalte. Bewusst ruhig -- die Karten sind
   der Star, hier fuehrt der Text.
   ===================================================================== */
.we-prosa {
  max-width: 68ch;
  margin-inline: auto;
  padding: var(--we-space-7) var(--we-space-4);
}
.we-prosa h1 { margin-bottom: var(--we-space-3); }
.we-prosa h2 { margin: var(--we-space-7) 0 var(--we-space-3); }
.we-prosa p  { color: var(--we-text); }
.we-prosa .we-lead {
  font-size: var(--we-fs-md);
  color: var(--we-text-muted);
  line-height: 1.5;
  margin-bottom: var(--we-space-6);
}
.we-prosa ul { margin: 0 0 var(--we-space-5); padding-left: var(--we-space-5); }
.we-prosa li { margin-bottom: var(--we-space-2); }
.we-prosa hr {
  border: 0; height: 1px; background: var(--we-line);
  margin: var(--we-space-6) 0;
}

/* Preis-/Merkmal-Karte fuer die Verkaufsseite */
.we-tafel {
  background: var(--we-surface);
  border: 1px solid var(--we-line);
  border-radius: var(--we-radius-lg);
  padding: var(--we-space-6);
  box-shadow: var(--we-shadow-2);
}
.we-tafel__preis {
  font-family: var(--we-font-mono);
  font-size: var(--we-fs-xl);
  font-weight: 700;
}
.we-tafel__preis small { font-size: var(--we-fs-sm); color: var(--we-text-muted); font-weight: 400; }


/* =====================================================================
   12. UTILITIES
   ===================================================================== */
.we-stapel > * + * { margin-top: var(--we-space-4); }   /* vertikaler Rhythmus */
.we-reihe { display: flex; align-items: center; gap: var(--we-space-3); flex-wrap: wrap; }
.we-zwischen { justify-content: space-between; }
.we-mono { font-family: var(--we-font-mono); font-variant-numeric: tabular-nums; }
.we-gedimmt { color: var(--we-text-muted); }
.we-zentriert { text-align: center; }
/* NUR Block-Richtung setzen. Die Kurzschreibweise `padding: X 0` stand hier  */
/* vorher und hat den seitlichen Abstand von .we-container ueberschrieben     */
/* (gleiche Spezifitaet, spaetere Regel gewinnt) - auf dem Handy klebte der   */
/* Text dadurch an beiden Bildschirmkanten. Am 12.08.2026 im Browser bei      */
/* 390px aufgefallen, im Quelltext nicht zu sehen.                            */
.we-abschnitt { padding-block: var(--we-space-6); }


/* =====================================================================
   BEWEGUNG REDUZIEREN  (prefers-reduced-motion)
   Alle nicht-essenziellen Bewegungen still. Zustaende bleiben erhalten,
   nur der Weg dahin ist sofort. Fokus-Ringe bleiben natuerlich.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .we *,
  .we *::before,
  .we *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Flip nicht rotieren, sondern hart umschalten */
  .we-aufdeckung.is-auf .we-aufdeckung__innen { transition: none; }
  .we-karte--r3:hover .we-karte__buehne::after { animation: none; opacity: 0; }
  .we-karte:hover { transform: none; }
}


/* =====================================================================
   KOPFMENUE  (Klappmenue am Profilbild, gebaut von menue.js)
   ---------------------------------------------------------------------
   Ersetzt die frueheren Inline-Styles aus menue.js. Der Ausloeser ist
   #profileImage in #profile-wrap; dieser Wrap MUSS position:relative
   behalten, damit das Menue direkt darunter haengt (success.html setzt
   das inline). Auf-/Zuklappen laeuft ueber die Klasse "menue-offen" auf
   #profile-wrap - die hatte bisher keine CSS-Regel, hier ist sie.
   Neutraler Traeger, KEINE Seltenheitsfarbe (das ist Kopf-UI).
   ===================================================================== */
.we-kopfmenue {
  position: absolute;
  top: calc(100% + var(--we-space-2));
  right: 0;
  min-width: 12rem;
  padding: var(--we-space-1);
  background: var(--we-surface-2);
  border: 1px solid var(--we-line-strong);
  border-radius: var(--we-radius);
  box-shadow: var(--we-shadow-3);
  z-index: 100;
  display: none;                 /* Grundzustand: eingeklappt */
}

/* Sichtbar nur, wenn menue.js die Klasse gesetzt hat. */
#profile-wrap.menue-offen .we-kopfmenue { display: block; }

.we-kopfmenue__eintrag {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;              /* Touch-Ziel */
  padding: var(--we-space-2) var(--we-space-3);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--we-radius-sm);
  color: var(--we-text);
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--we-dur-fast) var(--we-ease);
}
.we-kopfmenue__eintrag:hover,
.we-kopfmenue__eintrag:focus-visible {
  background: var(--we-surface-3);
  text-decoration: none;
}