Fix Bilder-Auswahl (Capture-Listener) + Mobile UX verbessern

- Selection-Click nutzt jetzt addEventListener mit capture:true
  auf #main, feuert garantiert VOR Poptrox und kann nicht entfernt werden
- Bild-Name/Ordner als data-Attribute auf .thumb gespeichert
- Mobile: Nav-Icons 1rem -> 1.3rem, bessere Touch-Targets
- Mobile: Selection-Checkboxen groesser (1.8em statt 1.4em)
- Mobile: Toolbar-Buttons mit mehr Padding

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

assets/css/custom.min.css

@@ -1 +1 @@
-.text-fg{color:#a0a0a1}#selection-toolbar{position:fixed;top:0;left:0;width:100%;background:rgba(31,34,36,.95);padding:.75em 1.5em;display:flex;align-items:center;gap:1em;z-index:10003;transform:translateY(-100%);transition:transform .3s ease;box-sizing:border-box}#selection-toolbar.visible{transform:translateY(0)}#selection-toolbar #sel-count{color:#fff;font-weight:400;margin-right:auto;white-space:nowrap}#selection-toolbar button{white-space:nowrap}body.selection-mode #main .thumb{cursor:pointer;position:relative}body.selection-mode #main .thumb::before{content:"";position:absolute;top:.6em;left:.6em;width:1.4em;height:1.4em;border:2px solid rgba(255,255,255,.7);border-radius:3px;background:rgba(0,0,0,.4);z-index:2;transition:all .2s ease;pointer-events:none}body.selection-mode #main .thumb.selected::before{background:#34a58e;border-color:#34a58e}body.selection-mode #main .thumb.selected .image{outline:3px solid #34a58e;outline-offset:-3px}@media screen and (max-width: 736px){#selection-toolbar{top:4em;padding:.5em 1em;gap:.5em}#selection-toolbar button{font-size:.85em;padding:.4em .8em}}#footer .presentify{margin:0 0 1.4em 0;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center}#footer .presentify .presentify-logo{display:flex;align-items:center;justify-content:center}#footer .presentify .presentify-logo a{display:flex;align-items:center;justify-content:center;border:0}#footer .presentify .presentify-logo img{width:72px;height:72px;display:block}#footer .presentify .presentify-text{margin:0}
+.text-fg{color:#a0a0a1}#selection-toolbar{position:fixed;top:0;left:0;width:100%;background:rgba(31,34,36,.95);padding:.75em 1.5em;display:flex;align-items:center;gap:1em;z-index:10003;transform:translateY(-100%);transition:transform .3s ease;box-sizing:border-box}#selection-toolbar.visible{transform:translateY(0)}#selection-toolbar #sel-count{color:#fff;font-weight:400;margin-right:auto;white-space:nowrap}#selection-toolbar button{white-space:nowrap}body.selection-mode #main .thumb{cursor:pointer;position:relative}body.selection-mode #main .thumb::before{content:"";position:absolute;top:.6em;left:.6em;width:1.4em;height:1.4em;border:2px solid rgba(255,255,255,.7);border-radius:3px;background:rgba(0,0,0,.4);z-index:2;transition:all .2s ease;pointer-events:none}body.selection-mode #main .thumb.selected::before{background:#34a58e;border-color:#34a58e}body.selection-mode #main .thumb.selected .image{outline:3px solid #34a58e;outline-offset:-3px}@media screen and (max-width: 736px){#selection-toolbar{top:4em;padding:.6em 1em;gap:.6em}#selection-toolbar #sel-count{font-size:.9em}#selection-toolbar button{font-size:.85em;padding:.5em 1em}body.selection-mode #main .thumb::before{top:.4em;left:.4em;width:1.8em;height:1.8em;border-width:2.5px}body.selection-mode #main .thumb.selected .image{outline-width:4px}}#footer .presentify{margin:0 0 1.4em 0;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center}#footer .presentify .presentify-logo{display:flex;align-items:center;justify-content:center}#footer .presentify .presentify-logo a{display:flex;align-items:center;justify-content:center;border:0}#footer .presentify .presentify-logo img{width:72px;height:72px;display:block}#footer .presentify .presentify-text{margin:0}

assets/js/main.js

@@ -182,6 +182,8 @@
 
 				images.forEach(function(file) {
 					var article = $('<article class="thumb"></article>');
+					article.attr('data-name', file.name);
+					if (file.folder) article.attr('data-folder', file.folder);
 					var prefix = file.folder ? encodeURIComponent(file.folder) + '/' : '';
 					var fullPath = '/images/fulls/' + prefix + encodeURIComponent(file.name);
 					var thumbPath = '/images/thumbs/' + prefix + encodeURIComponent(file.name);
@@ -339,24 +341,18 @@
 			$toolbar.toggleClass('visible', selectionActive);
 		});
 
-		// Klick auf Thumbnail im Selection-Mode (direkt auf a.image, VOR poptrox gebunden)
+		// Klick auf Thumbnail im Selection-Mode (Capture-Phase, feuert VOR Poptrox)
-		$main.find('.thumb a.image').on('click', function(e) {
+		$main[0].addEventListener('click', function(e) {
 			if (!selectionActive) return;
+			var thumb = e.target.closest('.thumb');
+			if (!thumb) return;
+
 			e.preventDefault();
-			e.stopImmediatePropagation();
+			e.stopPropagation();
 
-			var $thumb = $(this).closest('.thumb');
+			var $thumb = $(thumb);
-			var $img = $thumb.find('img');
+			var imgName = $thumb.attr('data-name');
-			var imgName = $img.data('name');
+			var folder = $thumb.attr('data-folder') || null;
-			var imgHref = $(this).attr('href');
-
-			// Ordner aus href extrahieren
-			var folder = null;
-			var hrefPath = imgHref.replace('/images/fulls/', '');
-			var parts = hrefPath.split('/');
-			if (parts.length > 1) {
-				folder = decodeURIComponent(parts[0]);
-			}
 
 			var idx = -1;
 			for (var i = 0; i < selectedImages.length; i++) {
@@ -373,7 +369,7 @@
 				$thumb.addClass('selected');
 			}
 			updateToolbar();
-		});
+		}, true);
 
 		function updateToolbar() {
 			var count = selectedImages.length;

assets/sass/custom.scss

@@ -76,12 +76,30 @@ body.selection-mode {
 @media screen and (max-width: 736px) {
 	#selection-toolbar {
 		top: _size(header);
-		padding: 0.5em 1em;
+		padding: 0.6em 1em;
-		gap: 0.5em;
+		gap: 0.6em;
+
+		#sel-count {
+			font-size: 0.9em;
+		}
 
 		button {
 			font-size: 0.85em;
-			padding: 0.4em 0.8em;
+			padding: 0.5em 1em;
+		}
+	}
+
+	body.selection-mode #main .thumb {
+		&::before {
+			top: 0.4em;
+			left: 0.4em;
+			width: 1.8em;
+			height: 1.8em;
+			border-width: 2.5px;
+		}
+
+		&.selected .image {
+			outline-width: 4px;
 		}
 	}
 }

assets/sass/layout/_header.scss

@@ -111,7 +111,7 @@
 
 			h1 {
 				font-size: 0.8em;
-				max-width: 45%;
+				max-width: 40%;
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
@@ -122,10 +122,12 @@
 					> li {
 						a {
 							font-size: 0;
-							padding: 0 0.8em;
+							padding: 0 0.9em;
+							line-height: _size(header);
 
 							i {
-								font-size: 1rem;
+								font-size: 1.3rem;
+								vertical-align: middle;
 							}
 						}
 					}