/*
 * Finance Suite - Support-Widget (Landing, blum-finance.com).
 *
 * 1:1-Portierung von .sup-* aus static/app.css (Terminal, dort Z.7950-8063).
 * Die Landing laedt app.css nicht - keine der dortigen --Variablen ist auf
 * allen fuenf Seiten identisch verfuegbar (siehe Bericht Schritt 1c), darum
 * hier eigene --sup-*-Tokens mit den Terminal-Literalwerten, gesetzt auf
 * .sup-root statt auf :root (keine Kollision mit den auf index.html
 * vorhandenen --accent-Werten). --font bleibt var(--font): einzige Variable,
 * die auf allen fuenf Seiten identisch definiert ist.
 *
 * z-index 3000 statt 5000 (Terminal) ist bewusst: eigene Skala, 40 ist der
 * bisher hoechste Wert auf der Landing.
 */
.sup-root {
  --sup-accent: #5b8cff;
  --sup-accent-2: #a06bff;
  --sup-accent-3: #35e0c8;
  --sup-accent-glow: 0 0 10px rgba(91, 140, 255, .35);
  --sup-blur: 8px;
  --sup-dur-base: 160ms;
  --sup-ease: ease;
  --sup-fs-body: .8rem;
  --sup-fs-meta: .72rem;
  --sup-fs-sub: 1.05rem;
  --sup-neg: #ff5d6c;
  --sup-sp-2: 8px;
  --sup-sp-3: 12px;
  --sup-sp-4: 16px;
  --sup-sp-5: 24px;
  --sup-text-dim: #8a93ad;
  --sup-text-strong: #f4f7ff;
  --sup-tile-bg: rgba(20, 27, 48, .55);
  --sup-tile-bg-hover: rgba(28, 37, 64, .68);
  --sup-tile-border: rgba(255, 255, 255, .08);
  --sup-tile-border-hi: rgba(120, 160, 255, .35);
  --sup-tile-radius: 8px;
  --sup-tile-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}

.sup-btn {
  position: fixed;
  right: var(--sup-sp-5);
  bottom: var(--sup-sp-5);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: none;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--sup-accent), var(--sup-accent-2));
  box-shadow: var(--sup-tile-shadow), var(--sup-accent-glow);
  z-index: 3000;
  transition: transform var(--sup-dur-base) var(--sup-ease);
}
.sup-btn:hover { transform: scale(1.06); }
.sup-btn svg { width: 22px; height: 22px; }

.sup-panel {
  position: fixed;
  right: var(--sup-sp-5);
  bottom: calc(52px + var(--sup-sp-5) + var(--sup-sp-3));
  width: 340px;
  max-width: calc(100vw - 2 * var(--sup-sp-4));
  z-index: 3000;
  background: var(--sup-tile-bg);
  backdrop-filter: blur(var(--sup-blur));
  -webkit-backdrop-filter: blur(var(--sup-blur));
  border: 1px solid var(--sup-tile-border);
  border-radius: var(--sup-tile-radius);
  box-shadow: var(--sup-tile-shadow);
  padding: var(--sup-sp-4);
}

.sup-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sup-sp-2);
}
.sup-panel-title {
  font-size: var(--sup-fs-sub);
  font-weight: 700;
  color: var(--sup-text-strong);
}
.sup-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--sup-text-dim);
  cursor: pointer;
}
.sup-close:hover { background: var(--sup-tile-bg-hover); color: var(--sup-text-strong); }
.sup-close svg { width: 16px; height: 16px; }

.sup-intro {
  margin: 0 0 var(--sup-sp-3);
  font-size: var(--sup-fs-body);
  line-height: 1.5;
  color: var(--sup-text-dim);
}

/* static/app.css:2065 (.sec-field) setzt im Terminal display:block auf dem
   Label - .sec-field existiert auf der Landing nicht. Ohne diese Zeile bleibt
   <label> display:inline, vertikale Margins auf Inline-Boxen erzeugen keinen
   Abstand im Fluss, und der Abstand zur Statuszeile darunter fehlt. */
.sup-field { display: block; margin-bottom: var(--sup-sp-3); }

.sup-label {
  display: block;
  margin-bottom: var(--sup-sp-2);
  font-size: var(--sup-fs-meta);
  color: var(--sup-text-dim);
}

.sup-email,
.sup-textarea {
  display: block;
  width: 100%;
  padding: var(--sup-sp-3);
  border-radius: 10px;
  border: 1px solid var(--sup-tile-border);
  background: rgba(255, 255, 255, .04);
  color: var(--sup-text-strong);
  font-family: var(--font);
  font-size: 16px; /* nie kleiner - sonst zoomt iOS Safari beim Fokus hinein */
  outline: none;
  transition: border-color var(--sup-dur-base), box-shadow var(--sup-dur-base);
}
.sup-textarea { min-height: 88px; resize: vertical; }
.sup-email::placeholder,
.sup-textarea::placeholder { color: var(--sup-text-dim); }
.sup-email:focus,
.sup-textarea:focus {
  border-color: var(--sup-tile-border-hi);
  box-shadow: 0 0 0 3px rgba(91, 140, 255, .14);
}

/* Honeypot: fuer Menschen unsichtbar, aber nicht per display:none - manche
   Bots ueberspringen als display:none erkannte Felder nicht. Stattdessen
   ausserhalb des sichtbaren Bereichs positioniert. */
.sup-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sup-status {
  margin-bottom: var(--sup-sp-3);
  font-size: var(--sup-fs-meta);
  line-height: 1.5;
}
.sup-status.ok  { color: var(--sup-accent-3); }
.sup-status.err { color: var(--sup-neg); }

/* .btn-grad existiert auf der Landing nicht (static/app.css) - eigener,
   minimaler Knopfstil statt der Terminal-Klasse. Fusst auf der zuletzt im
   Stylesheet stehenden .btn-grad-Fassung (app.css:2116-2132, gewinnt in der
   Kaskade gegenueber der ersten Fassung Z.1822): padding, border-radius 6px,
   disabled-Opazitaet .6. */
.sup-send {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: var(--sup-sp-3);
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--sup-accent), var(--sup-accent-2));
  box-shadow: var(--sup-accent-glow);
  color: #fff;
  font-family: var(--font);
  font-size: .9rem; /* app.css:2124, --fs-ui - kein --sup-Token: einziger Ort,
                        an dem dieser Wert gebraucht wird */
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--sup-dur-base), filter var(--sup-dur-base);
}
.sup-send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.sup-send:disabled { opacity: .6; cursor: default; }

@media (max-width: 480px) {
  .sup-panel {
    right: var(--sup-sp-3);
    left: var(--sup-sp-3);
    width: auto;
    max-width: none;
  }
  .sup-btn { right: var(--sup-sp-3); bottom: var(--sup-sp-3); }
}

/* landing/index.html:538-542 (.modal-overlay, Registrierungs-/Warteliste-
   Modal) liegt mit z-index:10 unter dem Knopf (z-index:3000) - waere bei
   offenem Modal weiterhin sichtbar und klickbar darueber. */
body:has(.modal-overlay:not([hidden])) .sup-root { display: none; }