/* ===================== Alphenia — Dashboard =====================
   1:1 nach der Vorlage: Smaragdgrün auf fast schwarzem Grund, sechs
   Karten in zwei Reihen, englische Beschriftung. Die Landingpage
   behält ihr Lime — hier gilt der eigene Akzent unten. */
/* Alle Werte unten sind aus dem Referenz-Screenshot gemessen, nicht
   geschätzt: Kartenfläche (11,14,13), Seitengrund oben (6,13,10) nach
   Schwarz unten, Navleiste reines Schwarz, Badge (211,182,121). */
:root{
  --acc:#c4f32b;
  --acc-dim:#a9d820;
  --acc-deep:#1f2a08;
  /* Die Bilder der Vorlage sind smaragdgruen. Statt sie neu zu rechnen, faerbt
     dieser Filter sie auf exakt das Lime der Startseite um. Er steht als
     <filter id="lime"> in account.html und community.html. */
  --tint:url(#lime);
  --amber:#d3b679;
  --bg:#000;
  --card:#0b0c09;
  --card-2:#0e100a;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.05);
  --txt:#f2f5f2;
  --txt-2:#9aa39c;
  --txt-3:#6b7470;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Geometrie, bei 1745 px Breite gemessen */
  --nav-h:48px;
  --pad-x:5.62vw;      /* 98 / 1745 */
  --pad-top:32px;
  --gap-x:11px;
  --gap-y:12px;
  --r:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:300;-webkit-font-smoothing:antialiased;
  position:relative;min-height:100vh;overflow-x:hidden;
}
/* In der Vorlage liegt oben ein grüner Schein, der nach unten in reines
   Schwarz läuft. Zwei Verläufe atmen gegenläufig — langsam genug, dass
   es nur als Stimmung wirkt, nicht als Animation. */
body::before,body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
}
body::before{
  background:
    radial-gradient(74% 42% at 22% -6%,rgba(196,243,43,.16),transparent 62%),
    radial-gradient(58% 38% at 82% -4%,rgba(196,243,43,.10),transparent 64%);
  animation:auroraA 26s ease-in-out infinite alternate;
}
body::after{
  background:radial-gradient(48% 30% at 52% 0%,rgba(214,250,96,.09),transparent 66%);
  animation:auroraB 34s ease-in-out infinite alternate;
}
@keyframes auroraA{
  0%  {transform:translate3d(-2%,0,0) scale(1);opacity:.85}
  100%{transform:translate3d(3%,1.5%,0) scale(1.09);opacity:1}
}
@keyframes auroraB{
  0%  {transform:translate3d(4%,1%,0) scale(1.06);opacity:.6}
  100%{transform:translate3d(-3%,0,0) scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
}
.nav,.grid{position:relative;z-index:1}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer}
input{font-family:inherit}

/* ---------- Kopfleiste ---------- */
.nav{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:14px;        /* eng gehalten: acht Reiter und der Sprachumschalter muessen passen */
  padding:0 var(--pad-x);height:var(--nav-h);
  background:#000;border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
/* Das Logo ist dasselbe Symbol wie auf der Startseite. Bei dieser Groesse
   versinkt das dunkle Metall im Schwarz der Leiste, deshalb leicht aufgehellt. */
.brand-mark{width:auto;height:24px;filter:brightness(1.22) contrast(1.08) drop-shadow(0 0 8px rgba(196,243,43,.3))}
.brand span{font-size:20px;font-weight:600;letter-spacing:-.01em;color:#fff}
.tabs{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button,
.tabs a{
  position:relative;white-space:nowrap;padding:18px 9px;
  font-size:14.5px;color:var(--txt-2);transition:color .2s var(--ease);
}
.tabs button:hover,
.tabs a:hover{color:#fff}
.tabs button.on,
.tabs a.on{color:#fff}
.tabs button.on::after,
.tabs a.on::after{
  content:"";position:absolute;left:9px;right:9px;bottom:0;height:2px;background:var(--acc);
}
.tabs button.pill,
.tabs a.pill{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 4px;padding:8px 15px;border-radius:999px;
  background:rgba(255,255,255,.05);color:#e6eae7;
}
.tabs button.pill svg,
.tabs a.pill svg{width:14px;height:14px;color:var(--txt-2)}
.tabs button.pill::after,
.tabs a.pill::after{display:none}
/* Wird es eng, gibt zuerst das Suchfeld nach (bis auf die Lupe) - erst dann
   werden Reiter abgeschnitten. */
.search{
  flex:0 100 auto;min-width:48px;overflow:hidden;display:flex;align-items:center;gap:10px;
  height:38px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
}
.search svg{flex:0 0 auto;width:16px;height:16px;color:var(--txt-3)}
.search input{flex:1 1 auto;min-width:0;width:170px;border:0;background:none;color:#fff;font-size:14px;font-weight:300;outline:0}
.search input::placeholder{color:var(--txt-3)}
.rankchip{
  flex:0 0 auto;display:flex;align-items:center;gap:11px;
  height:38px;padding:0 10px 0 8px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
}
.rc-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(196,243,43,.4);color:var(--acc)}
.rc-ic svg{width:14px;height:14px}
.rankchip span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.rankchip b{font-size:14px;font-weight:600;color:#fff}
.rankchip em{font-style:normal;font-size:9.5px;letter-spacing:.09em;color:var(--txt-3)}
.rc-chev{width:16px;height:16px;color:var(--txt-3)}
.user{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.user > span{font-size:14.5px;color:#e6eae7}
.avatar{
  width:30px;height:30px;border-radius:7px;display:grid;place-items:center;
  font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  background:linear-gradient(150deg,var(--acc),#7f9f12);color:#0b0f05;
  box-shadow:0 0 0 1.5px rgba(196,243,43,.5);
}
.user button{color:var(--txt-3);display:grid;place-items:center}
/* Kontomenue unter dem Profil (js/usermenu.js) */
.user.has-menu{position:relative;cursor:pointer;padding:4px 4px 4px 8px;margin:-4px -4px -4px -8px;border-radius:10px;
  transition:background .2s var(--ease);outline:0}
.user.has-menu:hover,.user.has-menu.open,.user.has-menu:focus-visible{background:rgba(255,255,255,.05)}
.user.has-menu > button svg{transition:transform .25s var(--ease)}
.user.has-menu.open > button svg{transform:rotate(180deg)}
.user-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:236px;padding:14px;cursor:default;
  border:1px solid var(--line);border-radius:12px;background:#0d0f0a;box-shadow:0 18px 50px rgba(0,0,0,.7)}
.user-menu[hidden]{display:none}
.user-menu p{margin:0}
.um-k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin-bottom:5px !important}
.um-mail{font-size:15px;color:#fff;overflow-wrap:anywhere}
.um-ex{margin-top:6px !important;font-size:13px;color:var(--txt-2);overflow-wrap:anywhere}
.um-ex b{font-weight:500;color:var(--acc)}
.um-link{display:block;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:14.5px;color:#dfe4dc}
.um-link:hover{color:var(--acc)}
.user-menu .um-out{display:block;width:100%;margin-top:10px;padding:9px 12px;border-radius:8px;text-align:center;
  font:inherit;font-size:14px;color:#ff9a9a;background:rgba(255,90,90,.08);border:1px solid rgba(255,90,90,.25);cursor:pointer}
.user-menu .um-out:hover{background:rgba(255,90,90,.16);color:#fff}
.user button svg{width:16px;height:16px}

/* ---------- Raster: sechs Karten, zwei Reihen ---------- */
/* 397 : 734 : 396 px bei 1549 px Inhaltsbreite */
/* Jede Karte ist gleich hoch (--row-h): beide Reihen schliessen oben und
   unten buendig ab, keine Karte haengt tiefer als ihre Nachbarn. */
.grid{
  --row-h:460px;
  display:grid;gap:var(--gap-y) var(--gap-x);
  padding:var(--pad-top) var(--pad-x) 48px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.849fr) minmax(0,.997fr);
  align-items:start;
}
.card{
  border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(168deg,var(--card-2) 0%,var(--card) 62%);
  overflow:hidden;
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.13em;color:var(--txt-2);
}
.card-head b{color:#fff;font-weight:600;font-size:12.5px;letter-spacing:.02em;
  font-family:"Outfit",sans-serif}
.card-head.plain{padding:18px 20px}
.head-tools{display:flex;align-items:center;gap:10px}
.link{display:inline-flex;align-items:center;gap:9px;color:var(--acc);
  font-family:"Outfit",sans-serif;font-size:15.5px;font-weight:500;letter-spacing:0;
  transition:gap .3s var(--ease)}
.link:hover{gap:14px}
.link svg{width:17px;height:17px}
.link.sm{font-size:11.5px;letter-spacing:.13em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--txt-2)}
.link.sm:hover{color:var(--acc)}
.link.sm svg{width:14px;height:14px}

/* Schaufenster auf der Startseite (account.html?preview): keine Rollbalken */
html.is-preview,html.is-preview body{overflow:hidden}

/* ---------- Community ---------- */
.community{grid-column:1;grid-row:1;display:flex;flex-direction:column;height:460px}
.community-art{position:relative;flex:1 1 auto;height:312px;overflow:hidden}
.community-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--ease)}
.community:hover .community-art img{transform:scale(1.045)}
.community-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(10,15,12,.9) 90%,var(--card) 100%)}
.community-body{position:relative;z-index:2;padding:0 22px 24px;margin-top:-16px}
.community-body h2{margin:0 0 12px;font-size:27px;font-weight:600;color:#fff;letter-spacing:-.02em}
.community-body p{margin:0 0 18px;font-size:15.5px;line-height:1.55;color:var(--txt-2)}

/* ---------- Rangkarte ---------- */
.rank{
  grid-column:2;grid-row:1;position:relative;height:460px;overflow:hidden;
  padding:15px 26px 16px;text-align:center;
  background:
    radial-gradient(58% 46% at 50% 40%,rgba(196,243,43,.11),transparent 70%),
    linear-gradient(165deg,#0e110a,#080906 70%);
}
/* das feine Liniengeflecht im Hintergrund der Vorlage */
/* ---- Kachelbild als Hintergrund der ganzen Karte ----
   Daniels sechs Entwürfe, textfrei geschnitten; Titel, Badge, Zahl und
   Fussleiste liegen als HTML darüber, damit sie live bleiben. */
/* ---- Kachelbild je Rang ----
   Figur und Kulisse bleiben ein Bild — nichts wird freigestellt, sonst
   klebt die Figur sichtbar auf dem Hintergrund. Gleich gross erscheinen
   die Figuren, weil das Schnittfenster je Rang proportional zur
   Figurenhöhe gewählt ist: kleine Figur, engeres Fenster. */
/* Kein transform auf dem Bild. Jede Skalierung — auch eine ganz langsame
   Ken-Burns-Fahrt — zwingt die GPU, die Szene in jedem einzelnen Frame
   bilinear neu zu rechnen, und bilinear ist deutlich weicher als die
   einmalige Ausgabe des Browsers. Die Szene liegt deshalb starr und
   pixelgenau; bewegt wird ausschliesslich das Licht darueber. */
.rank-art{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;z-index:0;
  transition:opacity .34s var(--ease);
}
.rank-art.swap{opacity:0}
.rank-art,.community-art img,.continue-thumb img,.course img,.comm-card > img{filter:var(--tint)}
.rank[data-state="locked"] .rank-art{filter:var(--tint) saturate(.68) brightness(.74)}

/* ---- Buehne der Rangfigur ----
   Die Figur wird aus einem 3D-Modell gerendert und steht still; Lichtschein
   und Leuchtring sind gezeichnet. Beides entsteht in der Aufloesung des
   Bildschirms. Nur die aeusseren Ringe drehen sich langsam. Mitte bei 41,5 %
   der Kartenhoehe, zwischen Statuszeile und Volumenzahl. */
.rank-glow{position:absolute;left:50%;top:41.5%;z-index:0;width:920px;height:620px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(196,243,43,.30),rgba(196,243,43,.10) 38%,rgba(196,243,43,.03) 62%,transparent 76%)}
.rank-ring{position:absolute;left:50%;top:41.5%;z-index:0;width:540px;height:540px;margin:-270px 0 0 -270px;
  overflow:visible;pointer-events:none;transition:opacity .5s var(--ease)}
.rank-ring .spin{animation:rankSpin 140s linear infinite}
.rank-ring .spin.back{animation-duration:90s;animation-direction:reverse}
@keyframes rankSpin{to{transform:rotate(360deg)}}
/* Die Flaeche der Figur: 50 % der Kartenhoehe, mittig auf dem Ring */
.rank-canvas{position:absolute;left:0;top:16.5%;z-index:0;width:100%;height:50%;display:block;
  pointer-events:none;transition:filter .5s var(--ease)}
/* Schein und Schatten unter dem Fuss */
.rank-floor{position:absolute;left:50%;top:65.2%;z-index:0;width:210px;height:26px;transform:translate(-50%,-50%);
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,.4) 55%,transparent),
             radial-gradient(closest-side,rgba(196,243,43,.5),transparent);
  box-shadow:0 0 34px 10px rgba(196,243,43,.28)}
.rank[data-state="locked"] .rank-ring,.rank[data-state="locked"] .rank-glow,.rank[data-state="locked"] .rank-floor{opacity:.3}
.rank[data-state="locked"] .rank-canvas{filter:saturate(.15) brightness(.72)}
/* Stufe "Kein Rang" ohne 3D: leere Buehne, nur der Ring */
.rank.empty .rank-canvas,.rank.empty .rank-floor,.rank.empty .rank-art{visibility:hidden}
/* das Bild der Vorlage nur, wenn das 3D nicht gestartet ist */
.rank-art{display:none}
.rank.no3d .rank-art{display:block}
.rank.no3d .rank-glow,.rank.no3d .rank-ring,.rank.no3d .rank-floor,.rank.no3d .rank-canvas{display:none}
@media (prefers-reduced-motion:reduce){ .rank-ring .spin{animation:none} }
/* Verlauf, damit Titel, Zahl und Fussleiste lesbar bleiben */
.rank-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,8,6,.30) 0%,rgba(4,8,6,.05) 15%,transparent 26%),
    linear-gradient(0deg,rgba(3,6,5,.90) 0%,rgba(3,6,5,.74) 13%,rgba(3,6,5,.28) 24%,transparent 38%);
}
/* Wandernder Lichtschein. Er liegt UEBER der Szene und bewegt nur sich
   selbst — das Foto bleibt unangetastet und damit scharf, die Kachel wirkt
   trotzdem gebaut statt eingeklebt. */
.rank-scrim::before{
  content:"";position:absolute;inset:-20% -10%;
  background:
    radial-gradient(38% 54% at 30% 42%,rgba(196,243,43,.16),transparent 70%),
    radial-gradient(30% 44% at 72% 36%,rgba(211,182,121,.10),transparent 72%);
  animation:rankLight 21s ease-in-out infinite alternate;
}
@keyframes rankLight{
  from{transform:translate3d(-3.5%,-1.5%,0)}
  to  {transform:translate3d(3.5%,1.5%,0)}
}
/* Feines, ueber alle sechs Raenge identisches Korn. Es bindet die Szene an
   die flachen UI-Flaechen und gibt der Kachel hohe Ortsfrequenzen zurueck,
   die das Hochrechnen gekostet hat. */
.rank-scrim::after{
  content:"";position:absolute;inset:0;opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
@media (prefers-reduced-motion:reduce){.rank-scrim::before{animation:none}}

.rank-info{
  position:absolute;right:20px;top:20px;z-index:3;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(10,16,12,.6);
  backdrop-filter:blur(8px);
  color:#e6eae7;font-size:14px;transition:.3s var(--ease);
}
.rank-info:hover{border-color:rgba(196,243,43,.5);color:#fff}
.rank-info svg{width:16px;height:16px}
.rank-name{position:relative;z-index:3;margin:0 0 9px;font-size:26px;font-weight:600;
  color:#fff;letter-spacing:-.015em;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.rank-state{
  position:relative;z-index:3;display:inline-block;margin:0;
  padding:5px 13px;border-radius:5px;
  background:#e8cf93;color:#2a2008;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;
}
.rank[data-state="done"] .rank-state{background:var(--acc);color:#0b0f05}
.rank[data-state="locked"] .rank-state{background:rgba(255,255,255,.16);color:#cfd6d0}
.rank-arrow{
  position:absolute;top:44%;z-index:3;width:34px;height:34px;
  display:grid;place-items:center;color:rgba(255,255,255,.55);transition:.25s var(--ease);
  text-shadow:0 2px 8px #000;
}
.rank-arrow:hover{color:#fff}
.rank-arrow svg{width:26px;height:26px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.rank-arrow.prev{left:12px}
.rank-arrow.next{right:12px}

/* Zahl und Fussleiste sitzen unten auf dem Bild */
.rank-pts{
  position:absolute;left:26px;right:26px;bottom:126px;z-index:3;margin:0;
  display:flex;align-items:baseline;justify-content:center;gap:9px;
}
.rank-pts b{font-size:34px;font-weight:600;color:#fff;letter-spacing:-.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.8)}
.rank-pts span{font-size:23px;color:var(--acc);font-weight:500;
  text-shadow:0 2px 12px rgba(0,0,0,.8)}

/* ---- Fussleiste der Rangkarte: aktueller Rang und Volumen ----
   Sie liegt auf dem Kachelbild, deshalb der Verlauf darunter. */
.rank-foot{position:absolute;left:24px;right:24px;bottom:36px;z-index:3;text-align:left}
.rf-head{display:flex;align-items:center;gap:12px}
.rf-ic{
  flex:0 0 auto;width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;color:#0d1b14;
  background:linear-gradient(160deg,#dfeaf2,#9fb4c6 55%,#7d93aa);
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.rf-ic svg{width:22px;height:22px}
.rf-l{display:flex;flex-direction:column;gap:0;min-width:0}
.rf-l em{font-style:normal;font-size:13px;color:#b6c0b9;font-weight:300}
.rf-l b{font-size:19px;font-weight:600;color:#fff;letter-spacing:-.01em;white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.7)}
.rf-l b span{color:#9aa39c;font-weight:500}
.rf-r{margin:0 0 0 auto;font-size:14px;color:#dfe4e0;font-weight:300;white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.7)}
.rf-r em{font-style:normal;color:#9aa39c}
.rf-bar{
  position:relative;height:9px;margin-top:12px;border-radius:99px;
  background:rgba(255,255,255,.12);overflow:hidden;
}
.rf-bar > i{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 22px)}
.rf-bar > b{position:relative;display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--acc-dim),var(--acc));
  box-shadow:0 0 12px rgba(196,243,43,.6);transition:width 1.1s var(--ease)}
.rf-scale{display:flex;justify-content:space-between;margin-top:6px;
  font-size:12.5px;color:#9aa39c}

.rank-dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;z-index:2;display:flex;justify-content:center;gap:7px}
.rank-dots button{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.18);transition:.3s var(--ease)}
.rank-dots button.had{background:rgba(196,243,43,.45)}
.rank-dots button.on{width:20px;background:#fff}

/* ---------- Leaderboard ---------- */
.board{grid-column:3;grid-row:1;display:flex;flex-direction:column;height:var(--row-h)}
/* Acht Zeilen wie in der Vorlage; die echte Rangliste ist laenger und rollt. */
.board-list{padding:0 8px;display:grid;align-content:start;flex:1 1 auto;min-height:0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.board-list li{
  display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;
  transition:.2s var(--ease);
}
.board-list li:hover,.board-list li.is-hover{background:rgba(255,255,255,.03)}
.board-list .pos{flex:0 0 auto;min-width:24px;font-size:14px;color:var(--txt-3)}
.board-list .flag{flex:0 0 auto;width:22px;height:15px;border-radius:2px;overflow:hidden;
  display:grid;place-items:center;font-size:14px;line-height:1}
.board-list .nm{flex:1;min-width:0;font-size:15px;color:#e6eae7;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list .pts{flex:0 0 auto;display:flex;align-items:center;gap:7px}
.pts-ic{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  background:rgba(196,243,43,.16);color:var(--acc)}
.pts-ic svg{width:10px;height:10px}
.board-list .pts b{font-size:14.5px;font-weight:600;color:#fff}
.board-list .pts em{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--txt-3)}
.board-bar{height:4px;margin:8px 16px 0;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.board-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--acc);
  transition:width 1s var(--ease)}
.countdown{display:flex;align-items:flex-start;justify-content:center;gap:12px;
  padding:16px 14px 20px;margin-top:auto}
.countdown div{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:48px}
.countdown b{font-size:26px;font-weight:500;color:#fff;letter-spacing:.01em}
.countdown span{font-size:9.5px;letter-spacing:.11em;color:var(--txt-3)}
.countdown i{font-style:normal;color:var(--txt-3);font-size:17px;padding-top:4px}

/* ---------- Kurse ---------- */
.courses{grid-column:1;grid-row:2;display:flex;flex-direction:column;height:var(--row-h)}
.course-row{display:flex;gap:12px;padding:0 20px 20px;overflow:hidden;flex:1 1 auto;min-height:0}
/* Ein Titelbild ueber die ganze Karte */
.course-cover{position:relative;display:block;flex:1 1 auto;min-height:0;margin:0 20px 20px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(196,243,43,.28);color:inherit;
  background:radial-gradient(62% 46% at 50% 40%,rgba(196,243,43,.3),rgba(196,243,43,.05) 60%,transparent 78%),
             linear-gradient(180deg,#0e1208 0%,#050604 70%,#020301 100%);
  transition:border-color .3s var(--ease)}
.course-cover:hover{border-color:rgba(196,243,43,.6)}
.course-cover canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  transition:opacity .6s var(--ease),transform .8s var(--ease)}
.course-cover canvas.ready{opacity:1}
.course-cover:hover canvas{transform:scale(1.035)}
.cc-art{position:absolute;inset:0;transition:opacity .5s var(--ease)}
.cc-art svg{display:block;width:100%;height:100%}
.course-cover:has(canvas.ready) .cc-art{opacity:0}
/* Lichtfleck auf dem Boden unter den Figuren */
.cc-floor{position:absolute;left:6%;right:6%;top:55%;height:20%;border-radius:50%;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(closest-side,rgba(196,243,43,.34),rgba(196,243,43,.08) 60%,transparent)}
.course-cover:has(canvas.ready) .cc-floor{opacity:1}
.course-cover .course-cap{padding-top:70px}
.course-cover .course-cap b{font-size:21px}
.course-cover .course-cap em{font-size:13.5px;max-width:270px}
/* Die Titelbilder (430 x 588) fuellen die Kartenhoehe unbeschnitten; was nicht
   mehr passt, laeuft rechts aus der Karte - wie eine angeschnittene Reihe. */
.course{position:relative;flex:0 0 auto;height:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;
  border:1px solid var(--line-2);transition:.3s var(--ease);cursor:pointer}
.course a{display:block;height:100%;color:inherit}
.course-art svg{display:block;width:100%;height:100%}
.course-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:4px;
  padding:44px 14px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.86) 62%)}
.course-cap b{font-size:18px;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:#fff}
.course-cap em{font-style:normal;font-size:12.5px;line-height:1.35;color:var(--txt-2)}
.course:first-child{border-color:rgba(196,243,43,.45)}
.course:hover{transform:translateY(-3px)}
.course-art{position:relative;height:100%;display:block}
.course-art img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.course:hover .course-art img{transform:scale(1.05)}
.c-tag{position:absolute;left:10px;top:10px;z-index:2;padding:4px 9px;border-radius:5px;
  background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);
  color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em}

/* ---------- Monthly P&L ---------- */
.pnl{grid-column:2;grid-row:2;display:flex;flex-direction:column;height:var(--row-h)}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.seg button{padding:6px 16px;border-radius:999px;font-size:13px;color:var(--txt-2);transition:.2s var(--ease)}
.seg button.on{background:rgba(255,255,255,.08);color:#fff}
.seg.icons button{padding:6px 10px}
.seg.icons svg{width:16px;height:16px}
/* Monats-Performance: Kennzahlen und Diagramm */
.perf-ex{font-style:normal;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--acc);
  padding:4px 10px;border-radius:99px;background:rgba(196,243,43,.12)}
.perf-when{font-style:normal;font-size:11.5px;letter-spacing:.04em;color:var(--txt-3);font-family:"Outfit",sans-serif}
.perf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 20px 12px}
.perf-stats div{padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);min-width:0}
.perf-stats dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);margin-bottom:4px}
.perf-stats dd{margin:0;font-size:19px;font-weight:600;color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}
.perf-stats dd.up{color:var(--acc)}
.perf-stats dd.down{color:#ff7a7a}
.perf-chart{position:absolute;left:0;right:0;top:12px;width:100%;height:calc(100% - 44px);display:none}
.perf-chart .g{stroke:rgba(255,255,255,.06);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.perf-chart .b{fill:var(--acc);opacity:.9;transition:opacity .2s}
.perf-chart .b:hover{opacity:1}
.perf-chart .l{fill:none;stroke:var(--acc);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.perf-chart .a{fill:rgba(196,243,43,.12)}
.perf-x{position:absolute;left:0;right:0;bottom:4px;height:18px;margin:0;padding:0;list-style:none;display:none}
.perf-x li{position:absolute;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.3)}
.pnl.has-data .perf-chart,.pnl.has-data .perf-x{display:block}
.pnl.has-data .pnl-axis{top:12px;bottom:32px}
.pnl-empty[hidden]{display:none}
.pnl .pnl-plot{min-height:214px;flex:1 1 auto}
@media (max-width:760px){ .perf-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pnl-unit{display:flex;align-items:center;gap:9px;margin:0 20px 6px;
  font-size:13px;color:var(--txt-3)}
.pnl-unit i{width:14px;height:2px;background:var(--txt-2);border-radius:2px}
.pnl-unit i.dash{width:10px}
.pnl-unit em{font-style:normal;color:var(--line)}
.pnl-plot{position:relative;min-height:258px;margin:0 8px 16px}
.pnl-axis{position:absolute;left:10px;top:18px;bottom:44px;display:flex;
  flex-direction:column;justify-content:space-between;z-index:1;pointer-events:none}
.pnl-axis li{font-size:11px;color:rgba(255,255,255,.22)}
.pnl-empty{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;min-height:258px;padding:16px;text-align:center}
.pnl-badge{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(196,243,43,.35);background:rgba(196,243,43,.07);color:var(--acc);margin-bottom:2px}
.pnl-badge svg{width:28px;height:28px}
.pnl-empty h3{margin:0;font-size:21px;font-weight:500;color:#fff;letter-spacing:-.01em}
.pnl-empty p{margin:0 0 6px;max-width:430px;font-size:15px;line-height:1.5;color:var(--txt-2)}
.pnl-cta{
  display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border-radius:9px;
  background:var(--acc-deep);border:1px solid rgba(196,243,43,.4);
  color:#eef9c9;font-size:15px;font-weight:600;
  transition:.25s var(--ease);
}
.pnl-cta:hover{background:#2c3b0b;border-color:rgba(196,243,43,.7)}
.pnl-cta svg{width:17px;height:17px}

/* ---------- Continue ---------- */
.continue{grid-column:3;grid-row:2;padding-bottom:20px}
.continue-thumb{position:relative;height:210px;background:#05090a;overflow:hidden}
.continue-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease)}
.continue:hover .continue-thumb img{transform:scale(1.05)}
.play{
  z-index:2;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:#0b0f05;transition:.3s var(--ease);
}
.play:hover{transform:translate(-50%,-50%) scale(1.07)}
.play svg{width:22px;height:22px;margin-left:2px}
.progress{z-index:2;position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16)}
.progress b{display:block;height:100%;width:34%;background:var(--acc)}
.continue-k{margin:16px 20px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.13em;color:var(--txt-2)}
.continue h3{margin:0 20px;font-size:19px;font-weight:500;color:#fff;letter-spacing:-.01em}

/* ---------- schmaler ---------- */
@media (max-width:1300px){
  .search{display:none}
}
@media (max-width:1150px){
  .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rank{grid-column:1/-1;grid-row:1}
  .community{grid-column:1;grid-row:2}
  .board{grid-column:2;grid-row:2}
  .courses{grid-column:1;grid-row:3}
  .pnl{grid-column:1/-1;grid-row:4}
}
@media (max-width:820px){
  .nav{height:auto;flex-wrap:wrap;padding:10px 14px;gap:12px}
  .tabs{order:3;width:100%;flex:1 0 100%}
  .tabs button,
  .tabs a{padding:12px 11px}
  .user > span{display:none}
  .grid{grid-template-columns:1fr;gap:12px;padding:14px 14px 36px}
  .card{grid-column:1 !important}
  .rank{grid-row:1 !important;padding:20px 14px 22px;min-height:0}
  .community{grid-row:2 !important;min-height:0}
  .board{grid-row:3 !important;min-height:0}
  .courses{grid-row:4 !important}
  .pnl{grid-row:5 !important}
  .rank-disc{width:202px;height:202px}
  .rank-arrow.prev{left:0}
  .rank-arrow.next{right:0}
  .rank-ghost{display:none}
  .rank-info{position:static;margin-bottom:12px}
  .course{flex:0 0 68%}
  .countdown b{font-size:22px}
}

/* ---------- Community-Seite ----------
   Aufbau 1:1 aus der Vorlage vermessen (Seitenbreite 2000 px):
   Karte 551 x 427, Eckenradius 14, Innenabstand 28, Foto 551 x 250
   randlos an den oberen Ecken, Knopf 494 x 52. Farben sind unsere. */
.comm{
  min-height:calc(100vh - var(--nav-h));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px var(--pad-x) 96px;text-align:center;
}
.comm h1{
  font-family:Newsreader,Georgia,'Times New Roman',serif;
  font-weight:400;font-size:clamp(38px,4.6vw,64px);line-height:1.08;
  letter-spacing:-.005em;margin:0 0 18px;color:#fff;
}
.comm-lead{
  margin:0 0 40px;max-width:470px;color:var(--txt-2);
  font-size:16px;line-height:1.55;
}
.comm-card{
  width:551px;max-width:100%;
  background:var(--card);border:1px solid var(--line, rgba(255,255,255,.07));
  border-radius:14px;overflow:hidden;text-align:left;
}
.comm-card img{display:block;width:100%;height:250px;object-fit:cover}
.comm-body{padding:28px}
.comm-card h2{margin:0 0 6px;font-size:20px;font-weight:600;color:#fff}
.comm-card p{margin:0 0 14px;font-size:17px;color:var(--txt-2)}
.comm-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:52px;border-radius:10px;text-decoration:none;
  background:var(--acc);color:#0b0f05;font-size:17px;font-weight:600;
  transition:filter .18s var(--ease, ease);
}
.comm-btn:hover{filter:brightness(1.08)}
.comm-btn svg{width:20px;height:20px}
.comm-note{margin:22px 0 0;font-size:13px;color:var(--txt-3, #7d8a83)}
@media (max-width:640px){ .comm{padding:40px 18px 64px} .comm-card img{height:190px} }

/* ---------- "Kommt bald" ----------
   Eine Seite fuer alle Bereiche, die es noch nicht gibt. Sie nutzt den
   Aufbau der Community-Seite, damit sie sich nicht wie ein Fehler anfuehlt,
   sondern wie ein Platz, der schon reserviert ist. */
.soon{gap:0}
.soon-badge{
  display:grid;place-items:center;width:64px;height:64px;margin:0 0 22px;
  border-radius:50%;border:1px solid var(--line);
  background:radial-gradient(70% 70% at 50% 25%,rgba(196,243,43,.16),transparent 70%);
  color:var(--acc);
}
.soon-badge svg{width:28px;height:28px}
.soon-kicker{
  margin:0 0 12px;font-size:11px;letter-spacing:.18em;font-weight:600;
  color:var(--acc);
}
.soon h1{margin:0 0 16px}
.soon .comm-lead{margin-bottom:34px;max-width:440px}
.soon-back{width:auto;padding:0 26px;background:transparent;color:var(--txt);
  border:1px solid var(--line)}
.soon-back:hover{border-color:rgba(255,255,255,.22);filter:none}
.soon-back svg{width:18px;height:18px}

/* ---------- Leaderboard-Seite ----------
   Aufbau nach Daniels Vorlage: links die Saison ueber die ganze Hoehe, oben
   Mitte das Podest, rechts der eigene Stand, darunter die Tabelle. Farben,
   Karten und Abstaende sind die des Dashboards. */
.lb{
  position:relative;z-index:1;
  display:grid;gap:var(--gap-y) var(--gap-x);
  padding:var(--pad-top) var(--pad-x) 48px;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1.74fr) minmax(0,.86fr);
  grid-template-rows:auto minmax(0,1fr);
  align-items:stretch;
}
.lb-hex{
  position:relative;display:grid;place-items:center;flex:0 0 auto;
  width:74px;height:82px;color:#0b0f05;
  background:linear-gradient(160deg,#e6ff7a,var(--acc) 45%,var(--acc-dim));
  clip-path:polygon(50% 0,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%);
}
.lb-hex::after{content:"";position:absolute;inset:2.5px;background:#0b0d06;
  clip-path:polygon(50% 0,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%)}
.lb-hex img{position:relative;z-index:1;width:66%;height:auto}

/* Saison */
.lb-season{grid-column:1;grid-row:1/3;display:flex;flex-direction:column}
.lb-art{position:relative;height:372px;flex:0 0 auto;overflow:hidden}
.lb-art img:not(.lb-art-mark){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--tint)}
.lb-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,8,4,.25) 0%,transparent 40%,var(--card) 100%)}
.lb-art-mark{position:absolute;left:50%;top:44%;z-index:1;width:210px;height:auto;
  transform:translate(-50%,-50%);
  filter:brightness(1.15) drop-shadow(0 0 34px rgba(196,243,43,.45))}
.lb-season-body{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;
  margin-top:-42px;padding:0 20px 20px}
.lb-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:10px;align-self:flex-start;
  border:1px solid var(--line);background:rgba(255,255,255,.02)}
.lb-tabs span,.lb-tabs button{padding:7px 14px;border:0;border-radius:7px;background:none;font:inherit;
  font-size:14px;font-weight:500;color:var(--txt-2)}
.lb-tabs button{cursor:pointer;transition:color .2s var(--ease)}
.lb-tabs button:hover{color:#fff}
.lb-tabs .on{background:rgba(255,255,255,.08);color:#fff}
/* Boersen-Umschalter in der Leaderboard-Karte des Dashboards */
.board-ex{display:inline-flex;gap:2px;padding:3px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.board-ex button{padding:4px 10px;border:0;border-radius:6px;background:none;font:inherit;font-size:12px;font-weight:500;
  letter-spacing:.02em;color:var(--txt-2);cursor:pointer;transition:color .2s var(--ease)}
.board-ex button:hover{color:#fff}
.board-ex button.on{background:rgba(196,243,43,.14);color:var(--acc)}
.board-list li.none{display:block;padding:26px 12px;font-size:14px;line-height:1.5;color:var(--txt-3);text-align:center}
.lb-tabs .on::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;
  border-radius:2px;background:var(--acc);transform:skewX(-14deg)}
.lb-pool{display:flex;justify-content:space-between;gap:16px;margin:22px 0 26px}
.lb-pool p{margin:0;display:flex;flex-direction:column;gap:4px}
.lb-pool p.r{text-align:right}
.lb-pool b{font-size:34px;font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1}
.lb-pool span{font-size:13px;color:var(--txt-2)}
.lb-season h3{margin:0 0 6px;font-size:15px;font-weight:500;color:#fff}
.lb-prizes li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:15px;color:var(--txt-2)}
.lb-prizes li b{font-weight:400;color:var(--txt-2)}
.lb-prizes li.none{border:0;font-size:14px;line-height:1.5;color:var(--txt-3)}
.lb-count{margin-top:auto;padding:18px 10px;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.02)}
.lb-season .lb-prizes{margin-bottom:24px}

/* Podest */
.lb-podium{grid-column:2;grid-row:1;display:flex;justify-content:center;align-items:flex-start;
  gap:38px;padding:0 24px 30px;min-height:344px;
  background:
    radial-gradient(60% 70% at 50% 0%,rgba(196,243,43,.10),transparent 70%),
    linear-gradient(168deg,var(--card-2) 0%,var(--card) 62%)}
.lb-place{flex:0 1 196px;display:flex;flex-direction:column;align-items:center;
  padding:38px 12px 62px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.02));
  clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%)}
.lb-place.p1{flex-basis:216px;padding-top:44px;padding-bottom:74px;
  background:linear-gradient(180deg,rgba(196,243,43,.16),rgba(255,255,255,.03))}
.lb-place.empty{visibility:hidden}
/* Im Podest traegt das Sechseck die Platznummer am unteren Rand. Die Form
   liegt deshalb auf ::before - sonst schnitte clip-path die Nummer ab. */
.lb-place .lb-hex{z-index:0;clip-path:none;background:none}
.lb-place .lb-hex::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,#e6ff7a,var(--acc) 45%,var(--acc-dim));
  clip-path:polygon(50% 0,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%)}
.lb-place .lb-hex em{position:absolute;left:50%;bottom:-8px;width:22px;height:22px;
  z-index:2;display:grid;place-items:center;transform:translateX(-50%);border-radius:50%;
  background:#050604;border:1px solid rgba(255,255,255,.25);
  color:#fff;font-style:normal;font-size:12px;font-weight:700}
.lb-place.p2 .lb-hex::before,.lb-place.p3 .lb-hex::before{
  background:linear-gradient(160deg,#f3f5ee,#c9cfbd 50%,#8f9783)}
.lb-vol{margin:26px 0 0;font-size:21px;font-weight:600;color:#fff;letter-spacing:-.01em}
.lb-place.p1 .lb-vol{font-size:23px}
.lb-vol span{color:var(--txt-3);font-weight:400}
.lb-name{margin:14px 0 0;padding-top:13px;width:100%;border-top:1px solid var(--line);
  font-size:15px;color:var(--txt-2);letter-spacing:.04em}
.lb-cash{margin:22px 0 0;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.07);
  font-size:15px;font-weight:500;color:#fff;white-space:nowrap}
.lb-cash span{font-size:11.5px;letter-spacing:.06em;color:var(--txt-2);font-weight:400;margin-right:4px}

/* eigener Stand */
.lb-side{grid-column:3;grid-row:1;display:grid;gap:var(--gap-y);grid-template-rows:1fr 1fr}
.lb-stat{display:flex;flex-direction:column;padding:18px 20px 22px}
.lb-stat-head{display:flex;justify-content:space-between;gap:12px;font-size:16px;color:#fff}
.lb-stat-head em{font-style:normal;font-size:11.5px;letter-spacing:.1em;color:var(--txt-3)}
.lb-stat-two{display:grid;grid-template-columns:1fr 1fr;margin-top:auto}
.lb-stat-two p{margin:0;display:flex;flex-direction:column;gap:6px}
.lb-stat-two p + p{padding-left:16px;border-left:1px solid var(--line)}
.lb-stat b{font-size:30px;font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1}
.lb-stat-two span{font-size:13px;color:var(--txt-2)}
.lb-stat-big{margin:auto 0 0}
.lb-stat-big span{font-size:16px;color:var(--txt-2)}

/* Tabelle */
.lb-table{grid-column:2/4;grid-row:2;display:flex;flex-direction:column;padding:18px 20px 14px}
.lb-table-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.lb-table-head h2{margin:0;font-size:17px;font-weight:500;color:#fff}
.lb-cols,.lb-rows li{display:grid;grid-template-columns:74px minmax(0,1fr) 190px 150px;
  align-items:center;column-gap:12px}
.lb-cols{padding:8px 14px 12px;border-bottom:1px solid var(--line);
  font-size:12.5px;letter-spacing:.06em;color:var(--txt-2)}
.lb-cols span:nth-child(n+3),.lb-rows .vol,.lb-rows .cash{text-align:right}
.lb-rows{max-height:560px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.lb-rows li{padding:11px 14px;border-bottom:1px solid var(--line-2);
  font-size:16px;color:var(--txt-2);transition:background .2s var(--ease)}
.lb-rows li:hover,.lb-rows li.is-hover{background:rgba(255,255,255,.03)}
.lb-rows .pos{font-size:16px;color:var(--txt-3)}
.lb-rows .pos b{display:grid;place-items:center;width:24px;height:30px;border-radius:4px;
  font-size:15px;font-weight:600;color:#fff;background:rgba(255,255,255,.14)}
.lb-rows .p1 .pos b{background:var(--acc);color:#0b0f05}
.lb-rows .who{display:flex;align-items:center;gap:16px;min-width:0;letter-spacing:.04em}
.lb-rows .who em{font-style:normal;margin-left:2px;padding:3px 9px;border-radius:99px;
  font-size:11px;font-weight:600;letter-spacing:.06em;background:var(--acc);color:#0b0f05}
.lb-hex.sm{width:40px;height:44px;background:rgba(255,255,255,.12)}
.lb-hex.sm::after{inset:1.5px}
.lb-rows li:not(.top) .lb-hex img{filter:grayscale(1) brightness(.8);opacity:.55}
.lb-rows .top .lb-hex.sm{color:#0b0f05;
  background:linear-gradient(160deg,#e6ff7a,var(--acc) 45%,var(--acc-dim))}
.lb-rows .top{color:#fff;font-weight:500}
.lb-rows .top .vol,.lb-rows .top .cash{font-weight:600}
.lb-rows li.me{background:rgba(196,243,43,.07);color:#fff}
.lb-note{margin:12px 0 0;font-size:12.5px;color:var(--txt-3)}

@media (max-width:1100px){
  .lb{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lb-podium{grid-column:1/-1;grid-row:1}
  .lb-season{grid-column:1;grid-row:2}
  .lb-side{grid-column:2;grid-row:2}
  .lb-table{grid-column:1/-1;grid-row:3}
  .lb-art{height:240px}
}
@media (max-width:720px){
  .lb{grid-template-columns:1fr;gap:12px;padding:14px 14px 36px}
  .lb-podium,.lb-season,.lb-side,.lb-table{grid-column:1;grid-row:auto}
  .lb-podium{gap:8px;padding:0 8px 22px;min-height:0}
  .lb-place{padding:26px 6px 48px}
  .lb-vol,.lb-place.p1 .lb-vol{font-size:15px}
  .lb-cash{font-size:12px;padding:6px 8px}
  .lb-cash span{display:none}
  .lb-cols,.lb-rows li{grid-template-columns:40px minmax(0,1fr) 110px;font-size:14px}
  .lb-cols span:nth-child(4),.lb-rows .cash{display:none}
  .lb-hex.sm{display:none}
}

/* ---------- Rewards-Seite ----------
   Aufbau nach Daniels Vorlage: Filter und Suche, darunter vier Karten je
   Reihe mit Logo, Schlagzeile, Haken-Liste und Link am unteren Rand. */
.rw{position:relative;z-index:1;padding:var(--pad-top) var(--pad-x) 56px}
.rw-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.rw-filter{display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--txt)}
.rw-filter select,.rw-search{
  height:46px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);color:var(--txt-2);font:inherit;font-size:15px}
.rw-filter select{min-width:176px;padding:0 40px 0 16px;appearance:none;cursor:pointer;outline:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%239aa39c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.rw-filter select option{background:#0e100a;color:var(--txt)}
.rw-filter select:focus-visible,.rw-search:focus-within{border-color:rgba(196,243,43,.5)}
.rw-search{display:flex;align-items:center;gap:12px;width:340px;max-width:100%;padding:0 16px}
.rw-search svg{width:19px;height:19px;flex:0 0 auto;color:var(--txt-2)}
.rw-search input{flex:1;min-width:0;border:0;background:none;outline:0;color:#fff;font:inherit;font-size:15px}
.rw-search input::placeholder{color:var(--txt-2)}

.rw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.rw-card{display:flex;flex-direction:column;padding:18px 18px 22px;min-height:470px;border-radius:14px}
.rw-head{display:flex;align-items:center;gap:16px;padding-bottom:18px;margin-bottom:22px;
  border-bottom:1px solid var(--line)}
.rw-logo{flex:0 0 auto;width:52px;height:52px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--acc);padding:8px}
.rw-logo img,.rw-logo svg{width:100%;height:100%;object-fit:contain}
.rw-head h2{margin:0 0 5px;font-size:19px;font-weight:600;color:#fff;letter-spacing:-.01em}
.rw-tag{display:inline-block;padding:3px 7px;border-radius:3px;
  background:rgba(196,243,43,.13);color:var(--acc);font-size:13.5px;font-weight:500}
.rw-card h3{margin:0 0 10px;font-size:17px;font-weight:600;color:#fff;line-height:1.3}
.rw-desc{margin:0 0 26px;font-size:15.5px;line-height:1.5;color:var(--txt-2)}
.rw-points{display:grid;gap:11px;margin-bottom:28px}
.rw-points li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;color:#dfe4dc}
.rw-points svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:var(--acc)}
.rw-cta{display:inline-flex;align-items:center;gap:9px;margin-top:auto;align-self:flex-start;
  font-size:16px;color:var(--txt);transition:color .2s var(--ease),gap .3s var(--ease)}
.rw-cta svg{width:17px;height:17px}
.rw-cta:hover{color:var(--acc);gap:14px}
.rw-cta.off{opacity:.45;pointer-events:none}
.rw-empty{margin:40px 0;text-align:center;color:var(--txt-3)}

/* ---------- Live-Fenster im Dashboard ----------
   Steht rechts oben, solange ein Stream laeuft; die Rangliste rueckt dann
   eine Reihe nach unten, Kurse und P&L strecken sich ueber zwei Reihen. */
.live{display:flex;flex-direction:column;padding:14px 14px 16px}
.live[hidden]{display:none}
.grid.has-live .live{grid-column:3;grid-row:1;height:var(--row-h)}
.grid.has-live .board{grid-row:2}
/* Im Rahmen der Startseite fehlt das Live-Fenster: dort steht die Rangliste
   oben und die Performance fuellt die untere Reihe bis zum Rand. */
.grid:not(.has-live) .pnl{grid-column:2/4}
.live-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:2px 2px 12px}
.live-who{display:flex;align-items:center;gap:7px;min-width:0;font-size:15.5px;color:#fff;white-space:nowrap}
.live-who b{font-weight:500}
.live-pill{display:inline-flex;align-items:center;gap:6px;margin-left:3px;padding:3px 9px;border-radius:99px;font-style:normal;
  font-size:11px;font-weight:700;letter-spacing:.08em;color:#fff;background:rgba(255,72,72,.2);border:1px solid rgba(255,90,90,.55)}
.live-pill i{width:6px;height:6px;border-radius:50%;background:#ff5a5a;animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.live.is-off .live-pill{color:var(--txt-2);background:rgba(255,255,255,.06);border-color:var(--line)}
.live.is-off .live-pill i{background:var(--txt-3);animation:none}
.live-link[hidden]{display:none}
.live-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:20px;text-align:center;background:radial-gradient(70% 60% at 50% 38%,rgba(255,255,255,.05),transparent 70%),#050604}
.live-off > i{display:grid;place-items:center;width:58px;height:58px;margin-bottom:6px;border-radius:50%;
  color:var(--txt-2);background:rgba(255,255,255,.05);border:1px solid var(--line)}
.live-off > i svg{width:27px;height:27px}
.live-off b{font-size:17px;font-weight:500;color:#fff}
.live-off p{margin:0;max-width:240px;font-size:14px;line-height:1.45;color:var(--txt-2)}
.live-chan{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.live-chan a{padding:8px 14px;border-radius:99px;font-size:13.5px;font-weight:500;color:var(--acc);
  border:1px solid rgba(196,243,43,.4);background:rgba(196,243,43,.07);transition:background .2s var(--ease)}
.live-chan a:hover{background:rgba(196,243,43,.16)}
.live-link{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-size:13.5px;color:var(--txt-2);transition:color .2s var(--ease)}
.live-link:hover{color:var(--acc)}
.live-link svg{width:15px;height:15px;color:var(--acc)}
.live-stage{position:relative;flex:1;min-height:210px;border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--line)}
.live-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.live-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:#fff;font-size:15px;font-weight:500;
  background:radial-gradient(70% 60% at 50% 40%,rgba(196,243,43,.16),transparent 70%),#050604}
.live-poster i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--acc);color:#0b0f05;
  box-shadow:0 0 40px rgba(196,243,43,.45);transition:transform .25s var(--ease)}
.live-poster.has-cover{background-size:cover;background-position:center}
.live-poster:hover i{transform:scale(1.07)}
.live-poster svg{width:26px;height:26px;margin-left:3px}
.live-title{margin:12px 2px 0;font-size:14.5px;line-height:1.4;color:var(--txt-2)}
.live-title[hidden],.live-more[hidden]{display:none}
.live-more{display:flex;gap:16px;margin:8px 2px 0;font-size:13.5px}
.live-more a{color:var(--acc)}
.live-more a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){ .live-pill i{animation:none} }
/* Zwei Spalten: Rang ueber die ganze Breite, darunter je zwei Karten */
@media (max-width:1150px){
  .grid:not(.has-live) .pnl{grid-column:1/-1}
  .grid.has-live .live{grid-column:1;grid-row:2}
  .grid.has-live .community{grid-column:2;grid-row:2}
  .grid.has-live .board{grid-column:1;grid-row:3}
  .grid.has-live .courses{grid-column:2;grid-row:3}
  .grid.has-live .pnl{grid-column:1/-1;grid-row:4}
}
/* Eine Spalte: Karten so hoch wie ihr Inhalt */
@media (max-width:820px){
  .grid.has-live .live{grid-row:2 !important;height:auto}
  .grid.has-live .community{grid-row:3 !important}
  .grid.has-live .board{grid-row:4 !important}
  .grid.has-live .courses{grid-row:5 !important}
  .grid.has-live .pnl{grid-row:6 !important}
  .live-stage{aspect-ratio:16/9;flex:none;min-height:0}
  .board,.courses,.pnl{height:auto}
  .course-cover{aspect-ratio:4/3;flex:none}
  .board-list{max-height:296px}
  .course-art{height:250px}
  .course{flex:0 0 68%;height:auto;aspect-ratio:auto}
}

/* ---------- Ranks-Seite ----------
   Die Rangleiter: oben der eigene Stand, darunter je Stufe eine Zeile mit
   Figur, Volumenspanne und dem, was sie freischaltet. */
.rk{max-width:1280px;margin:0 auto}
.rk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:32px;align-items:end;margin-bottom:26px}
.rk-kicker{margin:0 0 10px;font-size:12.5px;font-weight:600;letter-spacing:.18em;color:var(--acc)}
.rk-head h1{margin:0 0 10px;font-size:34px;font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.12}
.rk-lead{margin:0;max-width:520px;font-size:16px;line-height:1.5;color:var(--txt-2)}
.rk-me{padding:18px 20px;border-radius:14px}
.rk-me-top{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px}
.rk-me-top span{display:flex;flex-direction:column;gap:3px}
.rk-me-top .r{text-align:right}
.rk-me-top em{font-style:normal;font-size:12.5px;color:var(--txt-3)}
.rk-me-top b{font-size:20px;font-weight:600;color:#fff}
.rk-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.rk-bar i{display:block;height:100%;border-radius:99px;background:var(--acc);box-shadow:0 0 14px rgba(196,243,43,.6);transition:width .6s var(--ease)}
.rk-me-foot{display:flex;justify-content:space-between;gap:12px;margin-top:9px;font-size:12.5px;color:var(--txt-3)}
.rk-me-foot #rkGap{color:var(--txt-2)}
.rk-me-foot em{font-style:normal;color:var(--acc)}

.rk-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.rk-row{position:relative;display:grid;grid-template-columns:34px 104px minmax(0,250px) minmax(0,1fr);gap:22px;align-items:center;
  padding:16px 26px 16px 20px;border-radius:14px;transition:border-color .3s var(--ease)}
.rk-n{font-size:15px;font-weight:600;color:var(--txt-3);text-align:center}
.rk-thumb{display:grid;place-items:center;width:104px;height:104px;border-radius:12px;overflow:hidden;
  background:#050604;border:1px solid var(--line)}
/* Bild der Vorlage: der Ring mit der Figur sitzt bei 50,5 % / 39 % und ist
   knapp halb so hoch wie das Bild - darauf vergroessern und einmitten */
.rk-thumb img{width:100%;height:100%;object-fit:cover;transform-origin:51% 39%;
  transform:translateY(11%) scale(2.05);filter:var(--tint)}
.rk-thumb.lock{color:var(--acc)}
.rk-thumb.lock svg{width:38px;height:38px}
.rk-id h2{margin:0 0 4px;font-size:22px;font-weight:600;letter-spacing:-.01em;color:#fff}
.rk-range{margin:0 0 10px;font-size:14.5px;color:var(--txt-2);font-variant-numeric:tabular-nums}
.rk-state{display:inline-block;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.1em;
  background:rgba(255,255,255,.06);color:var(--txt-3)}
.rk-plus{margin:0 0 9px;font-size:13px;color:var(--txt-3)}
.rk-perks ul{display:flex;flex-wrap:wrap;gap:9px 26px;margin:0;padding:0;list-style:none}
.rk-perks li{display:flex;align-items:flex-start;gap:9px;font-size:15.5px;color:#dfe4dc}
.rk-perks svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:var(--acc)}
.rk-row[data-state="done"] .rk-state{background:rgba(196,243,43,.13);color:var(--acc)}
.rk-row[data-state="now"]{border-color:rgba(196,243,43,.55);box-shadow:0 0 0 1px rgba(196,243,43,.18),0 0 44px -12px rgba(196,243,43,.45)}
.rk-row[data-state="now"] .rk-state{background:var(--acc);color:#0b0c09}
.rk-row[data-state="now"] .rk-n{color:var(--acc)}
.rk-row[data-state="locked"] .rk-thumb img{filter:var(--tint) saturate(.15) brightness(.6)}
.rk-row[data-state="locked"] .rk-id h2,.rk-row[data-state="locked"] .rk-perks li{color:var(--txt-2)}
.rk-row[data-state="locked"] .rk-perks svg{color:var(--txt-3)}
a.rank-info{text-decoration:none}
@media (max-width:900px){
  .rk-head{grid-template-columns:1fr;gap:20px}
  .rk-head h1{font-size:27px}
  .rk-row{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px}
  .rk-n{display:none}
  .rk-thumb{width:64px;height:64px}
  .rk-perks{grid-column:1 / -1}
}

/* ---------- Indicators-Seite ----------
   Aufbau nach Daniels Vorlage: Umschalter und Suche, darunter hohe
   Bildkarten mit Zugangs-Etikett oben links und Text am unteren Rand. */
.ind .rw-bar{align-items:center}
.ind-seg{display:inline-flex;gap:2px;padding:4px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.02)}
.ind-seg button{padding:9px 18px;border-radius:9px;font-size:16px;color:var(--txt-2);
  transition:.2s var(--ease)}
.ind-seg button:hover{color:#fff}
.ind-seg button.on{background:rgba(255,255,255,.08);color:#fff;font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ind-card{position:relative;height:540px;border-radius:12px;overflow:hidden;
  background:#0b0c09;border:1px solid var(--line-2)}
.ind-card img,.ind-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.ind-card:hover img{transform:scale(1.04)}
/* Ohne Bild: Lichtschein und Raster in unserer Farbe statt einer leeren Flaeche. */
.ind-art{
  background:
    radial-gradient(70% 46% at 50% 24%,rgba(196,243,43,.20),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 44px),
    linear-gradient(165deg,#12160a,#070805 70%)}
.ind-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 26%,transparent 46%,rgba(4,5,3,.86) 78%,#050604 100%)}
.ind-badge{position:absolute;left:18px;top:18px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:5px;background:rgba(0,0,0,.82);
  color:#fff;font-size:14px;font-weight:500;letter-spacing:.02em}
.ind-badge svg{width:14px;height:14px}
.ind-badge.open{background:var(--acc);color:#0b0f05;font-weight:600}
.ind-body{position:absolute;left:22px;right:22px;bottom:24px;z-index:2}
.ind-body h2{margin:0 0 12px;font-size:26px;font-weight:600;color:#fff;letter-spacing:-.015em;line-height:1.15}
.ind-body p{margin:0;font-size:16px;line-height:1.5;color:#d9ded5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ind-left{margin-top:20px !important;font-size:12.5px !important;letter-spacing:.08em;color:var(--txt-2) !important}
.ind-left b{margin-right:8px;font-size:19px;font-weight:600;color:#fff;letter-spacing:0}
.ind-bar{height:5px;margin-top:10px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.ind-bar i{display:block;height:100%;border-radius:99px;background:var(--acc)}
.ind-card.soon .ind-body h2,.ind-card.soon .ind-body p{color:var(--txt-2)}
@media (max-width:1280px){ .ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:720px){ .ind-grid{grid-template-columns:1fr;gap:12px} .ind-card{height:420px} }

/* ---------- Student Area ----------
   Aufbau wie ein Streamingdienst: randlose Buehne, darunter Reihen zum
   Durchschieben, die in die Buehne hineinragen; ein Fenster mit Player
   und Lektionsliste. Farben sind unsere - wo der Dienst Rot nimmt, steht
   hier das Lime. */
.nf{position:relative;z-index:1}
.nf-bar{display:block;height:4px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.nf-bar i{display:block;height:100%;border-radius:99px;background:var(--acc);
  box-shadow:0 0 10px rgba(196,243,43,.7);transition:width .6s var(--ease)}
.nf svg{display:block}

/* Buehne */
.nf-hero{position:relative;height:min(82vh,820px);min-height:540px;overflow:hidden}
.nf-hero-art,.nf-hero-art svg{position:absolute;inset:0;width:100%;height:100%}
.nf-hero-art{animation:nfDrift 28s ease-in-out infinite alternate}
@keyframes nfDrift{from{transform:scale(1.02)}to{transform:scale(1.09) translate(-1.2%,-1%)}}
.nf-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(77deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 30%,transparent 62%),
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 18%,transparent 56%,rgba(0,0,0,.8) 84%,#000 100%)}
.nf-hero-body{position:absolute;z-index:2;left:var(--pad-x);bottom:clamp(150px,23vh,230px);width:min(680px,calc(100% - 2*var(--pad-x)))}
.nf-kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.3em;color:#fff}
.nf-kicker img{width:auto;height:20px}
.nf-kicker em{font-style:normal;font-weight:400;letter-spacing:.2em;color:var(--txt-2)}
.nf-hero h1{margin:0 0 20px;font-family:"Outfit",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(46px,6vw,108px);line-height:.86;letter-spacing:-.035em;color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.6);animation:nfTitle 1s var(--ease) both}
.nf-hero h1 span{display:block}
/* Umriss braucht Luft zwischen den Buchstaben, sonst schneiden sich die Linien. */
.nf-hero h1 span:last-child{color:transparent;-webkit-text-stroke:2px #fff;text-shadow:none;letter-spacing:.012em}
.nf-hero h1 span:only-child{color:#fff;-webkit-text-stroke:0}
@keyframes nfTitle{from{opacity:0;transform:translateY(18px) scale(1.04)}}
.nf-hero-body > :not(h1){animation:nfFade .9s .25s var(--ease) both}
/* Platz im Lernpfad, gebaut wie das "Top 10"-Schild. */
.nf-top{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:clamp(17px,1.4vw,22px);font-weight:600;color:#fff}
.nf-top b{display:grid;place-items:center;width:32px;height:38px;border-radius:3px;background:var(--acc);color:#0b0f05;
  font-size:9.5px;font-weight:800;line-height:1.05;letter-spacing:.02em;text-align:center}
.nf-rating{position:absolute;z-index:2;right:0;bottom:clamp(190px,30vh,290px);margin:0;padding:9px 56px 9px 14px;
  border-left:3px solid #dcdcdc;background:rgba(40,43,32,.62);font-size:16px;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.nf-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px;font-size:16px;color:#e9ecdf}
.nf-facts .lv{color:var(--acc);font-weight:600}
.nf-facts span + span::before{content:"";display:inline-block;width:4px;height:4px;margin-right:14px;
  border-radius:50%;background:rgba(255,255,255,.4);vertical-align:middle}
.nf-desc{margin:0 0 24px;font-size:clamp(15px,1.15vw,19px);line-height:1.45;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px}
.nf-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;height:50px;padding:0 28px 0 22px;
  border-radius:6px;font-size:18px;font-weight:600;transition:background .18s var(--ease),transform .18s var(--ease)}
.nf-btn svg{width:24px;height:24px}
.nf-btn:active{transform:scale(.97)}
.nf-btn.go{background:#fff;color:#0b0f05}
.nf-btn.go:hover{background:var(--acc)}
.nf-btn.info{background:rgba(120,124,112,.55);color:#fff;backdrop-filter:blur(6px)}
.nf-btn.info:hover{background:rgba(120,124,112,.36)}
.nf-btn.isdone{background:rgba(196,243,43,.14);color:var(--acc);box-shadow:inset 0 0 0 1px rgba(196,243,43,.5)}
.nf-hero-prog{display:flex;align-items:center;gap:14px;margin-top:22px}
.nf-hero-prog .nf-bar{flex:0 0 220px}
.nf-hero-prog em{font-style:normal;font-size:14.5px;color:#dfe4dc}

/* Reihen */
.nf-rows{position:relative;z-index:3;margin-top:clamp(-150px,-17vh,-96px);padding-bottom:70px}
.nf-row header{display:flex;align-items:center;gap:16px;padding:0 var(--pad-x);margin-bottom:4px}
.nf-row h2{margin:0;font-size:clamp(18px,1.5vw,24px);font-weight:600;color:#fff;letter-spacing:-.01em}
.nf-level{padding:3px 9px;border-radius:4px;background:rgba(196,243,43,.13);color:var(--acc);
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nf-rowprog{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:13.5px;color:var(--txt-2)}
.nf-rowprog .nf-bar{width:120px;height:3px}
.nf-wrap{position:relative}
/* Oben und unten Luft, sonst schneidet die Rollflaeche die vergroesserte Karte ab. */
.nf-row{position:relative;margin-bottom:-78px}
.nf-row:hover{z-index:4}
.nf-track{display:flex;gap:10px;overflow-x:auto;padding:16px var(--pad-x) 124px;scroll-padding:0 var(--pad-x);
  scroll-snap-type:x proximity;scrollbar-width:none}
.nf-track::-webkit-scrollbar{display:none}
.nf-card{flex:0 0 clamp(236px,calc((100vw - 2*var(--pad-x) - 40px)/5),380px);scroll-snap-align:start;
  display:block;text-align:left;border-radius:8px;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.nf-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0b0c09}
.nf-thumb svg{position:absolute;inset:0;width:100%;height:100%}
.nf-thumb::after{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .3s var(--ease)}
.nf-num{position:absolute;left:14px;bottom:8px;z-index:1;font-size:54px;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.75);text-shadow:0 4px 18px rgba(0,0,0,.6)}
.nf-playic{position:absolute;left:50%;top:50%;z-index:2;width:56px;height:56px;margin:-28px 0 0 -28px;
  display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  box-shadow:inset 0 0 0 2px #fff;opacity:0;transform:scale(.8);transition:.3s var(--ease)}
.nf-playic svg{width:24px;height:24px;margin-left:3px}
.nf-check{position:absolute;right:10px;top:10px;z-index:2;width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;background:var(--acc);color:#0b0f05}
.nf-check svg{width:16px;height:16px}
.nf-thumb .nf-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;height:4px;border-radius:0;background:rgba(255,255,255,.3)}
.nf-thumb .nf-bar i{border-radius:0}
.nf-meta{display:block;padding:11px 4px 10px;transition:padding .3s var(--ease)}
.nf-meta b{display:block;font-size:16.5px;font-weight:600;color:#fff}
.nf-meta em{display:block;margin-top:3px;font-style:normal;font-size:13.5px;color:var(--txt-2)}
/* "Coming soon": das Etikett sitzt wie beim Vorbild mittig auf der Unterkante. */
.nf-soon{display:inline-block;padding:4px 10px 3px;border-radius:3px 3px 0 0;background:var(--acc);color:#0b0f05;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;line-height:1.2}
.nf-thumb .nf-soon,.nf-sheet-art .nf-soon{position:absolute;left:50%;bottom:0;z-index:2;transform:translateX(-50%)}
.nf-card.soon .nf-thumb .nf-bar{display:none}
/* Drueberfahren: Karte waechst, wird zur Tafel und klappt das Feld darunter auf. */
.nf-card{position:relative}
.nf-more{position:absolute;left:0;right:0;top:100%;display:block;padding:2px 14px 16px;border-radius:0 0 8px 8px;
  background:#181b10;opacity:0;visibility:hidden;transition:opacity .25s var(--ease)}
.nf-rounds{display:flex;gap:8px;margin-bottom:12px}
.nf-rounds i{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);color:#fff;background:rgba(42,45,34,.6)}
.nf-rounds i.main{background:#fff;color:#0b0f05;box-shadow:none}
.nf-rounds i.end{margin-left:auto}
.nf-rounds svg{width:18px;height:18px}
.nf-rounds i.main svg{width:20px;height:20px}
.nf-line{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px}
.nf-line b{font-weight:700;color:var(--acc)}
.nf-line u{padding:1px 6px;border:1px solid rgba(255,255,255,.4);text-decoration:none;font-size:12px;color:#fff}
.nf-genres{display:flex;flex-wrap:wrap;gap:4px 0;font-size:13.5px;color:#fff}
.nf-genres span + span::before{content:"•";margin:0 8px;color:#646b5a}
.nf-card:hover,.nf-card:focus-visible,.nf-card.is-hover{transform:scale(1.1) translateY(-10px);z-index:5;outline:0;
  background:#181b10;box-shadow:0 26px 60px rgba(0,0,0,.9)}
.nf-card:hover .nf-thumb,.nf-card:focus-visible .nf-thumb,.nf-card.is-hover .nf-thumb{border-radius:8px 8px 0 0}
.nf-card:hover .nf-thumb::after,.nf-card:focus-visible .nf-thumb::after,.nf-card.is-hover .nf-thumb::after{border-radius:8px 8px 0 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.nf-card:hover .nf-meta,.nf-card:focus-visible .nf-meta,.nf-card.is-hover .nf-meta{padding-left:14px;padding-right:14px}
.nf-card:hover .nf-more,.nf-card:focus-visible .nf-more,.nf-card.is-hover .nf-more{opacity:1;visibility:visible;box-shadow:0 30px 40px rgba(0,0,0,.8)}
.nf-card.done .nf-num{-webkit-text-stroke-color:var(--acc)}

/* Plakate mit Platzziffer */
.nf-poster{flex:0 0 auto;display:flex;align-items:flex-end;scroll-snap-align:start;text-align:left;
  transition:transform .32s var(--ease)}
.nf-rank{font-size:clamp(150px,15vw,250px);font-weight:800;line-height:.74;letter-spacing:-.07em;
  margin-right:-.12em;color:#000;-webkit-text-stroke:3px #8d937f;transition:-webkit-text-stroke-color .3s var(--ease)}
.nf-sheet-art{position:relative;z-index:1;display:block;width:clamp(150px,12.4vw,220px);aspect-ratio:2/3;
  border-radius:6px;overflow:hidden;background:#0b0c09;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.nf-sheet-art svg{position:absolute;inset:0;width:100%;height:100%}
.nf-sheet-art::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.8) 78%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.nf-ptitle{position:absolute;z-index:1;left:12px;right:12px;bottom:58px;font-size:clamp(17px,1.5vw,25px);font-weight:800;
  line-height:.98;letter-spacing:-.02em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.nf-ptitle i{display:block;font-style:normal}
.nf-plevel{position:absolute;z-index:1;left:12px;right:12px;bottom:34px;font-size:11.5px;letter-spacing:.04em;color:#dfe4dc}
.nf-sheet-art .nf-bar{position:absolute;left:0;right:0;top:0;z-index:2;height:3px;border-radius:0;background:transparent}
.nf-poster:hover,.nf-poster:focus-visible{transform:scale(1.06);z-index:5;outline:0}
.nf-poster:hover .nf-rank,.nf-poster:focus-visible .nf-rank{-webkit-text-stroke-color:var(--acc)}
.nf-poster + .nf-poster{margin-left:14px}

.nf-arrow{position:absolute;top:16px;bottom:186px;z-index:6;width:var(--pad-x);min-width:44px;display:grid;place-items:center;
  color:#fff;opacity:0;transition:opacity .25s var(--ease)}
.nf-arrow svg{width:34px;height:34px;transition:transform .2s var(--ease)}
.nf-arrow:hover svg{transform:scale(1.3)}
.nf-arrow.prev{left:0;background:linear-gradient(90deg,rgba(0,0,0,.85),transparent)}
.nf-arrow.prev svg{rotate:180deg}
.nf-arrow.next{right:0;background:linear-gradient(270deg,rgba(0,0,0,.85),transparent)}
.nf-wrap:hover .nf-arrow{opacity:1}
.nf-wrap.at-start .prev,.nf-wrap.at-end .next{opacity:0;pointer-events:none}

/* Fenster */
body.nf-lock{overflow:hidden}
.nf-modal{position:fixed;inset:0;z-index:60;overflow-y:auto;padding:40px 16px 60px;
  background:rgba(0,0,0,.78);backdrop-filter:blur(6px);animation:nfFade .25s var(--ease)}
.nf-modal[hidden]{display:none}
@keyframes nfFade{from{opacity:0}}
@keyframes nfRise{from{opacity:0;transform:translateY(26px) scale(.97)}}
.nf-sheet{position:relative;width:min(940px,100%);margin:0 auto;border-radius:12px;overflow:hidden;
  background:#101208;box-shadow:0 30px 90px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);
  animation:nfRise .34s var(--ease)}
.nf-close{position:absolute;right:16px;top:16px;z-index:5;width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;background:rgba(10,12,6,.85);color:#fff;transition:.2s var(--ease)}
.nf-close:hover{background:#fff;color:#0b0f05}
.nf-close svg{width:20px;height:20px}
.nf-stage{position:relative;aspect-ratio:16/9;background:#000}
.nf-stage video,.nf-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nf-still,.nf-still svg{position:absolute;inset:0;width:100%;height:100%}
.nf-still::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(16,18,8,.7) 78%,#101208 100%)}
.nf-still p{position:absolute;z-index:1;left:36px;right:36px;bottom:26px;margin:0;font-size:15.5px;color:#dfe4dc}
.nf-still p b{display:block;margin:12px 0 6px;font-size:clamp(30px,4.4vw,54px);font-weight:800;line-height:.95;
  letter-spacing:-.03em;text-transform:uppercase;color:#fff}
.nf-still .nf-soon{border-radius:3px;font-size:12.5px}
.nf-info{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;padding:26px 36px 8px}
.nf-info .nf-btn{margin-top:20px}
.nf-side{margin:6px 0 0;display:grid;gap:10px;align-content:start;font-size:14.5px;line-height:1.4}
.nf-side dt{display:inline;color:#7f8672}
.nf-side dd{display:inline;margin:0 0 0 4px;color:#fff}
.nf-info h2{margin:0 0 8px;font-size:32px;font-weight:700;color:#fff;letter-spacing:-.02em}
.nf-info .nf-facts{font-size:14.5px;margin-bottom:10px}
.nf-info .nf-desc{margin:0;font-size:16px;color:#dfe4dc;text-shadow:none}
.nf-info .nf-btn{flex:0 0 auto;height:44px;padding:0 20px 0 16px;font-size:15.5px}
.nf-info .nf-btn svg{width:20px;height:20px}
.nf-sheet h3{margin:26px 36px 10px;font-size:22px;font-weight:600;color:#fff}
.nf-sheet h3 em{margin-left:10px;font-style:normal;font-size:15px;font-weight:400;color:var(--txt-2)}
.nf-eps{padding:0 36px 34px}
.nf-eps button{display:flex;align-items:center;gap:20px;width:100%;padding:16px 18px;text-align:left;
  border-top:1px solid rgba(255,255,255,.1);border-radius:6px;transition:background .2s var(--ease)}
.nf-eps button:hover{background:rgba(255,255,255,.05)}
.nf-eps li.on button{background:rgba(255,255,255,.08)}
.nf-eps button > b{flex:0 0 26px;text-align:center;font-size:24px;font-weight:400;color:var(--txt-2)}
.nf-eps .nf-thumb{flex:0 0 150px;border-radius:5px}
.nf-eps .t{flex:1;min-width:0}
.nf-eps strong{display:block;font-size:17px;font-weight:600;color:#fff}
.nf-eps em{display:block;margin-top:4px;font-style:normal;font-size:14px;color:var(--txt-2)}
.nf-eps .nf-check{position:static;flex:0 0 auto}

@media (max-width:720px){
  .nf-hero{height:76vh;min-height:500px}
  .nf-hero-body{left:16px;width:calc(100% - 32px);bottom:120px}
  .nf-desc{display:none}
  .nf-btn{height:44px;padding:0 18px 0 14px;font-size:16px}
  .nf-hero-prog .nf-bar{flex-basis:120px}
  .nf-rows{margin-top:-80px}
  .nf-row header{padding:0 16px}
  .nf-rowprog{display:none}
  .nf-row{margin-bottom:6px}
  .nf-track{padding:12px 16px 22px;scroll-padding:0 16px}
  .nf-more,.nf-rating{display:none}
  .nf-info{grid-template-columns:1fr;gap:18px}
  .nf-card{flex-basis:62vw}
  .nf-arrow{display:none}
  .nf-modal{padding:0}
  .nf-sheet{border-radius:0;min-height:100%}
  .nf-info{padding:20px 18px 4px}
  .nf-sheet h3{margin:22px 18px 8px}
  .nf-eps{padding:0 10px 30px}
  .nf-eps .nf-thumb{flex-basis:110px}
  .nf-eps button{gap:12px;padding:12px 8px}
}
@media (prefers-reduced-motion:reduce){ .nf-hero-art,.nf-modal,.nf-sheet{animation:none} }

/* Handy: Kopfleiste in zwei sauberen Zeilen - Logo links, Sprache und Konto
   rechts, darunter die Reiter. Die Rangplakette entfaellt hier; der Rang
   steht gleich darunter gross in der Karte. */
@media (max-width:820px){
  header.nav{row-gap:8px;column-gap:10px;align-items:center}
  header.nav .rankchip{display:none}
  header.nav .lang-sw{margin-left:auto}
  header.nav .user{margin-left:0}
  header.nav .tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  header.nav .tabs::-webkit-scrollbar{display:none}
}