diff --git a/docs/SPEC.md b/docs/SPEC.md
index 599ccd1..eed00cb 100644
--- a/docs/SPEC.md
+++ b/docs/SPEC.md
@@ -157,9 +157,12 @@ und schaltet bei jedem Tippen reihum weiter (horizontal → kompakt → vertikal
nur die aktive Sprache; ein Tipp darauf klappt die volle Leiste als **Overlay
über die Kopfzeile** auf (verdeckt die übrigen Bedienelemente, statt die Zeile
zu verbreitern), nach der Auswahl klappt sie wieder auf die gewählte Sprache
-ein (Tipp daneben schließt ebenfalls). Der **Untertitel** wird auf eine
-garantiert einzeilige Kurzfassung reduziert. Voreinstellung auf kleinem
-Bildschirm ist **Vollbild** (siehe D17).
+ein (Tipp daneben schließt ebenfalls). Die **Download-Buttons** (SVG/PNG mit
+Text-Label) verbergen sich hinter einem einzelnen Download-Icon, das die
+Formatwahl bei Bedarf als kleines **Dropdown-Overlay** unter der Kopfzeile
+zeigt — sonst bräche die Titelzeile um; „Kopieren" bleibt sichtbar. Der
+**Untertitel** wird auf eine garantiert einzeilige Kurzfassung reduziert.
+Voreinstellung auf kleinem Bildschirm ist **Vollbild** (siehe D17).
### Günstigster Pfad (Kosten-Hervorhebung)
Ein Umschalter (Icon-Button im Diagramm-Kopf, Voreinstellung **an**, Zustand
diff --git a/frontend/index.html b/frontend/index.html
index 1ff9ec7..6caa06a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -260,6 +260,11 @@
.copybtn.done .ic-done{display:block}
.dlbtn{gap:3px}
.dl-label{font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;letter-spacing:.02em}
+ /* Download-Gruppe: Desktop zeigt SVG/PNG inline, der Trigger ist versteckt.
+ Auf Mobil (body.mobile, s. u.) klappt sie als Overlay-Menü auf. */
+ .dlgroup{display:inline-flex;align-items:center;gap:3px}
+ .dlmenu{display:inline-flex;gap:3px}
+ .dltrigger{display:none}
.legendbtn{display:none} /* nur auf kleinem Bildschirm sichtbar */
.togglebtn[aria-pressed="true"]{background:var(--or);color:#fff;border-color:var(--or)}
.togglebtn[aria-pressed="true"]:hover{color:#fff}
@@ -585,6 +590,19 @@
schaltet reihum weiter (horizontal → kompakt → vertikal → …, siehe JS). */
body.mobile .seg label{display:none}
body.mobile .seg label:has(input:checked){display:flex}
+ /* Download schlank: nur der Trigger-Icon-Button; ein Tipp klappt SVG/PNG als
+ Dropdown-Overlay unter der Kopfzeile auf (verhindert den Zeilenumbruch durch
+ die breiten „SVG“/„PNG“-Labels). Kopieren bleibt sichtbar. */
+ body.mobile .dlgroup{position:relative}
+ body.mobile .dltrigger{display:inline-flex}
+ body.mobile .dltrigger[aria-expanded="true"]{border-color:var(--or);color:var(--or)}
+ body.mobile .dlmenu{display:none}
+ body.mobile .dlgroup.open .dlmenu{
+ display:flex;flex-direction:column;gap:5px;
+ position:absolute;top:calc(100% + 6px);right:0;z-index:40;
+ background:var(--card);border:1px solid rgba(36,52,71,.15);
+ border-radius:8px;padding:5px;box-shadow:0 6px 18px rgba(36,52,71,.28);
+ }
@@ -698,12 +716,19 @@
-
-
+
+
+
+
+
+
+
@@ -1337,12 +1362,30 @@ function flashBtn(btn){ /* kurzer Petrol-Blitz als Rückmeldung, Tooltip bleib
document.getElementById('dlDiagram').addEventListener('click', () => {
downloadDiagramSvg();
flashBtn(document.getElementById('dlDiagram'));
+ closeDlMenu();
});
document.getElementById('dlDiagramPng').addEventListener('click', async () => {
+ closeDlMenu();
await downloadDiagramPng();
flashBtn(document.getElementById('dlDiagramPng'));
});
+/* Download-Menü (nur Mobil): Trigger klappt SVG/PNG als Overlay auf; Auswahl
+ oder Tipp außerhalb schließt wieder. Auf Desktop ist der Trigger versteckt. */
+const dlGroup = document.getElementById('dlGroup');
+const dlTrigger = document.getElementById('dlTrigger');
+function closeDlMenu(){
+ dlGroup.classList.remove('open');
+ dlTrigger.setAttribute('aria-expanded', 'false');
+}
+dlTrigger.addEventListener('click', () => {
+ const open = dlGroup.classList.toggle('open');
+ dlTrigger.setAttribute('aria-expanded', String(open));
+});
+document.addEventListener('click', e => {
+ if(dlGroup.classList.contains('open') && !dlGroup.contains(e.target)) closeDlMenu();
+});
+
/* ---------- Internationalisierung (DE/EN/ES/FR) ---------- */
const I18N = {
de: {
@@ -1361,6 +1404,7 @@ const I18N = {
copyDiagramTooltip:"Diagramm als PNG-Bild in die Zwischenablage kopieren",
downloadDiagramTooltip:"Diagramm als SVG-Datei herunterladen (z. B. für LibreOffice: Einfügen → Bild)",
downloadPngTooltip:"Diagramm als PNG-Datei herunterladen (Rasterbild, überall einfügbar)",
+ downloadMenu:"Diagramm herunterladen (SVG/PNG)",
minimize:"minimieren", normal:"normal", maximize:"maximieren",
agenda:"Agenda", discarded:"verworfene",
modeHorizontal:"Horizontal – Organigramm, Diagramm über dem Editor",
@@ -1397,6 +1441,7 @@ const I18N = {
copyDiagramTooltip:"Copy diagram as a PNG image to the clipboard",
downloadDiagramTooltip:"Download diagram as an SVG file (e.g. for LibreOffice: Insert → Image)",
downloadPngTooltip:"Download diagram as a PNG file (raster image, insertable anywhere)",
+ downloadMenu:"Download diagram (SVG/PNG)",
minimize:"minimize", normal:"normal", maximize:"maximize",
agenda:"Legend", discarded:"discarded",
modeHorizontal:"Horizontal – org chart, diagram above the editor",
@@ -1433,6 +1478,7 @@ const I18N = {
copyDiagramTooltip:"Copiar el diagrama como imagen PNG al portapapeles",
downloadDiagramTooltip:"Descargar el diagrama como archivo SVG (p. ej. para LibreOffice: Insertar → Imagen)",
downloadPngTooltip:"Descargar el diagrama como archivo PNG (imagen de trama, insertable en cualquier lugar)",
+ downloadMenu:"Descargar el diagrama (SVG/PNG)",
minimize:"minimizar", normal:"normal", maximize:"maximizar",
agenda:"Leyenda", discarded:"descartados",
modeHorizontal:"Horizontal – organigrama, diagrama sobre el editor",
@@ -1469,6 +1515,7 @@ const I18N = {
copyDiagramTooltip:"Copier le diagramme comme image PNG dans le presse-papiers",
downloadDiagramTooltip:"Télécharger le diagramme en fichier SVG (p. ex. pour LibreOffice : Insertion → Image)",
downloadPngTooltip:"Télécharger le diagramme en fichier PNG (image matricielle, insérable partout)",
+ downloadMenu:"Télécharger le diagramme (SVG/PNG)",
minimize:"réduire", normal:"normal", maximize:"agrandir",
agenda:"Légende", discarded:"abandonnés",
modeHorizontal:"Horizontal – organigramme, diagramme au-dessus de l'éditeur",
@@ -1505,6 +1552,7 @@ const I18N = {
copyDiagramTooltip:"Kopiuj diagram jako obraz PNG do schowka",
downloadDiagramTooltip:"Pobierz diagram jako plik SVG (np. dla LibreOffice: Wstaw → Obraz)",
downloadPngTooltip:"Pobierz diagram jako plik PNG (obraz rastrowy, wszędzie do wstawienia)",
+ downloadMenu:"Pobierz diagram (SVG/PNG)",
minimize:"minimalizuj", normal:"normalny", maximize:"maksymalizuj",
agenda:"Legenda", discarded:"odrzucone",
modeHorizontal:"Poziomo – schemat organizacyjny, diagram nad edytorem",
@@ -1541,6 +1589,7 @@ const I18N = {
copyDiagramTooltip:"Скопировать диаграмму как изображение PNG в буфер обмена",
downloadDiagramTooltip:"Скачать диаграмму как файл SVG (напр. для LibreOffice: Вставка → Изображение)",
downloadPngTooltip:"Скачать диаграмму как файл PNG (растровое изображение, вставляется везде)",
+ downloadMenu:"Скачать диаграмму (SVG/PNG)",
minimize:"свернуть", normal:"обычный", maximize:"развернуть",
agenda:"Легенда", discarded:"отклонённые",
modeHorizontal:"Горизонтально – оргсхема, диаграмма над редактором",
@@ -1577,6 +1626,7 @@ const I18N = {
copyDiagramTooltip:"आरेख को PNG छवि के रूप में क्लिपबोर्ड पर कॉपी करें",
downloadDiagramTooltip:"आरेख को SVG फ़ाइल के रूप में डाउनलोड करें (जैसे LibreOffice: सम्मिलित करें → छवि)",
downloadPngTooltip:"आरेख को PNG फ़ाइल के रूप में डाउनलोड करें (रास्टर छवि, कहीं भी सम्मिलित करने योग्य)",
+ downloadMenu:"आरेख डाउनलोड करें (SVG/PNG)",
minimize:"छोटा करें", normal:"सामान्य", maximize:"बड़ा करें",
agenda:"लेजेंड", discarded:"अस्वीकृत",
modeHorizontal:"क्षैतिज – संगठन-चार्ट, संपादक के ऊपर आरेख",
@@ -1613,6 +1663,7 @@ const I18N = {
copyDiagramTooltip:"将图表作为 PNG 图片复制到剪贴板",
downloadDiagramTooltip:"将图表下载为 SVG 文件（例如用于 LibreOffice：插入 → 图像）",
downloadPngTooltip:"将图表下载为 PNG 文件（位图，可在任何地方插入）",
+ downloadMenu:"下载图表（SVG/PNG）",
minimize:"最小化", normal:"正常", maximize:"最大化",
agenda:"图例", discarded:"已放弃",
modeHorizontal:"横向——组织结构图，图表在编辑器上方",
@@ -1649,6 +1700,7 @@ const I18N = {
copyDiagramTooltip:"ダイアグラムを PNG 画像としてクリップボードにコピー",
downloadDiagramTooltip:"ダイアグラムを SVG ファイルとしてダウンロード（例：LibreOffice の 挿入 → 画像）",
downloadPngTooltip:"ダイアグラムを PNG ファイルとしてダウンロード（ラスター画像、どこにでも挿入可能）",
+ downloadMenu:"ダイアグラムをダウンロード（SVG/PNG）",
minimize:"最小化", normal:"標準", maximize:"最大化",
agenda:"凡例", discarded:"破棄",
modeHorizontal:"横 — 組織図、ダイアグラムはエディターの上",