/* Vorlagen-Picker (#102 L5) — Inhalt des HxDrawer-Hosts [data-key="vorlage"]. Token-basiert. */
.hx-drawer-host[data-key="vorlage"] { display: flex; flex-direction: column; }
.vp-wrap { display: flex; flex-direction: column; min-height: 100%; padding: 12px 14px 18px; gap: 10px; }

.vp-tabs { display: flex; gap: 8px; }
.vp-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border, #26313E); background: var(--surface, #161F2A); color: var(--mist, #AEB9C6);
}
.vp-tab svg { width: 16px; height: 16px; }
.vp-tab.on { color: var(--on-gold, #1a1206); border-color: var(--gold, #C9A24B);
  background: linear-gradient(180deg, var(--gold-soft, #D9B86E), var(--bronze, #9C7A33)); }

.vp-search { position: relative; display: flex; align-items: center; }
.vp-search-ic { position: absolute; left: 11px; color: var(--mist, #AEB9C6); display: grid; place-items: center; }
.vp-search-ic svg { width: 15px; height: 15px; }
.vp-search-in {
  width: 100%; padding: 10px 12px 10px 34px; border-radius: 10px;
  border: 1px solid var(--border-2, #313E4D); background: var(--surface, #161F2A); color: var(--text, #F4F1EA); font-size: 13.5px;
}
.vp-search-in:focus { outline: none; border-color: var(--gold, #C9A24B); }

.vp-results { display: flex; flex-direction: column; gap: 6px; }
.vp-empty { padding: 18px 8px; color: var(--mist-dim, #6b7785); font-size: 13px; }

.vp-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 11px; border-radius: 11px; border: 1px solid var(--border, #26313E); background: var(--surface, #161F2A); color: var(--text, #F4F1EA);
}
.vp-item:hover { border-color: var(--gold, #C9A24B); }
.vp-item-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold, #C9A24B) 16%, transparent); color: var(--gold, #C9A24B); }
.vp-item-ic svg { width: 17px; height: 17px; }
.vp-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vp-item-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-item-desc { font-size: 11.5px; color: var(--mist, #AEB9C6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-item-go { flex: 0 0 auto; color: var(--mist-dim, #6b7785); }
.vp-item-go svg { width: 16px; height: 16px; }
.vp-item:hover .vp-item-go { color: var(--gold, #C9A24B); }

.vp-formhead { display: flex; align-items: center; }
.vp-back { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 9px;
  border: 1px solid var(--border-2, #313E4D); background: var(--surface, #161F2A); color: var(--mist, #AEB9C6); cursor: pointer; font-size: 12.5px; }
.vp-back:hover { color: var(--text, #F4F1EA); border-color: var(--gold, #C9A24B); }
.vp-back svg { width: 15px; height: 15px; }
.vp-form-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display, serif); font-size: 16.5px; font-weight: 600; color: var(--text, #F4F1EA); }
.vp-form-title svg { width: 19px; height: 19px; color: var(--gold, #C9A24B); }
.vp-form-sub { font-size: 12.5px; color: var(--mist, #AEB9C6); }
.vp-preview { width: 100%; flex: 1 1 auto; min-height: 280px; border: 1px solid var(--border-2, #313E4D); border-radius: 12px; background: #fff; }
.vp-ph-hint { font-size: 11.5px; color: var(--mist-dim, #6b7785); }

.vp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vp-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 600; border: 1px solid var(--border-2, #313E4D); background: var(--surface, #161F2A); color: var(--text, #F4F1EA);
}
.vp-btn svg { width: 16px; height: 16px; }
.vp-btn:hover { border-color: var(--gold, #C9A24B); }
.vp-btn-primary { color: var(--on-gold, #1a1206); border-color: var(--gold, #C9A24B);
  background: linear-gradient(180deg, var(--gold-soft, #D9B86E), var(--bronze, #9C7A33)); }
.vp-err { font-size: 12.5px; color: var(--red, #e5484d); display: none; }
.vp-err.show { display: block; }