/* ═══════════════════════════════════════════════════════════════
   ArcanaTerra Forum – Design im Stil der Hauptseite
   Token-System gespiegelt aus arcanaterra.de
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg0: #0a0810;
  --bg1: #0e0b18;
  --bg2: #130f20;
  --bg3: #171c2c;
  --accent: #c084fc;
  --accent2: #a78bfa;
  --teal: #4dd0c4;
  --teal-soft: #6ee1d6;
  --danger: #ff6b86;
  --gold: #e8c179;
  --gold-bright: #f5d489;
  --text: #eef2ff;
  --muted: #8b95b5;
  --line: rgba(168,139,250,.18);
  --radius: 14px;
  --shadow: 0 20px 50px rgba(8,4,16,.6);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  background: var(--bg0);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold); }
ul { list-style: none; }
code { font-family: 'Consolas', 'Courier New', monospace; background: rgba(6,10,18,.8); padding: .1rem .4rem; border-radius: 5px; border: 1px solid var(--line); color: var(--teal-soft); font-size: .88em; }

/* Particles */
#particles-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(168,139,250,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(232,193,121,.05) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(77,208,196,.04) 0%, transparent 65%);
}

/* ═══ NAVBAR ═══ */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,6,16,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-inner {
  width: min(1160px, calc(100% - 2rem));
  margin: 0 auto; min-height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.nav-brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.05rem;
  color: var(--text);
}
.brand-arcana { color: var(--gold); }
.brand-terra  { color: var(--teal); }
.brand-sub    { color: var(--muted); font-weight: 500; font-size: .85rem; margin-left: .2rem; }
.brand-icon {
  width: 40px; height: 40px;
  background: url('logo.png') center/contain no-repeat;
  filter:
    drop-shadow(0 0 6px rgba(232,193,121,.35))
    drop-shadow(0 0 12px rgba(77,208,196,.25));
  flex-shrink: 0;
}
.nav-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.nav-mainlink {
  font-size: .82rem; font-weight: 600; color: var(--muted);
  padding: .4rem .7rem;
}
.nav-mainlink:hover { color: var(--text); }
.nav-user {
  display: flex; align-items: center; gap: .55rem;
  background: rgba(192,132,252,.06);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: .3rem .35rem .3rem .35rem;
}
.nav-avatar { width: 28px; height: 28px; border-radius: 50%; image-rendering: pixelated; border: 1px solid var(--line); }
.nav-username { font-size: .85rem; font-weight: 700; color: var(--text); padding-right: .2rem; }
.nav-logout {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; color: var(--muted);
  border: 1px solid transparent;
}
.nav-logout:hover { color: var(--danger); border-color: rgba(255,107,134,.3); }
.btn-nav-login, .btn-nav-register {
  padding: .42rem 1rem; font: 600 .84rem 'Inter', sans-serif;
  border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center;
}
.btn-nav-login {
  background: linear-gradient(135deg,#2d1a4d,#1a0f30);
  border: 1px solid rgba(192,132,252,.25); color: var(--accent);
}
.btn-nav-login:hover { background: rgba(192,132,252,.1); color: var(--accent); }
.btn-nav-register {
  background: linear-gradient(130deg, #7c3aed, #c084fc); color: #fff; border: none;
  box-shadow: 0 4px 16px rgba(124,58,237,.3);
}
.btn-nav-register:hover { transform: translateY(-1px); color: #fff; }

/* ═══ MAIN ═══ */
main.forum-main {
  position: relative; z-index: 1;
  padding: 2rem 0 4rem;
}
.container { width: min(1160px, calc(100% - 2rem)); margin: 0 auto; }

/* ═══ Hero / Stats ═══ */
.forum-hero { text-align: center; padding: 1rem 0 2rem; }
.eye {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: .6rem;
}
.ftitle {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  color: var(--gold-bright);
  margin-bottom: .7rem;
  text-shadow: 0 0 20px rgba(232,193,121,.35);
}
.fsub { font-size: .95rem; color: var(--muted); }

.forum-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .7rem; margin: 1.5rem 0 2.5rem;
  background: rgba(16,8,26,.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  backdrop-filter: blur(8px);
}
.fstat { text-align: center; padding: .5rem .8rem; border-right: 1px solid var(--line); }
.fstat:last-child { border-right: none; }
.fstat-val { display: block; font-family: 'Press Start 2P', monospace; font-size: 1rem; color: var(--gold); margin-bottom: .3rem; }
.fstat-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.section-h {
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem; color: var(--teal);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--line);
}
.section-h i { color: var(--gold); }

/* ═══ Kategorie-Liste ═══ */
.cat-list { display: grid; gap: .6rem; }
.cat-card {
  display: grid;
  grid-template-columns: 60px 1fr 220px;
  gap: 1.2rem; align-items: center;
  background: linear-gradient(160deg, rgba(22,14,38,.92), rgba(12,6,22,.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  color: var(--text); transition: .15s;
  position: relative; overflow: hidden;
}
.cat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--accent), var(--teal), transparent);
  opacity: 0; transition: .15s;
}
.cat-card:hover { transform: translateX(2px); border-color: rgba(232,193,121,.3); }
.cat-card:hover::before { opacity: 1; }
.cat-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(8,16,20,.92); border: 1px solid rgba(77,208,196,.22);
  border-radius: 12px; color: var(--teal); font-size: 1.5rem;
}
.cat-info h3 { font-size: 1rem; font-weight: 700; color: var(--gold-bright); margin-bottom: .25rem; }
.cat-info p { font-size: .85rem; color: var(--muted); line-height: 1.55; margin-bottom: .4rem; }
.cat-meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--muted); }
.cat-last { text-align: right; font-size: .82rem; }
.cat-last-title { color: var(--text); margin-bottom: .25rem; font-weight: 600; }
.cat-last-meta { display: flex; flex-direction: column; gap: .15rem; color: var(--muted); font-size: .76rem; }
.cat-last-empty { color: var(--muted); font-style: italic; font-size: .8rem; }

/* ═══ Recent Activity ═══ */
.recent-list { display: grid; gap: .4rem; }
.recent-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: rgba(16,10,28,.88);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem 1rem;
  color: var(--text);
}
.recent-row:hover { border-color: rgba(232,193,121,.3); color: var(--text); }
.recent-title { font-weight: 600; color: var(--gold-bright); }
.recent-meta { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.recent-stats { display: flex; gap: 1rem; font-size: .78rem; color: var(--muted); flex-shrink: 0; }

/* ═══ Breadcrumb ═══ */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--muted);
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--gold); }
.bc-sep { color: var(--line); }
.breadcrumb > span:last-child { color: var(--text); }

/* ═══ Kategorie-Header ═══ */
.cat-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.cat-header h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(.95rem, 2vw, 1.3rem);
  color: var(--gold-bright);
  margin-bottom: .35rem;
}
.cat-header h1 i { color: var(--teal); margin-right: .3rem; }
.cat-desc { color: var(--muted); font-size: .9rem; }

/* ═══ Thread-Liste ═══ */
.thread-list { display: grid; gap: .4rem; }
.thread-row {
  display: grid;
  grid-template-columns: 48px 1fr 80px 130px;
  gap: 1rem; align-items: center;
  background: linear-gradient(160deg, rgba(22,14,38,.88), rgba(12,6,22,.94));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .75rem 1rem;
  color: var(--text);
}
.thread-row.is-pinned { border-color: rgba(232,193,121,.35); background: linear-gradient(160deg, rgba(40,28,10,.6), rgba(20,12,30,.94)); }
.thread-row:hover { border-color: rgba(192,132,252,.35); color: var(--text); }
.thread-avatar { width: 40px; height: 40px; border-radius: 8px; image-rendering: pixelated; border: 1px solid var(--line); background: rgba(192,132,252,.05); }
.thread-title { font-size: .95rem; font-weight: 600; color: var(--gold-bright); margin-bottom: .2rem; }
.thread-meta { font-size: .78rem; color: var(--muted); }
.thread-stats { text-align: center; font-size: .8rem; color: var(--muted); }
.ts-line { padding: .1rem 0; }
.thread-last { text-align: right; font-size: .78rem; color: var(--muted); }
.tl-user { color: var(--accent); }

/* ═══ Thread-Ansicht / Posts ═══ */
.thread-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.thread-header h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(.95rem, 2.2vw, 1.4rem);
  color: var(--gold-bright);
  line-height: 1.5;
  margin-bottom: .5rem;
}
.thread-header-meta { font-size: .85rem; color: var(--muted); }

.posts-list {
  display: grid; gap: 1rem; margin-bottom: 2rem;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}
.post-card {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(160deg, rgba(22,14,38,.9), rgba(12,6,22,.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.post-card.is-first { border-color: rgba(232,193,121,.25); }
.post-card.is-first::before { content: ''; }
.post-author {
  padding: 1.3rem 1.2rem;
  background: rgba(6,8,16,.5);
  border-right: 1px solid var(--line);
  text-align: center;
}
.post-avatar {
  width: 80px; height: 80px; margin: 0 auto .7rem;
  border-radius: 12px; image-rendering: pixelated;
  border: 1px solid var(--line);
  display: block;
}
.post-username { font-size: 1rem; font-weight: 700; color: var(--gold-bright); margin-bottom: .35rem; }
.post-author-meta { margin-top: .8rem; font-size: .76rem; color: var(--muted); display: flex; flex-direction: column; gap: .2rem; }
.post-body-wrap {
  padding: 1.2rem 1.4rem;
  min-width: 0;          /* erlaubt Grid-Item zu schrumpfen statt überzulaufen */
  overflow-wrap: anywhere; /* lange URLs/Wörter umbrechen */
  /* explizit in 2. Grid-Column platzieren */
  grid-column: 2 / 3;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.post-author { grid-column: 1 / 2; }
.post-meta, .post-body, .post-foot, .post-attachments {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.post-meta {
  font-size: .8rem; color: var(--muted);
  padding-bottom: .65rem;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 1rem;
}
.post-edited { color: var(--muted); font-style: italic; }
.post-body {
  font-size: .95rem; color: var(--text); line-height: 1.75;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  display: block;
  width: 100%;
  max-width: 100%;
}
.post-body a { color: var(--accent); text-decoration: underline; }
.post-body a:hover { color: var(--gold); }

.role-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 700;
  border-radius: 99px; padding: .15rem .55rem;
  border: 1px solid;
}
.role-admin { color: var(--gold); border-color: rgba(232,193,121,.3); background: rgba(20,15,3,.6); }
.role-mod   { color: var(--accent2); border-color: rgba(167,139,250,.3); background: rgba(16,8,30,.6); }

/* ═══ Reply-Form ═══ */
.reply-form, .form-card {
  background: linear-gradient(160deg, rgba(22,14,38,.92), rgba(12,6,22,.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin-top: 1rem;
}
.reply-form h3 {
  font-size: 1rem; color: var(--teal);
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.form-card h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(.9rem, 2vw, 1.2rem);
  color: var(--gold-bright);
  margin-bottom: 1.2rem;
}
.form-card label, .auth-card label, .reply-form label {
  display: block; font-size: .75rem; font-weight: 700;
  color: var(--muted); letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: .35rem; margin-top: .8rem;
}
.form-card input, .form-card textarea,
.auth-card input,
.reply-form textarea {
  width: 100%;
  background: rgba(8,4,16,.95);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem .95rem;
  color: var(--text);
  font: 400 .92rem 'Inter', sans-serif;
  outline: none; transition: .15s;
  resize: vertical;
}
.form-card input:focus, .form-card textarea:focus,
.auth-card input:focus,
.reply-form textarea:focus {
  border-color: rgba(232,193,121,.45);
  box-shadow: 0 0 0 3px rgba(232,193,121,.08);
}
.opt { color: var(--muted); font-weight: 500; font-size: .75rem; }
.form-hint { display: block; font-size: .76rem; color: var(--muted); margin-top: .3rem; }
.form-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap;
}
.form-row .form-hint { margin: 0; }

/* ═══ Auth-Karten (Login / Register) ═══ */
.auth-card {
  width: min(440px, 100%); margin: 1rem auto 0;
  background: linear-gradient(160deg, rgba(22,14,38,.96), rgba(12,6,22,.98));
  border: 1px solid rgba(232,193,121,.25);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
}
.auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--accent), var(--teal), transparent);
}
.auth-icon {
  width: 64px; height: 64px; margin: 0 auto 1.2rem;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 1.5rem;
  color: var(--gold);
  background: rgba(232,193,121,.08);
  border: 1px solid rgba(232,193,121,.3);
  box-shadow: 0 0 24px rgba(232,193,121,.18);
}
.auth-card h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem; color: var(--gold);
  margin-bottom: .55rem;
}
.auth-sub { color: var(--muted); margin-bottom: 1.4rem; font-size: .87rem; }
.auth-card form { text-align: left; }
.auth-card label:first-of-type { margin-top: 0; }
.auth-submit { width: 100%; justify-content: center; margin-top: 1.2rem; }
.auth-foot { margin-top: 1.4rem; font-size: .87rem; color: var(--muted); }
.auth-foot a { color: var(--gold); font-weight: 700; }

/* ═══ Buttons ═══ */
.btn-prim, .btn-sec {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .65rem 1.3rem;
  font: 700 .9rem 'Inter', sans-serif;
  border-radius: 10px; cursor: pointer; transition: .15s;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-prim {
  background: linear-gradient(130deg, #7c3aed, #c084fc);
  color: #fff; border: none;
  box-shadow: 0 4px 16px rgba(124,58,237,.3);
}
.btn-prim:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124,58,237,.45); color: #fff; }
.btn-sec {
  background: transparent; color: var(--text);
  border: 1px solid var(--line);
}
.btn-sec:hover { background: rgba(192,132,252,.06); border-color: rgba(255,255,255,.32); color: var(--text); }

/* ═══ Pagination ═══ */
.pagination {
  display: flex; gap: .3rem; justify-content: center;
  margin-top: 2rem; flex-wrap: wrap;
}
.pagination a {
  padding: .4rem .8rem;
  background: rgba(16,10,28,.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted); font-weight: 600; font-size: .85rem;
}
.pagination a:hover { color: var(--gold); border-color: rgba(232,193,121,.35); }
.pagination a.is-active {
  color: var(--gold); border-color: var(--gold);
  background: rgba(232,193,121,.08);
}

/* ═══ Empty / Locked / CTA / Flash ═══ */
.empty-state, .locked-notice, .login-cta {
  text-align: center; padding: 2rem 1rem;
  background: rgba(16,10,28,.5);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}
.empty-state i { font-size: 2rem; color: var(--muted); opacity: .5; margin-bottom: .7rem; display: block; }
.locked-notice {
  border-color: rgba(232,193,121,.25);
  color: var(--gold);
  background: rgba(20,15,3,.5);
}
.locked-notice i { margin-right: .4rem; }
.login-cta { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.login-cta p { color: var(--text); font-weight: 600; }
.login-cta a + a { margin-top: 0; }
.login-cta { gap: .5rem; }
.login-cta > a { width: auto; }

.flash {
  padding: .8rem 1.1rem;
  border-radius: 10px;
  font-size: .9rem;
  margin-bottom: 1.2rem;
  border: 1px solid;
}
.flash-success {
  color: var(--teal); background: rgba(77,208,196,.08); border-color: rgba(77,208,196,.3);
}
.flash-error {
  color: var(--danger); background: rgba(255,107,134,.08); border-color: rgba(255,107,134,.3);
}
.flash-info {
  color: var(--accent); background: rgba(192,132,252,.08); border-color: rgba(192,132,252,.3);
}
.flash-warn {
  color: var(--gold); background: rgba(232,193,121,.08); border-color: rgba(232,193,121,.3);
}
.flash-warn a { color: var(--gold-bright); }

/* ═══ Gefahrenzone (Account-Löschen) ═══ */
.danger-zone {
  margin-top: 1.4rem;
  background: linear-gradient(160deg, rgba(40,8,12,.6), rgba(20,4,8,.95));
  border: 1px solid rgba(255,107,134,.3);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  position: relative; overflow: hidden;
}
.danger-zone::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--danger), transparent);
}
.danger-zone h3 {
  font-size: 1rem; color: var(--danger);
  margin-bottom: .55rem;
}
.danger-zone p { color: var(--muted); font-size: .9rem; }

.danger-card {
  background: linear-gradient(160deg, rgba(40,8,12,.7), rgba(20,4,8,.97));
  border: 1px solid rgba(255,107,134,.35);
  border-radius: var(--radius);
  padding: 2rem;
  margin-top: 1rem;
  position: relative; overflow: hidden;
  box-shadow: 0 16px 50px rgba(80,0,16,.3);
}
.danger-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--danger), #ff8aa0, var(--danger), transparent);
}
.danger-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.danger-head i { font-size: 1.6rem; color: var(--danger); }
.danger-head h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem; color: var(--danger);
  margin: 0;
}
.danger-list { list-style: none; padding: 0; margin: 1rem 0; }
.danger-list li {
  padding: .6rem 0; border-bottom: 1px solid rgba(255,107,134,.15);
  font-size: .9rem; color: var(--text);
}
.danger-list li:last-child { border-bottom: none; }
.danger-list li i {
  width: 24px; color: var(--danger); margin-right: .5rem;
}
.danger-list strong { color: var(--gold-bright); }
.danger-list em { color: var(--accent); font-style: normal; }

.danger-check {
  display: flex; gap: .65rem; align-items: flex-start;
  margin-top: 1.2rem;
  font-size: .88rem; color: var(--text); font-weight: 400;
  text-transform: none; letter-spacing: 0;
  cursor: pointer;
}
.danger-check input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--danger);
  flex-shrink: 0; margin-top: .15rem;
}

.btn-danger-prim {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .65rem 1.3rem;
  font: 700 .9rem 'Inter', sans-serif;
  background: linear-gradient(130deg, #c84a3a, var(--danger));
  color: #fff; border: none; border-radius: 10px;
  cursor: pointer; transition: .15s;
  box-shadow: 0 4px 16px rgba(255,107,134,.25);
  text-decoration: none;
}
.btn-danger-prim:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,107,134,.4);
  color: #fff;
}

/* ═══ Avatar-Edit ═══ */
.avatar-edit {
  display: flex; align-items: center; gap: 1.2rem;
  background: rgba(8,4,16,.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: .8rem;
  flex-wrap: wrap;
}
.avatar-preview {
  width: 96px; height: 96px;
  border-radius: 12px;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  background: rgba(192,132,252,.05);
  flex-shrink: 0;
}
.avatar-edit-info {
  flex: 1; min-width: 200px;
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
}
.avatar-edit-info input[type="file"] {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.avatar-edit-info label.btn-sec { padding: .55rem 1.1rem; font-size: .85rem; }
.avatar-edit-info .btn-icon {
  width: auto; padding: .4rem .8rem; font: 600 .8rem 'Inter', sans-serif;
}

/* ═══ Install-Box ═══ */
.install-box {
  background: linear-gradient(160deg, rgba(22,14,38,.96), rgba(12,6,22,.98));
  border: 1px solid rgba(232,193,121,.3);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative; overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
}
.install-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--accent), var(--teal), transparent);
}

/* ═══ Footer ═══ */
.forum-footer {
  background: #080612;
  border-top: 1px solid var(--line);
  padding: 1.6rem 0;
  text-align: center;
  color: var(--muted);
  font-size: .82rem;
  position: relative; z-index: 1;
}
.forum-footer a { color: var(--muted); }
.forum-footer a:hover { color: var(--gold); }
.footer-small { margin-top: .4rem; font-size: .72rem; color: rgba(139,149,181,.5); }
.footer-legal { margin-top: .35rem; font-size: .8rem; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--gold); }

/* ═══ COOKIE / CONSENT BANNER ═══ */
#cookie-banner {
  position: fixed; bottom: 1.2rem; left: 1.2rem; right: 1.2rem;
  z-index: 9000;
  background: linear-gradient(135deg, rgba(20,10,36,.97), rgba(12,6,22,.99));
  border: 1px solid rgba(232,193,121,.35);
  border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 40px rgba(232,193,121,.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: cookieSlide .4s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
#cookie-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--accent), var(--teal), transparent);
}
@keyframes cookieSlide {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-content {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.1rem 1.4rem;
  flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto;
}
.cookie-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(232,193,121,.1);
  border: 1px solid rgba(232,193,121,.3);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.3rem;
  flex-shrink: 0;
}
.cookie-text { flex: 1; min-width: 240px; }
.cookie-text strong {
  display: block; color: var(--gold-bright);
  font-size: .92rem; margin-bottom: .25rem;
}
.cookie-text p {
  font-size: .82rem; color: var(--muted);
  line-height: 1.55;
}
.cookie-text a { color: var(--accent); text-decoration: underline; }
.cookie-text a:hover { color: var(--gold); }
.cookie-actions { flex-shrink: 0; }
.btn-cookie-accept {
  background: linear-gradient(130deg, var(--gold), #f5d489);
  color: #1a0835; border: none;
  padding: .65rem 1.4rem;
  font: 700 .88rem 'Inter', sans-serif;
  border-radius: 10px; cursor: pointer; transition: .15s;
  display: inline-flex; align-items: center;
  box-shadow: 0 4px 16px rgba(232,193,121,.3);
}
.btn-cookie-accept:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,193,121,.45); }

@media (max-width: 600px) {
  #cookie-banner { left: .8rem; right: .8rem; bottom: .8rem; }
  .cookie-content { padding: .9rem 1rem; gap: .8rem; }
  .cookie-icon { width: 36px; height: 36px; font-size: 1rem; }
  .btn-cookie-accept { width: 100%; justify-content: center; }
}

/* ═══ Post-Aktionen (Edit/Delete) ═══ */
.post-actions {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .3rem;
}
.post-action {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(192,132,252,.06);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer; transition: .12s;
  font-size: .82rem;
}
.post-action:hover { color: var(--gold); border-color: rgba(232,193,121,.4); }
.post-action-danger:hover { color: var(--danger); border-color: rgba(255,107,134,.4); background: rgba(255,107,134,.06); }
.post-action[type='submit'], button.post-action { padding: 0; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.post-author-link { color: inherit; text-decoration: none; display: block; }
.post-author-link:hover { color: var(--gold); }

/* ═══ Mod-Toolbar im Thread ═══ */
.mod-toolbar {
  margin-top: 1rem;
  padding: .7rem .9rem;
  background: rgba(232,193,121,.06);
  border: 1px solid rgba(232,193,121,.25);
  border-radius: 10px;
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
}
.mod-label {
  font-size: .82rem; font-weight: 700; color: var(--gold);
  margin-right: .3rem;
}
.btn-mod {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .75rem;
  font: 600 .78rem 'Inter', sans-serif;
  background: rgba(8,4,16,.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer; transition: .12s;
}
.btn-mod:hover { border-color: rgba(232,193,121,.4); color: var(--gold); }
.btn-mod.btn-danger:hover { border-color: rgba(255,107,134,.4); color: var(--danger); background: rgba(255,107,134,.06); }

/* ═══ Markdown-Rendering in Posts ═══ */
.post-body .md-h { font-family: 'Inter', sans-serif; color: var(--gold-bright); margin: 1rem 0 .5rem; font-size: 1.05rem; }
.post-body .md-list { margin: .7rem 0; padding-left: 1.4rem; list-style: disc; }
.post-body .md-list li::marker { color: var(--accent); }
.post-body .md-list li { margin-bottom: .3rem; }
.post-body .md-quote {
  border-left: 3px solid var(--accent);
  padding: .4rem .9rem; margin: .7rem 0;
  background: rgba(192,132,252,.05);
  color: var(--text); font-style: italic;
}
.post-body .md-inline {
  background: rgba(6,10,18,.85); color: var(--teal-soft);
  padding: .1rem .4rem; border-radius: 5px;
  border: 1px solid var(--line); font-size: .88em;
}
.post-body .md-pre {
  background: rgba(6,10,18,.92);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .8rem 1rem; margin: .8rem 0;
  overflow-x: auto;
}
.post-body .md-pre code {
  background: none; border: none; padding: 0; color: var(--teal-soft);
  font-family: 'Consolas','Courier New',monospace; font-size: .85em;
}
.post-body strong { color: var(--gold-bright); }

/* ═══ Profil-Seite ═══ */
.profile-card {
  display: flex; align-items: center; gap: 2rem;
  background: linear-gradient(160deg, rgba(22,14,38,.92), rgba(12,6,22,.96));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; margin-bottom: 1.4rem;
  position: relative; overflow: hidden;
  flex-wrap: wrap;
}
.profile-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--accent), var(--teal), transparent);
}
.profile-avatar {
  width: 128px; height: 128px;
  border-radius: 16px; image-rendering: pixelated;
  border: 1px solid var(--line);
  box-shadow: 0 0 24px rgba(232,193,121,.15);
  background: rgba(192,132,252,.05);
}
.profile-info { flex: 1; min-width: 240px; }
.profile-info h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.1rem; color: var(--gold-bright);
  margin-bottom: .55rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.profile-mc { color: var(--muted); margin-bottom: 1rem; font-size: .9rem; }
.profile-mc i { color: var(--teal); }
.profile-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .8rem; margin-bottom: 0;
}
.pstat {
  background: rgba(8,4,16,.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem .5rem; text-align: center;
}
.pstat-val { display: block; font-family: 'Press Start 2P', monospace; font-size: 1rem; color: var(--gold); margin-bottom: .25rem; }
.pstat-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.profile-bio {
  background: rgba(16,10,28,.7);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin-bottom: 1.4rem;
}
.profile-bio h3 {
  font-size: .95rem; color: var(--teal);
  margin-bottom: .8rem;
}
.bio-content { color: var(--text); font-size: .92rem; line-height: 1.7; }
.bio-content a { color: var(--accent); }

.profile-recent {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.recent-col h3 {
  font-size: .92rem; color: var(--teal);
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.recent-col h3 i { color: var(--gold); }
.recent-empty {
  color: var(--muted); font-style: italic;
  background: rgba(16,10,28,.4);
  padding: 1rem; border-radius: 10px;
  text-align: center; font-size: .87rem;
}

/* ═══ Admin-Panel ═══ */
.admin-tabs {
  display: flex; gap: .3rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line); padding-bottom: 0;
  flex-wrap: wrap;
}
.admin-tabs a {
  padding: .65rem 1.2rem;
  color: var(--muted); font-weight: 600; font-size: .88rem;
  border-bottom: 3px solid transparent;
  transition: .12s;
}
.admin-tabs a:hover { color: var(--text); }
.admin-tabs a.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.admin-table {
  background: rgba(16,10,28,.88);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow-x: auto;
}
.admin-table table {
  width: 100%; border-collapse: collapse;
}
.admin-table th, .admin-table td {
  text-align: left; padding: .65rem .85rem;
  border-bottom: 1px solid var(--line);
  font-size: .85rem; vertical-align: middle;
}
.admin-table th {
  color: var(--muted); font-weight: 700;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(8,4,16,.5);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(192,132,252,.04); }
.admin-actions { white-space: nowrap; }

.btn-icon {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  background: rgba(8,4,16,.85);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer; transition: .12s;
  margin-right: .2rem;
  font-size: .82rem;
}
.btn-icon:hover { color: var(--gold); border-color: rgba(232,193,121,.4); }
.btn-icon.btn-danger:hover { color: var(--danger); border-color: rgba(255,107,134,.4); background: rgba(255,107,134,.06); }

.role-select {
  background: rgba(8,4,16,.85);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: .3rem .55rem;
  color: var(--text);
  font: 600 .8rem 'Inter', sans-serif;
  cursor: pointer;
  margin-right: .3rem;
}
.role-select option { background: #110a20; }

/* ═══ Nav-Suche ═══ */
.nav-search {
  display: flex; align-items: center;
  background: rgba(8,4,16,.85);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .3rem .7rem;
  gap: .45rem;
  transition: .15s;
  max-width: 220px;
}
.nav-search:focus-within { border-color: rgba(232,193,121,.4); }
.nav-search i { color: var(--muted); font-size: .82rem; }
.nav-search input {
  border: none; background: transparent;
  color: var(--text); font: 400 .85rem 'Inter', sans-serif;
  outline: none; width: 100%;
}
.nav-search input::placeholder { color: var(--muted); }

/* ═══ Notification-Glocke ═══ */
.nav-bell {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(192,132,252,.06);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: .15s;
}
.nav-bell:hover { color: var(--accent); border-color: rgba(192,132,252,.35); }
.nav-bell.has-unread { color: var(--gold); border-color: rgba(232,193,121,.4); }
.nav-bell.has-unread i { animation: bellShake 2s ease infinite; }
@keyframes bellShake {
  0%, 90%, 100% { transform: rotate(0); }
  92%   { transform: rotate(-14deg); }
  94%   { transform: rotate(12deg); }
  96%   { transform: rotate(-8deg); }
  98%   { transform: rotate(6deg); }
}
.bell-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--danger);
  color: #fff;
  font-size: .65rem; font-weight: 700;
  min-width: 18px; height: 18px;
  padding: 0 .35rem;
  border-radius: 99px;
  display: grid; place-items: center;
  border: 2px solid var(--bg0);
}

/* ═══ Notifications-Liste ═══ */
.notif-list { display: grid; gap: .4rem; }
.notif-row {
  display: flex; align-items: center; gap: .9rem;
  background: rgba(16,10,28,.88);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .75rem 1rem;
  color: var(--text); transition: .15s;
}
.notif-row.is-unread {
  background: linear-gradient(160deg, rgba(40,28,10,.55), rgba(20,12,30,.95));
  border-color: rgba(232,193,121,.32);
}
.notif-row:hover { border-color: rgba(192,132,252,.35); color: var(--text); }
.notif-avatar {
  width: 40px; height: 40px; border-radius: 8px;
  image-rendering: pixelated; border: 1px solid var(--line);
  flex-shrink: 0;
}
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-size: .9rem; color: var(--text); }
.notif-text strong { color: var(--gold-bright); }
.notif-meta { font-size: .76rem; color: var(--muted); margin-top: .2rem; }
.notif-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(8,4,16,.6);
  border-radius: 8px;
  flex-shrink: 0;
  font-size: .9rem;
}

/* ═══ Post-Anhänge (Bilder) ═══ */
.post-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .55rem;
  margin-top: 1rem;
}
.att-tile {
  display: block;
  aspect-ratio: 4 / 3;
  background: rgba(8,4,16,.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: .15s;
  position: relative;
}
.att-tile:hover {
  border-color: rgba(232,193,121,.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.att-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.att-tile::after {
  content: '\f00e'; /* fa-search-plus */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; bottom: .5rem; right: .5rem;
  background: rgba(8,4,16,.85);
  border: 1px solid var(--line);
  color: var(--gold);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 6px;
  font-size: .82rem;
  opacity: 0; transition: .15s;
}
.att-tile:hover::after { opacity: 1; }

/* File-Input Wrap (für Bild-Upload-Buttons) */
.file-input-wrap {
  display: flex; align-items: center; gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.file-input-wrap input[type="file"] {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.file-input-wrap label.btn-sec {
  cursor: pointer;
  display: inline-flex; align-items: center;
  padding: .55rem 1.1rem;
  font-size: .85rem;
}
.file-info {
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}

/* ═══ Like-Button ═══ */
.post-foot {
  margin-top: 1.2rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: .6rem;
}
.like-form { margin: 0; }
.like-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .35rem .8rem;
  color: var(--muted);
  font: 600 .85rem 'Inter', sans-serif;
  cursor: pointer; transition: .15s;
}
.like-btn:hover { border-color: rgba(255,107,134,.4); color: var(--danger); }
.like-btn.is-liked {
  background: rgba(255,107,134,.08);
  border-color: rgba(255,107,134,.4);
  color: var(--danger);
}
.like-btn.is-static { cursor: default; }
.like-btn.is-static:hover { border-color: var(--line); color: var(--muted); }
.like-btn i { font-size: .92rem; }

.post-permalink {
  margin-left: auto;
  font-size: .8rem;
  color: var(--muted);
  padding: .3rem .55rem;
  border-radius: 6px;
}
.post-permalink:hover { color: var(--accent); background: rgba(192,132,252,.06); }

/* ═══ Suche ═══ */
.search-header {
  margin-bottom: 2rem;
}
.search-header h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.1rem; color: var(--gold-bright);
  margin-bottom: 1rem;
}
.search-form-full {
  display: flex; gap: .5rem;
  background: rgba(16,10,28,.88);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .5rem;
}
.search-form-full input {
  flex: 1;
  background: transparent;
  border: none;
  padding: .55rem .8rem;
  color: var(--text);
  font: 400 1rem 'Inter', sans-serif;
  outline: none;
}
.search-stats {
  color: var(--muted); font-size: .9rem;
  background: rgba(192,132,252,.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem 1rem;
  margin-bottom: 1.4rem;
}
.search-stats strong { color: var(--gold); }
.search-stats em { color: var(--teal); font-style: normal; }

.search-list { display: grid; gap: .4rem; }
.search-row {
  background: linear-gradient(160deg, rgba(22,14,38,.88), rgba(12,6,22,.94));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  color: var(--text);
}
.search-row:hover { border-color: rgba(232,193,121,.3); color: var(--text); }
.search-title { font-weight: 600; color: var(--gold-bright); margin-bottom: .35rem; font-size: .95rem; }
.search-snippet {
  font-size: .85rem; color: var(--text);
  background: rgba(8,4,16,.6);
  border-left: 2px solid var(--teal);
  padding: .5rem .8rem;
  margin: .4rem 0;
  border-radius: 0 6px 6px 0;
  line-height: 1.6;
}
.search-meta { font-size: .78rem; color: var(--muted); }
mark {
  background: rgba(232,193,121,.25);
  color: var(--gold-bright);
  padding: 0 .15rem;
  border-radius: 3px;
}

/* Nav: Admin-Link */
.nav-admin {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(232,193,121,.08);
  border: 1px solid rgba(232,193,121,.25);
  color: var(--gold);
  transition: .15s;
}
.nav-admin:hover { background: rgba(232,193,121,.15); color: var(--gold-bright); }

/* ═══ Responsive ═══ */
@media (max-width: 980px) {
  .forum-stats { grid-template-columns: repeat(2, 1fr); }
  .fstat:nth-child(2n) { border-right: none; }
  .cat-card { grid-template-columns: 50px 1fr; }
  .cat-last { display: none; }
  .thread-row { grid-template-columns: 40px 1fr 60px; }
  .thread-last { display: none; }
  .post-card { grid-template-columns: minmax(0, 1fr); }
  .post-author {
    display: flex; align-items: center; gap: .8rem; text-align: left;
    padding: 1rem 1.2rem; border-right: none; border-bottom: 1px solid var(--line);
    grid-column: 1 / 2;
  }
  .post-body-wrap { grid-column: 1 / 2; }
  .post-avatar { width: 48px; height: 48px; margin: 0; }
  .post-author-meta { margin-top: 0; flex-direction: row; gap: 1rem; flex-wrap: wrap; }
  .nav-mainlink { display: none; }
  .nav-username { display: none; }
  .nav-search { max-width: 140px; }
  .nav-search input::placeholder { color: transparent; }
}

@media (max-width: 600px) {
  .nav-search { display: none; }
}

@media (max-width: 520px) {
  .forum-stats { grid-template-columns: 1fr 1fr; }
  .brand-sub { display: none; }
  .breadcrumb { font-size: .78rem; }
  .thread-stats { display: none; }
  .thread-row { grid-template-columns: 40px 1fr; }
  .profile-recent { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .profile-card { flex-direction: column; text-align: center; }
  .admin-table { font-size: .8rem; }
  .admin-table th, .admin-table td { padding: .5rem .55rem; }
}

@media (max-width: 880px) {
  .profile-recent { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
}