/*
 Theme Name:   GeneratePress Child
 Description:  GeneratePress Child Theme
 Author:       Pixelpolka
 Author URI:   https://www.pixelpolka.de
 Template:     generatepress
 Version:      1.0
 Text Domain:  generatepress-child
*/


@font-face {
	font-family: "Hanken Grotesk";
	src: url("fonts/hanken-grotesk/HankenGrotesk-variable-latin-de.woff2") format("woff2");
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
    font-stretch: normal;
	font-optical-sizing: auto;
	unicode-range: U+0000-00FF, U+0100-017F;
}


/* ==================================================== RESET ========================= */

/*
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  text-wrap: pretty;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select,
label {
  font-size: inherit !important;
  font-family: inherit !important;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
/*
ul[role=list],
ol[role=list] {
  list-style: none;
}
*/

html,
:root {
  scroll-behavior: auto !important;
}



/* =================================================== Custom props =============================================================== */

:root {

  /* Spitze: x kann % oder px sein (z.B. 50% oder 320px) */
  --wedge-x: calc((100vw - 1400px) / 2);
  --wedge-h: 60px;

  /* Farben */
  --wedge-color: #ffffff;        /* Keil-Füllfarbe (Variante 1) */
/*   --wedge-border-color: #b9b9b9; */
  --wedge-border-color: #cdc9c4; /* Border-Farbe */
  --wedge-border: 3px;           /* 0px = aus, z.B. 3px = an */

}

@media (max-width: 1500px){
  :root {
	  --wedge-x: 5vw;
	  --wedge-h: 40px;
	}
}


/* ====================================================  ANIMATIONS ==================================================== */

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

.hero-home {
  animation: 500ms fadeIn;
}

.site, .fade-in {
  animation: 1000ms fadeIn;
}


/* ====================================================  BASICS ==================================================== */

#page {
	padding-inline: 0 !important;
}

.entry-content {
	min-height: 80vh;
}

.entry-content:not(.home .entry-content) {
	padding-top: clamp(1rem, 2rem + 6vw, 10rem);
}

.hero-home {
	margin-bottom: clamp(2rem, 1rem + 4vw, 6rem);
}

.hero-home > div  {
	padding-top: clamp(1rem, 1rem + 8vw, 200px);
}

.site-footer {
	margin-top: 10vw;
}



/* ================================================= Menü =========================================================== */

body > header,
#sticky-navigation,
.entry-content > div {
	padding-inline: 5vw;
}

.mobile-header-navigation {
  padding: 10px;
}

#menu-hauptmenue > .menu-item > a {
	font-size: clamp(1rem, .8rem + .5vw, 1.3rem) !important;
}
#menu-hauptmenue .sub-menu > .menu-item > a {
	font-size: clamp(1rem, .7rem + .3vw, 1.1rem) !important;
}

#menu-hauptmenue .main-nav ul li a, .menu-toggle, .main-navigation .menu-bar-item > a {
	padding-left: clamp(.5rem, .6rem + .2vw, 1.3rem) !important;
	padding-right: clamp(.5rem, .6rem + .2vw, 1.3rem) !important;
}

menu-hauptmenue .dropdown-menu-toggle {
	padding-left: 8px;
	padding-right: 0 !important;
}

@media (max-width: 1140px) {
    .main-navigation .site-logo.navigation-logo img,
    .mobile-header-navigation
    .site-logo.mobile-header-logo img,
    .navigation-search input[type="search"] {
        height: 60px;
    }
}


/* =================================================== TYPO ============================================================ */


body {
	font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, .95rem + .15vw, 1.125rem) !important;
	line-height: 1.5em !important;
}

h1, h2, h3, h4, h5, p, ol, ul, li {
	font-family: 'Hanken Grotesk' !important;
}

.lead {
	font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem) !important;
	line-height: 1.5em !important;
	font-weight: 500;
}

.eyebrow {
	font-weight: 400;
	opacity: .6;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: .4rem;
}

h1, .h1 {
	font-size: clamp(2rem, 1.8rem + 1vw, 3.25rem) !important;
	font-weight: 600;
}

h2, .h2 {
	font-size: clamp(1.6rem, 1.4rem + .75vw, 2.625rem) !important;
	font-weight: 600;
	margin-bottom: .8em;
	line-height: 1.3;
}

h3, .h3 {
	font-size: clamp(1.2rem, 1rem + .5vw, 1.5rem) !important;
	font-weight: 600;
	margin-bottom: .8em;
}

/*
@media(max-width: 768px) {
	h1, h2, h3 {
		hyphens: auto;
	}
}
*/


.underline {
	padding-bottom: .2em;
	border-bottom: 2px solid currentcolor;
}


/* ---------------------  Buttons ----------------- */

a.button-green,
a.button-green:hover,
a.button-green *,
a.button-green:hover * {
	cursor: pointer
}

a.button-green:hover {
	color: var(--accent-2) !important;
}

.btn-blue,
.btn-blue-invers {
	color: #fff !important;
}

.btn-blue-invers:hover,
.btn-blue-invers:focus {
	color: var(--accent) !important;
	outline: none;
}
.btn-green:hover,
.btn-green:focus {
	color: var(--accent-2) !important;
}

.btn-green,
.btn-green-invers {
	color: #fff !important;
}

.btn-green-invers:hover,
.btn-green-invers:focus {
	color: var(--accent-2) !important;
}


/* --------------------- Listen ------------------- */

.wp-block-list li {
	margin-bottom: .75rem;
}


/* ==================================================== Wedges ==================================================== */

/* -----------wedge-top ------------------ */

.wedge-top.has-wedge-border::before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	height: calc(var(--wedge-h) + var(--wedge-border));
	top: -1px;
	transform: translateY(calc(-100% - var(--wedge-border)));
	background: var(--wedge-border-color);
	clip-path: polygon(0 0, 100% 0, var(--wedge-x) 100%);
	pointer-events:none;
	z-index: 1;
}

.wedge-top::after,
.site-footer::after,
.site-info::after {
	content:"";
	position:absolute;
	left:0;
	right:0;
	height: var(--wedge-h);
	top: calc(var(--wedge-h) - 1px);
	transform: translateY(-100%); /* hängt oberhalb an */
	background: var(--wedge-color);
	clip-path: polygon(0 0, 100% 0, var(--wedge-x) 100%);
	pointer-events:none;
	z-index: 2;
}

.wedge-top, .site-footer {
	--wedge-color: #fff;
	position: relative;
}

.inside-footer-widgets {
	padding-top: var(--wedge-h);
}

.site-footer::after {
	top: var(--wedge-h);
}

.site-info {
	--wedge-color: var(--base);
	position: relative;
}

.inside-site-info {
	padding-top: calc(var(--wedge-h)* 1.6);
    padding-bottom: 2.5rem;
}

.wedge-blau {
	--wedge-color: var(--accent);
}

/* ----------------- wedge-bottom -------------------------------- */

.site-header {
	--wedge-color: var(--base);
}

:is(.site-header, .wedge-bottom) {
	position: relative;
	/* wichtig: overflow NICHT hidden, sonst wird der Keil abgeschnitten */
}

:is(.site-header, .wedge-bottom)::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	height: var(--wedge-h);
	bottom: calc(-1 * var(--wedge-h));
	background: var(--wedge-color);
	clip-path: polygon(0 0, 100% 0, var(--wedge-x) 100%);
	pointer-events:none;
	z-index: 2;
}

/* Optional: Border nur an den schrägen Seiten */
.wedge-bottom.has-wedge-border::before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	height: calc(var(--wedge-h) + var(--wedge-border));
	/* so liegt die obere Border-Kante "unter" der Section und ist nicht sichtbar */
	bottom: calc(-1 * var(--wedge-h) - var(--wedge-border));
	background: var(--wedge-border-color);
	clip-path: polygon(0 0, 100% 0, var(--wedge-x) 100%);
	pointer-events:none;
	z-index: 1;
}

.wedge-bottom-svg{
	position: relative;
}

.wedge-bottom-svg::after{
	content:"";
	position:absolute;
	left:0; right:0;
	height: var(--wedge-h);
	bottom: calc(-1 * var(--wedge-h));
	background-image: var(--wedge-svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events:none;
	z-index: 2;
}


/* ------------------ wedge-cut-bottom ---------------- */

:is(.hero-home, .wedge-cut-bottom, .global-page-header) {
	/* dein Background-Image / Video / whatever bleibt sichtbar */
	clip-path: polygon(
		0 -1%,
		100% 0,
		100% calc(100% - var(--wedge-h)),
		var(--wedge-x) 100%,
		0 calc(100% - var(--wedge-h))
	);
}

/*
:is(.site-footer) {
  clip-path: polygon(
    0 0,
    100% 0,
    var(--wedge-x) calc(100% + var(--wedge-h)),
  );
}
*/


.Xsite-footer {
	background-color: var(--base);
	position: relative;

	/* Platz für den Keil oben (damit Content nicht drunter sitzt) */
	padding-top: var(--wedge-h);

	/* SVG wird per JS hier rein gesetzt */
	background-image: var(--footer-wedge-svg);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% var(--wedge-h);
}

/* "Fühler": nimmt --wedge-x als left, damit der Browser es ausrechnet */
.Xsite-footer::before{
	content:"";
	position:absolute;
	top: 0;
	left: var(--wedge-x);
	width: 0;
	height: 0;
	pointer-events:none;
	opacity: 0;
}


/* ==================================================== Footer ==================================================== */


.inside-footer-widgets {
	column-gap: min(4vw, 8rem);
	max-width: 1400px;
 	margin-inline: auto !important;
 	flex-direction: column !important;
 	justify-content: space-between;
}

.footer-widget-1,
.footer-widget-2,
.footer-widget-3 {
	max-width: fit-content;
	min-width: max-content;
}

.footer-logo {
	width: clamp(120px, 120px + 3vw, 210px);
}

.site-footer .footer-widgets-container .inner-padding {
	padding-left: 0 !important;
}

.footer-widgets-container {
	padding-inline: 0 !important;
}

.instagram-link::before {
	content: " | ";
}

#menu-footer-menue {
    border-top: 2px solid;
    padding-block: 2rem;
    margin-top: 2rem;
    font-weight: 700;
}

@media(min-width: 768px) {
	.inside-footer-widgets {
	 	flex-direction: row !important;
	 	flex-wrap: wrap;
	}
	#menu-footer-menue {
		display: flex;
		justify-content: space-between;
		text-align: center;
	}
}

@media(min-width: 1000px) {
	#nav_menu-3 {
		margin-left: auto;
		width: fit-content;
	}
	#menu-footer-menue {
		text-align: right;
		display: block;
	    padding: 0;
	    border: unset;
	    margin: 0;
	    font-weight: 400;

	}
}


/* ==================================================== CF7 - Formulare ==================================================== */

.wpcf7-form	:is(input, textarea, select) {
	padding: .625rem .9375rem;
	border: 1px solid var(--base);
	width: 100%;
	border-radius: 10px;
}
.wpcf7-form	label {
	font-size: .95rem;
	width: 100%;
}
.wpcf7-form	p {
	margin-bottom: .8rem;
}
.wpcf7-form	> p:last-of-type {
	text-align: center;
}
.wpcf7-form	input[type="submit"] {
	width: fit-content;
	margin-left: auto;
	margin-top: 1rem;
	border-radius: 9999px;
    padding: 12px 22px;
    border: 2px solid var(--accent-2);
}
.wpcf7-form	input[type="submit"]:hover {
	background-color: #fff;
	color: var(--accent-2);
}

.input-row > p {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.wpcf7-acceptance {
	display: inline-block;
	margin-top: 1rem;
}

[data-name="zustimmung-datenschutz"] .wpcf7-list-item {
	margin-left: 0;
}

[data-name="zustimmung-datenschutz"] label {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

[data-name="zustimmung-datenschutz"] input[type="checkbox"] {
	width: 40px;
	margin-top: 5px;
}


/* ==================================================== Counter ==================================================== */

.wp-block-boldblocks-counting-number {
	font-size: clamp(1.3rem, 1.4rem + 1.5vw, 3.625rem) !important;
	font-weight: 600;
	color: var(--accent-3);
	margin-bottom: .4em;
}


/* ==================================================== Akkordeon ====================================================  */

.wp-block-accordion-heading__toggle {
	align-items: baseline;
}

.wp-block-accordion-heading__toggle-title {
	font-size: 1.2rem;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.wp-block-accordion-heading__toggle-icon {
	font-size: 1.5rem;
	margin-right: .6rem;
}

h3.wp-block-accordion-heading {
	border-bottom: 2px solid var(--accent-3);
	padding-bottom: .4rem;
	margin-bottom: .6rem;
}

.wp-block-accordion-panel {
	padding-left: 2.5rem;
}


/* ==================================================== Tabslist ====================================================  */

.js-plethoraplugins-tabs--link {
	padding-left: 0 !important;
	font-size: clamp(1rem, .8rem + .8vw, 1.4rem);
	line-height: 1.3em !important;
	border-left: 0 !important;
	font-weight: 700 !important;
	border-bottom: 2px solid var(--base) !important;
	margin-bottom: clamp(1rem, .8rem + .8vw, 1.4rem);
	&.active, &:hover {
		border-bottom: 2px solid var(--accent-2) !important;
		color: var(--accent-2) !important;
	}
}

.plethoraplugins-tabs-container * {
	hyphens: auto !important;
	-webkit-hyphens: auto !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
    hyphenate-limit-chars: 6 3 3;
	hyphenate-limit-lines: 2;
	hyphenate-limit-last: never;
	hyphenate-limit-zone: 8%;
}


.plethoraplugins-tabs--content {
	background-color: var(--base-2);
	padding: clamp(1rem, 1rem + 1vw, 2.5rem) !important;
	flex-basis: 66.66% !important;
}

.plethoraplugins-sidenavjump {
	flex-basis: 33.33% !important;
}

.plethoraplugins-tabs-container {
	padding: 0 !important;
}

.page-id-33 .plethoraplugins-tabs-container {
/* 	min-height: 570px; */
}

#footer-widgets,
.site-info {
	padding-inline: 5vw;
}


/* ==================================================== Pfeildiagramm ====================================================  */

.pfeil-nach-rechts,
.pfeil-nach-links,
.doppel-pfeil {
	position: relative;
	> div {
		position: relative;
		z-index: 2;
	}
}

:is(.pfeil-nach-rechts, .pfeil-nach-links)::after {
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	width: 250px;
	height: 120px;
	z-index: 1;
}

.pfeil-nach-rechts::after {
	background-image: url('https://wifi-personal.de/wp-content/uploads/2026/03/wifi-pfeil-hellgruen-rechts.png');
	right: -2rem;
	transform: translate(calc(50% - 2rem), 0);
}

.pfeil-nach-links::after {
	background-image: url('https://wifi-personal.de/wp-content/uploads/2026/03/wifi-pfeil-hellgruen-links.png');
	left: .5rem;
	transform: translate(calc(-50% + 2rem), 0);
}

.doppel-pfeil::before,
.doppel-pfeil::after {
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 35%;
	width: 250px;
	height: 120px;
	z-index: 1;
}

.doppel-pfeil::before {
	background-image: url('https://wifi-personal.de/wp-content/uploads/2026/03/wifi-pfeil-hellgruen-links.png');
	left: .5rem;
	height: 120px;
	transform: translate(calc(-50% + 2rem), 0);
}

.doppel-pfeil::after {
	background-image: url('https://wifi-personal.de/wp-content/uploads/2026/03/wifi-pfeil-hellgruen-rechts.png');
	right: -2rem;
	transform: translate(calc(50% - 2rem), 0);
}


@media (max-width: 1024px) {
	.doppel-pfeil::before,
	.doppel-pfeil::after {
		rotate: 90deg;
	}
	.doppel-pfeil::before {
		rotate: 90deg;
		top: 5rem;
		left: 31%;
	}
	.doppel-pfeil::after {
		rotate: 90deg;
		top: unset;
		bottom: 2.5rem;
		left: 31%;
	}
	.doppel-pfeil .lead {
		font-size: inherit !important;
	}
}



/* ==================================================== timeline ====================================================  */


.story-time p {
	color: var(--accent-3) !important;
	font-size: calc(1.4rem + 1.4vw) !important;
	font-weight: 600;
}


.cool-vertical-timeline-body .story-details h3:not(.timeline-block_title,.ctlb-block-title) {
	font-size: revert;
	font-weight: revert;
/* 	margin: revert; */
}

.cool-vertical-timeline-body .timeline-content .story-details p:not(.timeline-block_desc,.ctlb-block-desc) {
	font-size: revert;
}

.cool-vertical-timeline-body.one-sided.left .timeline-content .timeline-block-detail {
	width: 100%;
}


/* ==================================================== Referenzen-slider ==================================================== */

#evssSlider-1 .evssSlider {
	height: unset !important;
}

#evssSlider-1 .swiper .swiper-wrapper {
	margin-bottom: 2rem;
}


/* ==================================================== UTILS ==================================================== */

.hidden {
	display: none !important;
}

.silbentrennung {
	hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
	hyphenate-limit-lines: 2;
	hyphenate-limit-last: never;
	hyphenate-limit-zone: 8%;
}


/* ================================================= Stellenangebote / Akoni Job Board =========================== */

#akoni_job_list * {
	font-family: 'Hanken Grotesk' !important;
	color: inherit !important;
	font-size: inherit !important;
}

.akoni-jobboard-scope #akoni_job_list #akoni_job_list_main .filter-form.p-4.rounded,
#akn-search-job-data  {
	box-shadow: unset !important;
	padding: 0 !important;
	background-color: #fff !important;
}

#akn-search-job-data {
	background-color: #fff !important;
}

.akoni-jobboard-scope #akoni_job_list #akoni_job_list_main :is(button#job_search_btn, button#job_reset_btn, button.btn.btn-primary.apply_now, button.btn.btn-primary.back_btn) {
	background: var(--accent-2) !important;
	border-radius: 9999px !important;
	padding: 12px 22px !important;
	color: var(--base) !important;
	border: 0px !important;
/* 	text-transform: lowercase !important; */
}

.akoni-jobboard-scope main#akoni_job_list_main,
.akoni-jobboard-scope #akoni_job_list #akoni_job_list_main .container {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.akoni-jobboard-scope #akoni_job_list .error_empty {
	font-size: inherit !important;
	text-align: left !important;
	color: inherit !important
}

.akoni-jobboard-scope #akoni_job_list #akoni_job_list_main #akn-search-job-data :is(input#job-title, input#postcode, input#business-area, input#employment-type) {
	background: var(--base-2) !important;
	border: 1px solid var(--base) !important;
	padding: .625rem .9375rem !important;
}
.akoni-jobboard-scope #akoni_job_list #akoni_job_list_main #akn-search-job-data :is(input#job-title, input#postcode, input#business-area, input#employment-type):focus {
    color: var(--contrast) !important;
    background-color: var(--base-3) !important;
    border-color: var(--contrast) !important;
}

.akoni-jobboard-scope .mb-3 {
	margin-bottom: 0 !important;
}


/* ------------------------------- Detail-Seite ---------------------------------- */

.contentakoni_job_list {
	width: 100% !important;
}

:is(body.akoni_job_borad_wrap, .akoni-jobboard-scope) main#akoni_job_list_main,
 {
	margin: 0 !important;
}

:is(body.akoni_job_borad_wrap, .akoni-jobboard-scope) #akoni_job_list #akoni_job_list_main .akoni_job_list-main{
	max-width: var(--gb-container-width) !important;
	margin-inline: auto !important;
}

:is(body.akoni_job_borad_wrap, .akoni-jobboard-scope) #akoni_job_list #akoni_job_list_main .job-item{
	border-top: 0px !important;
	border-radius: 10px !important;
}