/*
  GalleryModal – extrahierte Styles aus tool.html (minimal angepasst)
  Enthält: Modal-Layout, Header, Navigation, Overlays, SVG-Container, Thumbnails
*/

/* Modal-Header */
#modalHeader { display:flex; align-items:center; justify-content:center; gap:12px; text-align:center; position:relative; padding-right:42px; }
#modalHeader #modalTitle { margin:0; font-weight:600; }
/* Like-Button-Layout im Header mittig */
#modalHeader .like-control { display:inline-flex; align-items:center; gap:8px; }
#modalHeader .like-control .btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
#modalHeader .like-control .count { font-weight:600; }

/* Modal-Grundgerüst */
.modal2 { position: fixed; inset: 0; display: none; z-index: 9999; background: rgba(0,0,0,.6); }
.modal2 .modal-cont2 { position: relative; width: min(1200px, 96vw); height: min(92vh, 900px); margin: 2vh auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 16px; overflow: hidden; }
.clos2 { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; cursor: pointer; color: #333; z-index: 10; }

/* Navigation im Modal */
.nav-buttons { position: absolute; top: 12px; right: 16px; display:flex; gap:10px; z-index: 10; }
.nav-button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; background:#f2f2f2; border-radius:6px; cursor:pointer; user-select:none; }
.nav-button:hover { background: #e9e9e9; }

/* Overlay + Spinner (im Modal) */
#overlayLayer { position:absolute; inset:0; background: rgba(255,255,255,.75); display:none; z-index: 3; }
#loadingSpinner { position:absolute; inset:auto; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border:4px solid #eee; border-top-color:#999; border-radius:50%; animation: gm_spin 1s linear infinite; display:none; z-index: 4; }
@keyframes gm_spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Container für das geladene SVG */
#animatedSvgContainer { position: relative; width: 100%; height: calc(100% - 64px); margin-top: 12px; overflow: hidden; background: #fafafa; border: 1px solid #eee; border-radius: 8px; }
#animatedSvgContainer svg { display:block; margin:0; width:100%; height:100%; max-width:100%; max-height:100%; }

/* Thumbnail-Grid */
img.cs-thumb:hover { opacity: 1;} img.cs-thumb { max-width: 30%;padding:5px;cursor:pointer;opacity: 0.4} div.cs-thumbs {display: flex; justify-content: center; align-items: center; background-color: #ffebd8;height:120px}
a.malvorlage-link {max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.thumb-container { display:inline-block; text-align:center; margin: 6px; position: relative; }
.thumbclicktool { width: 160px; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: transform .12s ease, box-shadow .12s ease; }
.thumbclicktool:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.thumb-play-circle { position:absolute; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.5); box-shadow: 0 2px 6px rgba(0,0,0,.22); pointer-events: none; }

/* Optional: Like-Wrapper (falls verwendet) */
.likebtn-wrapper { display:inline-block; }
/* Minimal-Styles für internen Like-Button */
.gm-like-btn { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px; border-radius:6px; border:1px solid #ddd; background:#fff; color:#333; cursor:pointer; font: inherit; }
.gm-like-btn:hover { background:#f7f7f7; }
.gm-like-btn[aria-pressed="true"] { background:#ffe8ec; border-color:#ffb5c2; color:#c2274e; }
.gm-like-count { margin-left:6px; font-weight:600; }

/* Like-Button (vollständiges Layout für .like-control) */
.like-control { display:inline-flex; align-items:center; background:#f7f7f7; border:1px solid #cfcfcf; border-radius:8px; overflow:hidden; user-select:none; font-family: inherit; }
.like-control .btn { display:flex; align-items:center; gap:8px; padding:6px 12px; background:#ffffff; cursor:pointer; }
.like-control .count { min-width:34px; text-align:center; padding:6px 12px; border-left:1px solid #e0e0e0; background:#ffffff; }
.like-control .icon { width:18px; height:18px; }
.like-control.liked .btn { color:#2e7d32; }
.like-control.disabled .btn { opacity:0.6; cursor:default; }