Etiketten-Vorlagen: die ganze Zeile klappt auf und zu

Aufklappen ging nur ueber ein kleines Stift-Symbol am rechten Rand - und dass
derselbe Knopf auch wieder schliesst, sah man ihm nicht an.

Jetzt ist die Zeile selbst der Schalter, mit einem Pfeil links, der den Zustand
zeigt (wie in der Einzelstueck-Tabelle). Der Stift faellt damit weg; die
Knoepfe rechts - CSV, .lbx, Loeschen - bleiben eigenstaendig und loesen das
Auf- und Zuklappen nicht mit aus.

Dafuer eine kleine Klasse .zeilen-schalter: .link-btn waere naheliegend gewesen,
faerbt aber alles im Akzent - Name und graues Beiwerk sollen ihre Farben
behalten.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/components/EtikettenVorlagen.jsx

@@ -111,14 +111,21 @@ export default function EtikettenVorlagen({ onError }) {
         {(vorlagen || []).map((v) => (
           <li key={v.id} style={{ flexDirection: "column", alignItems: "stretch" }}>
             <div className="cell-row" style={{ gap: "var(--sp-2)" }}>
-              <span style={{ flex: 1, minWidth: 0 }}>
+              {/* Die ganze Zeile klappt auf und zu, nicht nur ein kleines
+                  Symbol am Rand – und derselbe Griff schliesst wieder. */}
+              <button type="button" className="zeilen-schalter"
+                style={{ flex: 1, minWidth: 0, textAlign: "left" }}
+                aria-expanded={offen === v.id}
+                onClick={() => setOffen(offen === v.id ? null : v.id)}>
+                <Icon name="chevron" size={16}
+                  className={offen === v.id ? "" : "rot-90"} />{" "}
                 <span className="strong">{v.name}</span>{" "}
                 <span className="muted small">
                   {ARTEN.find((a) => a.wert === v.art)?.label || v.art}
                   {" · "}{v.spalten.length} Spalten
                   {v.datei_name ? " · mit Vorlage" : ""}
                 </span>
-              </span>
+              </button>
               <button type="button" className="btn sm" disabled={busy}
                 onClick={() => csv(v)}>
                 <Icon name="download" size={14} />CSV
@@ -129,11 +136,6 @@ export default function EtikettenVorlagen({ onError }) {
                   <Icon name="download" size={14} />.lbx
                 </button>
               )}
-              <button type="button" className="btn-icon"
-                title={offen === v.id ? "Zuklappen" : "Bearbeiten"}
-                onClick={() => setOffen(offen === v.id ? null : v.id)}>
-                <Icon name="edit" size={16} />
-              </button>
               <button type="button" className="btn-icon danger" title="Löschen"
                 onClick={() => loeschen(v)}>
                 <Icon name="trash" size={16} />

web/src/styles.css

@@ -379,6 +379,16 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 .btn-icon:hover { background: var(--surface-2); color: var(--text); }
 .btn-icon.danger:hover { background: var(--danger-soft); color: var(--danger); }
 .link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-align: left; }
+/* Ganze Zeile als Auf-/Zuklapper: sieht aus wie Text, verhaelt sich wie ein
+   Schalter. Anders als .link-btn ohne Akzentfarbe, damit Name und graues
+   Beiwerk ihre eigenen Farben behalten. Fuer Listen, in denen rechts noch
+   eigene Knoepfe stehen - die duerfen nicht mit ausgeloest werden. */
+.zeilen-schalter {
+  display: flex; align-items: center; gap: 6px;
+  background: none; border: none; padding: 0;
+  font: inherit; color: inherit; cursor: pointer; text-align: left;
+}
+.zeilen-schalter .icon { flex: 0 0 auto; }
 .link-btn:hover { text-decoration: underline; }
 
 /* ---------- Tables ---------- */