/* Hilfe – der Knopf und das Fenster dahinter.

   Arbeitet ausschliesslich mit den Gestaltungswerten aus styles.css. Keine
   eigene Farbe, keine eigene Schriftgrösse, keine erfundene Rundung: Was hier
   steht, ist Anordnung – die Sprache kommt von dort. Auch die Pixelwerte sind
   solche, die in styles.css oder rundgang.css schon vorkommen.

   Drei Entscheidungen, die man dem Bild sonst nicht ansieht:

   1. DER KNOPF IST KEIN ALARM. Er trägt die ruhige Fläche (--surface-2) und
      keine Signalfarbe. Der Akzent gehört dem Knopf, der einen Rapport anlegt –
      das ist die Handlung, um die es hier geht. Eine Hilfe, die lauter ist als
      die Arbeit, drängt sich auf, und sie steht auf jedem Bildschirm.

   2. DAS FENSTER SPERRT DIE SEITE NICHT. Kein abdunkelnder Grund, keine
      Fokusfalle. Wer eine Bedienfrage stellt, muss weiter sehen, worum es
      geht – eine Antwort, die genau das verdeckt, wonach gefragt wurde, ist
      keine. Darum ist es auch schmal und steht am Rand, nicht in der Mitte.

   3. DIE ADRESSE HAT EINE EIGENE FORM. Der Weg zum Menschen sieht nie aus wie
      eine Antwort der Maschine: eigener Kasten, Akzentstrich, Abstand. Der
      Unterschied zwischen "das ist die Antwort" und "das weiss ich nicht" darf
      nicht in der Gestaltung verschwinden.

   Zur Lage der beiden Elemente: Auf dem Handy sitzt der Knopf LINKS unten, denn
   rechts unten steht der schwebende Knopf für einen neuen Rapport (.fab in
   styles.css). Auf dem Schreibtisch gibt es diesen nicht, links steht dafür die
   Seitenleiste – dort sitzt die Hilfe also rechts. Die Höhe folgt in beiden
   Fällen dem, was schon da ist: dieselbe Linie wie .fab, über der unteren
   Navigation.

   Die Stapelhöhen sind bewusst niedriger als die der Systemmeldungen:
   .offline-bar (120), .sel-bar (110), .lic-bar (105) und .toast (100) bleiben
   oben. Eine Meldung "keine Verbindung" darf nie hinter dem Hilfefenster
   verschwinden – sie ist meistens die Antwort auf die Frage, die jemand gerade
   tippen wollte. */

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

.hilfe-knopf {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44px hoch wie jede andere Trefffläche im Programm – mit Handschuhen ist das
     der Unterschied zwischen "geht" und "geht nicht". */
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--dur-schnell) var(--easing), border-color var(--dur-schnell) var(--easing);
}
.hilfe-knopf:hover { background: var(--surface-sunken); border-color: var(--accent); }
.hilfe-knopf:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 3px; }

/* Das Zeichen trägt den Akzent, die Fläche nicht: sichtbar genug, um gefunden
   zu werden, ruhig genug, um nicht zu drängen. */
.hilfe-zeichen {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  flex: none;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: var(--fs-md);
}

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

.hilfe-fenster {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100dvh - 32px));
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: hilfe-rein var(--dur-normal) var(--easing) both;
}

@keyframes hilfe-rein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Acht Pixel Bewegung sind für die einen ein sanfter Auftritt und für die
   anderen Übelkeit. Wer Bewegung abbestellt hat, bekommt das Fenster sofort. */
@media (prefers-reduced-motion: reduce) {
  .hilfe-fenster { animation: none; }
}

.hilfe-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 8px 16px;
  border-bottom: 1px solid var(--border);
}

.hilfe-titel {
  flex: 1;
  margin: 0;
  font-size: var(--fs-lg);
}
.hilfe-titel:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 4px; }

.hilfe-zu {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.hilfe-zu:hover { background: var(--surface-sunken); color: var(--text-primary); }

/* Sichtbar bleiben 30px, getroffen werden 44px – dieselbe Lösung wie beim
   Löschkreuz an den Bildern und bei den Marken der Punktespur. */
.hilfe-zu::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  min-width: 100%;
  min-height: 100%;
}

/* Der Satz, der das Versprechen des Produkts an genau der Stelle einlöst, an
   der es sonst bräche. Er steht fest im Kopf und scrollt nicht weg. */
.hilfe-grenze {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------- Das Gespräch */

.hilfe-lauf {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hilfe-beitraege {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hilfe-satz {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Wer gesprochen hat, steht als Wort da und nicht als Farbe oder Seite. Zwei
   Sprechblasen links und rechts sähen aus wie ein Chat mit einer Person – und
   genau dieser Eindruck ist hier falsch. */
.hilfe-wer {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.hilfe-text {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-primary);
  /* Der Text kommt so, wie er getippt oder geschrieben wurde – Absätze bleiben
     Absätze. Lange Adressen ohne Leerzeichen brechen um, statt das Fenster
     breiter zu machen. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Die eigene Frage steht ruhiger als die Antwort: Man weiss, was man gefragt
   hat. Ein eingerückter Strich ordnet sie zu, ohne sie zu betonen. */
.hilfe-satz.ist-du .hilfe-text {
  color: var(--text-secondary);
  border-left: 2px solid var(--border-strong);
  padding-left: 10px;
}

/* ------------------------------------------------------------- Der Mensch */

/* Eigener Kasten mit Akzentstrich: Der Weg zum Menschen sieht nie aus wie eine
   Antwort der Maschine. Kein Rot und kein Gelb – hier ist nichts schiefgegangen,
   hier übernimmt jemand. */
.hilfe-mensch {
  margin-top: 8px;
  padding: 11px 14px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
}
.hilfe-mensch p { margin: 0 0 6px; font-size: var(--fs-md); line-height: 1.55; }
.hilfe-mensch p:last-child { margin-bottom: 0; }

.hilfe-mensch-kopf {
  font-weight: 650;
  color: var(--text-primary);
}

/* Ohne Adresse ist der Kasten kein Weg, sondern eine offene Frage. Er sagt das
   auch: gestrichelt statt gefüllt, und mit dem Knopf, der es nochmal versucht. */
.hilfe-mensch.ist-leer {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-left: 3px solid var(--border-strong);
}

.hilfe-adresse {
  font-size: var(--fs-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hilfe-nochmal { margin-top: 4px; min-height: 44px; }

/* Die ruhige Dauerzeile im Fuss: immer da, nie im Weg. */
.hilfe-direkt {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
.hilfe-direkt .hilfe-adresse { font-size: var(--fs-sm); }

/* Alles, was das Programm über sich selbst sagt – Ladehinweise, Beispiele, der
   Zusatz zur Antwortzeit. Deutlich leiser als das Gespräch. */
.hilfe-still {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------- Fuss */

.hilfe-fuss {
  border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface-1);
}

/* Ist keine automatische Hilfe eingerichtet, gibt es kein Feld und keine
   zweite Adresszeile – dann soll auch kein leerer Streifen mit Trennlinie
   dastehen, der wie ein abgeschnittenes Bedienelement aussieht. */
.hilfe-fuss:empty { display: none; }

.hilfe-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hilfe-marke {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.hilfe-eingabe {
  /* Niedriger als die Textflächen im Rapportformular: Eine Bedienfrage ist ein
     bis zwei Sätze, und das Gespräch darüber soll sichtbar bleiben. Wächst die
     Frage, zieht der Nutzer das Feld selbst auf (resize: vertical aus
     styles.css). */
  min-height: 58px;
  font-size: var(--fs-md);
}

.hilfe-senden { min-height: 44px; justify-content: center; }

/* ------------------------------------------------------------------ Handy */

@media screen and (max-width: 860px) {
  /* Rechts unten steht der schwebende Knopf für einen neuen Rapport. Die Hilfe
     geht auf die andere Seite, auf dieselbe Linie – und beide liegen über der
     unteren Navigation, nicht darunter. */
  .hilfe-knopf {
    right: auto;
    left: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  /* Als Blatt von unten über die volle Breite: Auf einem Handy ist ein
     schwebendes Kästchen am Rand kleiner als die eingeblendete Tastatur.
     Die Höhe in dvh, damit das Fenster mitschrumpft, sobald die Tastatur
     aufgeht – sonst rutscht das Eingabefeld genau dann darunter, wenn jemand
     hineintippt. */
  .hilfe-fenster {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-height: 86dvh;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

/* ------------------------------------------------------------------ Druck */

/* Auf Papier hat eine Bedienhilfe nichts verloren – und der Knopf läge sonst
   quer über der letzten Zeile jedes Ausdrucks. */
@media print {
  .hilfe-knopf, .hilfe-fenster { display: none !important; }
}