body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
*,
*::before,
*::after {
  /* Use a more intuitive box-sizing model */
  box-sizing: border-box;
  /* https://www.youtube.com/watch?v=cH8VbLM1958 */
  min-width: 0;
  /* Remove all margins and padding */
  margin: 0;
  padding: 0;

}

/* Only show focus outline when the user is tabbing (not when clicking) */
/* Except for input and textarea */
*:focus:not(:is(input, textarea)) {
  outline: none;
}

*:focus-visible {
  outline: 1px solid blue;
}

html {
  /* Allow percentage-based heights */
  /* Setting width: 100% isn't required because it is a default for block-level elements (html and body are block level) */
  height: 100%;

  /* Sets font-size to 16px. 
  Percent units are used to ensure font will scale if user has a custom font-size browser setting (for ally).
  Using 10px as the base to make it easy to set font sizes in elements. Example: for 16px, use 1.6rem, for 32px, use 3.2rem, ...  */
  font-size: 16px;
  line-height: 1.5;
  /* Prevent the browser from synthesizing missing typefaces */
  font-synthesis: none;
  font-smooth: always;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  /* Prevent mobile browsers increasing font-size */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;

  color: black;
}

body {
  height: 100%;

  /* Prevent the rubber band effect when the user scrolls to the top or bottom of the page (WebKit only) */
  overscroll-behavior: none;

  /* UI controls color (example: range input) */
  accent-color: black;

  /* Because overscroll-behavior: none only works on WebKit, a background color is set that will show when overscroll occurs  */
  background: white;
}

p {
  /* Prevents orphans (ensures the final line of text has at least two words). */
  text-wrap: pretty;
  /* Avoid text overflow */
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  /* Stronger effect than 'pretty'. Attempts to make each line of text the same length */
  text-wrap: balance;
}

strong {
  overflow-wrap: break-word;
}

/* Remove unintuitive behaviour such as gaps around media elements.  */
img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
}

input,
textarea,
button,
button:disabled {
  font: inherit;
  color: inherit;
  border: none;
  border-radius: 0;
  background: none;
}

fieldset {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

:root {
  --color-primary: gold;
  --color-secondary: #121212;
  --color-gray: gray;
  --color-blue: blue;
  --font-sans: "Montserrat", sans-serif;
  --font-display: "Cal Sans", sans-serif;

  /* Spacing */
  --spacing-xs: .5rem;
  --spacing-sm: .75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Borders */
  --border-primary: 1px solid var(--color-primary);
  --border-primary-thick: 2px solid var(--color-primary);
  --border-secondary: 1px solid var(--color-secondary);

  /* Layout */
  --nav-height: 56px;
  --padding-horizontal: 15px;
}

body {
  font-family: var(--font-sans);

}

body #wrapper {
  height: 100%;
  position: relative;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
}

h1 {
  font-size: 2em;
  margin-bottom: var(--spacing-md);
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.17em;
}

h4 {
  font-size: 1em;
}


p {
  font-size: 1em;
}

.mod_eventreader a,
.ce_text a {
  color: var(--color-blue);
}

.ce_text a:hover {
  text-decoration: underline;
}

nav {
  background-color: var(--color-primary);
  height: var(--nav-height);
  font-size: 1.2rem;
}

nav .container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin: auto;
}

nav .logo-wrapper {
  align-items: center;
  display: flex;
  height: 100%;
}

nav ul {
  display: flex;
  justify-content: end;
  display: none;
  height: 100%;
  margin: 0px;
}

nav ul li {
  color: var(--color-secondary);
  display: flex;
}

nav ul li:hover,
nav ul .active {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

nav ul li a,
nav ul li strong {
  align-items: center;
  display: flex;
  font-weight: 600;
  padding: 0 var(--padding-horizontal);
  text-decoration: none;
}

p.help {
  color: var(--color-gray);
  font-size: 0.9em;
}
#mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  z-index: 10;
  height: 100%;
  right: 0;
  bottom: 0;
  background-color: var(--color-primary);
  border-top: var(--border-secondary);
}

#mobile-menu ul {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
}

#mobile-menu ul li strong,
#mobile-menu ul li a {
  padding: var(--padding-horizontal);
  height: 100%;
  width: 100%;
  text-decoration: none;
}

.menu-button {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  width: 56px;
}

#menu-button-close {
  display: none;
}

.hero img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

#wrapper {
  display: flex;
  flex-direction: column;
}

#container {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  flex-grow: 1;
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}


/* Module Headlines */
.mod_newslist .headline,
.ce_rsce_team .headline,
#teams-group .headline {
  display: flex;
  border-bottom: var(--border-primary);
}

.mod_newslist .headline h2,
.ce_rsce_team .headline h2,
#teams-group .headline h2 {
  padding: 0 var(--spacing-xs);
  background-color: var(--color-primary);
}

/* Module Borders */
.mod_newslist,
.mod_eventlist,
#teams-group,
.content-downloads {
  border-bottom: var(--border-primary-thick);
}

/* News & Newsarchiv */
.mod_newsarchive .layout_latest,
.mod_newslist .layout_latest {
  border-top: var(--border-primary);
  padding: var(--spacing-sm) 0;
}

.mod_newsarchive .layout_latest h2,
.mod_newslist .layout_latest h2 {
  margin-bottom: 8px;
}

.mod_newsarchive .layout_latest .info,
.mod_newslist .layout_latest .info {
  color: var(--color-gray);
}

/* Newsreader */
.mod_newsreader .layout_full .info {
  color: var(--color-gray);
  font-size: .9em;
  margin-bottom: var(--spacing-md);
}

.mod_eventreader .back,
.mod_newsreader .back {
  margin-top: var(--spacing-sm);
}

.mod_eventreader .back a,
.mod_newsreader .back a {
  color: var(--color-blue);
}

.mod_eventreader .location {
  padding-bottom: 12px;
}

/* Events */
.mod_eventlist .layout_list {
  border-top: var(--border-primary);
  padding: var(--spacing-sm) 0;
}

.mod_eventlist .layout_list h2 {
  margin-bottom: 8px;
}

.mod_eventlist .ce_text {
  margin-top: var(--spacing-xs);
}

/* Eventreader */
.mod_eventreader .layout_full .ce_text {
  margin-top: var(--spacing-md);
}

/* Team */
.team-container {
  display: grid;
  gap: var(--spacing-md);
}

.team-container .group:hover img.main-img {
  display: none;
}

.team-container img.hover-img {
  display: none;
}

.team-container .group:hover img.hover-img {
  display: block;
}

.team-card {
  border-top: var(--border-primary);
  padding: var(--spacing-sm) 0;
}

.team-container ul {
  list-style: disc;
  padding: var(--spacing-xs) var(--spacing-md);
  list-style-position: inside;
}

.team-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.img-fallback-wrapper {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
}

.img-fallback {
  width: auto;
  height: auto;
  padding: 0 80px;
}

/* Teams */
#teams-group {
  margin-bottom: 20px;
}

#teams-group a,
#teams-group .content-headline {
  color: var(--color-secondary);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-top: var(--border-primary);
  padding: var(--spacing-sm) 0;
}

#teams-group .content-headline {
  font-family: var(--font-sans);
  font-weight: 400;
}

/* Downloads */
.download-element a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: var(--border-primary);
}

/* Footer */
footer {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  padding: 20px 12px;
}

footer .container {
  display: grid;
  gap: 4px;
}

.icon-left {
  margin-right: 0.5rem;
}


/* xs */
@media (min-width: 475px) {
  .container {
    max-width: 475px;
  }

  .hero img {
    height: 300px;
  }
}

/* sm */
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }

  .btv-grid .headline {
    grid-column: span 2;
  }

  .btv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px;
  }
}

/* md */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }

  .hero img {
    height: 400px;
  }

  nav ul {
    display: flex;
  }

  .menu-button {
    display: none !important;
  }

  footer .container {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* lg */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }

  .hero {
    display: block;
  }

  .btv-grid .headline {
    grid-column: span 3;
  }

  .btv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 4rem;
  }

  .btv-grid .ce_rsce_team {
    grid-column: span 2;
  }

  .team-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }

}

/* xl */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }

  .hero img {
    height: 500px;
  }


  .team-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
  }

}

/* 2xl */
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.ce_form {
  margin-top: 20px;
}

form .widget  {
  display: grid;
  margin-bottom: 12px;
}
form .widget input  {
  padding: 8px 16px;
  border: 1px solid gray;
  border-radius: 12px;
}

form .widget-submit {
  padding: 8px 16px;
  background-color: var(--color-primary);
  border-radius: 12px;
}

form span.mandatory {
  color: red;
}