/* 1025DEX Community v0.31.35 · css/ds-base.css · ausgelagert aus index.html */
/* --- 2 · Grundlagen und Typografie --------------------------------------- */

html{
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--line-strong) transparent;
}
body{
  font-family:var(--ui);
  font-size:15.5px;
  line-height:1.47;
  letter-spacing:-.004em;
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
::selection{background:var(--accent-soft);color:var(--ink)}

/* Ueberschriften: eine Skala, enger gesetzt je groesser die Schrift */
h1,h2,h3,h4{font-weight:650;letter-spacing:-.02em;line-height:1.18;color:var(--ink)}
b,strong{font-weight:620}
small{font-size:.85em}

/* Alte Mikro-Versalien waren das auffaelligste Kennzeichen des Vorgaengers:
   9px, 0.18em Sperrung, fett. Sie werden hier durchgehend zu ruhigen
   Zwischenueberschriften. */
.panel h2,
.page h3,
.pghead b,
.sl-axis,
.sl-lab,
.mform label,
.wl-label,
.pm-title,
.onb-step,
.cheap-head b,
.sl-eyebrow,
.tb-trade-label{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.0em;
  text-transform:none;
  color:var(--ink-soft);
  line-height:1.3;
}
.panel h2{margin:0 0 12px;display:flex;align-items:center;gap:8px}
.panel h2::after{display:none}

.tiny{font-size:12.5px;line-height:1.42}
.muted{color:var(--ink-soft)}
.mono,code,kbd,samp,pre,.neo-sub,.cheap-dex{font-family:var(--ui-mono)}

/* Zahlen laufen ueberall in gleicher Breite, damit sie beim Hochzaehlen
   nicht springen. */
.ringnum,.bignum,.herostats b,.person .val b,.pkpreis,.taupreis,
.shopreis,.pricebox .pbig,.pricebox .pv,.sl-num,.sl-werte b,
.tb-stats b,.community-stat b,.gcount,.pgn{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.022em;
  font-weight:660;
}

/* Fokus: ein weicher Ring, kein harter Kasten */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
button:focus:not(:focus-visible){outline:none}

/* Bildlaufleisten */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{
  background:var(--line-strong);border-radius:var(--r-full);
  border:2px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background-color:var(--ink-faint);background-clip:padding-box}

/* --- 3 · Flaechen und Panels --------------------------------------------- */

main{padding:14px var(--pad) 8px;max-width:var(--maxw);margin:0 auto}

.panel,
.sl-box,
.wl-list,.wl-target,.tb-card,.pa-list,.pm-group,
.community-post,.community-card,.community-activity,.community-compose{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
}
.panel{padding:16px 16px 15px;margin-bottom:12px}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .sl-box{background:var(--panel)}
.heropanel{border-top:1px solid var(--line);box-shadow:var(--sh-2)}

/* Trennlinien innerhalb von Flaechen */
.herostats,.genbars,.kurve,.tb-foot,.tb-actions,.community-post-actions{
  border-top:1px solid var(--line-soft);
}
.pdet,.prow,.wl-row,.pa-item,.pm-group .btn.pm-row,.shoprow,.pkarte,.taurow,.sl-kv{
  border-color:var(--line-soft);
}

/* Zeilen in Gruppen: Trennlinie beginnt erst hinter dem Symbol, wie im
   System ueblich - das laesst eine Liste zusammenhaengend wirken. */
.wl-list .wl-row+.wl-row,
.pa-list .pa-item+.pa-item{border-top:1px solid var(--line-soft)}