/* v748/v749: Hilfe-Fenster („i“) an Formularfeldern – siehe feldhilfe.js.
 * Rechner: Fenster am Feld (mit Pfeil). Handy (≤ 640 px): Blatt von unten, Editor im Vollbild.
 * v749: Die Hilfe ist ein Dokument (Text und Bilder in beliebiger Reihenfolge); Ansicht und Editor nutzen dieselben
 * Dokumentregeln (.feldhilfe-dok), damit der Editor genau zeigt, was später alle sehen.
 * Bilder stehen immer auf Weiß, damit schwarze Zeichnungen auch im dunklen Design lesbar bleiben. */

.feldhilfe-knopf {
  --feldhilfe-knopf-farbe: color-mix(in srgb, var(--accent) 82%, var(--text));
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: -3px 0 -3px 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--feldhilfe-knopf-farbe);
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.feldhilfe-knopf[hidden] { display: none !important; }
/* Größere Trefferfläche ohne höhere Zeile */
.feldhilfe-knopf::after { content: ""; position: absolute; inset: -9px -10px -7px -8px; border-radius: 12px; }
.feldhilfe-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.feldhilfe-knopf .feldhilfe-punkt { fill: currentColor; stroke: none; }
.feldhilfe-knopf .feldhilfe-symbol-plus { display: none; }
.feldhilfe-knopf--leer { --feldhilfe-knopf-farbe: var(--text-muted); opacity: .8; }
.feldhilfe-knopf--leer .feldhilfe-symbol-info { display: none; }
.feldhilfe-knopf--leer .feldhilfe-symbol-plus { display: block; }
.feldhilfe-knopf--leer svg circle { stroke-dasharray: 2.6 2.4; }
/* v923: am „+“ ein Punkt – hier kann die bisherige gemeinsame Hilfe übernommen werden */
.feldhilfe-knopf--alt { --feldhilfe-knopf-farbe: color-mix(in srgb, var(--accent) 82%, var(--text)); opacity: 1; }
.feldhilfe-knopf--alt::before {
  content: ""; position: absolute; top: 0; right: -1px; width: 7px; height: 7px; border: 1.5px solid var(--bg-elevated);
  border-radius: 50%; background: var(--accent);
}
.feldhilfe-knopf:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); opacity: 1; }
.feldhilfe-knopf:active { transform: scale(.92); }
.feldhilfe-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html.feldhilfe-gesperrt,
html.feldhilfe-gesperrt body { overflow: hidden; overscroll-behavior: none; }
/* Kein Seitensprung beim Sperren: die Breite der Bildlaufleiste bleibt reserviert. */
html.feldhilfe-gesperrt { scrollbar-gutter: stable; }

/* ------------------------------------------------------------------ gemeinsame Bausteine */
.feldhilfe-ansicht,
.feldhilfe-editor,
.feldhilfe-vollbild { color: var(--text); font-family: var(--font); }
.feldhilfe-ansicht svg,
.feldhilfe-editor svg,
.feldhilfe-vollbild svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feldhilfe-editor svg .feldhilfe-voll { fill: currentColor; stroke: none; }
.feldhilfe-kopf-text { display: grid; gap: 2px; min-width: 0; }
.feldhilfe-kicker { color: var(--text-muted); font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.feldhilfe-titel { margin: 0; font-size: 16.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.feldhilfe-schliessen {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; margin: -6px -8px -6px 0; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer;
}
.feldhilfe-schliessen svg { width: 20px; height: 20px; }
/* v829: Knöpfe rechts im Kopf der Hilfe – Vollbild und Schließen, gleich groß und bündig */
.feldhilfe-kopf-knoepfe { display: flex; flex: 0 0 auto; gap: 2px; margin: -6px -8px -6px 0; }
.feldhilfe-kopf-knoepfe .feldhilfe-schliessen { margin: 0; }
.feldhilfe-gross {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; margin: 0; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer;
}
.feldhilfe-gross svg { width: 18px; height: 18px; }
.feldhilfe-gross:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.feldhilfe-gross .feldhilfe-symbol-klein,
.feldhilfe-gross[aria-pressed="true"] .feldhilfe-symbol-gross { display: none; }
.feldhilfe-gross[aria-pressed="true"] .feldhilfe-symbol-klein { display: block; }
.feldhilfe-schliessen:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
:is(.feldhilfe-ansicht, .feldhilfe-editor, .feldhilfe-vollbild) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ Dokument (Ansicht und Editor) */
.feldhilfe-dok { overflow-wrap: anywhere; }
.feldhilfe-dok p { margin: 0 0 10px; }
.feldhilfe-dok h3 { margin: 18px 0 6px; font-size: 1.08em; font-weight: 700; line-height: 1.35; letter-spacing: -.005em; }
.feldhilfe-dok :is(ul, ol) { margin: 0 0 10px; padding-left: 24px; }
.feldhilfe-dok li { margin: 3px 0; padding-left: 2px; }
.feldhilfe-dok li > p { margin: 0; }
.feldhilfe-dok > :first-child { margin-top: 0; }
.feldhilfe-dok > :last-child { margin-bottom: 0; }
.feldhilfe-dok a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.feldhilfe-dok strong { font-weight: 700; }
/* Schriftfarben exakt wie gewählt (in beiden Designs lesbar) */
.feldhilfe-dok [data-farbe="rot"] { color: #e53935; }
.feldhilfe-dok [data-farbe="orange"] { color: #f57c00; }
.feldhilfe-dok [data-farbe="gruen"] { color: #2e9e44; }
.feldhilfe-dok [data-farbe="blau"] { color: #1e88e5; }
.feldhilfe-dok [data-farbe="violett"] { color: #8e24aa; }
.feldhilfe-dok [data-farbe="grau"] { color: #78909c; }
/* Textmarker: Text darin immer dunkel, damit er auch im dunklen Design lesbar bleibt */
.feldhilfe-dok mark { padding: 0 .12em; border-radius: 3px; color: #1d2430; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.feldhilfe-dok mark[data-farbe="gelb"] { background: #fff176; }
.feldhilfe-dok mark[data-farbe="gruen"] { background: #b9f6ca; }
.feldhilfe-dok mark[data-farbe="blau"] { background: #b3e5fc; }
.feldhilfe-dok mark[data-farbe="rosa"] { background: #f8bbd0; }
.feldhilfe-dok mark[data-farbe="orange"] { background: #ffe0b2; }
.feldhilfe-dok mark a { color: #0d47a1; }
/* Bilder: eigene Zeile, mittig, Breite in Prozent – auf schmalen Bildschirmen nie schmaler als 240 px */
.feldhilfe-dok figure {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  width: max(var(--breite, 100%), min(100%, 240px)); max-width: 100%; margin: 14px auto;
}
.feldhilfe-dok figcaption { color: var(--text-muted); font-size: 12.5px; line-height: 1.45; text-align: center; }

/* ------------------------------------------------------------------ Ansicht */
.feldhilfe-ansicht {
  position: fixed;
  inset: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated);
  box-shadow: 0 20px 50px rgb(0 0 0 / 28%), 0 2px 8px rgb(0 0 0 / 12%);
}
.feldhilfe-ansicht:not([open]) { display: none; }
.feldhilfe-ansicht::backdrop { background: transparent; }
.feldhilfe-ansicht[open] { animation: feldhilfe-ein .16s ease-out; }
/* Pfeil zum Symbol */
.feldhilfe-ansicht:not(.feldhilfe-blatt):not(.feldhilfe-mittig)::before {
  content: ""; position: absolute; left: calc(var(--feldhilfe-pfeil, 28px) - 7px); width: 12px; height: 12px;
  border: 1px solid var(--border); background: var(--bg-elevated); transform: rotate(45deg);
}
.feldhilfe-ansicht[data-richtung="unten"]::before { top: -7px; border-right: 0; border-bottom: 0; }
.feldhilfe-ansicht[data-richtung="oben"]::before { bottom: -7px; border-top: 0; border-left: 0; }
.feldhilfe-griff { display: none; }
.feldhilfe-kopf { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; }
.feldhilfe-kopf-symbol {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.feldhilfe-kopf-symbol svg { width: 18px; height: 18px; stroke-width: 1.7; }
.feldhilfe-kopf-symbol .feldhilfe-punkt { fill: currentColor; stroke: none; }
.feldhilfe-kopf .feldhilfe-kopf-text { flex: 1 1 auto; padding-top: 1px; }
.feldhilfe-inhalt {
  display: grid; gap: 16px; flex: 1 1 auto; min-height: 0; padding: 2px 18px 18px; overflow: auto;
  overscroll-behavior: contain; font-size: 14.5px; line-height: 1.6;
}
.feldhilfe-leer { margin: 0; color: var(--text-muted); }
.feldhilfe-bild-knopf {
  /* v923: Die Höhe (kleines Fenster/Blatt: höchstens 420 px bzw. 60 % der Höhe) begrenzt die Breite – hohe Bilder
     stehen schmaler statt mit weißen Rändern; im Vollbild gilt nur die gewählte Breite (wie im Editor). */
  display: block; width: min(100%, calc(var(--feldhilfe-bild-hoehe, min(420px, 60vh)) * var(--fh-verhaeltnis, 1.3333)));
  margin: 0 auto; padding: 0; border: 0; border-radius: 10px; background: none; cursor: zoom-in;
}
.feldhilfe-bild-rahmen {
  position: relative; display: block; width: 100%; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 10px; background: #fff;
}
.feldhilfe-bild-rahmen img { display: block; width: 100%; height: 100%; object-fit: contain; }
.feldhilfe-bild-lupe {
  position: absolute; right: 8px; bottom: 8px; display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: rgb(17 24 39 / 62%); color: #fff; opacity: 0; transition: opacity .15s ease;
}
.feldhilfe-bild-lupe svg { width: 16px; height: 16px; }
.feldhilfe-bild-knopf:hover .feldhilfe-bild-lupe,
.feldhilfe-bild-knopf:focus-visible .feldhilfe-bild-lupe { opacity: 1; }
.feldhilfe-laedt { background: linear-gradient(100deg, #f1f3f6 30%, #e6e9ee 50%, #f1f3f6 70%) 0 0 / 220% 100%; animation: feldhilfe-schimmer 1.2s linear infinite; }
.feldhilfe-laedt img { opacity: 0; }
.feldhilfe-fehler { display: grid; place-items: center; min-height: 120px; background: color-mix(in srgb, var(--bad) 6%, #fff); }
.feldhilfe-fehler::after { content: attr(data-fehlertext); color: #8a2f2c; font-size: 13px; }
.feldhilfe-fehler img { display: none; }
.feldhilfe-fuss { padding: 10px 18px 12px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.feldhilfe-fuss[hidden] { display: none; }
/* Zwei Finger zoomen die Hilfe (feldhilfe.js), nicht die ganze Seite; ein Finger scrollt wie gewohnt.
   v926: keine Zoom-Knöpfe mehr (Anwender) – die Fußzeile ist wieder nur „Zuletzt geändert …“. */
.feldhilfe-ansicht--zoom,
.feldhilfe-inhalt[data-dok-zoom] { touch-action: pan-x pan-y; }
/* Vorschau aus dem Editor (ohne Feld als Anker): mittig */
.feldhilfe-ansicht.feldhilfe-mittig { inset: 0; margin: auto; width: min(480px, calc(100vw - 32px)); height: fit-content; max-height: min(80vh, 760px); }
.feldhilfe-ansicht.feldhilfe-mittig::backdrop { background: rgb(10 14 20 / 45%); }
/* v829: Vollbild – das ganze Browserfenster (Kopf, Inhalt und Fuß auf einer Achse). v923 (Anwender: „die ganze Fläche
   ausnutzen“): keine schmale Mittelspalte mehr, nur ein Rand; Bilder so groß wie im Editor gewählt. */
.feldhilfe-ansicht.feldhilfe-gross-an {
  --feldhilfe-spalte: clamp(16px, 2.4vw, 40px);
  --feldhilfe-bild-hoehe: 100000px;
  inset: 0; width: auto; max-width: none; height: auto; max-height: none; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; padding-bottom: env(safe-area-inset-bottom);
}
/* Pfeil zum Symbol gibt es nur im kleinen Fenster (gleiche Gewichtung wie dessen Regel, daher die :not()) */
.feldhilfe-ansicht.feldhilfe-gross-an:not(.feldhilfe-blatt):not(.feldhilfe-mittig)::before { content: none; }
html.feldhilfe-gesperrt.feldhilfe-gross-offen { scrollbar-gutter: auto; }
.feldhilfe-ansicht.feldhilfe-gross-an::backdrop { background: rgb(10 14 20 / 45%); }
.feldhilfe-gross-an .feldhilfe-kopf { padding: max(16px, env(safe-area-inset-top)) var(--feldhilfe-spalte) 14px; border-bottom: 1px solid var(--border); }
.feldhilfe-gross-an .feldhilfe-inhalt { padding: 20px var(--feldhilfe-spalte) 28px; font-size: 15.5px; }
.feldhilfe-gross-an .feldhilfe-fuss { padding-left: var(--feldhilfe-spalte); padding-right: var(--feldhilfe-spalte); }
.feldhilfe-gross-an .feldhilfe-titel { font-size: 19px; }

/* ------------------------------------------------------------------ Vollbild */
.feldhilfe-vollbild {
  position: fixed; inset: 0; box-sizing: border-box; width: 100vw; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0; overflow: hidden; border: 0; background: #0b0d10; color: #fff;
}
.feldhilfe-vollbild:not([open]) { display: none; }
.feldhilfe-vollbild::backdrop { background: #0b0d10; }
.feldhilfe-vollbild-buehne { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.feldhilfe-gezoomt .feldhilfe-vollbild-buehne { cursor: grab; }
.feldhilfe-vollbild-bild {
  max-width: 100%; max-height: 100%; background: #fff; transform-origin: center center; user-select: none;
  -webkit-user-drag: none; will-change: transform;
}
.feldhilfe-vollbild-oben {
  position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 12px 12px 18px; background: linear-gradient(rgb(0 0 0 / 55%), transparent); pointer-events: none;
}
.feldhilfe-vollbild-oben > * { pointer-events: auto; }
.feldhilfe-vollbild-zaehler { font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.feldhilfe-vollbild-knopf {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%; background: rgb(20 22 26 / 62%); color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.feldhilfe-vollbild-knopf svg { width: 22px; height: 22px; }
.feldhilfe-vollbild-knopf:hover { background: rgb(40 44 52 / 80%); }
.feldhilfe-vollbild-knopf[hidden] { display: none; }
.feldhilfe-vollbild-zurueck,
.feldhilfe-vollbild-weiter { position: absolute; top: 50%; transform: translateY(-50%); }
.feldhilfe-vollbild-zurueck { left: 12px; }
.feldhilfe-vollbild-weiter { right: 12px; }
.feldhilfe-vollbild-unterschrift {
  position: absolute; right: 0; bottom: 0; left: 0; margin: 0; padding: 28px 20px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgb(0 0 0 / 65%)); font-size: 14px; line-height: 1.5; text-align: center; pointer-events: none;
}
.feldhilfe-vollbild-unterschrift[hidden] { display: none; }

/* ------------------------------------------------------------------ Editor */
.feldhilfe-editor {
  box-sizing: border-box; display: flex; flex-direction: column; width: min(820px, calc(100vw - 48px)); max-width: none;
  height: min(88dvh, 920px); max-height: none; margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--border);
  border-radius: 16px; background: var(--bg-elevated); box-shadow: 0 30px 80px rgb(0 0 0 / 35%);
}
.feldhilfe-editor:not([open]) { display: none; }
.feldhilfe-editor[open] { animation: feldhilfe-ein .18s ease-out; }
.feldhilfe-editor::backdrop { background: rgb(10 14 20 / 50%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.feldhilfe-editor-kopf { display: flex; align-items: flex-start; gap: 12px; padding: 18px 24px 14px; border-bottom: 1px solid var(--border); }
.feldhilfe-editor-kopf .feldhilfe-kopf-text { flex: 1 1 auto; }
/* v830: Editor wahlweise im Vollbild (Rechner) – das ganze Browserfenster. v923 (Anwender: „Warum werde ich auf diese
   enge Spalte eingeschränkt?“): die Schreibfläche nutzt die ganze Breite, nur mit Rand – gleicher Rand wie die Hilfe
   im Vollbild, damit Bilder beim Schreiben so groß wirken wie später beim Lesen. */
.feldhilfe-editor.feldhilfe-editor--gross {
  /* Rand an der Fensterbreite gemessen (cqw), nicht in Prozent – sonst bezöge sich die Werkzeugleiste auf die
     innere Fläche und ihre Linie reichte nicht über die ganze Breite. */
  container-type: inline-size;
  --feldhilfe-spalte: clamp(16px, 2.4cqw, 40px);
  inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
}
.feldhilfe-editor--gross .feldhilfe-editor-kopf,
.feldhilfe-editor--gross .feldhilfe-editor-koerper,
.feldhilfe-editor--gross .feldhilfe-meldung,
.feldhilfe-editor--gross .feldhilfe-editor-fuss { padding-left: var(--feldhilfe-spalte); padding-right: var(--feldhilfe-spalte); }
.feldhilfe-editor--gross .fhe-leisten {
  margin-left: calc(-1 * var(--feldhilfe-spalte)); margin-right: calc(-1 * var(--feldhilfe-spalte));
  padding-left: var(--feldhilfe-spalte); padding-right: var(--feldhilfe-spalte);
}
.feldhilfe-geltung { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }
.feldhilfe-editor-koerper {
  display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; padding: 0 24px 20px;
  overflow: auto; overscroll-behavior: contain;
}
.feldhilfe-zaehler { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.feldhilfe-editor .feldhilfe-eingabe {
  box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 40px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--input-bg); color: var(--text);
  font: inherit; font-size: 14px; line-height: 1.45;
}
/* Einzeilige Felder exakt so hoch wie die Knöpfe daneben (40 px, Handy 48 px). */
.feldhilfe-editor input.feldhilfe-eingabe { height: 40px; }
.feldhilfe-editor .feldhilfe-eingabe::placeholder { color: color-mix(in srgb, var(--text-muted) 85%, transparent); }
.feldhilfe-editor .feldhilfe-eingabe:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.feldhilfe-editor .feldhilfe-eingabe[aria-invalid="true"] { border-color: var(--bad); }
.feldhilfe-tipp { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.feldhilfe-fuss-luecke { flex: 1 1 auto; }
.feldhilfe-symbolknopf {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 1px solid transparent;
  border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer;
}
.feldhilfe-symbolknopf svg { width: 19px; height: 19px; }
.feldhilfe-symbolknopf:hover:not(:disabled) { border-color: var(--border); background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.feldhilfe-datei { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.feldhilfe-feldfehler { grid-column: 1 / -1; color: var(--bad); font-size: 12px; }
.feldhilfe-feldfehler[hidden] { display: none; }

/* Werkzeugleiste: klebt beim Scrollen oben */
.fhe-leisten {
  position: sticky; top: 0; z-index: 4; margin: 0 -24px; padding: 10px 24px;
  border-bottom: 1px solid var(--border); background: var(--bg-elevated);
}
.fhe-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.fhe-gruppe { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; padding: 0 8px; border-left: 1px solid var(--border); }
.fhe-gruppe:first-child { padding-left: 0; border-left: 0; }
.fhe-knopf {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; box-sizing: border-box; width: 36px; height: 36px;
  padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.fhe-knopf svg { width: 19px; height: 19px; }
.fhe-knopf:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.fhe-knopf[aria-pressed="true"],
.fhe-knopf[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.fhe-knopf--text { font-size: 15.5px; font-weight: 600; }
.fhe-knopf--text b { font-size: 16.5px; font-weight: 800; }
.fhe-knopf--text i { font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 600; }
.fhe-knopf--text u { text-underline-offset: 2px; }
.fhe-farb-a { margin-top: -5px; font-size: 16px; font-weight: 700; }
.fhe-knopf--farbe svg { margin-top: -5px; width: 18px; height: 18px; }
.fhe-farbstrich { position: absolute; right: 8px; bottom: 6px; left: 8px; height: 4px; border-radius: 2px; background: var(--fhe-strich); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.fhe-knopf--bild {
  display: inline-flex; gap: 6px; width: auto; margin: 0; padding: 0 12px 0 10px; overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent); font-size: 13.5px; font-weight: 650;
}
.fhe-knopf--bild:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.fhe-knopf--bild:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* v831: „Bild“ lesbar (vorher hell 3,4 : 1, dunkel 4,3 : 1) – hell dunkleres, dunkel helleres Blau (≈ 5 bzw. 6 : 1) */
html[data-theme="light"] .fhe-knopf--bild { color: color-mix(in srgb, var(--accent) 78%, #000); }
html[data-theme="dark"] .fhe-knopf--bild { color: color-mix(in srgb, var(--accent) 75%, #fff); }
.fhe-knopftext { color: inherit; }

/* Farbauswahl */
.fhe-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; }
.fhe-palette[hidden] { display: none; }
.fhe-palette-titel { margin-right: 4px; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.fhe-farbe {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 2px solid var(--bg-elevated); border-radius: 50%;
  background: var(--fhe-farbe); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); transition: transform .12s ease, box-shadow .12s ease;
}
.fhe-farbe:hover { transform: scale(1.08); box-shadow: 0 0 0 2px var(--accent); }
.fhe-farbe--marker { color: #1d2430; }
.fhe-farbe-standard {
  min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fhe-farbe-standard:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }

/* Linkzeile */
.fhe-linkleiste { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 40px; align-items: center; gap: 8px; padding-top: 10px; }
.fhe-linkleiste[hidden] { display: none; }
.fhe-linkleiste [data-link-weg][hidden] { display: none; }

/* Schreibfläche */
.fhe-flaeche {
  position: relative; flex: 1 0 auto; box-sizing: border-box; min-height: 280px; padding: 18px 20px 22px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--input-bg); color: var(--text);
  font-size: 15px; line-height: 1.65; outline: 0; cursor: text; caret-color: var(--accent);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.fhe-flaeche:focus-within { border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.fhe-flaeche.fhe-leer::before {
  content: attr(data-platzhalter); position: absolute; top: 18px; right: 20px; left: 20px;
  color: color-mix(in srgb, var(--text-muted) 85%, transparent); pointer-events: none;
}
.fhe-flaeche.fhe-ziel { border-style: dashed; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--input-bg)); }
.fhe-flaeche span[style*="background-color"] { color: #1d2430; border-radius: 3px; }

/* Bild im Editor */
.fhe-flaeche figure.fhe-bild { position: relative; margin: 16px auto; user-select: none; -webkit-user-select: none; cursor: default; }
.fhe-bild-rahmen {
  position: relative; grid-row: 1; grid-column: 1; display: block; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 10px; background: #fff;
  transition: outline-color .12s ease;
  outline: 2px solid transparent; outline-offset: 2px;
}
.fhe-bild-rahmen img { display: block; width: 100%; height: auto; min-height: 60px; pointer-events: none; }
.fhe-bild.fhe-aktiv .fhe-bild-rahmen { outline-color: var(--accent); }
@media (hover: hover) {
  .fhe-bild:not(.fhe-aktiv):hover .fhe-bild-rahmen { outline-color: color-mix(in srgb, var(--accent) 45%, transparent); }
}
.fhe-bild-status {
  position: absolute; inset: auto 8px 8px; display: none; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px; background: rgb(17 24 39 / 76%); color: #fff; font-size: 12px; text-align: center;
}
.fhe-laedt .fhe-bild-status { display: flex; }
.fhe-laedt .fhe-bild-rahmen img { opacity: .5; filter: grayscale(.35); }
.fhe-fehler .fhe-bild-rahmen { min-height: 110px; background: color-mix(in srgb, var(--bad) 8%, #fff); }
.fhe-fehler .fhe-bild-status { display: flex; inset: 50% 12px auto; transform: translateY(-50%); background: transparent; color: #8a2f2c; font-weight: 600; }
.fhe-fehler .fhe-bild-status .feldhilfe-kreisel { display: none; }
.fhe-breite-anzeige {
  position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: rgb(17 24 39 / 76%);
  color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .12s ease;
}
.fhe-zieht .fhe-breite-anzeige { opacity: 1; }
.fhe-zieht .fhe-bild-rahmen { outline-color: var(--accent); }
/* Bildunterschrift: leer nur sichtbar, solange das Bild ausgewählt ist */
.fhe-unterschrift {
  grid-row: 2; grid-column: 1; min-height: 0; padding: 0 8px; border-radius: 6px; color: var(--text-muted);
  font-size: 13px; line-height: 1.5; text-align: center; outline: 0; cursor: text; user-select: text; -webkit-user-select: text;
}
.fhe-unterschrift:empty { display: none; }
.fhe-aktiv .fhe-unterschrift:empty,
.fhe-unterschrift:focus { display: block; }
.fhe-unterschrift:empty::before { content: attr(data-platzhalter); color: color-mix(in srgb, var(--text-muted) 75%, transparent); }
.fhe-aktiv .fhe-unterschrift,
.fhe-unterschrift:focus { padding: 4px 8px; background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
/* Ziehgriff unten rechts am Bild: Bezug ist der Grid-Bereich des Bildes (beide Linien nötig, „auto“ wäre der Rand) */
.fhe-griff {
  position: absolute; grid-row: 1 / 2; grid-column: 1 / 2; right: -9px; bottom: -9px; z-index: 2; display: none; width: 18px; height: 18px;
  border: 2px solid var(--accent); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
  cursor: nwse-resize; touch-action: none;
}
.fhe-griff::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.fhe-aktiv .fhe-griff { display: block; }
@media (hover: hover) { .fhe-bild:hover .fhe-griff { display: block; } }
/* Bildleiste über dem Bild */
.fhe-bildleiste {
  position: absolute; grid-row: 1 / 2; grid-column: 1 / 2; top: 8px; left: 50%; z-index: 3; display: none; align-items: center; gap: 2px;
  padding: 4px; border-radius: 11px; background: rgb(17 24 39 / 90%); color: #fff; white-space: nowrap;
  box-shadow: 0 6px 18px rgb(0 0 0 / 28%); transform: translateX(-50%);
}
.fhe-aktiv .fhe-bildleiste { display: inline-flex; }
.fhe-bildleiste button {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.fhe-bildleiste button:hover { background: rgb(255 255 255 / 16%); }
.fhe-bildleiste button svg { width: 18px; height: 18px; }
.fhe-bildleiste .fhe-gefahr:hover { background: rgb(229 57 53 / 85%); }
.fhe-trenner { width: 1px; height: 20px; margin: 0 3px; background: rgb(255 255 255 / 25%); }

/* v923: bisherige gemeinsame Hilfe – Hinweis oben im Editor mit „Hier übernehmen“ / „Ansehen“ / „Bisherige löschen“ */
.feldhilfe-uebernahme {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px 12px; align-items: start; flex: 0 0 auto;
  margin-top: 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
}
.feldhilfe-uebernahme-symbol {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.feldhilfe-uebernahme-symbol svg { width: 18px; height: 18px; }
.feldhilfe-uebernahme-text { display: grid; gap: 3px; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.feldhilfe-uebernahme-text strong { font-size: 14px; font-weight: 650; }
.feldhilfe-uebernahme-text span { color: var(--text-muted); }
.feldhilfe-uebernahme-knoepfe { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feldhilfe-uebernahme-knoepfe .feldhilfe-loeschen--klein { margin-left: auto; }
.feldhilfe-uebernahme--fertig { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); background: color-mix(in srgb, var(--ok) 9%, var(--bg-elevated)); }
.feldhilfe-uebernahme--fertig .feldhilfe-uebernahme-symbol { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
html[data-theme="light"] .feldhilfe-uebernahme--fertig .feldhilfe-uebernahme-symbol { color: color-mix(in srgb, var(--ok) 70%, #000); }
/* v933: Unterart des offenen Elements nicht ermittelt – keine Attribut-Hilfe, bis sie bekannt ist (nie die des Regelfalls) */
#view-checkliste.hilfe-unterart-unbekannt .feldhilfe-knopf[data-feldhilfe-bereich="attribute"] { display: none !important; }
/* v933: übernommene Hilfe des Regelfalls – auf Wunsch dort entfernen (wirkt erst mit „Speichern“) */
.feldhilfe-uebernahme .feldhilfe-uebernahme-wahl { display: flex; align-items: flex-start; gap: 9px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); cursor: pointer; }
.feldhilfe-uebernahme .feldhilfe-uebernahme-wahl input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.feldhilfe-uebernahme-text .feldhilfe-uebernahme-wahl span { color: var(--text); font-weight: 600; }
.feldhilfe-gefahrzone { display: flex; padding-top: 14px; border-top: 1px dashed var(--border); }
.feldhilfe-loeschen {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--bad); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.feldhilfe-loeschen svg { width: 17px; height: 17px; }
.feldhilfe-loeschen:hover { border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); background: color-mix(in srgb, var(--bad) 9%, transparent); }
/* v831: „Hilfe löschen“ lesbar (vorher hell 4,2 : 1, dunkel 4,3 : 1) – hell dunkleres, dunkel helleres Rot */
html[data-theme="light"] .feldhilfe-loeschen { color: color-mix(in srgb, var(--bad) 85%, #000); }
html[data-theme="dark"] .feldhilfe-loeschen { color: color-mix(in srgb, var(--bad) 75%, #fff); }
.feldhilfe-meldung { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 24px; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.45; }
.feldhilfe-meldung[hidden] { display: none; }
.feldhilfe-meldung-text { flex: 1 1 240px; }
.feldhilfe-meldung-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.feldhilfe-meldung--fehler { background: color-mix(in srgb, var(--bad) 10%, var(--bg-elevated)); color: color-mix(in srgb, var(--bad) 70%, var(--text)); }
.feldhilfe-meldung--frage { background: color-mix(in srgb, var(--warn) 11%, var(--bg-elevated)); }
.feldhilfe-meldung--hinweis { background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated)); }
.feldhilfe-editor-fuss { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--bg-elevated); }
.feldhilfe-schaltflaeche {
  display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.feldhilfe-schaltflaeche:hover:not(:disabled) { border-color: color-mix(in srgb, var(--text) 25%, var(--border)); background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
/* v831: weiße Schrift auf etwas dunklerem Blau bzw. Rot (vorher „Speichern“ hell 3,7 : 1, dunkel 3,2 : 1; „Löschen“
   dunkel 4,0 : 1) – jetzt in beiden Modi über 5 : 1; beim Darüberfahren noch etwas dunkler */
.feldhilfe-schaltflaeche--haupt {
  border-color: color-mix(in srgb, var(--accent) 75%, #000); background: color-mix(in srgb, var(--accent) 75%, #000); color: #fff;
}
.feldhilfe-schaltflaeche--haupt:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 65%, #000); background: color-mix(in srgb, var(--accent) 65%, #000); }
.feldhilfe-schaltflaeche--gefahr {
  border-color: color-mix(in srgb, var(--bad) 85%, #000); background: color-mix(in srgb, var(--bad) 85%, #000); color: #fff;
}
.feldhilfe-schaltflaeche--gefahr:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 75%, #000); }
.feldhilfe-schaltflaeche:disabled { opacity: .6; cursor: progress; }
.feldhilfe-schaltflaeche[hidden] { display: none; }
.feldhilfe-kreisel { width: 13px; height: 13px; border: 2px solid rgb(255 255 255 / 35%); border-top-color: #fff; border-radius: 50%; animation: feldhilfe-drehen .8s linear infinite; }

@keyframes feldhilfe-ein { from { opacity: 0; transform: translateY(4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes feldhilfe-hoch { from { transform: translateY(100%); } to { transform: none; } }
@keyframes feldhilfe-schimmer { to { background-position: -220% 0; } }
@keyframes feldhilfe-drehen { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ Handy */
@media (pointer: coarse) {
  .feldhilfe-knopf { width: 24px; height: 24px; margin: -4px 0 -4px 2px; }
  .feldhilfe-knopf svg { width: 20px; height: 20px; }
  .feldhilfe-knopf::after { inset: -10px -12px -8px -10px; }
  .feldhilfe-bild-lupe { opacity: 1; }
  .fhe-griff { right: -13px; bottom: -13px; width: 26px; height: 26px; }
  .fhe-bildleiste button { width: 40px; height: 40px; }
}

@media (max-width: 640px) {
  .feldhilfe-ansicht.feldhilfe-blatt {
    inset: auto 0 0 0; width: 100%; max-width: none; max-height: min(86dvh, 760px); border-width: 1px 0 0;
    border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -12px 40px rgb(0 0 0 / 30%); transition: transform .18s ease;
  }
  .feldhilfe-ansicht.feldhilfe-blatt[open] { animation: feldhilfe-hoch .22s cubic-bezier(.2, .8, .2, 1); }
  .feldhilfe-ansicht.feldhilfe-blatt::backdrop,
  .feldhilfe-ansicht.feldhilfe-mittig::backdrop { background: rgb(10 14 20 / 45%); }
  .feldhilfe-ansicht.feldhilfe-blatt .feldhilfe-griff { display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 55%, transparent); }
  .feldhilfe-blatt .feldhilfe-kopf { padding: 10px 16px 12px; touch-action: none; }
  .feldhilfe-blatt .feldhilfe-inhalt { padding: 2px 16px 18px; font-size: 15.5px; }
  .feldhilfe-titel { font-size: 17px; }
  .feldhilfe-schliessen { width: 44px; height: 44px; }
  .feldhilfe-gross { width: 44px; height: 44px; }
  .feldhilfe-gross-an .feldhilfe-kopf { padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
  .feldhilfe-gross-an .feldhilfe-inhalt { padding: 16px 16px 22px; }
  .feldhilfe-gross-an .feldhilfe-fuss { padding: 10px 16px 14px; }
  .feldhilfe-dok figcaption { font-size: 13.5px; }
  .feldhilfe-fuss { padding: 10px 16px 14px; }
  .feldhilfe-uebernahme { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .feldhilfe-uebernahme-symbol { width: 28px; height: 28px; }
  .feldhilfe-uebernahme-knoepfe { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feldhilfe-uebernahme-knoepfe .feldhilfe-loeschen--klein { grid-column: 1 / -1; justify-content: center; margin-left: 0; }

  /* Editor im Vollbild; die Höhe folgt dem sichtbaren Bereich über der Tastatur (feldhilfe.js) */
  .feldhilfe-editor { inset: 0 0 auto; width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  /* v830: am Handy ist der Editor immer Vollbild – kein Schalter */
  .feldhilfe-editor .feldhilfe-gross { display: none; }
  .feldhilfe-editor[open] { animation: feldhilfe-hoch .22s cubic-bezier(.2, .8, .2, 1); }
  .feldhilfe-editor-kopf { padding: max(12px, env(safe-area-inset-top)) 12px 12px 16px; }
  .feldhilfe-editor-koerper { gap: 12px; padding: 0 12px 20px; }
  .feldhilfe-editor .feldhilfe-eingabe { min-height: 48px; padding: 12px; font-size: 16px; }
  .feldhilfe-editor input.feldhilfe-eingabe { height: 48px; }
  .fhe-leisten { margin: 0 -12px; padding: 8px 12px; }
  /* Eine Zeile, seitlich wischbar; „Bild“ und „Link“ zuerst, weil man sie am Handy am häufigsten braucht */
  .fhe-werkzeuge { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 -12px; padding: 0 12px; }
  .fhe-werkzeuge::-webkit-scrollbar { display: none; }
  .fhe-gruppe:last-child { order: -1; padding-left: 0; border-left: 0; }
  .fhe-gruppe:first-child { order: 9; padding-left: 8px; border-left: 1px solid var(--border); }
  .fhe-knopf--bild { order: -1; }
  .fhe-knopf { width: 44px; height: 44px; border-radius: 10px; }
  .fhe-knopf svg { width: 21px; height: 21px; }
  .fhe-knopf--bild { width: auto; padding: 0 14px 0 12px; font-size: 15px; }
  .fhe-farbstrich { bottom: 8px; left: 11px; right: 11px; }
  .fhe-farbe { width: 40px; height: 40px; }
  .fhe-farbe-standard { min-height: 40px; font-size: 14px; }
  .fhe-linkleiste { grid-template-columns: minmax(0, 1fr) 48px; grid-template-areas: "adresse zu" "ok ok" "weg weg" "fehler fehler"; }
  .fhe-linkleiste [data-link-adresse] { grid-area: adresse; }
  .fhe-linkleiste [data-link-zu] { grid-area: zu; width: 48px; height: 48px; }
  .fhe-linkleiste [data-link-ok] { grid-area: ok; }
  .fhe-linkleiste [data-link-weg] { grid-area: weg; }
  .fhe-linkleiste .feldhilfe-feldfehler { grid-area: fehler; }
  .fhe-flaeche { min-height: 220px; padding: 14px 14px 18px; font-size: 16px; line-height: 1.6; }
  .fhe-flaeche.fhe-leer::before { top: 14px; right: 14px; left: 14px; }
  .fhe-unterschrift { font-size: 14px; }
  .fhe-tastatur .feldhilfe-kicker,
  .fhe-tastatur .feldhilfe-geltung,
  .fhe-tastatur .feldhilfe-tipp,
  .fhe-tastatur .feldhilfe-gefahrzone { display: none; }
  .fhe-tastatur .feldhilfe-editor-kopf { padding-top: 8px; padding-bottom: 8px; }
  .feldhilfe-loeschen { min-height: 48px; font-size: 15px; }
  .feldhilfe-meldung { padding: 12px 16px; font-size: 14.5px; }
  .feldhilfe-meldung-aktionen { width: 100%; }
  .feldhilfe-meldung-aktionen .feldhilfe-schaltflaeche { flex: 1 1 0; }
  .feldhilfe-editor-fuss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .feldhilfe-editor-fuss .feldhilfe-fuss-luecke { display: none; }
  .feldhilfe-schaltflaeche { min-width: 0; min-height: 48px; padding: 0 10px; font-size: 15px; }
  .feldhilfe-vollbild-zurueck, .feldhilfe-vollbild-weiter { top: auto; bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .feldhilfe-ansicht[open], .feldhilfe-editor[open], .feldhilfe-ansicht.feldhilfe-blatt[open] { animation: none; }
  .feldhilfe-laedt, .feldhilfe-kreisel { animation: none; }
  .feldhilfe-knopf, .feldhilfe-ansicht.feldhilfe-blatt { transition: none; }
}