/* ═══════════════════════════════════════════════════════════════
   Dampfstich – Profil & Statistiken (/profil)
   Nutzt tokens.css + landing.css + page.css und ergänzt die
   Statistik-Kacheln. Reines Read-Layout im Mitternachtsblau/Gold.
═══════════════════════════════════════════════════════════════ */

/* ── Seitenhintergrund: Erfinder-Werkstatt ──
   Dasselbe Panorama wie im Hero der Landingpage – die Datei liegt schon unter
   img/szene/, es wird also nichts doppelt ausgeliefert. Diese Datei lädt nur
   profil.html, die Regel wirkt deshalb ausschließlich unter „Mein Konto".

   Der Schleier ist hier DICHTER als im Hero: Auf der Profilseite steht nicht
   eine große Überschrift, sondern viel Kleintext in Kacheln und Listen – der
   braucht einen ruhigen Grund. Die Vorlage ist ein Querformat (1776×896),
   die Seite dagegen hoch und scrollend: background-attachment:fixed hält das
   Bild deshalb stehen, statt es über die ganze Seitenlänge zu strecken. */
body{
  background:
    linear-gradient(180deg,
      rgba(18,16,11,.93) 0%, rgba(18,16,11,.86) 38%, rgba(18,16,11,.94) 100%),
    linear-gradient(0deg, rgba(181,101,29,.10), rgba(181,101,29,.10)),
    url('img/szene/werkstatt-hero.webp') center top/cover no-repeat fixed,
    linear-gradient(180deg,#20180f,#1a1410 60%,#100d09);
  background-color:#1a1410;
}
/* Auf dem Handy funktioniert dieselbe Behandlung NICHT: Das Panorama ist
   querformatig (900×454), das Fenster hochformatig. Mit „cover" wird es fast
   doppelt hochskaliert – übrig bleibt ein verwaschener Ausschnitt ohne
   erkennbares Motiv. Dazu verarbeiten mobile Browser „fixed" schlecht.

   Deshalb hier ein anderer Ansatz: Das Bild liegt in voller Breite und
   natürlicher Höhe als BAND am Seitenkopf (hinter Navigation und Profilkopf)
   und blendet nach unten aus. Darunter trägt die Seite ihren ruhigen Grundton.
   Die Bandhöhe folgt dem Seitenverhältnis der Datei (900/454 = 1.982), damit
   Bild und Schleier exakt gleich hoch sind. */
@media (max-width:900px){
  body{
    --band:calc(100vw / 1.982);
    background:
      linear-gradient(180deg,
        rgba(18,16,11,.42) 0%, rgba(18,16,11,.74) 52%, #1a1410 100%)
        top center / 100% var(--band) no-repeat,
      linear-gradient(0deg, rgba(181,101,29,.12), rgba(181,101,29,.12))
        top center / 100% var(--band) no-repeat,
      url('img/szene/werkstatt-hero-s.webp') top center / 100% auto no-repeat;
    /* Flächenfarbe statt Verlauf: Sonst entstünde an der Bandkante eine Naht. */
    background-color:#1a1410;
    background-attachment:scroll;
  }
}

.profil-wrap{max-width:920px}
.profil-loading{color:var(--text-2);font-style:italic}

/* ── Reiter-Navigation („Mein Konto") ── */
.account-tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 28px;padding:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);
}
.account-tab{
  flex:0 1 auto;appearance:none;cursor:pointer;white-space:nowrap;
  font-family:var(--f-display);font-weight:600;font-size:14.5px;letter-spacing:.02em;
  color:var(--text-2);background:transparent;border:0;border-radius:calc(var(--r-card) - 6px);
  padding:9px 16px;transition:color .18s ease, background .18s ease, box-shadow .18s ease;
}
.account-tab:hover{color:var(--gold-light);background:rgba(200,150,60,.08)}
.account-tab.is-active{
  color:#2a1c06;background:var(--grad-gold);
  box-shadow:var(--sh-cta), inset 0 1px 0 rgba(255,255,255,.4);
}
.account-tab.is-active:hover{color:#2a1c06}
.account-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.account-panel[hidden]{display:none}
.account-panel{animation:acct-fade .26s ease}
@keyframes acct-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Panel-Überschrift (z. B. „Statistiken"), wenn der Bereich selbst keine hat */
.panel-title{
  margin:0 0 20px;font-family:var(--f-display);font-weight:800;
  font-size:clamp(22px,4.5vw,30px);line-height:1.05;
  background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent;
}

@media (prefers-reduced-motion:reduce){
  .account-panel{animation:none}
}

/* ── Profilkopf ── */
.profil-head{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  padding:20px 22px;margin-bottom:26px;
  background:linear-gradient(180deg,var(--bg-secondary),var(--panel));
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);
}
.profil-ident{display:flex;gap:16px;align-items:center;min-width:0}
.profil-avatar{
  flex:none;width:60px;height:60px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:26px;color:#2a1c06;
  background:var(--grad-gold);box-shadow:var(--sh-cta), inset 0 1px 0 rgba(255,255,255,.5);
}
.profil-ident-txt{min-width:0}
.profil-ident-txt .eyebrow{margin:0 0 2px}
.profil-name{
  margin:2px 0 4px;font-family:var(--f-display);font-weight:800;
  font-size:clamp(24px,5vw,34px);line-height:1.05;
  background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent;
  overflow-wrap:anywhere;
}
.profil-friend{margin:0;color:var(--text-2);font-size:13.5px}
.friend-code{
  font-family:var(--f-mono);font-weight:600;letter-spacing:.12em;font-size:13.5px;
  color:var(--gold-light);background:rgba(200,150,60,.10);
  border:1px solid var(--line);border-radius:6px;padding:2px 9px;cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.friend-code:hover{border-color:var(--gold);background:rgba(200,150,60,.18)}
.profil-edit-btn{flex:none}

/* ── Statistik-Kacheln ── */
.stat-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  margin-bottom:34px;
}
.stat-card{
  display:flex;flex-direction:column;gap:3px;
  padding:16px 18px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line);
}
.stat-value{
  font-family:var(--f-mono);font-weight:700;font-size:30px;line-height:1.1;color:var(--text-1);
}
.stat-label{font-family:var(--f-ui);font-weight:500;font-size:13px;color:var(--text-2);margin-top:4px}
.stat-hint{font-size:11.5px;color:var(--text-3)}

/* Hero-Kachel: Vorhersagegenauigkeit hervorheben */
.stat-hero{
  grid-column:span 2;
  background:linear-gradient(150deg, rgba(200,150,60,.14), var(--panel) 70%);
  border-color:var(--gold);
}
.stat-hero .stat-value{
  font-size:44px;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-hero .stat-label{color:var(--gold-light);font-weight:600}

/* ── Siegquote nach Tischgröße ── */
.profil-subhead{
  margin:0 0 14px;font-family:var(--f-display);font-weight:700;font-size:18px;
  color:var(--text-1);border-bottom:1px solid var(--line);padding-bottom:8px;
}
.pc-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));margin-bottom:20px}
.pc-card{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 12px;
  align-items:center;padding:12px 16px;border-radius:var(--r-ctrl);
  background:var(--panel);border:1px solid var(--line);
}
.pc-count{
  grid-row:span 2;font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--gold-light);
}
.pc-bar{height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);overflow:hidden}
.pc-bar span{display:block;height:100%;background:var(--grad-gold);border-radius:var(--r-pill)}
.pc-wr{font-family:var(--f-mono);font-size:12px;color:var(--text-2)}

.profil-empty{
  color:var(--text-2);font-size:15px;line-height:1.7;
  padding:18px 20px;border-radius:var(--r-ctrl);
  background:rgba(200,150,60,.06);border:1px dashed var(--line);
}

/* ── Rang & Level ── */
.profil-level{
  display:flex;align-items:center;gap:18px;
  padding:16px 20px;margin-bottom:26px;
  background:linear-gradient(150deg, rgba(200,150,60,.10), var(--panel) 72%);
  border:1px solid var(--line);border-radius:var(--r-card);
}
.lvl-badge{
  flex:none;width:62px;height:62px;border-radius:var(--r-pill);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--grad-gold);color:#2a1c06;
  box-shadow:var(--sh-cta), inset 0 1px 0 rgba(255,255,255,.5);
}
.lvl-num{font-family:var(--f-mono);font-weight:700;font-size:24px;line-height:1}
.lvl-word{font-family:var(--f-ui);font-weight:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-top:1px}
.lvl-body{flex:1;min-width:0}
.lvl-rank{
  display:block;font-family:var(--f-display);font-weight:700;font-size:19px;
  color:var(--gold-light);letter-spacing:.02em;margin-bottom:8px;
}
.lvl-bar{height:9px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);overflow:hidden;border:1px solid var(--line)}
.lvl-bar span{display:block;height:100%;background:var(--grad-gold);border-radius:var(--r-pill);transition:width .5s cubic-bezier(.22,1,.36,1)}
.lvl-xp{display:block;margin-top:6px;font-family:var(--f-mono);font-size:11.5px;color:var(--text-3)}

/* ── Erfolge / Badges ── */
.badge-count{font-family:var(--f-mono);font-size:14px;color:var(--gold-light);font-weight:500}
.badge-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));margin-bottom:20px}
.badge{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;
  padding:16px 12px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line);
  opacity:.5;filter:grayscale(.7);transition:opacity .2s ease, filter .2s ease, border-color .2s ease;
}
.badge.is-earned{
  opacity:1;filter:none;border-color:var(--gold);
  background:linear-gradient(160deg, rgba(200,150,60,.14), var(--panel) 75%);
}
.badge-icon{font-size:30px;line-height:1}
.badge.is-earned .badge-icon{filter:drop-shadow(0 2px 6px rgba(200,150,60,.5))}
.badge-name{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--text-1)}
.badge.is-earned .badge-name{color:var(--gold-light)}
.badge-desc{font-size:11px;color:var(--text-3);line-height:1.4}
.badge-prog{
  font-family:var(--f-mono);font-size:11px;color:var(--text-2);
  background:rgba(0,0,0,.25);border-radius:var(--r-pill);padding:1px 8px;margin-top:2px;
}

/* ── Neu freigeschaltete Erfolge (Bug 4): Popup, Reiter-Zähler, Hochzählen ── */
/* Zähler „erreicht/gesamt" stößt beim Hochzählen kurz an */
.badge-count.is-bumping{
  animation:badge-count-bump .32s cubic-bezier(.22,1.4,.4,1);
  color:var(--gold-light);
}
@keyframes badge-count-bump{
  0%{transform:scale(1)} 45%{transform:scale(1.4)} 100%{transform:scale(1)}
}
.badge-count{display:inline-block}

/* frisch freigeschaltete Kachel kurz hervorheben */
.badge.is-new{
  animation:badge-pop 1.6s ease both;
  box-shadow:0 0 0 1px var(--gold), 0 6px 22px rgba(200,150,60,.35);
}
@keyframes badge-pop{
  0%{transform:scale(.9);opacity:.4}
  35%{transform:scale(1.06)}
  100%{transform:scale(1);opacity:1}
}

/* „+N"-Hinweis am Erfolge-Reiter */
#tab-achievements{position:relative}
.account-tab .tab-badge{
  position:absolute;top:-6px;right:-4px;min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:11px;font-weight:700;line-height:1;color:#2a1c06;
  background:var(--grad-gold);border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.4);
  animation:tab-badge-in .3s cubic-bezier(.22,1.4,.4,1) both;
}
@keyframes tab-badge-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* Popup-Stapel unten rechts (self-contained, isolierte az-*-Klassen) */
.az-badge-toasts{
  position:fixed;right:18px;bottom:18px;z-index:9999;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
}
.az-badge-toast{
  display:flex;align-items:center;gap:12px;
  min-width:230px;max-width:320px;padding:12px 16px;
  background:linear-gradient(160deg, rgba(200,150,60,.20), var(--panel) 78%);
  border:1px solid var(--gold);border-radius:var(--r-card);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transform:translateX(120%);opacity:0;transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .34s ease;
}
.az-badge-toast.is-in{transform:none;opacity:1}
.az-bt-icon{font-size:28px;line-height:1;filter:drop-shadow(0 2px 6px rgba(200,150,60,.55))}
.az-bt-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.az-bt-eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light)}
.az-bt-name{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--text-1)}
@media (max-width:520px){
  .az-badge-toasts{left:12px;right:12px;bottom:12px}
  .az-badge-toast{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .badge-count.is-bumping,.badge.is-new,.account-tab .tab-badge{animation:none}
  .az-badge-toast{transition:opacity .2s ease}
}

/* ── Freunde ── */
.profil-friends{margin-top:34px}
.friend-add{display:flex;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.friend-add input{
  flex:1 1 200px;min-width:0;box-sizing:border-box;padding:12px 14px;
  font-family:var(--f-mono);font-size:15px;letter-spacing:.1em;color:var(--text-1);text-transform:uppercase;
  background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:var(--r-ctrl);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.friend-add input::placeholder{color:var(--text-3);letter-spacing:normal;text-transform:none}
.friend-add input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,150,60,.16)}
.friend-add .btn{flex:none}
.friend-hint{margin:0 0 10px;font-size:12px;color:var(--text-3);font-weight:300}

.friend-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.friend-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;border-radius:var(--r-ctrl);
  background:var(--panel);border:1px solid var(--line);
}
.fr-avatar{
  flex:none;width:40px;height:40px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--text-1);
  background:var(--velvet);border:1px solid var(--line);
}
.fr-avatar.is-online::after{
  content:'';position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:var(--success);border:2px solid var(--panel);
}
.fr-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fr-name{font-family:var(--f-ui);font-weight:600;font-size:15px;color:var(--text-1);overflow-wrap:anywhere}
.fr-online{font-size:12px;color:var(--success);font-weight:500}
.fr-offline{font-size:12px;color:var(--text-3)}
.fr-code{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--gold-light);opacity:.8}
.fr-remove{
  flex:none;width:30px;height:30px;border-radius:var(--r-pill);cursor:pointer;
  color:var(--text-3);background:transparent;border:1px solid var(--line);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.fr-remove:hover{color:var(--error);border-color:var(--error);background:rgba(182,82,77,.1)}
.friend-empty{color:var(--text-3);font-size:13.5px;font-style:italic;margin:12px 0 0}

/* ── Daten & Konto (DSGVO) ── */
.profil-data{margin-top:34px}
.data-intro{color:var(--text-2);font-size:13.5px;line-height:1.6;margin:0 0 16px}
.data-row,.data-danger{
  display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;
  padding:14px 18px;border-radius:var(--r-ctrl);margin-bottom:12px;
  background:var(--panel);border:1px solid var(--line);
}
.data-danger{border-color:rgba(182,82,77,.45);background:rgba(182,82,77,.06)}
.data-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.data-txt b{font-family:var(--f-ui);font-weight:600;font-size:14.5px;color:var(--text-1)}
.data-txt span{font-size:12.5px;color:var(--text-3);line-height:1.5}
.data-row .btn,.data-danger .btn{flex:none}

.btn-danger{
  font-family:var(--f-ui);font-weight:600;color:#f2c7c4;
  border:1px solid rgba(182,82,77,.55);background:rgba(182,82,77,.14);
}
.btn-danger:hover{background:rgba(182,82,77,.24);border-color:var(--error);transform:translateY(-1px)}
.btn-danger:disabled{opacity:.5;cursor:not-allowed;transform:none}

.delete-confirm{
  padding:14px 18px;border-radius:var(--r-ctrl);margin-bottom:12px;
  background:rgba(182,82,77,.08);border:1px solid rgba(182,82,77,.45);
}
.delete-warn{margin:0 0 10px;color:#f2c7c4;font-size:13px;line-height:1.5}
.delete-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.delete-actions input{
  flex:1 1 160px;min-width:0;box-sizing:border-box;padding:10px 13px;
  font-family:var(--f-mono);font-size:14px;letter-spacing:.12em;color:var(--text-1);text-transform:uppercase;
  background:rgba(0,0,0,.3);border:1px solid rgba(182,82,77,.45);border-radius:var(--r-ctrl);
}
.delete-actions input::placeholder{color:var(--text-3);letter-spacing:.12em}
.delete-actions input:focus{outline:none;border-color:var(--error);box-shadow:0 0 0 3px rgba(182,82,77,.18)}

/* ── Design & Premium (Kosmetik) ── */
.profil-cosmetics{margin-top:34px}
.premium-box{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-radius:var(--r-ctrl);margin-bottom:6px;
  background:linear-gradient(150deg, rgba(200,150,60,.10), var(--panel) 72%);
  border:1px solid var(--line);
}
.premium-status{font-size:13.5px;color:var(--text-2);flex:1;min-width:200px}
.premium-on{font-family:var(--f-display);font-weight:700;color:var(--gold-light)}
.premium-off{font-family:var(--f-display);font-weight:700;color:var(--text-1)}
.premium-redeem{display:flex;gap:8px;flex-wrap:wrap}
.premium-redeem input{
  box-sizing:border-box;padding:10px 13px;min-width:0;flex:1 1 160px;
  font-family:var(--f-mono);font-size:13.5px;letter-spacing:.08em;color:var(--text-1);text-transform:uppercase;
  background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:var(--r-ctrl);
}
.premium-redeem input::placeholder{color:var(--text-3);letter-spacing:normal;text-transform:none}
.premium-redeem input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,150,60,.16)}
.premium-redeem .btn{flex:none}

.cosmetic-group{margin-top:20px}
.cosmetic-title{margin:0 0 10px;font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--gold-light)}
.cosmetic-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill, minmax(110px, 1fr))}
.cosmetic-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 10px;border-radius:var(--r-card);cursor:pointer;
  background:var(--panel);border:1px solid var(--line);
  transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cosmetic-tile:hover{transform:translateY(-2px);border-color:var(--gold-deep)}
.cosmetic-tile.is-active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold), 0 6px 18px rgba(200,150,60,.2)}
.cosmetic-tile.is-active::after{content:'✓';position:absolute;top:6px;right:8px;color:var(--gold);font-size:13px;font-weight:700}
.cosmetic-tile.is-locked{opacity:.62;cursor:not-allowed}
.cosmetic-tile.is-locked:hover{transform:none;border-color:var(--line)}
.cosmetic-name{font-family:var(--f-ui);font-weight:500;font-size:12.5px;color:var(--text-1)}
.cosmetic-tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:rgba(200,150,60,.12);border-radius:var(--r-pill);padding:1px 7px}
.cosmetic-note{margin-top:16px;font-size:13px;color:var(--text-2);line-height:1.6}

/* #5: Emote-Vorschau (nur Anzeige, kein Speichern) */
/* Kachel 84 px / Motiv 52 px (Handoff). Die alten 72/26 stammen aus der
   Emoji-Zeit – ein 26-px-Glyph reicht für die gezeichneten Motive nicht. */
.emote-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill, minmax(84px, 1fr))}
.emote-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px 9px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line);
}
.emote-tile.is-premium{border-color:var(--gold-deep);background:linear-gradient(160deg, rgba(200,150,60,.10), var(--panel) 78%)}
.emote-tile.is-locked{opacity:.6}
.emote-glyph{width:52px;height:52px;font-size:52px;line-height:1;display:flex;align-items:center;justify-content:center}
img.emote-glyph{object-fit:contain}
.emote-tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);background:rgba(200,150,60,.12);border-radius:var(--r-pill);padding:1px 6px;white-space:nowrap}
@media (max-width:600px){
  .emote-grid{grid-template-columns:repeat(auto-fill, minmax(68px, 1fr))}
  .emote-glyph{width:42px;height:42px;font-size:42px}
}

/* Vorschau-Swatches */
.sw{display:block;border-radius:8px;border:1px solid var(--line)}
/* Kartenrückseiten-Vorschau: eine ECHTE Karte aus cards.css, nicht mehr ein
   .sw-Kästchen mit dem Blatt als background-image. Die alte Kachel zeigte nur
   das Motiv – ohne Metallrahmen und ohne Wortmarken-Plakette, also ohne die
   beiden Teile, die sich je Rückseite unterscheiden und die man beim Auswählen
   eigentlich vergleichen will. Aufgebaut wird sie in auth/profil.js
   (cardBackPreview), eingefärbt über data-back (Farbtabelle in cards.css).
   Hier stehen nur noch die Maße und – weil die Kachel ein <button> ist und
   deshalb aus <span> besteht – das display. */
/* 60 px: Die Wortmarken-Plakette hat laut Handoff eine feste Untergrenze von
   13 px Höhe. Auf der alten 42-px-Kachel hätte sie ein Drittel der Karte
   eingenommen; ab etwa 60 px trägt die Karte sie in ihrem gedachten
   Verhältnis (60 × .155 ≈ 9 px, die Untergrenze greift also noch, fällt aber
   nicht mehr auf). Platz ist da – die Kachel ist mindestens 110 px breit. */
.cb-preview{--card-w:60px;--card-h:84px;display:block}
.cb-preview .card-face{display:block}
.sw-table_theme{width:56px;height:38px;border-radius:8px;background-size:cover;background-position:center;background-color:var(--bg-deep)}
/* Foto-Spieltische: das Motiv ist selbst die Tischplatte (kein Oval darüber).
   „Eichenwerkbank" und „Nussbaum" sind die beiden Gratis-Tische, die übrigen
   drei Premium. Dateien und Spielfeld-Regeln: style.css, Abschnitt
   „Foto-Spieltische". */
.sw-table_theme.sw-eiche{background-image:url('img/backgrounds/spieltisch-eiche.jpg')}
.sw-table_theme.sw-nussbaum{background-image:url('img/backgrounds/spieltisch-nussbaum.jpg')}
.sw-table_theme.sw-zeichenbrett{background-image:url('img/backgrounds/spieltisch-zeichenbrett.jpg')}
.sw-table_theme.sw-kupferplatte{background-image:url('img/backgrounds/spieltisch-kupferplatte.jpg')}
.sw-table_theme.sw-messingblech{background-image:url('img/backgrounds/spieltisch-messingblech.jpg')}
.sw-player_frame{width:40px;height:40px;border-radius:50%;background:transparent;border:none;
  background-repeat:no-repeat;background-position:center;background-size:contain}
.sw-player_frame.sw-messingring{background-image:url('img/rahmen/messingring.webp')}
.sw-player_frame.sw-stahlblende{background-image:url('img/rahmen/stahlblende.webp')}
.sw-player_frame.sw-blaufeuer{background-image:url('img/rahmen/blaufeuer.webp')}
.sw-player_frame.sw-gruenspan{background-image:url('img/rahmen/gruenspan.webp')}

@media (max-width:520px){
  .stat-hero{grid-column:span 1}
  .profil-head{flex-direction:column;align-items:flex-start}
  .profil-edit-btn{width:100%}
  .fr-code{display:none}
  .badge-grid{grid-template-columns:repeat(auto-fill, minmax(120px, 1fr))}
  .data-row .btn,.data-danger .btn{width:100%}
  .cosmetic-grid{grid-template-columns:repeat(auto-fill, minmax(96px, 1fr))}
}

/* Nav-Leiste: „Abmelden" + „Jetzt spielen" laufen auf schmalen Handys sonst
   über den rechten Rand hinaus (Seite passt nicht). Kompakter machen. */
@media (max-width:560px){
  header.site .nav{gap:12px;padding-left:16px;padding-right:16px}
  header.site .nav-cta{gap:8px}
  header.site .nav-cta .btn{padding:9px 12px;font-size:12.5px;white-space:nowrap}
}
@media (max-width:430px){
  header.site .brand .word{display:none} /* Nur das „A"-Zeichen – schafft Platz für beide Buttons */
}