:root {
  --hilfe-akzent: #2d7a6f;
  --hilfe-akzent-hover: #24635a;
  --hilfe-flaeche: #ffffff;
  --hilfe-rand: #e5e5e3;
  --hilfe-text: #1a1a1a;
  --hilfe-text-leise: #6b6b6b;
  --hilfe-feld: #ffffff;
}
html.dark-theme {
  --hilfe-akzent: #3db8a6;
  --hilfe-akzent-hover: #34a191;
  --hilfe-flaeche: #161616;
  --hilfe-rand: #232323;
  --hilfe-text: #ebebeb;
  --hilfe-text-leise: #8a8a8a;
  --hilfe-feld: #0f0f0f;
}

.help-widget { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 95; }

.help-widget:not(.help-widget--kopfzeile) .help-fab {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.2rem 0.7rem 1rem;
  background: var(--hilfe-akzent); color: #fff;
  border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.help-widget:not(.help-widget--kopfzeile) .help-fab:hover { background: var(--hilfe-akzent-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
.help-widget:not(.help-widget--kopfzeile) .help-fab:focus-visible { outline: 2px solid var(--hilfe-akzent); outline-offset: 3px; }
.help-fab-icon { width: 22px; height: 22px; flex-shrink: 0; }

.help-panel {
  position: absolute; right: 0; bottom: calc(100% + 0.75rem);
  width: 320px; max-width: calc(100vw - 2.5rem);
  background: var(--hilfe-flaeche); color: var(--hilfe-text);
  border: 1px solid var(--hilfe-rand); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  padding: 1.25rem;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
}
.help-widget.open .help-panel {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity 0.2s, transform 0.2s, visibility 0s;
}

.help-panel-head { display: flex; align-items: center; justify-content: space-between; }
.help-panel-title { font-size: 1.05rem; font-weight: 700; color: var(--hilfe-text); }
.help-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--hilfe-text-leise); cursor: pointer; padding: 0 0.15rem; }
.help-close:hover { color: var(--hilfe-text); }
.help-panel-sub { margin: 0.35rem 0 0.9rem; font-size: 0.85rem; color: var(--hilfe-text-leise); }

.help-form { display: flex; flex-direction: column; gap: 0.55rem; }
.help-form input, .help-form textarea {
  width: 100%; box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  background: var(--hilfe-feld); color: var(--hilfe-text);
  border: 1px solid var(--hilfe-rand); border-radius: 8px;
  font-family: inherit; font-size: 0.86rem;
}
.help-form input:focus, .help-form textarea:focus {
  outline: none; border-color: var(--hilfe-akzent);
  box-shadow: 0 0 0 3px rgba(45,122,111,0.15);
}
.help-form input.error, .help-form textarea.error { border-color: #ef4444; }
.help-form textarea { resize: vertical; min-height: 68px; }
.help-form button {
  margin-top: 0.15rem; padding: 0.65rem 1rem;
  background: var(--hilfe-akzent); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 0.86rem; font-weight: 600;
}
.help-form button:hover:not(:disabled) { background: var(--hilfe-akzent-hover); }
.help-form button:disabled { opacity: 0.6; cursor: default; }

.help-status { margin: 0.5rem 0 0; padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.82rem; }
.help-status.success { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.help-status.error { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
html.dark-theme .help-status.success { background: #0d2b21; border-color: #14503d; }
html.dark-theme .help-status.error { background: #2b1414; border-color: #5a2020; }

.help-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.help-widget--kopfzeile {
  position: relative; right: auto; bottom: auto;
  display: inline-flex; z-index: 60;
}
.help-widget--kopfzeile .help-fab-label {
  position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;
}
.help-widget--kopfzeile .help-fab-icon { width: 16px; height: 16px; }
.help-widget--kopfzeile .help-panel {
  top: calc(100% + 0.5rem); bottom: auto;
  transform-origin: top right;
  transform: translateY(-10px) scale(0.98);
}
.help-widget--kopfzeile.open .help-panel { transform: translateY(0) scale(1); }

@media (max-width: 600px) {
  .help-widget:not(.help-widget--kopfzeile) { right: 0.85rem; bottom: 0.85rem; }
  .help-widget:not(.help-widget--kopfzeile) .help-fab {
    padding: 0.6rem 1rem 0.6rem 0.85rem; font-size: 0.82rem;
  }
}

@media (max-width: 600px) {
  .help-widget--kopfzeile .help-panel {
    position: fixed;
    top: auto; right: 0.75rem; left: 0.75rem;
    width: auto; max-width: none;
    transform-origin: top right;
  }
}

@media print { .help-widget { display: none; } }