/* ===== Beziehungen-Tab ===== */
.bz-tab { position: relative; overflow: hidden; border: 1px solid #22313a; border-radius: 6px; background: #131a21; }
.bz-board { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bz-tab::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(19, 26, 33, 0.84); }
.bz-inhalt { position: relative; z-index: 2; padding: 0; }

/* Pinterest-Board im Hintergrund */
.bz-board .tp-moodboard__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 4px; height: 100%; }
.bz-board .tp-pin { display: block; min-height: 0; overflow: hidden; }
.bz-board .tp-pin img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bz-board .tp-moodboard__link { display: none; }

/* Titel und Kategorien */
.bz-titel { background: #22313a; color: #c8935f; font-family: 'Aldrich', sans-serif; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 14px; }
.bz-kategorien { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 14px; }
.bz-kat { min-width: 0; margin-bottom: 10px; }
.bz-kat-titel { color: #c8935f; font-family: 'Aldrich', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid #c8935f; padding: 3px 0; margin-bottom: 10px; }
.bz-kat-liste { max-height: 460px; overflow: auto; scrollbar-width: thin; scrollbar-color: #22313a transparent; }
.bz-leer { border-left: 2px solid #22313a; padding: 6px 10px; font-size: 11px; color: #7f8c93; }

/* Beziehungskarten */
.bz-karte { background: rgba(24, 33, 42, 0.88); border-left: 2px solid #22313a; padding: 10px 12px; margin-bottom: 10px; }
.bz-karte:hover { border-left-color: #c8935f; }
.bz-karte__kopf { display: flex; gap: 12px; align-items: center; }
.bz-karte__bild { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 3px; background: #2c3d47; }
.bz-karte__bild img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
.bz-karte__infos { min-width: 0; }
.bz-karte__name, .bz-karte__name a { font-family: 'Aldrich', sans-serif; font-size: 16px; line-height: 1.2; color: #e0e6ea; text-decoration: none; }
.bz-karte__name a i { font-size: 12px; color: #c8935f; }
.bz-karte__npc { font-family: Tahoma, Verdana, sans-serif; font-size: 10px; letter-spacing: 1px; color: #7f8c93; border: 1px solid #56636a; border-radius: 2px; padding: 1px 5px; vertical-align: middle; }
.bz-karte__beziehung { margin-top: 2px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #c8935f; }
.bz-karte__meta { margin-top: 4px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #7f8c93; }
.bz-karte__text { margin: 8px 0 4px; font-size: 12px; line-height: 1.6; color: #aab4ba; }
.bz-karte__optionen { text-align: right; font-size: 11px; color: #56636a; }
.bz-karte__optionen a { color: #7f8c93; }
.bz-karte__optionen a:hover { color: #c8935f; }

/* Formulare (Hinzufügen + Bearbeiten) */
.tp-relations__add { padding: 0 14px 14px; }
.bz-add { margin-top: 10px; }
.bz-form { display: flex; flex-direction: column; gap: 8px; background: rgba(24, 33, 42, 0.88); border-left: 2px solid #22313a; padding: 12px 14px; }
.bz-form__titel { color: #c8935f; font-family: 'Aldrich', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid #c8935f; padding: 3px 0; margin-bottom: 4px; }
.bz-form__reihe { display: flex; gap: 8px; }
.bz-form__reihe > * { flex: 1; min-width: 0; }
.bz-form input.textbox, .bz-form select, .bz-form textarea { box-sizing: border-box; width: 100%; margin: 0; padding: 7px 9px; background: #131a21; border: 1px solid #22313a; border-radius: 3px; color: #c9d1d6; font-size: 12px; }
.bz-form textarea { min-height: 100px; resize: vertical; }
.bz-form input.textbox:focus, .bz-form select:focus, .bz-form textarea:focus { outline: none; border-color: #c8935f; }
.bz-form ::placeholder { color: #56636a; }
.bz-form__knopf { text-align: right; margin-top: auto; }
.bz-form .button { background: transparent; border: 1px solid #c8935f; border-radius: 3px; color: #c8935f; font-family: 'Aldrich', sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; cursor: pointer; }
.bz-form .button:hover { background: #c8935f; color: #131a21; }

/* Bearbeiten-Fenster (Popup) */
.modal:has(.bz-form) { background: #131a21; border: 1px solid #22313a; padding: 0; min-width: 420px; }
.modal .bz-form { background: none; border-left: 0; padding: 16px; }