/*
Theme Name: KP&Z Template für Explora Weltreisen
Theme URI: http://kp-z.de/wordpressthemes/explora/
Author: Jan Pferdmenges, KP&Z Werbeagentur GmbH
Author URI: http://www.kp-z.de/team.php
Description: EXPLORA Weltreise von Zughansa 
Version: 0.1
License: commercial
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


:root {
    --color-primary: #001b3f;
    --color-akzent: #7e1c73;
    --color-secondary: #c9a96e;
    --color-background: #f8f5ef;
	--color-text: #404040;
	--color-bg2: #ede8df;
	--color-lightgrey: #c0c0c0;
	--color-grey: #808080;
	--color-button: #ff8000;
	--color-button-hover: #A8569E;
	--color-hover: #FF8000;
	--color-line: #444;
	--color-shadow: #444;
    
    
    --bs-padding: 16px;
}





html {padding: 0; margin:0; height: 100%; background-color: white; }
body {padding: 0; margin: 0 auto;font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 17px; line-height: 1.5em; color: var(--color-text); width:100%;}
div, aside, section, body { box-sizing: border-box;}
a {text-decoration: underline; color: var(--color-primary); text-decoration-style: dotted; text-decoration-color: var(--color-primary);}
a:hover {text-decoration:underline; text-decoration-color: var(--color-primary);text-decoration-style:solid; }
section {padding-top: 150px; padding-bottom: 150px;}
h1,h2 {font-family: "Playfair Display", serif; color: var(--color-primary); font-size: 50px; font-weight: 400; line-height: 1.15em; position: relative;}
h1 {margin-top: 0;}
h3 {font-family: "Playfair Display", serif; color: var(--color-primary); font-size: 32px; font-weight: 400; margin-top: 25px; margin-bottom: 16px; position: relative; padding-bottom: 1.15em; text-align: center; line-height: 1.15em;}
h4 {font-size: 26px; font-weight: 600; text-align: left;}

header {margin-top: 100px;}

#Topline {
    width: 100%; height: 100px; position: fixed; z-index: 2; top: 0; left: 0; border-bottom: 1px solid var(--color-primary); background-color: var(--color-background); box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
        
    & > div {display: flex; justify-content: space-between; height: 100%; align-items: center;}
    
    .logo > img {width: auto; height: 70px; display: inline-block; margin-right: 15px; vertical-align: middle; }
    
    .titel {font-family: "Montserrat", sans-serif; color: var(--color-primary); font-size: 21px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.2em; text-align: center; line-height: 1.2em;}    
}


#Headerbild {position: relative;}
#Headerbild > img {display: block; width: 100%; height: auto;}
#Headerbild > div {position: absolute; bottom: -2vw; left: 0; width: 100%; }
#Headerbild > div > svg {display: block; fill: white;}
#Headerbild > span {display: flex; background-color: rgba(13,96,3,0.80); color: white; width: 220px; height: 220px; justify-content: center; align-items: center; border-radius: 50%; padding: 30px; position: absolute; right: calc(25vw - 110px); bottom: -40px; box-sizing: border-box; }
#Headerbild > span > div { text-align: center; font-size: 26px; font-family: 'Libre Caslon Text', serif; font-weight: 400; line-height: 1.2em; }



footer {font-size: 0.85rem; color: white; background-color: var(--color-akzent); padding-top: 150px; padding-bottom: 150px;}
footer .footerBlock {display: flex; justify-content: space-between; column-gap: 30px;}
footer .realFooter > div:first-child {display: flex; justify-content: space-between;}
footer .realFooter .footerAdresse {display: flex; flex-direction: column;}
footer .realFooter > div:last-child {display: flex; justify-content: flex-end; height: 15vw; align-items:center ; }
footer .realFooter aside ul.menu {margin:0 0 0 8px; padding:0; list-style: none;}
footer .realFooter aside ul.menu a {text-decoration: none; color: var(--color-text);}
footer .footerSocial {display: flex; justify-content: flex-end;}
footer .footerSocial > a {margin-left: 16px; display: block;}
footer .footerSocial > a > img {display: block; width: auto; height: 32px;}


#Kontakt {margin: 150px 0;}
.formElement {margin: 30px 0;}
.formElement label.formRequired::after {content: '*'; }
:is(.formElement.formElementText, .formElement.formElementTextarea,) .formField {border: 1px solid var(--color-grey); border-radius: 5px; padding: 0 5px 5px 5px; transition-duration: 300ms;}
:is(.formElement.formElementText, .formElement.formElementTextarea,) .formField label {position: absolute; color: var(--color-primary); font-size: 0.85rem;}
:is(.formElement.formElementText, .formElement.formElementTextarea,) .formField :is(input, textarea) {width: 100%; width: calc(100% - 5px); padding: 24px 0 0 0; font-family: "Fira Sans", serif; font-size: 1rem; border: unset; background-color: transparent;}
:is(.formElement.formElementText, .formElement.formElementTextarea,) .formField :is(input, textarea):focus {outline: none;}
:is(.formElement.formElementText, .formElement.formElementTextarea,):has(:focus) .formField {border: 3px solid var(--color-primary); background-color: var(--color-background);}
.formElement.formElementCheckbox label {display: inline; vertical-align: top; margin-left: 20px; position: relative;  }
.formElement.formElementCheckbox .formField {border:unset; display: flex; align-items: start;}
.formElement.formElementCheckbox input {opacity: 0.001;}
.formElement.formElementCheckbox label::before {content: url("images/checkboxOff.png"); position: absolute;left: -40px; top: -2px;}
.formElement.formElementCheckbox:has(input:focus) label::before {content: url("images/checkboxOffFocus.png");}
.formElement.formElementCheckbox:has(input:checked) label::before {content: url("images/checkboxOn.png");}
.formElement.formElementCheckbox:has(input:checked:focus) label::before {content: url("images/checkboxOnFocus.png");}
.formElement .formField label {display: block; }
.formElement:has(#FormElemBetreff) {display: none; }
.formDescription {display: none;}
.formError {color: red; padding-left: 35px; position: relative; margin-bottom: 2px;}
.formError::before {content: url("images/cancel.png"); position: absolute; left:0; top: 1px;}
:is(.formElement.formElementText, .formElement.formElementTextarea,):has(.formError) .formField {border-color:red;}
.formElement > div:has(#FormElemSubmit) {border: 1px solid var(--color-lightgrey); border-radius: 5px; padding: 5px; transition-duration: 300ms; display: inline-block;}
.formElement > div:has(#FormElemSubmit:focus) {border: 3px solid var(--color-primary); border-radius: 5px; padding: 3px;}
#FormElemSubmit {background-color: var(--color-button); color: white; border-radius: 4px; padding: 8px 25px; transition-duration: 300ms; border:none;}
#FormElemSubmit:hover {background-color: var(--color-button-hover); color: black;}


/* ── Overlay ── */
#JhpCookieBanner {
    display: none; position: fixed; inset: 0; z-index: 999999; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.4s ease;
    &.active { display: flex; opacity: 1;}
    .jhp-cookie-inner { 
        width: 100%; max-width: 680px; margin: 0 auto 2rem; background: #7e1c73; color: #ffffff; border-radius: 16px; padding: 2rem 2.2rem; box-shadow: 0 12px 40px rgba(126, 28, 115, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2); line-height: 1.6; text-align: center; animation: jhpSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .jhp-cookie-icon { font-size: 2rem; margin-bottom: 0.6rem;}
    .jhp-cookie-text { margin-bottom: 1.4rem; }
    .jhp-cookie-text a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s ease; }
    .jhp-cookie-text a:hover { opacity: 0.75; }
    .cookieButton {
        display: inline-block; background: #ffffff; color: #7e1c73; font-weight: 700; font-size: 15px; padding: 0.75rem 2.8rem; border-radius: 50px; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; user-select: none; letter-spacing: 0.02em;
        
        &:hover { transform: scale(1.04); box-shadow: 0 4px 18px rgba(255, 255, 255, 0.3); }   
        &:active { transform: scale(0.97);}
    }   
    
}



@keyframes jhpSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}







.container {max-width: 1400px; width: 100%; padding-left: 80px; padding-right: 80px; margin: 0 auto;  }

.bgBlue {background-color: var(--color-primary); color: white;
    h1, h2 {color: var(--color-bg2);}
}
.bgBeige {background-color: var(--color-bg2);}

.button {
    display: inline-block; padding: 3px 12px; border-radius: 5px; background-color: var(--color-akzent); color: white; text-decoration: none; border: 2px solid white; font-weight: 500; transition-duration: 300ms;
    &:hover {text-decoration: none; background-color: var(--color-button-hover);}
}

.secondaryFont {font-family: "Playfair Display", serif;}
.gesperrt {letter-spacing: 0.15em;}
.transition {transition-duration: 300ms;}
.aufzaehlen .kb-count-up-title {letter-spacing: 0.1em;}
.centerBullets > ul > li > span {padding-top: 3px;}
.zeitstrahlLinks {border-right: 3px solid var(--color-akzent); position: relative; margin-right: -1px;
    &::after {content: ' '; position: absolute; width: 20px; height: 20px; background-color: var(--color-akzent); border-radius: 10px; right: -12px; top: 50%;}
}
.zeitstrahlRechts {border-left: 3px solid var(--color-akzent); position: relative; margin-left: -2px;
    &::after {content: ' '; position: absolute; width: 20px; height: 20px; background-color: var(--color-akzent); border-radius: 10px; left: -12px; top: 50%;}
}
.boxBlau {
    background-color: var(--color-primary); color: white; border: 1px solid var(--color-secondary); transition: 300ms; position: relative;
    h1,h2,h3 {color: var(--color-secondary);}
    &::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--color-secondary), transparent); transform: scaleX(0);transform-origin: left; transition: transform 0.4s;
    }
    &:hover {opacity: 0.92;}
    &&:hover::before {transform: scaleX(1);}
    
}
.preisTabelle > table {width: 800px; margin: 15px auto 15px auto;}
.colorLila {color: var(--color-akzent)!important;}
.postionRelative {position: relative;}
.stoerer {
    background-color: var(--color-primary); color: white; position: absolute; width: 100px;height: 100px; display: flex; justify-content: center; flex-direction: column; border-radius: 50px; text-align: center; line-height: 1.1em; right:0; top:0; transform: translate(30%,-30%); box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
    p {margin:0;}
    p:first-child {font-family: "Playfair Display", serif; color: var(--color-secondary); font-size: 28px; font-weight: 400; }
    p:last-child {font-size: 0.85rem; text-transform: uppercase; margin-top: 10px; }
}
.noTextdecoration a{text-decoration: none; transition-duration: 300ms;
    &:hover {text-decoration: none; color: var(--color-akzent);}
}

/* Mittlere Geräte (Tablets) */
@media (max-width: 1023px) {
    .container {padding-left: 16px; padding-right: 16px;}
    
    
    .phone {display: none;}
    .noPhone {display: block;}
    
    h1, h2 {font-size: 36px;}
    h1::after, h2::after {transform: translateX(-50%) scale(0.7);}
    h3 {font-size: 24px; padding-bottom: 1.4em;}
    h3::after {transform: translateX(-50%) scale(0.6);}
    
    #Topline .menuDesktop {display: none;}
    #Topline .mobileMenu {display: block;}
}



/* Kleine Geräte (Mobiles) */
@media (max-width: 767px) { 
    .container {padding-left: 8px; padding-right: 8px;}
    body {font-size: 16px;}
    header {margin-top: 80px;}
    
    #Topline {height: 80px;}
    #Topline .logo img {width: 180px;}
    #Topline .mobileMenu > div:first-child > label > img {top: 20px;}
    
    #Headerbild > span { width: 160px; height: 160px; padding: 15px; bottom: -70px; right: calc(25vw - 80px);}
    #Headerbild > span > div { font-size: 18px;  }
    
    footer .subFooter > div { flex-direction: column;}
    footer .subFooter > div > div:first-child {justify-content: center; margin-bottom: 16px; }
    footer .subFooter > div > div:first-child > div { font-size: 1.2rem; }
    footer .subFooter > div > div:last-child { justify-content: center; }
    footer .realFooter > div:first-child {flex-wrap: wrap; justify-content: space-around;}
    footer .realFooter .footerAdresse {flex-direction: row; width: 100%; margin-bottom: 15px;align-items: center; justify-content: space-around;}
    
    
}

/* ── Responsive ── */
@media (max-width: 520px) {
    #JhpCookieBanner .jhp-cookie-inner {
        margin: 0 0.75rem 1rem;
        padding: 1.5rem 1.3rem;
        border-radius: 12px;
        font-size: 14px;
    }

    #JhpCookieBanner .cookieButton {
        width: 100%;
        padding: 0.85rem 1rem;
    }
}



/* Kleine Geräte (Phones) */
@media (max-width: 560px) { 
    .container {padding-left: 8px; padding-right: 8px;}
    footer .realFooter > div:first-child {flex-wrap: wrap; flex-direction: column;}
    footer .realFooter .footerAdresse {flex-direction: column;}
    footer .realFooter .footerAdresse > div{width: 100%;}

    h1 {font-size: 30px;}
}



/* Riesige geräte */
@media (min-width: 1920px) { 
#Headerbild > span {transform: scale(1.3); transform-origin: bottom;}

}