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


/* =================================== Fonts ======================================= */

@font-face {
  font-display: fallback;
  font-family: 'Sofia Sans Semi Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/sofia-sans-semi-condensed-v8-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/inter-v20-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
}


/* ================================= Custom Props ======================== */

:root {
	--padding-block: clamp(1.5rem, 1rem + 3vw, 6rem);
	--margin-block: clamp(2rem, 1.5rem + 4vw, 8rem);
	--padding-inline: 5vw;
	--column-gap: clamp(1rem, 2rem + 4vw, 8rem);

	--clr-primary: #FB5E0A;
	--clr-primary-light: hsl(from var(--clr-primary) h s calc(l + 10));
	--clr-primary-dark: hsl(from var(--clr-primary) h s calc(l - 10));
	--clr-secondary: #4f5464;
	--clr-secondary-light: #c8cede;
	--clr-secondary-dark: #20232c;
	--clr-text-invers: #fff;
	/* Grün: accent-2: #2a814a, accent-3: #56b679 */

	--ff-base: 'Inter', Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
	/* Fira sans, Titillium Web, Barlow, Cossette Texte, Figtree, Geist, Glegoo, IBM Plex Sans, */
	/* Miranda Sans, Mona Sans, Poppins, Quicksand, Raleway, Source Sans Pro, Special Gothic, Open sans*/
	--ff-heading: 'Sofia Sans Semi condensed', Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif; /* 	Allura, ShadowsIntoLightTwo-Regular, bahagia  */
	--fs-base: 1.025rem;
/* 	--fs-base: 1.225rem; */
	--fw-base: 400;
	--lh-base: 1.5;
/* 	--lh-base: 1.4; */
}


/* ================================= Basics ============================= */

/* --------------------------------- Typografie ------------------------------ */

body {
	font-family: var(--ff-base);
	font-weight: var(--fw-base);
	font-size: clamp(var(--fs-base), var(--fs-base) + .2vw, var(--fs-base) * 1.3);
 	line-height: var(--lh-base);
}

h1, h2, h3, h4, h5, h6  {
	font-family: var(--ff-heading);
}

h1 {
	font-size: clamp(2.5rem, 2.5rem + 2vw, 5rem);
	--fs-base: 2.1rem;
	font-size: clamp(var(--fs-base), var(--fs-base) + 2vw, var(--fs-base) * 4.2);
	line-height: 1.1;
}

h2, h2.widget-title {
	--fs-base: 1.4rem;
	font-size: clamp(var(--fs-base), var(--fs-base) + 1.4vw, var(--fs-base) * 2.2);
	line-height: 1.2;
	hyphens: auto;
}

h3 {
	--fs-base: 1.3rem;
	font-size: clamp(var(--fs-base), var(--fs-base) + 1vw, var(--fs-base) * 1.8);
	line-height: 1.3;
	hyphens: auto;
}

h4, h3.wp-block-accordion-heading {
	--fs-base: 1.2rem;
	font-size: clamp(var(--fs-base), var(--fs-base) + .8vw, var(--fs-base) * 1.6);
	line-height: 1.3;
	hyphens: auto;
	margin-bottom: .5rem;
}

p {
	margin-bottom: 2rem !important;
}

p:only-child, .main-title {
	margin-bottom: 0 !important;
}

/* --------------------------------- Breiten und Abstände ------------------------- */

#sticky-navigation, .site-header, .entry-header, .entry-content, .hero, .full-width, .site-footer {
	padding-inline: var(--padding-inline);
}

#main {
	margin-block: var(--margin-block);
}

#main [id], :target {
	scroll-margin-top: 360px;
}

.entry-header > *,
.entry-content > *:not(.full-width),
.hero-inside,
.full-width > * {
	max-width: var(--gb-container-width);
	margin-inline: auto;
}

.entry-content > div:not(.hero) {
	margin-block: var(--margin-block);
}


/* ---------------------------------- Navigation --------------------------- */

@media (max-width: 768px) {
    .site-logo {
	    width: 150px;
	}
}

.main-navigation a {
	font-size: clamp(1.2rem, 1.1rem + .5vw, 1.7rem);
	font-weight: 700;
	font-family: var(--ff-heading);
 	letter-spacing: .02em;
}

.main-navigation .sub-menu a {
	font-size: clamp(1rem, .9rem + .3vw, 1.2rem) !important;
	line-height: 1.4 !important;
	font-weight: 600;
 	letter-spacing: .02em;
}


.main-navigation .main-nav :is(li.current_page_item, li.current-menu-item) > a,
.main-navigation .main-nav .menu-item a:hover  {
	color: var(--clr-primary);
}


/* ------------------------------------ Hero -------------------------------------- */

.hero {
	background-image: url('https://perspektiv-schluessel.de/wp-content/uploads/2026/09/ps-hero-unitreppe.png');
	background-size: cover;
	margin-top: calc(var(--margin-block) * -1);
	background-position: right center;
}

.hero-text {
	background-color: rgba(255, 255, 255, 0.84);
	padding: min(5vw, 3rem);
	width: calc(100% - 2.5vw);
	max-width: 800px;
	margin-inline: 0 auto;
}

@media (min-width: 600px) {
	.hero-text {
		width: 66.66vw;
	}
}
/*
.hero-inside > *:not(.cta-primary, .cta-invers) {
	width: clamp(300px, 400px + 15vw, 800px);
}
*/


/*  ---------------------------------- Links ------------------------------  */

.entry-content a {
	font-weight: 500;
}

a {
	text-underline-offset: .15em;
	color: var(--clr-primary);
}
a:hover {
	color: var(--clr-primary-light);
}

h2 > a {
	text-decoration: none;
	color: inherit;
}
h2 > a:hover {
	color: inherit;
}

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

.wp-block-list {
	 margin-left: 1.3rem;
}
.wp-block-list li {
    max-width: 90ch;
    margin-top: .8rem;
}

.wp-block-list .wp-block-list li {
	list-style-type: "– ";
	padding-left: 1rem;
}

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


a[class^="cta-"],
a[class*=" cta-"] {
	display: inline-flex;
	align-items: center;
	column-gap: .5em;
	padding: 1rem 2rem;
	color: var(--clr-text-invers);
	text-decoration: none;
	border-radius: 9999px;
	border-width: 2px;
	border-style: solid;
	font-weight: 600;
	letter-spacing: .02em;
}

.cta-primary {
	background-color: var(--clr-primary);
	border-color: var(--clr-primary);
}
.cta-primary:hover {
	background-color: var(--clr-text-invers);
	color: var(--clr-primary);
}

.cta-invers {
	border-color: var(--clr-text-invers);
}
.cta-invers:hover {
	background-color: var(--clr-text-invers);
	color: var(--clr-secondary-dark);
}


/* ==================================== Content-Layout ==================================== */


/* ----------------------------------- Full-width ---------------------------------- */

.full-width {
	padding-block: var(--padding-block);
	width: 100vw;
	margin-left: calc(var(--padding-inline) * -1);
	clear: both;
}

/* --------------------------------- Fußnoten ---------------------------- */

.footnotes {
	border-top: 1px solid var(--clr-secondary);
	padding-top: 1rem;
	padding-left: 1rem;
	--fs-base: .85rem;
	font-size: clamp(var(--fs-base), var(--fs-base) + .2vw, var(--fs-base) * 1.3);
	line-height: 1.3;
}
.footnotes li {
	max-width: unset !important;
}
.footnotes li::marker {
  content: counter(list-item) " \00a0";
}

/* -------------------------------- inverse Textboxen ---------------------- */

.bg-primary {
	background-color: var(--clr-primary);
	background: linear-gradient(45deg, var(--clr-primary-dark) 0%, var(--clr-primary) 50%, var(--clr-primary-light) 100%);
	color: var(--clr-text-invers);
}
.bg-primary a {
	color: var(--clr-text-invers);
}


/* ------------------------------- runde Bilder ----------------------------- */

.img-round {
	border-radius: 50%;
	aspect-ratio: 1;
}

/* ------------------------------- Text-Bild-spalten ------------------------ */

@media (min-width: 1280px) {
	.text-image-row {
		display: flex;
		align-items: flex-start;
		column-gap: var(--column-gap)
	}
}

.row-reverse {
	flex-direction: row-reverse;
}

.text-image-row img {
	width: 40vw;
	max-width: 400px;
	margin-bottom: 2rem;
}

@media (min-width: 300px) and (max-width: 1280px) {
	.text-image-row:not(.row-reverser) img {
		float: left;
		margin-right: 6vw;
		shape-outside: circle(50%);
	}
	.text-image-row.row-reverse img {
		float: right;
		margin-left: 8vw;
		shape-outside: circle(50%);
	}
	.text-image-row * {
		hyphens: auto;
	}
}


/* --------------------------- zweispaltiger Text ---------------------------- */

.text-zweispaltig > :is(div, p) {
	container: textspalte / inline-size;
	flex-basis: 50%;
}

@container textspalte (max-width: 600px) {
	 * {
		hyphens: auto;
		hyphenate-limit-chars: 12;
	}
}

@media (min-width: 980px) {
	.text-zweispaltig {
		display: flex;
		column-gap: var(--column-gap);
		line-height: calc(var(--lh-base) * .95);
	}
}

/* --------------------------- dreispaltiger Text ---------------------------- */


.text-dreispaltig > :is(div, p) {
	container: textspalte / inline-size;
	flex-basis: 33.33%;
}

@media (min-width: 1200px) {
	.text-dreispaltig {
		display: flex;
		column-gap: calc(var(--column-gap) * 2/3);
		line-height: calc(var(--lh-base) * .95);
	}
}



/* ------------------------------ Akkordeon ––––––––––––––––––––––––----------- */

.wp-block-accordion-item {
	margin-bottom: 1rem;
}
.wp-block-accordion-heading {
	color: var(--clr-primary);
	margin-bottom: .5rem;
}

.wp-block-accordion-panel,
.wp-block-accordion-panel[hidden] {
	padding-left: 1.8rem !important;
	border-bottom: 1px solid var(--clr-secondary-light) !important;
}

.wp-block-accordion-heading__toggle {
	align-items: flex-start;
	padding-block: 0;
}

.wp-block-accordion-heading__toggle-icon {
	width: unset;
	margin-right: .2em;
}


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

.footer-widgets a:hover span {
	color: var(--clr-secondary-dark) !important;
}

.site-footer {
	margin-top: var(--margin-block);
	padding-block: var(--padding-block);
	background-color: var(--clr-secondary-dark);
	position: relative;
	background: linear-gradient(8deg, var(--clr-secondary-dark) 0%, var(--clr-secondary) 100%);
}

.site-footer::before {
	content: '';
	background-image: url('https://perspektiv-schluessel.de/wp-content/uploads/2026/10/Coaching-fuer-Frauen-an-Hochschulen-Coaching-Situation.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
/*  background-attachment: fixed; */
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: inherit;
    pointer-events: none;
    opacity: 0.09;
    filter: grayscale(1);
}

.inside-footer-widgets {
	padding-bottom: var(--padding-block);
	border-bottom: 1px solid #fff;
	column-gap: 3rem;
}

.site-footer .footer-widgets-container .inside-footer-widgets {
	margin-left: unset;
}

.site-footer .footer-widgets-container .inner-padding {
	padding: unset;
}

div.footer-widget-1 {
	flex: 1 0 33%
}

.footer-widget-2 {
	text-align: right;
}


/* =================================================================================================P */


.no-margin-top {
	margin-top: 0 !important;
}
.no-margin-bottom {
	margin-bottom: 0 !important;
}


.footer-widget-2 #nav_menu-2 .sub-menu li {
/* 	margin-bottom: 0; */
	line-height: 1;
}

.footer-widget-2 #nav_menu-2 .sub-menu a {
	font-size: .9rem;
	text-decoration: none;
}


.footer-adresse {
	font-size: 1rem;
	margin-top: 4rem;
}

.block-editor-iframe__body {

	.text-image-row img {
		height: auto;
		width: 40vw;
		max-width: 400px;
	}

}