/* Fischerclub Goldangeli - Design angelehnt an das bisherige Template "muster" (2011) */
:root {
  --ga-rot: #7b1818;
  --ga-gruen: #088c07;
  --ga-gruen-dunkel: #044900;
  --ga-gelb: #ffff85;
  --cassiopeia-color-primary: #7b1818;
  --cassiopeia-color-link: #7b1818;
  --cassiopeia-color-hover: #044900;
  --link-color: #7b1818;
  --link-color-rgb: 123, 24, 24;
}
/* Platz fuer die Bildlaufleiste immer reservieren, damit Kopf und Menue
   auf kurzen und langen Seiten (z.B. Mitgliedschaft) nicht seitlich springen */
html { overflow-y: scroll; scrollbar-gutter: stable; }

body.site {
  background: #fff url("../images/bg_as.jpg") repeat-y center top fixed;
  background-size: 100% auto;
  color: var(--ga-rot);
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, .page-header h1, .item-title { color: var(--ga-rot); font-weight: normal; }
a, a:link, a:visited { color: var(--ga-rot); text-decoration: none; }
a:hover, a:focus { color: var(--ga-gruen-dunkel); text-decoration: underline; }

/* Kopfbereich: Logo statt farbigem Balken */
.container-header {
  background: transparent none !important;
  box-shadow: none;
}
.container-header .navbar-brand { padding: 10px 0 0; margin: 0; }
.container-header .brand-logo img { max-width: 100%; height: auto; width: 888px; }
.container-header .site-description { display: none; }
/* Kopf (Logo + Menue) und Inhalt exakt gleich breit und buendig: 960px wie bisher */
.container-header .grid-child { max-width: 960px; padding: 0; }
.container-header .container-nav { padding-bottom: 0; }
.container-header nav { margin-top: 0; }
@supports (display: grid) {
  .site-grid {
    grid-gap: 0;
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 240px)) [main-end] minmax(0, 1fr) [full-end];
  }
  .site-grid > [class^="container-"], .site-grid > [class*=" container-"] { column-gap: 0; }
}
.container-component { padding-top: 1.25rem; }
.container-footer .grid-child { max-width: 960px; padding-left: 0; padding-right: 0; }
/* schmale Bildschirme: links und rechts gleicher kleiner Rand fuer Kopf und Inhalt */
@media (max-width: 991.98px) {
  .container-header .grid-child, .container-footer .grid-child { padding-left: .75rem; padding-right: .75rem; }
  .site-grid { grid-template-columns: [full-start] .75rem [main-start] repeat(4, minmax(0, 1fr)) [main-end] .75rem [full-end]; }
}

/* Inhalt und Spalten durchsichtig wie bisher */
.site-grid .card, .container-component, .container-sidebar-left .card { background: transparent; border: 0; box-shadow: none; }
.container-sidebar-left .card-body { padding: 0; }

/* Menue: senkrecht links, direkt unter dem Logo (wie bisher).
   Gruene Kaestchen, weisse Schrift; Hover und aktiver Punkt fuellen das ganze Feld
   dunkelgruen mit gelber Schrift. */
.container-sidebar-left { padding-top: 0; }
.container-sidebar-left .card, .container-sidebar-left .card-body { margin: 0; padding: 0; }
.container-sidebar-left .mod-menu { display: block; margin: 0; padding: 0; list-style: none; }
.container-sidebar-left .mod-menu > li {
  display: block; margin: 0; padding: 0; background: var(--ga-gruen);
  border: 1px solid #fff; border-bottom: 0;
}
.container-sidebar-left .mod-menu > li:last-child { border-bottom: 1px solid #fff; }
.container-sidebar-left .mod-menu > li > a,
.container-sidebar-left .mod-menu > li > span {
  display: block; margin: 0; padding: 8px 15px 8px 10px; color: #fff !important;
  background: transparent; text-decoration: none;
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.85rem;
}
.container-sidebar-left .mod-menu > li:hover,
.container-sidebar-left .mod-menu > li:focus-within,
.container-sidebar-left .mod-menu > li.active,
.container-sidebar-left .mod-menu > li.current { background: var(--ga-gruen-dunkel); }
.container-sidebar-left .mod-menu > li:hover > a,
.container-sidebar-left .mod-menu > li > a:focus,
.container-sidebar-left .mod-menu > li.active > a,
.container-sidebar-left .mod-menu > li.current > a { color: var(--ga-gelb) !important; text-decoration: none; }

/* Spalten: Menue 190px, Inhalt 770px, zusammen 960px buendig unter dem Logo */
@supports (display: grid) {
  @media (min-width: 992px) {
    body.has-sidebar-left .site-grid {
      grid-template-columns: [full-start] minmax(0, 1fr) [main-start] 190px minmax(0, 385px) minmax(0, 385px) 0 [main-end] minmax(0, 1fr) [full-end];
    }
    body.has-sidebar-left .container-component { padding-left: 20px; }
  }
}
.has-sidebar-left .container-component { padding-top: 0; }

/* Tabellen aus den alten Artikeln */
.com-content-article table { border-collapse: collapse; max-width: 100%; }
.com-content-article td { padding: 2px 8px 2px 0; vertical-align: top; color: var(--ga-rot); }
.com-content-article img { max-width: 100%; height: auto; }

/* Fusszeile */
.container-footer { background: transparent none; color: var(--ga-rot); border-top: 2px solid var(--ga-gruen); }
.container-footer a { color: var(--ga-rot) !important; }

/* Knopf */
.btn-primary { background-color: var(--ga-gruen); border-color: var(--ga-gruen); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--ga-gruen-dunkel); border-color: var(--ga-gruen-dunkel); }

/* Handy/Tablet: Menue ueber dem Inhalt */
@media (max-width: 991.98px) {
  .site-grid {
    grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ."
      ". side-l side-l side-l side-l ." ". comp comp comp comp ." ". side-r side-r side-r side-r ."
      ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ." !important;
  }
  .container-sidebar-left { margin-bottom: 1rem; }
}

/* Fotogalerie (Phoca): uebersichtliches Raster mit grossen Ordnerbildern und kleiner Schrift */
#phocagallery .pg-top-icons { display: none; }
#phocagallery .pg-categories-items-box,
#phocagallery .pg-category-items-box {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  align-items: start; justify-content: stretch;
}
#phocagallery .pg-category-box,
#phocagallery .pg-item-box { margin: 0; border: 0; width: auto; }
#phocagallery .pg-category-box-image,
#phocagallery .pg-item-box-image { max-width: none !important; width: 100%; line-height: 0; }
#phocagallery .pg-category-box-image img,
#phocagallery .pg-item-box-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
#phocagallery .pg-category-box-title,
#phocagallery .pg-item-box-title {
  font-size: 0.8rem; font-weight: normal; line-height: 1.3; padding: 4px 8px; background: rgba(0, 0, 0, .55);
}
#phocagallery .pg-category-box-count { opacity: .85; }
#phocagallery .pg-item-box-icons-box { display: none; }
@media (max-width: 767.98px) {
  #phocagallery .pg-categories-items-box, #phocagallery .pg-category-items-box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}