/* Feedback-Widget — der Knopf «Feedback zu dieser Seite» unten rechts.
 *
 * Eigene Datei, weil das Widget an ZWEI Orten läuft: auf der öffentlichen
 * Website (site.css) und im Backend (admin.css). Die beiden Stylesheets haben
 * unterschiedliche Farbvariablen (--anthrazit/--gold gegen --ink/--accent),
 * deshalb bringt das Widget seine eigenen mit. Alles ist auf `.fb` begrenzt —
 * es kann keine Regel der Umgebung überschreiben und keine wird vermisst.
 */

.fb {
  --fb-dunkel:   #1F2328;
  --fb-akzent:   #B8975A;
  --fb-weiss:    #FFFFFF;
  --fb-linie:    #C7CDD4;
  --fb-linie-hell:#E5E7EB;
  --fb-flaeche:  #FAF7F2;
  --fb-feld:     #F3F4F6;
  --fb-text:     #1F2328;
  --fb-text-soft:#4B5563;
  --fb-grau:     #6B7280;

  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  font-size: 15px;
  /* Das Backend nutzt eine andere Grundschrift als die Website — das Widget
     erbt sie bewusst, damit es sich am jeweiligen Ort zu Hause anfühlt. */
  font-family: inherit;
}

.fb-btn { display: flex; align-items: center; gap: 0; background: var(--fb-dunkel); color: #fff;
  border: none; border-radius: 30px; height: 52px; padding: 0 16px; cursor: pointer;
  box-shadow: 0 12px 30px rgba(31,35,40,.28); font: inherit; font-weight: 600; }
.fb-ico { font-size: 1.15rem; line-height: 1; }
.fb-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .25s ease, opacity .2s ease, margin-left .25s ease; }
.fb-btn:hover .fb-label, .fb-btn:focus-visible .fb-label, .fb.open .fb-label {
  max-width: 260px; opacity: 1; margin-left: 10px; }
.fb-btn:hover { background: var(--fb-akzent); }

.fb-panel { position: absolute; right: 0; bottom: 64px; width: 370px; max-width: calc(100vw - 44px);
  max-height: calc(100vh - 100px); display: flex; flex-direction: column;
  background: var(--fb-weiss); border: 1px solid var(--fb-linie); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(31,35,40,.24); overflow: hidden; }
.fb-panel[hidden] { display: none; }  /* sonst überstimmt display:flex das hidden-Attribut */
.fb-head { display: flex; align-items: flex-start; justify-content: space-between; flex: none;
  padding: 18px 20px 12px; background: var(--fb-flaeche); border-bottom: 1px solid var(--fb-linie-hell); }
.fb-eyebrow { margin: 0; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fb-akzent); }
.fb-head strong { font-size: 1.05rem; color: var(--fb-text); }
.fb-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--fb-grau);
  cursor: pointer; padding: 0 4px; }
.fb-body, .fb-done { padding: 18px 20px 20px; overflow-y: auto; color: var(--fb-text); }
.fb-field { display: block; margin-bottom: 14px; }
/* Muss nach der Regel oben stehen: `display: block` würde das hidden-Attribut
   sonst überstimmen (gleiche Falle wie bei .fb-panel[hidden]). */
.fb-field[hidden] { display: none; }
.fb-field > span { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fb-grau); margin-bottom: 5px; }
.fb-field input, .fb-field select, .fb-field textarea { width: 100%; font: inherit; color: var(--fb-text);
  background: var(--fb-feld); border: 1px solid var(--fb-linie-hell); border-radius: 9px; padding: 10px 12px; }
.fb-field textarea { resize: vertical; }
.fb-field input:focus, .fb-field select:focus, .fb-field textarea:focus {
  outline: none; border-color: var(--fb-akzent); background: var(--fb-weiss); }
.fb-known { margin: 0 0 14px; font-size: .88rem; color: var(--fb-text-soft); }
.fb-link { background: none; border: none; padding: 0; color: var(--fb-akzent); font: inherit;
  text-decoration: underline; cursor: pointer; }
#fb-website { position: absolute; left: -9999px; width: 1px; height: 1px; }
.fb-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; background: #FBEAEA;
  color: #8A2A2A; font-size: .9rem; }
.fb-send { width: 100%; background: var(--fb-dunkel); color: #fff; border: none; border-radius: 10px;
  padding: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.fb-send:hover { background: var(--fb-akzent); }
.fb-send:disabled { opacity: .6; cursor: default; }
.fb-hint { margin: 10px 0 0; font-size: .78rem; color: var(--fb-grau); text-align: center; }
.fb-done { text-align: center; }
.fb-check { font-size: 2rem; color: var(--fb-akzent); margin: 6px 0 4px; }

@media (max-width: 560px) {
  .fb { right: 14px; bottom: 14px; }
  .fb-panel { width: calc(100vw - 28px); }
}