
/* elements.css */

/* ... Footer ...
-------------------------------------------------------------------------------------------------*/
#footer {
  border-top: 1px solid #D3221D;
}
.footer {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: 1em;
}
.footer .content-image {
	align-self: end;
	justify-self: end;
}
/* ... Footer ... END
-------------------------------------------------------------------------------------------------*/



/* ... Sitemap ...
-------------------------------------------------------------------------------------------------*/
.mod_sitemap ul {
  line-height: 2;
}
/* ... Sitemap ... END
-------------------------------------------------------------------------------------------------*/



/* ... Google map ...
-------------------------------------------------------------------------------------------------*/
.routinglink input.text {
  width: 100%;
}
.routinglink .submit {
  margin: 1em 0 0;
}
/* ... Google map ... END
-------------------------------------------------------------------------------------------------*/



/* ... Misc ...
-------------------------------------------------------------------------------------------------*
/* ... Misc ... END
-------------------------------------------------------------------------------------------------*/



/* ... Suche ...
-------------------------------------------------------------------------------------------------*/
.search {
	grid-row: 2 / 3;
	grid-column: 2 / -1;
	justify-self: self-end;
}
/* ... Suche ... END
-------------------------------------------------------------------------------------------------*/



/* ... Tables ...
-------------------------------------------------------------------------------------------------*/
/* ... Tables ... END
-------------------------------------------------------------------------------------------------*/



/* ... Colorbox click 50/50 ...
-------------------------------------------------------------------------------------------------*/
#cboxPrevious,
#cboxNext {
  background: transparent;
  width: 50%;
  height: 100%;
  top: 0;
  margin-top: 0;
}
#cboxPrevious {
  left: 0;
}
#cboxNext {
  right: 0;
}
#cboxPrevious:before,
#cboxNext:before {
  background-image: url("../../assets/jquery/colorbox/1.6.1/images/controls.png");
  position: absolute;
  width: 28px;
  height: 65px;
  top: 50%;
  margin-top: -33px;
  content: '';
}
#cboxPrevious:before {
  background-position: left top;
  left: 5px;
}
#cboxNext:before {
  background-position: right top;
  right: 5px;
}
#cboxPrevious:hover:before {
  background-position: left bottom;
}
#cboxNext:hover:before {
  background-position: right bottom;
}
/* ... Colorbox click 50/50 ... END
-------------------------------------------------------------------------------------------------*/



/* ... Gallery ...
-----------------------------------------------*/
.content-gallery {
  --gallery-cols: 2;
  --gap-x: 1.5rem;
  --img-x: left;
  --img-y: top;
  --img-object-fit: contain;
}
.content-gallery.img-center {
  --img-x: center;
}
.content-gallery.img-right {
  --img-x: right;
}
.content-gallery.img-middle {
  --img-y: center;
}
.content-gallery.img-bottom {
  --img-y: bottom;
}
.content-gallery.img-cover {
  --img-object-fit: cover;
}


.content-gallery.sponsor-logo-gallery {
  --img-x: center;
  --img-y: center;
  --img-object-fit: contain;
}


.content-gallery--cols-1 {
  --gallery-cols: 1;
}
.content-gallery--cols-2 {
  --gallery-cols: 2;
}
.content-gallery--cols-3 {
  --gallery-cols: 3;
}
.content-gallery--cols-4 {
  --gallery-cols: 4;
}
.content-gallery--cols-5 {
  --gallery-cols: 5;
}
.content-gallery--cols-6 {
  --gallery-cols: 6;
}
.content-gallery--cols-8 {
  --gallery-cols: 8;
}
.content-gallery > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols), 1fr);
	gap: var(--gap-x);
  justify-items: center;
}
.content-gallery li {
	margin: 0;
	width: 100%;
}
.content-gallery figure {
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
}
.content-gallery a {
  /* aspect-ratio: 16/10; */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
	height: 100%;
}
.content-gallery img {
  /* width: 100%; */
  /* height: 100%; */
  object-fit: var(--img-object-fit);
  object-position: var(--img-x) var(--img-y);
}
/* ... Gallery ... END
-----------------------------------------------*/



/* ... Accordion ...
-----------------------------------------------*/
.content-accordion {
  margin-bottom: .5em;
}
.content-accordion .toggler {
	cursor: pointer;
  font-size: 1.2rem;
  background-color: #D3221D;
	color: #fff;
	padding: .2em .5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all .2s ease 0s;
}
.content-accordion .toggler > span {
	display: none;
}
.content-accordion .toggler::after {
	content: '>';
	font-size: 1em;
	transform: rotate(0);
	transition: all .2s ease 0s;
}
.content-accordion .toggler:hover {
	filter: brightness(.9);
}
.content-accordion .toggler.active {
}
.content-accordion .toggler.active:hover {
}
.content-accordion .toggler.active::after {
  transform: rotate(90deg);
}
.accordion {
	padding: 1em;
	border-style: solid;
	border-color: #eee;
	border-width: 0 2px 2px;
	box-sizing: border-box;
	/* background-image: linear-gradient(to right, black 50%, red 50%); */
}
/* ... Accordion ... END
-----------------------------------------------*/



/* ... Boxes (right col) ...
-------------------------------------------------------------------------------------------------*/
.box {
  padding: 0 1rem 1rem;
  background-color: #ececec;
}
/* ... Boxes (right col) ... END
-------------------------------------------------------------------------------------------------*/



/* ... Content Elements ...
-------------------------------------------------------------------------------------------------*/
.teaser img{
  float:left;
  margin: 0px 20px 0px 0px;
}
.rte img {
  display: inline-block;
  margin-right: 1em;
}
figure a,
figure img {
  display: block;
}
header figure a {
  display: inline-block;
}
#main figure img {
  border-radius: 1px;
}
.media {
  --gap-h: 1.5em;
  --gap-v: 1em;
}
.media--left,
.media--right {
  display: grid;
  grid-template-columns: auto minmax(50%, 1fr);
  grid-template-areas:
    'head head'
    'left right';
  gap: var(--gap-v) var(--gap-h);
}
.media--right {
  grid-template-columns: minmax(50%, 1fr) auto;
}
.media--right figure {
  grid-area: right;
}
.media--right .rte {
  grid-area: left;
}
.media :is(h1, h2, h3, h4, h5, h6) {
  grid-area: head;
}
.media--above figure {
  margin: 0 0 var(--gap-v);
}
.media--below figure {
  margin: var(--gap-v) 0 0;
}
/* ... Content Elements ... END
-------------------------------------------------------------------------------------------------*/
