/*
 Theme Name: MedEcon Ruhr 2024
 Theme URI:
 Description: MedEcon Ruhr Theme
 Author: 72dpi
 Author URI: http://www.72dpi.de/
 Version: 2.0
*/


/* MARK: Fonts
------------------------------------------------------------------------------------------------------------ */
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),  
       url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v34-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(''),
       url('fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v34-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: local(''),
       url('fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v34-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* MARK: Reset
------------------------------------------------------------------------------------------------------------ */
*, 
*::before, 
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
	height: auto;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}


/* MARK: Root
------------------------------------------------------------------------------------------------------------ */
:root {

	/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,6,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--3: clamp(0.576rem, 0.5796rem + -0.0047vi, 0.5787rem);
  --step--2: clamp(0.6944rem, 0.6856rem + 0.0444vi, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8101rem + 0.1159vi, 0.9rem);
  --step-0: clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem);
  --step-1: clamp(1.2rem, 1.1283rem + 0.3587vi, 1.4063rem);
  --step-2: clamp(1.44rem, 1.3295rem + 0.5527vi, 1.7578rem);
  --step-3: clamp(1.728rem, 1.5648rem + 0.8161vi, 2.1973rem);
  --step-4: clamp(2.0736rem, 1.8395rem + 1.1704vi, 2.7466rem);
  --step-5: clamp(2.4883rem, 2.1597rem + 1.6433vi, 3.4332rem);
  --step-6: clamp(2.986rem, 2.5319rem + 2.2705vi, 4.2915rem);

	--space-m: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
	--space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vi, 2.5rem);
	--space-xs-xl: clamp(0.875rem, -0.125rem + 5vi, 3.75rem);

  --med-copytext: "Open Sans", Helvetica, Arial, sans-serif;

  --clr-blue: #3E6AA3;
  --clr-blue-light: #9DBCD8;
	--clr-blue-light-2: #F2F5FA;
	
	--clr-grey-light-1: #f3f3f3;
	--clr-grey-light: #cdd0db;
	--clr-grey: #717a83;
	--clr-grey-dark: #4B575F;
	
	--clr-accent-1: #D4501C;
	--clr-accent-2: #78B821;
	--clr-accent-3: #d7e0c9;

	--wrap-max-width: 1280px;
	--flow-space: 1em;

	--shadow-light: 0 0 .5rem rgba(0,0,0,.15);

}


/* MARK: Defaults
------------------------------------------------------------------------------------------------------------ */
body {
	color: var(--clr-grey-dark);
	font-family: var(--med-copytext);
  font-weight: 400;
	font-size: var(--step-0);
  line-height: 1.5;
	background-color: #fff;
}

a {
	text-decoration: none;
	text-underline-offset: 3px;
	color: var(--clr-blue);
  /* outline: 0; */
}
	a:hover {
		text-decoration-color: var(--clr-grey-light);
		text-decoration-line: underline;
		
		text-decoration-thickness: 2px;
	}
	a:focus {
		outline: none;
	}


.wrap {
	max-width: min(var(--wrap-max-width), 100% - 6vw);
	margin-inline: auto;
}

main > section:first-of-type {
	/* border-top: 3px dotted red; */
	margin-block-start: var(--space-s-l);
}
main > section + section {
	margin-block-start: var(--space-s-l);
}



/* MARK: Header
------------------------------------------------------------------------------------------------------------ */
.site-header {
	padding-block: 1rem;
	background-color: var(--clr-blue-light-2);
}
	/* Burger Icon */
	.site-header .wrap {
		display: flex;
		flex-direction: column;
		gap: .5rem;
	}
	/* Burger Icon */
	.site-header .wrap div:first-child {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


.site-logo {
  display: block;
	max-width: 15rem;
	height: 3rem;
}
	.site-logo img[src*="svg"] {
		width: 100%;
		height: 100%;
	} 

/* Burger Menu */
a.burger-button .icon-menu {
  width: 2.5rem;
  aspect-ratio: 1;
 }
  .clr-burger {
    fill: var(--clr-blue);
  }
  a.burger-button .icon-menu-open,
  a.burger-button.active .icon-menu-close {
    display: block;
  }
  a.burger-button .icon-menu-close,
  a.burger-button.active .icon-menu-open {
    display: none;
  }

@media(min-width: 720px) {
	.site-header .wrap {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
}


/* Navigation Mobile and General Styles
----------------------------------------------------------------------------------- */
nav.global {
  display: flex;
	max-height: 0;
	overflow: hidden;
  transition: max-height .5s;
	font-size: var(--step-0);
  font-weight: 600;
}
	nav.global.active {
		max-height: 50rem;
	}
  nav.global ul {
    margin: 0;
		padding: 0;
		list-style: none;
  }
	nav.global > ul {
    flex-direction: column;
    flex-basis: 100%;
  }
    nav.global .sub-menu {
      display: none;
			font-weight: 400;
    }
  
  nav.global a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: .5rem;
    color: var(--clr-black);
    text-decoration: none;
  }
    nav.global > ul > li {
      border-bottom: 1px solid var(--clr-grey-light);
    }

    nav.global .sub-arrow {
      background-image: url(svg/nav-arrow.svg);
      background-size: contain;
      background-repeat: no-repeat;
      width: 1.5rem;
      aspect-ratio: 1;
    }


/* Mobile Only Styles
----------------------------------------------------------------------------------------------- */
@media (max-width: 720px) {
  nav.global ul ul a { padding-left: 1rem; } /* Sub Page */
  nav.global ul ul ul a {	padding-left: 2rem; } /* Sub Sub Page */
  nav.global ul ul ul ul a { padding-left: 3rem; } /* Sub Sub Sub Page */
  nav.global a.highlighted .sub-arrow {
    transform: rotate(90deg);
  }
}


/* Navigation Desktop
----------------------------------------------------------------------------------------------- */
@media (min-width: 720px) {
  
	a.burger-button {
		display: none;
	}
	
	nav.global,
	nav.global.active {
    max-height: none;
		overflow: visible;
		display: flex;
		justify-content: flex-end;
	}

  nav.global ul {
    display: flex;
    flex-direction: row;
  }
    nav.global ul a {
      padding: .35rem .75rem;
			/* transition: all .3s ease-in-out; */
    }
      nav.global > ul > li {
        position: relative;
        border-bottom: none;
      }
				nav.global > ul > li:hover > a,
				nav.global > ul > li > a:is(:hover),
				nav.global > ul > li.current-menu-item > a,
				nav.global > ul > li.current-menu-parent > a,
				/* News */
				body:is(.category, .single-post) nav.global > ul > li.menu-item-5 > a,
				/* Projekte */
				body:is(.tax-tax_themen, .single-projekte) nav.global > ul > li.menu-item-9599 > a,
				/* Verein */
				body.single-mitglieder nav.global > ul > li.menu-item-17141 > a,
				/* Termine */
				body.single-termine nav.global > ul > li.menu-item-464 > a,  
				/* Service */
				body:is(.single-presse, .single-podcast) nav.global > ul > li.menu-item-17143 > a {
					background-color: #fff;
	        border-radius: .5rem;
        }
  
  nav.global .sub-arrow {
    margin-inline-start: .25rem;
    transform: rotate(90deg);
    width: 1rem;
  }

  /* Desktop Dropdowns Menues and Sub-Arrows */
  nav.global .sub-menu {
    position: absolute;
    background-color:#fff;
    z-index: 100;
    border-radius: .75rem;
		box-shadow: var(--shadow-light);
		overflow: hidden;
  }
      nav.global .sub-menu li:hover a {
        color: #fff;
				background-color: var(--clr-blue-light);
      }
			nav.global .sub-menu a.current {
        font-weight: 600;
      }
        nav.global .sub-menu .sub-arrow {
          transform: rotate(0deg);
        }
}


ul.social {
	display: flex;
	gap: .5rem;
}
	ul.social a {
		display: grid;
		place-items: center;
		aspect-ratio: 1;
		width: 2rem;
		border-radius: 100vw;
		background-color: var(--clr-blue);
		color: #fff;
		text-decoration: none;
		font-size: var(--step--1);
	}


/* MARK: Subheader
-------------------------------------------------------------------------------------------------- */
.subheader-row {
	background: var(--clr-grey-dark);
	color: #d0d0d0;
	padding-block: .5rem;
}
	.subheader-row .wrap {
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		align-items: center;
	}
	
#tourbook {
	display: flex;
	gap: 1rem;
	align-items: center;
	color: #fff;
	text-decoration: none;
}
	#tourbook .slogan {
		display: none;
	}
		
	#tourbook .tourbook-btn {
		display: inline-block;
		text-transform: uppercase;
		font-size: var(--step--1);
		background: var(--clr-accent-1);
		color: #fff;
		padding: .3em .4rem;
		border-radius: 3px;
	}
	@media (min-width: 720px) {
		#tourbook .slogan {
			display: block;
		}
	}


.search-main {
	padding-block: .25rem;
	padding-inline: .5rem;
	background-color: var(--clr-grey);
	border-radius: .25rem;
	display: flex;
	min-width: 25%;
	transition: all .3s ease-in-out;
}
	.search-main:hover,
	.search-main:focus {
		background-color: var(--clr-blue-light-2);
		color: var(--clr-grey-dark);
	}
		.search-main:hover input,
		.search-main:focus input {
			color: var(--clr-grey-dark);
		}
	.search-main input {
		border: none;
		background-color: transparent;
		width: 100%;
		outline: none;
		color: #fff;
	}
	.search-main button {
		border: none;
		background-color: transparent;
		cursor: pointer;
	}

/* search results */	
.post-type-label {
	font-size: var(--step--2);
	font-weight: 400;
	background-color: var(--clr-grey-light);
	color: #fff;
	padding: .1rem .4rem;
	text-transform: uppercase;
	vertical-align: text-top;
	border-radius: 100vw;
}

/* MARK: HP Visual
-------------------------------------------------------------------------------------------------- */
.slider-row {
	background-color: var(--clr-blue-light);
	padding-block: 1.5rem;
	--swiper-theme-color: var(--clr-accent-1);
	--swiper-pagination-bullet-inactive-opacity: .4;
	--swiper-pagination-bullet-size: 12px;
	--swiper-pagination-bullet-inactive-color: #fff;
}

	.slider-row .swiper-pagination {
		bottom: 20px;
	}	
	.slider-row > .wrap {
		display: grid;
		gap: 1rem;
	}
	@media (min-width: 1024px) {
		.slider-row > .wrap {
			grid-template-columns: 2fr 1fr;
			gap: 3rem;
		}
	}
	.swiper-frontpage-slider {
		min-width: 0; /* see https://stackoverflow.com/questions/61373563/swiper-nested-inside-displaygrid-css */
		width: 100%;
	}

	.slider-row > .wrap > div:last-child {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
		.slider-row h1 {
			font-size: var(--step-2);
			color: #fff;
			line-height: 1.1;
		}
		.slider-row p {
			font-size: var(--step--1);
		}
		.slider-row .frontpage-slider-info a {
			color: #fff;
			text-decoration: underline;
		}


/* MARK: Typo
------------------------------------------------------------------------------------------------------------ */

.flow > * + * {
	margin-block-start: var(--flow-space, 1em);
}

:is(h1,h2,h3,h4) {
	line-height: 1.3;
	font-weight: 600;
	/* text-wrap: balance; */
}

h1 {
	font-size: var(--step-3);
	color: var(--clr-blue);
}
h2 {
	font-size: var(--step-2);
}
h3 {
	font-size: var(--step-1);
}
h4 {
	font-size: var(--step-0);
}
h5 {
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: .05rem;
}

.meta {
	font-size: var(--step--1);
	color: var(--clr-grey);
}
	.meta + :is(h1,h2,h3) {
		margin-block-start: .5rem;
	}

h1 span {
	color: var(--clr-grey);
}

hgroup {
	--flow-space: .75em;
}
	body.single-post hgroup h2 {
		font-size: var(--step-1);
	}


.page-intro article {
	max-width: 90ch;
}

address {
	font-style: normal;
}

article code {
	padding: .1rem .2rem;
	background-color: rgba(157,188,216,.2);
}


article ul {
	list-style-type: square;
	margin-left: 1.2rem;
}

article blockquote {
	margin: 1rem 0 1.5rem 0;
	padding: 0 0 0 2rem;
	display: inline-block;
	position: relative;
	font-style: italic;
}
	article blockquote:after {
		position: absolute;
		content: "";
		top: 0;
		bottom: 0;
		left: 0;
		background-color: var(--clr-blue-light);
		border-radius: .25rem;
		width: .5rem;
	}
  article blockquote p:last-child{
    margin-bottom: 0;
  }


hr {
  border: none;
  height: 1px;
  color: var(--clr-grey-light);
  background-color: var(--clr-grey-light);
}

mark {
	background: var(--clr-blue-light);
	padding: .1em .3rem;
	color: #fff;
}

audio {
  width: 100%;
  background-color: var(--clr-blue-light);
}

.alert {
	background-color: var(--clr-accent-1);
	color: #fff;
	padding: 1rem;
} 

.debug-box {
	border: 2px solid var(--clr-accent-1);
	padding: 1rem;
}
	.debug-box h6 {
		text-transform: uppercase;
		font-size: var(--step--1);
		color: var(--clr-accent-1);
	}


ul.ddownloads_list {
	list-style: none;
	margin-inline-start: 0;
}
	ul.ddownloads_list li {
		padding: .35rem;
	}
	ul.ddownloads_list li:nth-child(odd) {
		background-color: var(--clr-blue-light-2);
	}
	/* Sonderfall im Aside */
	aside ul.ddownloads_list > li {
		background-color: #fff !important;
		margin-block-end: 1px;
	}

/* News Mitglieder Seite */
.simple-postlist li:not(:last-child)   {
	padding-block-end: .5rem;
	border-bottom: 1px solid var(--clr-grey-light);
	margin-block-end: .5rem;
}

/* News in Sidebar Box */
.sidebar aside ul.nobullets {
	list-style: none;
}
	.sidebar aside ul.nobullets li {
		margin: 0;
		padding-bottom: .5rem;
		border-bottom: 1px solid #fff;
		margin-top: .5rem;
	}


/* WKG Overlay List Style */
ul.listbox {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
	font-size: var(--step--1);
}
	ul.listbox li {
		padding: 0;
		margin: .2rem 0;
	}
		ul.listbox li a {
			display: block;
			padding: .2rem 1rem;
			background-color: rgba(255,255,255,.3);
			border-radius: 1rem;
			text-decoration: none;
		}
			ul.listbox li a:hover {
				background-color: rgba(255,255,255,.5);
			}



/* MARK: Teaser
------------------------------------------------------------------------------------------------------------ */
/* Hacky */
@media (max-width: 720px) {
	body.single-post section:first-child .wrap > div:first-child,
	body.single-projekte section:first-child .wrap > div:first-child {
		display: none;
	}
}

.news-teaser {
	display: flex;
  flex-direction: column;
	gap: 1rem;
}
	.news-teaser figure img {
		max-height: 10rem;
		width: auto;
		border-radius: .25rem;
	}
  .news-teaser div {
    flex: 1;
  }

@media (min-width: 480px) {
  .news-teaser {
    flex-direction: row;
		gap: 1.5rem;
  }
  .news-teaser figure {
    flex: 0 1 20%;
  }
}


.select-wrapper {
	display: flex;
	gap: .5rem;
	margin-block: 1rem;
}
	.select-wrapper div {
		flex: 1;
	}
		.select-wrapper select {
			width: 100%;
			border-radius: .25rem;
			border: 2px solid var(--clr-blue);
			padding: .5rem;
			background-color: #fff;
			font-size: var(--step--1);
		}
	
#newsfilter-tab-1 {
	display: flex;
}
	.tab-content {
		display: none;
	}


	ul.tabs-menu {
		margin: 1rem 0;
		display: flex;
		gap: 1px;
	}
		ul.tabs-menu li a {
			display: inline-block;
			padding: .25rem .5rem;
			text-decoration: none;
			background: var(--clr-blue-light);
			color: #fff;
		}
			ul.tabs-menu li.current a {
				background: var(--clr-blue);
			
			}


.category-row {
	background-color: var(--clr-blue-light-2);
	padding-block: var(--space-s-l);
}


/* Event Teaser
-------------------------------------------------------------------------------------------------- */
.with-icon {
	display: flex;
	gap: 1rem;
}


/* Seite page-events.php */
.panel-event {
  margin-block: 1.5rem;
}



/* sidebar
-------------------------------------------------------------------------------------------------- */
.sidebar aside {
	background: #F2F5FA;
	padding-inline: 1rem;
	padding-block-end: 1rem;
}
	.sidebar > aside + aside {
		margin-block-start: 2rem;
	}

	.sidebar aside h4 {
		margin: 0 -1rem 1.5rem -1rem;
		padding: .3rem 1rem;
		color: #fff;
		background: var(--clr-blue-light);
		position: relative;
		text-transform: uppercase;
	}
		.sidebar aside h4:before {
			position: absolute;
			bottom: -.9rem;
			right: 0;
			content:"";
			width:0;
			height:0;
			border-left: 1rem solid var(--clr-blue-light);
			border-right: 1rem solid transparent;
			border-bottom: 1rem solid transparent;
		}





/* Swiper Slider Aside
-------------------------------------------------------------------------------------------------- */
figure.aside-slider {
	margin-bottom: 1rem;
	background-color: #fff;
	padding: 1rem;
	box-shadow: 0 0 .5rem rgba(0,0,0,.15);
}
	figure.aside-slider img {
		display: block;
	}
	figure.aside-slider figcaption {
		display: block;
		padding: .5rem 0 0 0;
		font-weight: bold;
	}



/* MARK: Mitglieder (Alle)
------------------------------------------------------------------------------------------------------------ */
.member-grid {
  margin-block: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem; 
}

	.card-member {
		border: 1px solid var(--clr-grey-light);
		border-radius: .25rem;
		overflow: hidden;
	}
		.card-member:hover {
			box-shadow: var(--shadow-light);
		}
	
	.card-member figure {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 8rem;
		max-width: 100%;
		padding: 1.5rem;
		border-bottom: 1px solid var(--clr-grey-light);
	}
		.card-member figure img  {
			max-height: 100%;
			max-width:100%;
		}
		/* .member-list-item figure img[src*='.svg']  {
			border: 1px solid red;
		} */
	.card-member h3 {
		padding: .5rem;
		font-size: var(--step--1);		
	}	




/* Mitglieder - Detail Page
-------------------------------------------------------------------------------------------------- */
.member-info {
  background: #F2F5FA;
  padding: 1rem;
	display: grid;
	gap: 1rem;
}
	@media (min-width: 720px) {
		.member-info {
			grid-template-columns: .7fr 1.3fr 1fr;
			gap: 2rem;
		}
	}

.member-logo {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-light);
}
  .member-logo img {
    padding: 1.75rem;
		width: 100%;
    height: 10rem;
		object-fit: contain;
  }
  /* .member-logo img[src*='.svg'] {
    min-width: 100%;
    min-height: 100%;
		border: 1px solid red;
  } */


ul.contact-data {
	font-size:var(--step--1);
}
	ul.contact-data li {
		padding: .25rem 0;
		border-top: 1px solid rgba(157,188,216,.5);
	}



/* MARK: Team/Verein
------------------------------------------------------------------------------------------------------------ */
.team-grid {
  margin-block: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;  
}

.card-portrait {
	background-color: #F2F5FA;
}
	.card-portrait > div {
		padding: .75rem;
	}
	.contact-meta {
		list-style: none;
		font-size: var(--step--1);
		margin-inline-start: 0;
	}

/* Sidebar Contacts */
.contactperson {
	border-top: 1px solid #fff;
	padding-block-start: 1rem;
	display: flex;
	gap: 1rem;
}
	.contactperson figure {
		flex: 0 0 35%;
	}
	.contactperson div {
		flex: 1;
	}
	.contactperson h3 {
		font-size: var(--step-0);
	}



/* MARK: Events
------------------------------------------------------------------------------------------------------------ */
.shortdate {
	display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(
    300deg,
    #E07B53,
    var(--clr-accent-1)
	);
  box-shadow: 0 2px 2px 0 hsl(0 0% 80%);
	width: 3.5rem;
	height: 3.5rem;
  border-radius: .25rem;
	text-align: center;
}
	span.shortdate-day,
  span.shortdate-month {
		display: block;
		color: #fff;
		margin: 0;
		padding: 0;
    line-height: 1;
    font-weight: 600;
	}
  span.shortdate-day {
		font-size: 1.5rem;
    
	}
	span.shortdate-month {
		font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
	}


/* Template Veranstaltungen */
.card-event {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--clr-blue-light-2);
	padding: 1rem;
	height: 100%;
}
	.card-event .med-gallery {
		--size: 5rem;
	}

ul.list-as-tags {
	margin-inline: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .1rem;
	list-style: none;
	font-size: var(--step--1);
}
	ul.list-as-tags a {
		display: block;
		background-color: var(--clr-blue-light-2);
		padding: .2rem .4rem;
	}




/* MARK: Projekte
------------------------------------------------------------------------------------------------------------ */
.project-grid {
	display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem;
}

	.card-project {
		border-radius: .35rem;
		overflow: hidden;
		border: 2px solid var(--clr-blue-light-2);
		transition: all .25s ease-in-out;
		/* background-color: var(--clr-blue-light); */
	}
		.card-project:hover {
			box-shadow: var(--shadow-light);
			scale: 1.025;
		}
		.card-project figure {
			padding: var(--space-s-l);
			background-color: var(--clr-blue-light-2);
			aspect-ratio: 4/3;
		}
			.card-project figure img[src*="svg"] {
				width: 100%;
				height: 100%;
			} 

		.card-project div {
			padding: .5rem;
		}	
			.card-project h2 {
				font-size: var(--step-0);
			}
			/* smaller size for cards */
			.card-project .project-topic a {
				font-size: var(--step--2);
				padding: .1rem .2rem;
			}


.project-completed {
	color: var(--clr-accent-2);
	font-size: var(--step--1);
	font-weight: 600;
}

aside.project-downloads {
	border-radius: .35rem;
	border: 2px solid var(--clr-blue-light-2);
	padding: .5rem;
}
	aside.project-downloads li {
		display: grid;
		grid-template-columns: 1.5rem 1fr;
	}
	aside.project-downloads li svg {
		padding-block-start: .2rem;
		color: var(--clr-blue);
	}

figure.project-partner {
	margin: 1rem 0;
	padding: .75rem;
	background-color: var(--clr-blue-light-2);
	border-radius: .75rem;
}
	figure.project-partner img {
		mix-blend-mode: multiply;
	}

.project-topic {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}
	.project-topic a {
		display: inline-block;
		background-color: var(--clr-blue-light-2);
		border-radius: .25rem;
		font-size: var(--step--1);
		padding: .25rem .5rem;
	}


figure.project-tax-img {
	margin-bottom: 1rem;
	border-radius: .75rem;
	overflow: hidden;
	max-width: 15rem;
	border: 2px solid var(--clr-blue-light);
	padding: .25rem;
	border-radius: .5rem;
}
	figure.project-tax-img img {
		border-radius: .25rem;
	}


aside.project-material ul {
	font-size: var(--step--1);
}
	aside.project-material ul li a {
		display: block;
		padding: .5rem;
		background-color: var(--clr-blue-light-2);
		border-bottom: 1px solid #fff;
	}


/* Projects Taxonomy Menu 
------------------------------------------------------------------------------------------------ */
.nav-tax-projects {
	padding-block: .75rem;
	background-color: var(--clr-blue-light-2);
}
	.nav-tax-projects ul {
		display: flex;
		flex-wrap: wrap;
		gap: .25rem;
		font-size: var(--step--1);
	}
		.nav-tax-projects ul a {
			display: block;
			padding: .1rem .5rem;
			text-decoration: none;
			border-radius: .25rem;
		}
		.nav-tax-projects ul a:hover {
			background-color: #fff;
		}
		.nav-tax-projects li.current-cat a {
			background-color: var(--clr-blue-light);
			color:#fff;
		}


.grid-project-tax {
	display: grid;
	gap: 1rem;
}
@media(min-width: 720px) {
	.grid-project-tax {
		grid-template-columns: 4fr 1.5fr;
		gap: 2rem;
	}
}


/* Featured Projects (Homepage)
-------------------------------------------------------------------------------------------------- */
.featured-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem; 
	margin-block-end: 1.5rem;
}
	.featured-project-item {
		display: flex;
		gap: 1.5rem;
	}
		.featured-project-item figure {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 7rem;
			aspect-ratio: 4/3;
			padding: .5rem;
			background-color: var(--clr-blue-light-2);
			border-radius: .25rem;
		}
			.featured-project-item figure img  {
				max-height: 100%;
				max-width:100%;
			}



	

/* MARK: Utilities
------------------------------------------------------------------------------------------------------------ */
img.cover,
figure.cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

figure.cover {
	aspect-ratio: 3 / 2;
}

.reset-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.floater.is_stuck {
	margin-top: 1rem;
}

.hyphenate {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.repel {
  display: flex;
  flex-direction: column;
  gap: var(--flow-space);
}
  @media(min-width: 720px) {
    .repel {
      flex-direction: row;
      justify-content: space-between;
    }
  }

.floater {
	position: sticky;
	top: 2rem;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

/* MARK: Buttons etc.
------------------------------------------------------------------------------------------------------------ */
:is(.btn, input[type=submit]) {
	display: inline-block;
	padding: .35rem 1rem;
	text-decoration: none;
	background: var(--clr-blue-light);
	color: rgba(255,255,255,.95);
	font-size: var(--step--1);
	border: none;
  border-radius: .25rem;
	font-weight: 600;
	white-space: nowrap;
}
	:is(.btn:hover, input[type=submit]:hover) {
		background: var(--clr-blue);
	}
	
	.btn.btn-small {
	padding: .15rem .3rem;
	font-size: var(--step--2);
	font-weight: 400;
}


.post-categories {
	list-style: none;
	margin-inline: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .2rem;
}
	a[rel*=category] {
		display: block;
		padding: .1rem .5rem;
		border-radius: .25em;
		text-decoration: none;
		background-color:var(--clr-blue-light-2);
		color: var(--clr-blue);
		font-size: var(--step--1);
	}
		a[rel*=category]:hover {
			background: var(--clr-blue-light);
			color: #fff;
		}


.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
}
	.post-tags a {
		border: 2px solid var(--clr-blue-light);
		padding: .1rem .5rem;
		border-radius: .25em;
		white-space: nowrap;
		font-size: var(--step--1);
	}
		.post-tags a:hover {
			background: var(--clr-blue-light-2);
			text-decoration: none;
		}	



a.post-edit-link {
	display: inline-block;
  margin: .5rem 0;
	padding: 2px 5px;
	background-color: var(--clr-accent-2);
	color: #fff;
	font-size: var(--step--2);
	text-decoration: none;
  border-radius: 2px;
}
	a.post-edit-link:hover {
		background-color: var(--clr-grey-dark);
	}


/* Single Post Browse Buttons
-------------------------------------------------------------------------------------------------- */

.simple-browse-posts {
	display: flex;
	gap: .5rem;
	margin-block: 2.5rem;
	/* width: fit-content;
	margin-inline: auto; */
}
	.simple-browse-posts .btn a {
		color: #fff;
		text-decoration: none;
	}
	.simple-browse-posts li:empty {
		display: none;
	}

.btn-icon a {
	padding-inline: 1.5rem;
}



/* Single Post Browse Buttons - Arrows
-------------------------------------------------------------------------------------------------- */
.browse-post-left,
.browse-post-right {
	position: fixed;
	top: 50vH;
	font-size: 2.4rem;
}
	.browse-post-left {
		left: .5rem;
	}
	.browse-post-right {
		right: .5rem;
	}
		.browse-post-left a,
		.browse-post-right a {
			background: none;
			color: var(--clr-blue-light);
		}
			.browse-post-left a:hover,
			.browse-post-right a:hover {
				background: none;
				color: var(--clr-grey-dark);
			}
@media screen and (max-width : 1024px) {
	.desktop {
		display: none;
	}
}



/* MARK: Footer
------------------------------------------------------------------------------------------------------------ */
footer.site-footer {
	margin-block-start: 3rem;
	padding-block: 2rem;
	background: var(--clr-grey-dark);
	color: var(--clr-grey-light);
}
	footer.site-footer a {
		color: var(--clr-blue-light);
	}
	footer.site-footer a:hover {
		text-decoration: underline;
	}
	footer.site-footer ul.social a {
		color: #fff;
	}

nav.footer ul ul {
	font-size: var(--step--1);
	border-left: 1px solid rgba(255, 255, 255, .5);
	padding-left: .5rem;
	margin-block: .25rem;
	margin-inline-start: .15rem;
}


.row-admin {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-block: 2rem;
  font-size: var(--step--2);
}
  .row-admin > * {
    padding: .25rem;
    background-color:var(--clr-blue-light);
    color: #fff;
    border-radius: 3px;

    & a {
			color: #fff;
      text-decoration: underline;
    }
  }


/* MARK: Overlays
------------------------------------------------------------------------------------------------------------ */	
.mfp-bg {
	background: var(--clr-grey-dark);
	opacity: 0.95;
}

button.mfp-close {
	display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  margin: 1rem;
  background-color: #fff;
  border-radius: 9999px;
  color: var(--clr-grey-dark);
}

.mfp-arrow-left::before, 
.mfp-arrow-right::before { 
  display: none; 
}
/* .mfp-arrow-left {  
  background:url(../images/large_left.png) no-Repeat top left !important;    
  width:40px; 
  height:40px; 
} 
.mfp-arrow-right { 
  background:url(../images/large_right.png) no-Repeat top left !important;   
  width:40px; 
  height:40px; 
}  */


/* Topics Overlay
-------------------------------------------------------------------------------------------------- */
#topics-overlay {
	margin-block: 2rem;
}
	#topics-overlay * {
		color: #fff;
	}
		#topics-overlay > .wrap:first-child > div * {
			margin-inline: auto;
			text-align: center;
		}

	
/* Google Maps
-------------------------------------------------------------------------------------------------- */
#map {
	width: 100%;
	height: 220px;
}
#map-small {
	width: 100%;
	height: 250px;
}
	#map img,
	#map-small img {
		max-width: inherit;
	}
	
@media (min-width : 720px) {
	body.page-template-page-kontakt #map {
		height: 440px;
	}
}	



/* MARK: Grid Layout
Adapted Flexbox Grid, inspired here: https://codepen.io/adamtowle/pen/pbBPQa
------------------------------------------------------------------------------------------------------------ */
.flex {
	--grid-gap: clamp(.75rem, 5vw, 3rem);
	display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}
  .flex > [class*="col-"] {
		min-width: 0;
    /* background-color: rgba(255, 105, 180, .1); */
		/* border: 3px solid green; */
  }

/* Mobile (sm)
----------------------------------------------------------------------------------- */
@media (width > 0) {
	.col-xs-1   { grid-column: span 1;  }
  .col-xs-2   { grid-column: span 2;  }
  .col-xs-3   { grid-column: span 3;  }
  .col-xs-4   { grid-column: span 4;  }
  .col-xs-5   { grid-column: span 5;  }
  .col-xs-6   { grid-column: span 6;  }
  .col-xs-7   { grid-column: span 7;  }
  .col-xs-8   { grid-column: span 8;  }
  .col-xs-9   { grid-column: span 9;  }
  .col-xs-10  { grid-column: span 10; }
  .col-xs-11  { grid-column: span 11; }
  .col-xs-12  { grid-column: span 12; }
}

/* Small (sm)
----------------------------------------------------------------------------------- */
@media (width > 480px) {
  .col-sm-1   { grid-column: span 1;  }
  .col-sm-2   { grid-column: span 2;  }
  .col-sm-3   { grid-column: span 3;  }
  .col-sm-4   { grid-column: span 4;  }
  .col-sm-5   { grid-column: span 5;  }
  .col-sm-6   { grid-column: span 6;  }
  .col-sm-7   { grid-column: span 7;  }
  .col-sm-8   { grid-column: span 8;  }
  .col-sm-9   { grid-column: span 9;  }
  .col-sm-10  { grid-column: span 10; }
  .col-sm-11  { grid-column: span 11; }
  .col-sm-12  { grid-column: span 12; }
}

/* Medium (md)
----------------------------------------------------------------------------------- */
@media (width > 720px) {
  .col-md-1   { grid-column: span 1;  }
  .col-md-2   { grid-column: span 2;  }
  .col-md-3   { grid-column: span 3;  }
  .col-md-4   { grid-column: span 4;  }
  .col-md-5   { grid-column: span 5;  }
  .col-md-6   { grid-column: span 6;  }
  .col-md-7   { grid-column: span 7;  }
  .col-md-8   { grid-column: span 8;  }
  .col-md-9   { grid-column: span 9;  }
  .col-md-10  { grid-column: span 10; }
  .col-md-11  { grid-column: span 11; }
  .col-md-12  { grid-column: span 12; }
}

/* Large (lg)
----------------------------------------------------------------------------------- */
@media (width > 1024px) {
  .col-lg-1   { grid-column: span 1;  }
  .col-lg-2   { grid-column: span 2;  }
  .col-lg-3   { grid-column: span 3;  }
  .col-lg-4   { grid-column: span 4;  }
  .col-lg-5   { grid-column: span 5;  }
  .col-lg-6   { grid-column: span 6;  }
  .col-lg-7   { grid-column: span 7;  }
  .col-lg-8   { grid-column: span 8;  }
  .col-lg-9   { grid-column: span 9;  }
  .col-lg-10  { grid-column: span 10; }
  .col-lg-11  { grid-column: span 11; }
  .col-lg-12  { grid-column: span 12; }
}