/**
 * Ziel-Pfad im Projekt: media/com_bilder/css/geo-gallery-below-panel.css
 *
 * Zentrale CSS fuer das "Auswahloptionen"-Panel (schwebendes Bottom-Sheet)
 * UND den gemeinsamen Kern des Foto+Beschreibung-Overlays ("Stufe 2"),
 * genutzt von tmpl/geo/default_desktop.php (view=geo) UND
 * tmpl/gallery/default_mobile.php (view=gallery&ausw=geo).
 *
 * Angelegt am 2026-09-10 (Nutzerauftrag "zentrale CSS fuer beide Overlays
 * einrichten - Design von View geo bevorzugt, Zeitraum-Regler von View
 * gallery bevorzugt"): zuvor hatte jede der beiden Dateien eine eigene,
 * unabhaengig gepflegte Kopie dieser Regeln (bisherige Projektkonvention
 * "je View duplizieren"), wodurch sie im Detail bereits auseinandergedriftet
 * waren - u.a. Zeitraum-Regler-Dicke (View geo nutzte bisher die
 * unveraenderte noUiSlider-Standarddarstellung, deutlich dicker als View
 * gallerys eigene, duennere Gestaltung), Themen-Zeilenabstaende (View
 * gallery nutzte Bootstrap-"form-check"-Klassen mit groesseren Abstaenden
 * und Bootstrap-blauen Checkboxen statt der kompakteren, nativen Darstellung
 * aus View geo) sowie die Groesse im eingeklappten Zustand (unterschiedliches
 * Kopfzeilen-Padding).
 *
 * Enthaelt NUR die Teile, die in beiden Views optisch identisch sein sollen.
 * View-spezifische Erweiterungen bleiben bewusst weiterhin in der
 * jeweiligen Datei (dort auch dokumentiert):
 * - View geo: .cbg-detail-core/.cbg-detail-meta/.cbg-detail-heutelinks
 *   (volles Beschreibungs-Feld-Set), .cbg-below-eigentuemerfilter-*,
 *   .cbg-below-ortsauswahl-aufheben-*, .cbg-hint. Der Link/Button "Zur
 *   Fotoliste"/"Fotogallerie" nutzt seit 2026-09-10 keine eigene lokale
 *   Klasse mehr, sondern direkt "btn btn-sm com-bilder-btn" (Standard-
 *   Button-Optik aus com-bilder-common.css).
 * - View gallery: .cbg-detail-nav* (mehrere Klassen) sowie
 *   .cbg-detail-counter (Vor-/Zurueck-
 *   Navigation, hat in View geo keine Entsprechung), .cbg-detail-info p
 *   (dort OHNE Wrapper-Div, da reduziertes Feld-Set direkt als <p>-Liste
 *   gerendert wird).
 *
 * Statisches CSS ohne dynamische Werte - daher per <link rel="stylesheet">
 * eingebunden statt per PHP-require.
 */

/* ============================================================
   Panel ("Auswahloptionen fuer Fotos") - schwebendes Bottom-Sheet
   ============================================================ */
.cbg-below-panel {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 800;
    width: min(640px, 92vw);
    max-height: calc(100vh - var(--cbg-site-topbar-offset, 0px) - 16px);
    /* background: #f5f5f5;   Hintergrundfarbe (sehr helles Grau) */
    background: #e5e7e2; 
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -10px 30px -8px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Kopfzeile - bleibt im eingeklappten Zustand als einziger sichtbarer
   Streifen stehen. Padding 20px 16px (statt urspruenglich kleinerem Wert)
   sorgt dafuer, dass der Pfeil-Button auch eingeklappt gut sichtbar/greifbar
   bleibt - identisch fuer beide Views, damit auch die "Groesse im
   eingeklappten Zustand" (Nutzeranforderung) uebereinstimmt. */
.cbg-below-peek-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  /*  padding: 20px 16px; */

    padding: 5px 16px;
}

.cbg-below-peek-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbg-below-peek-toggle {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #eef1f4;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cbg-below-peek-toggle:hover {
    background: #c51b1b;
    color: #fff;
}

.cbg-below-peek-toggle svg {
    transition: transform 0.3s ease;
    transform: rotate(180deg); /* Startzustand eingeklappt: Pfeil zeigt nach oben ("ausklappen") */
}

.cbg-below-panel.cbg-below-expanded .cbg-below-peek-toggle svg {
    transform: rotate(0deg); /* ausgeklappt: Pfeil zeigt nach unten ("einklappen") */
}

/* Inhalt (Zeitraum-Regler/Themen/Standort/...) - im eingeklappten Zustand
   ohne Hoehe, blendet sich beim Ausklappen ein ("max-height"-Uebergang, da
   "height: auto" nicht animierbar ist - die konkrete Ziel-Pixelhoehe fuer
   die Animation liefert das jeweilige Ein-/Ausklapp-Skript der aufrufenden
   Datei). Flex-Spalte mit einheitlichem Abstand (gap) zwischen den
   einzelnen Steuerelement-Bloecken statt einzelner Bootstrap-Randklassen
   je Block. */
.cbg-below-content {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 0;
    opacity: 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.cbg-below-panel.cbg-below-expanded .cbg-below-content {
    max-height: none;
    opacity: 1;
    padding: 4px 16px 20px;
}

@media (prefers-reduced-motion: reduce) {
    .cbg-below-peek-toggle svg,
    .cbg-below-content {
        transition: none;
    }
}

.cbg-below-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cbg-below-control label {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

/* Zeitraum-Regler (noUiSlider) - Gestaltung aus View gallery uebernommen
   (Nutzerpraeferenz: duennere, dezentere Schiene statt der zuvor in View
   geo verwendeten unveraenderten noUiSlider-Standarddarstellung). */
.cbg-below-year-slider {
    margin: 10px 4px 4px 4px;
}

.cbg-below-year-slider.noUi-target {
    height: 6px;
    border-radius: 3px;
    border-color: #ced4da;
    box-shadow: none;
    background: #e9ecef;
}

.cbg-below-year-slider .noUi-connect {
    background: #0d6efd;
}

/* !important auf Groesse/Position: "*.noUi-horizontal .noUi-handle" aus
   nouislider.min.css selbst hat dieselbe Selektor-Spezifitaet (zwei Klassen)
   wie unsere Regel hier - je nachdem, WO im <head> die aufrufende Datei das
   CDN-CSS gegenueber dieser zentralen Datei einbindet, kann daher zufaellig
   dessen Standardgroesse (34x28px, oval statt rund) gewinnen (Nutzermeldung
   2026-09-10, View geo: Schieberegler-Griffe oval und leicht versetzt,
   reproduzierbar auch nach Refresh/im Inkognito-Tab - kein Cache-Effekt,
   sondern eine echte Ladereihenfolge-Abhaengigkeit im HTML). !important
   macht das Ergebnis unabhaengig von dieser Ladereihenfolge - nach demselben
   Prinzip wie in com-bilder-common.css ("ladereihenfolgeunabhaengig"). */
.cbg-below-year-slider .noUi-handle {
    width: 18px !important;
    height: 18px !important;
    right: -9px !important;
    top: -7px !important;
    border-radius: 50% !important;
    border-color: #0d6efd;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cbg-below-year-slider .noUi-handle::before,
.cbg-below-year-slider .noUi-handle::after {
    display: none;
}

@media (max-width: 575.98px) {
    .cbg-below-year-slider .noUi-handle {
        width: 24px !important;
        height: 24px !important;
        right: -12px !important;
        top: -10px !important;
    }
}

/* Themen-Checkboxen - Gestaltung aus View geo uebernommen (Nutzerpraeferenz:
   engere Zeilenabstaende und native Checkbox-Darstellung statt der zuvor in
   View gallery verwendeten Bootstrap-"form-check"-Klassen). */
.cbg-below-themen-label {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.cbg-below-themen-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.cbg-below-themen-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 400;
    color: #1a1a1a;
    white-space: nowrap;
}

/* Standort-Buttons innerhalb des Panel-Inhalts (nur View gallery/ausw=geo -
   gerendert von tmpl/gallery/_shared_geoposition.php: "Aktueller Standort"/
   "Gewaehlter Standort"-Umschalter sowie der Zustimmungs-Button "OK"; View
   geo hat an dieser Stelle kein Gegenstueck, siehe "Aktueller Standort" dort
   als eigenes Leaflet-Kartensteuerelement). Nutzerauftrag 2026-09-10: bisher
   "btn-outline-primary"/"btn-primary" pur aus Bootstrap - deren tatsaechliche
   Farbe haengt von der jeweils geladenen Template-/Bootstrap-Kaskade ab und
   wich dadurch von der uebrigen, projektweiten Standardfarbe ab (sichtbar
   z.B. an einem dunkleren Blau als in com-bilder-common.css). Bewusst NICHT
   in _shared_geoposition.php selbst geaendert (die Datei wird auch von den
   Designs Klassisch/Modern/Masonry genutzt) - stattdessen hier, auf den
   Panel-Inhalt begrenzt, per Klassen-Selektor ueberschrieben: dieselbe Optik
   wie ".com-bilder-btn" (com-bilder-common.css), nur eben ohne dort die
   Bootstrap-Klassen im Markup gegen "com-bilder-btn" tauschen zu muessen. */
.cbg-below-content .btn-outline-primary,
.cbg-below-content .btn-primary {
    background-color: #fff !important;
    border-color: #0d6efd !important;
    color: #0d6efd !important;
}

.cbg-below-content .btn-outline-primary:hover,
.cbg-below-content .btn-outline-primary:focus,
.cbg-below-content .btn-outline-primary.active,
.cbg-below-content .btn-primary:hover,
.cbg-below-content .btn-primary:focus,
.cbg-below-content .btn-primary:active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

/* Der Button "Fotogallerie" (nur View geo, s.o.) sitzt als eigenes,
   direktes Flex-Kind in ".cbg-below-content" (flex-direction: column) -
   ohne diese Regel wuerde er (wie jedes Flex-Kind standardmaessig,
   "align-items: stretch") ueber die gesamte Panel-Breite gezogen statt nur
   so breit wie sein Text zu sein (Nutzermeldung 2026-09-10, im Vergleich zu
   den kompakten Standort-Buttons in View gallery - die sitzen dort in einem
   eigenen ".d-flex"-Zeilen-Wrapper aus _shared_geoposition.php und sind
   dadurch bereits automatisch textbreit). */
.cbg-below-content .com-bilder-btn {
    align-self: flex-start;
}

/* ============================================================
   Foto+Beschreibung-Overlay ("Stufe 2") - gemeinsamer Kern
   ============================================================ */
.cbg-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

body.cbg-detail-open {
    overflow: hidden;
}

.cbg-detail-dialog {
    position: relative;
    background: #fff;
    border-radius: 6px;
    max-width: min(96vw, 1400px);
    width: 100%;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
}

.cbg-detail-close {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.88);
    border: none;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    font-size: 24px;
    line-height: 1;
    color: #495057;
    cursor: pointer;
    padding: 0;
}

.cbg-detail-close:hover {
    color: #c51b1b;
}

.cbg-detail-photo {
    position: relative;
    flex: 1 1 65%;
    min-width: 280px;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cbg-detail-zoom-frame {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    background: #000;
    overflow: hidden;
}

.cbg-detail-zoom-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.cbg-detail-zoom-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0.15;
    background-repeat: repeat;
    background-size: 260px 150px;
    background-image: var(--cbg-detail-watermark-image);
}

.cbg-detail-info {
    flex: 1 1 320px;
    min-width: 280px;
    padding: 24px;
    font-family: Arial, sans-serif;
}

.cbg-detail-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(45, 43, 43, 0.2);
}