@import "instagram.css";

/**
FONTS
 */
/* Local font imports here */

/* titillium-web-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Titillium Web";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/titillium-web-v17-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* titillium-web-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Titillium Web";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/titillium-web-v17-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/**
VARIABLES
 */
:root {
	--k2-child-red: var(--wp--preset--color--custom-sjr-rot, #b54f46);
	--k2-child-grey: var(--wp--preset--color--custom-sjr-grau, #585858);
	--primary-color: var(--wp--preset--color--primary, #0e4ead);
	--primary-color-hover: var(--wp--preset--color--primary-hover, #0e4ead);
	--primary-color-contrast: var(--wp--preset--color--primary-contrast, #fff);
	--primary-color-disabled: var(--wp--preset--color--primary-light, #456799);
	--container-max-width: var(--wp--style--global--content-size, 1200px);
	--container-padding-left: var(--wp--preset--spacing--50, 1.5rem);
	--container-padding-right: var(--wp--preset--spacing--50, 1.5rem);
	--layout-gap: var(--wp--style--block-gap, 2rem);
	--roundness: var(--roundness, 0);
	--k2-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	--k2-font: "Titillium Web";
	--k2-layout-system-text-max-width: none;
}

@media (max-width: 650px) {
	:root {
		--k2-spacing-multiplier: 0.5;
	}
}

body {
	font-family: var(--k2-font);
}

.wp-site-blocks {
	position: relative;
	overflow: hidden;
}

/**
Global styles for K2 Child Theme
 */
html .wp-block-button .wp-block-button__link,
html .wp-block-button .wp-element-button,
html .editor-styles-wrapper .wp-element-button,
html .editor-styles-wrapper .wp-block-button__link,
html .btn {
	color: var(--primary-color-contrast);
	background-color: var(--k2-child-red);
	border-radius: 100px;
	padding: 0.5em 1.2em;
	text-decoration: none;
	font-weight: bold;
	border: none;
	margin: 0.5rem 0;
	cursor: pointer;
}

:is(
    html .wp-block-button .wp-block-button__link,
    html .wp-block-button .wp-element-button,
    html .editor-styles-wrapper .wp-element-button,
    html .editor-styles-wrapper .wp-block-button__link,
    html .btn
  ):hover {
	color: var(--primary-color-contrast);
	background-color: var(--k2-child-red);
}

html .wp-block-button.big .wp-block-button__link,
html .wp-block-button.big .wp-element-button,
html .editor-styles-wrapper.big .wp-element-button,
html .editor-styles-wrapper.big .wp-block-button__link,
html .btn.big {
	color: var(--primary-color-contrast);
	background-color: var(--k2-child-red);
	border-radius: 100px;
	padding: 0.5em 1.2em;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.5rem;
}

@media only screen and (max-width: 768px) {
	html .wp-block-button.big .wp-block-button__link,
	html .wp-block-button.big .wp-element-button,
	html .editor-styles-wrapper.big .wp-element-button,
	html .editor-styles-wrapper.big .wp-block-button__link,
	html .btn.big {
		font-size: 1.2rem;
	}
}

:is(
    html .wp-block-button .wp-block-button__link.big,
    html .wp-block-button .wp-element-button.big,
    html .editor-styles-wrapper .wp-element-button.big,
    html .editor-styles-wrapper .wp-block-button__link.big,
    html .btn.big
  ):hover {
	color: var(--primary-color-contrast);
	background-color: var(--k2-child-red);
}


html .wp-block-button.is-style-outline .wp-block-button__link,
html .wp-block-button.is-style-outline .wp-element-button,
html .editor-styles-wrapper .is-style-outline .wp-element-button,
html .editor-styles-wrapper .is-style-outline .wp-block-button__link,
html .btn.is-style-outline {
	color: var(--k2-child-red);
	background-color: var(--primary-color-contrast);
	border: 1px solid var(--k2-child-red);
}

:is(
html .wp-block-button.is-style-outline .wp-block-button__link,
html .wp-block-button.is-style-outline .wp-element-button,
html .editor-styles-wrapper .is-style-outline .wp-element-button,
html .editor-styles-wrapper .is-style-outline .wp-block-button__link,
html .btn.is-style-outline
  ):is(:hover, :focus-visible) {
	color: var(--primary-color-contrast);
	background-color: var(--k2-child-red);
}

/**
TYPOGRAPHY
 */

body,
input,
select,
textarea {
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
	font-size: 16px;
	font-family: "Titillium Web", sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
	clear: both;
	color: var(--primary-color);
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.2;
}

h5,
h6 {
	margin: 0 0 10px;
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 23px;
}

h3 {
	font-size: 20px;
	position: relative;

	&.is-style-fancy {
		padding-left: 1rem;
		margin-bottom: 1.5rem;

		&:after {
			content: "";
			position: absolute;
			left: -12px;
			top: 6px;
			border-top: 3px solid #eb594c;
			border-left: 3px solid #eb594c;
			border-right: 3px solid #eb594c;
			width: 50px;
			height: 24px;
			border-radius: 50px 50px 0 0;
			transform: rotate(-90deg);
		}
	}
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 15px;
}

p {
	margin: 0 0 10px;
}

h1 + h2 {
	font-weight: 400;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

h3.fancy,
h4.fancy {
	display: block;
	position: relative;
	margin-bottom: 40px;
	letter-spacing: 1px;
}

h2.hell,
h3.hell,
h4.hell {
	color: #fff;
}

h3.fancy {
	font-size: 23px;
	line-height: 34px;
}

h4.fancy {
	font-size: 22px;
}

a,
a:where(:not(.wp-element-button)) {
	text-decoration: none !important;
	color: var(--k2-child-red);
}

/**
BUTTONS
 */

/**
BLOCK STYLES
 */
.container {
	position: relative;
}

/** Toggles */
.wp-block-k2-toggle {
	border-radius: 7px;
	box-shadow: var(--k2-shadow);
	overflow: hidden;
	border: none !important;
}

.toggle__summary {
	background-color: #fff;
	border-radius: 7px;
}

.toggle__summary span {
	color: var(--primary-color);
	padding: 5px;
	font-size: 1.1rem;
	border: none !important;
}

.toggle__summary:where(.toggle[open] .toggle__summary) {
	background: var(--k2-child-red) !important;
	color: #fff !important;
	border-radius: 7px 7px 0 0;
}

.toggle__summary:where(.toggle[open] .toggle__summary) span {
	color: #fff;
}

.toggle[open] .toggle__indicator::after {
	color: #fff !important;
	transform: rotate(90deg) translateX(-50%);
	top: 5px;
}

.toggle__indicator {
	position: relative;
}

.toggle__indicator::before {
	display: none;
}

.toggle__indicator::after {
	content: "\f054";
	font-family: "Font Awesome 5 Pro";
	color: var(--k2-child-red);
	border: none;
	left: 50%;
	transform: rotate(0deg) translateY(-50%);
	background-color: transparent;
	height: auto;
	width: auto;
}

.wp-block-image img {
	position: relative;
	border-radius: 7px;
	/*box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);*/
}

/* is-style-rounded */
:is(img.is-style-rounded, .wp-block-image.is-style-rounded img) {
	border-radius: 20px;
}


@media only screen and (max-width: 768px) {
	.wp-block-columns {
		grid-template: 1fr !important;
	}
}

.youtube-video__preview {
	margin: 25px 0;
}

ul,
ol {
	margin-top: 0;
	margin-bottom: 20px;
	padding-left: 20px;
}

.entry-content ul {
	list-style: square;
}

/*.entry-content,
.pageinner,
.mailpoet_page-template-default,*/
.wp-site-blocks {
	margin-top: 13rem;
}

.home .wp-site-blocks {
	margin-top: 10rem;
}

@media only screen and (max-width: 768px) {
	.wp-site-blocks {
		margin-top: 11rem;
	}

	.home .wp-site-blocks {
		margin-top: 7rem;
	}
}

/*Einfache Sprache Anpassungen */
.lang-ef .hero::after {
	display: none;
}

.lang-ef h3.is-style-fancy::after {
	display: none;
}

.lang-ef .background-sektion::after {
	display: none;
}

.lang-ef .footer::after {
	display: none;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	width: 100%;
	color: #222;
	border: 2px solid #ddd;
	padding: 3px 10px;
	margin: 7px 0;
	border-radius: 7px;
	outline: 0;
	box-sizing: border-box;
	display: block;
	box-shadow: none;
}

.entry-content button,
.entry-content input[type="submit"] {
	cursor: pointer;
	position: relative;
	box-shadow: 0px 0px 10px 0px rgba(244, 93, 76, 0.6);
	display: inline-block;
	color: #fff;
	background-color: #b54f46;
	border: 2px solid #b54f46;
	padding: 5px 13px;
	border-radius: 20px;
	margin-top: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	transform: translateY(0);
	transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.signupform {
	display: block;
	max-width: 650px !important;
	margin: 0 auto;
}

.wpcf7-list-item {
	margin: 0 !important;
}

button[disabled],
html input[disabled] {
	opacity: 0.5;
}

.is-style-logo_image {
	display: flex;
	margin: 0 25px 25px 0;
	height: 250px;
	width: 250px;
	align-items: center;
	justify-content: center;
	background: #fff;
	box-shadow: var(--k2-shadow);
}

.is-style-logo_image img {
	max-width: 200px !important;
	height: auto !important;
	box-shadow: none !important;
	padding: 10px;
}

/*Form styling HR Tool*/
.hr-step-header {
	display: flex;
	justify-content: flex-start;
	gap: 1rem;
	position: relative;
	margin-bottom: 1rem;
	left: 70px;
}

.hr-step-header::before {
	content: "Schritte:";
	position: absolute;
	top: 0;
	left: -70px;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.hr-step-header .hr-step-item[data-hr-current-step-num] {
	font-weight: 700;
	position: relative;
}

.hr-step-header .hr-step-item[data-hr-current-step-num]::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -9px;
	width: 1px;
	height: 20px;
	background-color: #000;
	transform: translateY(-50%);
}

.hr-form label {
	display: block;
	font-weight: 700;
}

.hr-form .step .hr-fields {
	position: relative;
	display: block;
	margin: 2rem 0;
}

.hr-form input[type="radio"],
.hr-form input[type="checkbox"] {
	position: relative;
	margin: 0 0.5rem 1rem 0;
}

.hr-form button:nth-child(1) {
	margin-right: 1rem;
}

.hr-form input[type="file"] {
	margin: 0 0 1rem;
}

.k2child__small-container {
	max-width: 800px;
	margin: 0 auto;
}

.k2child__grid-layout {
	box-shadow: var(--k2-shadow);
	border-radius: 7px;
	overflow: hidden;
}

.k2child__grid-layout img {
	border-radius: 0;
}

.k2child__grid-layout__content {
	padding: 10px;
}

.k2child__grid-layout .wp-block-button__link.wp-element-button {
	border: 1px solid transparent;
	transition: all 0.3s ease-in-out;
}

.k2child__grid-layout
.wp-block-button__link.wp-element-button:is(:hover, :focus-visible) {
	color: var(--k2-child-red);
	background-color: var(--primary-color-contrast);
	border: 1px solid var(--k2-child-red);
}