/* ════════════════════════════════════════════════════════════════════

   CABALSPY ALPHA — gemeinsames Stylesheet

   Stil wie cabalspy.xyz: heller Hintergrund, weiße Flächen, schwarze

   Navigation, Grüntöne der Landingpage, Geist + Geist Mono.

   Liegt in: static/css/cabalspy.css



   Aufbau:

     1  Grundlagen (Variablen, Reset, Hilfsklassen)

     2  Bausteine (Buttons, Badges, Panels, Eingaben)

     3  Rahmen (Navigation, Footer, Seitenkopf)

     4  Calls-Seite

     5  Access-Seite

     6  NFT-Seite

     7  Login und Fehlerseite

     8  Rechtstexte

════════════════════════════════════════════════════════════════════ */



@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');



/* ═══ 1  GRUNDLAGEN ═══════════════════════════════════════════════ */

:root {

  --bg:           #f5f6f4;

  --surface:      #ffffff;

  --surface-2:    #f1f2f0;

  --ink:          #0a0b0a;

  --ink-2:        #1a1d1a;



  --green:        #006633;

  --green-mid:    #00824d;

  --green-bright: #00c882;

  --green-soft:   rgba(0,130,77,0.07);

  --green-border: rgba(0,130,77,0.22);



  --red:          #b42318;

  --red-soft:     #fef3f2;

  --red-border:   #fecdca;

  --amber:        #b54708;

  --amber-soft:   #fffaeb;

  --amber-border: #fedf89;

  --gold:         #b8860b;

  --gold-soft:    #fffaf0;

  --gold-border:  rgba(184,134,11,0.32);



  --on-ink:       #ffffff;   /* Text auf ink-Flächen */

  --nav-bg:       #0a0b0a;   /* Navigation bleibt in beiden Modi dunkel */

  --text:         #0a0b0a;

  --text-dim:     rgba(10,11,10,0.56);

  --text-dimmer:  rgba(10,11,10,0.38);

  --line:         rgba(10,11,10,0.09);

  --line-2:       rgba(10,11,10,0.16);



  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;



  --r-sm: 6px;

  --r:    10px;

  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(10,11,10,0.04);

  --shadow:    0 1px 2px rgba(10,11,10,0.04), 0 6px 20px rgba(10,11,10,0.045);

  --shadow-lg: 0 2px 4px rgba(10,11,10,0.04), 0 18px 44px rgba(10,11,10,0.09);

  --nav-h: 60px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

}



/* ── Dunkler Modus: nur die Farbmarken werden getauscht ─────────── */

html[data-theme="dark"] {

  --bg:           #0c0e0d;

  --surface:      #151816;

  --surface-2:    #1d211e;

  --ink:          #f3f5f1;   /* kräftigste Farbe, hier hell */

  --ink-2:        #e2e6df;

  --on-ink:       #0c0e0d;

  --nav-bg:       #131614;



  --green:        #3ddc97;

  --green-mid:    #2fc785;

  --green-bright: #00c882;

  --green-soft:   rgba(61,220,151,0.10);

  --green-border: rgba(61,220,151,0.28);



  --red:          #ff8b7e;

  --red-soft:     rgba(255,139,126,0.10);

  --red-border:   rgba(255,139,126,0.28);

  --amber:        #fdb022;

  --amber-soft:   rgba(253,176,34,0.10);

  --amber-border: rgba(253,176,34,0.28);

  --gold:         #d9a441;

  --gold-soft:    rgba(217,164,65,0.08);

  --gold-border:  rgba(217,164,65,0.28);



  --text:         #eceee9;

  --text-dim:     rgba(236,238,233,0.60);

  --text-dimmer:  rgba(236,238,233,0.38);

  --line:         rgba(236,238,233,0.10);

  --line-2:       rgba(236,238,233,0.18);



  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);

  --shadow:    0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.28);

  --shadow-lg: 0 2px 4px rgba(0,0,0,0.32), 0 18px 44px rgba(0,0,0,0.4);

  color-scheme: dark;

}



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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



body {

  font-family: var(--sans);

  font-size: 14px;

  line-height: 1.5;

  color: var(--text);

  background: var(--bg);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  font-feature-settings: "cv11", "ss01";

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



a { color: inherit; text-decoration: none; }

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

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; border-radius: 4px; }



.hidden { display: none !important; }

.num, .mono { font-variant-numeric: tabular-nums; }

/* Währungszeichen leichter und kleiner als der Betrag – Konvention bei Stripe und Mercury */

.cur { color: var(--text-dim); }

.mono { font-family: var(--mono); }

.dim { color: var(--text-dim); }

.pos { color: var(--green-mid); }

.neg { color: var(--red); }



::-webkit-scrollbar { width: 6px; height: 6px; }

::-webkit-scrollbar-thumb { background: rgba(10,11,10,0.15); border-radius: 3px; }

::-webkit-scrollbar-thumb:hover { background: rgba(10,11,10,0.25); }

::-webkit-scrollbar-track { background: transparent; }



.page { width: 100%; max-width: 1360px; margin: 0 auto; padding: 30px 22px 72px; flex: 1; }



/* Kleines statisches Quadrat statt leuchtender Punkte */

.sq { display: inline-block; width: 6px; height: 6px; background: var(--green-bright); flex-shrink: 0; }

.sq.off { background: var(--text-dimmer); }



/* Eckklammern wie im Proof-Bereich der Landingpage */

.corners { position: relative; }

.corners::after {

  content: ""; position: absolute; inset: var(--corner-inset, -1px); pointer-events: none;

  --c: var(--corner-color, var(--ink));

  background:

    linear-gradient(var(--c), var(--c)) top left / 12px 1.5px,

    linear-gradient(var(--c), var(--c)) top left / 1.5px 12px,

    linear-gradient(var(--c), var(--c)) top right / 12px 1.5px,

    linear-gradient(var(--c), var(--c)) top right / 1.5px 12px,

    linear-gradient(var(--c), var(--c)) bottom left / 12px 1.5px,

    linear-gradient(var(--c), var(--c)) bottom left / 1.5px 12px,

    linear-gradient(var(--c), var(--c)) bottom right / 12px 1.5px,

    linear-gradient(var(--c), var(--c)) bottom right / 1.5px 12px;

  background-repeat: no-repeat;

}



/* ═══ 2  BAUSTEINE ════════════════════════════════════════════════ */

.btn {

  display: inline-flex; align-items: center; justify-content: center; gap: 8px;

  height: 36px; padding: 0 14px;

  border-radius: var(--r); border: 1px solid var(--line-2);

  background: var(--surface); color: var(--ink);

  font-size: 13px; font-weight: 500; white-space: nowrap;

  box-shadow: var(--shadow-sm);

  transition: background 160ms var(--ease), border-color 160ms var(--ease),

              color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease);

}

.btn:hover { background: var(--surface-2); border-color: rgba(10,11,10,0.24); }

.btn:active { transform: translateY(1px); }

.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); box-shadow: 0 1px 2px rgba(10,11,10,0.2); }

.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); box-shadow: 0 4px 14px rgba(10,11,10,0.22); }

.btn-green { background: var(--green); border-color: var(--green); color: #fff; }

.btn-green:hover { background: var(--green-mid); border-color: var(--green-mid); }

.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }

.btn-icon { width: 30px; padding: 0; }

.btn-block { width: 100%; }

.btn.is-on { background: var(--green-soft); border-color: var(--green-border); color: var(--green); }

.btn:disabled { cursor: not-allowed; opacity: 0.6; box-shadow: none; }

.btn:disabled:hover { transform: none; }



.link-btn { font-size: 12px; font-weight: 500; color: var(--green); transition: color 140ms var(--ease); }

.link-btn:hover { color: var(--green-mid); text-decoration: underline; text-underline-offset: 3px; }



.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: 8px; }

.seg button { height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 500;

  color: var(--text-dim); transition: background 140ms var(--ease), color 140ms var(--ease); }

.seg button:hover { color: var(--ink); }

.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }



.badge {

  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;

  border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);

  font-size: 12px; font-weight: 500; color: var(--text-dim); white-space: nowrap;

}

.badge-buy, .badge-good { color: var(--green); background: var(--green-soft); border-color: var(--green-border); }

.badge-sell, .badge-gamble { color: var(--red); background: var(--red-soft); border-color: var(--red-border); }

.badge-moderate { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-border); }

.badge-migrated { color: var(--ink); background: var(--surface); border-color: var(--line-2); }



.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }

.panel-head {

  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;

  padding: 14px 18px; border-bottom: 1px solid var(--line);

}

.panel-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; letter-spacing: -0.005em; }

.panel-body { padding: 18px; }

.section { margin-bottom: 26px; }

#your-access { margin-top: 46px; }

.stack > * + * { margin-top: 14px; }



.input {

  width: 100%; height: 36px; padding: 0 11px; border-radius: 8px;

  border: 1px solid var(--line-2); background: var(--surface);

  font-size: 13px; font-variant-numeric: tabular-nums; outline: none;

  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);

}

.input:focus { border-color: var(--green-mid); box-shadow: 0 0 0 3px var(--green-soft); }

.input::placeholder { color: var(--text-dimmer); }

.input:disabled { opacity: 0.45; cursor: not-allowed; }

.field-label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }

.pair { display: flex; gap: 6px; }



.avatar-fallback { display: flex; align-items: center; justify-content: center;

  background: var(--surface-2); color: var(--text-dim); font-weight: 600; font-size: 12px; }



/* ═══ 3  RAHMEN ═══════════════════════════════════════════════════ */

.nav {

  position: sticky; top: 0; z-index: 1000; height: var(--nav-h);

  background: var(--nav-bg); color: #fff;

  border-bottom: 1px solid rgba(255,255,255,0.07);

}

.nav-inner {

  height: 100%; max-width: 1360px; margin: 0 auto; padding: 0 22px;

  display: flex; align-items: center; gap: 28px;

}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.brand img { height: 28px; width: auto; }

.brand-tag {

  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--green-bright);

  border: 1px solid rgba(0,200,130,0.32); border-radius: 999px; padding: 2px 8px;

}

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }

.nav-links a {

  display: block; padding: 7px 12px; border-radius: 8px;

  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.6);

  transition: color 150ms var(--ease), background 150ms var(--ease);

}

.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.06); }

.nav-links a.active { color: #fff; box-shadow: inset 0 -2px 0 var(--green-bright); border-radius: 0; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.nav-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.6); }

.nav-user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.85); }

.nav-user img, .nav-user .avatar-fallback {

  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #2a2d2a;

  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff;

}

.nav-logout {

  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;

  border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;

  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.8);

  transition: border-color 150ms var(--ease), color 150ms var(--ease);

}

.nav-logout:hover { border-color: rgba(255,255,255,0.3); color: #fff; }

.nav-logout svg, .nav-burger svg { width: 16px; height: 16px; }

.nav-burger { display: none; color: #fff; width: 36px; height: 36px; border-radius: 8px;

  border: 1px solid rgba(255,255,255,0.15); align-items: center; justify-content: center; }



.drawer-overlay { position: fixed; inset: 0; z-index: 1001; background: rgba(10,11,10,0.5);

  opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); }

.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer {

  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1002; width: 270px;

  background: var(--nav-bg); color: #fff; padding: 18px;

  transform: translateX(-100%); transition: transform 260ms var(--ease);

  display: flex; flex-direction: column; gap: 18px;

}

.drawer.open { transform: translateX(0); }

.drawer-head { display: flex; align-items: center; justify-content: space-between; }

.drawer a.drawer-link {

  display: block; padding: 11px 12px; border-radius: 8px; font-size: 15px; font-weight: 500;

  color: rgba(255,255,255,0.7); border-left: 2px solid transparent;

}

.drawer a.drawer-link.active { color: #fff; border-left-color: var(--green-bright);

  border-radius: 0 8px 8px 0; background: rgba(255,255,255,0.05); }



@media (max-width: 820px) {

  .nav-links, .nav-status, .nav-user span, .nav-logout { display: none; }

  .nav-burger { display: inline-flex; }

  .nav-inner { gap: 14px; padding: 0 16px; }

}



.footer { border-top: 1px solid var(--line); background: var(--surface); }

.footer-inner {

  max-width: 1360px; margin: 0 auto; padding: 24px 22px;

  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;

  font-size: 13px; color: var(--text-dim);

}

.footer-links { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; }

.footer-links a { transition: color 140ms var(--ease); }

.footer-links a:hover { color: var(--ink); }



.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;

  gap: 16px; margin-bottom: 24px; }

.page-title { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; }

.page-sub { margin-top: 7px; font-size: 14px; color: var(--text-dim); display: flex;

  align-items: center; flex-wrap: wrap; gap: 8px; }

.page-sub a { color: var(--green); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 640px) {

  .page-head > * { width: 100%; }

  .page-title { font-size: 26px; }

  .toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }

  .toolbar::-webkit-scrollbar { display: none; }

}



.toast {

  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 4000;

  background: var(--ink); color: var(--on-ink); padding: 11px 17px; border-radius: var(--r);

  font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg);

  display: flex; align-items: center; gap: 8px; transition: opacity 250ms var(--ease);

}



/* Modals (Leaderboards, Chart) */

.modal { position: fixed; inset: 0; z-index: 3000; background: rgba(10,11,10,0.55);

  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; }

.modal-box { width: 100%; max-width: 820px; max-height: 88vh; display: flex; flex-direction: column;

  background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(10,11,10,0.25); }

.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;

  padding: 16px 20px; border-bottom: 1px solid var(--line); }

.modal-title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }

.modal-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

.modal-body { overflow-y: auto; }

.modal-state { padding: 48px 20px; text-align: center; color: var(--text-dim); }



.lb-row { display: grid; grid-template-columns: 36px 40px 1fr auto; align-items: center; gap: 12px;

  padding: 12px 20px; border-bottom: 1px solid var(--line); }

.lb-row:last-child { border-bottom: none; }

.lb-rank { font-size: 15px; font-weight: 600; color: var(--text-dimmer); font-variant-numeric: tabular-nums; }

.lb-row.top .lb-rank { color: var(--ink); }

.lb-row img, .lb-row .avatar-fallback { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.lb-name { font-weight: 600; }

.lb-handle { font-size: 12px; color: var(--green); }

.lb-nums { display: flex; gap: 18px; text-align: right; }

.lb-nums .stat-label { font-size: 11px; }

.lb-nums div > div:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {

  .lb-row { grid-template-columns: 28px 36px 1fr; }

  .lb-nums { grid-column: 1 / -1; justify-content: space-between; text-align: left; }

}



.viz-frame { width: min(520px, 92vw); height: min(520px, 80vh); border: none; border-radius: 16px;

  background: #111; box-shadow: 0 24px 64px rgba(10,11,10,0.35); }

.viz-loading { color: #fff; font-size: 14px; display: flex; align-items: center; gap: 10px; }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25);

  border-top-color: #fff; animation: spin 0.8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }



/* ═══ 4  CALLS-SEITE ══════════════════════════════════════════════ */

.stats-bar {

  display: grid; grid-template-columns: repeat(7, 1fr);

  background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);

  margin-bottom: 18px;

}

.stats-bar > div { padding: 14px 18px; border-right: 1px solid var(--line); }

.stats-bar > div:last-child { border-right: none; }

.stat-label { font-size: 12px; color: var(--text-dim); }

.stat-value { margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -0.025em;

  font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {

  .stats-bar { grid-template-columns: repeat(4, 1fr); }

  .stats-bar > div:nth-child(4n) { border-right: none; }

  .stats-bar > div:nth-child(n+5) { border-top: 1px solid var(--line); }

}

@media (max-width: 560px) {

  .stats-bar { grid-template-columns: repeat(2, 1fr); }

  .stats-bar > div { border-right: 1px solid var(--line) !important; border-top: none !important; }

  .stats-bar > div:nth-child(2n) { border-right: none !important; }

  .stats-bar > div:nth-child(n+3) { border-top: 1px solid var(--line) !important; }

}



.feed { margin-bottom: 18px; overflow: hidden; }

.feed-track { display: flex; gap: 10px; padding: 14px 18px; overflow-x: auto; min-height: 104px; }

.feed-empty { align-self: center; font-size: 13px; color: var(--text-dim); }

.trade {

  flex-shrink: 0; width: 196px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r);

  background: var(--surface); display: flex; flex-direction: column; gap: 8px;

}

.trade-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-dim); }

.trade-who { display: flex; align-items: center; gap: 8px; min-width: 0; }

.trade-who img, .trade-who .avatar-fallback { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.trade-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.trade-sym { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }

.trade-foot { display: flex; align-items: center; justify-content: space-between; }

.trade-sol { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }



.filters { margin-bottom: 18px; }

.filter-group + .filter-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

.filter-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }

.check-row { display: flex; flex-wrap: wrap; gap: 8px; }

.check {

  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;

  border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer;

  font-size: 13px; font-weight: 500; transition: border-color 150ms var(--ease);

}

.check:hover { border-color: rgba(10,11,10,0.28); }

.check input { accent-color: var(--green); width: 15px; height: 15px; }

.check .btn { margin-left: 4px; }

.range-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

.filter-actions { display: flex; gap: 8px; margin-top: 22px; }



.calls-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }

@media (min-width: 640px)  { .calls-grid { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1000px) { .calls-grid { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 1320px) { .calls-grid { grid-template-columns: repeat(4, 1fr); } }



.call {

  position: relative; background: var(--surface); border: 1px solid var(--line);

  border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow);

  display: flex; flex-direction: column; gap: 14px; min-width: 0;

  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);

}

.call:hover { box-shadow: var(--shadow-lg); }

.call.t10 { border-color: var(--ink); --corner-inset: -6px; }

.call-head { display: flex; align-items: flex-start; gap: 12px; }

.token-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;

  border: 1px solid var(--line); background: var(--surface-2); }

.token-meta { flex: 1; min-width: 0; }

.token-name { font-size: 15px; font-weight: 600; letter-spacing: -0.012em;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.token-sub { margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.token-sym { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }

.age { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }

.age.fresh { color: var(--green-mid); }



.mult { font-size: 26px; font-weight: 600; letter-spacing: -0.035em; line-height: 1;

  font-variant-numeric: tabular-nums; text-align: right; flex-shrink: 0; color: var(--text-dimmer); }

.mult small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--text-dim); }

.call.t2 .mult { color: var(--green-mid); }

.call.t5 .mult { color: var(--green); }

.call.t10 .mult { color: var(--green-bright); background: var(--ink); padding: 7px 9px 6px; border-radius: 8px; }

.call.t10 .mult small { color: rgba(255,255,255,0.6); }



.mcaps { display: grid; grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.mcaps > div { padding: 10px 0 10px 12px; border-left: 1px solid var(--line); }

.mcaps > div:first-child { padding-left: 0; border-left: none; }

.mcap-label { font-size: 12px; color: var(--text-dim); }

.mcap-value { margin-top: 1px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }



.flow + .flow { margin-top: 10px; }

.flow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; }

.flow-name { font-weight: 500; }

.flow-count { font-variant-numeric: tabular-nums; color: var(--text-dim); }

.flow-count b { color: var(--ink); font-weight: 600; }

.bar { height: 4px; margin: 7px 0 6px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }

.bar > i { display: block; height: 100%; background: var(--green-mid); border-radius: 2px; transition: width 400ms var(--ease); }

.flow-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;

  font-size: 12px; font-variant-numeric: tabular-nums; }



.ca-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; }

.ca-row code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--text-dim);

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ca-row button { font-size: 12px; font-weight: 500; color: var(--ink); }

.ca-row button:hover { color: var(--green); }



.call-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ext { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }

.ext a { color: var(--text-dim); transition: color 140ms var(--ease); }

.ext a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.call.compact { gap: 12px; padding: 14px; }

.compact-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }



.empty { grid-column: 1 / -1; text-align: center; padding: 72px 20px; background: var(--surface);

  border: 1px dashed var(--line-2); border-radius: var(--r-lg); }

.empty h3 { font-size: 16px; font-weight: 600; }

.empty p { margin-top: 6px; color: var(--text-dim); }

.empty.error h3 { color: var(--red); }



/* ═══ 5  ACCESS-SEITE ═════════════════════════════════════════════ */



/* 5.1 Einführungsangebot ------------------------------------------ */

.launch {

  position: relative; overflow: hidden; margin-bottom: 28px; border-radius: var(--r-lg);

  background: linear-gradient(135deg, #10140f 0%, #0a0b0a 52%, #15100e 100%);

  color: #fff; box-shadow: 0 16px 38px rgba(10,11,10,0.18);

  --accent: #ff6b5e; --cd-bg: rgba(255,255,255,0.06); --cd-fg: #fff;

}

.launch::before {

  content: ""; position: absolute; inset: 0; pointer-events: none;

  background: radial-gradient(680px 190px at 6% 0%, rgba(255,107,94,0.15), transparent 72%);

}

.launch-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 24px;

  padding: 20px 24px 19px; }



/* Rabattblock links, klar abgesetzt */

.launch-pct {

  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;

  min-width: 92px; padding: 12px 14px 10px; border-radius: var(--r);

  background: color-mix(in srgb, var(--accent) 16%, transparent);

  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);

}

.launch-pct-num { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; line-height: 1;

  color: var(--accent); font-variant-numeric: tabular-nums; }

.launch-pct-label { margin-top: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;

  text-transform: uppercase; color: color-mix(in srgb, var(--accent) 75%, #fff); }



.launch-main { flex: 1; min-width: 240px; padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.1); }

.launch-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }

.launch-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.58); max-width: 64ch; }

.launch-sub strong { color: #fff; font-weight: 600; }



.countdown { display: flex; gap: 7px; margin-left: auto; }

.cd-part {

  display: flex; flex-direction: column; align-items: center; min-width: 60px;

  padding: 9px 10px 8px; border-radius: 10px; background: var(--cd-bg);

  border: 1px solid rgba(255,255,255,0.08);

  font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.42);

}

.cd-part b { font-size: 22px; font-weight: 600; color: var(--cd-fg);

  font-variant-numeric: tabular-nums; line-height: 1.25; letter-spacing: -0.02em; }



.launch-progress { position: relative; height: 3px; background: rgba(255,255,255,0.07); }

.launch-progress > i { display: block; height: 100%; background: var(--accent); opacity: 0.8; }



.launch.level-soon { --accent: #fdb022; }

.launch.level-soon::before { background: radial-gradient(680px 190px at 6% 0%, rgba(253,176,34,0.15), transparent 72%); }

.launch.level-final { --accent: #f97066; --cd-fg: #ffd7d3; }

.launch.level-final::before { background: radial-gradient(680px 190px at 6% 0%, rgba(249,112,102,0.22), transparent 72%); }

.launch.level-final .cd-part b { animation: cd-pulse 1.1s ease-in-out infinite; }

@keyframes cd-pulse { 50% { opacity: 0.55; } }



@media (max-width: 860px) {

  .launch-row { gap: 16px; padding: 16px 18px 15px; }

  .launch-main { flex-basis: 100%; order: 3; padding-left: 0; border-left: none; }

  .countdown { margin-left: 0; }

}

@media (max-width: 560px) {

  .launch-pct { flex-direction: row; align-items: baseline; gap: 7px; min-width: 0; padding: 8px 12px; }

  .launch-pct-num { font-size: 22px; }

  .countdown { flex: 1; }

  .cd-part { flex: 1; min-width: 0; }

}



/* 5.2 Raster ------------------------------------------------------ */

.access-grid { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 30px; align-items: start; }

@media (max-width: 980px) { .access-grid { grid-template-columns: 1fr; } }



.step + .step { margin-top: 38px; }

.step-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;

  gap: 8px; margin-bottom: 14px; }

.step-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }

.step-num { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;

  border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 600; }

.step-hint { font-size: 13px; color: var(--text-dim); }

.step-hint .link-btn { font-size: 13px; }



/* 5.3 Auswahlkacheln ---------------------------------------------- */

.opts { display: grid; gap: 10px; margin-top: 14px;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.opts-4 { grid-template-columns: repeat(4, 1fr); }

.opts-chains { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); }

.opt { position: relative; display: block; cursor: pointer; }

.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.opt-box {

  display: flex; flex-direction: column; gap: 7px; height: 100%; padding: 15px 16px;

  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);

  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);

}

.opt:hover .opt-box { border-color: rgba(10,11,10,0.34); }

.opt input:checked + .opt-box { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.opt input:focus-visible + .opt-box { outline: 2px solid var(--green-mid); outline-offset: 2px; }

.opt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.opt-chain { flex-direction: row; align-items: center; gap: 9px; padding: 12px 12px 12px 11px; }

.opt-chain .opt-top { flex: 1; min-width: 0; gap: 8px; }

.opt-chain .opt-name { flex: 1; min-width: 0; font-size: 14px;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.opt-chain .opt-check { width: 17px; height: 17px; }

.opt-chain .badge { height: 20px; padding: 0 7px; font-size: 11px; }

.owned { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;

  width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: var(--surface); }

.owned svg { width: 11px; height: 11px; }



/* Geometrische Marke je Chain, eingefärbt nach Chain */

.mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;

  width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); overflow: hidden; }

.mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

.opt.is-soon .mark { color: var(--text-dimmer); background: var(--surface-2); }

.opt-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

.opt-check { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--line-2); border-radius: 5px;

  display: flex; align-items: center; justify-content: center;

  transition: background 160ms var(--ease), border-color 160ms var(--ease); }

.opt input[type=radio] + .opt-box .opt-check { border-radius: 50%; }

.opt input:checked + .opt-box .opt-check { background: var(--ink); border-color: var(--ink); }

.opt input[type=checkbox]:checked + .opt-box .opt-check::after {

  content: ""; width: 9px; height: 5px; margin-top: -2px;

  border-left: 1.8px solid var(--on-ink); border-bottom: 1.8px solid var(--on-ink); transform: rotate(-45deg);

}

.opt input[type=radio]:checked + .opt-box .opt-check::after {

  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--on-ink);

}

.opt-price { font-size: 23px; font-weight: 600; letter-spacing: -0.03em;

  font-variant-numeric: tabular-nums; line-height: 1.2; }

.opt-price.is-sale { color: var(--red); }

.opt-regular { margin-left: 9px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-dimmer); }

.opt-regular.struck { text-decoration: line-through; }

.opt-tag { font-size: 12px; color: var(--text-dim); }



.opt.is-recommended .opt-box { border-color: var(--green-border); background: var(--green-soft); }

.opt.is-recommended input:checked + .opt-box { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow); }

.opt.is-recommended .opt-tag { color: var(--green); font-weight: 500; }

.opt-badge {

  position: absolute; top: -10px; left: 14px; z-index: 1;

  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;

  background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 600; white-space: nowrap;

  box-shadow: 0 2px 6px rgba(10,11,10,0.2);

}

.opt-badge::before { content: ""; width: 5px; height: 5px; background: var(--green-bright); border-radius: 1px; }

.opt-badge.is-new { background: var(--gold); }

.opt-badge.is-new::before { background: #ffd66b; }



.opt.is-soon { cursor: not-allowed; }

.opt.is-soon .opt-box { background: var(--surface-2); border-style: dashed; box-shadow: none; }

.opt.is-soon .opt-name { color: var(--text-dimmer); }

.opt.is-soon:hover .opt-box { border-color: var(--line-2); transform: none; }

.opt.is-included { cursor: default; }

.opt.is-included .opt-box { background: var(--green-soft); border-color: var(--green-border); }

.opt.is-included:hover .opt-box { transform: none; }



@media (max-width: 720px) {

  .opts, .opts-4, .opts-chains { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .opt-box { padding: 13px 14px; }

  .opt-name { font-size: 14px; }

  .opt-price { font-size: 20px; }

  .opt-regular { font-size: 12.5px; }

  .opt-tag { font-size: 11.5px; }

  .opt-badge { left: 10px; font-size: 10px; padding: 2px 8px; }

  .step-head { gap: 4px; }

  .step-hint { font-size: 12px; }

  .btn-sm { height: 40px; padding: 0 14px; }

}

@media (max-width: 380px) { .opts, .opts-4, .opts-chains { grid-template-columns: 1fr; } }



/* 5.4 NFT-Hinweis und Rabatt-Kacheln ------------------------------ */

.nft-offer {

  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;

  padding: 17px 19px; margin-bottom: 14px; border-radius: var(--r-lg);

  border: 1px solid var(--gold-border); background: var(--gold-soft);

  transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);

}

.nft-offer:hover { border-color: rgba(184,134,11,0.55); transform: translateY(-1px);

  box-shadow: 0 8px 24px rgba(184,134,11,0.13); }

.nft-badge { flex-shrink: 0; padding: 7px 13px; border-radius: 999px; background: var(--gold); color: #1a1205;

  font-size: 13px; font-weight: 600; white-space: nowrap; }

.nft-main { flex: 1; min-width: 210px; }

.nft-title { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }

.nft-text { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }

.nft-text strong { color: var(--text); font-weight: 600; }

.nft-btn { flex-shrink: 0; border-color: var(--gold-border); color: var(--gold); background: var(--surface); }

.nft-offer:hover .nft-btn { border-color: var(--gold); }

.nft-btn svg { width: 13px; height: 13px; }



.disc-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }

@media (max-width: 620px) { .disc-grid { grid-template-columns: 1fr; } }

.disc-card { padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--r-lg);

  background: var(--surface); transition: border-color 160ms var(--ease); }

.disc-card.on { border-color: var(--green-border); background: var(--green-soft); }

.disc-pct-big { font-size: 23px; font-weight: 600; letter-spacing: -0.035em; color: var(--text-dimmer);

  font-variant-numeric: tabular-nums; line-height: 1.1; }

.disc-card.on .disc-pct-big { color: var(--green); }

.disc-name { margin-top: 4px; font-size: 14px; font-weight: 600; }

.disc-state { margin-top: 2px; font-size: 12.5px; color: var(--text-dim); }

.disc-card.on .disc-state::before { content: ""; display: inline-block; width: 6px; height: 6px;

  background: var(--green-bright); margin-right: 6px; vertical-align: 1px; }



/* 5.5 Zusammenfassung und Kasse ----------------------------------- */

.summary { position: sticky; top: calc(var(--nav-h) + 22px); }

.summary > .panel { box-shadow: var(--shadow-lg); }

@media (max-width: 980px) {

  .summary { position: static; margin-top: 26px; }

  .summary .price-hero, .summary .pay-btn { display: none; }

  .summary .panel-body { padding-top: 14px; }

}

.price-hero { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }

.price-now { font-size: 44px; font-weight: 600; letter-spacing: -0.05em; line-height: 1;

  font-variant-numeric: tabular-nums; }



.price-sub { margin-top: 5px; font-size: 13px; color: var(--text-dim); }

.cart-chains { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }

.cart-chain { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px;

  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);

  font-size: 12px; font-weight: 500; }

.cart-chain .mark { width: 20px; height: 20px; border-radius: 5px; }

.cart-chain .mark svg { width: 12px; height: 12px; }



.launch-note { margin-bottom: 14px; padding: 11px 13px; border-radius: var(--r);

  border: 1px solid var(--line-2); background: var(--surface-2); font-size: 13px; line-height: 1.5; color: var(--text-dim); }

.launch-note b { color: var(--ink); font-weight: 600; }

.launch-note.hot { border-color: var(--red-border); background: var(--red-soft); color: var(--red); }

.launch-note.hot b { color: var(--red); }



.upsell { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;

  margin-bottom: 14px; padding: 12px 13px; border-radius: var(--r);

  border: 1px solid var(--green-border); background: var(--green-soft); font-size: 13px; line-height: 1.45; }

.upsell b { font-weight: 600; }

.upsell-text { flex: 1; min-width: 150px; }

.upsell .btn { flex-shrink: 0; }



.consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 14px; padding: 13px;

  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2);

  font-size: 12.5px; line-height: 1.55; cursor: pointer;

  transition: border-color 200ms var(--ease), background 200ms var(--ease); }

.consent input { margin-top: 2px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--green); }

.consent:has(input:checked) { border-color: var(--green-border); background: var(--green-soft); }

.consent.needs-attention { border-color: var(--red); background: var(--red-soft); }



.pay-btn { height: 48px; justify-content: space-between; padding: 0 16px; font-size: 15px; font-weight: 600; }

.pay-btn .badge { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); }

.pay-error { margin-top: 10px; padding: 9px 11px; border-radius: var(--r); font-size: 13px;

  border: 1px solid var(--red-border); background: var(--red-soft); color: var(--red); }



.trust { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 13px; font-size: 12px; color: var(--text-dim); }

.trust span { display: inline-flex; align-items: center; gap: 6px; }

.trust svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-dimmer); }



.summary-sep { border: none; border-top: 1px solid var(--line); margin: 16px 0 0; }

.breakdown { margin-top: 13px; }

.breakdown > summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--text-dim);

  display: flex; align-items: center; gap: 6px; }

.breakdown > summary::-webkit-details-marker { display: none; }

.breakdown > summary::after { content: ""; width: 6px; height: 6px;

  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;

  transform: rotate(45deg) translate(-1px, -1px); transition: transform 160ms var(--ease); }

.breakdown[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.breakdown.is-deal > summary { color: var(--green); font-weight: 500; }

.sum-lines { list-style: none; margin-top: 8px; }

.sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px;

  color: var(--text-dim); border-bottom: 1px solid var(--line); }

.sum-line:last-child { border-bottom: none; }

.sum-line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap;

  text-align: right; font-feature-settings: "tnum"; }

.sum-line.disc span:last-child { color: var(--green); }

.sum-line.strong { color: var(--ink); font-weight: 600; }



.fine { margin-top: 14px; font-size: 12px; line-height: 1.65; color: var(--text-dim); }

.fine a { color: var(--green); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

.fine a:hover { color: var(--green-mid); }



/* 5.6 Laufende Zugänge -------------------------------------------- */

.active-item { display: flex; align-items: center; justify-content: space-between; gap: 16px;

  padding: 14px 18px; border-bottom: 1px solid var(--line); }

.active-item:last-child { border-bottom: none; }

.active-chain { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

.active-when { margin-top: 2px; font-size: 12.5px; color: var(--text-dim); }

.active-left { display: flex; gap: 6px; --cd-bg: var(--surface-2); --cd-fg: var(--ink); }

.active-left .cd-part { min-width: 48px; padding: 6px 8px 5px; border-color: var(--line);

  color: var(--text-dim); }

.active-left .cd-part b { font-size: 17px; }

.active-forever { font-size: 13px; font-weight: 600; color: var(--green); }

.active-ended { font-size: 13px; font-weight: 600; color: var(--red); }

.active-item.is-soon { --cd-bg: var(--amber-soft); --cd-fg: var(--amber); }

.active-item.is-soon .active-when { color: var(--amber); }

.active-item.is-final { --cd-bg: var(--red-soft); --cd-fg: var(--red); }

.active-item.is-final .active-when { color: var(--red); }

@media (max-width: 560px) {

  .active-item { flex-direction: column; align-items: flex-start; gap: 10px; }

  .active-left { width: 100%; }

  .active-left .cd-part { flex: 1; }

}



/* 5.7 Feste Leiste auf dem Handy ---------------------------------- */

.mobile-bar { display: none; }

@media (max-width: 980px) {

  .mobile-bar {

    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;

    display: flex; align-items: center; justify-content: space-between; gap: 12px;

    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));

    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px);

    border-top: 1px solid var(--line-2); box-shadow: 0 -4px 18px rgba(10,11,10,0.07);

  }

  .mobile-bar > div { min-width: 0; }

  .mobile-total { font-size: 22px; font-weight: 600; letter-spacing: -0.035em;

    font-variant-numeric: tabular-nums; line-height: 1.1; }

  .mobile-sub { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .mobile-bar .pay-btn { width: auto; min-width: 132px; }

  .page { padding-bottom: 112px; }

}

.notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;

  padding: 13px 17px; margin-bottom: 22px; font-size: 14px;

  border: 1px solid var(--green-border); background: var(--green-soft); border-radius: var(--r); }

.notice-plain { border-color: var(--line-2); background: var(--surface); }



/* ═══ 6  NFT-SEITE ════════════════════════════════════════════════ */

.rw-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface);

  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px; }

.rw-stats > div { padding: 22px 22px 20px; border-right: 1px solid var(--line); min-width: 0; }

.rw-stats > div:last-child { border-right: none; }

.rw-big { margin-top: 6px; font-size: 38px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05;

  font-variant-numeric: tabular-nums; }

.rw-big span { font-size: 18px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; margin-left: 4px; }

.rw-note { margin-top: 6px; font-size: 13px; color: var(--text-dim); }

.rw-wallet { margin-top: 8px; font-family: var(--mono); font-size: 12.5px; word-break: break-all; line-height: 1.6; }

.rw-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

@media (max-width: 800px) {

  .rw-stats { grid-template-columns: 1fr; }

  .rw-stats > div { border-right: none; border-bottom: 1px solid var(--line); }

  .rw-stats > div:last-child { border-bottom: none; }

}

.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 640px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-result { margin-top: 20px; padding: 22px; border-radius: var(--r); background: var(--ink); color: var(--on-ink);

  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }

.calc-result .value { font-size: 34px; font-weight: 600; letter-spacing: -0.04em; color: var(--green-bright);

  font-variant-numeric: tabular-nums; }

.calc-result .detail { font-size: 13px; color: rgba(255,255,255,0.65); }

.rules { display: grid; grid-template-columns: 1fr 1fr; }

.rules > div { padding: 18px 20px; border-top: 1px solid var(--line); }

.rules > div:nth-child(odd) { border-right: 1px solid var(--line); }

.rules > div:nth-child(-n+2) { border-top: none; }

.rules h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }

.rules p { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }

.rules strong { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {

  .rules { grid-template-columns: 1fr; }

  .rules > div { border-right: none !important; border-top: 1px solid var(--line) !important; }

  .rules > div:first-child { border-top: none !important; }

}



/* ═══ 7  LOGIN UND FEHLERSEITE ════════════════════════════════════ */

.auth { display: flex; min-height: 100vh; }

.auth-hero { flex: 1.15; position: relative; overflow: hidden; background: var(--surface);

  display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(24px, 6vw, 88px); }

.grid-bg {

  position: absolute; inset: 0; pointer-events: none;

  background-image: linear-gradient(rgba(10,11,10,0.045) 1px, transparent 1px),

                    linear-gradient(90deg, rgba(10,11,10,0.045) 1px, transparent 1px);

  background-size: 64px 64px;

  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 0%, transparent 80%);

  mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 0%, transparent 80%);

  animation: grid-drift 60s linear infinite;

}

.glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;

  filter: blur(100px); background: radial-gradient(circle, rgba(0,130,77,0.12) 0%, transparent 70%); top: 12%; left: 8%; }

@keyframes grid-drift { to { background-position: 64px 64px; } }

.auth-hero-content { position: relative; max-width: 560px; }

.auth-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;

  color: var(--green); margin-bottom: 18px; }

.auth-title { font-size: clamp(34px, 4.6vw, 54px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.04; }

.auth-lead { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--text-dim); max-width: 46ch; }

.auth-proof { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.auth-proof > div { padding: 14px 16px; border-right: 1px solid var(--line); }

.auth-proof > div:first-child { padding-left: 0; }

.auth-proof > div:last-child { border-right: none; }

.auth-proof .stat-value { font-size: 24px; }



.auth-panel { flex: 0 0 min(460px, 42%); background: var(--nav-bg); color: #fff;

  display: flex; flex-direction: column; justify-content: space-between; padding: 32px clamp(24px, 4vw, 48px); }

.auth-panel .brand img { height: 30px; }

.auth-card h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.028em; }

.auth-card p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.62); }

.discord-btn {

  margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 12px;

  width: 100%; height: 50px; border-radius: var(--r); background: #fff; color: var(--ink);

  font-size: 15px; font-weight: 600; transition: background 150ms var(--ease), transform 150ms var(--ease);

}

.discord-btn:hover { background: #e9ebe8; transform: translateY(-1px); }

.auth-hero { background: var(--surface); }

.discord-btn img, .discord-btn svg { width: 22px; height: 22px; }

.roles { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.role { padding: 12px 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r); }

.role span { display: block; font-size: 12px; color: rgba(255,255,255,0.5); }

.role b { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 14px; font-weight: 600; }

.auth-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: rgba(255,255,255,0.5); }

.auth-links a:hover { color: #fff; }

@media (max-width: 900px) {

  .auth { flex-direction: column-reverse; }

  .auth-panel { flex: none; gap: 36px; }

  .auth-hero { padding: 48px 24px; }

  .auth-proof .stat-value { font-size: 20px; }

}



.error-wrap { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center;

  justify-content: center; padding: 48px 20px; }

.error-card { position: relative; width: 100%; max-width: 480px; background: var(--surface);

  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }

.error-top { background: var(--nav-bg); padding: 18px 24px; }

.error-top img { height: 26px; }

.error-body { padding: 28px 24px 24px; }

.error-body h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.028em; }

.error-body p { margin-top: 8px; color: var(--text-dim); line-height: 1.6; }

.error-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }



/* ═══ 8  RECHTSTEXTE ══════════════════════════════════════════════ */

.legal { max-width: 820px; }

.legal-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }

.legal-body { font-size: 15px; line-height: 1.72; color: var(--text); }

.legal-body h2 { margin: 36px 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

.legal-body h3 { margin: 22px 0 6px; font-size: 15.5px; font-weight: 600; color: var(--ink); }

.legal-body p { margin-bottom: 12px; }

.legal-body ul { margin: 0 0 14px 20px; }

.legal-body li { margin-bottom: 6px; }

.legal-body a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }

.legal-body strong { font-weight: 600; color: var(--ink); }

.legal-box { padding: 15px 17px; background: var(--surface); border: 1px solid var(--line);

  border-radius: var(--r); line-height: 1.65; }

.legal-callout { padding: 17px 19px; margin-bottom: 26px; border-radius: var(--r-lg);

  border: 1px solid var(--green-border); background: var(--green-soft); }

.legal-note { font-size: 13.5px; color: var(--text-dim); }

.legal-updated { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line);

  font-size: 13px; color: var(--text-dim); }

.legal-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; }

.legal-table th, .legal-table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }

.legal-table th { font-weight: 600; color: var(--ink); }

.legal-form-model { padding: 17px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);

  font-family: var(--mono); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; overflow-x: auto; }

.legal-form { padding: 19px; background: var(--surface); border: 1px solid var(--line-2);

  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }

.legal-textarea { height: auto; padding: 10px 12px; font-family: inherit; resize: vertical; }

.legal-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }

.legal-form-note { font-size: 13px; color: var(--text-dim); }

.legal-result { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); font-size: 14px; }

.legal-result.ok { border: 1px solid var(--green-border); background: var(--green-soft); color: var(--green); }

.legal-result.bad { border: 1px solid var(--red-border); background: var(--red-soft); color: var(--red); }



@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { animation: none !important; transition: none !important; }

}



/* ── Umschalter hell / dunkel ───────────────────────────────────── */

.theme-toggle {

  display: inline-flex; align-items: center; justify-content: center;

  width: 32px; height: 32px; border-radius: 8px;

  border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.8);

  transition: border-color 150ms var(--ease), color 150ms var(--ease);

}

.theme-toggle:hover { border-color: rgba(255,255,255,0.32); color: #fff; }

.theme-toggle svg { width: 16px; height: 16px; }

.theme-toggle .icon-moon { display: none; }

html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.drawer .theme-toggle { width: auto; padding: 11px 12px; gap: 10px; justify-content: flex-start;

  border: none; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.7); }

.drawer .theme-toggle span { display: none; }

.drawer .theme-toggle .label-light { display: inline; }

html[data-theme="dark"] .drawer .theme-toggle .label-light { display: none; }

html[data-theme="dark"] .drawer .theme-toggle .label-dark { display: inline; }

@media (max-width: 820px) { .nav .theme-toggle { display: none; } }



/* Logos bleiben auch im dunklen Modus lesbar */

html[data-theme="dark"] .mark { background: rgba(255,255,255,0.9); }

html[data-theme="dark"] .cart-chain .mark { background: rgba(255,255,255,0.88); }



/* Auf dem Handy größere Tap-Ziele */

@media (max-width: 720px) {

  .link-btn { display: inline-flex; align-items: center; min-height: 36px; }

  .drawer .theme-toggle { min-height: 44px; }

}