/* @override https://neu.gregorhavenstein.de/wp/wp-content/themes/gregorhavenstein/style.css?* */

/*
Theme Name: Gregor Havenstein
Description:
Version: 2.0
Author: PD
*/

@import url("css/webfonts.css");
@import url("css/columns.css");
/* @group RESET */

/*	RESET
-------------------------------------------------------------------------------*/


article, aside, figure, footer, header, hgroup, nav, section {display: block;}
img, picture, video, canvas, svg {display:  block; max-width: 100%; height:auto;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
   don't forget to restore the bullets within content. */
ul {list-style: none;}
:where(ul, li) {
	padding: 0;
	margin: 0;
}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; vertical-align: baseline;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: 700; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

input, button, textarea, select { font: inherit; margin: 0; border-radius: 0;}
input:focus, textarea:focus, select:focus { AUS_outline: none;}

input { /* remove top input shadow */
-webkit-appearance: none;
-moz-appearance: none;
}

*:focus:not(:focus-visible) { outline: none }

table {font-size: inherit; font: 100%;}

a:hover, a:active {outline: none;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {cursor: pointer;}


/* prevent flickering on touch */
* {
	-webkit-tap-highlight-color:transparent;
}

/* natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }

 /* subscript and superscript */
sub { vertical-align: sub; font-size: 70%; line-height: 0; }
sup { vertical-align: super; font-size: 70%; line-height: 0; }

/* fine-grained control over hyphenation in text */
* { hyphenate-limit-chars: 10 4 4; }

/* @end */

/* -------------------------------------------------------------------------------*/


/*

text			#2B2B2B     rgba(43, 43, 43, 1)
primary			#0044FF		
gray			#808080
gray-300		#F8F8F8

*/

:root {
	--base-font-size: 20px;
	--base-line-height: 1.5; /*30px*/

	
	--body-bg: #FFF;

	--font-sans: BRFirma, sans-serif;
	
	--text-color: #2B2B2B;
	--link-color: var(--text-color);
	--link-color-hover: var(--text-color);

	--primary-color: #0044FF;
	--gray: #808080;
	--gray-300: #F8F8F8;
	--border-color: #DBDBDC;
	
	--text-small: 15px;
	
	--page-width: 1280px;
	--page-padding: 43px;

	--container-width: 1200px;
	--main-width: 820px;
	--block-mb: 2.2rem;
	
	 --header-height: 84px;
	 
	 --block-gap: 40px;
 }
 
 
  @media screen and (max-width: 600px) {
	 :root {
		--base-font-size: 18px;
		--page-padding: 20px;
		--header-height: 56px;
		--block-gap: 24px;
	}
}

 

/* GENERAL
---------------------------------------------------------------------------------*/


html {
	height: 100%;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: var(--base-font-size);
	line-height: var(--base-line-height);
	color: var(--text-color);
	background: var(--body-bg);
}


a {
	position: relative;
	color: var(--link-color);
	text-decoration: none;
}

a, input {
	transition: all 250ms ease-in-out;
}

a:visited {
	color: var(--link-color);
}

a:active {
	color: var(--link-color);
}

a:hover {
	color: var(--link-color-hover);
}


:where(p,ul,ol,h1,h2,h3,h4,h5){
	line-height: var(--base-line-height);
	margin: var(--block-gap) 0 0 0;
	font-weight: 400;
}

h1, .h1 {
	font-size: 40px;
	line-height: 50px;
	margin-bottom: 60px;
	font-weight: 600; /*semibold*/
}

h2,.h2 {
	margin-top: 60px;
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
}

h3 {
	font-size: 20px;
	line-height: 30px;
	font-weight: 400;
}

h4 {
	font-weight: 700;
	font-size: var(--text-small);	
}


:where(h2,h3,h4) + :is(p,ol,ul) {
	margin-top: 12px;
}


hr {
	position: relative;
	display: block;
	height: 1px;
	border: 0;
	background: transparent;
	border-bottom: 1px solid #000;
	padding: 0rem 0 0 0;
	width: 100%;
	margin: 3rem auto;
}

img {
	transition: all 300ms ease-in-out;

}

a:hover img {
	transition: all 350ms ease;
}

b, strong {
}


.text-small {
	font-size: var(--text-small);
	line-height: 20px;
	letter-spacing: 0.3px;
}

.text-small-gray {
	color: var(--gray);
}

.flow > *:first-child,
[class^="col-"] > *:first-child {
	margin-top: 0;
}



@media screen and (max-width: 1024px) {
	h1, .h1 {
		font-size: 36px;
		line-height: 46px;
	}
}



@media screen and (max-width: 600px) {
	
	h1, .h1 {
		font-size: 28px;
		line-height: 38px;
		margin-bottom: 32px;
	}

	h2, .h2 {
		margin-top: 32px;
		font-size: 18px;
		line-height: 28px;
	}

	h3, .h3 {
		font-size: 18px;
		line-height: 28px;
	}
	
	
		
}




/* BASIC
---------------------------------------------------------------------------------*/

.page-wrap {
	position: relative;
	min-height: 100%;
	height: auto;
	overflow: hidden;
}

.container,
.container-fluid {
	position: relative;
	max-width: calc(var(--page-width) + 2 * var(--page-padding));
	margin: 0 auto;
	padding: 0 var(--page-padding);
}


/* HEADER
---------------------------------------------------------------------------------*/

#header {
	position: fixed;
	width: 100%;
	height: var(--header-height);
	z-index: 3;
	
	display: flex;
  	flex-wrap: nowrap;
  	align-items: center;
  	justify-content: space-between;
	background: #FFF;
	box-shadow: 0 0 -20px 5px rgba(0,0,0, .0);
	transition: all 350ms ease;	
}

.mob-menu-open #header {
	background: transparent;
}


#header .container {
	width: 100%;
	display: flex;
	gap: 30px;
	align-items: center;
}

#header.scroll {
	box-shadow: 0 2px 20px 0px rgba(0,0,0, .10);
}

.mob-menu-open #header.scroll {
	box-shadow: 0 2px 10px 0px rgba(0,0,0, .0);
}


.logo {
	position: relative;
	font-size: 16px;
	line-height: 22px;
	z-index: 10;
}

.logo a {
	display: flex;
	align-items: center;
	gap: 6px;
	color: inherit;
}

.logo a:hover {
}

.logo-title {
	font-weight: 600;
}


.logo-dash {
	width: 12px;
	height: 1px;
	margin-bottom: 3px;
	background: currentColor;
}

.logo-slogan {
}


 @media screen and (max-width: 768px) {
	.mob-menu-open .logo {
		color: #FFF;
	}
}


 @media screen and (max-width: 600px) {
	.logo-title .surname {
		display: none;
	}
}






/* MENU
---------------------------------------------------------------------------------*/

#nav {
	padding: 0 0;
	display: flex;
	flex: 1;
	align-self: flex-end;
	justify-content: flex-end;
	flex-wrap: nowrap;
}

#nav ul {
	display: flex;
	gap: 0 16px;
	flex-wrap: wrap;
	margin: 0;
}

#nav ul li {
}

#nav a {
	font-size: 16px;
	line-height: 22px;
	padding: 4px 0;
	background-image: linear-gradient(to right, transparent 33.3333333333333%, rgba(255,255,255,0) 0%);
}

@media screen and (max-width: 768px) {
	#nav {
		display: none;
	}

}


/* Mobile Menu Trigger */


.mob-menu-trigger {
	position: absolute;
	top: 50%;
	right: var(--page-padding);
	transform: translateY(-50%);

	border: none;
	z-index: 50;
	margin-right: -5px;
	background: transparent;
	color: var(--text-color);
	
	display: none;
 	align-items: center;
	height: 30px;
}

@media screen and (max-width: 768px) {

	.mob-menu-trigger {
		display: block;
	}
}

/* Hamburger Icon ani*/

.mob-menu-trigger span {
	margin: 0 auto;
	position: relative;
}

.mob-menu-trigger span:before,
.mob-menu-trigger span:after {
	position: absolute;
	content: '';
}
.mob-menu-trigger span,
.mob-menu-trigger span:before,
.mob-menu-trigger span:after {
	width: 20px;
	height: 1px;
	background-color: var(--text-color);
	display: block;
}
.mob-menu-trigger span:before {
	margin-top: -7px;
}
.mob-menu-trigger span:after {
	margin-top: 7px;
}

.mob-menu-trigger.open span,
.mob-menu-trigger.open span:before,
.mob-menu-trigger.open span:after {
	width: 26px;
	background: #FFF;
}

.mob-menu-trigger.open span {
	margin-right: -3px;
}


/* --- btn --- */

.mob-menu-trigger span {
	transition-duration: 0s;
	AUS_transition-delay: 0.15s;
}
.mob-menu-trigger.open span {
	background-color: rgba(0,0,0,0.0);
	AUS_transition-delay: 0.15s;
}
.mob-menu-trigger span:before {
	transition-property: margin, transform;
	transition-duration: 0.15s;
	AUS_transition-delay: 0.15s, 0s;
}
.mob-menu-trigger.open span:before {
	margin-top: 0;
	transform: rotate(45deg);
	AUS_transition-delay: 0s, 0.15s;
}
.mob-menu-trigger span:after {
	transition-property: margin, transform;
	transition-duration: 0.15s;
	AUS_transition-delay: 0.15s, 0s;
}
.mob-menu-trigger.open span:after {
	margin-top: 0;
	transform: rotate(-45deg);
	AUS_transition-delay: 0s, 0.15s;
}

/* end Hambuger Icon ani*/



/* Mobile Menu */

.mob-menu {
	position: fixed;
   	top: 0;
   	right: 0;
   	width: 100%;
	height: 100%;
	
    display: flex;
	z-index: 1;
    opacity: 0;
	visibility: hidden;	
	transition: 300ms all ease-in-out;
	background: var(--text-color);
	text-align: center;
	
    overflow-y: scroll; /*!*/
	
	display: none; /*js trigger*/
}


@media screen and (max-width: 768px) {	
	.mob-menu-open .mob-menu {
		display: flex;
		visibility: visible;
		opacity: 1;	
	}
}

.mob-menu-inner {
	width: 100%;
	margin-top: 180px;
	padding: 0 var(--page-padding);
}

@media screen and (max-width: 600px) {	
	.mob-menu-inner {
		margin-top: 120px;
	}
}


.mob-menu ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	margin: 0;
}

.mob-menu ul li {
	position: relative;
}

.mob-menu ul li a {
	position: relative;
	margin: 0;
	display: block;
	padding: 8px 0;
	color: #FFF;
	font-size: 28px;
	line-height: 38px;	
	font-weight: bold;
	transition: 250ms all ease;
}

.mob-menu a::before {
	content: "";
	position: absolute;
	width: 79px;
	height: 2px;
	top: 50%;
	left: -79px;
	transform: translateY(-50%);
	margin: -2px 0 0 -30px;
	background: var(--gray);
	opacity: 0;
	transform: scaleX(.3);
	transform-origin: center left;
	transition: 250ms all ease-in-out;
}

.mob-menu ul li.current_page_parent a:hover,
.mob-menu ul li.current_page_parent:hover a,
.mob-menu ul li.current_page_item:hover a {
}


.mob-menu ul ul {
	display: none;
}

.mob-menu ul ul li a {
	font-size: 1rem;
	padding: 0.5rem 0;
}





/* Mob Menu Animation */

.mob-menu li {
 opacity: 0;
 animation: fadeLiIn 400ms ease-in-out 1 forwards;
 }

.mob-menu li:nth-child(1) {
  animation-delay: 100ms;
}

.mob-menu li:nth-child(2) {
  animation-delay: 200ms;
}

.mob-menu li:nth-child(3) {
  animation-delay: 300ms;
}

.mob-menu li:nth-child(4) {
  animation-delay: 400ms;
}

.mob-menu li:nth-child(5) {
  animation-delay: 500ms;
}

.mob-menu li:nth-child(6) {
  animation-delay: 600ms;
}

.mob-menu li:nth-child(7) {
  animation-delay: 700ms;
}

.mob-menu li:nth-child(8) {
  animation-delay: 750ms;
}


/* Animation steps */

@keyframes fadeLiIn {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
    transform: translate(0,0);
  }
}





/* MAIN
---------------------------------------------------------------------------------*/

#content {
	margin-top: var(--header-height); /*fixed header height*/
	padding-top: 120px;
	margin-bottom: 240px;	
}


a.btn {
	position: relative;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: none;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	background: var(--text-color);
	color: #FFF;	
	padding: 12px 36px;
	outline-offset: 4px;
	transition: 300ms ease;
}

a.btn:hover {
	background: var(--primary-color);
}

a.btn:focus-visible {
	background: var(--primary-color);
}

a.btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 10rem;
	z-index: -1;
	background: var(--text-color);
	transition: 300ms ease;
}

a.btn:hover::before {
	background: var(--primary-color);
	transform: scale(1.05);
}


a.btn::after { /*icon*/
	content: "\e813";
	font-family: 'icons';
	font-weight: normal;
	font-size: 17px;
	margin-right: -4px;
}


/* btn style: archive */

a.btn.btn-archive {
	margin: 0 auto;
}

a.btn.btn-archive::after {
	content: "\ebdc";
	font-size: 24px;
	line-height: 0;
	order: -1;
	margin-left: -6px;
	margin-right: 0;
	display: ;
}


/* btn style: blank */

a.btn-blank {
	padding: 12px 16px;
	color: var(--text-color);
	background: transparent;
}

a.btn-blank::before {
	display: none;
}


a.btn-blank:hover {
	background: var(--gray-300);
}

a.btn-blank:focus-visible {
	background: var(--gray-300);
}


.prev-post .btn-blank {
	margin-left: -12px;
}

.next-post .btn-blank {
	margin-right: -12px;
}

.prev-post .btn-blank::after {
	content: "\e812";
	order: -1;
	margin-right: 0;
	margin-left: -4px;
}

.next-post .btn-blank {
  justify-content: flex-end;
}


/* Links with underline animation (multiline) */

a:has(.underline) {
	overflow-wrap: break-word;

	background-image: linear-gradient(to right, #2B2B2B 33.3333333333333%, rgba(255,255,255,0) 0%);
	background-position: left bottom;
	background-size: 3px 1px;
	background-repeat: repeat-x;
	padding: 2px 0;
  }

a:has(.underline):hover {
}

a .underline {
	overflow-wrap: break-word;
	
  background-image: linear-gradient(var(--primary-color) calc(100% - 10px), var(--primary-color) 10px);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  padding: 2px 0;
  transition: background-size 300ms;
}

a:hover .underline {
	background-size: 100% 1px;
}


/* --- */


.textlink-white {
	color: #FFF;
	background: url(images/dotted-line-white.png) repeat-x bottom left;

}

.textlink-white:hover {
	color: #FFF;
	opacity: .8;
}



/* WP core styles */

.alignnone {

}

.aligncenter,div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
	margin: 5px 1.4rem 1.4rem 0;
}

.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

p a img {
	display: block;
}

a img.alignright {
	float: right;
	margin: 5px 0 1.4rem 1.4rem;
}

img.alignnone,
a img.alignnone {
	/* margin: 5px 20px 20px 0; */
	margin: 0;
	padding: 0;
}

a img.alignleft {
	float: left;
	margin: 5px 1.4rem 1.4rem 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.sticky {

}

.bypostauthor {

}

/* WP Edit Link */

a.post-edit-link {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
	font-size: 11px;
	padding: 8px 12px;
	text-transform: uppercase;
	text-decoration: none;
	background: #0073AA;
	color: #FFF;
}


.link-icon {
	position: relative;
	display: block;
	margin: 0 3px 8px 0;
	font-weight: 700;
}

p > span.link-icon {
	margin-bottom: 0;
}

.link-icon:before {
	content: "\e802";
	font-family: 'icons';
	font-size: 1.1em;
	font-weight: normal;
	color: #C70370;
	margin: 0 8px 0 0;
}

i { /* IE */
	font-family: 'icons';
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Gallery */

.gallery {
	clear: both;
	margin-left: -2px;
	margin-right: -2px;
	margin-bottom: 1rem;
}

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


.gallery-item {
	width: 20%;
	float: left;
	padding: 0px 2px 4px 2px; /*gaps*/
	overflow: hidden;

}

.gallery-icon {
	overflow: hidden;
}


.gallery-item a {
	display: block;
}

.gallery-item img {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
	background: transparent;
}

.gallery-item a:hover img {
	transform: scale(1.1);
	background: transparent;
}



/* Lists */

.main ul,
.main ol {
}

.main ul {
	list-style-type: none;
}

.main li {
	position: relative;
	padding-left: 1rem;
}

.main li:last-child {
}

.main ul li:before {
	position: absolute;
	content: "•";
	top: 0;
	left: 0;
	margin: -1px 0 0 0;
}

.main ol {
	list-style-position: inside;
	padding: 0;
}

.main ol li {
	padding-left: 0;
}





/* Template: Startseite */ 

.start #content {
	padding-top: 0;
}


.hero {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 120px 0 120px 0;
}

.hero-content {
	display: flex;
	flex-direction: column;
	margin: -10px 0 0 0; /*finetuning*/
}

.hero-title {
	margin: 0;
	font-weight: 300;
}

.hero-title em {
	position: relative;
	font-style: normal;
	font-weight: 700;
}

.hero-btn {
	margin-top: 40px;
}

.hero-image-wrap {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	AUS-background: PINK;
}

.hero-image-wrap .container {
	width: 100%;
}

.hero-image {
	position: relative;
	display: block;
	width: 100%;
	height: 640px;
	
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
	
	border: 0px solid red;
}

.hero-image img {
	display: block;
}


 @media screen and (max-width: 600px) {
	.hero {
		padding: 60px 0;
	}
}



/* 
https://css-tricks.com/aspect-ratio-boxes 
http://ratiobuddy.com/
*/


.start .card-grid {
	
}

.card-grid .row {
	margin-left: -1px;
	margin-right: -1px;
	
	margin-left: -2px;
	margin-right: -2px;
	

}

.card-grid [class*=col-] {
	padding: 0px;
}


.col-12.card-column {
	padding: 0;
}

.card {
  position: relative;
  overflow: hidden;
   /*gap*/  
    margin: 0px;
}

.card a {
	display: block;
	overflow: hidden;
	outline-offset: -3px;
}

.card a:hover {
	background: transparent;
}

.card img {
	display: block;
	transition: all 700ms ease;
}

.card a:hover img {
 	transition: all 700ms ease;
 	opacity: .85;
}


.card-inner {
  position: relative;
}

.card:after,
.card:before {
	content: "";
	position: absolute;
	top: 0;
	background: #FFF;
	z-index: 1;
	opacity: 1;
} 
.card:after {
	width: 100%;
	height: 2px;
	left: 0;
}

.card:before {
	width: 2px;
	height: 100%;
	left: 0px;
}



.card-inner:after,
.card-inner:before {
	content: "";
	position: absolute;
	bottom: 0;
	background: #FFF;
	z-index: 1;
	opacity: 1;
} 
.card-inner:after {
	width: 100%;
	height: 2px;
	left: 0;
}

.card-inner:before {
	width: 2px;
	height: 100%;
	right: 0px;
}


.card-head {
	position: absolute;
	z-index: 1;
	padding: 32px;
	padding-top: 24px;
}

.card-title {
	position: relative;
	margin: 0;
	font-weight: 400;
	font-size: var(--base-font-size);
	line-height: var(--base-line-height);
	display: flex;
	align-items: center;
}

.card-title::after {
	content: "\e814";
	font-family: 'icons';
	font-size: 24px;
	margin: 0 0 2px 8px;
	opacity: 0;
	transform: translateX(-10px);
	transition: 250ms ease;
}

.card a:hover .card-title::after,
.card a:focus-visible .card-title::after {
	opacity: 1;
	transform: translateX(0);
	color: var(--primary-color);
}


.card-image {
  height: 100%;
  background: var(--gray);
  
  display: flex;
  align-items: flex-end;
}

.card-image img {
	display: block;
	width: 100%;
	height: auto;
}

.card-caption {
	margin: 0;
	padding: 17px 4px; /*mind gap space*/
	font-size: var(--text-small);
	line-height: 20px;
	padding-bottom: 0;
}

.card-caption.caption-right {
	text-align: right;
}


.caption-side-left .caption-bottom,
.caption-side-right .caption-bottom { 
	display: none; /* hide on desktop - show on mobile */
}

.caption-column {
}

.caption-column .card-caption {
	padding-top: 6px;
}

.caption-side-left .caption-column {
	position: relative;
	z-index: 1;
	padding-right: 15px;
}

.caption-side-right .caption-column {
	padding-left: 15px;
}



.start .all-projects-btn-wrap {
	margin-top: 80px;
}


@media screen and (max-width: 600px) {	
	.card-title {
	}

	.start .all-projects-btn-wrap {
		margin-top: 40px;
	}
}

/* Flex Content */


.flex-block {
	margin-top: 80px; /*80*/
	border: 0px solid PLUM;
}

.flex-block:first-child {
	margin-top: 0;
}

.hero + .flex-block {
	margin-top: 0;
}

.flex-block:last-child {
}

.flex-block p:last-child,
.flex-block ul:last-child {
	margin-bottom: 0;
}

.mt-0, 
.flex-block.mt-0 {
	margin-top: 0;
}

.mt-24, 
.flex-block.mt-24 {
	margin-top: 24px;
}


.mb-0,
.flex-block.mb-0 {
	margin-bottom: 0;
}


/* Flex Editor */

.flex-editor {

}

.editor-title {
}

.editor-content {
}

.editor-content:has(h2:first-child) {
	margin-top: 0;
}

.editor-content > *:first-child {
	margin-top: 0;
}

.editor-content > :where(p,ol,ul,h3,h4):first-child {
	margin-top: 5px;
}

.editor-content > :where(h2):first-child {
	margin-top: 16px;
}

@media screen and (max-width: 1024px) {
	.editor-content > :where(h2):first-child {
		margin-top: 14px;
	}
}

@media screen and (max-width: 600px) {
	.editor-content > *:first-child {
		margin-top: 0;
	}
}

/* Flex Text */

.flex-text {
}



/* Flex Kontakt */


.flex-contact {
	
}

.flex-block + .flex-contact {
	margin-top: 120px;
}

.contact-title {
	margin-top: -3px;
}

.contact-field {
	margin-top: var(--block-gap);
	padding-bottom: 24px;
	border-bottom: 1px solid #d3d3d3;
}

.contact-field + .contact-field {
	margin-top: 24px;
}

.contact-field-label {
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	color: var(--text-color);
}

.contact-field-label + * {
	margin-top: 4px;
}





/* Flex Logogalerie */


.flex-clients {
}

.clients-gallery {
}


.clients-gallery-item {
	margin-bottom: 4px;	
}

.clients-gallery a {
	display: block;
	overflow: hidden;
	background: var(--gray);
}

.clients-gallery img {
	display: block;
}

.clients-gallery a:hover {
}

.clients-gallery a:hover img {
	opacity: .95;
}



/* Arbeiten Liste */

.projects-list {
	margin-bottom: -80px; /*!*/
}

.project-list-item {
	position: relative;	
	margin-bottom: 4px;
	height: 100%;
}

.project-list-content {
	padding: 24px 0 0 0;
}

.project-list-label {
	font-size: var(--text-small);
	line-height: 20px;
	margin-bottom: 4px;
}

.project-list-title {
	font-size: var(--base-font-size);
	line-height: var(--base-line-height);
	font-weight: 400;
	margin: 0 0 70px 0; /*80*/
}

.project-list-title a {
	position: inherit;
	background-image: none; 
}

.project-list-title a::after { /*link entire card*/
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

.project-list-title a .textlink {
	background-image: linear-gradient(to right, transparent 33.3333333333333%, rgba(255,255,255,0) 0%);
}


.project-list-title a:hover .textlink::before {
	visibility: visible;
	width: 100%;	
}



.project-list-thumbnail {
	position: relative;
	background: var(--gray);
}

.project-list-thumbnail a {
	display: block;
	overflow: hidden;
	width: 100%;
}

.project-list-thumbnail a:hover {
}

.project-list-thumbnail img {
	display: block;
	transition: all 700ms ease;
}

.project-list-item:has(a):hover img {
	transition: all 700ms ease;
 	opacity: .85;
}

.project-list-thumbnail .view-option {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	background: #FFF;
	z-index: 1;
}


/* Arbeiten Detail */


.project-header {
	margin-bottom: 80px;
}

.project-title {
	margin-top: -4px;
}

.project-desc {
}

.project-desc p:last-child {
	margin-bottom: 0;
}

.project-meta {
	font-size: var(--text-small);
	line-height: 20px;
}


.project-meta + .project-meta {
	margin-top: 20px;
}

.project-meta > *:last-child {
	margin-bottom: 0;
}

.project-meta p {
	margin: 0;
}

.project-meta-label {
	font-weight: 600;
	margin-bottom: 4px;
}

.project-meta a {
}

.project-gallery {
	margin-bottom: 120px;
}

.post-nav-wrap {
	margin-top: 80px;
}

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
}

.prev-post,
.next-post {
}


.prev-post a.btn,
.next-post a.btn {

}

.next-post {
	text-align: right;
}

.post-nav .btn {
	white-space: nowrap;
}







/* FOOTER
---------------------------------------------------------------------------------*/


#footer {
	padding: 30px 0;
}


#footer .container {
	display: flex;
}


.footer-menu {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
}

.footer-menu li {
	line-height: 1;
}

.footer-menu li a {
	color: var(--text-color);
	font-size: var(--text-small);
	line-height: 20px;
	background-image: linear-gradient(to right, transparent 33.3333333333333%, rgba(255,255,255,0) 0%);
}

.footer-menu li a:hover {
}

.scrolltopbtn { 
	flex: 1 0 auto;
	display: flex;
	gap: 4px;
	align-items: center;
	border: none;
	margin-top: auto;
	margin-bottom: -12px;
	margin-right: -16px;
	padding: 12px 16px;
	font-size: var(--text-small);
	font-weight: bold;
	line-height: 20px;
	background: transparent;
	border-radius: 10rem;
	transition: 250ms ease;
}

.scrolltopbtn i {
	font-size: 15px;
	margin-right: -5px;
}


.scrolltopbtn:hover {
	background: var(--gray-300);
}




@media screen and (max-width: 768px) {

	.footer-menu {
		flex-direction: column;	
	}
	
	.scrolltopbtn {
		margin-top: auto;
	}

}




/* --- Slick Slider --- */

/* --- Slick neccessary --- */


/* Slider */

.slick-slider {
	position: relative;
	display: block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;

	opacity: 0;
}

.slick-slider.slick-initialized {
	/* fadeIn*/
	opacity: 1;
}


.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.slick-list:focus {
	outline: none;
}

.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
}

.slick-track:before,
.slick-track:after {
	display: table;
	content: '';
}

.slick-track:after {
	clear: both;
}

.slick-loading .slick-track {
	visibility: hidden;
}

.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}

[dir='rtl'] .slick-slide {
	float: right;
}

.slick-slide img {
	display: block;
}

.slick-slide.slick-loading img {
	display: none;
}

.slick-slide.dragging img {
	pointer-events: none;
}

.slick-initialized .slick-slide {
	display: block;
}

.slick-loading .slick-slide {
	visibility: hidden;
}

.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}

/* --- Slick Theme --- */

/* Slider */

.slick-loading .slick-list {
}

/* Icons */


/* Arrows */

.slick-prev,
.slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 50%;
	display: block;
	width: 44px;
	height: 44px;
	margin-top: -25px;
	padding: 0;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
	
	border-radius: 100%;
	
	background: transparent url(images/icon-arrow-left-large.svg) no-repeat center center;
	transition: all 300ms ease;
}


.slick-next {
	transform: rotate(180deg);
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
	color: transparent;
	outline: none;
	AUS_background-color: rgba(255,255,255, .5);
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
	opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
	opacity: .25;
}

.slick-prev:before,
.slick-next:before {
	font-family: 'icons';
	font-weight: normal;
	font-size: 23px;
	line-height: 1;
	opacity: 1;
	color: #000;
	
	display: none; /* AUS*/
	
}

.slick-prev {
	left: 20px;
	z-index: 1;
}


.slick-prev:before {
	content: '<';
}

.slick-next {
	right: 20px;
}

.slick-next:before {
	content: '>';
}

.carousel .slick-prev {
	left: -25px;
}
.carousel .slick-next {
	right: -25px;
}


/* Dots */

.slick-slider {
}

.slick-dots {
	position: absolute;
	bottom: 0;
	margin: 0;
	display: block;
	width: 100%;
	padding: 0;
	list-style: none;
	text-align: center;
	margin: 0 0 24px 0!important;
}

.slick-dots li {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 10px;
	padding: 0;
	background: transparent;
}

.slick-dots li:before {
	display: none;
}

.slick-dots li button {
	font-size: 0;
	line-height: 0;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0px;
	cursor: pointer;
	border: 1px solid var(--primary-color);
	outline: none;
	border-radius: 50%;
	background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
	outline: none;
}

.slick-dots li.slick-active button {
	background: var(--primary-color);
}

.slick-slide img {
	width: 100%;
}

/* @group ACCESSIBILITY */

/* ACCESSIBILITY */


.sr-only {
	position: absolute;
	width: .0625rem;
	height: .0625rem;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.sr-only-focusable {
	transition: all 0s ease;
}

.sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
}

.skip-link:focus {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	padding: 5px;
	margin: 0;
	overflow: visible;
	clip: auto;
	z-index: 100;
	color: #FFF;
	background: var(--text-color);
	line-height: 1;
}


/* @end */

/* @group ANIMATIONS */


/* ANIMATIONS
---------------------------------------------------------------------------------*/

/*  https://github.com/daneden/animate.css */


.animated {
  -webkit-animation-duration: 1s;
  		  animation-duration: 1s;

  -webkit-animation-fill-mode: both;
  		  animation-fill-mode: both;

  -webkit-animation-timing-function: ease-in-out;
 		  animation-timing-function: ease-in-out;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;

}


@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}



@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}


@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

/* @end */



/* MEDIA QUERIES
---------------------------------------------------------------------------------*/


@media screen and (max-width: 1366px) {
body:after {
	content: "<1366";
	position: fixed;
	top: 0;
	line-height: 1;
	padding: 5px;
	font-size: 12px;
	background: lawngreen;
	z-index: 1000;
	opacity: .8;

	display: none; /* AN/AUS*/
}


}



@media screen and (max-width: 1024px) {
body:after {
	content: "<1024";
	background: TAN;
}

}




@media screen and (max-width: 768px) {
body:after {
	content: "<768";
	background: PINK;
}

p,
.main ul {
	margin-bottom: 20px;
}


.hero .container {
	justify-content: flex-start;
}



.projects .col-6.col-md-12,
.projects  .ratio-16-9 {
	width: 100%;
}


.caption-column {
	display: none; /* show on desktop - hide on mobile */
}

.caption-side-left .caption-bottom,
.caption-side-right .caption-bottom { 
	display: block; /* hide on desktop - show on mobile */
}


.post-nav {
	grid-template-columns: auto auto;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 0;
}

.post-nav > * {
	width: 50%;
}

.post-nav .btn-archive {
	order: 3;
	width: auto;	
}



}



@media screen and (max-width: 600px) {
body:after {
	content: "<600";
	background: YELLOW;
}


#content {
	padding-top: 60px; /*60*/
	margin-bottom: 120px;	
}


.flex-block {
	margin-top: 32px; /*32*/
}


.slick-prev,
.slick-next {
	display: none!important;
}


.start .card-grid {
	margin-bottom: 60px;
}

.card-head {
	padding: 20px;
	padding-top: 16px;
}

.card-title {
	font-size: 16px;
}


.project-header {
	margin-bottom: 60px;
}


.project-meta:first-child {
	margin-top: 40px;
}

.project-list-title {
	margin-bottom: 30px; /*40*/
}


.project-gallery {
	margin-bottom: 60px;
}

.flexlayout-text {
	padding: 35px 0;
}

.caption-column .card-caption {
	padding: 20px 4px;
}

.footer-menu {
	justify-content: flex-start;
}


}



@media screen and (max-width: 375px) {
body:after {
	content: "<375";
	background: MAGENTA;
}



}




/* END
---------------------------------------------------------------------------------*/