/* ==========================================================================
   setup custom properties
   ========================================================================== */

:root {
	--color-primary: #2a313b;
	--stripe-vertical: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="209" height="560" viewBox="0 0 209 560"><path fill="%23fff" d="M209.009995 1.609985v279.070008L0 376.799988V97.72998L209.009995 1.609985Z"/><path fill="none" d="M209.009995 281.410004V560.47998L0 656.599976V377.529999l209.009995-96.119995Z"/></svg>');
	--min-vw: 576;
	--max-vw: 1400;
	--vw-diff: calc(var(--max-vw) - var(--min-vw));

	/* calculation helper */
	--fluid-calc: calc(100vw - calc(var(--min-vw) * 1px));

	/* scale helper */
	--fluid-scale: calc(var(--fluid-calc) / var(--vw-diff));
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/* ==========================================================================
   Define fonts
   ========================================================================== */

@font-face {
	font-family: 'Girly Sunrise Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Girly Sunrise Regular'), url('../fonts/GirlySunrise-BWJ2w.woff') format('woff');
}

@font-face {
	font-family: 'Static';
	font-style: normal;
	font-weight: 400;
	src: local('Static'), url('../fonts/Static.otf') format('opentype');
}

@font-face {
	font-family: 'Static';
	font-style: normal;
	font-weight: 700;
	src: local('Static Bold'), url('../fonts/Static Bold.otf') format('opentype');
}

/* ==========================================================================
	Main Style definitions
   ========================================================================== */

/*
 *   General
 */

body {
	background-color: var(--color-primary);
	color: white;
	font-family: 'Static', Verdana sans-serif;
	font-size: 18px;
	margin: 0;
}

a {
	color: black;
	text-decoration-thickness: 2px;
}

a:hover,
a:active,
a.active{
	text-decoration-style: double;
}

.h1, .h2, .h3, .h4, .h5, .h6, .overline {
	text-transform: uppercase;
}

p,
ul,
li {
	margin: 0;
	padding: 0;
}
/* set width through whole page */
.container {
	min-width: calc(320px - 6vw);
	max-width: calc(var(--max-vw) * 1px);
	margin: 0 auto;
	padding: 0 6vw;
}

ul {
	list-style: none;
	padding: 0;
}

/*
 *   Header
 */

header {
	padding: 2.5vw 0 15px;
	background-color: var(--color-primary);
}

.overline,
.h1 {
	text-align: center;
}

.overline {
	--min-size: 32;
	--max-size: 60;
	--size-diff: 28;

	font-size: clamp(
		calc(var(--min-size) * 1px),
		calc(var(--fluid-scale) * var(--size-diff) + calc(var(--min-size) * 1px)),
		calc(var(--max-size) * 1px)
	);

	display: block;
	padding-left: 10px;
	padding-right: 10px;
}

.h1 {
	--min-size: 15;
	--max-size: 28;
	--size-diff: 13;

	font-size: clamp(
		calc(var(--min-size) * 1px),
		calc(var(--fluid-scale) * var(--size-diff) + calc(var(--min-size) * 1px)),
		calc(var(--max-size) * 1px)
	);

	line-height: 1.2;
	padding-left: 10px;
	padding-right: 10px;
}

/*
 *   Main Content
 */

.main-content {
	position: relative;
	padding-bottom: 40px;
}

.main-content .container {
	position: relative;
}

.main-content::before,
.main-content::after {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	z-index: 0;
	background-image: var(--stripe-vertical);
	background-repeat: repeat-y;
	background-size: 100px auto;
	width: 2vw;
	height: 100%;
}

.main-content::before {
	left: 0;
	background-position-y: -86px;
}

.main-content::after {
	right: 0;
	background-position-y: 86px;
}

/**
 *	Main logo
 */
.main-company-logo {
	padding-bottom: 50px;
}

.main-company-logo img {
	display: block;
	margin: 0 auto;

	--min-size: 170;
	--max-size: 400;
	--size-diff: 230;

	width: clamp(
		calc(var(--min-size) * 1px),
		calc(var(--fluid-scale) * var(--size-diff) + calc(var(--min-size) * 1px)),
		calc(var(--max-size) * 1px)
	);
}

.main-company-logo-small img {
	display: block;
	margin: 0 auto;
	position: relative;
	transition: transform 0.5s ease-out; /* zoom durch transform ersetzt */

	--min-size: 110;
	--max-size: 170;
	--size-diff: 60;

	width: clamp(
		calc(var(--min-size) * 1px),
		calc(var(--fluid-scale) * var(--size-diff) + calc(var(--min-size) * 1px)),
		calc(var(--max-size) * 1px)
	);
}

.main-company-logo-small img:hover {
	transform: scale(1.1);
}

/**
 *	Text Content
 */

.text-content {
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.6;
	padding: 2rem;
}

.text-content h2 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	font-size: 1.4rem;
	position: relative;
	padding-bottom: 0.5rem;
	color: #b8cdd5;
}

.text-content h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background-color: #2a5669;
}

.text-content p {
	margin-bottom: 1.5rem;
}

.text-content a {
	color: #ffffff;
}


@media (max-width: 768px) {
	.text-content {
		padding: 1rem;
		font-size: 1rem;
	}

	.text-content h2 {
		font-size: 1.2rem;
	}
}

.text-content h2 {
	opacity: 0;
	transform: translateY(30px);
	animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}



/**
 *	Company Teaser
 */

.company-teaser-list {
	display: flex;
	justify-content: space-between;
	min-width: 300px;

	--min-size: 0;
	--max-size: 500;
	--size-diff: 500;

	gap: calc(4vw + clamp(
		calc(var(--min-size) * 1px),
		calc(var(--fluid-scale) * var(--size-diff) + calc(var(--min-size) * 1px)),
		calc(var(--max-size) * 1px)
	));
}

.company-teaser {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	max-width: 400px;

	--min-size: 0;
	--max-size: 300;
	--size-diff: 300;
	--top: calc(-1 * clamp(
		calc(var(--min-size) * 1px),
		calc(var(--fluid-scale) * var(--size-diff) + calc(var(--min-size) * 1px)),
		calc(var(--max-size) * 1px)
	));

	top: var(--top);
	margin-bottom: var(--top);
}

.company-teaser:hover {
	animation: none;
}

.company-teaser-logo img {
	text-align: center;
	padding-bottom: 20px;
	transition: transform 0.5s ease-out;

	--min-size: 110;
	--max-size: 150;
	--size-diff: 40;

	width: clamp(
		calc(var(--min-size) * 1px),
		calc(var(--fluid-scale) * var(--size-diff) + calc(var(--min-size) * 1px)),
		calc(var(--max-size) * 1px)
	);
}

.herzmut-teaser .company-teaser-logo img {
	padding-top: 8%;
}

.company-teaser-info {
	text-align: left;
	line-height: 1.2;
	max-width: calc(30vw);
	hyphens: auto;
	word-wrap: break-word;
	opacity: 0;
	transition: opacity 0.5s ease-out;
}

.company-teaser:hover .company-teaser-info {
	opacity: 1;
}

.company-teaser-text {
	background-image: url(../img/KREATIONSWERK-Border.svg);
	background-size: 200px;
	background-repeat: no-repeat;
}

.herzmut-teaser .company-teaser-text {
	padding: 0 20px 20px 0;
	background-position: right bottom;

	@media (width < 700px) {
		position: relative;
		left: 0;
		margin-right: -50vw;
	}
}

.wildherz-teaser .company-teaser-text {
	padding: 20px;
	background-position: left top;

	@media (width < 700px) {
		position: relative;
		right: 0;
		margin-left: -50vw;
	}
}

.company-teaser-info h2,
.company-teaser-info p {
	background-color: var(--color-primary);
}

.company-teaser-info h2 {
	font-size: 20px;
	font-weight: 400;
	margin: 0;
	padding: 20px 20px 0;
}

.company-teaser-info p {
	font-size: 20px;
	font-weight: 400;
	margin: 0;
	padding: 0 20px 20px;
}



/*
 *	Footer
 */

footer {
	--min-size: 24;
	--max-size: 40;
	--size-diff: 16;

	font-size: clamp(
		calc(var(--min-size) * 1px),
		calc(var(--fluid-scale) * var(--size-diff) + calc(var(--min-size) * 1px)),
		calc(var(--max-size) * 1px)
	);

	color: black;
	background-color: white;
	padding: 0 5vw 68px;
}

.container-fluid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	min-width: 260px; /* 280 + 20 * 2 = 320px */
	padding: 7px 20px 0;
	gap: 2vw;

	@media (width > 1760px) {
		flex-wrap: nowrap;
	}
}

.entry-mark {
	position: relative;
	padding-left: 20px;
}

.entry-mark::before {
	content: ">";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-family: 'Static', Verdana sans-serif;
	font-weight: normal;
	font-size: 32px;
	line-height: inherit;
}

.footer-col-1,
.footer-col-2,
.footer-col-3 {
	flex: 1 1 100%;
	padding: 0 1vw;

	@media (width > 1023px) {
		flex: 1;
	}
}

.footer-col-2,
.footer-col-3 {
	padding-top: 68px;
}

.footer-col-1 h2 {
	--min-size: 32;
	--max-size: 80;
	--size-diff: 48;

	font-size: clamp(
		calc(var(--min-size) * 1px),
		calc(var(--fluid-scale) * var(--size-diff) + calc(var(--min-size) * 1px)),
		calc(var(--max-size) * 1px)
	);

	text-transform: none;
	font-family: 'Girly Sunrise Regular', Verdana sans-serif;
	font-weight: normal;
	letter-spacing: 6px;
	margin: 0 0 10px;
}

.footer-col-1 .entry-mark::before {
	margin-top: 3px;
}

.footer-col-1 p {
	text-transform: uppercase;
	text-indent: 32px;
}

.footer-col-2 {
	line-height: 1.2;
	text-transform: uppercase;
}

.footer-col-2 li:not(:last-child) {
	padding-bottom: 1.4em;
}

@media (width > 1760px) {

	.footer-col-3 .info {
		display: table;
		margin-left: auto;
	}
}

.footer-col-3 .info p {
	margin-bottom: 1em;
}

.footer-col-3 h3 {
	--min-size: 24;
	--max-size: 40;
	--size-diff: 16;

	font-size: clamp(
		calc(var(--min-size) * 1px),
		calc(var(--fluid-scale) * var(--size-diff) + calc(var(--min-size) * 1px)),
		calc(var(--max-size) * 1px)
	);

	font-weight: normal;
	margin: 0 0 20px;
}

.footer-col-3 p,
.footer-col-3 a {
	line-height: 1.2;
}

.footer-col-3 .entry-mark::before {
	margin-top: -3px;
}

/* ==========================================================================
	debug
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
	display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	/* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

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

/*
 * Hide visually and from screen readers, but maintain layout
 */

.sr-only-invisible {
	visibility: hidden;
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

/*@keyframes beat {*/
/*	0%, 50%, 100% {*/
/*		transform: scale(1, 1) translateY(clamp(-500px, calc((100vw - 500px) * -500 / 1420), 0px));*/
/*	}*/
/*	30%, 80% {*/
/*		transform: scale(0.94, 0.97) translateY(clamp(-500px, calc((100vw - 500px) * -500 / 1420), 0px));*/
/*	}*/
/*}*/