/* EH — Dokument ansehen und markieren (js/eh-dok-ansicht.js). Am Handy über
   den ganzen Bildschirm, am Desktop ein grosser Kasten in der Mitte. Über der
   Kopfleiste (z-index 100) und den Dialogen der Seite (200), unter den
   Meldungen (300). */
.ehda-schicht{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;}
.ehda-schicht[hidden]{display:none;}
.ehda-dialog{position:relative;background:#fff;color:#0f1a12;border-radius:16px;width:100%;max-width:1100px;height:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.3);outline:none;}
.ehda-mit-markierung{max-width:1400px;}
.ehda-kopf{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1.5px solid #d4e8db;background:#f6faf7;}
.ehda-kopf-text{flex:1 1 auto;min-width:0;}
.ehda-titel{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;}
.ehda-meta{font-size:12px;color:#3a5244;margin-top:3px;line-height:1.4;overflow-wrap:anywhere;}
.ehda-zu{flex:0 0 auto;min-height:44px;min-width:44px;padding:8px 14px;border:1.5px solid #d4e8db;border-radius:10px;background:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;color:#0f1a12;cursor:pointer;}
.ehda-zu:hover{border-color:#1DB954;color:#0d6b2f;}
.ehda-zu:focus-visible,.ehda-koerper:focus-visible{outline:2px solid #1DB954;outline-offset:2px;}
.ehda-koerper:focus-visible{outline-offset:-3px;}

/* Leiste: Zoom, Liste, Werkzeuge, Farben */
.ehda-leiste{display:flex;flex-direction:column;gap:6px;padding:8px 16px;border-bottom:1.5px solid #d4e8db;background:#fff;}
.ehda-leiste-zeile{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
.ehda-gruppe{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.ehda-gruppe[hidden],.ehda-recht[hidden],.ehda-liste-auf[hidden],.ehda-herunter[hidden],.ehda-eigenschaften[hidden],
.ehda-schrift-feld[hidden],.ehda-fuellung[hidden],.ehda-loeschen[hidden]{display:none!important;}
/* Eigenschaften: Farbe, Schrift, Strich, Füllung, Stempel, Löschen */
.ehda-eigenschaften{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;}
.ehda-schrift-feld{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#3a5244;}
.ehda-schrift-wahl{min-height:44px;font-size:16px;padding:6px 8px;border:1.5px solid #d4e8db;border-radius:10px;background:#fff;color:#0f1a12;font-family:'DM Sans',sans-serif;}
.ehda-schrift-wahl:focus-visible{outline:2px solid #1DB954;outline-offset:2px;}
.ehda-strich-knopf{flex-direction:column;gap:3px;padding:6px 10px;}
.ehda-strich-probe{display:block;width:26px;background:#0f1a12;border-radius:2px;}
.ehda-strich-name{font-size:11px;font-weight:700;}
.ehda-herunter{margin-right:auto;}
.ehda-zoom{display:flex;align-items:center;gap:4px;}
.ehda-zoom-wert{min-width:52px;text-align:center;font-size:13px;font-weight:700;color:#3a5244;font-variant-numeric:tabular-nums;}
.ehda-knopf{min-height:44px;min-width:44px;padding:6px 12px;border:1.5px solid #d4e8db;border-radius:10px;background:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;color:#0f1a12;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;box-sizing:border-box;}
.ehda-knopf:hover:not(:disabled){border-color:#1DB954;color:#0d6b2f;}
.ehda-knopf:focus-visible{outline:2px solid #1DB954;outline-offset:2px;}
.ehda-knopf:disabled{opacity:.5;cursor:default;}
.ehda-knopf[aria-pressed="true"]{background:#e8f8ee;border-color:#1DB954;color:#0d6b2f;box-shadow:inset 0 0 0 1px #1DB954;}
.ehda-knopf.ehda-haupt{background:#1DB954;border-color:#1DB954;color:#fff;}
.ehda-knopf.ehda-haupt:hover:not(:disabled){background:#17a349;color:#fff;}
.ehda-knopf.ehda-gefahr{color:#991b1b;border-color:#fecaca;}
.ehda-knopf.ehda-gefahr:hover:not(:disabled){border-color:#dc2626;color:#991b1b;}
.ehda-werkzeug-symbol{width:18px;height:18px;flex:0 0 auto;}
.ehda-farbe{padding:6px;}
.ehda-farbe-punkt{display:block;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(15,26,18,.3);}
.ehda-farbe[aria-pressed="true"] .ehda-farbe-punkt{box-shadow:0 0 0 2px #fff,0 0 0 4px #0f1a12;}
.ehda-recht{font-size:13px;line-height:1.4;color:#3a5244;background:#f6faf7;border:1.5px solid #d4e8db;border-radius:10px;padding:8px 10px;}
/* Hinweis: über dem unteren Rand des Dokuments, verschiebt nichts */
.ehda-mhinweis{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;font-size:13px;line-height:1.4;color:#fff;background:rgba(15,26,18,.92);border-radius:10px;padding:8px 12px;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.2);}
.ehda-mhinweis:empty{display:none;}
.ehda-mhinweis.ehda-fehler{background:#991b1b;font-weight:700;}
.ehda-mit-markierung .ehda-koerper{padding-bottom:120px;}
@media (min-width:900px){ .ehda-mit-markierung .ehda-mhinweis{right:calc(320px + 12px);} }
.ehda-liste-auf{display:none;}

/* Inhalt: das Dokument, daneben die Liste */
.ehda-inhalt{position:relative;flex:1 1 auto;min-height:0;display:flex;}
.ehda-koerper{flex:1 1 auto;min-width:0;overflow:auto;padding:16px;background:#e8ede9;overscroll-behavior:contain;}
.ehda-status{font-size:13px;color:#3a5244;margin-bottom:10px;}
.ehda-status:empty{display:none;}
.ehda-status.ehda-fehler{color:#991b1b;font-weight:700;background:#fef2f2;border:1.5px solid #fecaca;border-radius:10px;padding:12px 14px;}
.ehda-seiten{display:flex;flex-direction:column;align-items:stretch;gap:14px;}
/* Zoom: nur die Breite. Wird eine Seite breiter als der Kasten, beginnt sie
   links und der Kasten scrollt seitlich (auto-Ränder werden dann 0). */
.ehda-seite{margin:0 auto;width:calc(100% * var(--ehda-zoom,1));max-width:calc(900px * var(--ehda-zoom,1));flex:0 0 auto;box-sizing:border-box;}
.ehda-flaeche{position:relative;width:100%;}
.ehda-platz{width:100%;background:#fff;border:1px solid #d4e8db;display:flex;align-items:center;justify-content:center;color:#6a8a77;font-size:12px;box-sizing:border-box;}
.ehda-leinwand{display:block;width:100%;height:auto;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.ehda-nr{font-size:11px;color:#3a5244;text-align:center;margin-top:4px;}
.ehda-bild{display:block;width:100%;height:auto;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);}

/* Markierungen auf der Seite: in Prozent der Fläche, gleich bei jedem Zoom */
.ehda-pfeile{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.ehda-ebene{position:absolute;inset:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.ehda-modus .ehda-ebene{cursor:crosshair;}
.ehda-mark{position:absolute;transform:translate(-50%,-50%);color:var(--ehda-farbe,#ef4444);cursor:pointer;line-height:1;}
.ehda-mark-zeichen{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.88);border:2px solid currentColor;box-sizing:border-box;}
.ehda-mark-zeichen svg{width:20px;height:20px;}
/* Textfeld und Text mit Pfeil: Kasten in Prozent der Seite, darin ein SVG in
   A4-Punkten mit den Zeilen aus js/eh-dok-markierung.js. Helvetica wie im
   PDF; die Zeilen sind schon umbrochen, nichts bricht hier noch einmal. */
.ehda-mark-kasten,.ehda-mark-form{transform:none;}
.ehda-mark-kasten .ehda-mark-text{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;}
.ehda-mark-text text{font-family:Helvetica,Arial,'Liberation Sans','Nimbus Sans',sans-serif;white-space:pre;}
/* Rahmen, Hervorheben, Linie: die Form steht im SVG der Seite; hier nur die Nummer */
.ehda-mark-form{width:0;height:0;pointer-events:none;}
.ehda-mark-form .ehda-mark-nr{right:auto;left:-10px;pointer-events:auto;cursor:pointer;}
.ehda-pfeile .ehda-mark-wartet,.ehda-pfeile .ehda-mark-fehlt{opacity:.6;}
.ehda-mark-kasten.ehda-mark-wartet{outline:2px dashed var(--ehda-farbe,#ef4444);outline-offset:2px;}
.ehda-mark-kasten.ehda-mark-fehlt{outline:2px dashed #991b1b;outline-offset:3px;}
.ehda-mark-kasten.ehda-mark-gewaehlt,.ehda-mark-kasten.ehda-mark-hervor{box-shadow:0 0 0 4px rgba(29,185,84,.55);}
.ehda-mark-form.ehda-mark-hervor .ehda-mark-nr{box-shadow:0 0 0 4px rgba(29,185,84,.55);}
/* Die gewählte Markierung: Rahmen zum Verschieben, Griffe je 44 px (der
   sichtbare Punkt ist kleiner). touch-action:none — hier scrollt der Finger
   nicht, er zieht. */
.ehda-auswahl{position:absolute;outline:2px dashed #1DB954;background:rgba(29,185,84,.06);touch-action:none;cursor:move;z-index:4;box-sizing:border-box;}
.ehda-auswahl-punkt{width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;}
/* --ax/--ay: wo der Punkt im Griff sitzt (setzt das Skript; mittig, bei kleinen Kästen aussen) */
.ehda-griff{position:absolute;width:44px;height:44px;transform:translate(calc(-1 * var(--ax,22px)),calc(-1 * var(--ay,22px)));touch-action:none;z-index:5;}
.ehda-griff::after{content:'';position:absolute;left:var(--ax,22px);top:var(--ay,22px);width:14px;height:14px;margin:-7px 0 0 -7px;background:#fff;border:2px solid #1DB954;border-radius:3px;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.ehda-griff-spitze::after,.ehda-griff-p1::after,.ehda-griff-p2::after{border-radius:50%;}
.ehda-griff-spitze::after{border-color:#0f1a12;}
.ehda-griff-nw,.ehda-griff-se{cursor:nwse-resize;}
.ehda-griff-ne,.ehda-griff-sw{cursor:nesw-resize;}
.ehda-griff-n,.ehda-griff-s{cursor:ns-resize;}
.ehda-griff-e,.ehda-griff-w{cursor:ew-resize;}
.ehda-griff-p1,.ehda-griff-p2,.ehda-griff-spitze{cursor:move;}
.ehda-eintrag-auswahl{border-color:#1DB954;}
.ehda-stempeltext{display:flex;flex-direction:column;align-items:center;padding:4px 9px;border:3px double currentColor;border-radius:6px;font-family:'Plus Jakarta Sans',sans-serif;background:rgba(255,255,255,.85);transform:rotate(-8deg);white-space:nowrap;line-height:1.15;}
/* Stempel (PR 4d): das Wort groß, darunter Name und Datum klein (gekürzt in EHDokMarkierung.stempel) */
.ehda-stempel-wort{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.ehda-stempel-klein{font-size:9px;font-weight:600;letter-spacing:.02em;margin-top:1px;}
.ehda-mark-nr{position:absolute;top:-10px;right:-10px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#fff;border:2px solid var(--ehda-farbe,#ef4444);color:#0f1a12;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.ehda-mark-wartet{opacity:.7;}
.ehda-mark-wartet .ehda-mark-zeichen,.ehda-mark-wartet .ehda-stempeltext{border-style:dashed;}
.ehda-mark-fehlt{opacity:.75;}
.ehda-mark-fehlt .ehda-mark-zeichen,.ehda-mark-fehlt .ehda-stempeltext{border-style:dashed;outline:2px dashed #991b1b;outline-offset:3px;}
.ehda-mark-gewaehlt,.ehda-mark-hervor{z-index:2;}
.ehda-mark-gewaehlt .ehda-mark-zeichen,.ehda-mark-gewaehlt .ehda-stempeltext,
.ehda-mark-hervor .ehda-mark-zeichen,.ehda-mark-hervor .ehda-stempeltext{box-shadow:0 0 0 4px rgba(29,185,84,.55);}
.ehda-spitze{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;border:3px solid var(--ehda-farbe,#ef4444);background:#fff;pointer-events:none;box-sizing:border-box;}
.ehda-kreuz{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);pointer-events:none;border:2px solid #0f1a12;border-radius:50%;box-shadow:0 0 0 2px #fff,inset 0 0 0 2px #fff;box-sizing:border-box;z-index:3;}
.ehda-kreuz::before,.ehda-kreuz::after{content:'';position:absolute;background:#0f1a12;}
.ehda-kreuz::before{left:50%;top:-10px;bottom:-10px;width:2px;margin-left:-1px;}
.ehda-kreuz::after{top:50%;left:-10px;right:-10px;height:2px;margin-top:-1px;}

/* Liste der Markierungen */
.ehda-liste{flex:0 0 320px;min-width:0;overflow:auto;border-left:1.5px solid #d4e8db;background:#fff;padding:12px 14px;box-sizing:border-box;}
.ehda-liste[hidden]{display:none!important;}
.ehda-liste-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.ehda-liste-titel{margin:0;flex:1 1 auto;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:800;}
.ehda-liste-zu{display:none;}
.ehda-liste-status{font-size:12px;color:#3a5244;margin-bottom:8px;}
.ehda-liste-status.ehda-fehler{color:#991b1b;font-weight:700;}
.ehda-liste-status:focus{outline:none;}
.ehda-liste-eintraege{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.ehda-eintrag{border:1.5px solid #d4e8db;border-radius:10px;padding:8px 10px;background:#fff;}
.ehda-eintrag-hervor{border-color:#1DB954;box-shadow:0 0 0 2px rgba(29,185,84,.35);}
.ehda-eintrag-entwurf{border-style:dashed;}
.ehda-eintrag-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:700;}
.ehda-eintrag-nr{min-width:22px;height:22px;padding:0 6px;border-radius:11px;border:2px solid var(--ehda-farbe,#ef4444);display:inline-flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:800;box-sizing:border-box;}
.ehda-eintrag-seite{color:#3a5244;font-weight:600;font-size:12px;}
.ehda-eintrag-text{margin:6px 0 0;font-size:13px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;}
.ehda-eintrag-meta{font-size:12px;color:#3a5244;margin-top:4px;overflow-wrap:anywhere;}
.ehda-eintrag-fehler{font-size:12px;color:#991b1b;font-weight:700;margin-top:4px;}
.ehda-eintrag-knoepfe{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}

/* Eingabe: Text, ansehen, ändern — über der Ansicht, folgt dem sichtbaren
   Fenster (top und height setzt das Skript aus visualViewport) */
.ehda-eingabe-schicht{position:fixed;left:0;right:0;top:0;height:100%;z-index:260;background:rgba(15,26,18,.45);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;}
.ehda-eingabe-schicht[hidden]{display:none;}
.ehda-eingabe{background:#fff;color:#0f1a12;border-radius:14px;width:100%;max-width:480px;max-height:100%;overflow:auto;padding:16px;box-sizing:border-box;box-shadow:0 18px 48px rgba(0,0,0,.3);outline:none;}
.ehda-eingabe-titel{margin:0 0 4px;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:800;overflow-wrap:anywhere;}
.ehda-eingabe-meta{font-size:12px;color:#3a5244;margin-bottom:10px;overflow-wrap:anywhere;}
.ehda-feld{margin-bottom:10px;}
.ehda-label{display:block;font-size:12px;font-weight:700;color:#3a5244;margin-bottom:4px;}
.ehda-textfeld{display:block;width:100%;min-height:96px;resize:vertical;padding:8px 10px;border:1.5px solid #d4e8db;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.4;color:#0f1a12;box-sizing:border-box;}
.ehda-textfeld:focus{outline:none;border-color:#1DB954;box-shadow:0 0 0 3px rgba(29,185,84,.2);}
.ehda-feld-fuss{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12px;color:#3a5244;}
.ehda-hinweis-namen{color:#3a5244;}
.ehda-zaehler{flex:0 0 auto;font-variant-numeric:tabular-nums;}
.ehda-eingabe-text{margin:0 0 10px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;}
.ehda-eingabe-nur,.ehda-eingabe-grund{font-size:13px;color:#3a5244;background:#f6faf7;border:1.5px solid #d4e8db;border-radius:10px;padding:8px 10px;margin-bottom:10px;}
.ehda-eingabe-grund[hidden]{display:none;}
.ehda-eingabe-fehler{font-size:13px;color:#991b1b;font-weight:700;margin-bottom:8px;}
.ehda-eingabe-fehler:empty{display:none;}
.ehda-eingabe-knoepfe{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.ehda-eingabe-knoepfe[hidden]{display:none;}
.ehda-frage{border-top:1.5px solid #d4e8db;padding-top:10px;margin-top:4px;}
.ehda-frage-text{margin:0 0 8px;font-size:14px;font-weight:700;}

/* Solange der Dialog offen ist, scrollt die Seite dahinter nicht mit */
html.ehda-gesperrt,html.ehda-gesperrt body{overflow:hidden;}

/* Unter 900 px: die Liste liegt über dem Dokument, ein Knopf holt sie */
@media (max-width:899px){
  .ehda-liste-auf:not([hidden]){display:inline-flex;margin-right:auto;}
  .ehda-liste{position:absolute;inset:0;z-index:4;display:none;border-left:0;}
  .ehda-liste-offen .ehda-liste:not([hidden]){display:block;}
  .ehda-liste-zu{display:inline-flex;}
}
@media (max-width:768px){
  /* Werkzeuge und Eigenschaften: eine Zeile, die seitlich scrollt */
  .ehda-werkzeuge,.ehda-eigenschaften,.ehda-farben,.ehda-strich,.ehda-stempel-wahl{flex-wrap:nowrap;}
  /* position:relative: die nur für Vorleser verborgenen Namen der Werkzeuge
     (position:absolute) bleiben in der scrollenden Leiste — sonst zählen sie
     zur Breite des ganzen Dialogs, und der läuft seitlich über */
  .ehda-werkzeuge,.ehda-eigenschaften{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:4px;scrollbar-width:thin;}
  .ehda-werkzeuge>*,.ehda-eigenschaften>*,.ehda-farben>*,.ehda-strich>*,.ehda-stempel-wahl>*{flex:0 0 auto;}
  .ehda-schicht{padding:0;align-items:stretch;}
  .ehda-dialog{max-width:none;max-height:none;border-radius:0;}
  .ehda-kopf{padding:calc(10px + env(safe-area-inset-top)) 12px 10px;}
  .ehda-leiste{padding:6px 10px;}
  .ehda-koerper{padding:10px;}
  .ehda-textfeld{font-size:16px;}
  /* Die Eingabe steht oben, damit die Tastatur sie nicht verdeckt */
  .ehda-eingabe-schicht{align-items:flex-start;padding:8px;}
  .ehda-eingabe{max-width:none;}
}
@media (max-width:600px){
  .ehda-werkzeug{padding:6px 10px;}
  .ehda-werkzeug-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
}