/*
Theme Name: Julia
Author: nobi
Description: Ein WordPress-Theme für Julia Paul
Version: 1.0.1
*/

@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(assets/fonts/montserrat_normal_100_900.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Merriweather Light'), local('Merriweather-Light'), url(assets/fonts/Merriweather-Light.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
	
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Merriweather Regular'), local('Merriweather-Regular'), url(assets/fonts/Merriweather-Regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
	
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Merriweather Bold'), local('Merriweather-Bold'), url(assets/fonts/Merriweather-Bold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
	  
/* ----- TYPO ----- */
body, h2.accordion-header, .sans-serif { font-family: Montserrat, sans-serif;}
	
h1, .h1, h2, .h2, h3, .serif {
	font-family: Merriweather, serif;
	font-style: normal;
	font-weight: 400;}	
h1, .h1, h2, .h2, h3 {
	color: #067139;}

/* IMG responsive */
img {
	max-width: 100%;
	height: auto;}
	
/*  ----- NAV / A ----- */
a { 
	text-decoration: none;
	color: #212529;
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(33,37,41,.5);}

a:hover,a:focus {
	color: #000;
	border-bottom-color: #000;}

a.text-decoration-none, .submenu a, footer a {
	border-bottom: none;}
	
nav a.brand, nav a.brand:hover, nav a.brand:focus {
	padding-bottom: 0;
	border-bottom: none;}
	
.submenu {
	background-color: #f1f1f1;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	font-size: 0.8em;}

.fs-nav {
	font-size: 1rem;
	color: #14181c;}
	
.navbar-nav .nav-link { letter-spacing: .05rem;}

@media (min-width: 1200px) {
	.navbar-nav .nav-link {
		margin-right: .8rem;
		margin-left: .8rem;
	}
	.nav-masthead .nav-link {
		padding-bottom: .25rem;
		font-weight: 400;
		background-color: transparent;
		border-bottom: 2px solid transparent;
	}	  
	.nav-masthead .nav-link:hover, .nav-masthead .nav-link:focus { border-bottom-color: rgba(6, 113, 57, .5);}
	.nav-masthead .active { border-bottom-color: #067139;}	
} 
	
@media (max-width: 1199.98px) {
	a.nav-link:hover, a.nav-link:focus {
		color: #000;
		background-color: #eff1f0;}	
	.nav-item a.active {
	  color: #000;
	  background-color: var(--bs-success-bg-subtle);
	  text-decoration: none;}
}

.navbar-nav a.dropdown-item:focus, .navbar-nav a.dropdown-item:hover {
	color: #000;
	background-color: #eff1f0;}
.navbar-nav .dropdown-menu a.active, .navbar-nav .dropdown-menu a:active {
	color: #000;
	background-color: var(--bs-success-bg-subtle);}

/* LOGOS HEADER */	
#logo-xl {
	background:url(assets/logo/logo-xl.png) no-repeat;
	width: 314px;
	height: 100px;}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
	#logo-xl {
		background:url(assets/logo/logo-xl@2x.png) no-repeat;
		background-size: 314px 100px;}}

#logo-lg {
	background:url(assets/logo/logo-lg2.png) no-repeat;
	width: 214px;
	height: 68px;}	
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
	#logo-lg {
		background:url(assets/logo/logo-lg2@2x.png) no-repeat;
		background-size: 214px 68px;}}

/* LOGO FOOTER */
#logo-md {
	background:url(assets/logo/logo-md.png) no-repeat;
	width: 186px;
	height: 60px;}	
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
	#logo-md {
		background:url(assets/logo/logo-md@2x.png) no-repeat;
		background-size: 186px 60px;}}
		
/* .masthead */		
.masthead::after,.masthead-long::after {
	content: "";
	display: block;
	width: 100px;
	height: 2px;
	background-color: #f0a284;    
	margin-top: 1rem;
	margin-bottom: 2rem;}
	
@media (min-width: 576px) {
	.masthead-long::after {
		width: 200px;}
}

/* Caption, Buttons */
.fs-7 {font-size: 1.15rem;}

/* Instagram-Icon submenu */
.ms-7 {margin-left: 5rem !important;}

.text-green {color: #067139;}
.border-green {border-color: #067139;}
.text-light-green {color: #0da440;}
.text-orange {color: #cd5a21;}
.border-orange {border-color: #cd5a21;}

.btn-contact {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0da440;
  --bs-btn-border-color: #0da440;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b8a35;
  --bs-btn-hover-border-color: #146c43;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #146c43;
  --bs-btn-active-border-color: #13653f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);}
	
	/* Kontakt: Anfahrt */
.btn-outline-contact {
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0da440;
  --bs-btn-hover-border-color: #0da440;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0da440;
  --bs-btn-active-border-color: #0da440;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0da440;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0da440;
  --bs-gradient: none;}

/* LISTS */
ul li, ol.style-type-secondary li {margin-bottom: .5rem;}
ol li {margin-bottom: .8rem;}
ol.recipe > li::marker {font-weight: 600 !important;}
ol.recipe > li > p {
	margin-left: 0.5rem;
	margin-bottom: 0 !important;}

ul.style-type-none {list-style-type: none;}
ul.style-type-none li span.d-inline-block {width: 85%;}
ul.style-type-none li:not(:last-child) {margin-bottom: 1rem;}

ul.style-type-secondary {list-style-type: circle}
ul.style-type-secondary li:first-child, ol.style-type-secondary li:first-child {margin-top: .5rem;}

		/* icons */
ul.arrow li::before, ul.graduation li::before, ul.check-circle li::before, ul.apple li::before, ul.check-lg li::before {	
	display: inline-block;
	margin-right: 1rem;
	vertical-align: top !important;}
	
ul.arrow li::before {
	content: url('assets/icons/arrow-right.svg');
	width: 24px;
	height: 24px;}
	
ul.graduation li::before {
	content: url('assets/icons/graduation-cap-solid.svg');
	width: 24px;
	height: 24px;}

ul.check-circle li::before {
	content: url('assets/icons/check-circle.svg');
	width: 19px;
	height: 19px;}

ul.check-lg li::before {
content: url('assets/icons/check-lg.svg');
width: 19px;
height: 19px;}

ul.apple li::before {
	content: url('assets/icons/apple-whole-solid.svg');
	width: 16px;
	height: 16px;}

/* ul.item-text-inline-block nutzen wir in my.js ! */

.accordion {
	--bs-accordion-btn-color: #067139;
	--bs-accordion-active-color: #067139;
	--bs-accordion-active-bg: #f2f4f3;}
.accordion-button:focus {
	box-shadow: none;
	border-color: rgba(0,0,0,.125);}

/* FRONTPAGE */
	/* Teaser */
.centered, .centered-404 {		
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: auto;
}
@media (max-width: 680px) {
	.centered {
		top: 60%;
	}
}
	/* Blockquote */
.blockquote-fp {
	font-size: calc(1.275rem + 0.3vw) !important;
	font-weight: 300;
	color: #067139;}
@media (min-width: 470px) {
	.blockquote-fp {
		font-size: calc(1.325rem + 0.9vw) !important;}		
}

.blockquote-footer-fp {
	font-size: 1rem;
	font-style: normal;
	margin-top: -0.5rem;
	text-align: right;}
@media (min-width: 470px) {
	.blockquote-footer-fp {
		font-size: 1.25rem;}
}

	/* Beratungsschwerpunkte */
#topics {
	background: url('assets/img/apples-1952999-3.jpg') no-repeat right top;
	background-size: cover;}
@media (max-width: 767.98px) {
	#topics {
		background-image: url('assets/img/apples-1952999-3-sm.jpg');}
}

/* ABOUT */
@media (min-width: 576px) and (max-width: 767.98px) {
	.size-ml {
		width: 70%;}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.size-ml {
		width: 55%;}
}

.border-left-orange {border-left: 3px solid #cd5a21;}

/* RECIPES */
#recipes {
	background: url('assets/img/salat-mit-banane_0185-q21.jpg') no-repeat center center;
	background-size: cover;}
@media (max-width: 767.98px) {
	#recipes {
		background-image: url('assets/img/salat-mit-banane_0185-q31-sm.jpg');}
}

	/* Zitat */
.py-6 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;}

.card-border-left, .card-border-right {
	border-top-left-radius: var(--bs-border-radius) !important;
	border-top-right-radius: var(--bs-border-radius) !important;}
@media (min-width: 768px) {
	.card-border-left {
		border-top-right-radius: 0 !important;}
	.card-border-right {
		border-top-left-radius: 0 !important;}
}

/* SO FUNKTIONIERT'S */
.text-bg-service {
	color: #cd5a21;
	background-color: #eaeceb;
	border-bottom: 2px solid #cd5a21;}

@media (min-width: 768px) {
	#oranges {
		background: url('assets/img/oranges-lg.jpg') no-repeat center top;
		background-size: cover;}
}
@media (min-width: 1200px) {
	#oranges {
		background-image: url('assets/img/oranges.jpg');
		background-position: left top;}
}

/* KOSTEN */
@media (min-width: 768px) {	
	.kosten {
		border-bottom: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;}	
}
.kosten-2 {
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;}

.tax-info {
	border-top-left-radius: 0;
	border-top-right-radius: 0;}

.text-bg-light-green {
	color: #000;
	background-color: #f8f9f8;}

.bia-header {
	border: 1px solid #198754;
	border-top-left-radius: 0.375rem;
	border-top-right-radius: 0.375rem;}	
.bia {
	border-bottom: 0;
	border-radius: 0;}	
.bia-footer {
	border: 1px solid rgba(0, 0, 0, 0.175);
	border-bottom-left-radius: 0.375rem;
	border-bottom-right-radius: 0.375rem;}
	
	/* FAQ */
p.gate {
	font-size: 1.3rem;
	font-weight: 400;
	display: flex;
	align-items: center;}
p.gate::before, p.gate::after {
	content:"";
	flex: 1;
	border-top: 2px solid #f0a284;}
p.gate::before { margin-right: 0.7rem;}
p.gate::after { margin-left: 0.7rem;}

/* KONTAKT */
@media (min-width: 576px) {
	#contactform {
		background: url('assets/img/snackplatte.jpg') no-repeat left center;
		background-size: cover;}
}

/* Betreff-Zeile sehr lang, deshalb verringern wir px 2 mal(!) (.col, .card-body)  */
@media (max-width: 409.98px) {
	.px-form {
		padding-left: .5rem;
		padding-right: .5rem;}
}
@media (max-width: 389.98px) {
	.px-form {
		padding-left: .3rem;
		padding-right: .3rem;}
}
@media (max-width: 374.98px) {
	.px-form {
		padding-left: .1rem;
		padding-right: .1rem;}
}

@media (max-width: 430px) {
	.small-select {
		font-size:0.98em;}}	
@media (max-width: 400px) {
	.small-select {
		font-size:0.96em;}}	
@media (max-width: 393px) {
	.small-select {
		font-size:0.95em;}}	
@media (max-width: 375px) {
	.small-select {
		font-size:0.94em;}}	
@media (max-width: 360px) {
	.small-select {
		font-size:0.93em;}}
			
@media (min-width: 768px) {
	#instagram {
		background: url('assets/img/instagram-M.jpg') no-repeat center center;
		background-size: cover;
		padding-top: 8rem !important;
		padding-bottom: 8rem !important;}
}
	
.fs-contact {
	font-size: 1.05rem;}
	
.lsp { letter-spacing: .04rem;} /* footer */
.lsp-2 { letter-spacing: .02rem;}  /* KOSTEN tax-info, Kontakt, Impressum, Datenschutz */

svg { vertical-align: top;}
	
textarea { height: 120px !important;} /* KEINE rows! siehe BS-Docs */
  
/* 404 */
#page-404 {
background: url('assets/img/fruehstueck_0158.jpg') no-repeat center center;
background-size: cover;
min-height: 550px;}

/* Footer */	
footer {background-color: #f1f1f1;}
footer a {color: #000;}