/*
Theme Name: Ladanie
Author: Artur S.
Description: 
Version: 1.0.0
Tested up to: 7.3
Requires PHP: 8.0
*/
@charset "UTF-8"; 
@viewport { width: device-width; zoom: 1; }
:root, 
:host{
	
	/*-COLORS-*/
	--main-color--accent: 				hsla(145, 42.1%, 22.4%, 1);
	--main-color--background: 			hsla(37.5, 36.4%, 95.7%, 1);
	--main-color--link: 				hsla(145, 42%, 46%, 1);
	
	--main-color--morphism: 			hsla( from var(--main-color--background) h s l / 0.2 );
	--main-color--contrast-to-bg:		contrast-color( var(--main-color--background) );
	--main-color--contrast-to-accent:	contrast-color( var(--main-color--accent) );
	--main-color--text: 				var(--main-color--contrast-to-bg);
	--main-color--link-hover: 			var(--main-color--accent);
	--main-color--border: 				var(--main-color--contrast-to-bg);
	
	--main-font-size:					clamp(1.2rem, 1.5vw + 0.1rem, 1.6rem);
	
	
	/*-LAYOUT-*/
	--main-padding:						1rem;
	--main-radius:						1rem;
	--main-transition--time:			0.3s;
	--main-animation-duration--time:	0.3s;
	--main-list-style-position: 		outside; /* inside | outside */
	
}
:focus-visible { outline-color: var(--main-color--contrast-to-accent); }
::selection { background-color: var(--main-color--contrast-to-accent); }
::marker { color: var(--main-color--accent); }

/*
-MINIRESET-
*/
html, body, row, flexbox, div, span, applet, object, cite, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, main, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	box-sizing: 				   	border-box;
	margin: 					   	0;
	padding: 					   	0;
	font-size: 					   	100%;
	font-weight: 				   	300;
	border: 					   	none;
	border-collapse: 			   	collapse;
	border-spacing: 			   	0;
	max-width: 					   	100%;
	max-height: 				   	100%;
	list-style: 				   	none;
	text-decoration: 			  	none;
	vertical-align: 			   	baseline;
	line-height: 				   	1.4em;
	font-family: 					"Quicksand", sans-serif;
	accent-color:					var(--main-color--accent);
	font-optical-sizing: 			auto;
	transition: 					var(--main-transition--time);
	scrollbar-color: 				var(--main-color--accent) Canvas;
	animation-duration: 			var(--main-animation-duration--time);
	animation-fill-mode: 			both;
	animation-name: 				fadeIn;
}
*, *::before, *::after { box-sizing: inherit; }
audio, video { display: inline-block; }
svg:not(:root), svg:not(:host) { overflow: hidden; }
:where(svg:not([fill])) { fill: currentColor; }
:where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; }
:where(iframe) { border-style: none; }
:where(fieldset) { border: 1px solid var(--main-color--border); }
:where(textarea) { margin:0; resize: vertical; }
summary { display: list-item; }
details { display: block; }
progress { vertical-align: baseline; }
legend { padding: 0; }
fieldset { padding: 0.35rem 0.75rem 0.625rem; }
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25rem; }
sup { top: -0.5rem; }
small { font-size: calc( var(--main-font-size) / 1.4 ); }
code { font-family: Consolas,"courier new"; color: var(--main-color--contrast-to-accent); background-color: var(--main-color--morphism); padding: 1px 3px; font-size: 90%;}
table { border-collapse: separate; border-spacing: var(--main-padding) calc(var(--main-padding) + 1.5 );}
th, td { padding: var(--main-padding); }
th{ font-weight: 500; }

/*BOOTSTRAP-FEHLER-FIX*/
.row { --bs-gutter-x: 0rem !important; }

body {
	background-color: var(--main-color--background);
	color: var(--main-color--text);
	font-size: var(--main-font-size);
	z-index: 0;
}
header,
footer,
main{
	padding-top: calc( var(--main-padding) );
	padding-left: calc( var(--main-padding) );
	padding-right: calc( var(--main-padding) );
	padding-bottom: calc( var(--main-padding) );
	z-index: 2;
}
header{
	
}
main{
	
}
footer{
	
}
section{
	padding-top: calc( var(--main-padding) );
	padding-bottom: calc( var(--main-padding) );
	z-index: 1;
}
.header{
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.header-wrapper{
	padding-top: calc( var(--main-padding) );
	padding-bottom: calc( var(--main-padding) );
	background-image: url("inc/img/banner-bg.png");
	background-repeat: no-repeat;
	background-size: cover; /* contain cover */
	z-index: 1;
}
.logo{
	width: 20rem;
	transition: var(--main-transition--time);
	padding: calc( var(--main-padding) );
}


/*BACKGROUND*/
.bg-morph {
	background: var(--main-color--morphism);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.bg-contrast-to-bg {
  background: var(--main-color--contrast-to-bg);
}
.bg-contrast-to-accent {
  background: var(--main-color--contrast-to-accent);
}

.round{
	border-radius: 50%
}
.circle{
	clip-path: circle(50%);
	border-radius: 50%
}
/*
-TYPOGRAPHY-
*/
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
	clear: 			both;
	color: 			var(--main-color--accent);
	font-weight: 	500;
	line-height: 	1.5em;
	letter-spacing: 0.1rem;
	padding: calc(var(--main-padding)*1.2) 0 calc(var(--main-padding)*1.2) 0;
}
h1,.h1{ font-size: clamp(3.0rem, 4vw, 5.5rem); }
h2,.h2{ font-size: clamp(2.5rem, 3vw, 5.0rem); }
h3,.h3{ font-size: clamp(2.0rem, 2.5vw, 4.5rem); }
h4,.h4{ font-size: clamp(1.5rem, 2vw, 3.5rem); }
h5,.h5{ font-size: clamp(1.0rem, 1.5vw, 2.0rem); }
h6,.h6{ font-size: clamp(0.5rem, 1vw, 1.5rem); }


@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
.oswald--font {
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: italic;
	background: linear-gradient(160deg, var(--main-color--accent), #654d34 40%, var(--main-color--accent) 80%  );
	background-clip: border-box;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}



/*
-NAVIGATION-
*/
.nav-item a{
	background: linear-gradient( to right,var(--main-color--link-hover) 0%, var(--main-color--link-hover) 0px, transparent 0px );
	padding-top: calc( var(--main-padding) / 2 );
	padding-bottom: calc( var(--main-padding) / 2 );
	padding-left: var(--main-padding);
	padding-right: var(--main-padding);
	
	background-repeat: repeat-x;
	background-size: 100%;
	color: var(--main-color--contrast-to-bg);
	transition: var(--main-transition--time);
	border-radius: calc( var(--main-padding) / 3 );
	
	&:hover {
		animation-name: fadeIn;
		background: linear-gradient( to right,var(--main-color--link-hover) 0%,var(--main-color--link-hover) 1px,transparent );
		color: var(--main-color--background);
	}
}
.navbar-toggler {
	border: 1px solid var(--main-color--morphism);
}
.navbar-toggler:hover {
  background: var(--main-color--morphism);
}
.navbar-toggler:focus {
  box-shadow: none;
}
.nav-bg-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 35px;
	width: 100%;
	height: 70px;
	background: var(--main-color--morphism);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: flex;
}




/*
-LINK-
*/
a{ 
	color: var(--main-color--link);
	transition: var(--main-transition--time);
	
	&::before {
		content: "";
		position: absolute;
		width: 0;
		height: 2px;
		background-color: var(--main-color--link-hover);
		right: 0;
		transition: width var(--main-transition--time);
		
		&:hover::before { width: 100%; }
	}
	
	&:hover{ color: var(--main-color--link-hover); }
	
	
}	




/*
-UL-LIST-
*/
ul[class~=flex]{
	display: flex; 
	flex-wrap: wrap;
	padding: calc( var(--main-padding) / 3 ) );
}
ul > li{
	padding: calc( var(--main-padding) / 3 ) );
	margin-left: 2rem;
}
ul[class~=liCircle] > li{
	list-style-position: var(--main-list-style-position);
	padding-left: var(--main-padding);
	list-style-type: circle;
}
ul[class~=liDisc] > li{
	list-style-position: var(--main-list-style-position);
	padding-left: var(--main-padding);
	list-style-type: disc;
}
ul[class~=liSquare] > li{
	list-style-position: var(--main-list-style-position);
	padding-left: var(--main-padding);
	list-style-type: square;
}
ul[class~=liLowerAlpha] > li{
	list-style-position: var(--main-list-style-position);
	padding-left: var(--main-padding);
	list-style-type: lower-alpha;
}
ul[class~=liCheck] > li:before{
	list-style-position: var(--main-list-style-position);
	content: "\2713\0020";
	padding-left: var(--main-padding);
}
ul[class~=liDecimal] > li{
	list-style-position: var(--main-list-style-position);
	padding-left: var(--main-padding);
	list-style-type: decimal;
}

/*
-LI-LIST-
*/
li[class~=liCheck]{
	list-style: var(--main-list-style-position) "\2713\0020";
	padding-left: var(--main-padding);
}
li[class~=liCheckBold]{
	list-style: var(--main-list-style-position) "\2714\0020";
	padding-left: var(--main-padding);
}
li[class~=liCircle]{
	list-style-position: var(--main-list-style-position);
	padding-left: var(--main-padding);
	list-style-type: circle;
}
li[class~=liDisc]{
	list-style-position: var(--main-list-style-position);
	padding-left: var(--main-padding);
	list-style-type: disc;
}
li[class~=liSquare]{
	list-style-position: var(--main-list-style-position);
	padding-left: var(--main-padding);
	list-style-type: square;
}
li[class~=liArrow]{
	padding-left: var(--main-padding);
	list-style: var(--main-list-style-position) "\2794\0020";
}
li[class~=liStar]{
	padding-left: var(--main-padding);
	list-style: var(--main-list-style-position) "\2605\0020";
}
li[class~=liTel]{
	padding-left: var(--main-padding);
	list-style: var(--main-list-style-position) "\2706\0020";
}
li[class~=liMail]{
	padding-left: var(--main-padding);
	list-style: var(--main-list-style-position) "\2709\0020";
}
li[class~=liTimes]{
	padding-left: var(--main-padding);
	list-style: var(--main-list-style-position) "\00D7\0020";
}
li[class~=liTimesHeavy]{
	padding-left: var(--main-padding);
	list-style: var(--main-list-style-position) "\2715\0020";
}
li[class~=liTimesHeavyBold]{
	padding-left: var(--main-padding);
	list-style: var(--main-list-style-position) "\2716\0020";
}
li[class~=liBar]{
	padding-left: var(--main-padding);
	list-style: var(--main-list-style-position) "\007C\0020";
}





/*
-ANIMATION-
*/
@keyframes breath {
 0% 	{ opacity: 1; box-shadow: 0 0 0 0rem var(--main-color--morphism), 0 0 0 2rem var(--main-color--morphism)}
 50% 	{ opacity: 0.8; box-shadow: 0 0 0 1rem var(--main-color--morphism), 0 0 0 4rem var(--main-color--morphism) transform: translate(-50%, -50%);}
 100% 	{ opacity: 1; box-shadow: 0 0 0 0rem var(--main-color--morphism), 0 0 0 2rem var(--main-color--morphism)}
}
.breath{animation: breath 5.5s ease-in-out infinite;}

@keyframes pulse {
  0% {	box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);}
  100% {	box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);}
}
.pulse {
  animation: pulse 2s infinite;
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fadeIn {animation-name: fadeIn;}

@keyframes swing {
  20% {transform: rotate(15deg);}
  40% {transform: rotate(-10deg);}
  60% {transform: rotate(5deg);}
  80% {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}
.swing {transform-origin: top center;animation-name: swing;}

@keyframes wobble {
  0% {transform: translateX(0%);}
  15% {transform: translateX(-25%) rotate(-5deg);}
  30% {transform: translateX(20%) rotate(3deg);}
  45% {transform: translateX(-15%) rotate(-3deg);}
  60% {transform: translateX(10%) rotate(2deg);}
  75% {transform: translateX(-5%) rotate(-1deg);}
  100% {transform: translateX(0%);}
}
.wobble {animation-name: wobble;}

@keyframes bounceInRight {
  0% {opacity: 0;transform: translateX(2000px);}
  60% {opacity: 1;transform: translateX(-30px);}
  80% {transform: translateX(10px);}
  100% {transform: translateX(0);}
}
.bounceInRight {animation-name: bounceInRight;}


@keyframes bounceInDown {
  0% {opacity: 0; transform: translateY(-2000px);}
  60% {opacity: 1;transform: translateY(30px);}
  80% {transform: translateY(-10px);}
  100% {transform: translateY(0);}
}
.bounceInDown {animation-name: bounceInDown;}

@keyframes bounceInUp {
  0% {opacity: 0;transform: translateY(2000px);}
  60% {opacity: 1;transform: translateY(-30px);}
  80% {transform: translateY(10px);}
  100% {transform: translateY(0);}
}
.bounceInUp {animation-name: bounceInUp;}


/**
 * - BUTONS -
 */
.btn-termin {
    --bg_color: var(--main-color--accent);
    position: relative;
    transition: all .5s;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    color: #fff;
    z-index: 1;
}
.btn-termin span {
    display: flex;
    align-items: center;
    letter-spacing: 2px;
    font-weight: bold;
    background: var(--bg_color);
    border-radius: 2rem;
    padding: 15px 15px;
    text-transform: uppercase;
    font-size: 14px;
}
.btn-termin::before {
    content: '';
    z-index: -1;
    background-color: var(--bg_color);
    border: 2px solid white;
    border-radius: 2rem;
    width: 110%;
    height: 100%;
    position: absolute;
    transition: .5s;
    opacity: 0.2;
    box-sizing: content-box;
}
.btn-termin:hover::before {
    transform: rotate(0deg);
    opacity: 1;
}
.btn-termin svg {
    transform: translateX(-200%);
    transition: .5s;
    width: 0;
    opacity: 0;
}
.btn-termin:hover svg {
    width: 25px;
    transform: translateX(0%);
    opacity: 1;
}
.btn-termin:active {
    filter: brightness(1.4);
}






/**
 * - CARDS -
 */
.card{
	min-height: 350px;
}
.card-img{
	width: 100px;
	padding-top: calc( var(--main-padding) * 2 );
	padding-left: calc( var(--main-padding) );
	padding-right: calc( var(--main-padding) );
	padding-bottom: calc( var(--main-padding) );
}



/**
* -- KONTAKT-CARD --
*/
.contact-wrapper {
	display: block;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--main-padding);
	margin: var(--main-padding);
	transition: all var(--main-transition--time) ease;
	border-radius: 2rem;
	border: 1px solid var(--main-color--background);
}
.contact-icon {
	color: var(--main-color--accent);
	font-size: calc( var(--main-font-size) * 1.4);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}
.contact-item{
	
}

/* 
 * Für klenere Geräte ab 768px und kleiner 
 */
@media (max-width: 768px) {
	
	header,main,footer { 
		padding-right: calc( var(--main-padding) * 2 );
		padding-left: calc( var(--main-padding) * 2 );
	}



}