/* -------------------------------------------------------------
style sheet for regulaweber.ch  |  general styles

(c) 2018 and updated 2026 by designsia.ch
------------------------------------------------------------- */

/* istok-web-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Istok Web';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/istok-web-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* istok-web-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Istok Web';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/istok-web-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  scroll-behavior: smooth;
}

:root {
  color-scheme: light dark;
  --body-color: #606060;
  --color-primary: #eec4c8;
  --link-color: #606060;
  --link-hover-color: #606060;
  --text-margin: 3rem;
  --body-font-family: 'Istok Web',sans-serif;
  --body-font-size: 1rem;
  --body-line-height: 1.5;
  --header-height: 55px;
  letter-spacing: 0.01em;
  min-width: 300px;
}

body {
  background: transparent;
}

@supports (display:grid) {
  /* Standard for small screens */
  .site-grid {
    display: grid;
    grid-gap: 0 1em;
    grid-template-columns: [full-start] 0.1rem [main-start] repeat(4, minmax(0, 1fr)) [main-end] 0.1rem [full-end];
    grid-template-areas:
      " . banner banner banner banner . "
      " . top-a  top-a  top-a  top-a  . "
      " . top-b  top-b  top-b  top-b  . "
      " . comp   comp   comp   comp   . "
      " . side-l side-l side-l side-l . "
      " . side-r side-r side-r side-r . "
      " . bot-a  bot-a  bot-a  bot-a  . "
      " . bot-b  bot-b  bot-b  bot-b  . ";
  }

  /* From 992px: more border, align left */
  @media (width >= 992px) {
    .site-grid {
      grid-template-columns: [full-start] 3rem [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] 3rem [full-end];
      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 comp   comp   side-r . "
        " . bot-a  bot-a  bot-a  bot-a  . "
        " . bot-b  bot-b  bot-b  bot-b  . ";
    }
  }
}

.container-header {
  background: var(--body-color);
  height: var(--header-height);
}

.container-header .grid-child {
  display: flex;
  flex-direction: row;
}

.container-header .grid-child .brand-logo {
  padding-left: 1.1rem;
}

.container-header .container-nav {
  padding: 0rem 1.1rem;
  flex: 1;
}

@media (width >= 992px) {
.container-header .grid-child .brand-logo {
  padding-left: 4.1rem;
}

.container-header .container-nav {
  padding: 0rem 4.1rem;   
}
}

main {
  margin-top: 2rem!important;
}

.grid-child {
  margin-left: 0px;
}

.logo, .container-header .navbar-brand .brand-logo  {
  margin: 0px;
  padding-top: .4rem;
}

.logo a, .container-header .navbar-brand  a  {
  font-size: 1.3rem;
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
}

.container-header .logo a:hover, .container-header .navbar-brand  a:hover {
  color: var(--color-primary);
}

#background {
    position: fixed;
    top: var(--header-height, 0px);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height, 0px));
    overflow: hidden;
    z-index: -999;
}

#background .moduletable,
#background .mod-custom,
#background .mod-custom > div {
    width: 100%;
    height: 100%;
    margin: 0;
}

#background img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1.05rem;
}

h1 {
  text-transform: uppercase;
}

a, .mod-list li a {
  color: var(--body-color);
  text-decoration: underline;
}

a:hover, .mod-list li a:hover {
  text-decoration: none;
}

a.video {
  background: url(../images/icon-video.png) no-repeat left center;
  background-size: 1rem 1rem;
  padding-left: 1.5rem;
}

a.link, .links a {
  background: url(../images/icon-link.png) no-repeat left center;
  background-size: 1rem 1rem;
  padding-left: 1.5rem;
}

a.pdf {
  background: url(../images/icon-pdf.png) no-repeat left center;
  background-size: 1rem 1rem;
  padding-left: 1.5rem;
}

@media (width >= 992px) {
  .container-header .mod-menu {
    flex-direction: row;
    display: flex;
    flex: 1;
    justify-content: flex-end;
    gap: 2.5rem;
  }
}

.metismenu.mod-menu .metismenu-item {
  padding: .1rem 0;
  font-size: 1rem;
  text-transform: uppercase;
}

.metismenu.mod-menu .metismenu-item.active a, .metismenu.mod-menu .metismenu-item a:hover {
  color: var(--color-primary);
}

.submenu {
    display: flex;
    justify-content: center;
    width: 100%;
}

.submenu ul.mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0rem 0;
}

.submenu ul.mod-menu li.nav-item {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Divider */
.submenu ul.mod-menu li.nav-item:not(:last-child)::after {
    content: "|";
    margin-left: 1.5rem;
    color: var(--body-color);
}

.leftside {
    position: fixed;
    z-index: 999;
    bottom: 7rem;
    left: 0;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.155);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#aktuell {
    max-width: 300px;
    width: 100%;
    padding: 0 0.5rem 0.2rem 0.5rem;
}

.leftside ul,
.leftside li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.leftside h3 {
    text-transform: uppercase;
    margin: 0.5rem 0 0.8rem 0;
}

.leftside p {
    line-height: 1.28em;
    margin-bottom: 1rem;
}

.leftside-toggle {
    display: flex;
    justify-content: flex-end;
    padding: 0.45rem 0.5rem;
}

.leftside-toggle a {
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* Change icons open/close*/
.leftside-toggler-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-position: center;
}

/* Area is closed: create open icon */
[aria-expanded="false"] .leftside-toggler-icon {
    background-image: url(../images/icon-open.png);
}

/* Area is open: create close icon */
[aria-expanded="true"] .leftside-toggler-icon {
    position: relative;
}

[aria-expanded="true"] .leftside-toggler-icon::before,
[aria-expanded="true"] .leftside-toggler-icon::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 1rem;
    height: 2px;
    background: var(--body-color);
}

[aria-expanded="true"] .leftside-toggler-icon::before {
    transform: rotate(45deg);
}

[aria-expanded="true"] .leftside-toggler-icon::after {
    transform: rotate(-45deg);
}

.card {
    border:                     none;
    border-left:                1.125rem solid var(--color-primary);
    margin-left:                -3.4375rem;
    padding-left:               2.3125rem;
    border-radius:              none;
}

h3.biografie-titel {
    padding:                    .6rem 0rem .6rem 0rem;
}


h3.biografie-titel a {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: inherit;
}

/* if accordeon opend */
h3.biografie-titel a::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease-in-out;
    margin-right: 1rem;
    flex-shrink: 0;
}

/* if accordeon closed */
h3.biografie-titel a.collapsed::before,
h3.biografie-titel a[aria-expanded="false"]::before {
    transform: rotate(-45deg);
}

.biografie  {
    width:                      99%;
    max-width:                  500px;
}

.biografie td {
    padding:                    0rem 0rem 0rem 0rem;
    vertical-align:             top;
}

.biografie td:first-child {
    padding-right:              1.25rem;
    width:                      20%;
    min-width:                  92px;
}

.biografie td p {
    padding:                    0rem;
    margin:                     0rem;
}

#back-top {
    background:                 var(--body-color);
    padding:                    0.7rem;
    margin:                     0 .1rem .1rem 0;
    color:                      #ffffff;
    border-radius:              .25rem;
}

.btn-primary, .btn, .btn_submit, .edit .nav-tabs li a {
    background:                 #505050;
    border:                     none;
    padding:                    .5rem 0.7rem;
    margin:                     0 .1rem .1rem 0;
    color:                      #ffffff;
    text-decoration:            none;
}

.btn-primary:hover, .btn:hover, .btn-primary:focus, .btn:focus, .btn_submit:hover, .btn_submit:focus, .edit .nav-tabs li a:hover {
    color:                      #ffffff;
    background:                 #000000;
    border:                     none;
}

.btn-primary.focus, .btn-primary:focus {
    box-shadow:                 0 0 0 .2rem rgba(0,0,0,.0);
}

input.input-small, #username, #password {
    width:                      100%;
    max-width:                  60%;
}

button, input, optgroup, select, textarea {
    background:                 none;
    border:                     1px solid#505050;
    margin-bottom:              0.125rem;
}

.form-inline .checkbox, .form-inline .radio  {
    padding-right:              0.65rem;
}

label {
    font-weight:                400;
}

.control-label, #username-lbl, #password-lbl {
    min-width:                  110px;
    vertical-align:             text-top;
    width:                      35%;
}

/* image gallery styles */
.eventgallery-tiles-list .eventgallery-tiles {
    max-width: 700px!important;
  }
.eventgallery-tiles-list .eventgallery-tile .event-thumbnails {
  margin: 1rem 0rem 0rem 0rem !important;
}

.eventgallery-tiles-list .eventgallery-tile .wrapper {
  border: none!important;
  border-radius: 5px!important;
  box-shadow: 0 0px 0px 0 transparent!important;
}

#events .item .eg-content .data, #event h1.displayname {
    display: none !important;
}

.eventgallery-tiles-list .eventgallery-tile,
.thumbnail-container .event-thumbnail,
.eventgallery-tiles-list .eventgallery-tile img {
    width: 100% !important;
  }

.eventgallery-tiles-list .eventgallery-tile img {
  max-height: 460px !important;
  background-size: contain !important;
  margin-left: 0rem !important;
  background-position: 0% 0% !important;
}

.eventgallery-tiles-list .eventgallery-tile img {
  max-height: 460px !important;
  background-size: contain !important;
  margin-left: 0rem !important;
  background-position: 0% 0% !important;
  border-radius: 5px!important;
}


@media (max-width: 991.98px) {
nav.navbar {
  position: absolute;
  left: 0;
  top: 0rem;
  width: 100%;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  margin-left: auto;
  margin-top: 0rem;
}

.container-header .navbar-toggler {
  position: absolute;
  top: 0;
  right: 1rem;
  z-index: 9999;
  border: none;
  color: #ffffff;
  cursor: pointer;
  background: transparent;
  padding: 1rem .5rem 0 .5rem;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: 0;
}

/* --- Standard Hamburger  --- */
.navbar-toggler .icon-menu {
  display: inline-block;
  width: 24px;
  height: 18px;
  position: relative;
  background: linear-gradient(
    to bottom,
    #ffffff 0%, #ffffff 15%,
    transparent 15%, transparent 42%,
    #ffffff 42%, #ffffff 58%,
    transparent 58%, transparent 85%,
    #ffffff 85%, #ffffff 100%
  );
  transition: transform 0.2s ease;
}

.navbar-toggler .icon-menu::before {
  content: none !important;
}

.navbar-collapse {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 2.5rem 2rem 1.5rem 2rem;
  background: #505050;
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
  z-index: -1;
}

.navbar-collapse.show {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  z-index: 9998;
}

.navbar-collapse .container-header .mod-menu,
.navbar-collapse .mod-menu,
.navbar-collapse .navbar-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.container-header .mod-menu > li,
.navbar-collapse .mod-list li,
.metismenu.mod-menu .metismenu-item {
  width: 100% !important;
  text-align: right !important;
  padding: 0.5rem 0 !important;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.metismenu.mod-menu .metismenu-item > a,
.metismenu.mod-menu .metismenu-item > button,
.metismenu.mod-menu .metismenu-item > span {
  color: #ffffff !important;
  text-align: right !important;
  display: block !important;
  width: 100% !important;
}

[aria-expanded="true"] .icon-menu {
  background: transparent !important;
  width: 20px !important;
  height: 20px !important;
  position: relative !important;
  display: inline-block !important;
}

[aria-expanded="true"] .icon-menu::before,
[aria-expanded="true"] .icon-menu::after {
  content: "" !important;
  position: absolute !important;
  top: 9px !important;
  left: 0 !important;
  width: 20px !important;
  height: 2px !important;
  background-color: #ffffff !important;
  display: block !important;
}

[aria-expanded="true"] .icon-menu::before {
  transform: rotate(45deg) !important;
}

[aria-expanded="true"] .icon-menu::after {
  transform: rotate(-45deg) !important;
}

#events .item-container {
  position: relative;
  width: 50%!important;
}

}

@media (width <= 767.98px) {
  .container-header .container-nav .container-search, .container-header .container-nav nav {
    margin-top: 0em;
  }
}

@media (max-width: 575.98px) {
  #events .item-container {
  width: 100%!important;
}
.submenu ul.mod-menu li.nav-item:not(:last-child)::after {
  content: "|";
  margin-left: .5rem;
}

.submenu ul.mod-menu {
  gap: .5rem;
}
.eventgallery-tiles-list .eventgallery-tile {
  width: 100%!important;
}
}