/*
Theme Name: Enfold Child 5
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/
/*Add your own styles here:*//* open-sans-300 - latin */


:root{
--color-dark:#205751;
--color-light:#829f9c;
--color-white:#ffffff;

--headline-dark:#ffffff;
--headline-light:#ffffff;
--headline-white:#666666;
}







@font-face {
  font-display: swap;
  font-family: 'Opencare';
  font-style: normal;
  font-weight: 300;
  src: 
  url('./fonts/Opencare.ttf') format('truetype'); 
}
@font-face {
  font-display: swap;
  font-family: 'Bell MT';
  font-style: normal;
  font-weight: 300;
  src: 
  url('./fonts/Bell MT Regular.woff2') format('woff2'); 
}
@font-face {
  font-display: swap;
  font-family: 'Jaceline';
  font-style: normal;
  font-weight: 300;
  src: 
  url('./fonts/Jaceline.ttf') format('truetype'); 
}
@font-face {
  font-display: swap;
  font-family: 'Eyesome Script';


  src: 
  url('./fonts/eyesome-duo-script.woff2') format('woff2'); 
}
.logo-icon{
width:80px;
height:80px;
/*background-color:currentColor!important;*/
mask-size:contain;
mask-repeat:no-repeat;
mask-position:center;
-webkit-mask-size:contain;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
margin:0 auto 24px auto!important;
text-align:center;
display:block;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;


    /* Hier den Pfad zum Standard-Icon einfügen */

    -webkit-mask-image: url("/wp-content/uploads/icon-color-universe.svg");
}
@font-face {
  font-display: swap; 
  font-family: 'Licorice';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/licorice-v8-latin-regular.woff2') format('woff2'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/open-sans-v44-latin-300.ttf') format('truetype'); 
}

@font-face {
  font-display: swap; 
  font-family: 'BlackSingature';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/BlackSingature.ttf') format('truetype'); 
}
@font-face {
  font-display: swap; 
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300; /*  JETZT CORREKT: Sagt dem Browser, dass dies die dünne Light-Schrift ist */
  src: url('./fonts/open-sans-v44-latin-300.ttf') format('truetype'); 
}

/* ==========================================================
   ✨ GEMEINSAMES ICON-FUNDAMENT (H1, H2 und Spruch)
   ========================================================== */
.spruch:before,
h1:before,
h2:before {
    content: "";
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto 18px auto !important;
    background-color: currentColor; /* Standard-Farbe über die Schrift */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url("/wp-content/uploads/icon-color.svg");
    -webkit-mask-image: url("/wp-content/uploads/icon-color.svg");
    transition: background-image 0.4s ease-in-out, background-color 0.4s ease-in-out !important;
}
.spruch:before,
h1:before,
h2:before {
    content: "";
    width: 80px;
    height: 80px;
}
/* ==========================================================
   🌿 GRÜN: Standard-Grafik laden
   ========================================================== */

/* ==========================================================
   🔮 BLAU: Universum-Grafik + ECHTES GOLD erzwingen
   ========================================================== */
.style-green h1:before,
.style-green h2:before {
    mask-image: url("/wp-content/uploads/icon-color.svg");
    -webkit-mask-image: url("/wp-content/uploads/icon-color.svg")
}
/* Für die Karte hebeln wir das weiße currentColor mit edlem Gold-Verlauf aus: */
.style-green .spruch:before {
  mask-image: url("/wp-content/uploads/icon-color.svg");
    -webkit-mask-image: url("/wp-content/uploads/icon-color.svg");
     background-color: transparent !important;
    background-image:     background-color: transparent !important;
    background-image: linear-gradient(135deg, #B8860B 0%, #FFD700 30%, #FFF8DC 50%, #DAA520 70%, #8B6508 100%) !important;
}
/* ==========================================================
   🔮 BLAU: Universum-Grafik + ECHTES GOLD erzwingen
   ========================================================== */
.style-blue h1:before,
.style-blue h2:before {
    mask-image: url("/wp-content/uploads/icon-color-universe.svg");
    -webkit-mask-image: url("/wp-content/uploads/icon-color-universe.svg");
}
/* Für die Karte hebeln wir das weiße currentColor mit edlem Gold-Verlauf aus: */
.style-blue .spruch:before {
    mask-image: url("/wp-content/uploads/icon-color-universe.svg");
    -webkit-mask-image: url("/wp-content/uploads/icon-color-universe.svg");
      background-color: transparent !important;
    background-image:     background-color: transparent !important;
    background-image: linear-gradient(135deg, #B8860B 0%, #FFD700 30%, #FFF8DC 50%, #DAA520 70%, #8B6508 100%) !important;
}

/* ==========================================================
   🪨 BRAUN: Erd-Grafik + RECHTES BRONZE-GOLD erzwingen
   ========================================================== */
.style-brown h1:before,
.style-brown h2:before {
    mask-image: url("/wp-content/uploads/icon-color-earth.svg");
    -webkit-mask-image: url("/wp-content/uploads/icon-color-earth.svg");
}
/* Für die Karte hebeln wir das weiße currentColor mit Bronze-Verlauf aus: */
.style-brown .spruch:before {
    mask-image: url("/wp-content/uploads/icon-color-earth.svg");
    -webkit-mask-image: url("/wp-content/uploads/icon-color-earth.svg");
    background-color: transparent !important;
    background-image:     background-color: transparent !important;
    background-image: linear-gradient(135deg, #B8860B 0%, #FFD700 30%, #FFF8DC 50%, #DAA520 70%, #8B6508 100%) !important;
}

/* ==========================================================
   🍃 OLIV: Duft-Grafik + RECHTES SALBEI-SILBER erzwingen
   ========================================================== */
.style-olive h1:before,
.style-olive h2:before {
    mask-image: url("/wp-content/uploads/icon-color-fragrance.svg");
    -webkit-mask-image: url("/wp-content/uploads/icon-color-fragrance.svg");
}
/* Für die Karte hebeln wir das weiße currentColor mit Salbei-Silber-Verlauf aus: */
.style-olive .spruch:before {
    mask-image: url("/wp-content/uploads/icon-color-fragrance.svg");
    -webkit-mask-image: url("/wp-content/uploads/icon-color-fragrance.svg");
       background-color: transparent !important;
    background-image:     background-color: transparent !important;
    background-image: linear-gradient(135deg, #B8860B 0%, #FFD700 30%, #FFF8DC 50%, #DAA520 70%, #8B6508 100%) !important;
}
/* ==========================================================
   🍃 OLIV: Duft-Grafik + RECHTES SALBEI-SILBER erzwingen
   ========================================================== */
.style-custom h1:before,
.style-custom h2:before {
      mask-image: url("/wp-content/uploads/icon-color-universesvg") !important;
    -webkit-mask-image: url("/wp-content/icon-color-universe.svg") !important;
   /* background-color: var(--color-base) !important;*/
}
/* Für die Karte hebeln wir das weiße currentColor mit Salbei-Silber-Verlauf aus: */
.style-custom .spruch:before {
      mask-image: url("/wp-content/uploads/icon-color-universesvg") !important;
    -webkit-mask-image: url("/wp-content/uploads/icon-color-universe.svg") !important;
   /* background-color: var(--color-base) !important;*/
      background-color: transparent !important;
    background-image:     background-color: transparent !important;
    background-image: linear-gradient(135deg, #B8860B 0%, #FFD700 30%, #FFF8DC 50%, #DAA520 70%, #8B6508 100%) !important;
}
.no-icon h1:before,
.no-icon h2:before{
display:none;
}
.overlay-icon{
position:relative;
overflow:hidden;
}
.overlay-icon:after{
content:"";
display:inline-block;
width:350px;
height:350px;
opacity:0.1;
display: block;
position:absolute;
top:20px;
right:39%;
background-color: #fff;
mask-image: url("/wp-content/uploads/icon-color.svg");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url("/wp-content/uploads/icon-color.svg");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

#willkommen,
#therapieformen{
position:relative;
}
#therapieformen:after,
#willkommen:after{
position:absolute;
opacity:0.08;
right: -138px !important;
top: 50px !important;
width: 550px;
height: 550px;
}
#kontakt :after{
position:absolute;
opacity:0.08;
right: 104px !important;
top: 550px !important;
width: 550px;
height: 550px;
}
.style-green .overlay-icon:after{
mask-image:url("/wp-content/uploads/icon-color.svg");
-webkit-mask-image:url("/wp-content/uploads/icon-color.svg");
}
.style-blue .overlay-icon:after{
mask-image:url("/wp-content/uploads/icon-color-universe.svg");
-webkit-mask-image:url("/wp-content/uploads/icon-color-universe.svg");
}
.style-brown .overlay-icon:after{
mask-image:url("/wp-content/uploads/icon-color-earth.svg");
-webkit-mask-image:url("/wp-content/uploads/icon-color-earth.svg");
}
.style-olive .overlay-icon:after{
mask-image:url("/wp-content/uploads/icon-color-fragrance.svg");
-webkit-mask-image:url("/wp-content/uploads/icon-color-fragrance.svg");
}
#header .header-reading-progress.medium-bar{
background-color:var(--color-light)!important;	
}
.section-dark{
background-color:var(--color-dark);	
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
.section-light{
background-color:var(--color-light);	
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
.section-white{
background-color:var(--color-white);	
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
.main_color input[type='submit'],
.section-dark .avia-button{
background-color:var(--color-white);
color:var(--color-dark)!important;
}
.main_color input[type='submit']:hover,
.section-dark .avia-button:hover{
color:var(--color-dark);
background-color:var(--color-white);
}
.section-light .avia-button{
background-color:var(--color-white);
color:var(--color-dark);
}
.section-light .avia-button:hover{
color:var(--color-dark);
}
.karte-ziehen,
#top .main_color .avia-color-theme-color-highlight,
.section-white .avia-button{
background-color:var(--color-dark);
color:var(--color-white);
}
.karte-ziehen:hover,
.section-white .avia-button:hover{
color:var(--color-white);
}
.design-preview-bar{
padding:16px 6px;
margin-bottom:5px;
border-radius:8px;
background:rgba(0,0,0,0.05);
font-size:16px;
color:#666!important;
}
.design-preview-bar strong{
margin-right:6px;
color:#666!important;
}
.kontakt,
#resetDesignBtn,
#saveDesignBtn,
#screenshotBtn{
background-color:var(--color-dark);
color:var(--color-white);
}
#resetDesignBtn,
.kontakt,
.karte-ziehen,
#saveDesignBtn,
#screenshotBtn,
.main_color input[type='submit'],
.avia-button{
padding: 16px 24px!important;
font-size: 16px!important;
margin:10px auto;
min-width: 250px;
font-weight: 300!important;
text-transform: uppercase;
border: 0px !important;
border-radius:6px!important;
cursor:pointer;
text-align:center;

}
.konfigurator-angebot1
.karte-ziehen:hover,
.main_color input[type='submit']:hover,
.avia-button:hover{
opacity: 0.9;
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark .av-subheading p{
color:var(--headline-dark);	
}
.section-light h1,
.section-light h2,
.section-light h3,
.section-light .av-subheading p{
color:var(--headline-light);	
}
.section-white .av-subheading p{
color:var(--headline-white);	
}
.section-white h2,
.section-white h3{
color:var(--color-dark);	
}
body.style-brown .logo-name::before {
  content: "Wild Earth";
}
body.style-blue .logo-name::before {
  content: "Magic Universe";
}
body.style-green .logo-name::before {
  content: "Green Diamond";
}
body.style-olive .logo-name::before {
  content: "Mystic Garden";
}
body.style-brown{
--color-dark:#96826C;
--color-light:#C7BCAF;
--color-white:#fff;
transition:background-color 2s ease, color 2s ease,font-family 4s ease!important;
}
body.style-green{
--color-dark:#085E56;
--color-light:#9FBDBA;
transition:background-color 2s ease, color 2s ease,font-family 4s ease!important;
}
body.style-blue{
--color-dark:#073A48;
--color-light:#0D5A73;
transition:background-color 2s ease, color 2s ease,font-family 4s ease!important;
}
body.style-olive{
--color-dark:#618C30;
/*--color-light:#84BD43;*/
--color-light:#BFD4A9!important;
transition:background-color 2s ease, color 2s ease,font-family 4s ease!important;
}
.socket_color,
.header_color .container_wrap_meta{
background:var(--color-dark);
}
#font-switcher{
padding:5px 5px;
border-radius:6px;
border:1px solid #ddd;
background:white;
font-size: 22px!important;
color: #666!important;
}
#top .main_color select {
border-color: #666;
background-color: #fff;
color: #666;
font-size: 20px;
}
body.font1 h1,
body.font1 h2,
body.font1 .zitat p strong,
body.font1 .overlay-text,
body.font1 .overlay-text-dark{
font-family:"Licorice", serif;
text-transform: none!important;
font-size: 72px;
font-weight:300;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font1 .overlay-text,
body.font1 .overlay-text-dark{
font-size: 160px!important;
}
body.font2 h1,
body.font2 h2,
body.font2 .zitat p strong,
body.font2 .overlay-text,
body.font2 .overlay-text-dark{
font-family:"BlackSingature", serif;
text-transform: none!important;
font-size: 120px;
font-weight: 300;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font2 .overlay-text,
body.font2 .overlay-text-dark{
font-size: 250px!important;
}
body.font3 h1,
body.font3 h2,
body.font3 .zitat p strong,
body.font3 .overlay-text,
body.font3 .overlay-text-dark{
font-family:"Eyesome Script", serif;
text-transform: none!important;
font-size: 60px;
font-weight: 300;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font3 .overlay-text,
body.font3 .overlay-text-dark{
font-size: 160px!important;
}
body.font4 h1,
body.font4 h2,
body.font4 .zitat p strong,
body.font4 .overlay-text,
body.font4 .overlay-text-dark{
font-family:"Jaceline", serif;
text-transform: none!important;
font-size: 130px;
font-weight: 300;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font4 .overlay-text,
body.font4 .overlay-text-dark{
font-size: 330px!important;
}
body.font5 h1,
body.font5 h2,
body.font5 .zitat p strong,
body.font5 .overlay-text,
body.font5 .overlay-text-dark{
font-family:"Opencare", serif;
text-transform: none!important;
font-size: 80px;
font-weight: 300;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font5 .overlay-text,
body.font5 .overlay-text-dark{
font-size: 200px!important;
}
body.font6 h1,
body.font6 h2,
body.font6 .zitat p strong,
body.font6 .overlay-text,
body.font6 .overlay-text-dark{
font-family:"Open Sans", serif;
font-size: 48px!important;
font-weight:300!important;
text-transform:uppercase!important;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font6 .overlay-text,
body.font6 .overlay-text-dark{
font-size: 100px!important;
}
body.font7 h1,
body.font7 h2,
body.font7 .zitat p strong,
body.font7 .overlay-text,
body.font7 .overlay-text-dark{
font-family:"Bell MT", serif;
font-size: 48px;
font-weight: 300;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font7 .overlay-text,
body.font7 .overlay-text-dark{
font-size: 110px!important;
}
body.font8 h1,
body.font8 h2,
body.font8 .zitat p strong,
body.font8 .overlay-text,
body.font8 .overlay-text-dark{
font-family:"Open Sans", serif;
font-size: 48px;
font-weight: 700!important;
text-transform:uppercase!important;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font8 .overlay-text,
body.font8 .overlay-text-dark{
font-size: 120px!important;
}
h1,h2{
font-family:"Licorice", serif;

text-transform: none!important;
font-size: 80px;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
h3{
font-family:"Open Sans", serif;
font-weight: 300;
text-transform: uppercase;
font-size: 28px;	
}
.av-subheading p{
font-weight: 300;
font-size:24px;	
margin:18px 0 0 0!important;
}
body{
font-family:"Open Sans", sans-serif;
font-weight: 300;
font-size:18px;
}
.design-hint{
font-size:17px;
margin-bottom:10px;
color:#666;
}
#design-switcher{
position:fixed;
right:20px;
top:250px;
z-index:99999999999999999999999999999;
background:white;
padding:14px;
border-radius:6px;
box-shadow:0 6px 20px rgba(0,0,0,0.15);
display:flex;
flex-direction:column;
gap:10px;
}
#design-switcher h3{
color:#666;
}
.color-switch{
display:flex;
gap:18px;
margin:0 0 18px 0;
}
.color-dot{
width:28px;
height:28px;
border-radius:50%;
cursor:pointer;
box-shadow:0 0 0 1px #ddd;
z-index:9999999999999999999999999999999999;
}
.color-dot:hover{
transform:scale(1.2);
}
.color-dot.active{
transform: scale(1.25);
box-shadow: 0 0 0 3px white, 0 0 0 5px #333;
}
.green{background:#085E56;}
.blue{background:#1B4857;}
.brown{background:#AF9E8B;}
.olive{background:#618C30;}

#font-switcher{
padding:6px;
border-radius:6px;
border:1px solid #ddd;
font-size:13px;
}
.avia-caption-content p{
font-size:28px;
line-height:48px;
}
#top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea {
background-color: transparent!important;
color: #fff!important;
border-radius:3px;
border: 2px solid #fff!important;
padding: 16px;
font-size:18px;
}
#top label{
color: #fff!important;
}
.wpcf7 form .wpcf7-response-output {
color: #fff !important;
}
.zitat p{
font-family:Open Sans;
font-size:28px!important;
font-weight:300;
line-height:100px;
}
.zitat p strong{
font-family:Licorice;
font-size:64px;
font-weight:300!important;
}
p{
font-family:Open Sans;
font-size:18px;
font-weight:300;
line-height:28px;
}
.site-logo{
display:flex;
align-items:center;
gap:12px;
margin:0 auto;
text-align:center;
display:block;
}
.logo-text{
display:flex;
flex-direction:column;
line-height:1.1;
}
.logo-name{
font-family:var(--font-heading);
font-size:44px;
font-weight:300;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
.logo-subline{
font-family:'Open Sans', sans-serif;
font-size:18px;
opacity:1;
color:#666!important;
margin:12px 0 24px 0;
}
/* Template-Farben für die Designs */
body.style-green { --template-color: #085E56; }   /* Green Diamond */
body.style-blue  { --template-color: #073A48; }   /* Magic Universe */
body.style-brown { --template-color: #96826C; }   /* Wild Earth */
body.style-olive { --template-color: #618C30; }   /* Mystic Garden */

.iconlist-char {
margin:0 0 0 -15px!important;
display: inline-block;
width: 40px;
height: 40px;
mask-image: url('/wp-content/uploads/icon-color-universe.svg'); /* dein Icon */
mask-size: cover;
mask-position: center;
mask-repeat: no-repeat;
-webkit-mask-image: url('/wp-content/uploads/icon-color-universe.svg');
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
background-color: var(--template-color); /* nimmt die Template-Farbe */
vertical-align: middle;
margin-right: 0.5em; /* Abstand zum Text */
transition: background-color 0.3s ease;
}
#top .av-iconlist-small .iconlist_icon{
color:transparent!important;
}
.section-light .iconlist-char ,
.section-dark .iconlist-char {
background-color: #ffffff !important;
}
.section-white .iconlist-char {
background-color: var(--template-color);
}
.html_top_nav_header.html_large .av-logo-container {
height: 0;
}
.style-green .iconlist-char,
.style-green .logo-icon{
mask-image:url("/wp-content/uploads/icon-color.svg");
-webkit-mask-image:url("/wp-content/uploads/icon-color.svg");
}
.style-blue .iconlist-char,
.style-blue .logo-icon{
mask-image:url("/wp-content/uploads/icon-color-universe.svg");
-webkit-mask-image:url("/wp-content/uploads/icon-color-universe.svg");
}
.style-brown .iconlist-char,
.style-brown .logo-icon{
mask-image:url("/wp-content/uploads/icon-color-earth.svg");
-webkit-mask-image:url("/wp-content/uploads/icon-color-earth.svg");
}
.style-olive .iconlist-char,
.style-olive .logo-icon{
mask-image:url("/wp-content/uploads/icon-color-fragrance.svg");
-webkit-mask-image:url("/wp-content/uploads/icon-color-fragrance.svg");
}
.style-green .site-logo{
color:#085E56;
}
.style-blue .site-logo{
color:#073A48;
}
.style-brown .site-logo{
color:#AF9E8B;
}
.style-olive .site-logo{
color:#618C30;
}
body.font1 .highlight,
body.font1 .logo-name{
font-family:"Licorice"!important;
font-size: 64px;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font2 .highlight,
body.font2 .logo-name{
font-family:"BlackSingature"!important;
font-size: 106px;
margin: 48px 0 24px 0;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font3 .highlight,
body.font3 .logo-name{
font-family:"Eyesome Script"!important;
font-size: 48px;
margin: 48px 0 24px 0;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font4 .highlight,
body.font4 .logo-name {
font-family: "Jaceline" !important;
font-size: 118px;
margin: 48px 0 24px 0;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font5 .highlight,
body.font5 .logo-name{
font-family:"Opencare"!important;
font-size:66px;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font6 .highlight,
body.font6 .logo-name{
font-family:"Open Sans"!important;
font-size: 39px;
text-transform: uppercase;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font7 .highlight,
body.font7 .logo-name{
font-family:"Bell MT"!important;
text-transform: uppercase;
font-size: 44px;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
body.font8 .highlight,
body.font8 .logo-name{
font-family:"Open Sans"!important;
font-size: 39px;
text-transform: uppercase;
font-weight:600;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
.logo-name{
font-family:inherit;
transition:background-color 4s ease, color 2s ease,font-family 4s ease!important;
}
.avia-menu-text{
font-size: 20px;
font-weight: 300;
text-transform: uppercase;
}
.main_color {
border-color:transparent!important;
border:0px!important;
}
.header_color .phone-info,
#top .header_color .sub_menu ul li,
#top .header_color .sub_menu ul li a{
color:#fff!important;
font-size:16px;
font-weight:300;
text-transform:uppercase;
}
body,
h1,
h2,
h3,
p,
.logo-icon,
.section-dark.
.section-light,
.section-white {
transition: 
background-color 0.6s ease,
color 0.6s ease,
font-family 0.4s ease!important;
}
.overlay-text{
position:absolute;
top:20%;
left:20%;
font-size:90px!important;
font-weight:700;
color:rgba(0,0,0,0.02);
}
.overlay-text-dark{
position:absolute;
bottom:20px;
left:0px;
font-size:120px!important;
font-weight:300;
color:rgba(255,255,255,0.06)!important;
}
/* ===============================
DESIGN SWITCHER PANEL
================================ */

#design-switcher{
position:fixed;
top:0;
right:0;
width:320px;
height:100%;
background:rgba(255,255,255,0.95);
backdrop-filter:blur(10px);
box-shadow:-10px 0 30px rgba(0,0,0,0.15);
padding:30px 20px;
z-index:9999;
overflow:auto;
transition:transform .35s ease;
}
/* geschlossen */
#design-switcher.minimized{
  transform: translateX(260px); /* Switcher nach rechts verschieben */
}
/* ===============================
SCHLIESSEN BUTTON
================================ */
#switcher-close{
position:absolute;
top:12px;
right:12px;
border:none;
background:none;
font-size:20px;
cursor:pointer;
opacity:.7;
}
#switcher-close:hover{
opacity:1;
}
/* ===============================
KONFIGURATOR BUTTON (DESKTOP)
================================ */
/* ===============================
TITEL
================================ */
#design-switcher h3{
font-size:20px;
margin-bottom:10px;
}
/* ===============================
FARBWAHL
================================ */
.color-switch{
display:flex;
gap:10px;
margin:20px 0;
}
.color-dot{
width:22px;
height:22px;
border-radius:50%;
cursor:pointer;
border:2px solid transparent;
}
.color-dot.active{
border-color:#000;
}
/* Farben */
.color-dot.green{background:#085E56;}
.color-dot.blue{background:#073A48;}
.color-dot.brown{background:#96826C;}
.color-dot.olive{background:#618C30;}
/* ===============================
FONT SWITCHER
================================ */
#font-switcher{
width:100%;
padding:8px;
margin-bottom:20px;
}
/* ===============================
BUTTONS
================================ */
#switcher-icon{
font-size:48px!important;
}
#switcher-title{
font-size: 20px;
font-weight: 600;
vertical-align:top;
}
#top #header .mega_menu_title a {
color: #666!important;
font-size: 18px;
line-height: 1.1em;
padding: 0;
margin: 0;
background: transparent;
border: none;
font-weight: 300!important;
}
#top #header .mega_menu_title a:hover{
color:#444!important;
text-decoration:none;
}
.content, .sidebar {
padding-top: 16px;
padding-bottom: 16px;
}
.avia-section {
padding: 50px 0;
}
.flex_cell{
padding: 50px;
}
/*
#karte{
background-color:var(--color-dark);	
color:white;
padding:20px;
border-radius:20px;
text-align:center;
font-family:'Open Sans', sans-serif;
width:254px;
height:355px;
margin:50px auto;
}

.karte-ziehen{
margin:0px auto;
display: block;
}
#karte.overlay-icon:after{
right: 6% !important;
widtH: 220px;
height: 220px;
top: 20%;
}
p.spruch{
font-size: 28px;
line-height: 68px;
margin: 0px;
}
.highlight{
font-size:1.4em;
font-family:var(--headline-dark);	
}
*/

#karte {
  color: white;
  border-radius: 10px;
  font-family: 'Open Sans', sans-serif;
  width: 850px; /* Breite erhöht, da wir jetzt zwei Hälften haben */
  height: 450px;
  margin: 50px auto;
  display: flex; /* Teilt links und rechts auf */
  overflow: hidden; /* Sorgt dafür, dass die runden Ecken das Bild sauber abschneiden */
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Linke Hälfte: Das Bild */
.karte-bild-links {
  width: 50%;
  height: 100%;
  background-image: var(--karten-bild, url('https://grafikspiegel.de')); /* Standard-Bild, falls CSS-Variable noch leer ist */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.4s ease-in-out;
}

/* Rechte Hälfte: Der Text auf Theme-Farbe */
.karte-text-rechts {
  width: 50%;
  height: 100%;
  background-color: var(--color-dark); /* Nimmt die aktuelle Theme-Farbe */
  padding: 30px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

.karte-ziehen {
  margin: 0px auto;
  display: block;
}

/* Dein Overlay-Icon im Hintergrund (wird jetzt auf die rechte Text-Hälfte beschränkt) */
.karte-text-rechts::after {
  content: "";
  position: absolute;
  right: 6% !important;
  width: 300px;
  height: 150px;
  top: 20%;
  opacity: 0.08; /* Dezenter Hintergrund-Schleier */
  background-color: #fff;
  mask-image: url("https://grafikspiegel.de");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("https://grafikspiegel.de");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

p.spruch {
    font-size: 24px;
    margin: 0px;
    z-index: 2;
    line-height: 48px;
}

.highlight {
  font-size: 1.3em;
  font-family: var(--headline-dark); 
  display: block;
  margin-top: 5px;
}
#design-switcher,
#switcher-header{
cursor:pointer!important;
}
img.wp-smiley, img.emoji {
height: 0.7em !important;
width: 0.7em !important;
}
/* BASIS RESET FÜR ALLE BILDER IN ENFOLD */
.avia-image-container-inner, 
.avia-image-container-inner img, 
.avia-image-container-inner:after {
    transition: all 0.4s ease-in-out;
    overflow: hidden !important;
}

/* ECKIG */
body.shape-square .avia-image-container-inner,
body.shape-square .avia-image-container-inner img,
body.shape-square .avia-image-container-inner:after {
    border-radius: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* RUND */
body.shape-round .avia-image-container-inner,
body.shape-round .avia-image-container-inner img,
body.shape-round .avia-image-container-inner:after {
    border-radius: 50% !important;
}

/* BLOB 1 */
body.shape-blob .avia-image-container-inner,
body.shape-blob .avia-image-container-inner img,
body.shape-blob .avia-image-container-inner:after {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
}

/* BLOB 2 */
body.shape-blob2 .avia-image-container-inner,
body.shape-blob2 .avia-image-container-inner img,
body.shape-blob2 .avia-image-container-inner:after {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% !important;
}

/* SPLASH / PINSEL (Mit Invert-Fix für deine Datei) */
body.shape-pinsel .avia-image-container-inner,
body.shape-pinsel .avia-image-container-inner img,
body.shape-pinsel .avia-image-container-inner:after {
    -webkit-mask-image: url('/brush.svg') !important;
    mask-image: url('/brush.svg') !important;
    -webkit-mask-size: cover !important;
    mask-size: cover !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    /* Da deine Grafik weiß/transparent ist, nutzen wir mask-composite zum Invertieren */
    -webkit-mask-composite: destination-out; 
    mask-composite: exclude;
}
body.shape-klecks .avia-image-container-inner,
body.shape-klecks .avia-image-container-inner img,
body.shape-klecks .avia-image-container-inner:after {
    -webkit-mask-image: url('/splash.svg') !important;
    mask-image: url('/splash.svg') !important;
    -webkit-mask-size: cover !important;
    mask-size: cover !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    /* Da deine Grafik weiß/transparent ist, nutzen wir mask-composite zum Invertieren */
    -webkit-mask-composite: destination-out; 
    mask-composite: exclude;
}
body.shape-bow  .avia-image-container-inner,
body.shape-bow .avia-image-container-inner img,
body.shape-bow .avia-image-container-inner:after
{
    -webkit-mask-image: url('/bow.svg') !important;
    mask-image: url('/bow.svg') !important;
    -webkit-mask-size: cover !important;
    mask-size: cover !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    /* Da deine Grafik weiß/transparent ist, nutzen wir mask-composite zum Invertieren */
    -webkit-mask-composite: destination-out; 
    mask-composite: exclude;
}
.kontaktinfo-mobile {
  display: none;
}


/* Erzwinger für das Icon bei Custom-Farben */

body.style-custom .logo-icon,
body.style-custom h1:before, 
body.style-custom h2:before,
body.style-custom .overlay-icon:after {
    mask-image: url("/wp-content/uploads/icon-color-universe.svg") !important;
    -webkit-mask-image: url("/wp-content/uploads/icon-color-universe.svg") !important;
   /* background-color: var(--color-base) !important;*/
}

/* Falls der Logo-Name auch bei Custom-Farben erscheinen soll */
body.style-custom {
  --color-dark: #205751;
  --color-light: #829f9c;
}
body.style-custom .logo-name::before {
  content: "Seelenwanderin";

}
body.style-custom .avia_codeblock.logodesign .logo-name::before,
body.style-custom .avia_codeblock.logodesign .logo-icon {
  color: var(--color-dark)!important;

}
/* Optional: Damit man im Dropdown schon sieht, wie die Schrift aussieht */
#font-switcher option[value="font1"] { font-family: 'Licorice'; }
#font-switcher option[value="font2"] { font-family: 'BlackSingature'; }
#font-switcher option[value="font3"] { font-family: 'Eyesome Script'; }
#font-switcher option[value="font4"] { font-family: 'Jaceline'; }
#font-switcher option[value="font5"] { font-family: 'Opencare'; }
#font-switcher option[value="font6"] { font-family: 'Open Sans'; }
#font-switcher option[value="font7"] { font-family: 'Bell MT'; }
#font-switcher option[value="font8"] { font-family: 'Open Sans Bold'; }
/* Erwirkt den edlen Gold-Look nur, wenn der blaue Stil aktiv ist */
.logo-icon {
    background-color: transparent !important; /* Deaktiviert die Template-Farbe */
    background-image: linear-gradient(135deg, #B8860B 0%, #FFD700 30%, #FFF8DC 50%, #DAA520 70%, #8B6508 100%) !important; /* Schaltet echten Goldglanz ein */
}

/* Falls Sie das goldene Feder-Icon für die Überschriften bei Blau ebenfalls erzwingen wollen: */
h1:before,
h2:before {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #B8860B 0%, #FFD700 30%, #FFF8DC 50%, #DAA520 70%, #8B6508 100%) !important;
}
h1,h2,h3 {

   hyphens: auto;              /* Aktiviert die automatische Silbentrennung */
  -webkit-hyphens: auto;      /* Safari Support */
  overflow-wrap: break-word;  /* Fallback für Wörter ohne Trennungsregeln */
}
.special_amp{
	color:inherit!important;
  font-family: inherit !important; /* Übernimmt exakt die Enfold-Schriftart */
  font-size: inherit !important;   /* Übernimmt exakt die Enfold-Schriftgröße */
  font-weight: inherit !important; /* Verhindert, dass Fettschrift verloren geht */
  
  font-style: inherit!important;              /* Macht das & elegant kursiv */
  white-space: nowrap;             /* Verhindert einsame &-Zeichen am Zeilenende */
  display: inline-block;           /* Erlaubt sauberes Rendering auf Mobilgeräten */
}
/* Einheitliche Porträtbilder */

.portrait-rund {
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.portrait-rund .avia-image-container-inner,
.portrait-rund .avia_image {
    width: 100% !important;
    max-width: 300px !important;
}

.portrait-rund img {
    width: 300px !important;
    height: 300px !important;
    max-width: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}
/* Mobil-Optimierung: Untereinander statt nebeneinander auf Smartphones */
@media (max-width: 767px) {
  #karte {
    width: 350px;
    height: auto;
    flex-direction: column;
  }
  .karte-bild-links {
    width: 100%;
    height: 200px;
  }
  .karte-text-rechts {
    width: 100%;
    height: auto;
    padding: 40px 20px;
  }
}
/* ===============================
MOBILE VERSION
================================ */
@media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive .logo img {
display:none!important;
}
.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
height:0px;
}

}
@media (max-width:768px){
.responsive .logo img, .responsive .logo svg,
#switcher-header p{
	
display:none!important;
}
.kontaktinfo-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.textspirit,
.kontaktinfo{
	display:none;
}
#design-switcher{
position:fixed;
bottom:65px;
left:0;
right:0;
top:auto;
width:100%;
height:auto;
padding:20px;
transform:translateY(100%);
transition:transform .35s ease;
}
#design-switcher.active{
transform:translateY(0);
bottom:0px;
}
/* minimiert = unten versteckt */
#design-switcher.minimized{
transform:translateY(100%);
}
}