/* Hilfe oben mittig („Frag Doneforyou …“, app/hilfe.js). Ab 821 px in #oben-zeile, am Handy Vollbild über allem.
   Nur transform-Animationen (keine opacity: unter backdrop-filter der Kopfleiste bleiben solche Elemente in Chromium blass stehen). */
.hilfe-smiley { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--gruen); border: 2px solid var(--text); box-sizing: border-box; }
.hilfe-smiley.klein { width: 22px; height: 22px; border-radius: 7px; }
.hilfe-smiley svg, .hilfe-knopf svg { width: 100%; height: 100%; }
:is(.hilfe-smiley, .hilfe-knopf) svg circle { fill: var(--text); }
:is(.hilfe-smiley, .hilfe-knopf) svg path { fill: none; stroke: var(--text); stroke-width: 1.9; stroke-linecap: round; }
.hilfe-knopf { display: none; }

.hilfe { position: relative; }
.hilfe-leiste { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(14, 14, 14, .04); transition: border-color .15s, box-shadow .15s; }
.hilfe-leiste:hover { border-color: var(--line-strong); }
.hilfe-leiste:focus-within { border-color: var(--text); box-shadow: 0 0 0 3px var(--gruen); }
.hilfe-leiste input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 2px; font: inherit; font-size: 14.5px; color: var(--text); box-shadow: none; }
.hilfe-leiste input::placeholder { color: var(--muted); }
.hilfe-kbd { flex: none; font: 600 11.5px/1 inherit; color: var(--muted); padding: 5px 8px; border-radius: 999px; background: var(--grau); white-space: nowrap; }
.hilfe-senden, .hilfe-zurueck { display: none; }
.hilfe-senden { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 5px; background: var(--text); color: var(--gruen); cursor: pointer; }
.hilfe-senden svg, .hilfe-zurueck svg, .hilfe-x svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hilfe-leiste:has(input:not(:placeholder-shown)) .hilfe-kbd { display: none; }
.hilfe-leiste:has(input:not(:placeholder-shown)) .hilfe-senden { display: block; }

.hilfe-panel { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 45; width: min(620px, calc(100vw - var(--leiste-b, 0px) - 48px)); max-height: min(72vh, 660px);
  display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--schatten-hoch, 0 18px 48px rgba(14, 14, 14, .16)); transform: translateX(-50%); animation: hilfe-rein .16s cubic-bezier(.2, .8, .2, 1); }
.hilfe-panel[hidden] { display: none; }
@keyframes hilfe-rein { from { transform: translateX(-50%) translateY(-6px) scale(.985); } }

.hilfe-treffer { padding: 8px; overflow-y: auto; flex: none; max-height: 46vh; }
.hilfe-treffer[hidden] { display: none; }
.hilfe-gespraech:not([hidden]) ~ .hilfe-fuss { border-top: 1px solid var(--line); }
.hilfe-treffer:not([hidden]) + .hilfe-gespraech:not([hidden]) { border-top: 1px solid var(--line); }
.hilfe-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; cursor: pointer; font-size: 14px; min-width: 0; }
.hilfe-option[aria-selected="true"] { background: var(--grau); }
.hilfe-option > span:not(.hilfe-smiley) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hilfe-option kbd { margin-left: auto; font: 600 12px/1 inherit; color: var(--muted); }
.hilfe-frage-option b { font-weight: 600; }
.hilfe-name { font-weight: 600; flex: none; max-width: 55%; }
.hilfe-zusatz { color: var(--muted); font-size: 13px; }
.hilfe-gruppe { padding: 10px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hilfe-leer { display: flex; gap: 12px; align-items: flex-start; padding: 10px 10px 6px; }
.hilfe-figur { flex: none; width: 44px; height: 44px; object-fit: contain; margin: -4px -4px 0 -6px; }
.hilfe-leer div { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.45; }
.hilfe-leer span:not(.hilfe-smiley) { color: var(--muted); font-size: 13.5px; }
.hilfe-beispiele { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px 56px; }
.hilfe-beispiel { border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.hilfe-beispiel:hover, .hilfe-beispiel:focus-visible { border-color: var(--text); background: var(--gruen-soft); }

.hilfe-gespraech { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.hilfe-gespraech[hidden] { display: none; }
.hilfe-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.hilfe-kopf .text-btn { margin-left: auto; font-size: 13px; }
.hilfe-x { width: 32px; height: 32px; padding: 7px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.hilfe-x:hover { background: var(--grau); color: var(--text); }
.hilfe-verlauf { overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; min-height: 0; flex: 1; }
.hilfe-eintrag { display: flex; flex-direction: column; gap: 10px; }
.hilfe-du { align-self: flex-end; max-width: 85%; margin: 0; padding: 9px 14px; border-radius: 18px 18px 4px 18px; background: var(--text); color: #fff; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.hilfe-antwort { display: flex; gap: 10px; align-items: flex-start; }
.hilfe-text { min-width: 0; flex: 1; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.hilfe-text p { margin: 0 0 8px; }
.hilfe-text :is(ul, ol) { margin: 0 0 8px; padding-left: 20px; }
.hilfe-text li { margin: 2px 0; }
.hilfe-text a { color: var(--text); font-weight: 600; text-decoration-color: var(--gruen-dunkel); text-underline-offset: 2px; }
.hilfe-fehler { color: var(--error); }
.hilfe-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hilfe-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--gruen-soft); border: 1px solid var(--gruen); color: var(--text) !important; text-decoration: none; font-size: 13px; font-weight: 600; }
.hilfe-chip:hover, .hilfe-chip:focus-visible { background: var(--gruen); }
.hilfe-bewertung { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.hilfe-bewertung button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; width: 30px; height: 26px; cursor: pointer; font-size: 13px; }
.hilfe-bewertung button:hover { border-color: var(--text); }
.hilfe-tippt { display: inline-flex; gap: 4px; padding: 6px 0; }
.hilfe-tippt span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: hilfe-tippt 1s infinite ease-in-out; }
.hilfe-tippt span:nth-child(2) { animation-delay: .15s; }
.hilfe-tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes hilfe-tippt { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
.hilfe-fuss { flex: none; margin: 0; padding: 9px 16px 11px; font-size: 12px; color: var(--muted); background: var(--bg); }

/* Ab 821 px: mittig in der Zeile über dem Inhalt, Credits rechts */
@media (min-width: 821px) {
  body.panel:not(.einrichtung-modus) .oben-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 440px) minmax(0, 1fr); gap: 16px; }
  .oben-zeile .hilfe { grid-column: 2; }
  .oben-zeile > :not(.hilfe) { grid-column: 3; justify-self: end; }
}
@media (min-width: 821px) and (max-width: 1000px) { .hilfe-kbd { display: none; } }

/* Handy: Smiley-Knopf in der Kopfzeile, Hilfe als Vollbild */
@media (max-width: 820px) {
  .hilfe-knopf { display: inline-flex; flex: none; width: 36px; height: 36px; padding: 5px; box-sizing: border-box; border-radius: 11px; background: var(--gruen); border: 2px solid var(--text); cursor: pointer; }
  .hilfe-knopf:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
  body.einrichtung-modus .hilfe-knopf { display: none; }
  .hilfe { display: none; }
  html.hilfe-offen .hilfe { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 70; background: var(--bg); padding: calc(10px + env(safe-area-inset-top)) 12px env(safe-area-inset-bottom); box-sizing: border-box; animation: hilfe-handy .18s cubic-bezier(.2, .8, .2, 1); }
  html.hilfe-offen, html.hilfe-offen body { overflow: hidden; }
  @keyframes hilfe-handy { from { transform: translateY(12px); } }
  .hilfe-leiste { height: 46px; flex: none; }
  .hilfe-leiste input { font-size: 16px; }
  .hilfe-zurueck { display: block; flex: none; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; }
  .hilfe-kbd { display: none; }
  .hilfe-panel { position: static; transform: none; width: auto; max-height: none; flex: 1; min-height: 0; margin-top: 10px; border-radius: 20px 20px 0 0; border-bottom: 0; box-shadow: none; animation: none; }
  .hilfe-treffer { max-height: none; flex: 1 1 auto; }
  .hilfe-treffer:not([hidden]) + .hilfe-gespraech:not([hidden]) { flex: 1; }
  .hilfe-beispiele { padding-left: 10px; }
  .hilfe-du { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) { .hilfe-panel, html.hilfe-offen .hilfe { animation: none; } .hilfe-tippt span { animation: none; } }
button.hilfe-chip { cursor: pointer; font-family: inherit; }