@charset "UTF-8";

/*
Theme Name: Theme (2024)
Theme URI: https://www.brandgrad.com
Author: brandgrad° GmbH
Author URI: https://www.brandgrad.com
Description: Das offizielle Theme 
Tested up to: 8.x
Requires PHP: 8.x
Version: 0.0.1
Text Domain: theme2024
Tags:

*/

:root{
	--color-black        : rgb(   5,  44,  33 );
	--color-white        : rgb( 255, 255, 255 );
	--color-gray-light   : rgb( 242, 242, 242 );
	--color-gray-dark    : rgb( 201, 201, 201 );

	--color-green-dark   : rgb(   5,  44,  33 );
	--color-green        : rgb(  19, 170, 150 );
	--color-green-bright : rgb(  37, 246, 217 );
	--color-red          : rgb( 249,  89,  89 );
	--color-purple       : rgb( 123,  49, 231 );

	--font-sans          : 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--font-size-body     : 24px;
	--line-height-body   : 2rem;

	--font-size-title    : 140px; /* Large Screen für später */
	--line-height-title  : 130px; /* Large Screen für später */
	--font-size-title    : 80px;
	--line-height-title  : 70px;

	--font-size-h1       : 3.33rem;
	--line-height-h1     : 4.00rem;
	--font-size-h2       : 2.7rem;
	--line-height-h2     : 3.0rem;

	--margin-default     : 16px 0px 16px 0px;
	--padding-default    : 16px 32px 16px 32px;
	--border-radius-d    : 32px 32px 32px 32px;
}

html {
	scroll-behavior : smooth;
}


/* =================================== *\

	T Y P O   &   F O N T S

\* =================================== */

body{
	font-family      : var( --font-sans );
	font-size        : 16px; 
	line-height      : 24px;
	font-weight      : 400;
	color            : var( --color-black );
	background-color : var( --color-gray-light );
}


h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
	margin         : 0px 0px 24px 0px;
	padding        : 0px 0px 0px 0px;
	font-family    : var( --font-sans );
	color          : var( --color-black );
	text-transform : normal;
}

h1,
.h1{
	font-size   : var( --font-size-h1  );
	line-height : var( --line-height-h1 );
	font-weight : 600;
}
	h1.h1-as-title,
	.h1.h1-as-title{
		font-size   : var( --font-size-title  );
		line-height : var( --line-height-title );
	}


h2,
.h2{
	font-size   : var( --font-size-h2  );
	line-height : var( --line-height-h2 );
	font-weight : 600;
}

p,
.p{
	margin         : 0px 0px 24px 0px;
	padding        : 0px 0px 0px 0px;
}

/* --- Formate aus Customy TinyMCE Styles --- */
.hightlight-purple{
	position                     : relative;
	font-style                   : italic; 
	z-index                      : 1;
	text-decoration: underline;
	text-decoration-color: var(--color-purple);
	text-decoration-thickness: 0.18em;
	text-decoration-skip-ink: none;
}

p.super_title{
	margin         : 0px 0px 0px 0px;
	font-weight    : 500;
	text-transform : uppercase;
}

p.success_number{
	font-size   : 3em;
	font-weight : 500;
	line-height : 1em;
	color       : rgb(  19, 170, 150 );
}

/* =================================== *\

	H E L P E R

\* =================================== */

/* Ankerpunkt für Scrollen, unsichtbar */
.scroll_anchor{
	position : relative;
	top      : -48px;
	left     : 0px;
	width    : 100%;
	height   : 0px;
	opacity  : 0;
}

/* Styling der Debug-Ausgabe für Programmierung */
.debug{
	display          : block;
	margin           : 22px;
	padding          : 11px;
	max-width        : calc( 100% - 44px );
	background-color : rgb(255 245 225);
	border-left      : 11px solid rgb(255,200,0);
}
.debug__title{
	margin      : 0px 0px 22px 0px;
	font-family : -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
	font-weight : 600;
	font-size   : 18px;
	line-height : 22px;
	color       : rgb(255,200,0);
	text-shadow : 1px 1px 2px rgba(125,100,0,0.3);
}
.debug__print{
	margin      : 0px;
	padding     : 0px;
	font-family : Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
	color       : rgb(90,90,90);
	font-size   : 12px;
	line-height : 22px;
}


/* =================================== *\

	E L E M E N T O R   W I D G E T S

\* =================================== */

/* -------------------- *\
	.HEADNAVBAR
\* -------------------- */
.headnavbar{
	margin           : var( --margin-default );
	padding          : var( --padding-default );
	border           : 1px solid var(--color-gray-dark);
	border-radius    : var(--border-radius-d);
	background-color : var( --color-white );
}
	.headnavbar__logo-wrapper{}
	.headnavbar__logo-link{}
	.headnavbar__logo-image{}

	.headnavbar__menu-wrapper{
		display         : flex;
		justify-content : flex-end;
		align-items     : center;
	}
	.headnavbar__menu{}

/* -------------------- *\
	Main Menu
\* -------------------- */
ul.headnavbar__menu{
	margin          : 0px 0px 0px 0px;
	padding         : 0px 0px 0px 0px;
	display         : flex;
	justify-content : flex-end;
	align-items     : center;
	list-style-type : none;
}
	ul.headnavbar__menu li{}
	ul.headnavbar__menu li a{
		margin         : 0px 0px 0px 0px;
		padding        : 8px 16px 8px 16px;
		display        : block;
		text-transform : uppercase;
	}

/* -------------------- *\
	Header Hero
\* -------------------- */
.header-hero{
	margin              : var( --margin-default );
	padding             : var( --padding-default );
	background-position : center center;
	background-size     : cover;
	border-radius       : var(--border-radius-d);

	box-shadow  : -1px -1px 1px rgb(255,255,255), 1px 1px 1px var(--color-gray-dark);
}
	.header-hero__copy-wrapper{
	}
	.header-hero__copy-text{}

	.header-hero__visual-wrapper{}
	.header-hero__visual-image{}


/* -------------------- *\
	Simple Text
\* -------------------- */
.simple-text{
	margin              : var( --margin-default );
	padding             : var( --padding-default );
}
	.simple-text__wrapper{}
	.simple-text__content{}


/* -------------------- *\
	Success Boxes
\* -------------------- */
.success-boxes{
	margin          : 0px 0px 0px 0px;
	padding         : 0px inherit 0px inherit;
}
.success-boxes__columns{
	margin          : 0px 0px 0px 0px;
	padding         : 0px 0px 0px 0px;
	display         : flex;
	justify-content : space-between;
	align-items     : stretch;
}

/* -- Single Box -- */
.success-box{
	flex-basis       : calc(25% - 16px);
	flex-grow        : 0;
	flex-shrink      : 1;
	padding          : 32px 8px 32px 8px;
	display          : block;
	border           : 1px solid var(--color-gray-dark);
	border-radius    : var(--border-radius-d);
	background-color : var(--color-white);
}
	.success-box__content{
		height : auto;
	}
	.success-box__content p:last-child{
		margin-bottom : 0px;
	}

	.success-box__title{
		margin     : 16px 0px 0px 0px;
		padding    : 0px 0px 0px 0px;
		font-size  : 14px;
		text-align : center;
	}

/* -------------------- *\
	Image Block & 
	Text Block
\* -------------------- */
.image-block-text-block{
	margin           : var(--margin-default);
	padding          : 0px inherit 0px inherit;
}
	.image-block-text-block__image-column{
		margin           : 0px 0px 0px 0px;
		padding          : 0px 0px 0px 0px;
		display          : flex;
		justify-content  : center;
		align-items      : center;
		border-radius    : var(--border-radius-d);
		background-color : var(--color-white);
	}
	.image-block-text-block__image{
		max-width : 100%;
		height    : auto;
	} 

	.image-block-text-block__text-column{
		display          : flex; 
		justify-content  : center;
		align-items      : center;
		align-content    : center;
		flex-wrap        : wrap;
		margin           : 0px 0px 0px 0px;
		padding          : var(--padding-default);
		border           : 1px solid var(--color-gray-dark);
		border-radius    : var(--border-radius-d);
		background-color : var(--color-white);
	}
	.image-block-text-block__text-column > * {
		display : block;
		flex    : 100% 1 0;
	}


/* -------------------- *\
	Services Column
\* -------------------- */
.services-columns{}
	.services-columns__wrapper{}

	.service-column{
		display        : flex;
		flex-direction : column;
		flex-wrap      : nowrap;
	}
	.service-column__title{
		flex             : auto 0 0;
		margin           : 0px 0px 0px 0px;
		padding          : 32px 0px 32px 0px;
		font-size        : 1.5rem;
		line-height      : 1.2em;
		text-align       : center;
		color            : var(--color-white);
		border-radius    : 32px 32px 0px 0px;
		background-color : var(--color-purple);
	}
	.service-column__content{
		flex             : 100% 1 1;
		margin           : 0px 0px 0px 0px;
		padding          : 32px 32px 32px 32px;
		border-radius    : 0px 0px 32px 32px;
		background-color : var(--color-white);
		border-left      : 1px solid var(--color-gray-dark);
		border-right     : 1px solid var(--color-gray-dark);
		border-bottom    : 1px solid var(--color-gray-dark);
	}
	.service-column__content ul{
		list-style-type : none;
	}
	.service-column__content ul li{
		padding             : 24px 0px 24px 0px;
		position            : relative;
	}
	.service-column__content ul li::before{
		content             : ' ';
		position            : absolute;
		top                 : 4px;
		left                : -27px;
		display             : block;
		background-size     : 16px 16px;
		width               : 16px;
		height              : 16px;
		background-image    : url('assets/gfx/icon-check-circle-purple.svg');
		background-position : center center;
		background-repeat   : no-repeat;
	}
		.service-column__content ul li:not(:first-child)::before{
			top : 28px;
		}

	.service-column__content ul li:first-child{ padding-top : 0px; }
	.service-column__content ul li:last-child{ padding-bottom : 0px; }
	.service-column__content ul li:not(:last-child){ border-bottom : 1px solid var(--color-gray-dark); }


/* -------------------- *\
	Services Column
\* -------------------- */
.text-image-text-block{
	padding       : 60px 30px 60px 30px;
	border-radius : var( --border-radius-d );
}
	.text-image-text-block__wrapper{}
	.text-image-text-block__content{}
	.text-image-text-block__item{}
	.text-image-text-block__item:last-child{
		margin-bottom : 0px;
	}

/* --- Number Item in Service Text-Image-Text-Block --- */
.number-item{
	margin : 0px 0px 30px 0px;
}
	.number-item__number{
		margin           : 0px 20px 0px 0px;
		padding          : 0px 0px 0px 0px;
		flex             : 40px 0 0;
		font-size        : 20px;
		font-weight      : 500;
		color            : var( --color-green );
		background-color : var( --color-green-dark );
		border-radius    : 10px;
		aspect-ratio     : 1 / 1;
	}
	.number-item__copy-text{
		margin    : 0px 0px 0px 0px;
		padding   : 0px 0px 0px 0px;
		flex      : calc( 100% - 80px ) 1 1;
		font-size : 16px;
	}