/* ============================================================
   Fehler melden (wiso-support, src/Frontend/Fehlermelder.php)

   Die Farben kommen von der Seite, auf der das Fenster steht: im
   Lernbereich die Merkmale des Lerntrainers (--wlt-*, hell oder
   body.wiso-dark), auf den oeffentlichen Seiten die der Startseite
   (--ws-*, body.ws / body.ws-seite). Die Bruecke steht auf den
   eigenen Elementen und nicht auf :root - sonst bliebe sie im
   Dunkelmodus hell (HANDBUCH, "Die Variablenfalle"). Die Zahlen
   hinter var() greifen nur, wenn eine Seite gar keine Merkmale hat.

   Der Link unter den Fragen setzt Knopfregeln mit !important
   zurueck: die aelteren Bloecke des Lerntrainers gestalten Knoepfe
   in Formularen fast durchgehend so.
   ============================================================ */

.wiso-fm,
.wiso-fm-knopf,
.wiso-fm-zeile {
  --fm-flaeche: var(--wlt-surface, #fff);
  --fm-feld: var(--wlt-bg, #f5f5f7);
  --fm-text: var(--wlt-text, #1d1d1f);
  --fm-grau: var(--wlt-muted, #6e6e73);
  --fm-linie: var(--wlt-line, #d2d2d7);
  --fm-linie-weich: var(--wlt-line-soft, #e8e8ed);
  --fm-marke: var(--wlt-primary, #b3261e);
  --fm-marke-weich: var(--wlt-primary-soft, #f9f1f0);
  --fm-gut: var(--wlt-success, #248a3d);
  --fm-gut-weich: var(--wlt-success-soft, #eaf9f0);
  --fm-fehler: var(--wlt-error-text, #bd0012);
  --fm-schrift: var(--wlt-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --fm-schatten: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .14);
}

body:is(.ws, .ws-seite) :is(.wiso-fm, .wiso-fm-knopf, .wiso-fm-zeile) {
  --fm-flaeche: var(--ws-flaeche, #23272b);
  --fm-feld: var(--ws-grund, #1c1f22);
  --fm-text: var(--ws-vorn, #f5f5f7);
  --fm-grau: var(--ws-grau, rgba(245, 245, 247, .7));
  --fm-linie: var(--ws-linie, rgba(255, 255, 255, .1));
  --fm-linie-weich: var(--ws-linie, rgba(255, 255, 255, .1));
  --fm-marke: var(--ws-marke, #d7373e);
  --fm-marke-weich: rgba(var(--ws-rgb, 255, 255, 255), .1);
  --fm-gut: #3fb95f;
  --fm-gut-weich: rgba(63, 185, 95, .14);
  --fm-schrift: var(--ws-schrift, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --fm-schatten: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ---- Der schwebende Knopf ---------------------------------- */

.wiso-fm-knopf {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 0 16px 0 13px;
  border: 1px solid var(--fm-linie);
  border-radius: 999px;
  background: var(--fm-flaeche);
  color: var(--fm-text);
  font: 600 13.5px/1 var(--fm-schrift);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--fm-schatten);
  cursor: pointer;
  opacity: .94;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.wiso-fm-knopf:hover { opacity: 1; border-color: var(--fm-marke); background: var(--fm-flaeche); color: var(--fm-text); }
.wiso-fm-knopf:active { transform: scale(.97); }
.wiso-fm-knopf:focus-visible { outline: 2px solid var(--fm-marke); outline-offset: 2px; }
.wiso-fm-knopf svg { flex: none; color: var(--fm-marke); }
.wiso-fm-knopf.ist-weg { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* Schmal: nur das Faehnchen, die Beschriftung bleibt fuer
   Bildschirmleser. */
@media (max-width: 700px) {
  .wiso-fm-knopf { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .wiso-fm-knopf span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Die Handyansicht hat unten feste Leisten; dort steht "Fehler
   melden" im Menue und unter jeder Frage. */
body.wlt-mobile-page .wiso-fm-knopf { display: none; }

/* ---- Der Link unter Fragen und Lernseiten ------------------ */

.wiso-fm-zeile {
  grid-column: 1 / -1;
  flex: 1 0 100%;
  width: 100%;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  text-align: left;
}
.wiso-fm-zeile.ist-lernseite { margin-top: 32px !important; padding-top: 16px !important; border-top: 1px solid var(--fm-linie-weich); }

button.wiso-fm-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--fm-grau) !important;
  font: 500 13px/1.3 var(--fm-schrift) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
}
button.wiso-fm-link:hover { color: var(--fm-marke) !important; background: transparent !important; }
button.wiso-fm-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
button.wiso-fm-link:focus-visible { outline: 2px solid var(--fm-marke) !important; outline-offset: 2px !important; }

/* ---- Das Fenster ------------------------------------------- */

dialog.wiso-fm {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--fm-linie);
  border-radius: 18px;
  background: var(--fm-flaeche);
  color: var(--fm-text);
  font: 400 15px/1.5 var(--fm-schrift);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
dialog.wiso-fm::backdrop { background: rgba(10, 12, 14, .55); }

/* Am Telefon von unten, wie das Menue der Handyansicht. */
@media (max-width: 560px) {
  dialog.wiso-fm {
    width: 100vw;
    max-height: 92vh;
    max-height: 92dvh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
  }
}

.wiso-fm * { box-sizing: border-box; }

.wiso-fm-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0 24px;
}
.wiso-fm h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--fm-text);
  font: 700 19px/1.3 var(--fm-schrift);
  letter-spacing: -.01em;
}
.wiso-fm h2 svg { color: var(--fm-marke); }

.wiso-fm button {
  font-family: var(--fm-schrift);
  text-transform: none;
  letter-spacing: 0;
}
.wiso-fm-zu {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fm-grau);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.wiso-fm-zu:hover { background: var(--fm-feld); color: var(--fm-text); }

.wiso-fm-inhalt { padding: 8px 24px 4px; }
.wiso-fm-vorspann { margin: 0 0 18px; color: var(--fm-grau); font-size: 14px; }

.wiso-fm-arten { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.wiso-fm-arten legend,
.wiso-fm-feld > span {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  color: var(--fm-text);
  font-size: 13px;
  font-weight: 650;
}
.wiso-fm-feld em { color: var(--fm-grau); font-style: normal; font-weight: 400; }

.wiso-fm-arten { display: flex; flex-wrap: wrap; gap: 8px; }
.wiso-fm-arten legend { flex: 1 0 100%; }
.wiso-fm-art { position: relative; margin: 0; cursor: pointer; }
.wiso-fm-art input { position: absolute; opacity: 0; pointer-events: none; }
.wiso-fm-art span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--fm-linie);
  border-radius: 999px;
  background: var(--fm-flaeche);
  color: var(--fm-text);
  font-size: 13.5px;
  font-weight: 550;
  transition: border-color .15s ease, background .15s ease;
}
.wiso-fm-art:hover span { border-color: var(--fm-grau); }
.wiso-fm-art input:checked + span { border-color: var(--fm-marke); background: var(--fm-marke-weich); color: var(--fm-text); }
.wiso-fm-art input:focus-visible + span { outline: 2px solid var(--fm-marke); outline-offset: 2px; }

.wiso-fm-bezug {
  margin: -4px 0 14px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--fm-feld);
  color: var(--fm-grau);
  font-size: 13px;
}

.wiso-fm-feld { display: block; margin: 0 0 14px; }
.wiso-fm textarea,
.wiso-fm input[type="email"] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--fm-linie);
  border-radius: 12px;
  background: var(--fm-feld);
  color: var(--fm-text);
  font: 400 15px/1.45 var(--fm-schrift);
  box-shadow: none;
}
.wiso-fm textarea { min-height: 120px; resize: vertical; }
.wiso-fm textarea::placeholder,
.wiso-fm input::placeholder { color: var(--fm-grau); opacity: .8; }
.wiso-fm textarea:focus,
.wiso-fm input[type="email"]:focus { outline: none; border-color: var(--fm-marke); box-shadow: 0 0 0 3px var(--fm-marke-weich); }

.wiso-fm-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wiso-fm-technik { margin: 2px 0 6px; color: var(--fm-grau); font-size: 13px; }
.wiso-fm-technik summary { cursor: pointer; width: fit-content; }
.wiso-fm-technik summary:hover { color: var(--fm-text); }
.wiso-fm-technik dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 10px 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--fm-feld);
}
.wiso-fm-technik dt { color: var(--fm-grau); }
.wiso-fm-technik dd { margin: 0; color: var(--fm-text); overflow-wrap: anywhere; }
.wiso-fm-technik p { margin: 0; }
.wiso-fm-technik a { color: inherit; text-decoration: underline; }

.wiso-fm-meldung { min-height: 20px; margin: 8px 0 0; color: var(--fm-grau); font-size: 13.5px; }
.wiso-fm-meldung:empty { min-height: 0; margin: 0; }
.wiso-fm-meldung.ist-fehler { color: var(--fm-fehler); font-weight: 600; }

.wiso-fm-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px 22px;
}
.wiso-fm-abbrechen,
.wiso-fm-senden,
.wiso-fm-fertig {
  min-height: 44px;
  margin: 0;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 650;
  cursor: pointer;
}
.wiso-fm-abbrechen { border: 1px solid var(--fm-linie); background: transparent; color: var(--fm-text); }
.wiso-fm-abbrechen:hover { background: var(--fm-feld); color: var(--fm-text); }
.wiso-fm-senden,
.wiso-fm-fertig { border: 1px solid var(--fm-marke); background: var(--fm-marke); color: #fff; }
.wiso-fm-senden:hover,
.wiso-fm-fertig:hover { filter: brightness(.94); background: var(--fm-marke); color: #fff; }
.wiso-fm-senden:disabled { opacity: .6; cursor: default; }
.wiso-fm :is(.wiso-fm-abbrechen, .wiso-fm-senden, .wiso-fm-fertig):focus-visible { outline: 2px solid var(--fm-marke); outline-offset: 2px; }

@media (max-width: 560px) {
  .wiso-fm-fuss { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .wiso-fm-fuss button { flex: 1; }
}

.wiso-fm-danke { padding: 36px 28px 30px; text-align: center; }
.wiso-fm-danke h2 { justify-content: center; margin-bottom: 8px; }
.wiso-fm-danke p { margin: 0 auto 22px; max-width: 360px; color: var(--fm-grau); font-size: 14.5px; }
.wiso-fm-haken {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--fm-gut-weich);
  color: var(--fm-gut);
}

.wiso-fm [hidden] { display: none !important; }

@media print {
  .wiso-fm-knopf,
  .wiso-fm-zeile { display: none !important; }
}