@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito:wght@400;600;700;800;900&display=swap');
    *{box-sizing:border-box;margin:0;padding:0;}
    body{font-family:'Nunito',sans-serif;background:#0f0f1a;color:#f0f0f0;min-height:100vh;}

    /* TOPBAR */
    .topbar{background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);border-bottom:3px solid #e94560;height:68px;padding:0 28px;display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:100;box-shadow:0 4px 30px rgba(0,0,0,.5);}
    .logo{display:flex;align-items:center;gap:11px;}
    .logo-box{width:42px;height:42px;background:linear-gradient(135deg,#e94560,#ff6b35);border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',cursive;font-size:1.1rem;color:#fff;box-shadow:0 0 18px rgba(233,69,96,.5);}
    .logo-text{font-family:'Bebas Neue',cursive;font-size:1.3rem;letter-spacing:3px;color:#fff;line-height:1;}
    .logo-sub{font-size:.58rem;color:#a0a8c0;letter-spacing:2px;text-transform:uppercase;}

    /* MAIN */
    .main{padding:24px;max-width:1400px;margin:0 auto;}

    /* TOOLBAR */
    .toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
    .tb-label{font-size:.72rem;color:#4a5a7a;text-transform:uppercase;letter-spacing:1px;font-weight:700;white-space:nowrap;}
    .dropdown-wrap{position:relative;}
    .dropdown-wrap select{
      background:#1a1a2e;border:1.5px solid #2a3a5a;border-radius:10px;
      color:#f0f0f0;padding:9px 36px 9px 14px;
      font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:700;
      outline:none;cursor:pointer;transition:border-color .2s;
      appearance:none;min-width:180px;
    }
    .dropdown-wrap select:focus{border-color:#e94560;}
    .dropdown-wrap::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#4a5a7a;pointer-events:none;}
    .dropdown-wrap select option{background:#1a1a2e;}
    .tb-search{position:relative;flex:1;max-width:320px;}
    .tb-search input{width:100%;background:#1a1a2e;border:1.5px solid #2a3a5a;border-radius:10px;color:#f0f0f0;padding:9px 14px 9px 38px;font-family:'Nunito',sans-serif;font-size:.85rem;outline:none;transition:border-color .2s;}
    .tb-search input:focus{border-color:#e94560;}
    .tb-search input::placeholder{color:#3a4a6a;}
    .tb-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#4a5a7a;font-size:.9rem;}
    .tb-counts{margin-left:auto;display:flex;gap:10px;align-items:center;}
    .tb-count{background:#1a1a2e;border:1px solid #1e2d4a;border-radius:20px;padding:5px 14px;font-size:.75rem;font-weight:700;}
    .tb-count.total{color:#a0a8c0;}

    /* ── DASHBOARD TABLE ── */
    .dashboard{
      background:#1a1a2e;
      border:1px solid #1e2d4a;
      border-radius:18px;
      overflow:hidden;
    }

    /* HEADER ROW — fixiert oben */
    .dash-header{
      display:grid;
      grid-template-columns:1fr 1fr;
      background:#11111f;
      border-bottom:2px solid #1e2d4a;
      position:sticky;top:0;z-index:50;
    }
    .dash-header-cell{
      padding:14px 20px;
      display:flex;align-items:center;justify-content:space-between;
      font-family:'Bebas Neue',cursive;font-size:1.2rem;letter-spacing:3px;
    }
    .dash-header-cell.offer{
      color:#e94560;
      border-right:2px solid #1e2d4a;
    }
    .dash-header-cell.seek{color:#4ecdc4;}
    .dash-head-cnt{
      font-size:.7rem;color:#4a5a7a;
      background:#1a1a2e;border:1px solid #1e2d4a;
      border-radius:20px;padding:2px 10px;font-weight:700;
      font-family:'Nunito',sans-serif;
    }

    /* BODY — gemeinsamer Scroll */
    .dash-body{
      overflow-y:auto;
      max-height:calc(100vh - 220px);
    }
    .dash-body::-webkit-scrollbar{width:5px;}
    .dash-body::-webkit-scrollbar-track{background:transparent;}
    .dash-body::-webkit-scrollbar-thumb{background:#2a3a5a;border-radius:4px;}
    .dash-body::-webkit-scrollbar-thumb:hover{background:#e94560;}

    /* JEDE ZEILE = 1 Inserat, 2 Hälften nebeneinander */
    .ins-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      border-bottom:1px solid #111120;
      transition:background .18s;
      cursor:pointer;
      animation:fadeIn .22s ease both;
    }
    .ins-row:last-child{border-bottom:none;}
    .ins-row:hover{background:rgba(255,255,255,.025);}
    .ins-row:hover .offer-cell{border-right-color:#e94560;}
    @keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

    /* Linke Hälfte — Angebot */
    .offer-cell{
      display:flex;align-items:center;gap:11px;
      padding:12px 16px;
      border-right:1px solid #1e2d4a;
      transition:border-color .2s;
    }

    /* Rechte Hälfte — Gesuchtes */
    .seek-cell{
      display:flex;align-items:center;gap:11px;
      padding:12px 16px;
      background:rgba(0,0,0,.15);
    }

    /* Rubrik-Punkt */
    .rub-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

    /* Kartenbild */
    .cimg{width:40px;height:56px;object-fit:contain;border-radius:5px;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.6);transition:transform .2s;}
    .cimg:hover{transform:scale(1.1) rotate(-2deg);}
    .cph{width:40px;height:56px;background:#1e2d4a;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}

    /* Karten-Info */
    .cinfo{flex:1;min-width:0;}
    .cname{font-weight:800;font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;}
    .cset{font-size:.64rem;color:#4a5a7a;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .ctags{display:flex;flex-wrap:wrap;gap:3px;}
    .ctag{font-size:.58rem;padding:2px 6px;border-radius:7px;font-weight:700;}
    .ctag-rub{background:#1e2d4a;color:#a0a8c0;border:1px solid #2a3a5a;}
    .ctag-lang{background:#1a1a2e;color:#a0a8c0;border:1px solid #2a3a5a;}
    .cM {background:#ffd700;color:#000;}.cNM{background:#4ecdc4;color:#000;}
    .cLP{background:#a8e063;color:#000;}.cMP{background:#f7971e;color:#000;}
    .cHP{background:#e94560;color:#fff;}
    .cmore{font-size:.58rem;color:#4a5a7a;font-style:italic;margin-top:2px;}

    /* Preis — nur linke Seite */
    .cprice{text-align:right;flex-shrink:0;}
    .cprice-val{font-family:'Bebas Neue',cursive;font-size:.95rem;color:#f5c518;letter-spacing:1px;}
    .cprice-lbl{font-size:.58rem;color:#4a5a7a;margin-top:1px;}

    /* Seek-Name ohne Preis */
    .sname{font-weight:800;font-size:.83rem;color:#d0d8e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .sset{font-size:.64rem;color:#4a5a7a;margin-top:1px;}

    /* Leer */
    .empty-dash{color:#2a3a5a;text-align:center;padding:60px 20px;font-size:.9rem;grid-column:1/-1;}
/* ── TAUSCH-BUTTON ── */
.trade-btn{
  background:linear-gradient(135deg,#4ecdc4,#3ab5ad);
  color:#fff;border:none;border-radius:8px;
  padding:7px 12px;font-family:'Nunito',sans-serif;
  font-size:.75rem;font-weight:800;cursor:pointer;
  transition:all .2s;white-space:nowrap;flex-shrink:0;
  box-shadow:0 3px 10px rgba(78,205,196,.3);
}
.trade-btn:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(78,205,196,.4);}

/* ── VIEW TABS ── */
#dash-view-tabs{display:flex;gap:4px;background:#0f0f1a;border-radius:12px;padding:4px;width:fit-content;margin-bottom:16px;}
.view-tab{padding:9px 20px;border:none;border-radius:9px;font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:800;cursor:pointer;transition:all .2s;color:#4a5a7a;background:transparent;position:relative;}
.view-tab.active{background:#e94560;color:#fff;box-shadow:0 4px 14px rgba(233,69,96,.35);}
.msg-badge{background:#e94560;color:#fff;border-radius:10px;padding:1px 6px;font-size:.65rem;font-weight:800;margin-left:5px;}

/* ── RUBRIK PILLS ── */
.rub-pills-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px;}
.rub-pill{
  background:#1a1a2e;border:1.5px solid #2a3a5a;
  color:#a0a8c0;border-radius:20px;
  padding:7px 14px;font-size:.78rem;font-weight:700;
  cursor:pointer;transition:all .2s;font-family:'Nunito',sans-serif;
  white-space:nowrap;
}
.rub-pill:hover{border-color:var(--pc,#e94560);color:#fff;}
.rub-pill.active{background:var(--pc,#e94560);border-color:var(--pc,#e94560);color:#fff;box-shadow:0 0 12px color-mix(in srgb, var(--pc,#e94560) 40%, transparent);}

/* ── NACHRICHTEN ── */
.msg-row{display:flex;gap:14px;padding:16px 20px;background:#1a1a2e;border:1px solid #1e2d4a;border-radius:14px;margin-bottom:10px;transition:all .2s;animation:fadeIn .2s ease both;}
.msg-row.unread{border-color:#e94560;background:#1e1228;}
.msg-row:hover{transform:translateX(4px);}
.msg-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#e94560,#ff6b35);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0;font-size:1rem;}
.msg-body{flex:1;min-width:0;}
.msg-from{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.msg-from strong{font-size:.88rem;color:#f0f0f0;}
.msg-time{font-size:.68rem;color:#4a5a7a;}
.msg-new{background:#e94560;color:#fff;font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:8px;letter-spacing:1px;}
.msg-text{font-size:.85rem;color:#c0c8d8;line-height:1.6;}

/* ── LÖSCHEN BUTTON ── */
.del-btn{background:rgba(233,69,96,.12)!important;color:#e94560!important;border:1px solid rgba(233,69,96,.3)!important;box-shadow:none!important;}
.del-btn:hover{background:rgba(233,69,96,.2)!important;}

/* ── CHAT LAYOUT ── */
.chat-layout{display:grid;grid-template-columns:280px 1fr;gap:0;height:calc(100vh - 280px);min-height:400px;background:#1a1a2e;border:1px solid #1e2d4a;border-radius:18px;overflow:hidden;}
@media(max-width:700px){.chat-layout{grid-template-columns:1fr;}}

/* Sidebar */
.chat-sidebar{border-right:1px solid #1e2d4a;overflow-y:auto;background:#11111f;}
.chat-sidebar::-webkit-scrollbar{width:4px;}
.chat-sidebar::-webkit-scrollbar-thumb{background:#2a3a5a;border-radius:4px;}

/* Konversations-Zeile */
.convo-row{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .18s;border-bottom:1px solid #1a1a2e;animation:fadeIn .2s ease both;}
.convo-row:hover,.convo-row.active{background:rgba(233,69,96,.08);}
.convo-row.active{border-left:3px solid #e94560;}
.convo-row.unread{background:rgba(233,69,96,.05);}
.convo-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e94560,#ff6b35);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0;font-size:.95rem;}
.convo-info{flex:1;min-width:0;}
.convo-name{font-weight:800;font-size:.85rem;display:flex;align-items:center;gap:6px;margin-bottom:3px;}
.convo-badge{background:#e94560;color:#fff;border-radius:10px;padding:1px 6px;font-size:.6rem;font-weight:800;}
.convo-preview{font-size:.72rem;color:#4a5a7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
.convo-time{font-size:.64rem;color:#2a3a5a;}

/* Chat Hauptbereich */
.chat-main{display:flex;flex-direction:column;overflow:hidden;}
.chat-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#2a3a5a;font-size:.9rem;}

/* Chat Header */
.chat-header{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #1e2d4a;background:#11111f;flex-shrink:0;}
.chat-header-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#4ecdc4,#3ab5ad);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:.85rem;}
.chat-header-name{font-weight:800;font-size:.95rem;}

/* Nachrichten */
.chat-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
.chat-messages::-webkit-scrollbar{width:4px;}
.chat-messages::-webkit-scrollbar-thumb{background:#2a3a5a;border-radius:4px;}

.chat-msg{display:flex;flex-direction:column;max-width:70%;}
.chat-msg.mine{align-self:flex-end;align-items:flex-end;}
.chat-msg.theirs{align-self:flex-start;align-items:flex-start;}
.chat-bubble{padding:10px 14px;border-radius:16px;font-size:.88rem;line-height:1.5;word-break:break-word;}
.chat-msg.mine .chat-bubble{background:linear-gradient(135deg,#e94560,#c73652);color:#fff;border-radius:16px 16px 4px 16px;}
.chat-msg.theirs .chat-bubble{background:#1e2d4a;color:#f0f0f0;border-radius:16px 16px 16px 4px;}
.chat-time{font-size:.62rem;color:#4a5a7a;margin-top:3px;padding:0 4px;}

/* Chat Input */
.chat-input-wrap{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #1e2d4a;background:#11111f;flex-shrink:0;}
.chat-input{flex:1;background:#0f0f1a;border:1.5px solid #2a3a5a;border-radius:10px;color:#f0f0f0;padding:10px 14px;font-family:'Nunito',sans-serif;font-size:.88rem;outline:none;resize:none;min-height:42px;max-height:100px;transition:border-color .2s;}
.chat-input:focus{border-color:#e94560;}
.chat-input::placeholder{color:#3a4a6a;}
.chat-send-btn{background:linear-gradient(135deg,#e94560,#ff6b35);color:#fff;border:none;border-radius:10px;width:44px;height:44px;font-size:1.1rem;cursor:pointer;transition:all .2s;flex-shrink:0;}
.chat-send-btn:hover{transform:scale(1.08);}

/* ── USER LINK ── */
.user-link{color:#4ecdc4;cursor:pointer;font-weight:700;transition:color .2s;}
.user-link:hover{color:#fff;text-decoration:underline;}

/* ── INSERAT DETAIL MODAL ── */
.ins-modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(4px);z-index:700;align-items:center;justify-content:center;padding:20px;}
.ins-modal-ov.open{display:flex;}
.ins-modal{background:#1a1a2e;border:1px solid #2a3a5a;border-top:3px solid #e94560;border-radius:18px;padding:26px;width:100%;max-width:640px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.6);}
.ins-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-shrink:0;}
.ins-modal-title{font-size:.95rem;font-weight:800;color:#f0f0f0;}
.ins-modal-close{background:none;border:none;color:#4a5a7a;font-size:1.2rem;cursor:pointer;transition:color .2s;padding:4px 8px;}
.ins-modal-close:hover{color:#e94560;}
.ins-modal-body{overflow-y:auto;flex:1;}
.ins-modal-body::-webkit-scrollbar{width:4px;}
.ins-modal-body::-webkit-scrollbar-thumb{background:#2a3a5a;border-radius:4px;}

/* Detail Sektion */
.ins-detail-section{margin-bottom:8px;}
.ins-detail-label{font-family:'Bebas Neue',cursive;font-size:1rem;letter-spacing:2px;margin-bottom:10px;}
.ins-detail-card{display:flex;gap:14px;background:#11111f;border-radius:12px;padding:12px;margin-bottom:8px;}
.ins-detail-photos{display:flex;gap:8px;flex-shrink:0;}
.ins-photo{width:70px;height:98px;object-fit:cover;border-radius:8px;cursor:zoom-in;transition:transform .2s;box-shadow:0 4px 14px rgba(0,0,0,.5);}
.ins-photo:hover{transform:scale(1.05);}
.ins-photo-ph{width:70px;height:98px;background:#1e2d4a;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.8rem;color:#3a4a6a;text-align:center;gap:4px;}
.ins-detail-info{flex:1;min-width:0;}
.ins-detail-name{font-weight:800;font-size:.92rem;margin-bottom:4px;}
.ins-detail-set{font-size:.72rem;color:#4a5a7a;margin-bottom:8px;}
.ins-detail-tags{display:flex;flex-wrap:wrap;gap:4px;}

/* Detail Button */
.detail-btn{background:rgba(160,168,192,.1)!important;color:#a0a8c0!important;border:1px solid rgba(160,168,192,.2)!important;box-shadow:none!important;padding:7px 10px!important;}
.detail-btn:hover{background:rgba(160,168,192,.2)!important;color:#fff!important;}

/* Trenner zwischen API-Bild und eigenen Fotos */
.ins-photo-sep{
  display:flex;align-items:center;justify-content:center;
  width:24px;color:#2a3a5a;font-size:.9rem;
  position:relative;flex-shrink:0;
}
.ins-photo-sep::before{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:1px;height:70%;background:#2a3a5a;
}

/* ═══════════════════════════════════════
   MOBILE RESPONSIVE — Dashboard
════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Inserate-Tabelle — untereinander statt nebeneinander */
  .board-grid {
    display: flex;
    flex-direction: column;
  }
  .board-col-left { border-right: none; border-bottom: 2px solid #1e2d4a; }

  /* Inserat-Zeilen — eine Spalte auf Mobile */
  .ins-row {
    display: block !important;
    width: 100% !important;
  }
  .offer-cell {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-right: none !important;
    border-bottom: 1px solid #1e2d4a !important;
    padding: 10px 12px !important;
  }
  .seek-cell {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .seek-cell .cinfo {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .trade-btn {
    flex-shrink: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
  }
  /* Sucht Dafür Header verstecken auf Mobile — steht schon im Inserat */
  .board-col-right .board-col-head { display: none; }

  /* Rubrik-Pills scrollen */
  .rub-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .rub-pills::-webkit-scrollbar { display: none; }
  .rub-pill { flex-shrink: 0; }

  /* Topbar im Dashboard */
  .dash-topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
    gap: 8px;
  }
  .tb-search { width: 100%; }

  /* Chat-Layout */
  .chat-layout {
    flex-direction: column;
    height: auto;
  }
  .chat-sidebar {
    width: 100%;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid #1e2d4a;
  }
  .chat-main { height: 400px; }

  /* Inserat-Detail Modal */
  .ins-modal {
    width: 96%;
    max-height: 90vh;
    padding: 16px;
  }
  .ins-detail-card { flex-direction: column; }
  .ins-detail-photos { justify-content: flex-start; }

  /* Preisanzeige kompakter */
  .cprice { display: none; }
  .cmore  { font-size: .6rem; }
}

@media (max-width: 480px) {
  .cimg { width: 36px; height: 50px; }
  .cph  { width: 36px; height: 50px; font-size: .9rem; }
  .cname { font-size: .82rem; }
  .ctag  { font-size: .58rem; padding: 1px 6px; }
  .trade-btn { padding: 6px 10px; font-size: .75rem; }
}

/* ── MOBILE DASHBOARD KOMPLETT FIX ── */
@media (max-width: 768px) {

  /* Dashboard komplett auf volle Breite */
  .dashboard { width: 100% !important; overflow: hidden !important; }

  /* Header: nur eine Zelle */
  .dash-header {
    display: block !important;
    width: 100% !important;
  }
  .dash-header-cell.seek.desktop-only { display: none !important; }
  .dash-header-cell.offer {
    width: 100% !important;
    border-right: none !important;
  }

  /* Jede Zeile: Karte oben, Gesuchtes unten */
  .ins-row {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .offer-cell {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-right: none !important;
    border-bottom: 1px solid #1e2d4a !important;
    padding: 10px 12px !important;
  }
  .seek-cell {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .seek-cell .cinfo { flex: 1 !important; min-width: 0 !important; }
  .trade-btn { width: auto !important; flex-shrink: 0 !important; }

  /* Kein horizontales Scrollen */
  .page#page-board { overflow-x: hidden !important; }
  .main { overflow-x: hidden !important; }
}