/* Einheitliche Bilder-Karte + Viewer (templates/bilder-galerie.php,
   assets/js/bilder-galerie.js). Praefix .bg- */

.bg-karte__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.bg-karte__titel { font-size: 1.22rem; }
.bg-karte__hinzufuegen { margin-left: auto; cursor: pointer; white-space: nowrap; }
.bg-karte__hinzufuegen.is-disabled { cursor: not-allowed; opacity: .7; }
.bg-karte__leer { display: flex; align-items: center; gap: 10px; margin: 0; padding: 22px 16px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); justify-content: center; text-align: center; }
.bg-karte__hinweis { margin: 12px 0 0; }

.bg-nur-mobil, .bg-nur-mobil-flex { display: none !important; }

/* Upload: Datei-Input unsichtbar, ausgeloest ueber das Label im Kopf */
.bg-upload { margin: 0; }
.bg-upload__bestaetigen:not([hidden]) { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); }
.bg-upload__datei { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.bg-upload__auswahl { margin: 0; font-weight: 600; }
.bg-upload__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Raster */
.bg-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bg-kachel { position: relative; display: block; padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-input); cursor: pointer; }
.bg-kachel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.bg-kachel:hover img, .bg-kachel:focus-visible img { transform: scale(1.04); }
.bg-kachel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bg-kachel--ab-desktop { display: none; }
.bg-kachel__zahlen { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 14px; padding: 22px 12px 9px; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); color: #fff; font-size: 14px; font-weight: 600; pointer-events: none; }
.bg-kachel__zahlen > span { display: inline-flex; align-items: center; gap: 6px; }
.bg-kachel__zahlen [data-rt-icon-key="interaction.like"] { color: #ff4d5e; }
.bg-kachel__ki { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 600; }
.bg-kachel--mehr img { filter: blur(3px) brightness(.4); transform: scale(1.08); }
.bg-kachel--mehr:hover img { transform: scale(1.12); }
.bg-kachel__mehr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 14px; font-weight: 500; }
.bg-kachel__mehr strong { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 34px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 18px; }

/* Viewer */
.bg-viewer { position: fixed; inset: 0; z-index: 2050; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5,7,9,.88); backdrop-filter: blur(4px); }
.bg-viewer[hidden] { display: none; }
.bg-viewer__dialog { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; width: min(1320px, 100%); height: min(860px, 100%); padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elevated); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.bg-viewer__schliessen { position: absolute; top: -14px; right: -14px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); color: var(--text); cursor: pointer; }
.bg-viewer__schliessen:hover { border-color: var(--accent); }
.bg-viewer__buehne { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.bg-viewer__bild { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; overflow: hidden; background: #000; touch-action: pan-y; }
.bg-viewer__bild img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bg-viewer__zaehler { position: absolute; top: 12px; right: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 600; }
.bg-viewer__pfeil { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 10px; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; }
.bg-viewer__pfeil:hover { background: rgba(0,0,0,.8); }
.bg-viewer__pfeil--zurueck { left: 12px; }
.bg-viewer__pfeil--weiter { right: 12px; }
.bg-viewer__thumbs { flex-shrink: 0; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.bg-viewer__thumb { flex: 0 0 auto; width: 84px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--bg-input); cursor: pointer; opacity: .65; }
.bg-viewer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-viewer__thumb:hover { opacity: 1; }
.bg-viewer__thumb.is-aktiv { border-color: var(--accent); opacity: 1; }

.bg-viewer__seite { min-height: 0; min-width: 0; display: flex; flex-direction: column; border-radius: 12px; background: var(--bg-card); overflow: hidden; }

/* Panel je Bild (Uploader, Likes, Kommentare) */
/* .feed-item-wrap ist nur fuer feed-interaktion.js da - Feed-Kartenoptik hier aus */
.bg-panel.feed-item-wrap, .bg-panel.feed-item-wrap:hover { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.bg-panel .bg-panel__aktionen.feed-item__interaktionen { margin: 0; padding: 4px 16px 14px; border-top: 0; }
.bg-panel .bg-panel__zahl.feed-item__like-btn, .bg-panel .bg-panel__zahl.feed-item__like-btn:hover { padding: 0; border: 0; background: none; color: var(--text); min-height: 0; }
.bg-panel .bg-panel__zahl.feed-item__like-btn.ist-geliked { color: var(--text); }
.bg-panel .bg-panel__zahl.feed-item__like-btn:hover i { color: #ff4d5e; }
.bg-panel:not([hidden]) { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.bg-panel__kopf { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px; }
.bg-panel__avatar { flex-shrink: 0; }
.bg-panel__avatar-bild { width: 44px; height: 44px; }
.bg-panel__wer { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bg-panel__name-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.bg-panel__name { color: var(--accent); font-weight: 700; text-decoration: none; }
.bg-panel__name:hover { text-decoration: underline; }
.bg-panel__zeit { color: var(--text-muted); font-size: 13px; }
.bg-panel__ki { margin: 0 16px 8px; color: var(--text-muted); font-size: 13px; }
.bg-panel__aktionen { position: relative; display: flex; align-items: center; gap: 18px; margin: 0; padding: 4px 16px 14px; border-bottom: 1px solid var(--border); }
.bg-panel__zahl { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--text); font-size: 15px; font-weight: 600; }
button.bg-panel__zahl { cursor: pointer; }
.bg-panel__zahl [data-rt-icon-key="interaction.like"] { font-size: 18px; }
.bg-panel__zahl.ist-geliked [data-rt-icon-key="interaction.like"], .bg-panel__zahl.ist-geliked i { color: #ff4d5e; }
.bg-panel__menue-wrap { position: relative; margin-left: auto; }
.bg-panel__menue-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); color: var(--text); cursor: pointer; }
.bg-panel__menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 180px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.bg-panel__menue form { margin: 0; }
.bg-panel__menue-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.bg-panel__menue-item:hover { background: var(--bg-card); }
.bg-panel__menue-item--gefahr { color: var(--danger); }

.bg-panel__kommentare { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 0; overflow-y: auto; }
.bg-panel__kommentare-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bg-panel__kommentare-kopf h3 { margin: 0; font-size: 1rem; }
.bg-panel__sortierung select { padding: 4px 6px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.bg-panel__liste { display: flex; flex-direction: column; }
.bg-panel__liste.is-neueste-zuerst { flex-direction: column-reverse; justify-content: flex-end; }
.bg-panel__liste > .cms-kommentar-eintrag { padding: 4px 0; }
.bg-panel__leer { margin: 6px 0 12px; }
.bg-panel__form { display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg-card); }
.bg-panel__form textarea { flex: 1; min-height: 42px; resize: none; }
.bg-panel__senden { flex-shrink: 0; width: 48px; height: 42px; padding: 0; display: flex; align-items: center; justify-content: center; }
.bg-panel__login { margin: 0; padding: 12px 16px; border-top: 1px solid var(--border); }

body.bg-viewer-offen { overflow: hidden; }

@media (max-width: 900px) {
    .bg-viewer { padding: 0; }
    .bg-viewer__dialog { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; overflow-y: auto; }
    .bg-viewer__schliessen { top: 12px; left: 12px; right: auto; background: rgba(0,0,0,.6); border-color: transparent; color: #fff; }
    .bg-viewer__buehne { padding: 0 0 10px; gap: 10px; }
    .bg-viewer__bild { flex: none; height: min(62vh, 80vw); border-radius: 0; }
    .bg-viewer__zaehler { left: 50%; right: auto; transform: translateX(-50%); }
    .bg-viewer__thumbs { padding: 0 12px 4px; }
    .bg-viewer__thumb { width: 64px; height: 50px; }
    .bg-viewer__seite { border-radius: 0; overflow: visible; }
    .bg-panel:not([hidden]) { height: auto; }
    .bg-panel__kommentare { overflow: visible; }
    .bg-panel__form { position: sticky; bottom: 0; }
}

@media (max-width: 640px) {
    .bg-nur-desktop, .bg-nur-desktop-flex { display: none !important; }
    .bg-nur-mobil { display: inline !important; }
    .bg-nur-mobil-flex { display: block !important; }
    .bg-karte__kopf { flex-wrap: nowrap; gap: 10px; }
    .bg-karte__titel { font-size: 1.1rem; min-width: 0; }
    .bg-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bg-kachel--ab-desktop { display: block; }
    .bg-kachel--ab-mobil { display: none; }
    .bg-kachel__zahlen { font-size: 13px; gap: 12px; padding: 18px 10px 7px; }
}

/* Upload-Modal (Vorschau/Sortieren/Entfernen/Markieren - Kacheln nutzen .feed-bild-kachel aus style.css) */
.bg-upload-modal__dialog { width: min(640px, 100%); max-width: 640px; max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 12px; }
.bg-upload-modal__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bg-upload-modal__kopf h2 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.bg-upload-modal__zaehler { color: var(--text-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.bg-upload-modal__hinweis { margin: 0; }
.bg-upload-modal__vorschau { margin-top: 0; }
.bg-upload-modal__mehr { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--accent); font-weight: 600; cursor: pointer; }
.bg-upload-modal__mehr:hover { border-color: var(--accent); }
.bg-upload-modal__mehr[hidden] { display: none; }
.bg-upload-modal__extra { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); }
.bg-markieren-modal { z-index: 2150; }

/* Markierungen im Viewer */
.bg-viewer__markierungen.lightbox-overlay__markierungen { position: absolute; }
.bg-viewer__markier-toggle { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.bg-viewer__markier-toggle[hidden] { display: none; }
.bg-viewer__markier-toggle[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, rgba(0,0,0,.6)); }
.bg-panel__markiert { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 16px 12px; }
.bg-panel__pillen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.bg-panel__pillen[hidden] { display: none; }
.bg-panel__markieren-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px dashed var(--border); border-radius: 999px; background: none; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.bg-panel__markieren-btn:hover { border-color: var(--accent); color: var(--accent); }