/* =========================================================
   Wertwerk – Kommentarfunktion für die Abstimmung
   Wird nur geladen, wenn die Kommentar-API erreichbar ist.
   ========================================================= */

.fb-hidden{display:none !important}

/* ---------- Startknopf ---------- */
.fb-launch{
  position:fixed; right:18px; bottom:18px; z-index:9000;
  display:flex; align-items:center; gap:9px;
  background:#14171b; color:#fff; border-radius:999px;
  padding:12px 20px; font-family:inherit; font-size:14.5px; font-weight:600;
  box-shadow:0 6px 24px rgba(20,23,27,.28); cursor:pointer;
  transition:transform .16s ease, background .16s ease;
}
.fb-launch:hover{transform:translateY(-2px)}
.fb-launch.is-on{background:#c4787d}
.fb-launch__n{
  background:#c4787d; color:#fff; border-radius:999px; min-width:22px;
  padding:1px 7px; font-size:12px; font-variant-numeric:tabular-nums;
}
.fb-launch.is-on .fb-launch__n{background:rgba(255,255,255,.24)}

/* ---------- Hinweisleiste im Kommentarmodus ---------- */
.fb-bar{
  position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:9000;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  background:#14171b; color:#fff; border-radius:999px; padding:10px 10px 10px 20px;
  font-size:14px; box-shadow:0 6px 24px rgba(20,23,27,.28); max-width:calc(100vw - 32px);
}
.fb-bar b{font-weight:600}
.fb-bar__btn{
  background:rgba(255,255,255,.16); color:#fff; border-radius:999px;
  padding:6px 14px; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.fb-bar__btn:hover{background:rgba(255,255,255,.28)}

body.fb-mode{cursor:crosshair}
body.fb-mode a,body.fb-mode button,body.fb-mode input,body.fb-mode select,body.fb-mode textarea,body.fb-mode summary{cursor:crosshair}

/* ---------- Pins ---------- */
.fb-pin{
  position:absolute; z-index:8900; width:28px; height:28px; margin:-14px 0 0 -14px;
  border-radius:50% 50% 50% 4px; background:#c4787d; color:#fff; border:2px solid #fff;
  display:grid; place-items:center; font-size:12.5px; font-weight:700; font-family:inherit;
  box-shadow:0 3px 10px rgba(20,23,27,.3); cursor:pointer;
  transition:transform .14s ease;
}
.fb-pin:hover,.fb-pin.is-open{transform:scale(1.15)}
.fb-pin.is-done{background:#2e7d5b}
.fb-pin.is-neu{background:#14171b}

/* ---------- Karte ---------- */
.fb-card{
  position:absolute; z-index:8950; width:320px; max-width:calc(100vw - 28px);
  background:#fff; border-radius:14px; box-shadow:0 10px 40px rgba(20,23,27,.24);
  border:1px solid #efece7; overflow:hidden; font-size:14.5px; color:#14171b;
}
.fb-card__head{
  display:flex; align-items:center; gap:9px; padding:12px 14px;
  border-bottom:1px solid #efece7; background:#faf9f7;
}
.fb-card__head b{font-size:14px}
.fb-card__head .fb-x{margin-left:auto; color:#7b818a; cursor:pointer; font-size:18px; line-height:1; padding:2px 4px}
.fb-card__head .fb-x:hover{color:#14171b}
.fb-card__body{padding:14px; display:flex; flex-direction:column; gap:12px; max-height:46vh; overflow-y:auto}
.fb-card__meta{font-size:12.5px; color:#7b818a}
.fb-card__auszug{font-size:12.5px; color:#7b818a; background:#f6f4f1; border-radius:8px; padding:7px 10px; word-break:break-word}
.fb-card__text{white-space:pre-wrap; word-break:break-word}
.fb-card__foot{display:flex; gap:8px; padding:12px 14px; border-top:1px solid #efece7; flex-wrap:wrap}

.fb-antwort{border-left:2px solid #f0dedd; padding-left:11px; display:flex; flex-direction:column; gap:3px}
.fb-antwort .fb-card__text{font-size:14px}

.fb-input{
  width:100%; border:1px solid #e7e2dc; border-radius:9px; padding:10px 12px;
  font:inherit; font-size:14.5px; color:#14171b; background:#fff; resize:vertical; min-height:84px;
}
.fb-input:focus{outline:0; border-color:#c4787d; box-shadow:0 0 0 3px rgba(196,120,125,.16)}
input.fb-input{min-height:0}

.fb-btn{
  border-radius:999px; padding:9px 18px; font:inherit; font-size:14px; font-weight:600;
  background:#c4787d; color:#fff; cursor:pointer; transition:background .15s ease;
}
.fb-btn:hover{background:#ab5f65}
.fb-btn--ghost{background:#fff; color:#4a5058; border:1px solid #e7e2dc}
.fb-btn--ghost:hover{background:#f6f4f1; color:#14171b}
.fb-btn--sm{padding:7px 14px; font-size:13px}
.fb-btn[disabled]{opacity:.5; cursor:default}

/* ---------- Namensabfrage ---------- */
.fb-modal{
  position:fixed; inset:0; z-index:9100; background:rgba(20,23,27,.45);
  display:grid; place-items:center; padding:20px;
}
.fb-modal__box{
  background:#fff; border-radius:16px; padding:26px; width:340px; max-width:100%;
  display:flex; flex-direction:column; gap:13px; box-shadow:0 20px 60px rgba(20,23,27,.3);
}
.fb-modal__box h3{margin:0; font-size:19px; font-family:inherit}
.fb-modal__box p{margin:0; font-size:14.5px; color:#4a5058}

/* ---------- Übersichtsseite ---------- */
.fb-liste{display:flex; flex-direction:column; gap:16px}
.fb-eintrag{
  background:#fff; border:1px solid #efece7; border-radius:16px; padding:20px;
  display:flex; flex-direction:column; gap:11px;
}
.fb-eintrag.is-done{opacity:.62}
.fb-eintrag__kopf{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.fb-eintrag__nr{
  width:26px; height:26px; border-radius:50% 50% 50% 4px; background:#c4787d; color:#fff;
  display:grid; place-items:center; font-size:12.5px; font-weight:700; flex:none;
}
.fb-eintrag.is-done .fb-eintrag__nr{background:#2e7d5b}
.fb-leer{background:#fff; border:1px dashed #e7e2dc; border-radius:16px; padding:36px; text-align:center; color:#7b818a}

@media (max-width:560px){
  .fb-launch{right:12px; bottom:12px; padding:11px 16px; font-size:14px}
  .fb-card{width:290px}
  .fb-bar{font-size:13px; padding-left:16px}
}
@media (prefers-reduced-motion:reduce){
  .fb-launch,.fb-pin{transition:none}
}