/* ============================================================
   feedback.css — Seiten-Feedback-Widget
   Knopf unten rechts + Fenster (Modal). Nutzt die Design-Tokens
   aus base.css und die vorhandenen .btn-primary/.btn-secondary.
   ============================================================ */

/* ---- Schwebender Knopf -------------------------------------- */
.fb-button {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.95rem;
  border: none;
  border-radius: 999px;
  background: var(--color-positive);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              background var(--transition-fast);
}
.fb-button:hover {
  background: #1d4fd7;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.42);
}
.fb-button:focus-visible {
  outline: 3px solid var(--color-positive-soft);
  outline-offset: 2px;
}
.fb-button svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Auf schmalen Schirmen nur das Symbol zeigen */
@media (max-width: 540px) {
  .fb-button__label { display: none; }
  .fb-button { padding: 0.7rem; }
}

/* ---- Hintergrund / Overlay --------------------------------- */
.fb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(28, 25, 23, 0.45);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.fb-backdrop[hidden] { display: none; }
.fb-backdrop.is-open { opacity: 1; }

/* ---- Fenster ----------------------------------------------- */
.fb-modal {
  position: relative;
  width: min(30rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  padding: 1.6rem 1.6rem 1.4rem;
  transform: translateY(8px) scale(0.98);
  transition: transform var(--transition-base);
}
.fb-backdrop.is-open .fb-modal {
  transform: translateY(0) scale(1);
}

.fb-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: var(--color-text-soft);
  font-size: 1.6rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.fb-modal__close:hover {
  background: var(--color-surface-soft);
  color: var(--color-text);
}

.fb-modal__title {
  margin: 0 1.5rem 0.25rem 0;
  font-size: var(--fs-lg);
  color: var(--color-text);
}
.fb-modal__seite {
  margin: 0 0 1.1rem;
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}

/* ---- Formular ---------------------------------------------- */
.fb-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.fb-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.fb-field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.fb-field__opt {
  font-weight: 400;
  color: var(--color-text-soft);
}
.fb-field__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fb-field__input:focus {
  outline: none;
  border-color: var(--color-positive);
  box-shadow: 0 0 0 3px var(--color-positive-soft);
}
textarea.fb-field__input {
  resize: vertical;
  min-height: 5.5rem;
}

/* ---- Statuszeile ------------------------------------------- */
.fb-status {
  margin: 0;
  font-size: var(--fs-sm);
}
.fb-status--ok { color: var(--color-accent); }
.fb-status--error { color: var(--color-negative); }

/* ---- Aktionen ---------------------------------------------- */
.fb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.2rem;
}

/* Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .fb-button,
  .fb-backdrop,
  .fb-modal { transition: none; }
}