/* ### Banner auf Mobilgeräten doch anzeigen  */
@media (max-width: 767px) {
  .container-banner {
 /*   display: none !important; */
  }
}
/* ### Text auf Banner auf Mobilgeräten breiter  */
@media (max-width: 992px) {
  div#info {width:90% !important;}
}
/*  ##########   Header Layout geändert nach https://www.jug-zueri.ch/  ##########  */
.container-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "top below"
                       "logo logo"
                       "nav nav";
}
.container-header .container-topbar {
  padding: .5em;
}
.container-header .container-topbar {
  grid-area: top;
}
.container-header .container-below-top {
  grid-area: below;
  justify-content: flex-end;
}
.container-header .grid-child:has(.navbar-brand) {
  grid-area: logo;
}
.container-header .container-nav {
  grid-area: nav;
}
@media (width >= 991.98px) {
  .container-header {
   grid-template-columns:
    [full-start] minmax(0,1fr)
    [main-start] repeat(4,minmax(0,19.875rem))
    [main-end] minmax(0,1fr)[full-end];
   grid-template-areas: ". logo nav nav nav .";
   gap: 0 1rem;
  }
  .container-header:has(.container-below-top, .container-topbar) {
   grid-template-areas: ". top top below below ."
                        ". logo nav nav nav .";
  }
}
 /* ############  Ende Header Layout geändert  ###############  */

.bottom-a { border: 0px solid #ccc; padding-bottom: 0; margin-bottom:0;}
.bottom-b {  border: 0; padding: 0; margin-top:0;}
p.reload {text-align:right; color: #606060; font-size:0.9rem;}

h1, h2, h3, h4 {font-family: "HelveticaNowText-Regular"; Arial, sans-serif;}

/* Überschriften in Datenschutzerklärung - kleiner als sonstwo */
h2.ds {font-size:1.3em; color:#000; padding-top:10px;}
h3.ds {font-size:1.1em; color:#000;}

/* body, p {font-family: "HelveticaNowText-Light";} */
/* eigene Anpassungen */
/* Farbgebung */
:root {
  --cassiopeia-color-primary: #338000;
  --cassiopeia-color-link: #338000;
  --link-color: #338000;

  --cassiopeia-color-hover:#606060;
  --link-hover-color: #606060;
}
.container-header { background:#fff; }
.container-header .mod-menu li a{ color:#338000; }
.container-header .mod-menu li a:hover{ color:#505050; }
button.navbar-toggler {background:#ccc;}
.container-header .mod-menu li a:hover{ color:#000; }
/*.container-footer { background:#338000; }*/
.container-footer { background:#fff; }
.container-footer .mod-menu li a{ color:#505050; }
.container-footer .mod-menu li a:hover{ color:#000; }


.nav-item.active {
 /* font-weight:bold; */
}
/*  ###########################  */
body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  text-align: var(--body-text-align);
  background-color: var(--body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: #0000;
  margin: 0;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  color: #338000;
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (width >= 1200px) {
  h1, .h1 {
    font-size: 1.8rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + .9vw);
}

@media (width >= 1200px) {
  h2, .h2 {
    font-size: 1.5rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + .6vw);
}

@media (width >= 1200px) {
  h3, .h3 {
    font-size: 1.3rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + .3vw);
}

@media (width >= 1200px) {
  h4, .h4 {
    font-size: 1.2rem;
  }
}

h5, .h5 {
  font-size: 1.1rem;
}

h6, .h6 {
  font-size: 1rem;
}

a {
  color: #505050;
  text-decoration: none;
}

a:hover {
  /*--link-color-rgb: var(--link-hover-color-rgb);*/
    color: #338000;
    text-decoration: none;
}

/* #############################  */

/* ###  Bannerbild nicht abgedunkelt, wenn Text darüber  ####  */
.banner-overlay{
color:#fff;
background-position:top,50%;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
height:70vh
}
.container-banner .banner-overlay .overlay{
text-align:center;
background-color:transparent;
flex-direction:column;
justify-content:center;
align-items:center;
height:100%;
padding:1em;
display:flex
}

.container-banner .banner-overlay .overlay .text-thin{font-weight:lighter}
.container-banner .banner-overlay .overlay .text-thin:after{content:"";background:#fff;width:30%;height:4px;margin:1rem auto 2rem;display:block}
.container-banner .banner-overlay .overlay .text-thin .lead{font-size:150vh}


@media screen and (height<=740px){
.container-banner .banner-overlay{height:100vh}
}