/*
 * conntxt Boards — Frontend CSS
 * Nutzt CSS-Variablen des aktiven Themes.
 * Fallback-Werte für alle Themes ohne conntxt-Variablen.
 */

/* ── THEME TOKENS ── */
:root {
  --cnb-bg:        var(--bg,        #ffffff);
  --cnb-surf:      var(--surf,      #ffffff);
  --cnb-surf2:     var(--surf2,     #fffdf5);
  --cnb-text:      var(--text,      #1a1a1a);
  --cnb-text2:     var(--text2,     #555555);
  --cnb-text3:     var(--text3,     #999999);
  --cnb-accent:    var(--gold,      #C9A84C);
  --cnb-accent-dk: var(--gold-dark, #a8893d);
  --cnb-bd:        var(--bd,        rgba(201,168,76,0.3));
  --cnb-radius:    var(--r-corner,  14px);
  --cnb-font:      var(--font-ui,   Arial Black, Arial, sans-serif);
  --cnb-font-body: var(--font-body, Arial, sans-serif);
  --cnb-gap:       16px;
}

/* ── GRID ── */
.cnb-grid {
  display: grid;
  gap: var(--cnb-gap);
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin: 0 0 32px;
}
.cnb-grid--1 { grid-template-columns: 1fr; }
.cnb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cnb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cnb-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cnb-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* ── KACHEL ── */
.cnb-card {
  background: var(--cnb-bg);
  border: 1.5px solid var(--cnb-bd);
  border-radius: 0 var(--cnb-radius) 0 var(--cnb-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color .2s;
  position: relative;
}
.cnb-card:hover { border-color: var(--cnb-accent); }
.cnb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cnb-accent);
  opacity: 0;
  transition: opacity .2s;
  z-index: 2;
}
.cnb-card:hover::before { opacity: 1; }

/* Vorschau */
.cnb-card__preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--cnb-surf2);
  flex-shrink: 0;
}
.cnb-card__preview-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cnb-card__play-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.cnb-card__play-icon span {
  width: 48px; height: 48px;
  background: var(--cnb-accent);
  border-radius: 0 var(--cnb-radius) 0 var(--cnb-radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
}

/* Platzhalter: erste 3 Wörter des Titels */
.cnb-card__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  background: var(--cnb-surf2);
}
.cnb-card__placeholder span {
  font-family: var(--cnb-font);
  font-size: clamp(14px, 3vw, 22px);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cnb-accent);
  text-align: center;
  line-height: 1.2;
  opacity: .7;
  word-break: break-word;
}

/* Preview-Typ-Farben */
.cnb-preview--instagram {
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color: #fff;
}
.cnb-preview--twitter  { background: #000; color: #1d9bf0; }
.cnb-preview--tiktok   { background: #010101; color: #fff; }
.cnb-preview--spotify  { background: #1db954; color: #fff; }

.cnb-card__preview-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}

/* Typ-Badge */
.cnb-card__type-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 16px;
  z-index: 1;
  opacity: .8;
}

/* Card Body */
.cnb-card__body {
  padding: 14px 16px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cnb-card__eyebrow {
  font-family: var(--cnb-font);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cnb-accent);
  -webkit-font-smoothing: antialiased;
}
.cnb-card__title {
  font-family: var(--cnb-font);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cnb-text);
  margin: 0;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
.cnb-card__desc {
  font-family: var(--cnb-font-body);
  font-size: 13px;
  color: var(--cnb-text2);
  margin: 0;
  line-height: 1.55;
}
.cnb-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

/* Chips */
.cnb-chip {
  display: inline-block;
  font-family: var(--cnb-font);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--cnb-accent);
  color: #ffffff;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
}

/* Card Footer entfernt — kein Vollansicht/Kommentar Button auf Kacheln */
.cnb-card__footer { display: none; }
.cnb-card__permalink {
  font-family: var(--cnb-font);
  font-size: 13px;
  font-weight: 900;
  color: var(--cnb-text3);
  text-decoration: none;
  transition: color .2s;
  padding: 2px 6px;
}
.cnb-card__permalink:hover { color: var(--cnb-accent); }

/* Kommentar-Button */
.cnb-card__comment-btn {
  background: transparent;
  border: 1.5px solid var(--cnb-bd);
  border-radius: 0 var(--cnb-radius) 0 var(--cnb-radius);
  color: var(--cnb-text3);
  padding: 4px 10px;
  font-family: var(--cnb-font-body);
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
}
.cnb-card__comment-btn:hover {
  background: var(--cnb-accent);
  border-color: var(--cnb-accent);
  color: #ffffff;
}

.cnb-empty {
  font-family: var(--cnb-font-body);
  font-size: 13px;
  color: var(--cnb-text3);
  padding: 32px 0;
  text-align: center;
}

/* ── MODAL ── */
#cnb-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
#cnb-modal-overlay.open { display: flex; }

#cnb-modal-inner {
  background: var(--cnb-bg);
  border: 1.5px solid var(--cnb-accent);
  border-radius: 0 var(--cnb-radius) 0 var(--cnb-radius);
  width: 100%;
  max-width: 860px;
  position: relative;
  overflow: hidden;
  animation: cnbModalIn .25s ease;
  max-height: 92vh;
  overflow-y: auto;
}
@keyframes cnbModalIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.cnb-modal__close {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: 1.5px solid var(--cnb-accent);
  border-radius: 0 var(--cnb-radius) 0 var(--cnb-radius);
  color: var(--cnb-accent);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; z-index: 10;
  transition: all .2s;
}
.cnb-modal__close:hover { background: var(--cnb-accent); color: #fff; }

/* Modal Embed */
.cnb-modal__embed { background: var(--cnb-surf2); }
.cnb-embed { width: 100%; }
.cnb-embed--video iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }
.cnb-embed--audio iframe { width: 100%; height: 152px; border: none; display: block; }
.cnb-embed--pdf   iframe { width: 100%; height: 520px; border: none; display: block; }
.cnb-embed--image img    { width: 100%; max-height: 560px; object-fit: contain; display: block; }
.cnb-embed--tiktok { min-height: 700px; max-width: 605px; margin: 0 auto; width: 100%; }
.cnb-embed--tiktok blockquote { margin: 0 !important; max-width: 605px !important; min-width: 325px !important; }
.cnb-embed--tiktok iframe { width: 100% !important; min-width: 325px !important; }
.cnb-link-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1.5px solid var(--cnb-bd);
  border-radius: 0 var(--cnb-radius) 0 var(--cnb-radius);
  color: var(--cnb-text); text-decoration: none;
  background: var(--cnb-bg); transition: border-color .2s;
}
.cnb-link-card:hover { border-color: var(--cnb-accent); }
.cnb-link-icon { font-family: var(--cnb-font); font-size: 16px; font-weight: 900; color: var(--cnb-accent); min-width: 28px; }
.cnb-link-url  { font-family: var(--cnb-font-body); font-size: 13px; color: var(--cnb-text2); word-break: break-all; }

/* Modal Info */
.cnb-modal__info { padding: 20px 24px 0; }
.cnb-modal__eyebrow {
  font-family: var(--cnb-font); font-size: 11px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cnb-accent); margin-bottom: 6px; display: block;
  -webkit-font-smoothing: antialiased;
}
.cnb-modal__title {
  font-family: var(--cnb-font); font-size: 22px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cnb-accent); margin: 0 0 10px;
  -webkit-font-smoothing: antialiased;
}
.cnb-modal__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cnb-modal__desc  { font-family: var(--cnb-font-body); font-size: 14px; color: var(--cnb-text, #1a1a1a); margin: 0 0 12px; line-height: 1.65; }
.cnb-modal__meta  {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--cnb-text3);
  padding-bottom: 16px; border-bottom: 1px solid var(--cnb-bd);
}
.cnb-modal__author { display: flex; align-items: center; gap: 6px; }
.cnb-modal__author img { border-radius: 0; }
.cnb-modal__author a { color: var(--cnb-text2); text-decoration: none; font-family: var(--cnb-font); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.cnb-modal__fulllink {
  margin-left: auto; font-family: var(--cnb-font); font-size: 11px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cnb-accent); text-decoration: none;
  border: 1.5px solid var(--cnb-bd); padding: 4px 10px;
  border-radius: 0 var(--cnb-radius) 0 var(--cnb-radius); transition: all .2s;
}
.cnb-modal__fulllink:hover { background: var(--cnb-accent); color: #fff; border-color: var(--cnb-accent); }

/* Kommentare im Modal */
.cnb-modal__comments { padding: 20px 24px 28px; }
.cnb-modal__comments-heading {
  font-family: var(--cnb-font); font-size: 14px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cnb-accent); margin: 0 0 16px;
  -webkit-font-smoothing: antialiased;
}
.cnb-no-comments { font-family: var(--cnb-font-body); font-size: 13px; color: var(--cnb-text, #1a1a1a); }
.cnb-comment { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--cnb-bd); }
.cnb-comment__avatar img { border-radius: 0; flex-shrink: 0; }
.cnb-comment__body { flex: 1; }
.cnb-comment__author { font-family: var(--cnb-font); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--cnb-text); margin-right: 8px; -webkit-font-smoothing: antialiased; }
.cnb-comment__date   { font-family: var(--cnb-font-body); font-size: 11px; color: var(--cnb-text3); }
.cnb-comment__text   { font-family: var(--cnb-font-body); font-size: 13px; color: var(--cnb-text, #1a1a1a); margin: 6px 0; line-height: 1.55; }
.cnb-comment__votes  { display: flex; gap: 6px; margin-top: 8px; }
.cnb-vote-btn {
  background: transparent; border: 1.5px solid var(--cnb-bd);
  border-radius: 0 var(--cnb-radius) 0 var(--cnb-radius);
  color: var(--cnb-text3); padding: 4px 10px; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 4px; transition: all .2s;
}
.cnb-vote-up:hover,   .cnb-vote-up.active   { background: rgba(34,197,94,.1); border-color: #22c55e; color: #22c55e; }
.cnb-vote-down:hover, .cnb-vote-down.active  { background: rgba(239,68,68,.1); border-color: #ef4444; color: #ef4444; }

/* Kommentar-Formular */
.cnb-comment-form { margin-top: 20px; }
.cnb-comment-form h4 { font-family: var(--cnb-font); font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--cnb-text); margin: 0 0 12px; -webkit-font-smoothing: antialiased; }
.cnb-field-row { display: flex; gap: 10px; margin-bottom: 10px; }
.cnb-input { width: 100%; padding: 9px 12px; background: var(--cnb-bg); border: 1px solid var(--cnb-bd); border-radius: 0; color: var(--cnb-text); font-family: var(--cnb-font-body); font-size: 13px; box-sizing: border-box; outline: none; transition: border-color .2s; }
.cnb-input:focus { border-color: var(--cnb-accent); }
.cnb-textarea { height: 90px; resize: vertical; display: block; margin-bottom: 10px; }
.cnb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 20px; background: transparent;
  border: 1.5px solid var(--cnb-accent);
  border-radius: 0 var(--cnb-radius) 0 var(--cnb-radius);
  color: var(--cnb-accent); font-family: var(--cnb-font); font-size: 11px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: all .2s;
  -webkit-font-smoothing: antialiased;
}
.cnb-btn:hover  { background: var(--cnb-accent); color: #ffffff; }
.cnb-btn:disabled { opacity: .45; cursor: default; }
.cnb-comment-msg { margin-top: 8px; font-size: 13px; font-family: var(--cnb-font-body); }
.cnb-comment-msg.ok  { color: #22c55e; }
.cnb-comment-msg.err { color: #ef4444; }
.cnb-login-note { font-family: var(--cnb-font-body); font-size: 13px; color: var(--cnb-text2); margin-top: 16px; }
.cnb-login-note a { color: var(--cnb-accent); }

/* Loading */
.cnb-loading { display: flex; align-items: center; justify-content: center; padding: 60px; color: var(--cnb-text3); gap: 10px; font-family: var(--cnb-font-body); font-size: 13px; }
.cnb-spinner { width: 22px; height: 22px; border: 3px solid var(--cnb-bd); border-top-color: var(--cnb-accent); border-radius: 50%; animation: cnbSpin .7s linear infinite; flex-shrink: 0; }
@keyframes cnbSpin { to { transform: rotate(360deg); } }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .cnb-grid--4, .cnb-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cnb-grid--2, .cnb-grid--3, .cnb-grid--4, .cnb-grid--5 { grid-template-columns: 1fr; }
  .cnb-grid { justify-items: center; }
  .cnb-card { width: 100%; max-width: 480px; }
  .cnb-modal__meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cnb-modal__fulllink { margin-left: 0; }
  .cnb-field-row { flex-direction: column; }
}

/* ── BOARD CONTENT (Inhaltsblöcke unter den Kacheln) ── */
.cnb-board__content {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--cnb-bd);
}

/* ── MODAL HINTERGRUNDBILD ── */
#cnb-modal-inner {
  /* Relative positioning damit das absolute BG-Bild korrekt sitzt */
  position: relative;
}

/* BG-Bild Wrapper: braucht position:relative + Mindesthöhe */
.cnb-modal__preview-link,
.cnb-modal__preview-wrap {
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.cnb-modal__preview-link { cursor: pointer; }

/* Bild-Wrapper: aspect-ratio 16:9 — verhindert zu hohen Bereich */
.cnb-modal__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fffdf5;
}
.cnb-modal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.cnb-modal__preview-link:hover .cnb-modal__img {
  transform: scale(1.02);
}

/* Leeres Feld — beige, gleiche Höhe */
.cnb-modal__img-empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fffdf5;
}

/* Info-Bereich: normales Padding — kein padding-top Hack mehr nötig */
.cnb-modal__info {
  padding: 20px 24px 0;
}

/* Embed hat kein BG — kein extra Padding */
.cnb-modal__embed {
  position: relative;
  z-index: 1;
}

/* Kommentare immer über dem BG */
.cnb-modal__comments {
  position: relative;
  z-index: 1;
  background: var(--cnb-bg);
}

/* ══════════════════════════════════════════════════════════════
   BOARD PANEL — Slide-in Desktop / Bottom Sheet Mobil
   ══════════════════════════════════════════════════════════════ */

/* Board Footer mit Kommentar-Button */
.cnb-board__footer {
  /* Footer nur als Träger — Button ist fixed */
  height: 0;
  overflow: visible;
  position: static;
}

/* ── FLOATING KOMMENTAR-BUTTON ─────────────────────────────────
   Immer oben rechts im Viewport, direkt unter Hauptmenü.
   --cnb-header-h: wird per JS gesetzt (Höhe des <header>-Elements)
   Fallback: 70px (58px Theme-Menü + 12px Luft)
   ─────────────────────────────────────────────────────────────── */
:root { --cnb-header-h: 70px; }
/* WordPress Admin-Bar zieht das Hauptmenü nach unten */
.admin-bar { --cnb-header-h: 104px; }

.cnb-board__comment-btn {
  position: fixed;
  top: var(--cnb-header-h);
  right: 24px;
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cnb-bg, #fff);
  border: 1.5px solid var(--cnb-accent, #C9A84C);
  border-radius: 0 var(--cnb-radius, 14px) 0 var(--cnb-radius, 14px);
  color: var(--cnb-accent, #C9A84C);
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  box-shadow: 0 2px 12px rgba(201,168,76,.2);
  -webkit-font-smoothing: antialiased;
}
.cnb-board__comment-btn:hover,
.cnb-board__comment-btn.active {
  background: var(--cnb-accent, #C9A84C);
  color: #ffffff;
  border-color: var(--cnb-accent, #C9A84C);
  box-shadow: 0 4px 18px rgba(201,168,76,.35);
}
.cnb-board__comment-count {
  background: var(--cnb-accent, #C9A84C);
  color: #fff;
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 900;
  min-width: 20px;
  text-align: center;
  transition: background .2s;
}
.cnb-board__comment-btn:hover .cnb-board__comment-count,
.cnb-board__comment-btn.active .cnb-board__comment-count {
  background: rgba(255,255,255,.3);
}
@media (max-width: 759px) {
  .cnb-board__comment-btn {
    right: 12px;
    padding: 7px 12px;
  }
  .cnb-board__comment-label { display: none; }
}

/* ── PANEL BACKDROP ── */
.cnb-board-panel {
  display: none;
}
.cnb-board-panel.open {
  display: block;
}
.cnb-board-panel__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.1);
  z-index: 9998;
  cursor: pointer;
  /* kein backdrop-filter: blur — Board bleibt scharf */
}

/* ── PANEL INNER — Desktop: rechts ── */
.cnb-board-panel__inner {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--cnb-bg);
  border-left: 1.5px solid var(--cnb-accent);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.cnb-board-panel.open .cnb-board-panel__inner {
  transform: translateX(0);
}

/* Handle (nur mobil sichtbar) */
.cnb-board-panel__handle {
  display: none;
}

/* Header */
.cnb-board-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cnb-bd);
  flex-shrink: 0;
}
.cnb-board-panel__title {
  font-family: var(--cnb-font);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cnb-accent);
  -webkit-font-smoothing: antialiased;
}
.cnb-board-panel__close {
  background: transparent;
  border: 1.5px solid var(--cnb-bd);
  border-radius: 0 var(--cnb-radius) 0 var(--cnb-radius);
  color: var(--cnb-text3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s;
  flex-shrink: 0;
}
.cnb-board-panel__close:hover {
  background: var(--cnb-accent);
  border-color: var(--cnb-accent);
  color: #ffffff;
}

/* Body — scrollbar */
.cnb-board-panel__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  -webkit-overflow-scrolling: touch;
}
.cnb-board-panel__body .cnb-comments-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Comment form im Panel */
.cnb-board-panel__body .cnb-comment-form--board {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cnb-bd);
}

/* Breite body wenn panel offen — Board zieht sich zusammen */
@media (min-width: 760px) {
  .cnb-board.panel-open .cnb-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .cnb-board.panel-open .cnb-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cnb-board.panel-open .cnb-grid--5 { grid-template-columns: repeat(3, 1fr); }
}

/* ── MOBIL: Bottom Sheet ── */
@media (max-width: 759px) {
  .cnb-board-panel__inner {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 82vh;
    border-left: none;
    border-top: 2px solid var(--cnb-accent);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
  }
  .cnb-board-panel.open .cnb-board-panel__inner {
    transform: translateY(0);
  }
  /* Drag handle mobil */
  .cnb-board-panel__handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    flex-shrink: 0;
    cursor: grab;
  }
  .cnb-board-panel__handle::after {
    content: '';
    width: 36px;
    height: 4px;
    background: var(--cnb-bd);
    border-radius: 2px;
  }
  .cnb-board-panel__header {
    padding: 10px 16px 12px;
  }
  .cnb-board-panel__body {
    padding: 16px;
    max-height: calc(82vh - 110px);
  }
}

/* Leerer Kommentar-Zustand */
.cnb-no-board-comments {
  font-family: var(--cnb-font-body);
  font-size: 13px;
  color: var(--cnb-text3);
  text-align: center;
  padding: 32px 0;
}

/* ══════════════════════════════════════════════════════════════
   MINI-PLAYER — unten rechts, persistent beim Scrollen
   ══════════════════════════════════════════════════════════════ */
.cnb-miniplayer {
  position: fixed;
  bottom: 20px;
  right: 24px;
  width: 320px;
  z-index: 9985;
  background: var(--cnb-bg, #fff);
  border: 1.5px solid var(--cnb-accent, #C9A84C);
  border-radius: 0 var(--cnb-radius, 14px) 0 var(--cnb-radius, 14px);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
  /* Immer display:flex — transition auf opacity+transform, NICHT display */
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
  /* Versteckt aber im DOM damit iframe weiterlaufen kann */
  visibility: hidden;
}
.cnb-miniplayer.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* Video-Bereich: 16:9 */
.cnb-miniplayer__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.cnb-miniplayer__video iframe,
.cnb-miniplayer__video video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Info-Zeile */
.cnb-miniplayer__info {
  padding: 8px 12px 8px 12px;
  flex: 1;
  min-width: 0;
  border-top: 1px solid var(--cnb-bd, rgba(201,168,76,.3));
  display: flex;
  align-items: center;
}
.cnb-miniplayer__title {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cnb-text, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-font-smoothing: antialiased;
}

/* Controls */
.cnb-miniplayer__controls {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
}
.cnb-miniplayer__close {
  width: 26px;
  height: 26px;
  background: rgba(0,0,0,.55);
  border: none;
  border-radius: 0 6px 0 6px;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.cnb-miniplayer__close:hover {
  background: var(--cnb-accent, #C9A84C);
}

/* Mobil: etwas kleiner, über dem Kommentar-Button */
@media (max-width: 480px) {
  .cnb-miniplayer {
    width: calc(100vw - 32px);
    bottom: 80px;
    right: 16px;
    left: 16px;
  }
}

/* ── TYP-CHIP (ersetzt Emoji-Icons) ── */
.cnb-type-chip {
  display: inline-block;
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--cnb-accent, #C9A84C);
  color: #ffffff;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
}

/* Typ-Badge auf Kachel-Vorschau */
.cnb-card__type-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

/* ── DETAIL SIDE PANEL ──────────────────────────────────────────
   Einzelansicht mit Kommentaren nebeneinander
   Desktop: von rechts, 480px breit
   Mobil: Bottom Sheet
   ─────────────────────────────────────────────────────────────── */
.cnb-detail-panel { display: none; }
.cnb-detail-panel.open { display: block; }

.cnb-detail-panel__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.12);
  z-index: 9994;
  cursor: pointer;
}

.cnb-detail-panel__inner {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  max-width: 96vw;
  background: var(--cnb-bg, #fff);
  border-left: 1.5px solid var(--cnb-accent, #C9A84C);
  z-index: 9995;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.cnb-detail-panel.open .cnb-detail-panel__inner {
  transform: translateX(0);
}

.cnb-detail-panel__handle { display: none; }

.cnb-detail-panel__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cnb-bd, rgba(201,168,76,.3));
  flex-shrink: 0;
}
.cnb-detail-panel__close {
  background: transparent;
  border: 1.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  border-radius: 0 var(--cnb-radius, 14px) 0 var(--cnb-radius, 14px);
  color: var(--cnb-text3, #999);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px;
  transition: all .2s;
}
.cnb-detail-panel__close:hover {
  background: var(--cnb-accent, #C9A84C);
  border-color: var(--cnb-accent, #C9A84C);
  color: #fff;
}

.cnb-detail-panel__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Modal-HTML wird im Panel gerendert — Styles übernehmen */
.cnb-detail-panel__body .cnb-modal__bg,
.cnb-detail-panel__body .cnb-modal__info,
.cnb-detail-panel__body .cnb-modal__embed,
.cnb-detail-panel__body .cnb-modal__comments {
  /* alles normal, kein Overlay-Hintergrund nötig */
}
/* detail panel modal info: no extra padding needed */

/* Mobil: Bottom Sheet */
@media (max-width: 759px) {
  .cnb-detail-panel__inner {
    top: auto; right: 0; left: 0;
    width: 100%; max-width: 100%;
    max-height: 88vh;
    border-left: none;
    border-top: 2px solid var(--cnb-accent, #C9A84C);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
  }
  .cnb-detail-panel.open .cnb-detail-panel__inner {
    transform: translateY(0);
  }
  .cnb-detail-panel__handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    flex-shrink: 0;
  }
  .cnb-detail-panel__handle::after {
    content: '';
    width: 36px; height: 4px;
    background: var(--cnb-bd, rgba(201,168,76,.3));
    border-radius: 2px;
  }
}

/* ── PREVIEW-LABELS (statt Emoji-Icons) ── */
.cnb-preview-label {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
  -webkit-font-smoothing: antialiased;
}
/* Datum-Label im Modal */
.cnb-label {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cnb-accent, #C9A84C);
  margin-right: 4px;
  -webkit-font-smoothing: antialiased;
}
/* Kommentar-Label auf Kachel */
.cnb-card__comment-label {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
/* Vollansicht-Label */
.cnb-card__permalink-label {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
/* Link-Karte Pfeil → gold */
.cnb-link-icon {
  color: var(--cnb-accent, #C9A84C);
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-weight: 900;
}

/* ── ZURÜCK-ZUM-BOARD BUTTON — Chip-Style, größer ──────────────
   Wie .cnb-chip aber größer, klickbar, mit Hover-State.
   Nutzt Theme-Variablen (--gold, --font-ui) mit Fallbacks.
   ─────────────────────────────────────────────────────────── */
.cnb-back-btn {
  /* Inline-Styles übernehmen die Hauptformatierung — CSS als Override */
  display: inline-flex !important;
  width: 33.333% !important;
  max-width: 33.333% !important;
}
@media (max-width: 760px) {
  .cnb-back-btn {
    width: 66.666% !important;
    max-width: 66.666% !important;
  }
}

/* ── CHIP PLACEHOLDER (statt Titel-Wörter) ── */
.cnb-card__placeholder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
}
.cnb-chip--placeholder {
  opacity: .7;
  font-size: 10px;
  letter-spacing: .14em;
}

/* ── BOARD CONTENT ABOVE ── */
.cnb-board__content--above {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cnb-bd, rgba(201,168,76,.3));
}

/* ── MODAL PREVIEW LINK ── */
.cnb-modal__preview-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.cnb-modal__preview-link:hover .cnb-modal__title {
  color: var(--cnb-accent, #C9A84C);
}
.cnb-modal__preview-link:hover .cnb-modal__bg {
  filter: brightness(0.95);
}
/* Vollansicht-Hinweis entfernt */

/* Leerer Vorschaubereich (kein Bild) — Mindesthöhe damit Link klickbar */
/* cnb-modal__bg--empty replaced by cnb-modal__img-empty */

/* ── MODAL TITLE LINK ── */
.cnb-modal__title-link {
  text-decoration: none;
  display: block;
}
.cnb-modal__title-link:hover .cnb-modal__title {
  color: var(--cnb-accent, #C9A84C);
  opacity: .85;
}
.cnb-modal__eyebrow--link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.cnb-modal__eyebrow--link:hover { opacity: .75; }

/* ── RELATED BOARD CARDS ── */
.cnb-modal__related {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--cnb-bd, rgba(201,168,76,.3));
}
.cnb-modal__related-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cnb-modal__related-label {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cnb-text3, #999);
  -webkit-font-smoothing: antialiased;
}
.cnb-modal__related-link {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cnb-accent, #C9A84C);
  text-decoration: none;
}
.cnb-modal__related-link:hover { text-decoration: underline; }

/* Scrollbares horizontales Grid */
.cnb-modal__related-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.cnb-modal__related-grid::-webkit-scrollbar { display: none; }

.cnb-modal__related-card {
  flex: 0 0 160px;
  border: 1.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  border-radius: 0 var(--cnb-radius, 14px) 0 var(--cnb-radius, 14px);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s;
  background: var(--cnb-bg, #fff);
}
.cnb-modal__related-card:hover { border-color: var(--cnb-accent, #C9A84C); }

.cnb-modal__related-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #fffdf5;
  flex-shrink: 0;
  position: relative;
}
.cnb-modal__related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
.cnb-modal__related-placeholder {
  width: 100%; height: 100%;
  background: #fffdf5;
}

.cnb-modal__related-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cnb-modal__related-eyebrow {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 9px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cnb-accent, #C9A84C);
  -webkit-font-smoothing: antialiased;
}
.cnb-modal__related-title {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cnb-text, #1a1a1a);
  display: block;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
.cnb-modal__related-chips {
  display: flex; flex-wrap: wrap; gap: 3px;
  margin-top: 2px;
}
.cnb-modal__related-chips .cnb-chip {
  font-size: 9px; padding: 2px 6px;
}

/* ── VORANSICHT INHALTSBLÖCKE-FREIFELD ── */
.cnb-modal__preview-content {
  padding: 20px 24px 28px;
  border-top: 1px solid var(--cnb-bd, rgba(201,168,76,.3));
}

/* ── KOMMENTARE TOGGLE ────────────────────────────────────────── */
.cnb-comments-toggle__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cnb-surf2, #fffdf5);
  border: none;
  border-top: 1.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  border-bottom: 1.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  padding: 14px 24px;
  cursor: pointer;
  text-align: left;
  transition: background .2s;
}
.cnb-comments-toggle__btn:hover {
  background: rgba(201,168,76,.08);
}
.cnb-comments-toggle__btn[aria-expanded="true"] {
  border-bottom: none;
}
.cnb-comments-toggle__label {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cnb-accent, #C9A84C);
  -webkit-font-smoothing: antialiased;
}
.cnb-comments-toggle__count {
  background: var(--cnb-accent, #C9A84C);
  color: #fff;
  border-radius: 20px;
  padding: 1px 8px;
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px;
  font-weight: 900;
}
.cnb-comments-toggle__icon {
  margin-left: auto;
  font-size: 20px;
  color: var(--cnb-accent, #C9A84C);
  font-weight: 300;
  line-height: 1;
  transition: transform .2s;
  font-family: Arial, sans-serif;
}
.cnb-comments-toggle__btn[aria-expanded="true"] .cnb-comments-toggle__icon {
  transform: rotate(45deg);
}
.cnb-comments-toggle__body {
  padding: 20px 24px 28px;
}
.cnb-comments-toggle__body[hidden] {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   BOARD TOOLS — Sticky Footer
   ══════════════════════════════════════════════════════════════ */

#cnb-board-tools {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9980;
  background: var(--cnb-bg, #fff);
  border-top: 2px solid var(--cnb-accent, #C9A84C);
  display: none;
  flex-direction: column;
}
#cnb-board-tools.visible { display: flex; }

/* Haupt-Leiste */
.cnb-tools__bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 8px;
  height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cnb-tools__bar::-webkit-scrollbar { display: none; }

/* Label "BOARD TOOLS" */
.cnb-tools__label {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cnb-accent, #C9A84C);
  white-space: nowrap;
  margin-right: 12px;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
}

.cnb-tools__divider {
  width: 1px;
  height: 20px;
  background: var(--cnb-bd, rgba(201,168,76,.3));
  flex-shrink: 0;
  margin: 0 8px;
}

/* Tool-Buttons */
.cnb-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 52px;
  transition: background .15s;
  border-radius: 0;
  text-decoration: none;
}
.cnb-tool-btn:hover { background: rgba(201,168,76,.08); }
.cnb-tool-btn.active { background: rgba(201,168,76,.12); }

.cnb-tool-btn__icon {
  font-size: 18px;
  color: var(--cnb-text2, #555);
  line-height: 1;
}
.cnb-tool-btn__icon--gold { color: var(--cnb-accent, #C9A84C); }
.cnb-tool-btn__icon--green { color: #1D9E75; }

.cnb-tool-btn__label {
  font-family: var(--cnb-font-body, Arial, sans-serif);
  font-size: 9px;
  color: var(--cnb-text3, #999);
  white-space: nowrap;
  line-height: 1;
}

/* Rating Anzeige rechts */
.cnb-tools__rating {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 12px;
}
.cnb-tools__stars {
  display: flex;
  gap: 2px;
}
.cnb-tools__star {
  font-size: 12px;
  color: var(--cnb-accent, #C9A84C);
}
.cnb-tools__star--empty { color: var(--cnb-bd, rgba(201,168,76,.3)); }
.cnb-tools__rating-count {
  font-family: var(--cnb-font-body, Arial, sans-serif);
  font-size: 11px;
  color: var(--cnb-text3, #999);
}

/* Panel das aufklappt (Kommentar, Teilen, Bewerten, Musik) */
.cnb-tools__panel {
  display: none;
  border-top: 1px solid var(--cnb-bd, rgba(201,168,76,.3));
  padding: 16px 20px;
  background: var(--cnb-bg, #fff);
  animation: cnbToolsSlideUp .2s ease;
  max-height: 60vh;
  overflow-y: auto;
}
.cnb-tools__panel.open { display: block; }
@keyframes cnbToolsSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Teilen-Panel */
.cnb-tools__share-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.cnb-tools__share-input {
  flex: 1;
  font-family: var(--cnb-font-body, Arial, sans-serif);
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--cnb-bd, rgba(201,168,76,.3));
  background: var(--cnb-surf2, #fffdf5);
  color: var(--cnb-text, #1a1a1a);
  outline: none;
}
.cnb-tools__share-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cnb-tools__share-btn {
  padding: 5px 14px;
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  border: 1.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  color: var(--cnb-text2, #555);
  cursor: pointer;
  transition: all .15s;
  -webkit-font-smoothing: antialiased;
}
.cnb-tools__share-btn:hover {
  border-color: var(--cnb-accent, #C9A84C);
  color: var(--cnb-accent, #C9A84C);
}

/* Bewerten-Panel */
.cnb-tools__rate-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 8px;
}
.cnb-tools__rate-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--cnb-surf2, #fffdf5);
  border: 1.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  border-radius: 0 var(--cnb-radius, 14px) 0 var(--cnb-radius, 14px);
  cursor: pointer;
  transition: all .15s;
  min-width: 80px;
}
.cnb-tools__rate-btn:hover,
.cnb-tools__rate-btn.voted {
  border-color: var(--cnb-accent, #C9A84C);
  background: rgba(201,168,76,.1);
}
.cnb-tools__rate-icon { font-size: 24px; line-height: 1; }
.cnb-tools__rate-label {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cnb-text, #1a1a1a);
  -webkit-font-smoothing: antialiased;
}
.cnb-tools__rate-count {
  font-size: 10px;
  color: var(--cnb-text3, #999);
}
.cnb-tools__rate-msg {
  font-family: var(--cnb-font-body, Arial, sans-serif);
  font-size: 12px;
  color: var(--cnb-text2, #555);
  text-align: center;
  margin-top: 8px;
}

/* Musik-Panel */
.cnb-tools__music-player {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cnb-tools__music-info { flex: 1; min-width: 0; }
.cnb-tools__music-title {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cnb-text, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-font-smoothing: antialiased;
}
.cnb-tools__music-sub {
  font-size: 11px;
  color: var(--cnb-text3, #999);
  margin-top: 2px;
}
.cnb-tools__music-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.cnb-tools__music-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s;
  font-size: 15px;
  color: var(--cnb-text2, #555);
}
.cnb-tools__music-btn--play {
  border-color: var(--cnb-accent, #C9A84C);
  color: var(--cnb-accent, #C9A84C);
  width: 38px; height: 38px;
}
.cnb-tools__music-btn:hover { background: rgba(201,168,76,.1); }
#cnb-music-iframe { display: none; }

/* Kommentar-Panel nutzt bestehende Styles */
.cnb-tools__panel .cnb-board-panel__body {
  padding: 0;
  max-height: 40vh;
  overflow-y: auto;
}

/* Mobil */
@media (max-width: 600px) {
  /* Label bleibt sichtbar */
  .cnb-tools__label { font-size: 9px; }
  .cnb-tool-btn { padding: 4px 6px; min-width: 36px; }
  .cnb-tool-btn__label { font-size: 8px; }
}

/* ── BOARD TOOLS: Label immer sichtbar ── */
.cnb-tools__label {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cnb-accent, #C9A84C);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 4px;
  -webkit-font-smoothing: antialiased;
}

/* Inline Sterne */
.cnb-tools__inline-rate {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 6px;
  flex-shrink: 0;
}
.cnb-tools__star-btn {
  background: transparent;
  border: none;
  padding: 4px 3px;
  font-size: 20px;
  color: var(--cnb-bd, rgba(201,168,76,.3));
  cursor: pointer;
  line-height: 1;
  transition: color .1s, transform .12s;
}
.cnb-tools__star-btn:hover,
.cnb-tools__star-btn.hover { color: var(--cnb-accent, #C9A84C); transform: scale(1.2); }
.cnb-tools__star-btn.voted { color: var(--cnb-accent, #C9A84C); }
.cnb-tools__star-btn:disabled { cursor: default; }
.cnb-tools__rating-count {
  font-size: 11px;
  color: var(--cnb-text3, #999);
  min-width: 24px;
  padding-left: 2px;
}

/* Kommentar-Panel Heading */
.cnb-tools__panel-heading {
  font-family: var(--cnb-font-body, Arial, sans-serif);
  font-size: 13px;
  color: var(--cnb-text, #1a1a1a);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cnb-bd, rgba(201,168,76,.3));
  margin-bottom: 14px;
  line-height: 1.5;
}
.cnb-tools__panel-heading strong {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-weight: 900;
  color: var(--cnb-accent, #C9A84C);
  letter-spacing: .06em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

/* Mobil: label trotzdem zeigen, nur etwas kleiner */
@media (max-width: 480px) {
  .cnb-tools__label { font-size: 9px; padding: 0 2px; }
  .cnb-tools__star-btn { font-size: 18px; padding: 4px 2px; }
}

/* ── SICHTBARKEITS-CHECKBOXEN ── */
.cnb-visibility-row {
  display: flex;
  gap: 16px;
  margin: 6px 0 8px;
  flex-wrap: wrap;
}
.cnb-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cnb-font-body, Arial, sans-serif);
  font-size: 12px;
  color: var(--cnb-text2, #555);
  cursor: pointer;
  user-select: none;
}
.cnb-check-label input { cursor: pointer; accent-color: var(--cnb-accent, #C9A84C); }

/* ── SCHERE STEIN PAPIER CAPTCHA ── */
.cnb-captcha { margin: 10px 0 8px; }

.cnb-captcha__start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  border-radius: 0 var(--cnb-radius, 14px) 0 var(--cnb-radius, 14px);
  color: var(--cnb-text2, #555);
  font-family: var(--cnb-font-body, Arial, sans-serif);
  font-size: 12px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .2s;
  width: 100%;
  justify-content: center;
}
.cnb-captcha__start:hover {
  border-color: var(--cnb-accent, #C9A84C);
  color: var(--cnb-accent, #C9A84C);
}
.cnb-captcha__game {
  background: var(--cnb-surf2, #fffdf5);
  border: 1px solid var(--cnb-bd, rgba(201,168,76,.3));
  border-radius: 0 var(--cnb-radius, 14px) 0 var(--cnb-radius, 14px);
  padding: 14px;
}
.cnb-captcha__arena {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cnb-captcha__side { text-align: center; flex: 1; }
.cnb-captcha__hand { font-size: 40px; line-height: 1; margin-bottom: 4px; }
.cnb-captcha__side-label { font-size: 10px; color: var(--cnb-text3, #999); }
.cnb-captcha__vs {
  font-size: 11px;
  color: var(--cnb-text3, #999);
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-weight: 900;
  padding: 0 8px;
}
.cnb-captcha__countdown {
  font-size: 32px;
  font-weight: 500;
  color: var(--cnb-accent, #C9A84C);
  text-align: center;
  min-height: 40px;
  line-height: 1.2;
}
.cnb-captcha__choices {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 8px 0;
}
.cnb-captcha__choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--cnb-bg, #fff);
  border: 1.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  border-radius: 0 var(--cnb-radius, 14px) 0 var(--cnb-radius, 14px);
  cursor: pointer;
  font-size: 22px;
  transition: all .15s;
  flex: 1;
}
.cnb-captcha__choice span { font-size: 10px; color: var(--cnb-text3, #999); }
.cnb-captcha__choice:hover,
.cnb-captcha__choice.selected {
  border-color: var(--cnb-accent, #C9A84C);
  background: rgba(201,168,76,.08);
}
.cnb-captcha__choice:disabled { opacity: .5; cursor: default; }
.cnb-captcha__result {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: var(--cnb-radius, 14px);
  text-align: center;
  margin-top: 8px;
}
.cnb-captcha__result--win  { background: #EAF3DE; color: #3B6D11; }
.cnb-captcha__result--draw { background: #FAEEDA; color: #854F0B; }
.cnb-captcha__result--lose { background: #FCEBEB; color: #A32D2D; }
.cnb-captcha__done {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #3B6D11;
  background: #EAF3DE;
  border-radius: 0 var(--cnb-radius, 14px) 0 var(--cnb-radius, 14px);
  padding: 8px 14px;
}
.cnb-captcha__checkmark { font-size: 16px; }

/* Form footer layout */
.cnb-form-footer { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

/* ── BOARD TOOLS NAV-MENÜ ── */
.cnb-tools__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cnb-tools-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
}
.cnb-tools-nav li { margin: 0; padding: 0; }
.cnb-tools-nav li a {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--cnb-font-body, Arial, sans-serif);
  font-size: 12px;
  color: var(--cnb-text2, #555);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
  height: 52px;
  border-left: 0.5px solid var(--cnb-bd, rgba(201,168,76,.3));
}
.cnb-tools-nav li a:hover {
  color: var(--cnb-accent, #C9A84C);
}
.cnb-tools-nav li.current-menu-item a {
  color: var(--cnb-accent, #C9A84C);
  font-weight: 700;
}
@media (max-width: 600px) {
  .cnb-tools__nav { display: none; }
}

/* ── MUSIK INLINE IN BAR ── */
.cnb-tools__inline-music {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cnb-music-play-btn {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  padding: 0 12px !important;
  height: 52px;
  min-width: auto !important;
}
.cnb-music-play-btn .cnb-tool-btn__icon {
  font-size: 16px !important;
}
.cnb-music-play-btn .cnb-tool-btn__label {
  font-size: 11px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── EMOJI REAKTIONEN - größer ── */
.cnb-tools__star-btn { font-size: 18px !important; }

/* ── REAKTIONS-TICKER ── */
.cnb-reaction-count {
  font-family: var(--cnb-font-body, Arial, sans-serif);
  font-size: 10px;
  color: var(--cnb-text3, #999);
  margin-left: 2px;
  min-width: 14px;
  display: inline-block;
}
.cnb-tools__star-btn.voted .cnb-reaction-count {
  color: var(--cnb-accent, #C9A84C);
  font-weight: 700;
}

/* ── CAPTCHA RETRY — wie cnb-btn ── */
.cnb-captcha__retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  padding: 8px 20px;
  background: transparent;
  border: 1.5px solid var(--cnb-accent, #C9A84C);
  border-radius: 0 var(--cnb-radius, 14px) 0 var(--cnb-radius, 14px);
  color: var(--cnb-accent, #C9A84C);
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  -webkit-font-smoothing: antialiased;
}
.cnb-captcha__retry:hover {
  background: var(--cnb-accent, #C9A84C);
  color: #ffffff;
}

/* Board Tools Label als klickbarer Button */
.cnb-tools__label--btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  transition: opacity .15s;
}
.cnb-tools__label--btn:hover { opacity: .7; }

/* ── CAPTCHA FORTSCHRITTS-PUNKTE ── */
.cnb-captcha__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}
.cnb-cap-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--cnb-bd, rgba(201,168,76,.3));
  background: transparent;
  transition: all .3s;
  display: inline-block;
}
.cnb-cap-dot.filled {
  background: var(--cnb-accent, #C9A84C);
  border-color: var(--cnb-accent, #C9A84C);
}

/* ── BOARD NAV LINKS ── */
.cnb-tools-nav-link {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 14px;
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cnb-accent, #C9A84C);
  text-decoration: none;
  white-space: nowrap;
  border-left: 0.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  transition: color .15s, background .15s;
  -webkit-font-smoothing: antialiased;
}
.cnb-tools-nav-link:hover {
  background: rgba(201,168,76,.08);
}

/* Desktop nav — versteckt auf Mobil */
.cnb-tools__nav--desktop { display: flex; }
.cnb-tools__divider--hide-mobile { display: block; }

/* Mobile Nav — eigene Zeile unter der Hauptleiste */
.cnb-tools__mobile-nav {
  display: none;
  border-top: 1px solid var(--cnb-bd, rgba(201,168,76,.3));
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cnb-tools__mobile-nav::-webkit-scrollbar { display: none; }

.cnb-tools-nav-link--mobile {
  height: 40px;
  border-left: none;
  border-right: 0.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  padding: 0 16px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .cnb-tools__nav--desktop { display: none; }
  .cnb-tools__divider--hide-mobile { display: none; }
  .cnb-tools__mobile-nav { display: flex; }
}

/* ── BOARDSTORY PANEL ── */
.cnb-story-body {
  font-family: var(--cnb-font-body, Arial, sans-serif);
  font-size: 14px;
  line-height: 1.75;
  color: var(--cnb-text, #1a1a1a);
}
.cnb-story-body p { margin: 0 0 14px; }
.cnb-story-body h2,
.cnb-story-body h3 {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cnb-accent, #C9A84C);
  margin: 18px 0 8px;
  -webkit-font-smoothing: antialiased;
}
.cnb-story-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px 0;
}
.cnb-story-body a {
  color: var(--cnb-accent, #C9A84C);
  text-decoration: underline;
}
.cnb-story-body ul,
.cnb-story-body ol {
  padding-left: 20px;
  margin: 0 0 14px;
}

/* ── STORY ALS NAV-LINK ── */
.cnb-tools__story-link {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-left: 0.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cnb-accent, #C9A84C);
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
}
.cnb-tools__story-link:hover,
.cnb-tools__story-link.active {
  background: rgba(201,168,76,.1);
}

/* ── MOBILE BOARD TOOLS: 2 Zeilen ─────────────────────────────
   Zeile 1: Board Tools · Kommentare · Teilen · 👍💡❤️
   Zeile 2: Musik · Story · Nav-Links
   ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #cnb-board-tools {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box;
  }

  .cnb-tools__bar {
    flex-wrap: wrap;
    height: auto !important;
    padding: 0;
    overflow-x: visible;
  }

  /* Erste Zeile: Label + Kommentare + Teilen + Reaktionen */
  .cnb-tools__bar > .cnb-tools__label--btn,
  .cnb-tools__bar > .cnb-tools__divider,
  .cnb-tools__bar > .cnb-tool-btn[data-tool="comment"],
  .cnb-tools__bar > .cnb-tool-btn[data-tool="share"],
  .cnb-tools__bar > .cnb-tools__inline-rate {
    flex-shrink: 0;
  }

  /* Zweite Zeile beginnt nach den Reaktionen */
  .cnb-tools__inline-music,
  .cnb-tools__story-link,
  .cnb-tools__nav--desktop {
    border-top: 0.5px solid var(--cnb-bd, rgba(201,168,76,.3));
    height: 44px !important;
  }

  /* Musik inline auf Zeile 2 */
  .cnb-tools__inline-music {
    display: flex;
    align-items: center;
    border-left: none;
  }
  .cnb-music-play-btn {
    height: 44px !important;
  }

  /* Story auf Zeile 2 */
  .cnb-tools__story-link {
    height: 44px;
    border-left: 0.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  }

  /* Nav-Links auf Zeile 2 */
  .cnb-tools__nav--desktop {
    display: flex !important;
    border-left: 0.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  }
  .cnb-tools-nav-link {
    height: 44px !important;
  }

  /* Mobile Nav-Zeile ausblenden — alles in Zeile 2 */
  .cnb-tools__mobile-nav { display: none !important; }

  /* Divider zwischen Zeile 1 und 2 nicht anzeigen */
  .cnb-tools__divider--hide-mobile { display: none !important; }

  /* Buttons auf Zeile 1 kompakter */
  .cnb-tool-btn { padding: 0 10px; height: 44px; min-width: auto; }
  .cnb-tool-btn__icon { font-size: 16px; }
  .cnb-tool-btn__label { font-size: 9px; }
  .cnb-tools__label { font-size: 9px; padding: 0 8px; }
}

/* ── BOARD CHIP (goldene Fläche, weisse Schrift) ── */
.cnb-tools__board-chip {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  background: var(--cnb-accent, #C9A84C);
  border: none;
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  transition: background .15s;
}
.cnb-tools__board-chip:hover {
  background: var(--cnb-accent-dk, #a8893d);
}

/* Alle Tool-Buttons jetzt wie Nav-Links */
.cnb-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 14px !important;
  height: 52px !important;
  background: transparent;
  border: none;
  border-left: 0.5px solid var(--cnb-bd, rgba(201,168,76,.3));
  cursor: pointer;
  flex-shrink: 0;
  min-width: auto !important;
  transition: background .15s;
}
.cnb-tool-btn:hover,
.cnb-tool-btn.active {
  background: rgba(201,168,76,.08);
}
.cnb-tool-btn__icon {
  font-size: 16px;
  color: var(--cnb-accent, #C9A84C);
  line-height: 1;
}
.cnb-tool-btn__label {
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--cnb-accent, #C9A84C) !important;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}

/* Mobil: BOARD chip kleiner */
@media (max-width: 600px) {
  .cnb-tools__board-chip {
    font-size: 10px;
    padding: 0 12px;
    height: 44px;
    letter-spacing: .14em;
  }
  .cnb-tool-btn {
    height: 44px !important;
    padding: 0 10px !important;
  }
  .cnb-tool-btn__label { font-size: 9px !important; }
}

/* ── GRID ZENTRIERUNG DESKTOP + MOBIL ── */
.cnb-grid {
  justify-items: center;
}
.cnb-card {
  width: 100%;
}
@media (min-width: 601px) {
  .cnb-board {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── NAV CHIPS: gleicher Stil wie BOARD ── */
.cnb-tools__nav-chip {
  display: flex !important;
  align-items: center !important;
  height: 52px !important;
  padding: 0 16px !important;
  background: var(--cnb-accent, #C9A84C) !important;
  border: none !important;
  border-left: 1px solid rgba(255,255,255,.25) !important;
  font-family: var(--cnb-font, Arial Black, Arial, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  -webkit-font-smoothing: antialiased !important;
  transition: background .15s !important;
  border-radius: 0 !important;
}
.cnb-tools__nav-chip:hover {
  background: var(--cnb-accent-dk, #a8893d) !important;
  color: #ffffff !important;
}
@media (max-width: 600px) {
  .cnb-tools__nav-chip {
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 10px !important;
  }
}

/* ── MOBILE KACHELN ZENTRIERT ── */
@media (max-width: 600px) {
  .cnb-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .cnb-card {
    width: 100% !important;
    max-width: 440px !important;
  }
}

/* ── BOARD TOOLS: EINZEILIG FLEX-WRAP (alle overrides) ── */
#cnb-board-tools {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}
.cnb-tools__bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}
/* Zweite Reihe beginnt nach den Reaktionen — kein manuelles Wrapping nötig */
.cnb-tools__mobile-nav { display: none !important; }

/* ── KACHELN MOBIL ZENTRIERT ── */
@media (max-width: 600px) {
  .cnb-board > .cnb-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  .cnb-board .cnb-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}