/**
 * com_bilder - gemeinsamer Seitenrahmen fuer Kartenansichten (geotour, geogallery) - 2026-11-09.
 * Konzept: claude/geotour-geogallery-layout-iframe-konzept-2026-11-09.md
 *
 * Prinzip: Der Rahmen ist eine Flex-Spalte in Fensterhoehe. Kopfzeile = so hoch wie sie ist (flex: 0 0 auto),
 * Filmstreifen = so hoch wie sein Inhalt (im Fluss, nicht mehr fixed), die Karte nimmt den Rest (flex: 1 1 auto).
 * Keine Pixelwerte per Skript (--cbg-site-topbar-offset, --cbg-film-h, --cbg-map-fill-h entfallen), kein sticky,
 * keine negativen Raender. Das Seitenpanel liegt absolut IN der Kartenflaeche und endet damit ueber dem Filmstreifen.
 *
 * Wirksam nur, wenn <body> die Klasse "cbg-karten-rahmen" traegt (setzt die View); Einbettung (iframe, embed=1,
 * tmpl=component) zusaetzlich mit "cbg-einbettung".
 */

html:has(body.cbg-karten-rahmen) { height: 100%; overflow: hidden; }

body.cbg-karten-rahmen {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    /* 2026-11-11: Cassiopeia (template.min.css) setzt "body { min-height: 100vh }". Auf Chrome-Android ist 100vh = grosser Viewport (Leiste ausgeblendet),
       hoeher als der sichtbare Bereich (100dvh); min-height schlaegt height -> Body ragte ueber den Fensterrand, der untere Rand war verdeckt. */
    min-height: 0;
    margin: 0;
    padding: 0 !important;   /* tmpl=component: body.contentpane hat sonst 15px Innenabstand */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Seitenrahmen des Templates (nur im Modus mit Kopfzeile vorhanden) --- */
/* Bootstrap-Hilfsklassen (position-sticky / sticky-top) arbeiten mit !important */
body.cbg-karten-rahmen > header.container-header,
body.cbg-karten-rahmen > header.header {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto;
    z-index: 1100 !important;   /* aufklappende Menues liegen ueber Karte, Filmstreifen (790) und Panels (900); Foto-Overlays (>= 2000) bleiben darueber */
}
body.cbg-karten-rahmen > footer,
body.cbg-karten-rahmen > .container-footer { display: none !important; }

body.cbg-karten-rahmen .site-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: 0;
}
body.cbg-karten-rahmen .site-grid > :not(.container-component) { display: none !important; }

body.cbg-karten-rahmen .container-component {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
body.cbg-karten-rahmen .container-component > :not(main):not(#system-message-container) { display: none !important; }
body.cbg-karten-rahmen main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- Kartenblock: Karte (Rest) + Filmstreifen (unten) --- */
body.cbg-karten-rahmen .cbg-mobile-fixed-top {
    position: relative !important;
    top: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0;
    z-index: auto;
    box-shadow: none;
    background: transparent;
}

body.cbg-karten-rahmen .cbg-mobile-fixed-top .cbg-mobile-map-fixed {
    position: relative;
    top: auto !important;   /* altes "top: var(--cbg-site-topbar-offset)" aus der sticky-Zeit wuerde die Karte sonst nach unten versetzen */
    flex: 1 1 auto;
    min-height: 120px;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden;   /* Seitenpanel (ausgefahren: ausserhalb) wird an der Kartenflaeche beschnitten */
    z-index: 0;
}
body.cbg-karten-rahmen .cbg-mobile-map-fixed #cbg-mobile-map {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto;
    height: auto;
}

body.cbg-karten-rahmen .cbg-mobile-fixed-top .cbg-film {
    position: relative;
    left: auto; right: auto; bottom: auto;
    flex: 0 0 auto;
    max-height: 45vh;
    max-height: 45dvh;
    overflow-y: auto;
    z-index: 790;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.25);
}

/* --- Seitenpanel: absolut in der Kartenflaeche (statt fixed + Pixelvariablen) --- */
body.cbg-karten-rahmen .gt-side {
    position: absolute;
    top: 8px;
    bottom: 8px;
}

/* --- Einbettung (iframe): keine Wechsel-Links; Teilen-Taste bleibt --- */
body.cbg-einbettung .cbg-al a.cbg-al-b { display: none !important; }

/* --- View geo: Kartenblock direkt unter der Kopfzeile, ohne Sticky/100vw-Ausbruch/Raender (kein Streifen, keine Scrollbalken) --- */
body.cbg-karten-rahmen .cbg-desktop-map-sticky {
    position: relative;
    top: auto;
    flex: 1 1 auto;
    min-height: 120px;
    height: auto;
    width: 100%;
    margin: 0;
    z-index: 0;
}

/* --- 2026-11-11: Reserve unten (Bilderconfig, Tab "Karten", Feld "karten_reserve_unten"; Variable --cbg-reserve-unten kommt aus
   tmpl/_karten_rahmen_extra.php und ist nur auf Touchgeraeten bis 960 px gesetzt). Der Rahmen endet dann um die Reserve frueher:
   Filmstreifen, Copyright und Kartenauswahl bleiben ueber der Android-/Browserleiste sichtbar. --- */
body.cbg-karten-rahmen { padding-bottom: var(--cbg-reserve-unten, 0px) !important; }