/* ===========================
   Canon DB – Modern Cards (Dark Navy / Teal / Wine)
   =========================== */
.canon-page{
  /* Palette aus dem Screenshot */
  --c-bg:       #0f1a20;   /* sehr dunkles Navy (Seite) */
  --c-panel:    #12252d;   /* Karten/Sidebar */
  --c-panel-2:  #0f2d37;   /* Scroll-Track/abgesetzt */
  --c-ink:      #cfe1e7;   /* Haupttext hell-bläulich */
  --c-muted:    #8ea8b3;   /* Sekundärtext */
  --c-accent:   #49bcd9;   /* TEAL/Türkis (Chips, Links) */
  --c-accent2:  #7dd6ee;   /* helleres Türkis (Hover) */
  --c-hero:     #8b2a2a;   /* weinrot (Titelbalken) */
  --c-hero2:    #702020;   /* dunkleres Weinrot (Hover) */
  --c-border:   #1f3942;   /* zarter Rahmen */

  color:var(--c-ink);
  background:var(--c-bg);
}
.canon-page a{ color:var(--c-accent); text-decoration:none }
.canon-page a:hover{ color:var(--c-accent2) }

/* Tabellen-Wrapper neutralisieren */
.canon-page .tborder{ background:transparent; border:0 }
.canon-page .trow1,.canon-page .trow2{ background:transparent; border:0 }

/* ---------- Sidebar / Navigation ---------- */
.canon-page .canon_sidebar{
  position: sticky; top: 16px;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}
.canon-page .canon_sidebar .tcat{
  background: var(--c-hero);
  color:#fff; border:1px solid var(--c-hero2);
  padding:12px; margin:0 0 10px 0; border-radius:10px;
  text-transform:uppercase; letter-spacing:2px; font:800 14px/1 Antonio, sans-serif;
}
.canon-page .canon_nav a{
  display:block; width:100%; margin:6px 0 0 0; padding:10px 12px;
  border:1px solid var(--c-hero); border-radius:8px;
  color:#fff; background:var(--c-hero);
  font:800 12px/1 Antonio, sans-serif; letter-spacing:1px; text-transform:uppercase;
  text-align:center;
}
.canon-page .canon_nav a:hover{ background:var(--c-hero2); border-color:var(--c-hero2) }

.canon-page select, .canon-page input[type="text"]{
  width:100%; border:1px solid var(--c-border); border-radius:10px;
  background:#0e2026; color:var(--c-ink); padding:8px 10px;
}
.canon-page input.button, .canon-page #submit{
  background:var(--c-hero); color:#ffffff; border:1px solid var(--c-hero2);
  font:800 11px/1 Antonio, sans-serif; text-transform:uppercase; letter-spacing:1px;
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
.canon-page input.button:hover, .canon-page #submit:hover{
  background:var(--c-hero2); border-color:var(--c-hero2)
}

/* ---------- Grid mit Karten ---------- */
.canon-page .canon_flex{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  padding: 6px 6px 10px;
}
.canon-page .canon_box{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:14px;
  align-items:start;
  background:var(--c-panel);
  border:1px solid var(--c-border);
  border-radius:16px;
  padding:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
  transition:transform .18s ease, box-shadow .18s ease;
}
.canon-page .canon_box:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Bild */
.canon-page .canon_pic{
  height:150px; width:120px; border-radius:12px; overflow:hidden; background:#0b1b21;
  border:1px solid var(--c-border);
}
.canon-page .canon_pic img{ width:100%; height:100%; object-fit:cover; display:block }

/* Titel / Meta / Chips */
.canon-page .canon_info{ min-width:0 }
.canon-page .canon_name{
  display:inline-block; width:100%;
  background:var(--c-hero); color:#fff;
  padding:10px 12px; margin:2px 0 8px 0;
  border-radius:8px; border:1px solid var(--c-hero2);
  font:800 16px/1 Antonio, sans-serif; letter-spacing:2px; text-transform:uppercase;
}

/* „Sieht aus wie …“ */
.canon-page .canon_avatar{
  font:700 11px/1 Antonio, sans-serif; text-transform:uppercase; letter-spacing:1px;
  color:var(--c-muted); margin-bottom:8px;
}

/* Meta-Chips – TEAL Outline */
.canon-page .canon_meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.canon-page .chip{
  background:transparent; color:var(--c-accent);
  border:1px solid var(--c-accent); border-radius:999px;
  padding:6px 10px; font:800 10px/1 Antonio, sans-serif;
  letter-spacing:1px; text-transform:uppercase;
}
.canon-page .chip:hover{ background:rgba(73,188,217,.12) }

/* Beschreibung mit Scroll */
.canon-page .canon_desc{
  max-height:120px; overflow:auto;
  background:#0e2026; border:1px solid var(--c-border); border-radius:12px; padding:10px;
  color:var(--c-ink); font:14px/1.45 "Rajdhani", system-ui; text-align:justify;
}
.canon-page .canon_desc::-webkit-scrollbar{ width:6px; height:6px }
.canon-page .canon_desc::-webkit-scrollbar-thumb{ background:var(--c-border) }
.canon-page .canon_desc::-webkit-scrollbar-track{ background:var(--c-panel-2) }

/* Optionen */
.canon-page .canon_options{ display:flex; gap:8px; margin-top:10px; justify-content:flex-end }
.canon-page .canon_options a{
  display:inline-block; padding:6px 10px; border-radius:8px;
  background:transparent; border:1px solid var(--c-accent); color:var(--c-accent);
  font:800 11px/1 Antonio, sans-serif; text-transform:uppercase; letter-spacing:1px;
}
.canon-page .canon_options a:hover{
  background:var(--c-accent); color:#062129; border-color:var(--c-accent);
}

/* „vergeben“ (optional) */
.canon-page .canon_box.is-taken .canon_name{ background:#a33b3b; border-color:#842f2f }

/* Mobile */
@media (max-width:560px){
  .canon-page .canon_box{ grid-template-columns: 1fr; }
  .canon-page .canon_pic{ width:100%; height:190px }
  .canon-page .canon_name{ text-align:center }
  .canon-page .canon_options{ justify-content:center }
}