/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Custom Divi Child Theme
 Author: Roman Preot
 Template: Divi
 Version: 1.0.0
*/


/* ----------------- CUSTOM FONTS --------------------- */

/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/barlow/barlow-v12-latin-regular.woff2') format('woff2');
}
/* barlow-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/barlow/barlow-v12-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/barlow/barlow-v12-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/barlow/barlow-v12-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* eb-garamond-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/eb-garamond/eb-garamond-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ---------------- Variables -------------------- */

:root {
    --primary_1: #75FFC1;
    --primary_2: #CFFDE8;
    --primary_3: #defcee;
    --secondary_1: #49517A;
    --secondary_2: #A8B3CC;
    --secondary_3: #C9CFDE;
    --dark_1: #2C2C2C;
    --dark_2: #767676;
    --dark_3: #E1E1E1;
    --white: #FFFFFF;
}


/* ---------------- CUSTOM STYLES --------------------- */

html {
    font-family:'Barlow' !important;
    font-size: 17px !important;
}

body {
    
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.3em;
    color: var(--dark_1) !important;
}


p { 
    hyphens: auto;
    hyphenate-limit-chars: auto 3;
    hyphenate-limit-lines: 4;
}


p a {
    text-decoration: underline;
    color: var(--dark_1) !important;
}

p a:hover {
  text-decoration: none;
}

a:focus {
    outline: 2px solid #49517A; /* Secondary 1 */
    outline-offset: 2px 4px; /* Abstand von 2px */
}

a:hover {
    text-decoration: none;
}


strong {
    font-weight: 600;
}


h1,h2 {
    font-family:'EB Garamond' !important;
    font-weight: 400;
    line-height: 1.2em;
    hyphens: auto;
    hyphenate-limit-chars: auto 3;
    hyphenate-limit-lines: 4;
}

h3,h4,h5,h6 {
    font-family:'Barlow' !important;
    font-weight: 400;
    line-height: 1.2em;
    hyphens: auto;
    hyphenate-limit-chars: auto 3;
    hyphenate-limit-lines: 4;
}

h1 {
    font-size: 2.35rem; /* entspricht 40px bei 17px Basis */
    line-height: 2.82rem !important; /* entspricht 48px bei 17px Basis */
}

h2 {
    font-size: 1.65rem !important; /* entspricht 28px bei 17px Basis */
    line-height: 2.12rem !important; /* entspricht 36px bei 17px Basis */
}


h3 {
    font-size: 1.41rem !important; /* entspricht 24px bei 17px Basis */
    line-height: 1.65rem !important; /* entspricht 28px bei 17px Basis */
}


h4 {
    font-size: 1.18rem !important; /* entspricht 20px bei 17px Basis */
    line-height: 1.53rem !important; /* entspricht 24px bei 17px Basis */
}

h5 {
    font-size: 1.0rem !important; /* entspricht 17px bei 17px Basis */
    line-height: 1.18rem !important; /* entspricht 20px bei 17px Basis */
    font-weight: 600;
}



sup {
    font-size: 0.71rem !important; /* entspricht 12px bei 17px Basis */
    line-height: 0.88rem !important; /* entspricht 15px bei 17px Basis */
}


.intro {
    font-family:'Barlow' !important;
    font-weight: 400;
    font-size: 1.18rem !important; /* entspricht 20px bei 17px Basis */
    line-height: 1.53rem !important; /* entspricht 24px bei 17px Basis */
}





/* ------------------- CUSTOM Elements --------------------- */


/* Zitate */

blockquote {
    position: relative;
    padding: 16px;
    border-radius: 16px 16px 16px 0;
    bottom: -6px;
    margin-top: 8px;
    font-size: 1.18rem !important; /* entspricht 20px bei 17px Basis */
    line-height: 1.53rem !important; /* entspricht 24px bei 17px Basis */
    font-style: italic;
    background-color: var(--primary_3);
    border-left: 5px solid;
    border-bottom: 5px solid;
    border-color: var(--primary_1);
}

blockquote p {
    position: relative;
    margin-left: 20px; /* Einrückung des gesamten Textblocks */
}

blockquote p::before {
    content: "„"; /* oder „ für deutsche Anführungszeichen */
    position: absolute;
    left: -16px;
    top: -8px;
    font-size: 2.5rem; /* Größe anpassen nach Bedarf */
    color: inherit; /* gleiche Farbe wie der Text im Blockquote */
}

blockquote p::after {
    margin-left: -2px; /* Abstand zwischen Anführungszeichen und Text */
    content: "“"; /* oder „ für deutsche Anführungszeichen */
    font-size: inherit; /* gleiche Größe wie der Text zuvor */
    color: inherit; /* gleiche Farbe wie der Text im Blockquote */
}

/* Inhaltsverzeichnis */

.inhaltsverzeichnis-h2 {
    font-size: 1.41rem !important; /* entspricht 24px bei 17px Basis */
    line-height: 1.65rem !important; /* entspricht 28px bei 17px Basis */
    padding-bottom: 16px !important;
    margin-top: -24px;
}


/* Image Caption */
.pac_dih__image_details {
  margin-top: 12px;
}


/* Share buttons (specified in functions.php) */

a.share-button {
    display: inline-block;
    width: 44px;
    height: 44px;
    background-color: var(--primary_1);
    border-radius: 0px;
    text-align: center;
    line-height: 44px;
    text-decoration: none;
    margin-bottom: 8px !important;
}

a:hover.share-button {
    display: inline-block;
    width: 44px;
    height: 44px;
    background-color: var(--primary_2);
    border-radius: 0px;
    text-align: center;
    line-height: 44px;
    text-decoration: none;
    margin-bottom: 8px !important;
}

a:focus.share-button {
    outline: 4px solid; /* Secondary 1 */
    outline-color: var(--primary_2) !important;
    outline-offset: 0px; /* Abstand von 2px */
}

a.share-button svg {
    width: 24px;
    height: 24px;
    fill: var(--dark_1) !important;
    vertical-align: middle;
}



/* Blog Sidebar */ 

/* Search button in Sidebar */ 

.et_pb_search_0 input.et_pb_searchsubmit {
  font-size: 1.0rem !important; /* entspricht 17px bei 17px Basis */
  line-height: 1.18rem !important; /* entspricht 20px bei 17px Basis */
  transition: background-color 0.3s ease;
}

.et_pb_search_0 input.et_pb_searchsubmit:focus {
  outline: 2px solid !important; 
  outline-color: var(--secondary_1) !important;
  outline-offset: -2px; 
  border-radius: 0px !important;
}

/* Input field */
.et_pb_search_0 input.et_pb_s {
  font-size: 17px !important;
  transition: background-color 0.3s ease;
}

.et_pb_search_0 input.et_pb_s: {
  outline: 2px solid !important; 
  outline-color: var(--primary_1) !important;
}

.et_pb_search_0 input.et_pb_s:focus {
  background-color: #FFFFFF !important;
  outline: 2px solid !important; 
  outline-color: var(--secondary_1) !important;
  outline-offset: -2px; 
  border-radius: 0px !important;
}



/*

.widget_search #searchsubmit, .et_pb_widget .wp-block-search__button {
  background-color: var(--primary_1) !important;
  color: var(--dark_1) !important;
  margin-left: 12px;
  border-radius: 0px !important;
  transition: background-color 0.3s ease;
}

.wp-block-search__button:hover {
  background-color: var(--primary_2) !important;
  }


.wp-block-search__button:focus {
  outline: 4px solid; 
  outline-color: var(--secondary_1) !important;
  outline-offset: 0px; 
  border-radius: 0px !important;
}


.widget_search #s, .et_pb_widget .wp-block-search__input {
  border-radius: 0px;
}

.wp-block-search__input {
  padding: .8em;
  height: 44px !important;
  margin: 0;
  line-height: 19px;
  border: 1px solid var(--dark_3);
  color: var(--dark_1);
}

*/





/* Cookie banner */


.CybotCookiebotDialogNavItemLink a {
  font-weight: 300 !important;
}

.CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    border-color: transparent;
    border-bottom: 2px solid var(--primary_1) !important;
    color: var(--dark_1) !important;
}
.CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive:focus,
.CybotCookiebotDialogNavItemLink:focus {
    border-color: transparent;
    border-bottom: transparent;
    color: var(--dark_1) !important;
    outline: 4px solid; /* Secondary 1 */
    outline-color: var(--primary_1) !important;
    outline-offset: 0px; /* Abstand von 2px */
}

.CybotCookiebotDialogBodyButton {
    background-color: var(--primary_1) !important;
    border: none !important;
    color: var(--dark_1) !important;
}

.CybotCookiebotDialogBodyButton:focus {
  outline: 4px solid; /* Secondary 1 */
  outline-color: var(--secondary_1) !important;
  outline-offset: 0px; /* Abstand von 2px */
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept {
  
}



/* Main Menu styles */

.main-nav {
  }

.et-menu li {
  font-size: 1.0rem !important;
}

.et-menu li > a {
    font-size: 1.1rem !important;
}

.et-menu li>a:hover {
  text-decoration: underline;
}

.et-menu li>a:focus {
    outline: 2px solid var(--secondary_1); /* Secondary 1 */
    outline-offset: 4px !important; /* Abstand von 2px */
}

.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a {
  padding-bottom: 0;
}

/* Highlight using list element */
.current_page_item {
    font-weight: 600;
}


/* Mobile menu */


/* Text left of hamburger in Theme Builder */
.et_mobile_nav_menu:before  {
position: absolute;
right: 40px;
margin-top:5px;
color: #333;
font-size:16px;
}

/* Text left of hamburger in Divi 3 */
#et_mobile_nav_menu:before  {

position: absolute;
right: 33px;
bottom:30px;
	

color: #333;
font-size:16px;
}

/* X icon in expanded mobile menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}

/* Change X icon color - change #000 to your desired color */
.mobile_nav.closed .mobile_menu_bar:before,
.mobile_nav.opened .mobile_menu_bar:before{
color: #000;
}

/* Remove the top line in the mobile menu*/
.et_mobile_menu {
	border-top:0;
}

.et_mobile_menu li a {
	color: #333333;
	font-size: 17px;
}

/* Center-align moble menu items */
.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0 !important;
}



/*  Category Menu styles */

.catmenu li a {
    display: inline-block;
    width: auto;
    height: 44px;
    padding-left: 12px;
    padding-right: 12px;
    background-color: var(--primary_1);
    border-radius: 0px;
    text-align: center;
    line-height: 44px;
    text-decoration: none;
    margin-bottom: 8px !important;
}

.catmenu li a:hover {
  text-decoration: none;
}

.catmenu li a:focus {
    outline: 4px solid; 
    outline-color: var(--secondary_1) !important;
    outline-offset: 0px; /* Abstand von 2px */
}


/* Divi mobiles Menü nicht einklappen */
/* Nur für Kategorie-Menü benutzt */

@media (max-width: 980px){
    .dt-no-menu-collapse.et_pb_menu .et_pb_menu__menu,
    .dt-no-menu-collapse.et_pb_fullwidth_menu .et_pb_menu__menu {
        display: block;
    }
    .dt-no-menu-collapse.et_pb_menu .et_mobile_nav_menu,
    .dt-no-menu-collapse.et_pb_fullwidth_menu .et_mobile_nav_menu {
        display: none;
    }
}





/* Button states */


#btn_primary:focus {
    outline: 4px solid; 
    outline-color: var(--secondary_1) !important;
    outline-offset: 0px; /* Abstand von 2px */
}

#btn_primary_dark:focus {
    outline: 4px solid; 
    outline-color: var(--primary_1) !important;
    outline-offset: 0px; /* Abstand von 2px */
}

#btn_secondary:focus {
    outline: 4px solid; 
    outline-color: var(--primary_1) !important;
    outline-offset: 0px; /* Abstand von 2px */
  
}


.more-link {
    display: inline-block !important;
    padding: 4px 12px;
    margin-top: 12px;
    background-color: var(--primary_1); /* Button-Hintergrundfarbe */
    color: var(--grey_1); /* Textfarbe */
    text-decoration: none;
    border-radius: 0; /* Runde Ecken */
    transition: background-color 0.3s ease;
}

.more-link:hover {
    background-color: var(--primary_2); /* Farbe bei Hover */
    text-decoration: none;
}


/* Accordion */