/*
 Theme Name:     Divi Child Theme
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Jelena Garbotz Kommunikationsdesign
 Author URI:     http://jelenagarbotz.de
 Template:       Divi
 Version:        1.0.0
*/
 
@import url("../Divi/style.css");


/* SEITENLAYOUT -------------------------------------------------- */

/* Hide Header & Footer */
/*#top-header{display: none;}
#main-footer{display: none;}*/

/* Ohne Linie unter der Navi */
#main-header {
    -webkit-box-shadow: 0 0px 0 rgba(0, 0, 0, 0);
    -moz-box-shadow: 0 0px 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0 rgba(0, 0, 0, 0);
}


/* LOAD WEBFONTS -------------------------------------------------- */

/* open-sans-regular-400 */
@font-face {
    font-family: 'OpenSans-Regular';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-800 */
  @font-face {
    font-family: 'OpenSans-Bold';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/open-sans-v34-latin-800.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/open-sans-v34-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/open-sans-v34-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/open-sans-v34-latin-800.woff') format('woff'), /* Modern Browsers */
         url('fonts/open-sans-v34-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/open-sans-v34-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
  }

/* BASIC FONT STYLES -------------------------------------------------- */

/* Fallback Serif: 
font-family: SERIF-FONT,Georgia,"Times New Roman",serif;*/

body {
    font-family: "cy-text", sans-serif;
    font-weight: 400;
	/*hyphens: auto;*/
}

p, ul {
    font-family: "cy-text", sans-serif;
    font-weight: 400;
    font-style: normal;
}

strong {
    font-family: "cy-text", sans-serif;
    font-weight: 700;
    font-style: normal;
}

p a {
    font-family: "cy-text", sans-serif;
}
a {
    font-weight: 700;
}
a:hover {
    text-decoration: underline;
}
.link-satz-1 a {
    color: #5dbd94;
}
.link-satz-2 a {
    color: #f5895e;
}
.link-satz-3 a {
    color: #f068a4;
}
.link-satz-4 a {
    color: #52b7ef;
}
.link-satz-5 a {
    color: #fdcf60;
}
.footer-link a {
    color: #fff;
}

h1 {
    font-family: "cy", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 3rem;
    line-height: 1.2;
	text-align: center;
    /*text-transform: uppercase;*/
}

h2 {
    font-family: "cy", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2.0rem;
    line-height: 1.2;
}

h3, .introtext p {
    font-family: "cy", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.7rem;
    line-height: 1.3;
}
.introtext p {
    text-align: center;
}
/*h3 a {
    text-decoration: none !important;
}*/

h4 {
    font-family: "cy", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.2rem;
	line-height: 1.3;
    letter-spacing: 1px;
	text-transform: uppercase;
    margin-top: 0.55em;
    margin-bottom: 0.5em;
	/*color: #9ea4ab;*/
}

blockquote p { 
  font-style: italic !important;
  color: #485c8c;
}

/* Markierter Text */
::selection {
    color: #fff; 
    background: rgba(89,105,148,0.5);
}
::-moz-selection { /* Firefox */
    color: #fff;
    background: rgba(89,105,148,0.5);
}

li {
    margin-bottom: 0.5rem;
}

ol li {
    list-style-position: outside; /* umbrechende Zeilen werden eingerückt */
}

hr {
    border: 0;
    height: 1px;
    background: #ccc;
    margin-top: 30px;
    margin-bottom: 60px;
}

img {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

/* CLASSES -------------------------------------------------- */

.contentbox {
    background-color: rgba(72,92,140,0.5) !important;
    /*background-color: rgba(36,43,61,1);*/
    padding: 25px 25px 35px 25px;
}

.zitat {
    font-size: 1.7rem;
    line-height: 1.3;
	color: mediumslateblue;
}
.zitat-name {
    text-transform: uppercase;
}

.text-neg a:link {
	color: white;
}
.text-neg a:visited {
	color: white;
}

.versal {
	text-transform: uppercase;
}

.marginal {
    font-size: 0.8rem;
    line-height: 1.6;
}

/* Mobile: Hs und Introtext kleiner */
@media all and (max-width: 479px) {
    h1 {
        font-size: 2.2rem;
    }
    h3, .introtext p {
        font-size: 1.55rem;
    }
}

/* Text in der Farbe des aktiven Satzes (erste Section auf der Seite hat diese Klasse) */
.satz-1 .text-farbig p, .satz-1 blockquote p {
    color: #5dbd94;
}
.satz-2 .text-farbig p, .satz-2 blockquote p {
    color: #f5895e;
}
.satz-3 .text-farbig p, .satz-3 blockquote p {
    color: #f068a4;
}
.satz-4 .text-farbig p, .satz-4 blockquote p {
    color: #52b7ef;
}
.satz-5 .text-farbig p, .satz-5 blockquote p {
    color: #fdcf60;
}

/* MENU -------------------------------------------------- */

/* Umbruch Desktop > Mobile */
@media only screen and ( min-width:0px ) and ( max-width: 1310px ) {
    #et_mobile_nav_menu { display:block }
	#top-menu-nav { display:none; }
}

/* Fonts */
#top-menu-nav a {
    font-weight: 700;
}
.mobile_nav li a {
    font-size: 18px !important;
}
.mobile_nav li a:hover {
    color:#fff !important;
    text-decoration: none;
}

/* H-Abstand der Icons (nur der Icons, nicht der Menu-Texte), der 5. ist absichtlich nicht dabei */
#top-menu li.menu-icon-1, #top-menu li.menu-icon-2, #top-menu li.menu-icon-3, 
#top-menu li.menu-icon-4 {
    padding-right: 8px;
}

/* Icons und Menu Texte vertikal mittig */
#top-menu-nav ul {
    display: flex;
    align-items: center;
}

/* Und das aktive Icon (also das mit farbigem Kreis im Hintergrund) sollte keinen Hover-Effekt haben */
/* mit :not(current-menu-item)  gelöst */
/* Icons: Bildtausch on hover */
.menu-icon-1:not(.current-menu-item)  img:hover {
    content: url('https://moonologues.de/wp-content/uploads/Menu-Icon-1h.png');
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.menu-icon-2:not(.current-menu-item)  img:hover {
    content: url('https://moonologues.de/wp-content/uploads/Menu-Icon-2h.png');
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.menu-icon-3:not(.current-menu-item)  img:hover {
    content: url('https://moonologues.de/wp-content/uploads/Menu-Icon-3h.png');
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.menu-icon-4:not(.current-menu-item)  img:hover {
    content: url('https://moonologues.de/wp-content/uploads/Menu-Icon-4h.png');
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.menu-icon-5:not(.current-menu-item)  img:hover {
    content: url('https://moonologues.de/wp-content/uploads/Menu-Icon-5h.png');
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
/* Icons: ohne Divi Hover-Abblendeffekt */
#top-menu-nav > ul > li.menu-icon-1 > a:hover,
#top-menu-nav > ul > li.menu-icon-2 > a:hover, 
#top-menu-nav > ul > li.menu-icon-3 > a:hover, 
#top-menu-nav > ul > li.menu-icon-4 > a:hover, 
#top-menu-nav > ul > li.menu-icon-5 > a:hover {
    opacity: unset;
    -webkit-transition: none;
    transition: none;
}

/* Icons: ohne Divi Hover-Abblendeffekt für Mobil */ /* fkt nicht*/
.et_mobile_menu li.menu-icon-1 a:hover,
.et_mobile_menu li.menu-icon-2 a:hover,
.et_mobile_menu li.menu-icon-3 a:hover,
.et_mobile_menu li.menu-icon-4 a:hover,
.et_mobile_menu li.menu-icon-5 a:hover {
  opacity: unset;
}

/* Hover-Farbe für Text-Menu-Items */
#top-menu-nav #top-menu a:hover, #mobile_menu_slide a:hover { 
    color: #fff !important; 
    opacity: 1 !important;
}

/* MOBILE MENU -------------------------------------------------- */

/* Burger-Icon */
.mobile_menu_bar::before {
    /*color: #7c95d1 !important;*/
    color: #fff !important;
    font-size: 36px;
}

.et_mobile_menu li.menu-icon-1 a,
.et_mobile_menu li.menu-icon-2 a,
.et_mobile_menu li.menu-icon-3 a,
.et_mobile_menu li.menu-icon-4 a,
.et_mobile_menu li.menu-icon-5 a {
  display: inline-block;
  padding: 10px 10px;
}
.et_mobile_menu li.menu-icon-1 a {
    padding-left: 5%;
}

.et_mobile_menu li.menu-icon-1,
.et_mobile_menu li.menu-icon-2,
.et_mobile_menu li.menu-icon-3,
.et_mobile_menu li.menu-icon-4,
.et_mobile_menu li.menu-icon-5 {
  display: inline;
}

/* TRACK- UND INFO-SEITEN (Antworten) -------------------------------------------------- */

.ziffer-satz-1 .et_pb_text_inner,
.ziffer-satz-2 .et_pb_text_inner,
.ziffer-satz-3 .et_pb_text_inner,
.ziffer-satz-4 .et_pb_text_inner,
.ziffer-satz-5 .et_pb_text_inner {
    display: flex;
    justify-content: center;
}
.ziffer-satz-1 p, .ziffer-satz-2 p, .ziffer-satz-3 p, .ziffer-satz-4 p, .ziffer-satz-5 p {
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    /*border-radius: 4px;*/
    /*padding: 1.25rem 0.75rem; */
    text-transform: uppercase;
    width: 82px;
    height: 80px;
    line-height: 80px;
    margin-bottom: 2rem;
}
/* Falls Padding genutzt wird: */
/* Padding noch einmal für den letzten Paragraphen definieren, da sonst padding bottom 0 */
/*.track-nr p:not(.has-background):last-of-type ,
.ziffer-satz-1 p:not(.has-background):last-of-type {
    padding: 1.25rem 0.75rem;
}*/
/* Antwortseiten: BG Ziffern in den Sätzen */
.ziffer-satz-1 p {
    background-color: #5dbd94;
}
.ziffer-satz-2 p {
    background-color: #f5895e;
}
.ziffer-satz-3 p {
    background-color: #f068a4;
}
.ziffer-satz-4 p {
    background-color: #52b7ef;
}
.ziffer-satz-5 p {
    background-color: #fdcf60;
}
.ziffer-satz-1 a, .ziffer-satz-2 a, .ziffer-satz-3 a, .ziffer-satz-4 a, .ziffer-satz-5 a {
    color: #fff;
    text-decoration: none;
}
/*.info-nr p a:hover {
    background-color: #fdcf60;
    background-color: rgba(255,242,100,0.7);
}*/
.info-nr a:hover { /* funktioniert nicht */
    /*background-color: rgba(110,126,159,0.9);*/
}

/* EXKURS-SEITEN -------------------------------------------------- */

.img-exkurs-header {
    max-width: 200px;
}

.seitenspalte {
    background-color: rgba(36,43,61,0.9);
    padding: 30px !important;
}


/* DYNAMISCHE BUTTONS PAGE NAVIGATION – ZURÜCK / WEITER (> Sylvie) -------------------------------------------------- */

/* Buttons sollen auch auf mobile 2-spaltig nebeneinander sitzen und nicht umbrechen */
.page-navi-row { /* funktioniert nicht */
    width: 50% !important; /*2 columns*/
    clear: none !important;
}

.snippet-blaettern-row .snippet-blaettern-module-vor {
    display: flex;
    justify-content: flex-end;
}
.snippet-blaettern-row .snippet-blaettern-module-rueck {
    display: flex;
    justify-content: flex-start;
}
/* Pfeile: Größe */
.snippet-blaettern-row .snippet-blaettern-module-vor span {
    max-width: 100px;
    width: 100px; /* fuer die manuell erstellten Pfeile */
    display: inline-block;
}
.snippet-blaettern-row .snippet-blaettern-module-rueck span {
    max-width: 100px;
    width: 100px; /* fuer die manuell erstellten Pfeile */
    display: inline-block;
}
/* Pfeile: Hover */
.snippet-blaettern-row .snippet-blaettern-module-vor img:hover,
.button-forward img:hover {
    content: url('https://moonologues.de/wp-content/uploads/Button-weiter-x.png');
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
/* Animation bei manuell erstellten Blätter Buttons ausschalten */
.snippet-blaettern-row .et_multi_view_image__loaded {
    -webkit-animation: none;
    animation: none;
}
.snippet-blaettern-row .snippet-blaettern-module-rueck img:hover,
.button-back img:hover {
    content: url('https://moonologues.de/wp-content/uploads/Button-zurueck-x.png');
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

@media (max-width: 980px) {
    .snippet-blaettern-row .et_pb_column {
        width: 48.5%;
    }
}
@media (max-width: 479px) {
    .snippet-blaettern-row .et_pb_column {
        width: 48.5% !important;
    }
}

.antwort-blaettern .et_pb_button_module_wrapper {
    text-align: center;
}

/* Bild im Text: Padding (linksbündig) */
.img-content {
    padding-bottom: 1vw;
    padding-right: 1vw;
}

/* Plugin Divi Image Helper: Copyright unterm Bild (generiert aus der Image Caption) */
.copyright, .pac_dih__image_details {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #999;
    text-align: right;
    margin-top: 0.5em;
}

/* Footer: Social-Media-Icons zentriert */
.img-center .et_pb_text_inner {
    display: flex;
    align-items: center; /* align vertical */
}
.img-center .et_pb_text_inner a img {
    display: block;
}

/* QUIZ (QSM-Plugin) -------------------------------------------------- */

/* Styling Row */
.quiz-row {
    /*background-color: rgba(36,43,61,0.9);*/
    background-color: rgba(72,92,140,0.5);
    /*background-color: rgba(72,92,140,0.8);*/
    padding: 25px 30px 5px 30px !important;
}
/* Texte & Button */
/* Frage */
.quiz_section .mlw_qmn_new_question {
    font-family: "cy-text", sans-serif;
    /*font-weight: 400 !important;*/
    font-size: 1.3rem; /* 1.7rem */
    line-height: 1.3;
    color: #FFF;
    /*margin-bottom: 100px !important; FKT NICHT */
}
/* Radio-Buttons: Texte */
.quiz_section .qmn_radio_answers label, .quiz_section .qmn_check_answers label, .quiz_section .qmn_accept_answers label {
    font-family: "cy-text", sans-serif;
    font-size: 17px !important;
    color: #FFF;
}
/* Radio-Buttons: Größe */
.qsm-quiz-container input[type="radio"] {
    width: 20px;
    height: 20px;
    border-radius: 15px;
}
/* Radio-Buttons: Ausrichtung */
.qsm-quiz-container input[type="radio"] {
    margin-top: 4px !important;
    vertical-align: top !important;
}
/* Radio-Buttons: Farbe aktiver */
.qsm-quiz-container input[type="radio"] {
    accent-color: #485c8c;
}
/* Hint (nicht verwendet) */
.mlw_qmn_hint_link {
    font-family: "cy-text", sans-serif;
    color: #2ce4ff !important;
    margin-top: 1rem;
}
/* Button: Farbe des aktiven Satzes (erste Section auf der Seite hat diese Klasse) */
.satz-1 .qmn_quiz_container .qmn_btn,
.satz-1 .qmn_quiz_container .qmn_btn:hover {
    background-color: #5dbd94 !important;
}
.satz-2 .qmn_quiz_container .qmn_btn,
.satz-2 .qmn_quiz_container .qmn_btn:hover {
    background-color: #f5895e;
}
.satz-3 .qmn_quiz_container .qmn_btn,
.satz-3 .qmn_quiz_container .qmn_btn:hover {
    background-color: #f068a4;
}
.satz-4 .qmn_quiz_container .qmn_btn,
.satz-4 .qmn_quiz_container .qmn_btn:hover {
    background-color: #52b7ef;
}
.satz-5 .qmn_quiz_container .qmn_btn,
.satz-5 .qmn_quiz_container .qmn_btn:hover {
    background-color: #fdcf60;
}

.qsm-quiz-container.qmn_quiz_container .qmn_btn {
	/*background: rgba(72,92,140,0.5) !important;*/
    /*background: rgba(72,92,140,0.9) !important;*/
    /*background-color: #485c8c !important; auskommentiert, die Farbe wird oben gesetzt bei Satz-1 etc */
}
/* Button Hover */
.qsm-quiz-container.qmn_quiz_container .qmn_btn:hover {
	/*background: rgba(72,92,140,0.8) !important;*/
    /*background: rgba(72,92,140,0.9) !important;*/
    /* background-color: #485c8c !important; auskommentiert, die Farbe wird oben gesetzt bei Satz-1 etc */
}
/* Button Text */
.qmn_btn, .qsm-quiz-container.qmn_quiz_container .qmn_btn, .qsm-quiz-container.qmn_quiz_container .btn {
    font-family: "cy-text", sans-serif !important;
    font-weight: 700;
    font-size: 1.3rem !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 0px !important;
    border-style: none !important;
    padding: 14px 18px !important;
}


/* ÜBERSICHTSSEITE TRACKS & EXKURSIONEN -------------------------------------------------- */

.sitemap-satz-5 p {
    background-color: rgba(72,92,140,0.2);
    padding: 10px 15px !important;
}
.sitemap-satz-1-exkurs p, .sitemap-satz-1-exkurs a,
.sitemap-satz-2-exkurs p, .sitemap-satz-2-exkurs a,
.sitemap-satz-3-exkurs p, .sitemap-satz-3-exkurs a,
.sitemap-satz-4-exkurs p, .sitemap-satz-4-exkurs a,
.sitemap-satz-5-exkurs p, .sitemap-satz-5-exkurs a {
    color: #161b26 !important;
    line-height: 1.4rem;
}

/* Satz 1 */
.sitemap-satz-1 a {
    color: #5dbd94 !important;
}
.sitemap-satz-1-exkurs p {
    background-color: rgba(104,188,152,1);
    padding: 10px 15px !important;
}
/* Satz 2 */
.sitemap-satz-2 a {
    color: #f5895e !important;
}
.sitemap-satz-2-exkurs p {
    background-color: rgba(245,137,94,1);
    padding: 10px 15px !important;
}
/* Satz 3 */
.sitemap-satz-3 a {
    color: #f068a4 !important;
}
.sitemap-satz-3-exkurs p {
    background-color: rgba(240,104,164,1);
    padding: 10px 15px !important;
}
/* Satz 4 */
.sitemap-satz-4 a {
    color: #52b7ef !important;
}
.sitemap-satz-4-exkurs p {
    background-color: rgba(82,183,239,1);
    padding: 10px 15px !important;
}
/* Satz 5 */
.sitemap-satz-5 a {
    color: #fdcf60;
}
.sitemap-satz-5-exkurs p {
    background-color: rgba(253,207,96,1);
    padding: 10px 15px !important;
}

/* HOME – Teaser 5 Sätze: Spaltigkeit und Gutter Width -------------------------------------------------- */

/* Desktop */
@media only screen and (min-width: 981px) {
    /* Gutter width */
	.row-home-saetze .et_pb_column {
		--num-cols: 5;
		--gutter-width: 1%;
	}
	.row-home-saetze .et_pb_column:not(.et-last-child)  {
		margin-right: var(--gutter-width) !important;
	}
	.row-home-saetze .et_pb_column  {
		width: calc((100% - (var(--gutter-width) * (var(--num-cols) - 1))) / var(--num-cols)) !important;
	}
}

/* Tablet: 3 COL */
@media only screen and (max-width: 980px) {
    .row-home-saetze .et_pb_column {
        width: 31.33% !important;
        clear: none !important;
        /* Gutter width */
	    --num-cols: 3;
	    --gutter-width: 1%;
    }
    .row-home-saetze .et_pb_column:not(.et-last-child) {
	    margin-right: var(--gutter-width) !important;
    }
    
    /* bei 3 Spalten hat die letzte Spalte keine Margin, damit ist sie noch in der Zeile, sonst bricht es um */
    .row-home-saetze .et_pb_column:nth-child(3n) {
       margin-right: 0 !important;
    }
    
    /* Margin wieder geben */
    .row-home-saetze .et_pb_column.et-last-child {
        margin-bottom: 30px;
    }
    
    .row-home-saetze .et_pb_column  {
	    width: calc((100% - (var(--gutter-width) * (var(--num-cols) - 1))) / var(--num-cols)) !important;
    }
}

/* Large Mobile: 2 COL */
@media only screen and (max-width: 767px) {
    .row-home-saetze .et_pb_column {
        width: 49% !important;
        clear: none !important;
        /* Gutter width */
	    --num-cols: 2;
	    --gutter-width: 1%;
    }
    .row-home-saetze .et_pb_column:not(.et-last-child)  {
	    margin-right: var(--gutter-width) !important;
    }
        /* bei 2 Spalten hat die letzte Spalte keine Margin, damit ist sie noch in der Zeile, sonst bricht es um */
    .row-home-saetze .et_pb_column:nth-child(2n) {
       margin-right: 0 !important;
    }
    
    .row-home-saetze .et_pb_column  {
	    width: calc((100% - (var(--gutter-width) * (var(--num-cols) - 1))) / var(--num-cols)) !important;
    }
}

/* Mobile: 1 COL */
@media only screen and (max-width: 479px) {
    .row-home-saetze .et_pb_column {
        width: 100% !important;
        clear: none !important;
    }
}

/* INFOSEITEN mit hellem BG -------------------------------------------------- */

.bg-hell {
    background-color: #fffadd !important;
    /*background-color: #f2ecd2 !important;*/
}

.link-dark a {
    color: #161b26;
}


/* DIVI MODULES -------------------------------------------------- */