/* NYZA Network – Design-System (nach Referenzvorlage) */
@font-face { font-family: 'League Spartan'; src: url('/assets/fonts/LeagueSpartan-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'League Spartan'; src: url('/assets/fonts/LeagueSpartan-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }

:root {
  --bg: #0b0b0f; --card: #17161d; --card-raised: #1d1c24; --inset: #121118;
  --violet: #a587f9; --violet-strong: #8b5cf6; --violet-deep: #6524d6; --violet-bg: #341268;
  --gold: #f6b73c; --gold-deep: #d98c0f; --on-gold: #231803;
  --green: #22c55e; --red: #ff4d5e;
  --text: #fff; --text-2: #a9a7b3; --text-3: #8e8c99;
  --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.16);
  --display: 'League Spartan', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px;
  /* Der Footer gehoert ans Seitenende, auch wenn der Inhalt kurz ist. Ohne das
     hing er auf duennen Seiten mitten im Bild. */
  min-height: 100vh; display: flex; flex-direction: column; }
/* Nur dieser Bereich waechst. Die Seiten darin bleiben gewoehnliche Bloecke –
   als Flex-Elemente wuerde "margin: 0 auto" sie auf Inhaltsbreite schrumpfen
   statt sie zu zentrieren. */
.page { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }
a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--gold); }
img { max-width: 100%; display: block; }

@keyframes nyzaTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nyzaPan { from { background-position: 0 0; } to { background-position: 128px 128px; } }

/* ---------- Ticker ---------- */
.ticker { background: var(--gold); color: var(--on-gold); padding: 9px 0; overflow: hidden; white-space: nowrap; border-bottom: 3px solid var(--bg); }
.ticker-track { display: flex; gap: 34px; width: max-content; animation: nyzaTicker 28s linear infinite;
  font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(11,11,15,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
/*
 * Der Kopf passte bei keiner Breite: .inner ist auf 1240 gedeckelt, Logo,
 * Navigation und Knopfleiste brauchten zusammen rund 1343 – der Nutzer-Chip
 * lief also immer rechts heraus, auch im Vollbild. Es war kein Problem des
 * Umbruchpunkts, sondern schlicht zu viel Polsterung: .pill traegt 18 Pixel
 * links und rechts, bei sechs Menuepunkten allein 216.
 */
.site-header .inner { max-width: 1240px; margin: 0 auto; padding: 13px 20px; display: flex; align-items: center; gap: 8px; }
.site-header .logo { font-size: 21px; }
.mainnav .pill { padding: 9px 12px; }
.headactions .pill { padding: 9px 13px; }
.headspace { flex: 1; }
.headactions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Sprachumschalter: zwei kurze Kürzel, das aktive hervorgehoben */
.langswitch { display: flex; align-items: center; background: var(--card);
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.langswitch a { padding: 7px 11px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--text-3); text-decoration: none; transition: background .15s, color .15s; }
.langswitch a:hover { color: #fff; }
.langswitch a.active { background: var(--violet-strong); color: #fff; }

/* Burger – nur auf schmalen Bildschirmen sichtbar */
.burger { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 38px; padding: 0 9px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid rgba(255,255,255,.1); }
.burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
/* Auf großen Bildschirmen gehören diese Punkte nicht ins Hauptmenü */
.mainnav .mobileonly { display: none; }

/* Kontomenü: alles rund ums eigene Profil an einer Stelle */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary::after { content: "▾"; margin-left: 6px; font-size: 10px; color: var(--text-3); }
.usermenu[open] > summary::after { content: "▴"; }
.usermenu-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; z-index: 60;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.usermenu-list a { padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  color: var(--text-2); text-decoration: none; }
.usermenu-list a:hover { background: var(--inset); color: #fff; }
.usermenu-list a.accent { color: var(--gold); }
.usermenu-list a.muted { color: var(--text-3); border-top: 1px solid var(--border);
  margin-top: 4px; padding-top: 11px; border-radius: 0 0 10px 10px; }

/* Die grosse Suche unter dem Banner – hier ist Platz dafuer, oben in der
   Leiste war sie auf schmalen Bildschirmen nur noch ein Stummel */
.wrap.bigsearch { margin: 46px auto 0; max-width: 720px; position: relative; z-index: 5; }
.bigsearch form { display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 6px 6px 20px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.bigsearch input { flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: #fff; font-size: 15px; padding: 12px 0; }
.bigsearch input::placeholder { color: var(--text-3); }
.bigsearch button { border: none; cursor: pointer; }
.bigsearch .hint { text-align: center; color: var(--text-3); font-size: 12px; margin-top: 10px; }
@media (max-width: 620px) {
  .wrap.bigsearch { margin-top: 32px; }
  .bigsearch form { padding-left: 14px; }
  .bigsearch input { font-size: 14px; }
}

/* ---------- Spielmodi ---------- */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.game-card { display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s, border-color .18s; }
.game-card:hover { transform: translateY(-3px); border-color: var(--accent); color: inherit; }
.game-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Platzhalter, solange kein Banner hinterlegt ist */
.game-placeholder { aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, #12111a), #12111a); }
.game-placeholder span { font-family: var(--display); font-weight: 900; font-size: 30px;
  text-transform: uppercase; letter-spacing: -.02em; color: var(--accent); opacity: .85; }
.game-body { padding: 16px 18px 18px; }
.game-body h3 { font-family: var(--display); font-weight: 900; font-size: 20px;
  text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 5px; }
.game-body p { color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.game-meta { display: inline-block; margin-top: 11px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

.game-hero { position: relative; padding: 54px 0 40px; margin-bottom: 26px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, #0f0e15), #0b0b0f); }
.game-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.game-hero-inner { position: relative; }
.game-back { display: inline-block; margin-bottom: 14px; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.game-hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 7vw, 64px);
  text-transform: uppercase; letter-spacing: -.03em; line-height: .95; color: var(--accent); }
.game-hero p { margin-top: 12px; font-size: 17px; color: var(--text-2); max-width: 620px; }
.game-facts { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 20px; }
.game-facts span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); }
.game-facts b { display: block; font-family: var(--display); font-weight: 900; font-size: 26px;
  color: #fff; letter-spacing: -.02em; }

/* Trenner zwischen deutschem und englischem Forenteil */
.forum-langhead { display: flex; align-items: center; gap: 12px; margin: 34px 0 14px; }
.forum-langhead:first-child { margin-top: 0; }
.forum-langhead .muted { font-size: 12px; color: var(--text-3); }

/* Sprach-Tabs im News-Editor */
.langtab-heads { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.langtab-heads label { padding: 9px 16px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; }
.langtab-heads label:hover { color: #fff; }
.langtab-body { display: none; }
#tab-de:checked ~ .langtab-heads label[for="tab-de"],
#tab-en:checked ~ .langtab-heads label[for="tab-en"] { color: #fff; border-bottom-color: var(--violet-strong); }
#tab-de:checked ~ .langtab-body[data-tab="de"],
#tab-en:checked ~ .langtab-body[data-tab="en"] { display: block; }
.navtoggle:checked ~ .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle:checked ~ .burger span:nth-child(2) { opacity: 0; }
.navtoggle:checked ~ .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.logo { font-family: var(--display); font-weight: 900; font-size: 24px; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; }
.logo .a { color: var(--violet); } .logo .b { color: var(--gold); }
/* Die Leiste bleibt einzeilig – enger wird stattdessen die Suche */
.mainnav { display: flex; gap: 5px; flex-wrap: nowrap; }
.mainnav .pill { white-space: nowrap; }
.pill { display: inline-block; border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer;
  font-family: var(--display); font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
  background: transparent; color: var(--text-2); transition: all .18s; }
.pill:hover { color: #fff; background: rgba(255,255,255,.07); }
.pill.active { background: var(--violet-strong); color: #fff; }
.pill.gold { background: var(--gold); color: var(--on-gold); box-shadow: 0 4px 0 var(--gold-deep); }
.pill.gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
.searchbox { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 220px;
  background: var(--card); border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 9px 14px; flex: 1 1 140px; min-width: 0; max-width: 240px; }
.searchbox input { flex: 1; background: none; border: none; outline: none; color: #fff; font-size: 13px; min-width: 0; }
.userchip { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 6px 14px 6px 6px; color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff;
  font-family: var(--display); font-weight: 900; flex: none; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--violet-bg);
  background-image: repeating-conic-gradient(#3d1878 0% 25%, #2c0f57 0% 50%);
  background-size: 64px 64px; animation: nyzaPan 16s linear infinite; border-bottom: 4px solid var(--bg); overflow: hidden; }
/* align-items: center statt stretch – der Zahlenkasten wurde sonst auf die
   Hoehe des Heros gezogen und war fast doppelt so hoch wie sein Inhalt. */
.hero .inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 44px 24px 48px;
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 26px; align-items: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--bg); border: 2px solid var(--gold);
  color: var(--gold); border-radius: 999px; padding: 7px 16px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 6vw, 62px); line-height: .9;
  letter-spacing: -.03em; margin: 18px 0 0; text-transform: uppercase;
  text-shadow: 5px 5px 0 var(--violet-deep), 10px 10px 0 rgba(11,11,15,.45); }
.hero h1 .hl { color: var(--gold); font-style: italic; }
.hero p { max-width: 520px; margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: #dccffd; }
.btn { display: inline-block; border: none; border-radius: 999px; cursor: pointer; text-transform: uppercase;
  font-family: var(--display); font-weight: 900; font-size: 15px; transition: all .18s; }
.btn.gold { background: var(--gold); color: var(--on-gold); padding: 13px 26px; box-shadow: 0 5px 0 var(--gold-deep); }
.btn.gold:hover { filter: brightness(1.06); transform: translateY(-1px); color: var(--on-gold); }
.btn.ghost { background: rgba(255,255,255,.12); color: #fff; border: 2px solid rgba(255,255,255,.28); padding: 11px 24px; }
.btn.ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn.violet { background: var(--violet-strong); color: #fff; padding: 12px 24px; box-shadow: 0 4px 0 var(--violet-deep); }
.btn.violet:hover { filter: brightness(1.1); color: #fff; }
.btn.dark { background: var(--bg); color: #fff; padding: 12px 24px; border: 1px solid var(--border-strong); }
.btn.sm { font-size: 13px; padding: 9px 16px; }

/* ---------- Community-Card ---------- */
/* Der Kasten stand neben dem Hero und war so hoch wie dieser – die Kacheln
   darin wurden mitgestreckt und waren um ein Vielfaches groesser als ihre
   Zahlen. Jetzt richten sie sich nach ihrem Inhalt und sitzen mittig. */
.stats-card { background: var(--bg); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; }
.stats-card .label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.stats-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats-grid2 .stat-tile { padding: 10px 12px; }
.stats-grid2 .stat-tile b { font-size: 21px; line-height: 1.1; }
.stats-grid2 .stat-tile span { font-size: 10px; }
/* .row wird in den Views 114-mal benutzt – immer mit gap, flex-wrap oder
   justify-content daneben. Nur: die Klasse gab es gar nicht. Ohne
   display:flex wirkt nichts davon, und die Kacheln stapelten sich
   untereinander statt nebeneinander zu stehen. */
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.stat-tile { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
.stat-tile b { display: block; font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: -.02em; }
.stat-tile span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--green); margin-right: 8px; }

/* ---------- Layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 38px 0 18px; }
.section-head h2 { font-family: var(--display); font-weight: 900; font-size: 26px; text-transform: uppercase; letter-spacing: -.01em; }
.section-head a { font-size: 13px; font-weight: 800; }
.cols { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: transform .18s, border-color .18s; }
a.card:hover { transform: translateY(-3px); border-color: var(--border-strong); color: inherit; }
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.news-card img { height: 170px; width: 100%; object-fit: cover; }
.news-card .body { padding: 16px 18px 18px; }
.badge { display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; font-family: var(--display); }
.badge.violet { background: var(--violet-strong); color: #fff; }
.badge.gold { background: var(--gold); color: var(--on-gold); }
.badge.dark { background: var(--bg); color: var(--text-2); border: 1px solid var(--border-strong); }
.badge.green { background: rgba(34,197,94,.15); color: var(--green); }
.badge.red { background: rgba(255,77,94,.15); color: var(--red); }
.news-card h3 { font-family: var(--display); font-weight: 900; font-size: 20px; text-transform: uppercase; margin: 10px 0 6px; color: #fff; }
.news-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.meta { font-size: 12px; color: var(--text-3); margin-top: 10px; }

/* ---------- Forum ---------- */
.forum-group { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 22px; }
.forum-group-head { background: var(--violet-strong); padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; }
.forum-group-head h3 { font-family: var(--display); font-weight: 900; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.forum-group-head span { font-size: 12px; font-weight: 800; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .06em; }
.forum-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--card); border-top: 1px solid var(--border); transition: background .15s; color: inherit; }
.forum-row:hover { background: var(--card-raised); color: inherit; }
.forum-icon { width: 46px; height: 46px; border-radius: 13px; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.35);
  display: flex; align-items: center; justify-content: center; font-size: 21px; flex: none; }
.forum-main { flex: 1; min-width: 0; }
.forum-main b { font-family: var(--display); font-weight: 900; font-size: 16.5px; text-transform: uppercase; }
.forum-main .desc { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.forum-main .subs { font-size: 12px; color: var(--violet); margin-top: 4px; font-weight: 700; }
.forum-stats { text-align: right; font-size: 12.5px; color: var(--text-3); flex: none; width: 90px; }
.forum-stats b { display: block; color: var(--text); font-size: 14px; }
.forum-last { display: flex; align-items: center; gap: 10px; width: 230px; flex: none; min-width: 0; }
.forum-last .t { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forum-last .m { font-size: 11.5px; color: var(--text-3); }

/* ---------- Sidebar ---------- */
.widget { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; margin-bottom: 16px; }
.widget h4 { font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; color: var(--text-2); }
.activity-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.05); }
.activity-item:first-of-type { border-top: none; }
.activity-item .t { font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.3; }
.activity-item .m { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.widget.gold-widget { background: var(--gold); border: none; color: var(--on-gold); }
.gold-widget .kicker { font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.gold-widget h3 { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: .95; text-transform: uppercase; margin: 8px 0 10px; }
.gold-widget p { font-size: 13.5px; font-weight: 600; line-height: 1.45; margin-bottom: 14px; }
.btn.black { background: var(--bg); color: #fff; padding: 12px 22px; }
.btn.black:hover { color: var(--gold); }
.topposter { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; font-weight: 700; }
.topposter .n { flex: 1; }
.topposter .c { color: var(--violet); font-family: var(--display); font-weight: 900; }

/* ---------- Shop ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.product-card img { height: 180px; width: 100%; object-fit: cover; background: var(--inset); }
.product-card .body { padding: 14px 16px 16px; }
.product-card h3 { font-family: var(--display); font-weight: 900; font-size: 18px; text-transform: uppercase; margin: 8px 0 4px; color: #fff; }
.price { font-family: var(--display); font-weight: 900; font-size: 17px; color: var(--gold); }
.cat-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }

/* ---------- Thread / Posts ---------- */
.breadcrumb { font-size: 13px; color: var(--text-3); margin: 22px 0 10px; }
.thread-title { font-family: var(--display); font-weight: 900; font-size: 30px; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 6px; }
.postcard { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; margin-bottom: 14px; }
.postcard.solution { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.06); }
.post-author { width: 130px; flex: none; text-align: center; border-right: 1px solid var(--border); padding-right: 14px; }
.post-author .name { font-weight: 900; font-size: 14px; margin-top: 8px; }
.post-author .sub { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.role-badge { display: inline-block; border: 1px solid; border-radius: 999px; padding: 2px 10px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.post-body { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.6; color: #e6e5ea; white-space: pre-wrap; word-wrap: break-word; }
.post-foot { font-size: 12px; color: var(--text-3); margin-top: 12px; }
.thread-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--card); border-top: 1px solid var(--border); color: inherit; }
.thread-row:hover { background: var(--card-raised); color: inherit; }
.thread-row .title { font-weight: 800; font-size: 14.5px; color: #fff; }
.thread-row .m { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.thread-row .nums { width: 90px; text-align: right; font-size: 12.5px; color: var(--text-3); flex: none; }

/* ---------- Formulare ---------- */
input[type=text], input[type=password], input[type=email], input[type=search], input[type=url], input[type=number], input[type=datetime-local], textarea, select {
  width: 100%; background: var(--inset); border: 1px solid var(--border-strong); border-radius: 13px;
  color: #fff; padding: 12px 14px; font-size: 14px; font-family: inherit; outline: none; transition: border .15s; }
input:focus, textarea:focus, select:focus { border-color: var(--violet); }
label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 14px 0 6px; }
.form-card { max-width: 440px; margin: 48px auto; background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 30px; }
.form-card h1 { font-family: var(--display); font-weight: 900; font-size: 26px; text-transform: uppercase; margin-bottom: 4px; }
.form-card .sub { color: var(--text-3); font-size: 13px; margin-bottom: 10px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 60px; background: var(--violet-bg);
  background-image: repeating-conic-gradient(#3d1878 0% 25%, #2c0f57 0% 50%); background-size: 64px 64px;
  border-top: 4px solid var(--bg); }
.site-footer .onlinebar { padding: 0 24px 20px; text-align: center; font-size: 12.5px; color: #dccffd; }
.site-footer .inner { max-width: 1240px; margin: 0 auto; padding: 44px 24px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 26px; }
.site-footer h2 { font-family: var(--display); font-weight: 900; font-size: 38px; line-height: .92; text-transform: uppercase;
  text-shadow: 4px 4px 0 var(--violet-deep); }
.site-footer h2 .g { color: var(--gold); }
.site-footer .tag { font-size: 13px; color: #dccffd; margin-top: 10px; }
.site-footer h5 { font-family: var(--display); font-weight: 900; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; color: #dccffd; }
.site-footer a { display: block; color: #fff; font-size: 13.5px; padding: 4px 0; font-weight: 600; }
.site-footer a:hover { color: var(--gold); }

/* ---------- Toast / Flash ---------- */
.flash { position: fixed; bottom: 92px; right: 24px; z-index: 99; background: var(--card-raised);
  border: 1px solid var(--violet); border-radius: 14px; padding: 13px 20px; font-size: 13.5px; font-weight: 700;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: flashIn .25s; cursor: pointer; transition: opacity .4s, transform .4s; max-width: min(420px, calc(100vw - 120px)); }
.flash.out { opacity: 0; transform: translateY(10px); }
@keyframes flashIn { from { transform: translateY(10px); opacity: 0; } }

/* ---------- Empty State ---------- */
.empty { text-align: center; padding: 44px 20px; color: var(--text-3); font-size: 14px; }
.empty b { display: block; font-family: var(--display); font-weight: 900; font-size: 18px; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }

/* ---------- Responsive ---------- */
/*
 * Zwischen Burger-Umbruch (980) und voller Breite (1240) passte der Kopf
 * nicht: Logo, Navigation und die rechte Knopfleiste brauchten zusammen
 * rund 1370 Pixel. Auf einem Fenster von 1100 stand die Leiste dann weit
 * ueber dem rechten Rand. Statt den Burger frueher einzuschalten, wird hier
 * enger gesetzt – das reicht.
 */
/*
 * Der Kopf passte urspruenglich bei keiner Breite: .inner ist auf 1240
 * gedeckelt, Logo, Navigation und Knopfleiste brauchten zusammen rund 1343.
 * Schuld war die Polsterung – .pill trug 18 Pixel links und rechts, bei
 * sechs Menuepunkten allein 216. Das Grundmass oben ist entsprechend enger.
 *
 * Darunter wird in Stufen nachgezogen, statt einmal hart zu schrumpfen:
 * eine Stufe, die kaum auffaellt, dann der Umbruch in zwei Zeilen. Der
 * Burger bleibt dem Handy vorbehalten – bei 1000 Pixeln ist das fuer viele
 * fast Vollbild, dort gehoert die Navigation hin.
 */
@media (max-width: 1219px) and (min-width: 981px) {
  .site-header .inner { gap: 6px; padding: 13px 16px; }
  .site-header .logo { font-size: 20px; }
  .mainnav { gap: 3px; }
  .mainnav .pill { padding: 9px 10px; }
  .headactions { gap: 6px; }
  .headactions .pill { padding: 9px 11px; }
  .userchip { max-width: 150px; overflow: hidden; }
  .userchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Tablet: die Navigation bekommt eine eigene Zeile, statt zu schrumpfen,
   bis man sie nicht mehr lesen kann. Eingeklappt wird nichts. */
@media (max-width: 980px) and (min-width: 621px) {
  .site-header .inner { flex-wrap: wrap; row-gap: 9px; padding: 12px 16px; }
  .site-header .logo { order: 1; font-size: 20px; }
  .headspace { display: none; }
  .headactions { order: 2; margin-left: auto; gap: 6px; }
  .mainnav { order: 3; width: 100%; justify-content: flex-start; gap: 4px;
             overflow-x: auto; scrollbar-width: none; }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav .pill { padding: 8px 12px; font-size: 12.5px; }
}
}
}

@media (max-width: 980px) {
  /* Auf dem Handy bleibt oben nur das Nötigste stehen: Logo, Konto, Burger.
     Navigation, Suche und Sprachwahl klappen darunter auf. Vorher rutschte
     alles linksbündig untereinander und der Kopf war halb so hoch wie der
     Bildschirm. */
  .hero .inner, .cols { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .site-footer .inner { grid-template-columns: 1fr 1fr; }
  .forum-last { display: none; }
  .post-author { width: 90px; }
}
/* Nur noch am Handy: Navigation einklappen. */
@media (max-width: 620px) {
  .site-header .inner { flex-wrap: wrap; row-gap: 10px; padding: 11px 16px; }
  .logo { order: 1; font-size: 19px; }
  .headspace { display: none; }
  .burger { display: flex; order: 3; margin-left: auto; }

  /* Draußen bleibt nur der Konto- bzw. Login-Knopf */
  .headactions { order: 2; margin-left: auto; gap: 6px; }
  .headactions .langswitch,
  .headactions .pill.gold,
  .headactions .pill[href="/admin"] { display: none; }

  .mainnav { display: none; }
  .navtoggle:checked ~ .mainnav { display: flex; }
  .mainnav { order: 5; width: 100%; flex-direction: column; gap: 4px; }
  .mainnav .pill { width: 100%; text-align: left; padding: 12px 15px; font-size: 13px; }

  /* Shop, Admin und Sprache stehen im aufgeklappten Menü */
  .mainnav .mobileonly { display: block; }
  .mainnav .langswitch.mobileonly { display: flex; }

  .forum-stats { display: none; }
  .site-footer .inner { grid-template-columns: 1fr; }
  .postcard { flex-direction: column; }
  .post-author { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 12px; display: flex; align-items: center; gap: 10px; text-align: left; }
}

/* ================= Shop-Landingpage (nach Referenz) ================= */
@keyframes nyzaFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(3deg); } }
@keyframes nyzaFloatB { 0%,100% { transform: translateY(-8px) rotate(4deg); } 50% { transform: translateY(10px) rotate(-3deg); } }
@keyframes nyzaTwinkle { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes nyzaPop { 0% { opacity: 0; transform: translateY(14px) scale(.92); } 60% { opacity: 1; transform: translateY(0) scale(1.04); } 100% { opacity: 1; transform: none; } }

.shop-hero { position: relative; background: var(--violet-bg);
  background-image: repeating-conic-gradient(#3d1878 0% 25%, #2c0f57 0% 50%); background-size: 64px 64px;
  animation: nyzaPan 14s linear infinite; border-bottom: 4px solid var(--bg); overflow: hidden; }
.shop-hero .glow-a { position: absolute; top: -90px; left: -70px; width: 420px; height: 420px; border-radius: 999px;
  background: radial-gradient(circle, rgba(165,135,249,.5) 0%, rgba(165,135,249,0) 70%); }
.shop-hero .glow-b { position: absolute; bottom: -140px; right: -80px; width: 460px; height: 460px; border-radius: 999px;
  background: radial-gradient(circle, rgba(246,183,60,.28) 0%, rgba(246,183,60,0) 70%); }
.twinkle { position: absolute; animation: nyzaTwinkle 3.4s ease-in-out infinite; }
.shop-hero .inner-c { position: relative; max-width: 1000px; margin: 0 auto; padding: 56px 24px 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.live-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--bg); border: 2px solid var(--gold);
  color: var(--gold); border-radius: 999px; padding: 8px 18px; font-size: 12px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; }
.live-badge .pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
.shop-hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(52px, 9vw, 96px); line-height: .86;
  letter-spacing: -.035em; margin: 22px 0 0; text-transform: uppercase; color: #fff;
  text-shadow: 6px 6px 0 var(--violet-deep), 12px 12px 0 rgba(11,11,15,.5); }
.shop-hero .word { font-family: var(--display); font-weight: 900; font-size: clamp(52px, 9vw, 96px); line-height: .86;
  letter-spacing: -.035em; text-transform: uppercase; font-style: italic; color: var(--gold);
  text-shadow: 6px 6px 0 var(--bg); animation: nyzaPop .55s ease-out; display: inline-block; margin-top: 6px; }
.shop-hero p { max-width: 520px; margin: 24px 0 0; font-size: 17px; line-height: 1.55; color: #dccffd; }
.hero-shots { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin-top: 34px; width: 100%; max-width: 720px; }
.hero-shots div { border-radius: 24px; overflow: hidden; border: 3px solid rgba(255,255,255,.2); box-shadow: 0 18px 30px rgba(0,0,0,.5); }
.hero-shots .side { width: 24%; animation: nyzaFloatB 7s ease-in-out infinite; }
.hero-shots .side.b { animation-delay: .8s; animation-duration: 7.6s; }
.hero-shots .mid { width: 38%; border: 4px solid var(--gold); border-radius: 28px; box-shadow: 0 26px 44px rgba(0,0,0,.6); animation: nyzaFloat 6s ease-in-out infinite; }
.hero-shots img { width: 100%; height: auto; aspect-ratio: 1064/1478; object-fit: cover; }

.shop-nav { position: sticky; top: 61px; z-index: 30; background: rgba(11,11,15,.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border); }
.shop-nav .inner { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.shop-nav a { font-size: 14px; font-weight: 700; color: var(--text-2); }
.shop-nav a:hover { color: var(--gold); }
.cart-btn { display: flex; align-items: center; gap: 10px; background: var(--violet-strong); color: #fff;
  border-radius: 999px; padding: 11px 20px; font-family: var(--display); font-weight: 900; font-size: 15px;
  text-transform: uppercase; box-shadow: 0 4px 0 var(--violet-deep); }
.cart-btn:hover { color: #fff; filter: brightness(1.08); }
.cart-btn .count { background: var(--gold); color: var(--on-gold); border-radius: 999px; min-width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }

.shop-section { max-width: 1240px; margin: 0 auto; padding: 64px 24px 0; }
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }
.shop-section h2 { font-family: var(--display); font-weight: 900; font-size: clamp(34px, 5vw, 52px); line-height: 1;
  letter-spacing: -.02em; margin: 10px 0 0; text-transform: uppercase; text-shadow: 4px 4px 0 var(--violet-deep); }
.section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.section-note { font-size: 14px; color: var(--text-3); max-width: 300px; }

.rank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 18px; margin-top: 32px; }
.rank-card { background: var(--card); border: 1px solid var(--border); border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.rank-card:hover { transform: translateY(-4px); border-color: rgba(165,135,249,.45); }
.rank-shot { position: relative; background: var(--card-raised);
  background-image: repeating-conic-gradient(#221f2c 0% 25%, #1a1822 0% 50%); background-size: 32px 32px;
  padding: 10px; display: flex; justify-content: center; }
.rank-shot img { width: 100%; aspect-ratio: 1064/1478; object-fit: cover; border-radius: 18px; border: 2px solid rgba(255,255,255,.14); }
.rank-tag { position: absolute; top: 12px; left: 12px; background: var(--bg); border: 2px solid var(--violet);
  color: #dccffd; border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rank-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.rank-body .name { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; text-transform: uppercase; }
.rank-price { font-family: var(--display); font-weight: 900; font-size: 32px; color: var(--gold); }
.rank-perk { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.btn-cart { width: 100%; background: var(--violet-strong); color: #fff; border: none; border-radius: 999px; padding: 13px;
  font-family: var(--display); font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: .03em;
  cursor: pointer; box-shadow: 0 4px 0 var(--violet-deep); transition: filter .15s, transform .15s; }
.btn-cart:hover { filter: brightness(1.1); transform: translateY(-1px); }

.server-banner { background: var(--violet); border-radius: 28px; padding: 36px; display: grid;
  grid-template-columns: 1fr auto; gap: 28px; align-items: center; border: 4px solid var(--bg); }
.server-banner .kicker { color: var(--violet-bg); }
.server-banner h3 { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 4vw, 44px); line-height: 1;
  margin: 10px 0 0; text-transform: uppercase; color: var(--bg); }
.server-banner p { max-width: 520px; margin: 14px 0 0; color: #231b3d; font-size: 16px; line-height: 1.5; font-weight: 500; }
.chip { background: rgba(11,11,15,.14); color: var(--bg); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 800; }
.server-price { text-align: center; background: var(--bg); border-radius: 22px; padding: 24px 28px; min-width: 220px; }
.server-price .ab { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c2adfb; }
.server-price .val { font-family: var(--display); font-weight: 900; font-size: 46px; color: var(--gold); line-height: 1; margin: 6px 0 2px; }

.cosmetic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 30px; }
.cosmetic-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 14px;
  display: flex; gap: 14px; align-items: center; }
.cosmetic-card .shot { width: 70px; flex: none; aspect-ratio: 1064/1478; border-radius: 16px; overflow: hidden; background: var(--card-raised); }
.cosmetic-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.cosmetic-card .name { font-family: var(--display); font-weight: 900; font-size: 19px; text-transform: uppercase; line-height: 1.1; }
.btn-mini { background: rgba(139,92,246,.2); color: #c2adfb; border: 1px solid rgba(139,92,246,.55); border-radius: 999px;
  padding: 8px 14px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.btn-mini:hover { background: rgba(139,92,246,.35); }

.pet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-top: 30px; }
.pet-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; transition: transform .2s; }
.pet-card:hover { transform: translateY(-4px); }
.pet-shot { background: var(--card-raised); background-image: repeating-conic-gradient(#2a2038 0% 25%, #1a1822 0% 50%);
  background-size: 26px 26px; padding: 10px; display: flex; justify-content: center; position: relative; }
.pet-shot img { width: 100%; aspect-ratio: 1064/1478; object-fit: cover; border-radius: 16px; border: 2px solid rgba(255,255,255,.12); }
.rarity { position: absolute; top: 10px; right: 10px; background: var(--green); color: #062b14; border-radius: 999px;
  padding: 4px 10px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.btn-adopt { background: var(--violet-strong); color: #fff; border: none; border-radius: 999px; padding: 9px 16px;
  font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; box-shadow: 0 3px 0 var(--violet-deep); }
.btn-adopt:hover { filter: brightness(1.1); }

.usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.usp { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 22px; }
.usp.gold { background: var(--gold); color: var(--on-gold); border: none; }
.usp .t { font-family: var(--display); font-weight: 900; font-size: 20px; text-transform: uppercase; margin-top: 10px; }
.usp .d { font-size: 13px; color: var(--text-3); margin-top: 6px; line-height: 1.5; }
.usp.gold .d { color: var(--on-gold); font-weight: 600; }

@media (max-width: 860px) {
  .server-banner { grid-template-columns: 1fr; }
  .shop-nav { position: static; }
}

/* Anker-Offset unter den beiden Sticky-Leisten + weiches Scrollen */
html { scroll-behavior: smooth; }
.shop-section { scroll-margin-top: 130px; }

/* ================= Adminpanel ================= */
.admin-shell { display: flex; gap: 0; max-width: 1400px; margin: 0 auto; min-height: 70vh; }
.admin-side { width: 220px; flex: none; padding: 26px 14px; border-right: 1px solid var(--border); }
.admin-brand { font-family: var(--display); font-weight: 900; font-size: 17px; text-transform: uppercase;
  padding: 0 10px 20px; display: flex; align-items: center; gap: 8px; }
.admin-brand b { color: var(--gold); }
.admin-side .logo-sm { display: inline-flex; width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(135deg, #a587f9, #6524d6); align-items: center; justify-content: center; font-size: 14px; }
.admin-side nav { display: flex; flex-direction: column; gap: 3px; }
.admin-side nav a { padding: 10px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.admin-side nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-side nav a.active { background: var(--violet-strong); color: #fff; font-family: var(--display);
  font-weight: 900; text-transform: uppercase; font-size: 13px; box-shadow: 0 3px 0 var(--violet-deep); }
.admin-main { flex: 1; min-width: 0; padding: 26px 30px 40px 30px; }
.admin-h1 { font-family: var(--display); font-weight: 900; font-size: 32px; text-transform: uppercase;
  letter-spacing: -.02em; text-shadow: 2px 2px 0 var(--violet-deep); margin-bottom: 2px; }
.admin-sub { color: var(--text-3); font-size: 13px; margin: 6px 0 24px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
/* Kacheln brauchen eigene Innenabstaende – .card bringt keine mit, sonst
   klebt die Zahl oben und die Beschriftung wird unten abgeschnitten */
.admin-stat { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center;
  min-height: 92px; }
.admin-stat b { display: block; font-family: var(--display); font-weight: 900; font-size: 28px;
  line-height: 1.1; letter-spacing: -.02em; }
.admin-stat b.gold { color: var(--gold); } .admin-stat b.red { color: var(--red); }
.admin-stat span { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-top: 7px; display: block; line-height: 1.35; }
.admin-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13.5px; flex-wrap: wrap; }
.admin-row:last-child { border-bottom: none; }
@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }
  .admin-side { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .admin-side nav { flex-direction: row; flex-wrap: wrap; }
  .admin-main { padding: 22px 0 40px; }
}

/* Verifizierungs-Hinweis */
.verify-bar { background: rgba(246,183,60,.12); border-bottom: 1px solid rgba(246,183,60,.35);
  color: var(--gold); padding: 11px 24px; font-size: 13.5px; text-align: center; }
.verify-bar b { font-weight: 800; }
.verify-bar a { margin-left: 10px; font-weight: 800; }
.verify-bar code { background: rgba(246,183,60,.16); color: var(--gold); }

/* ================= Profil ================= */
.profile-banner { position: relative; height: 190px; background: var(--violet-bg);
  background-image: repeating-conic-gradient(#3d1878 0% 25%, #2c0f57 0% 50%); background-size: 64px 64px;
  animation: nyzaPan 18s linear infinite; border-bottom: 4px solid var(--bg); overflow: hidden; }
.profile-banner .glow-a { position: absolute; top: -120px; right: -60px; width: 380px; height: 380px;
  border-radius: 999px; background: radial-gradient(circle, rgba(246,183,60,.3) 0%, rgba(246,183,60,0) 70%); }
/* Das Bild sitzt zur Haelfte im Banner, der Name daneben auf gleicher Hoehe.
   Vorher stand der Name ueber dem Bild und alles Weitere in derselben Spalte –
   die wurde so hoch, dass Bild und Name auseinanderrutschten. */
.profile-head { display: flex; gap: 20px; align-items: center; margin-top: -52px; position: relative; z-index: 2; }
/* Name, Rang und Status in einer Zeile: stand der Status darunter, sass der
   Name um seine halbe Hoehe zu hoch und lag nicht mehr auf Bildmitte. */
.profile-ident { flex: 1; min-width: 0; display: flex; align-items: center;
  flex-wrap: wrap; gap: 6px 14px; }
.profile-ident .profile-name { margin: 0; }
.profile-ident > .meta { width: 100%; }
/* Die Zeile mit Name und Beitrittsdatum haengt unter dem Status. Sie bricht
   auf volle Breite um, statt die Spalte breiter zu machen. */
.profile-since { margin-top: 2px; }
/* Der Steckbrief haengt mit unter dem Namen, ebenfalls auf voller Breite. */
.profile-ident > .steckbrief { width: 100%; margin-top: 6px; }
.profile-info { margin-top: 16px; }
.profile-info .steckbrief { margin-top: 8px; }
/* Melden: oben rechts im Banner statt als leeres Kaestchen in der Namenszeile */
/* Rechts in der Kopfzeile. Vorher war es mit festem Versatz ins Banner
   gerechnet – solche Zahlen stimmen nur bei einer Fenstergroesse, im
   Vollbild lief der Kopf aus dem Bild. */
.profile-report { margin-left: auto; align-self: flex-start; position: relative; z-index: 5; }
.profile-report summary { list-style: none; cursor: pointer; }
/* Das Auswahlfeld oeffnet sonst nach oben – von hier aus waere es ausserhalb
   des Bildschirms. Hier also nach unten, und rechtsbuendig. */
.profile-report .reaction-picker { top: calc(100% + 6px); bottom: auto; right: 0; left: auto; }
.profile-avatar { position: relative; width: 104px; height: 104px; border-radius: 26px; flex: none;
  display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900;
  font-size: 44px; color: #fff; border: 4px solid var(--bg); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.status-dot { position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 999px;
  border: 3px solid var(--bg); }
.profile-name { font-family: var(--display); font-weight: 900; font-size: clamp(28px,4vw,40px);
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin: 22px 0 18px; }
.profile-tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--border);
  padding-bottom: 14px; margin-bottom: 20px; }
@media (max-width: 700px) {
  .profile-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .profile-report { align-self: flex-end; margin-top: -34px; }
  .profile-banner { height: 140px; }
}

/* ================= Reaktionen ================= */
.reactions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.reaction { background: var(--inset); border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 4px 11px; font-size: 13px; color: var(--text-2); cursor: pointer; font-family: inherit; transition: all .15s; }
.reaction:hover { border-color: var(--violet); color: #fff; }
.reaction.mine { background: rgba(139,92,246,.2); border-color: var(--violet); color: #fff; }
.reaction.add { list-style: none; padding: 4px 12px; }
.reaction.add::-webkit-details-marker { display: none; }
.reaction-picker { position: absolute; bottom: 130%; left: 0; z-index: 20; display: flex; gap: 4px;
  background: var(--card-raised); border: 1px solid var(--border-strong); border-radius: 14px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* Ranglisten-Tabelle: klare Spalten, Medaillen-Zeilen hervorgehoben */
.wrap table td, .wrap table th { padding: 12px 14px; }
.wrap table td:last-child, .wrap table th:last-child { text-align: right; }
.cat-pills + .row { margin-bottom: 18px; }

/* ================= Cookie-Hinweis ================= */
.cookie-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 90;
  width: min(760px, calc(100% - 32px)); display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: var(--card-raised); border: 1px solid var(--border-strong); border-radius: 18px;
  padding: 18px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.6); animation: cookieIn .3s ease-out; }
.cookie-banner.hidden { display: none; }
.cookie-text { flex: 1; min-width: 240px; }
.cookie-text b { font-family: var(--display); font-weight: 900; font-size: 15px; text-transform: uppercase; }
.cookie-text p { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-top: 6px; }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes cookieIn { from { transform: translate(-50%, 14px); opacity: 0; } }
@media (max-width: 620px) { .cookie-banner { bottom: 10px; padding: 16px; } }

/* Replay-Chips: Kennungen wie GD-7K4M – klickbar, kopierbar */
.replay-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;
  border:1px solid var(--gold,#f6b73c);color:var(--gold,#f6b73c);font-family:ui-monospace,monospace;
  font-size:12.5px;text-decoration:none;white-space:nowrap;transition:background .15s}
.replay-chip:hover{background:rgba(246,183,60,.12)}
.replay-chip.copied{background:var(--gold,#f6b73c);color:#15161c}
.replay-chip.big{font-size:15px;padding:6px 14px}

/* ---------- Chat-Bubble (private Nachrichten auf jeder Seite) ---------- */
.nyza-chat{position:fixed;right:22px;bottom:22px;z-index:900;font-size:14px}
.chat-fab{width:64px;height:64px;border-radius:50%;border:2px solid rgba(246,183,60,.9);cursor:pointer;position:relative;
  background:linear-gradient(145deg,#c084fc 0%,#7c3aed 100%);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px rgba(160,110,255,.18),0 14px 34px rgba(124,58,237,.55);transition:transform .18s,box-shadow .18s}
.chat-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 0 6px rgba(246,183,60,.22),0 18px 40px rgba(124,58,237,.65)}
.chat-fab .chat-ico{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));transition:transform .18s}
.chat-fab .chat-x{display:none;font-size:24px;font-weight:900;line-height:1}
.chat-fab.open{background:linear-gradient(145deg,#f6b73c,#ff8a3c);color:#15161c;border-color:rgba(255,255,255,.35)}
.chat-fab.open .chat-ico{display:none}
.chat-fab.open .chat-x{display:block}
.chat-ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(246,183,60,.9);opacity:0;pointer-events:none}
.chat-fab.has-unread .chat-ring{animation:chatPulse 1.8s ease-out infinite}
@keyframes chatPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.chat-badge{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;border-radius:11px;border:2px solid var(--bg,#15161c);
  background:#f6b73c;color:#15161c;font-size:11.5px;font-weight:900;line-height:18px;padding:0 5px}
.chat-panel{position:absolute;right:0;bottom:68px;width:360px;max-width:calc(100vw - 30px);height:520px;
  max-height:calc(100vh - 120px);display:flex;flex-direction:column;background:var(--card,#1d1f27);
  border:1px solid var(--line,rgba(255,255,255,.1));border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.chat-head button,.chat-head a{background:none;border:0;color:inherit;cursor:pointer;font-size:18px;line-height:1;padding:2px 6px}
.chat-close{margin-left:4px}
.chat-body{flex:1;overflow-y:auto;padding:10px 12px}
.chat-row{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:9px 8px;border-radius:12px;cursor:pointer}
.chat-row:hover{background:rgba(255,255,255,.05)}
.chat-row img,.chat-av{width:38px;height:38px;border-radius:50%;object-fit:cover;display:inline-block;
  background:rgba(255,255,255,.1);text-align:center;line-height:38px;font-weight:900}
.chat-row .meta{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.chat-row.unread b{color:var(--gold,#f6b73c)}
.chat-row .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold,#f6b73c);vertical-align:middle}
.chat-msg{max-width:85%;margin:6px 0;position:relative}
.chat-msg.mine{margin-left:auto;text-align:right}
.chat-bubble{display:inline-block;text-align:left;background:rgba(255,255,255,.06);padding:8px 12px;border-radius:14px;
  line-height:1.5;word-break:break-word}
.chat-msg.mine .chat-bubble{background:rgba(160,110,255,.22)}
.chat-quote,.pm-quote{display:block;font-size:12px;opacity:.75;border-left:3px solid var(--gold,#f6b73c);padding:2px 8px;margin:0 0 3px;
  text-align:left;color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chat-meta{font-size:11px;opacity:.7;margin-top:2px;display:flex;gap:8px;align-items:center}
.chat-msg.mine .chat-meta{justify-content:flex-end}
.chat-actions{opacity:0;transition:opacity .15s}
.chat-msg:hover .chat-actions{opacity:1}
.chat-actions button{background:none;border:0;color:inherit;cursor:pointer;font-size:13px;padding:0 3px}
.chat-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.chat-msg.mine .chat-chips{justify-content:flex-end}
.chat-chip{border:1px solid var(--line,rgba(255,255,255,.12));background:rgba(255,255,255,.04);color:inherit;
  border-radius:999px;padding:1px 8px;font-size:12px;cursor:pointer}
.chat-chip.mine{border-color:var(--gold,#f6b73c);background:rgba(246,183,60,.15)}
.chat-picker,.pm-picker{display:inline-flex;gap:2px;background:var(--card,#1d1f27);border:1px solid var(--line,rgba(255,255,255,.12));
  border-radius:999px;padding:3px 6px;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.chat-picker{position:absolute;top:-34px;left:0;z-index:5}
.chat-msg.mine .chat-picker{left:auto;right:0}
.chat-picker button,.pm-picker button{background:none;border:0;font-size:17px;cursor:pointer;padding:0 3px;transition:transform .1s}
.chat-picker button:hover,.pm-picker button:hover{transform:scale(1.3)}
.chat-reply{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;background:rgba(246,183,60,.08);
  border-top:1px solid var(--line,rgba(255,255,255,.08));border-left:3px solid var(--gold,#f6b73c)}
.chat-reply span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-reply button{background:none;border:0;color:inherit;cursor:pointer;font-size:15px}
.chat-compose{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.chat-compose input{flex:1;border-radius:999px;padding:9px 14px;border:1px solid var(--line,rgba(255,255,255,.12));
  background:rgba(255,255,255,.04);color:inherit}
.chat-compose button{border:0;border-radius:50%;width:38px;height:38px;background:var(--gold,#f6b73c);color:#15161c;cursor:pointer;font-size:15px}
.hidden{display:none!important}
.linkbtn{background:none;border:0;color:inherit;opacity:.75;cursor:pointer;font:inherit;font-size:12px;padding:0 4px}
.linkbtn:hover{opacity:1;color:var(--gold,#f6b73c)}
@media (max-width:600px){.nyza-chat{right:12px;bottom:12px}.chat-panel{height:70vh}}

/* Gesprächsseite */
.pm-row{display:flex;gap:11px;margin-bottom:16px}
.pm-row.mine{flex-direction:row-reverse}
.pm-av{width:34px;height:34px;line-height:34px;text-align:center;border-radius:50%;font-weight:900;flex:0 0 auto;object-fit:cover}
.pm-col{max-width:78%}
.pm-row.mine .pm-col{text-align:right}
.pm-bubble{display:inline-block;text-align:left;background:rgba(255,255,255,.05);padding:10px 14px;border-radius:14px;font-size:14.5px;
  line-height:1.55;white-space:pre-wrap;word-break:break-word}
.pm-row.mine .pm-bubble{background:rgba(160,110,255,.16)}
.pm-meta{margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pm-row.mine .pm-meta{justify-content:flex-end}
.pm-row.mine .chat-chips{justify-content:flex-end}
.pm-react-wrap{position:relative}
.pm-picker{position:absolute;bottom:22px;left:0;z-index:5}

/* Editor-Leiste und BBCode-Ausgabe */
.bb-quote{border-left:3px solid var(--gold,#f6b73c);background:rgba(255,255,255,.04);padding:8px 12px;margin:8px 0;
  border-radius:0 10px 10px 0;opacity:.9}
.bb-code{background:rgba(0,0,0,.35);padding:10px 12px;border-radius:10px;overflow-x:auto;font-size:13px;margin:8px 0;white-space:pre-wrap}
.post-body a{color:var(--gold,#f6b73c)}
.chat-msg.mine .chat-quote{margin-left:auto;text-align:right;border-left:0;border-right:3px solid var(--gold,#f6b73c)}
.pm-row.mine .pm-quote{margin-left:auto;text-align:right;border-left:0;border-right:3px solid var(--gold,#f6b73c)}

/* ---------- Forum-Ausbau ---------- */
.tagchip{font-size:11px;vertical-align:middle}
.tagpick{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:999px;padding:3px 10px;font-size:13px;cursor:pointer;margin:0}
.tagpick input{margin:0}
.thread-row.unread .title{font-weight:900;color:#fff}
.dot-new{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gold,#f6b73c);margin-right:6px;box-shadow:0 0 0 3px rgba(246,183,60,.2);vertical-align:middle}
.newmark{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold,#f6b73c);font-weight:800;margin-bottom:8px;padding-left:8px;border-left:3px solid var(--gold,#f6b73c)}
.postcard.is-new{box-shadow:inset 3px 0 0 var(--gold,#f6b73c)}
.post-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mention{color:var(--gold,#f6b73c);font-weight:700;text-decoration:none}
.mention:hover{text-decoration:underline}
.mention-box{position:absolute;z-index:20;background:var(--card,#1d1f27);border:1px solid var(--line,rgba(255,255,255,.12));border-radius:12px;padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.5);display:flex;flex-direction:column;min-width:200px}
.mention-box button{background:none;border:0;color:inherit;text-align:left;padding:7px 10px;border-radius:8px;cursor:pointer;display:flex;gap:8px;align-items:center;font-size:13.5px}
.mention-box button:hover,.mention-box button:first-child{background:rgba(255,255,255,.06)}
.mention-box img{width:20px;height:20px;border-radius:5px;image-rendering:pixelated}
textarea.drop{outline:2px dashed var(--gold,#f6b73c);outline-offset:2px}
textarea.draft-restored{border-color:var(--gold,#f6b73c)}
.badge-icons{display:inline-flex;gap:2px;margin-left:4px;vertical-align:middle}
.badge-ico{font-size:13px;cursor:help}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:10px}
.badge-card{border:1px solid var(--line,rgba(255,255,255,.1));border-radius:14px;padding:14px;text-align:center;opacity:.45;filter:grayscale(.8)}
.badge-card.earned{opacity:1;filter:none;border-color:var(--gold,#f6b73c);background:rgba(246,183,60,.06)}
.badge-big{font-size:34px;margin-bottom:6px}
.steckbrief{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--text-2)}
.steckbrief b{color:#fff}
.poll{padding:16px 18px;margin-bottom:16px;border-color:var(--violet,#a06eff)}
.poll-q{font-weight:800;font-size:16px;margin-bottom:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.poll-opt{display:grid;grid-template-columns:auto 1fr 2fr auto;gap:10px;align-items:center;padding:6px 0;margin:0;cursor:pointer}
.poll-opt.mine .poll-text{color:var(--gold,#f6b73c);font-weight:800}
.poll-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.poll-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet,#a06eff),var(--gold,#f6b73c));border-radius:999px;transition:width .4s}
.poll-pct{font-size:13px;min-width:70px;text-align:right}
.modbox{display:inline-block;position:relative}
.modbox summary{list-style:none;display:inline-block}
.modbox summary::-webkit-details-marker{display:none}
.modpanel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(420px,90vw);background:var(--card,#1d1f27);border:1px solid var(--line,rgba(255,255,255,.12));border-radius:14px;padding:14px;box-shadow:0 14px 40px rgba(0,0,0,.55);text-align:left}
.modform{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.modform:last-child{border-bottom:0}
.bellmenu{position:relative}
.bellmenu summary::-webkit-details-marker{display:none}
.bell-list{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:calc(100vw - 30px);max-height:420px;overflow-y:auto;background:var(--card,#1d1f27);border:1px solid var(--line,rgba(255,255,255,.12));border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.55);z-index:120;padding:6px}
.bell-item{display:flex;gap:10px;padding:9px 10px;border-radius:10px;color:inherit;text-decoration:none;font-size:13.5px;align-items:flex-start}
.bell-item:hover{background:rgba(255,255,255,.05)}
.bell-item.unread{background:rgba(246,183,60,.08)}
.bell-ico{font-size:18px;width:24px;text-align:center;flex:0 0 auto}
.bell-all{display:block;text-align:center;padding:8px;font-size:13px;color:var(--gold,#f6b73c)}
mark{background:rgba(246,183,60,.35);color:inherit;border-radius:3px;padding:0 2px}
.admin-h3{font-family:var(--display);text-transform:uppercase;font-size:14px;letter-spacing:.06em;margin:18px 0 8px;color:var(--text-2)}

/* Mobil: Bubble als Vollbild, größere Ziele */
@media (max-width:600px){
  .chat-panel{position:fixed;inset:0;width:auto;height:auto;max-height:none;border-radius:0;bottom:0}
  .chat-compose input{font-size:16px}
  .reaction,.linkbtn{min-height:34px;padding:4px 10px}
  .poll-opt{grid-template-columns:auto 1fr;}
  .poll-opt .poll-bar{grid-column:1 / -1}
  .poll-pct{text-align:left}
  .modpanel{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto}
  .bell-list{position:fixed;left:12px;right:12px;top:64px;width:auto}
  .post-foot{font-size:12px}
}

/* ---------- NYZA Editor ---------- */
.ed{border:1px solid var(--line,rgba(255,255,255,.12));border-radius:14px;background:rgba(255,255,255,.025);overflow:visible;position:relative;margin-top:6px}
.ed.drop{outline:2px dashed var(--gold,#f6b73c);outline-offset:3px}
.ed-bar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line,rgba(255,255,255,.08));background:rgba(0,0,0,.18);border-radius:14px 14px 0 0;align-items:center}
.ed-group{display:inline-flex;gap:2px;padding:2px;border-radius:10px;background:rgba(255,255,255,.04)}
.ed-group.ed-right{margin-left:auto}
.ed-btn{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;min-width:34px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--text-2,#c9c9d2);cursor:pointer;font:inherit;font-size:13px;transition:background .12s,color .12s}
.ed-btn:hover{background:rgba(255,255,255,.09);color:#fff}
.ed-btn.on{background:rgba(246,183,60,.18);color:var(--gold,#f6b73c)}
.ed-btn .ed-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
.ed-btn .ed-label{font-weight:700;letter-spacing:.01em}
.ed-btn .ed-caret{display:inline-flex;margin-left:-2px;opacity:.6}
.ed-btn .ed-caret svg{width:12px;height:12px}
.ed-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:#0e0f14;color:#fff;font-size:12px;font-weight:600;padding:5px 9px;border-radius:7px;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:60;pointer-events:none}
.ed-btn[data-tip]:hover::before{content:'';position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);border:5px solid transparent;border-bottom-color:#0e0f14;z-index:61}
.ed-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:70;background:var(--card,#1d1f27);border:1px solid var(--line,rgba(255,255,255,.12));border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:170px;box-shadow:0 14px 40px rgba(0,0,0,.55);text-align:left}
.ed-menu.grid{flex-direction:row;flex-wrap:wrap;min-width:0;width:236px}
.ed-item{background:none;border:0;color:inherit;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:14px;line-height:1.2}
.ed-item:hover{background:rgba(255,255,255,.08)}
.ed-menu.grid .ed-item{padding:4px;font-size:19px;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.ed-swatch{display:block;width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.2)}
.ed-body{display:flex;min-height:180px}
.ed-pane{flex:1;position:relative;min-width:0}
.ed-ta,textarea.ed-ta{width:100%;border:0!important;border-radius:0!important;background:transparent!important;resize:vertical;min-height:180px;padding:14px 16px;font-size:15px;line-height:1.6;font-family:inherit;margin:0;box-shadow:none!important;outline:none}
.ed-ta:focus{outline:none;box-shadow:none}
.ed-preview{flex:1;border-left:1px solid var(--line,rgba(255,255,255,.08));padding:14px 16px;overflow:auto;font-size:15px;line-height:1.6;min-width:0}
.ed.split .ed-ta{border-right:0}
.ed-foot{display:flex;gap:14px;align-items:center;padding:6px 12px;border-top:1px solid var(--line,rgba(255,255,255,.08));font-size:12px;color:var(--text-3,#8a8a96);flex-wrap:wrap}
.ed-hint{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-draft{color:var(--gold,#f6b73c)}
.ed-help{padding:8px 14px;font-size:12px;color:var(--text-2);line-height:1.8;border-top:1px dashed var(--line,rgba(255,255,255,.1))}
.ed.full{position:fixed;inset:14px;z-index:500;background:var(--card,#1d1f27);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.ed.full .ed-body{flex:1;min-height:0}
.ed.full .ed-ta{height:100%;min-height:0;resize:none}
body.ed-lock{overflow:hidden}
.ed-pane .mention-box{left:16px;top:auto;bottom:10px}
/* BBCode-Ausgabe */
.bb-h{font-family:var(--display);font-weight:900;line-height:1.15;margin:10px 0 6px;text-transform:uppercase;letter-spacing:.02em}
.bb-h1{font-size:26px}.bb-h2{font-size:21px}.bb-h3{font-size:17px}
.bb-center{text-align:center}.bb-right{text-align:right}
.bb-list{margin:6px 0 6px 22px;padding:0}
.bb-list li{margin:2px 0}
.bb-hr{border:0;border-top:1px solid var(--line,rgba(255,255,255,.14));margin:12px 0}
.bb-spoiler{border:1px solid var(--line,rgba(255,255,255,.12));border-radius:10px;margin:8px 0;background:rgba(255,255,255,.03)}
.bb-spoiler summary{cursor:pointer;padding:8px 12px;font-weight:700;color:var(--gold,#f6b73c);list-style:none}
.bb-spoiler summary::before{content:'👁 '}
.bb-spoiler > div{padding:4px 12px 10px}
@media (max-width:700px){
  .ed-body{flex-direction:column}
  .ed-preview{border-left:0;border-top:1px solid var(--line,rgba(255,255,255,.08))}
  .ed-btn .ed-label{display:none}
  .ed-bar{gap:4px;padding:6px}
  .ed-group.ed-right{margin-left:0}
}

/* ---------- Forum-Ausbau 3 ---------- */
.votebtn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line,rgba(255,255,255,.14));background:rgba(255,255,255,.04);color:inherit;border-radius:10px;padding:4px 10px;font-weight:800;font-size:13px;cursor:pointer}
.votebtn.mine{border-color:var(--gold,#f6b73c);color:var(--gold,#f6b73c);background:rgba(246,183,60,.12)}
.votebtn.static{cursor:default;margin-right:10px;align-self:center}
.votebtn:disabled{opacity:.5;cursor:not-allowed}
.postcard.team{box-shadow:inset 0 0 0 1px rgba(160,110,255,.45)}
.postcard.team .teamtag{margin-bottom:8px}
.postcard.deleted{opacity:.75;border-style:dashed}
.rulesbox{font-size:13px;color:var(--text-2)}
.similar{margin:6px 0 10px;padding:10px 12px;border:1px dashed var(--gold,#f6b73c);border-radius:10px;font-size:13px}
.similar b{display:block;margin-bottom:4px;color:var(--gold,#f6b73c)}
.similar-list a{display:block;padding:3px 0;color:inherit}
.signupbox{padding:16px 18px;margin-bottom:16px}
.signup-list{margin:10px 0 0 18px;padding:0;columns:2;column-gap:20px}
.signup-list li{margin:4px 0;break-inside:avoid}
.signup-list .avatar,.signup-list img{vertical-align:middle;margin-right:4px}
.threadref{color:var(--gold,#f6b73c);font-weight:700}
.onlinebar{text-align:center;font-size:12px;color:var(--text-3,#8a8a96);padding:10px}
.clan-avatar{display:flex;align-items:center;justify-content:center;font-size:56px;background:linear-gradient(145deg,#c084fc,#7c3aed)}

/* ---------- Gewinnspiel-Box ---------- */
.gw{position:relative;overflow:hidden;border-radius:18px;margin:0 0 18px;border:2px solid rgba(246,183,60,.75);
  background:linear-gradient(135deg,#2a1b4f 0%,#1d1f27 55%,#3a2a0f 100%);box-shadow:0 0 0 4px rgba(160,110,255,.12),0 18px 50px rgba(0,0,0,.5),inset 0 0 60px rgba(246,183,60,.08);
  animation:gwGlow 3.2s ease-in-out infinite}
@keyframes gwGlow{0%,100%{box-shadow:0 0 0 4px rgba(160,110,255,.12),0 18px 50px rgba(0,0,0,.5),inset 0 0 60px rgba(246,183,60,.08)}50%{box-shadow:0 0 0 6px rgba(246,183,60,.22),0 18px 60px rgba(124,58,237,.45),inset 0 0 80px rgba(246,183,60,.16)}}
.gw-bg{position:absolute;inset:0;opacity:.08;background-image:linear-gradient(45deg,#f6b73c 25%,transparent 25%,transparent 75%,#f6b73c 75%),linear-gradient(45deg,#f6b73c 25%,transparent 25%,transparent 75%,#f6b73c 75%);background-size:28px 28px;background-position:0 0,14px 14px;animation:gwCheck 12s linear infinite;pointer-events:none}
@keyframes gwCheck{from{background-position:0 0,14px 14px}to{background-position:56px 56px,70px 70px}}
.gw-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gw-particles i{position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#f6b73c 45%,transparent 70%);opacity:0;animation:gwFloat 6s linear infinite;filter:drop-shadow(0 0 6px #f6b73c)}
.gw-particles i:nth-child(odd){background:radial-gradient(circle,#fff 0%,#c084fc 45%,transparent 70%);filter:drop-shadow(0 0 6px #c084fc);width:5px;height:5px}
.gw-particles i:nth-child(3n){width:8px;height:8px}
@keyframes gwFloat{0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}10%{opacity:.95}50%{transform:translateY(-55%) translateX(8px) scale(1)}100%{transform:translateY(-120%) translateX(-6px) scale(.4);opacity:0}}
.gw-inner{position:relative;padding:18px 22px}
.gw-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gw-kicker{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:14px;color:var(--gold,#f6b73c);text-shadow:0 0 14px rgba(246,183,60,.6)}
.gw-live{margin-left:auto;font-size:11px;font-weight:800;color:#4ade80;text-transform:uppercase;letter-spacing:.08em;animation:gwBlink 1.6s ease-in-out infinite}
@keyframes gwBlink{0%,100%{opacity:1}50%{opacity:.35}}
.gw-thread{display:block;font-weight:800;color:#fff;margin-bottom:8px;text-decoration:none}
.gw-thread:hover{color:var(--gold,#f6b73c)}
.gw-prize{display:flex;gap:14px;align-items:center}
.gw-prize img{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.15)}
.gw-prize-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3,#8a8a96)}
.gw-prize-name{font-family:var(--display);font-weight:900;font-size:24px;line-height:1.1;background:linear-gradient(90deg,#fff,#f6b73c 60%,#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.gw-timer{display:flex;gap:12px;align-items:baseline;margin:14px 0 10px;flex-wrap:wrap}
.gw-count{font-family:ui-monospace,monospace;font-size:26px;font-weight:800;color:#fff;letter-spacing:.04em;text-shadow:0 0 18px rgba(160,110,255,.7)}
.gw-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.gw-btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:11px 22px;font-weight:900;font-size:14px;cursor:pointer;color:#15161c;
  background:linear-gradient(90deg,#f6b73c,#ff8a3c);box-shadow:0 8px 24px rgba(246,183,60,.35);text-decoration:none;transition:transform .15s,box-shadow .15s;text-transform:uppercase;letter-spacing:.04em}
.gw-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(246,183,60,.5)}
.gw-btn.joined{background:linear-gradient(90deg,#4ade80,#22c55e);box-shadow:0 8px 24px rgba(74,222,128,.3)}
.gw-entries{font-size:13px;color:var(--text-2)}
.gw-result{margin-top:12px;padding:10px 14px;border-radius:12px;background:rgba(246,183,60,.12);border:1px solid rgba(246,183,60,.4);font-size:15px}
.gw-admin{margin-top:10px;font-size:12px}
.gw.over{animation:none;border-color:rgba(255,255,255,.18)}
.gw.over .gw-particles{display:none}
.gw.compact .gw-inner{padding:14px 16px}
.gw.compact .gw-prize img{width:56px;height:56px}
.gw.compact .gw-prize-name{font-size:18px}
.gw.compact .gw-count{font-size:20px}
.gw.compact .gw-btn{padding:8px 16px;font-size:12px}
@media (max-width:600px){.signup-list{columns:1}.gw-prize{flex-direction:column;align-items:flex-start}}

/* ---------- Team-Handbuch ---------- */
.hb-item{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.hb-item:last-child{border-bottom:0}
.hb-item p{margin:4px 0 6px;font-size:14px;line-height:1.6;color:var(--text-2)}
.hb-item p code,.hb-ex{font-family:ui-monospace,monospace;font-size:12.5px;background:rgba(0,0,0,.35);padding:2px 7px;border-radius:6px;color:var(--gold,#f6b73c)}
.hb-ex{display:inline-block;margin:0 8px 6px 0}
.hb-table{width:100%;border-collapse:collapse;font-size:13.5px}
.hb-table td{padding:6px 8px;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.05)}
.hb-table tr.hb-no{opacity:.45}
.hb-table code{font-size:12.5px;color:#fff}

/* Datei-Auswahl im Design statt Browser-Standard */
input[type=file]{width:100%;color:var(--text-2);font-size:13px;font-family:inherit;background:var(--inset);
  border:1px dashed var(--border-strong);border-radius:13px;padding:8px 10px;cursor:pointer}
input[type=file]::file-selector-button{background:var(--violet);color:#fff;border:0;border-radius:999px;padding:8px 14px;
  font-weight:800;font-family:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-right:12px;cursor:pointer;transition:filter .15s}
input[type=file]::file-selector-button:hover{filter:brightness(1.12)}
input[type=file]:focus{outline:none;border-color:var(--violet)}

/* ================= NYZA Wrapped ================= */
/* Eine Seite, die man herumzeigt: wenige, grosse Zahlen und viel Ruhe
   dazwischen. Alles gleich gross zu setzen waere hier das Gegenteil. */
.wrapped { position: relative; overflow: hidden; padding: 40px 20px 60px;
  min-height: 72vh; display: flex; align-items: center;
  background: radial-gradient(70% 55% at 50% 0%, rgba(101,36,214,.38), transparent 72%); }
/*
 * Der goldene Schein sass im Hintergrund der Seite selbst: wo die endete,
 * endete auch er – eine sichtbare Kante. Ihn in eine eigene, ueber den Rand
 * hinausragende Ebene zu legen half nicht, denn overflow:hidden schnitt sie
 * an derselben Stelle wieder ab. Jetzt liegt er ganz innerhalb und ist so
 * bemessen, dass er ausklingt, bevor er irgendeinen Rand erreicht.
 */
.wrapped::after { content: ""; position: absolute; right: -6%; bottom: 6%;
  width: 620px; height: 620px; max-width: 90%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(246,183,60,.16), transparent 58%); }
.wrapped > * { position: relative; z-index: 1; }
.wrapped-inner { max-width: 880px; margin: 0 auto; width: 100%; }

.wr-head { text-align: center; margin-bottom: 32px; }
.wr-kicker { font-family: var(--display); font-weight: 900; font-size: 13px;
  letter-spacing: .38em; text-transform: uppercase; color: var(--violet); }
.wr-kicker span { color: var(--gold); }
.wr-name { font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(38px, 9vw, 76px); line-height: .95; margin: 10px 0 4px; letter-spacing: .01em; }
.wr-period { font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: .3em; color: var(--text-2); text-transform: uppercase; }
.wr-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.wr-badge { background: rgba(255,255,255,.07); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 700;
  color: var(--text-2); text-decoration: none; }
a.wr-badge:hover { color: var(--gold); border-color: var(--gold); }

.wr-big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.wr-stat { background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 14px; text-align: center; }
.wr-stat b { display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(26px, 4.4vw, 40px); line-height: 1; letter-spacing: -.02em; }
.wr-stat span { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }

.wr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin-bottom: 14px; }
.wr-card { background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 18px; }
.wr-card-accent { border-color: var(--gold); }
.wr-card-title { font-size: 11px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3); }
.wr-card-big { font-family: var(--display); font-weight: 900; font-size: 27px;
  line-height: 1.15; margin: 6px 0 2px; }
.wr-card-accent .wr-card-big { color: var(--gold); }
.wr-card-note { font-size: 12.5px; color: var(--text-3); }

.wr-modes { margin-bottom: 14px; }
.wr-mode { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05); }
.wr-mode:last-child { border-bottom: none; }
.wr-mode-rank { width: 26px; font-size: 15px; flex: none; }
.wr-mode-name { flex: 0 0 34%; min-width: 0; font-size: 14px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-mode-bar { flex: 1; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.07); overflow: hidden; }
.wr-mode-bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--violet-strong), var(--gold)); }
.wr-mode-games { flex: none; width: 54px; text-align: right; font-weight: 800; font-size: 13.5px; }

.wr-share { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  justify-content: center; margin: 22px 0 10px; }
.wr-link { font-size: 12px; color: var(--text-3); background: rgba(255,255,255,.05);
  border-radius: 8px; padding: 7px 11px; word-break: break-all; }

.wr-months { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  justify-content: center; margin-top: 18px; }
.wr-months-label { font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.wr-foot { text-align: center; margin-top: 22px; font-size: 13.5px; }

.wr-locked { text-align: center; padding: 50px 20px; }
.wr-lock-icon { font-size: 54px; margin-bottom: 14px; }
.wr-locked h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(26px, 5vw, 40px); margin-bottom: 10px; }
.wr-locked p { color: var(--text-2); margin-bottom: 22px; }

@media (max-width: 620px) {
  .wr-big { grid-template-columns: 1fr 1fr; }
  .wr-mode-name { flex-basis: 42%; }
}

/* Einstieg zum Wrapped im Profil – auffaellig genug, dass man ihn sieht,
   ruhig genug, dass er die Statistik daneben nicht erschlaegt. */
.wrapped-teaser { display: block; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, rgba(101,36,214,.5), rgba(246,183,60,.16));
  border: 1px solid var(--border-strong); }
.wrapped-teaser:hover { border-color: var(--gold); color: inherit; }
.wt-kicker { font-family: var(--display); font-weight: 900; font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--violet); }
.wt-kicker span { color: var(--gold); }
.wt-period { font-family: var(--display); font-weight: 900; font-size: 22px;
  text-transform: uppercase; margin: 4px 0 6px; color: #fff; }
.wt-go { font-size: 12.5px; color: var(--gold); font-weight: 700; }

/* ---------- Frueher benutzte Namen ----------
   Wer jemanden unter seinem alten Namen kennt, findet ihn sonst nicht
   wieder. Der Hinweis ist bewusst leise: eine gepunktete Linie und ein
   kleines Zeichen – die Liste kommt erst beim Darueberfahren. */
/* Kein Unterstrich unter dem Namen – der Hinweis ist allein das Zeichen
   daneben, das beim Darueberfahren aufleuchtet. */
.aka-anker { position: relative; display: inline-block; cursor: help; }
.aka-anker:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.aka-zeichen { font-size: .46em; vertical-align: super; margin-left: 4px;
  color: var(--text-3); transition: color .15s; }
.aka-anker:hover .aka-zeichen, .aka-anker:focus-visible .aka-zeichen { color: var(--gold); }
.aka-popup { position: absolute; left: 0; top: calc(100% + 10px); z-index: 30;
  display: none; flex-direction: column; gap: 5px; min-width: 210px; max-width: 300px;
  background: var(--card-raised); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 11px 13px; box-shadow: 0 16px 40px rgba(0,0,0,.55);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: none; letter-spacing: normal; }
.aka-anker:hover .aka-popup, .aka-anker:focus-visible .aka-popup,
.aka-popup:hover { display: flex; }
.aka-titel { font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); }
.aka-zeile { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-weight: 400; }
.aka-zeile b { font-size: 14px; color: #fff; font-weight: 700; }
.aka-zeile i { font-size: 11.5px; color: var(--text-3); font-style: normal; white-space: nowrap; }

/* ---- Ankreuzoptionen ------------------------------------------------------
   Die nackten Browser-Kaestchen sahen im dunklen Layout wie ein Fremdkoerper
   aus, und am Handy war der Treffpunkt zwanzig Pixel gross. Jetzt ist die
   ganze Zeile die Schaltflaeche, und ob etwas an ist, sieht man am Rahmen –
   nicht nur an einem Haken von der Groesse eines Buchstabens. */
.opt { position: relative; display: flex; gap: 12px; align-items: flex-start;
  cursor: pointer; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px;
  background: var(--inset); border: 1px solid var(--border);
  transition: border-color .15s ease, background .15s ease; }
.opt:hover { border-color: var(--border-strong); }
.opt:has(input:checked) { border-color: var(--gold); background: rgba(246,183,60,.07); }
/* Das echte Kaestchen bleibt da – nur unsichtbar, und zwar genau ueber dem
   gezeichneten. Es weggelassen und mit JavaScript nachgebaut zu haben hiesse,
   Tastatur und Formularversand selbst nachzubauen; beides koennen Browser
   besser.

   Auf Groesse null geschrumpft darf es nicht werden: ein Pflichtfeld, das der
   Browser nicht anfokussieren kann, laesst das Formular still nicht abschicken
   ("An invalid form control is not focusable") – und im Checkout stuende man
   dann vor einer Schaltflaeche, die einfach nichts tut. */
.opt input { position: absolute; left: 14px; top: 13px; width: 20px; height: 20px;
  margin: 0; opacity: 0; cursor: pointer; }
.opt .box { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  border: 2px solid var(--border-strong); display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease; }
.opt .box::after { content: "✓"; font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--on-gold); opacity: 0; transform: scale(.5);
  transition: opacity .15s ease, transform .15s ease; }
.opt input:checked ~ .box { background: var(--gold); border-color: var(--gold); }
.opt input:checked ~ .box::after { opacity: 1; transform: scale(1); }
/* Wer mit der Tastatur bedient, muss sehen wo er ist – sonst waere das
   versteckte Kaestchen schlicht unauffindbar. */
.opt input:focus-visible ~ .box { outline: 2px solid var(--violet); outline-offset: 2px; }
.opt .txt { min-width: 0; }
.opt .txt b { display: block; font-size: 14px; margin-bottom: 2px; }
.opt .txt .meta { line-height: 1.45; }

/* ---- QR-Code ------------------------------------------------------------
   Der Code kommt mit fester Modulgroesse aus dem Erzeuger; wie gross er auf
   der Seite erscheint, entscheidet erst das hier. Ueber die viewBox skaliert
   er verlustfrei, und crispEdges haelt die Kanten scharf – ein Bild waere an
   dieser Stelle unscharf geworden. Weiss hinterlegt, weil Scanner auf dunklem
   Grund haeufig aussteigen. */
.qr { display: inline-block; background: #fff; padding: 9px; border-radius: 10px;
  line-height: 0; width: 168px; max-width: 100%; }
.qr svg { display: block; width: 100%; height: auto; }

/* Zustimmungen im Checkout: derselbe Baustein, nur mit Fliesstext statt
   Ueberschrift – hier steht ein Satz mit Links darin, keine Option mit
   Erklaerung darunter. */
.opt.consent { align-items: center; }
.opt.consent .txt { font-size: 13px; color: var(--text-2); line-height: 1.5;
  text-transform: none; letter-spacing: 0; font-weight: 400; }
.opt.consent .txt a { color: var(--violet); text-decoration: underline; }

/* ---- Benutzerliste im Admin ---------------------------------------------
   Vorher eine Flex-Zeile mit vier Formularen darin: je nach Namenslaenge
   rutschte mal die Rolle nach rechts, mal das Abzeichen in die naechste
   Zeile, und die Abzeichen des Benutzers landeten als eigener Streifen
   darunter. Bei zwanzig Mitgliedern sah keine Zeile aus wie die andere.

   Jetzt feste Spalten: Person, Rolle, Abzeichen, Schattenbann. Was in einer
   Spalte steht, steht in jeder Zeile an derselben Stelle. */
.userrow { display: grid; gap: 10px 14px; align-items: center;
  grid-template-columns: minmax(190px, 1.7fr) auto auto auto;
  padding: 11px 0; border-bottom: 1px solid var(--border); }
.userrow:last-child { border-bottom: none; }
.userrow form { display: flex; gap: 7px; align-items: center; margin: 0; }
.userrow select { min-width: 130px; }
.userrow .person { display: flex; gap: 10px; align-items: center; min-width: 0; }
/* Name, Adresse und Abzeichen gehoeren zusammen – also untereinander in
   dieselbe Spalte, nicht als loser Streifen unter der ganzen Zeile. */
.userrow .person .wer { min-width: 0; }
.userrow .person .wer b { display: block; line-height: 1.3; }
.userrow .person .wer .meta { display: block; font-size: 12px; }
.userrow .person .wer .abzeichen { margin-top: 3px; font-size: 13px; letter-spacing: 2px; }

/* Schmaler: erst die Aktionen unter die Person, dann alles untereinander. */
@media (max-width: 1150px) {
  .userrow { grid-template-columns: 1fr 1fr; }
  .userrow .person { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .userrow { grid-template-columns: 1fr; }
  .userrow select { flex: 1; min-width: 0; }
}

/* ---- Funktionsliste im Serverportal --------------------------------------
   Fünfundzwanzig Erklärungen untereinander liest niemand. Sichtbar ist nur
   der Titel mit seinem Kästchen; Erklärung und Befehle klappen auf. Der
   Aufklapp-Knopf steht bewusst ausserhalb des <label> – innen würde jeder
   Klick darauf das Kästchen mit umlegen. */
.fitem { margin-bottom: 8px; }
.fkopf { display: flex; align-items: stretch; gap: 8px; }
.fkopf .opt { flex: 1; margin: 0; }
.fmehr { flex: none; width: 38px; border-radius: 10px; cursor: pointer;
  background: var(--inset); border: 1px solid var(--border); color: var(--text-2);
  font-size: 13px; line-height: 1; transition: border-color .15s ease, color .15s ease; }
.fmehr:hover { border-color: var(--border-strong); color: var(--text); }
.fdetails { padding: 10px 14px 12px 46px; font-size: 13px; color: var(--text-2);
  line-height: 1.55; }
.fdetails p { margin: 0 0 8px; }
/* Befehle als eigene Zeile: sie sind das, wonach man im Zweifel sucht. */
.fcmds { display: flex; flex-wrap: wrap; gap: 6px; }
.fcmds code { background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; font-size: 12.5px; color: var(--gold); user-select: all; }
.fdetails .fbraucht { margin: 9px 0 0; color: var(--text-3); font-size: 12.5px; }

/* ---- Rang-Editor im Serverportal -----------------------------------------
   Name, Farbe, Mitglieder in einer Zeile; die Rechte darunter als kleine
   Marken. Bei zwanzig Kästchen untereinander sieht man nicht mehr, was
   gesetzt ist – als Marke ist es auf einen Blick zu erkennen. */
.rangzeile { border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  margin-bottom: 10px; background: var(--inset); }
.rangrechte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rchip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; line-height: 1.2;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-2);
  text-transform: none; letter-spacing: 0; font-weight: 500; margin: 0;
  transition: border-color .15s ease, background .15s ease, color .15s ease; }
.rchip:hover { border-color: var(--border-strong); }
.rchip input { width: 13px; height: 13px; margin: 0; accent-color: var(--gold); }
.rchip.an { border-color: var(--gold); background: rgba(246,183,60,.1); color: var(--text); }

/* ---- Farbwahl für Ränge --------------------------------------------------
   Sechzehn Felder statt einer Auswahlliste: eine Farbe will man sehen, nicht
   lesen. Das echte Optionsfeld liegt unsichtbar darunter – so bleiben
   Tastatur und Formularversand die des Browsers. */
.farbfelder { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  width: 168px; }
.farbfeld { position: relative; display: block; margin: 0; cursor: pointer;
  height: 18px; border-radius: 5px; background: var(--f);
  border: 2px solid transparent; transition: transform .1s ease, border-color .1s ease; }
.farbfeld:hover { transform: scale(1.12); }
.farbfeld.an { border-color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55); }
.farbfeld input { position: absolute; inset: 0; opacity: 0; margin: 0;
  width: 100%; height: 100%; cursor: pointer; }
.farbfeld:focus-within { outline: 2px solid var(--violet); outline-offset: 2px; }

/* ---- Variantenbilder im Produkteditor ------------------------------------
   Ein geerbtes Bild (vom Produkt) wird blass gezeigt: so sieht man auf einen
   Blick, welche Variante ein eigenes hat und welche nicht. */
.vbild { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 0 14px; border-bottom: 1px solid var(--border); margin: 0 0 10px; }
.vbild:last-of-type { border-bottom: none; }
.vbild-vorschau { width: 46px; height: 46px; object-fit: contain; flex: none;
  background: var(--inset); border-radius: 8px; border: 1px solid var(--border); }
.vbild-vorschau.geerbt { opacity: .45; }

/* Produktbild im Editor – wie die Variantenzeile, nur eine Stufe grösser. */
.pbild { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.pbild-vorschau { width: 58px; height: 58px; object-fit: contain; flex: none;
  background: var(--inset); border-radius: 8px; border: 1px solid var(--border); }

/* ---- Kopf einer Serverkarte ----------------------------------------------
   Name und Zustand auf einer Grundlinie. Vorher stand der Name in einem
   zweizeiligen Block (Name + Vorlage darunter) und das Abzeichen richtete
   sich an dessen Mitte aus – es hing damit schief unter dem Namen. */
.serverkopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.servername { font-family: var(--display); font-size: 22px; text-transform: uppercase;
  line-height: 1.1; }
.serverkopf .badge { align-self: center; }

/* ---- Hinweiskasten auf der Serverkarte -----------------------------------
   Gold heisst: es eilt, aber es ist noch zu retten. Rot heisst: vorbei.
   Der Unterschied muss ohne Lesen erkennbar sein. */
.hinweis { border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--border); background: var(--inset); }
.hinweis b { display: block; margin-bottom: 6px; font-size: 14.5px; }
.hinweis p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.hinweis p:last-child { margin-bottom: 0; }
.hinweis.gold { border-color: var(--gold); background: rgba(246,183,60,.08); }
.hinweis.gold b { color: var(--gold); }
.hinweis.rot { border-color: var(--red); background: rgba(255,77,94,.08); }
.hinweis.rot b { color: var(--red); }