/* 
Theme Name: Strattura
Version: v.1.0
Description: Custom Theme for Strattura
Author: Roman Hospenthal, RHOdesign
Author URI: http://www.rhodesign.ch/
*/

@import 'css/reset.css';
@import 'css/grid.css';
@import 'css/plugins.css';
@import 'css/helpers.css';



/* ------------------------------------------------------------ *\
	Variables
\* ------------------------------------------------------------ */
:root {
/* Font sizes. */ 
--fontsize-xl: 4.0rem; 
--fontsize-lg: 2.8rem; 
--fontsize-md: 2rem;
--fontsize-sm: 1.6rem;
--fontsize-sm2: 1.4rem;
--fontsize-xs: 1.2rem;

/* Line heights. */
--line-height-sm: 1.2;
--line-height-md: 1.5;
--line-height-lg: 1.7;
    
/* Color styles */
--black: rgba(17, 17, 17, 1); /*#111;*/
--beige: rgba(208, 171, 131, 1); /*#D0AB83;*/
--grey: rgba(129, 122, 114, 1); /*#817A72;*/
--light--grey: rgba(226, 222, 219, 1); /*#E2DEDB;*/
--light--beige: rgba(247, 238, 228, 1); /*#F7EEE4;*/
--white: rgba(255, 255, 255, 1); /*#FFF;*/
}
@media (max-width: 767px) {
:root {
--fontsize-xl: 3.2rem; 
--fontsize-lg: 2.4rem; 
--fontsize-md: 1.6rem;
--fontsize-sm: 1.4rem; 
--fontsize-xs: 1.0rem;
}
}
@media (max-width: 575px) {
:root {
--fontsize-xl: 2.4rem; 
}
}




/* ------------------------------------------------------------ *\
    Fonts
\* ------------------------------------------------------------ */
/* fira-sans-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/fira-sans-v16-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/fira-sans-v16-latin-300.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* fira-sans-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/fira-sans-v16-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/fira-sans-v16-latin-300italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* fira-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/fira-sans-v16-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/fira-sans-v16-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* fira-sans-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/fira-sans-v16-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/fira-sans-v16-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* fira-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/fira-sans-v16-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/fira-sans-v16-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* fira-sans-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/fira-sans-v16-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/fira-sans-v16-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

	




/* ------------------------------------------------------------ *\
	Base
\* ------------------------------------------------------------ */
html{font-size:62.5%;}
body { min-width: 320px; background: var(--white); font-family:"Fira Sans", sans-serif; font-weight:300; font-size: var(--fontsize-sm); line-height: var(--line-height-md); color: var(--black); }

.lock-scroll {
    overflow: hidden; /* Verhindert das Scrollen */
    height: 100%; /* Stellt sicher, dass der Body die volle Höhe des Viewports einnimmt */
}

a { color: inherit; text-decoration: none; -webkit-transition: color .2s; -moz-transition: color .2s; -o-transition: color .2s; -ms-transition: color .2s; transition: color .2s; }
a:hover,
a[href^="tel"] { text-decoration: none; }
p,ul,ol,dl,hr,table,blockquote { margin-bottom: 1.5em; }







/* ------------------------------------------------------------ *\
	Wrapper
\* ------------------------------------------------------------ */
.wrapper {display: flex;flex-direction: column;min-height: 100vh; }
.main {z-index: 88888 !important; }

@media (max-width: 767px) {
.main {padding-top: 0px; }
}
@media (max-width: 575px) {
.main {padding-top: 0px; }
}



.container { padding-right:55px;padding-left:55px;margin-right:auto;margin-left:auto}
@media (max-width: 991px) {
.container { padding-right:40px;padding-left:40px;}
}
@media (max-width: 767px) {
.container { padding-right:30px;padding-left:30px;}
}
@media (max-width: 575px) {
.container { padding-right:16px;padding-left:16px;}
}

.inner {max-width: 1240px;}
.full {width: 100%; padding-right:0px;padding-left:0px;}

.container a {color: var(--beige); }
.container a:hover {color: var(--black);}

.textcenter {text-align: center;}
.textright { text-align: right; }
.relative {position: relative; }

small {font-size: 0.8em; line-height: 0.7em;}
strong { font-family:"Fira Sans", sans-serif; font-weight:700;}

.section {display: block; overflow: hidden; clear: both; position: relative; width: 100%; }
.section p:last-of-type { }

.section:first-of-type { }
.section:last-of-type { }







/* ------------------------------------------------------------ *\
	Margins
\* ------------------------------------------------------------ */
.abstand-kein { margin-bottom: 0px;}
.abstand-klein { margin-bottom: 30px;}
.abstand-mittel { margin-bottom: 60px;}
.abstand-gross { margin-bottom: 100px;}
@media (max-width: 991px) {
.abstand-kein { margin-bottom: 0px;}
.abstand-klein { margin-bottom: 25px;}
.abstand-mittel { margin-bottom: 50px;}
.abstand-gross { margin-bottom: 80px;}
}
@media (max-width: 575px) {
.abstand-mittel { margin-bottom: 40px;}
.abstand-gross { margin-bottom: 60px;}
}



/* ------------------------------------------------------------ *\
	Paddings
\* ------------------------------------------------------------ */
.padding-top-kein { padding-top: 0px;}
.padding-top-12 { padding-top: 12px;}
.padding-top-klein { padding-top: 30px;}
.padding-top-mittel { padding-top: 80px;}
.padding-top-gross { padding-top: 120px;}

.padding-bottom-kein { padding-bottom: 0px;}
.padding-bottom-12 { padding-bottom: 12px;}
.padding-bottom-klein { padding-bottom: 30px;}
.padding-bottom-mittel { padding-bottom: 80px;}
.padding-bottom-gross { padding-bottom: 120px;}

@media (max-width: 991px) {
.padding-top-klein { padding-top: 25px;}
.padding-top-mittel { padding-top: 48px;}
.padding-top-gross { padding-top: 80px;}
.padding-bottom-klein { padding-bottom: 25px;}
.padding-bottom-mittel { padding-bottom: 48px;}
.padding-bottom-gross { padding-bottom: 80px;}
}
@media (max-width: 575px) {
.padding-top-mittel { padding-top: 24px;}
.padding-top-gross { padding-top: 50px;}
.padding-bottom-mittel { padding-bottom: 24px;}
.padding-bottom-gross { padding-bottom: 50px;}
}



/* ------------------------------------------------------------ *\
	Hintergrundfarben
\* ------------------------------------------------------------ */
.weiss {background: #FFF}
.light-beige {background: #F7EEE4;}




/* ------------------------------------------------------------ *\
	Headings
\* ------------------------------------------------------------ */
h1,h2,h3,h4,h5,h6{margin-bottom:calc(1.5em/2);font-family:"Fira Sans", sans-serif;font-weight:700;}
h1{font-size: var(--fontsize-xl);line-height: var(--line-height-md);font-weight:700; letter-spacing: 0.05em}
h2{font-size: var(--fontsize-lg);line-height: var(--line-height-md); font-weight: 400}
h3{font-size: var(--fontsize-md);line-height: var(--line-height-md); font-weight: 400}
h4{font-size: var(--fontsize-sm);line-height: var(--line-height-md); font-weight: 400}
h5{font-size: var(--fontsize-md);line-height: var(--line-height-md);}
h6{font-size: var(--fontsize-sm); line-height: var(--line-height-md); margin-bottom: 1.5rem; }



/* ------------------------------------------------------------ *\
	Listen
\* ------------------------------------------------------------ */

.section-text ul{ list-style: none; padding:0;  margin:0 0 25px 0;  }
.section-text ul li{ padding-left: 1.3em; text-indent: -1em; padding-bottom: 5px   }
.section-text ul li:before { content: "\2013"; padding-right:0.5em; }

/*
.section-text ul{ list-style: none; padding:0;  margin:0 0 30px 0;  }
.section-text ul li{  padding-bottom: 10px; border-bottom: 1px solid #111 }
.section-text ul li + li{  padding-top: 10px; border-bottom: 1px solid #111 }
*/
.section-text ol { list-style: none; counter-reset: my-awesome-counter; margin:0 0 30px 0;}
.section-text ol li { counter-increment: my-awesome-counter; padding-bottom: 5px; }
.section-text ol li::before { content: counter(my-awesome-counter) ". ";  }








/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */

.header .header__bar{padding:0 0 10px; transition: all .4s ease-in-out;}
.header .header__bar-inner{display:flex;justify-content:flex-end;}

@media (max-width: 991px) {
.header .header__bar {display: none;}
}

@media (max-width: 767px) {
.header .header__bar-inner { padding-right: 1rem;}
}

/*
.sticky .header__bar{transform:scale(0); pointer-events:none;padding:0; opacity: 0}
*/


/* ------------------------------------------------------------ *\
	Nav Utilities
\* ------------------------------------------------------------ */
.nav-utilities{font-size: var(--fontsize-xs);font-weight:400;text-transform:uppercase;margin:-.1rem .8rem 0 0;}
.nav-utilities > ul{display:flex;list-style-type:none;padding:0;margin: 0}
.nav-utilities > ul > li + li{margin-left:2rem;}
.nav-utilities > ul > li > a{text-decoration:none;transition:color .2s, opacity .2s ease-in-out;}
.nav-utilities > ul > li:hover > a{color:#000;opacity:0.7;}



.header__bar-inner.js-cloned {display: none}
@media (max-width: 991px) {
.nav > ul{margin-bottom: 0;}
.header__bar-inner.js-cloned {display: block; padding: 0;flex-direction: column;width: 100%;max-width: 100%;}

.header__bar-inner.js-cloned .nav-utilities { margin: 4rem 0 3rem; }
.header__bar-inner.js-cloned .nav-utilities ul {
-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important;
    border-top: none;} 
.header__bar-inner.js-cloned .nav-utilities ul li{border-bottom: none} 
.header__bar-inner.js-cloned .nav-utilities ul li.wpml-ls-current-language a{color: var(--beige);}
}







/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */

.headcontainer { display: flex; align-items: center; justify-content: space-between; position: relative; transition: all .4s ease-in-out;}

.header{ padding-top: 15px; background: var(--light--beige); height: 96px; width: 100%; position: relative;box-sizing: border-box; 
transition: all .4s ease-in-out; z-index: 99990 !important;}

.logo {  

width: 183px; height: 32px; 
z-index: 3;
background-size: 100%; background-repeat: no-repeat; display: inline-block; vertical-align: middle; font-size: 0px;  -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s;}

.lang-de .logo {background-image: url(images/Strattura-Logo.svg); }
.lang-fr .logo {background-image: url(images/Strattura-Logo_fr.svg); } 

@media (max-width: 991px) {
.header {height: 64px; padding-top: 20px;}
.logo { width: 137px; height: 24px; } 
}













/* ****************************************************************************************************
			    		MENU
**************************************************************************************************** */

.header__nav { -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s;}

.nav ul {display: flex; margin-bottom: 0; padding: 0;}
.nav li{ position: relative;}
.nav li + li {margin-left: 80px}

.nav li a { 
font-size: var(--fontsize-sm2); 
line-height: var(--line-height-md);
color: var(--beige);
text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
margin-left: 0px;  
zoom: 1; 
text-decoration: none; 
padding: 0;  
-webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out;
}
.nav li a:hover {color: var(--grey) !important;}

.nav li.current-page-ancestor a {color: var(--grey)}
li.current-menu-parent >a, 
.current-menu-item >a {color: var(--grey) !important;}

.nav li.desktop-hidden {display: none}

/* Dropdown styles */
.nav .sub-menu {
margin-top: 20px;
position: absolute; background: var(--white); top: 100%;z-index: 99;  
padding: 12px 24px; 
zoom: 1; 
display: none;
margin-left: 0; /* margin-left auf 0 setzen */
left: 50%; /* Linke Kante des Submenus in die Mitte des Elternteils setzen */
transform: translateX(-50%); /* Verschiebt das Submenu um die Hälfte seiner Breite zurück */
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.25);
    z-index:2;
}
.nav .sub-menu::before {
content: "";
position: absolute;
top: -16px; /* Über dem Submenu platzieren */
left: 50%;
transform: translateX(-50%);
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #FFF; /* Farbe des Triangels */
z-index: 2;
}

.nav li:hover .sub-menu {  }

.nav .sub-menu li { width: 100%; white-space: nowrap;}
.nav .sub-menu li + li {margin-left: 0px}
.nav .sub-menu li a { 
font-size: var(--fontsize-sm); 
line-height: var(--line-height-md); 
color: var(--black);  
font-weight: 300; 
text-transform: none;  
padding: 5px 0; 
display: inline-block;
letter-spacing: 0;
}
.nav .sub-menu li a:hover {color: var(--grey) !important; background: transparent !important;}
.nav .sub-menu li.current-menu-item a {color: var(--grey) !important;}


/* Stellt sicher, dass nur der Link und das Dreieck in einer Zeile sind */
.menu-item-has-children { display: block; /* Flexbox nur für den inneren Bereich verwenden */
}

/* Nur der Link und das Dreieck sollen nebeneinander sein */
.menu-item-has-children > a,
.menu-item-has-children > .submenu-toggle { display: inline-flex; align-items: center;}

/* Korrekt positionieren: Das Dreieck bleibt direkt neben dem Link */
.submenu-toggle { cursor: pointer; margin-left: 35px; font-size: 11px; padding: 5px 0; transition: transform 0.3s ease;}

/* Dreieck dreht sich beim Öffnen */
.submenu-toggle.active { transform: rotate(180deg);}

/* Submenüs der dritten Ebene sollen unter dem Menüpunkt bleiben */
.sub-menu .sub-menu {
    position: relative;
    top: auto;
    left: 0;
    transform: none;
    display: none; /* Standardmäßig versteckt */
    margin-top: 5px; /* Abstand zum Menüpunkt */
box-shadow: none;
padding: 0 0 10px 0;
}
.sub-menu .sub-menu li {padding-left: 20px}
.sub-menu .sub-menu li a {font-weight: 300; text-transform: uppercase;}
.sub-menu .sub-menu::before {content: none; position: unset; transform: unset; border: none;}



@media (max-width: 991px){
.nav li.desktop-hidden {display: block}    
    
.header .header__nav{
position:fixed;right:0;top:0;display:block;width:100%;height:100%;
background-color: var(--white);
padding:140px 48px 0px 48px;z-index:2; overflow-x: hidden;overflow-y:auto;opacity:0;visibility:hidden;
-webkit-transition:all .2s ease;-o-transition:all .3s ease;transition:all .3s ease; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header .header__nav.nav--active{opacity:1;visibility:visible;}

.nav ul {
display: flex;
-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
margin-left:auto; 
padding: 0; 
overflow-y: auto; 
border-top: 1px solid var(--light--grey)
}
.nav li { border-bottom: 1px solid var(--light--grey)}
.nav li + li {margin-left: 0}
.nav li a{color: var(--black); display: block; padding: 15px 0 15px 15px; }
    

 
.nav li:hover .sub-menu { }

.nav .sub-menu {
margin-top: 0;
margin-bottom: 0;
padding: 10px 0;
position: unset;
z-index: 1;
box-shadow: unset;
left: unset; 
transform: unset;
border-top: none
}
    
.nav .sub-menu { display: none;}
    
.nav .sub-menu::before {
content: none;
position: unset;
transform: unset;
border-left: unset;
border-right: unset;
border-bottom: unset; 
} 
    
.nav .sub-menu li { border-bottom: none}  
.nav .sub-menu li a{ padding: 7px 0 7px 15px;}
    
.nav li.menu-item-has-children{ position: relative; overflow: hidden;}
.nav li.menu-item-has-children a{ width:85%;}


    
    .nav li.menu-item-has-children:before {
        content: "▼"; /* Unicode-Pfeil statt SVG */
        font-size: 11px;
        position: absolute;
        right: 5px;
        top: 0;
        padding: 15px;
        background-size: contain;
        background-repeat: no-repeat;
        transition: 0.3s transform;
    }

    .nav li.active::before, .nav ul li ul li.active::before {
        transform:  rotate(180deg);
    }
  
    
}

@media (max-width: 575px) {
.header .header__nav{ padding:140px 16px 0px 16px;}
}



.legal-nav-mobile {display: none}
@media (max-width: 991px){
.legal-nav-mobile {
    display: block;
}
.legal-nav-mobile ul {
display: flex;
-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
margin-left:auto; 
padding: 0; 
overflow-y: auto; 
text-align: right;
}
.legal-nav-mobile li {}
.legal-nav-mobile li + li {margin-left: 0}
.legal-nav-mobile li a{color: var(--black); display: block; padding: 10px 0 10px;
font-size: var(--fontsize-sm2); 
line-height: var(--line-height-md);
text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;    
}
}





/* ------------------------------------------------------------ *\
	Button Menu
\* ------------------------------------------------------------ */
.burgercontainer { display: none;  position: relative; right: 0; top: 0; 
-webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index: 3;}

.btn-menu { width: 25px; height: 15px; display: block; cursor: pointer; z-index: 3;
-webkit-transition: .2s ease;-moz-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease}
.btn-menu span{ background: var(--beige); display: block; position: absolute;height: 2px; width: 100%; opacity: 1;left: 0; 
-webkit-transition: .2s ease; -moz-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease;
}

.btn-menu span:nth-child(1) { top: 0px;}
.btn-menu span:nth-child(2),.btn-menu span:nth-child(3) { top: 7px;}
.btn-menu span:nth-child(4) { top: 14px;}

.btn-menu--open {-moz-transform: skew(0deg, 0deg);-webkit-transform: skew(0deg, 0deg);-o-transform: skew(0deg, 0deg);-ms-transform: skew(0deg, 0deg);transform: skew(0deg, 0deg);}
.btn-menu--open span {width: 100%;}
.btn-menu--open span:nth-child(1) {top: 18px; width: 0%; left: 50%;}
.btn-menu--open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);-o-transform: rotate(45deg); transform: rotate(45deg);}
.btn-menu--open span:nth-child(3) { -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.btn-menu--open span:nth-child(4) { top: 18px; width: 0%; left: 50%;}

@media (max-width: 991px){
.burgercontainer {display:inline-block;}
}












.button-nav {}

.button-nav a { 
font-size: var(--fontsize-sm2); 
line-height: var(--line-height-md);
text-transform: uppercase; 
letter-spacing: 0.1em; 
font-weight: 700;
color: var(--beige);
border: 2px solid var(--beige);
display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent;
padding: 6px 24px;  
-webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; border-radius: 0;
}
.button-nav a:hover {color: var(--light--beige); background: var(--beige);}

@media (max-width: 991px){
.button-nav {display: none}
}






/* ------------------------------------------------------------ *\
	Header Sticky
\* ------------------------------------------------------------ */
.header.sticky {
height: 65px;
padding-top: 10px;
position: fixed; position: sticky;  top: 0; left: 0;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 30px 0px rgba(30,30,30,0.2);
}
.header.sticky .header__bar {opacity: 0; margin-top: -25px;}
.header.sticky .logo { }


@media (max-width: 991px){
.header.sticky { height: 64px; padding-top: 20px;}
.header.sticky .logo {width: 137px; height: 24px; } 
    
}







/* ------------------------------------------------------------ *\
	M O D U L E - Alle Inhaltsmodule
\* ------------------------------------------------------------ */


/* ------------------------------------------------------------ *\
	Section Titel mit Headerbild
\* ------------------------------------------------------------ */
.section-titel {margin-bottom: 32px}
.headerbild {position: relative;display: block;overflow: hidden; }
.headerbild img {width: 100%}
.titelcontainer { position: absolute;  top: 50%;  left: 0;  right: 0;  transform: translateY(-50%); z-index: 3;}
.untertitel {margin-bottom: 25px}

.headerbild { height: 480px; }
.headerbild  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }

@media (max-width: 1199px) {
.headerbild { height: 400px; }
}
@media (max-width: 991px) {
.headerbild { height: 320px; }
.section-titel {margin-bottom: 16px}
}
@media (max-width: 767px) {
.headerbild { height: 300px; }
}
@media (max-width: 575px) {
.headerbild { height: unset; }
.section-titel {margin-bottom: 55px}
.headerbild img {display: none; }
.titelcontainer { position: unset; top: unset;  left: unset;  right: unset; transform: none;display: flex; flex-direction: column-reverse; margin-top: 32px}
.untertitel {color: var(--beige); margin-bottom: 0}
}



.gradientoverlay {
    top: 0; 
  z-index: 3;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 80%;
  display: block;

background: -moz-linear-gradient(0deg, rgba(247,238,228,0) 0%, rgba(247,238,228,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(247,238,228,0) 0%, rgba(247,238,228,1) 100%);
background: linear-gradient(0deg, rgba(247,238,228,0) 0%, rgba(247,238,228,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7eee4",endColorstr="#f7eee4",GradientType=1);
}

@media (max-width: 575px) {
    .gradientoverlay {display: none}
}


/* ------------------------------------------------------------ *\
	Section Breadcrumbs
\* ------------------------------------------------------------ */
.section-breadcrumbs { padding: 0 0 2rem;}
.rank-math-breadcrumb { color: var(--grey); font-size: var(--fontsize-xs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em;}
.rank-math-breadcrumb a { text-decoration: none;transition: color 0.2s, opacity 0.2s ease-in-out; color: var(--grey)}
.rank-math-breadcrumb a:hover { color: var(--black); }
.rank-math-breadcrumb span:last-of-type {font-weight: 700; color: var(--black);}


.rank-math-breadcrumb .separator {display: inline-block; width: .8rem; height: 1.2rem; background: url("images/breadcrumb-sep.svg") 0 0 no-repeat;margin: 0 15px 0 15px;}
.rank-math-breadcrumb p { margin-bottom: 0}
@media (max-width: 575px) {
.section-breadcrumbs { display: none}
}







/* ------------------------------------------------------------ *\
	Section Text-Module (100, 50, 75-25)
\* ------------------------------------------------------------ */
.section-text {}
@media (max-width: 767px) {
}


.titel-col {hyphens: auto}



/* ------------------------------------------------------------ *\
	Box Teaser gross
\* ------------------------------------------------------------ */
.teaser-box-col {margin-bottom: 24px}
.teaser-box {background: var(--grey); height:100%;width:100%;position:relative;padding:24px;overflow:hidden;
-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s; min-height: 240px}

.teaser-box .box__inner{z-index:1;position:relative;height:100%;
display:-webkit-box;display:-ms-flexbox;display:flex;
-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;  align-items: flex-end;
overflow:hidden;}

.teaser-box .box__content{}
.teaser-box .teaser-slogan {color: var(--light--beige)}
.teaser-box h2 {font-size: 32px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--light--beige); 
line-height: var(--line-height-sm); 
font-weight: 400; margin-bottom: 0;
-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s;}
.teaser-box .teaser-zusatz {color: var(--beige);
-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s;}

.teaser-box .arrow-right {width: 27px; height: 21px;}
.teaser-box .arrow-right path {fill: var(--light--beige);
-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s;}

.teaser-box:hover {background: var(--light--beige);}
.teaser-box:hover .teaser-slogan {color: var(--grey);}
.teaser-box:hover h2 {color: var(--grey); }
.teaser-box:hover .arrow-right path {fill: var(--grey);}

.box__actions { margin-bottom: 3px;}
.teaser-box .box__link{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}


@media (max-width: 991px) {
.teaser-box {min-height: 160px; padding:18px;}
.teaser-box h2 {font-size: 22px;  }
.box__actions { margin-bottom: 0px;}
.teaser-box .arrow-right {width:23px; height: 17px;}
}

@media (max-width: 575px) {
.teaser-box {min-height: unset}
}




/* ------------------------------------------------------------ *\
	Section Bildslider
\* ------------------------------------------------------------ */
.slider--primary { overflow: hidden; }
.slider--primary .slider__slide { position: relative; height: 100%; }
.slider--primary .slider__slide-image img { width: 100%; }


/* ------------------------------------------------------------ *\
	Slider Navigation
\* ------------------------------------------------------------ */
.slick-slide img {  display: inline-block; width: 100%; height: auto}

/* Dot Navigation normal */
.slider .slick-dots { list-style-type: none; margin: 16px auto 0 auto; 
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center; width: 100%;}
.slider .slick-dots li { display: inline-block; width: 5px; height: 5px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; background: var(--grey); border: none; padding: 0; }
.slider .slick-dots li:hover { }
.slider .slick-dots li + li { margin-left: 8px; }
.slider .slick-dots button { background: transparent; border: 0; font-size: 0; }
.slider .slick-dots .slick-active { background: var(--black); }


.slider .slick-arrow { 
opacity:1; width: 23px; height: 23px; margin-top: -23px;border: 2px solid var(--black); border-right: 0; border-top: 0; background: none; font-size: 0; 
-webkit-transition: opacity .8s ease, border-color .3s ease;
-moz-transition: opacity .8s ease, border-color .3s ease;
-o-transition: opacity .8s ease, border-color .3s ease;
transition: opacity .8s ease, border-color .3s ease;
}
.slider .slick-arrow:hover { border-color: #817A72; }
.slider .slick-prev { position: absolute; top: 50%; left: 18px; z-index: 30; 
transform: rotate(45deg) translate(0px);-webkit-transform: rotate(45deg) translate(0px);-moz-transform: rotate(43deg) translate(0px);-o-transform: rotate(45deg) translate(0px);-ms-transform: rotate(45deg) translate(0px);}
.slider .slick-next { position: absolute; top: 50%; right: 18px; 
transform: rotate(-135deg) translate(0px);-webkit-transform: rotate(-135deg) translate(0px);-moz-transform: rotate(-135deg) translate(0px);-o-transform: rotate(-135deg) translate(0px);-ms-transform: rotate(-135deg) translate(0px);}
.slider .slick-arrow:focus { outline: 0; }
 
.slider button { background: transparent; border: 0; font-size: 0; }





/* ------------------------------------------------------------ *\
	Section Accordion
\* ------------------------------------------------------------ */
.accordion { border-bottom: 1px solid var(--beige); }

.accordion-trigger {
font-size: var(--fontsize-md); line-height: var(--line-height-md);
color: var(--black); padding: 13px 0; border-top: 1px solid var(--beige);
 display: flex;
  justify-content: space-between;
  align-items: center; /* Vertikale Zentrierung */
  position: relative; /* Falls nötig */ 
-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}



.accordion-trigger:hover { color: var(--black);}
.accordion-trigger-active { border-bottom: none; color: var(--black);}

/*
.accordion-trigger-open:before {content: "";position: absolute;display: block;right: 0px; top: 50%; width: 20px; height: 0; border-top: 2px solid #5FAF53;transform: rotate(0deg);transform-origin: center;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;}
.accordion-trigger-open:after {content: "";position: absolute;display: block;margin: auto; right: 0px; top: 2px; bottom: 0;width: 20px; height: 0; border-top: 2px solid #5FAF53; transform: rotate(90deg);transform-origin: center;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;}

.accordion-trigger:hover .accordion-trigger-open:before {border-top: 2px solid #111; }
.accordion-trigger:hover .accordion-trigger-open:after {border-top: 2px solid #111; }
.accordion-trigger-active .accordion-trigger-open:before {border-top: 2px solid #111;transform: rotate(45deg);}
.accordion-trigger-active .accordion-trigger-open:after {border-top: 2px solid #111;transform: rotate(-45deg); }
*/

.accordion-trigger-open { position: relative;}
.accordion-trigger-open .arrow { width: 18px; height: 20px; transition: transform 0.3s ease;}
.accordion-trigger-open .arrow path { fill: var(--beige);}
.accordion-trigger-active .arrow { transform: rotate(180deg);}

.accordion-content {padding: 0 0 20px 0; -webkit-animation:fadeOut .8s ease-out;animation:fadeOut .8s ease-out;  }
.accordion-content.open {-webkit-animation:fadeIn .8s ease-out;animation:fadeIn .8s ease-out}

@media (max-width: 991px) {
.accordion-trigger { padding: 10px 0;}
.accordion-trigger-open .arrow { width: 14px; height: 16px;  }
}





/* ------------------------------------------------------------ *\
	Fakten
\* ------------------------------------------------------------ */
.section-fakten {}
.fakt {border-bottom: 1px solid var(--beige); padding: 16px 0; height: 100%}
.fakt p:last-of-type {margin-bottom:  0}

.row .col-md-6:nth-child(-n+2) .fakt {
    border-top: 1px solid var(--beige);
}
@media (max-width: 767px) {
    .row .col-md-6:nth-child(-n+2) .fakt {
        border-top: none; /* Entfernt die obere Linie für die ersten zwei */
    }

    .row .col-md-6:first-child .fakt {
        border-top: 1px solid var(--beige); /* Fügt sie nur dem ersten hinzu */
    }
}






/* ------------------------------------------------------------ *\
	Vorteile
\* ------------------------------------------------------------ */
.section-vorteile {}
.vorteil {border-bottom: 1px solid var(--beige); padding: 16px 0 16px 50px}
.vorteil p:last-of-type {margin-bottom:  0}

.vorteil:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%); /* Zentriert das Icon vertikal */
    background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.295 10.705H0V9.295H9.295V0H10.705V9.295H20V10.705H10.705V20H9.295V10.705Z" fill="%23D0AB83"/></svg>');
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}
.vorteile .col-12:first-child .vorteil {
    border-top: 1px solid var(--beige);
}






/* ------------------------------------------------------------ *\
	Section Produkvorstellung
\* ------------------------------------------------------------ */
section-produktvorstellung {}
.produktvorstellung { }
.produktvorstellung .content-inner { padding-bottom: 20px}




/* ------------------------------------------------------------ *\
	Section Buttons
\* ------------------------------------------------------------ */
.section-buttons {}
ul.buttons { list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column}
ul.buttons li { margin: 0; }
ul.buttons li + li { margin-top: 16px; }





/* ------------------------------------------------------------ *\
	Buttons
\* ------------------------------------------------------------ */
a.btn { 
font-size: var(--fontsize-sm); line-height: var(--line-height-md); font-weight: 700;
text-transform: uppercase; 
letter-spacing: 0.1em;
color: var(--beige);
border: 2px solid var(--beige);
padding: 12px 24px; 
display: inline-block; 
vertical-align: middle; 
text-align: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent;
-webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; border-radius: 0;
}
a.btn:hover {color: var(--light--beige); background: var(--beige);}

@media (max-width: 767px) {
a.btn { padding: 6px 24px; 
}
}
@media (max-width: 575px) {
a.btn { display: block; padding: 12px 24px; color: #F7EEE4; border: 2px solid #D0AB83; background: #D0AB83;}
a.btn:hover {color: #F7EEE4; border: 2px solid #D0AB83;}
}


a.btn.btn-light { color: var(--light--beige);border: 2px solid var(--light--beige);}
a.btn.btn-light:hover {color: var(--beige); background: var(--light--beige);}



/* ------------------------------------------------------------ *\
	Footer
\* ------------------------------------------------------------ */
.footer { 
background: var(--beige); 
font-size: var(--fontsize-sm2);
line-height: var(--line-height-md);
color:  var(--light--beige); 
position: relative; width: 100%;margin: auto auto 0 auto; padding: 40px 0 0;    
}
.footer a{ color: var(--white) }
.footer a:hover{ color: var(--black) }

.footer h4{ text-transform: uppercase; color:  var(--light--beige); font-size: var(--fontsize-sm2); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 35px  }

.footer .footer-nav ul {margin-bottom: 0}
.footer .footer-nav li {  }
.footer .footer-nav a {font-size: var(--fontsize-sm2); line-height: var(--line-height-md); text-decoration: none; color: var(--black); padding: 5px 0; display: block}
.footer .footer-nav a:hover { color: var(--light--beige); text-decoration: none; }
.footer .footer-nav li.current_page_item a { color: var(--light--beige) !important; text-decoration: none; }


.footer .footer__bar{display:flex;justify-content:space-between;align-items:center;position:relative;padding:1.2rem 0 1.5rem; border-top: 1px solid #F7EEE4; color: var(--light--beige)}

.footer .legalnavigation{}
.footer .legalnavigation > ul{display:flex;list-style-type:none;padding:0;}
.footer .legalnavigation > ul > li ~ li{margin-left:3rem;}
.footer .legalnavigation > ul > li > a{
 font-size: var(--fontsize-sm2); line-height: var(--line-height-md); text-decoration: none; color: var(--light--beige);
transition:color .2s, opacity .2s ease-in-out;}
.footer .legalnavigation > ul > li:hover > a{ color: var(--grey);}

.margin-bottom-40 {margin-bottom: 40px}
.footer-kontakt {margin-right: 25px}
.footer-kontakt .btn {padding: 6px 24px; font-size: var(--fontsize-sm2); }

.footer-logo {}
.footer-logo img {}

.footer-schweizerholz {}
.footer-schweizerholz img {}

@media (max-width: 991px) {
.footer-kontakt .btn {padding: 2px 16px; font-size: 1.2rem}
.footer-logo img {width: 145px}
.footer-schweizerholz img {width: 80px}
}

@media (max-width: 575px) {
.footer-logo img {width: 175px}
.footer-schweizerholz img {width: 95px}
  
.footer .footer__bar { flex-direction: column-reverse;}
}






/* ------------------------------------------------------------ *\
	List
\* ------------------------------------------------------------ */
[class^="list-"] { list-style: none outside none; }








/* **************************************************
			    		CONTACT
************************************************** */

.contactcol {padding-top: 12px; padding-bottom: 12px}
.bordertop {border-top: 1px solid #E2DEDB}
.borderbottom  {border-bottom: 1px solid #E2DEDB}
.wpcf7-form h4 {margin-bottom: 0}

div.wpcf7 {margin: 0;padding: 0; width: 100%;}
span.wpcf7-form-control-wrap { position: relative; }

.wpcf7 form input, .wpcf7 form textarea { font-weight: 300;  margin: 0; resize: none;
background: #fff;  border: 1px solid #fff; color:111; padding: 0; width:100%; box-sizing: border-box;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
.wpcf7 form input:hover, form textarea:hover {outline:none; }
.wpcf7 form input:focus, form textarea:focus {outline:none; }

.wpcf7 form textarea {height: 180px;}

/* Platzhalter-Textfarbe */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder,
.wpcf7 input:focus::placeholder,
.wpcf7 textarea:focus::placeholder{ color: rgba(129, 122, 114, 1); font-style: italic}



/* SUBMIT BUTTON */
.wpcf7 form input[type=submit] { 
    margin-top: 40px;
font-size: var(--fontsize-sm);  line-height: var(--line-height-md);
text-transform: uppercase; 
letter-spacing: 0.1em; 
font-weight: 700;
color: var(--beige);
border: 2px solid var(--beige);
padding: 14px 24px;  
width: auto; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
-webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease;
}
.wpcf7 form input[type=submit]:hover {color: var(--light--beige);background: var(--beige);}





.screen-reader-response { display: none;}
div.wpcf7-response-output { color: #111;font-size: var(--fontsize-sm);line-height: var(--line-height-md); font-weight: 400; margin: 20px 0 20px 0 !important;	padding: 0; font-weight: 700; border: none !important; padding: 0 !important;}

div.wpcf7-mail-sent-ok,
div.wpcf7-mail-sent-ng,
div.wpcf7-spam-blocked,
div.wpcf7-validation-errors,
div.screen-reader-response {border: 0px !important; padding: 0px !important; margin: 0 0 25px 0 !important; font-size: 12px; line-height: 18px; color: #111; font-weight: 700;}


span.wpcf7-not-valid-tip {color: #111 !important; font-size: 12px !important; display: block; margin: 2px 0 10px 0!important ;}
input.wpcf7-not-valid {border:none !important}

.use-floating-validation-tip span.wpcf7-not-valid-tip { 
position: absolute;	top: 20%; left: 20%; z-index: 100;	border: 1px solid #1F5A37;	background: #fff;	padding: .2em .8em;}


div.wpcf7 img.ajax-loader { border: none;vertical-align: middle;margin-left: 4px;display: none;}
div.wpcf7 div.ajax-error { display: none;}
.wpcf7-display-none { display: none; }



/* SELECT*/
.wpcf7-form  .select-wrapper { position: relative; width: 100%; margin: 0 0 20px 0;}
.wpcf7-form  .select-wrapper:after { pointer-events: none; position: absolute; display: block; content: '';  width: 14px; height: 14px; top: 50%; right: 20px; margin-top: -3px; border-bottom: 1px solid #111; border-right: 1px solid #111; transform: rotate(45deg) translateY(-50%); transition: all .4s ease-in-out; transform-origin: 50% 0; }

.wpcf7-form select{ font-size: var(--fontsize-xs); width:100%; background: #fff; border: 1px solid #fff; color:#111; padding: 15px 20px;  border-radius:0;outline:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; font-family: inherit; cursor: pointer;}
.wpcf7-form select:hover, .wpcf7-form select:focus {border: 1px solid #5FAF53;}
.wpcf7-form select::-ms-expand{display:none;}
.wpcf7-form select:focus::-ms-value { background-color: transparent;}


/* RADIO BUTTONS */
.wpcf7-list-item {display: block; margin: 0 50px 10px 0!important;}

.wpcf7-form .wpcf7-radio {font-size: var(--fontsize-xs);}
.wpcf7-form .wpcf7-radio .wpcf7-list-item-label { display: inline-flex;;}
.wpcf7-form .wpcf7-radio label {  position: relative; cursor: pointer;}
.wpcf7-form .wpcf7-radio input[type=radio] {position: relative; visibility: hidden; display: none}

.wpcf7-form .wpcf7-radio input[type=radio] + span:before { content: ''; border-radius: 100%; height: 18px; width: 18px; border: 2px solid #5FAF53; margin-right: 15px;margin-top: 3px;}
.wpcf7-form .wpcf7-radio input[type=radio] + span:after { display: block; position: absolute; content: '';  border-radius: 100%; height: 8px; width: 8px; top: 3px; left: 4px; visibility: hidden;}

.wpcf7-form .wpcf7-radio input[type=radio]:checked + span:before { background: transparent; border: 6px solid #5FAF53}
.wpcf7-form .wpcf7-radio input[type=radio]:checked + span:after { background: #FFF; visibility: hidden;}


/* CHECKBOXES */
.wpcf7-form .wpcf7-checkbox {font-size: var(--fontsize-xs);}
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label { display: inline-flex;align-items: top; margin: 0 0 15px;}
.wpcf7-form .wpcf7-checkbox label { position: relative; cursor: pointer;}
.wpcf7-form .wpcf7-checkbox input[type=checkbox] {position: relative; visibility: hidden; display: none}

.wpcf7-form .wpcf7-checkbox input[type=checkbox] + span:before { content: ''; height: 18px; width: 18px; min-width: 18px; border: 2px solid #5FAF53; margin-right: 15px; margin-top: 3px; }

.wpcf7-form .wpcf7-checkbox input[type=checkbox] + span:after { display: flex; position: absolute; content: ''; height: 11px; width: 11px; top: 1px; left: 4px; visibility: hidden;
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span:before { background: #5FAF53;}
.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span:after {  
background-image: url("images/icon_form_checked.svg"); background-size: cover; visibility: visible;}



/* ACCEPTANCE */
.wpcf7-acceptance {font-size: var(--fontsize-xs);}
.wpcf7-acceptance .wpcf7-list-item-label { display: inline-block; text-indent: -44px; margin-left: 44px;}
.wpcf7-acceptance .wpcf7-list-item-label label { position: relative; cursor: pointer;}
.wpcf7-acceptance .wpcf7-list-item input[type=checkbox] {position: relative; visibility: hidden; display: none}

.wpcf7-acceptance .wpcf7-list-item {position: relative; margin: 0 !important;}

.wpcf7-acceptance .wpcf7-list-item input[type=checkbox] + span:before { position: relative;top: 3px;
content: ''; height: 18px; width: 18px; border: 2px solid #5FAF53; margin-right: 15px; display: inline-block; }

.wpcf7-acceptance .wpcf7-list-item input[type=checkbox] + span:after { display: flex; position: absolute; content: ''; height: 11px; width: 11px; top: 7px; left: 4px; visibility: hidden;}

.wpcf7-acceptance .wpcf7-list-item input[type=checkbox]:checked + span:before { background: #5FAF53;}
.wpcf7-acceptance .wpcf7-list-item input[type=checkbox]:checked + span:after { 
background-image: url("images/icon_form_checked.svg"); background-size: cover; visibility: visible;
}

@media (max-width: 767px) {
.wpcf7-acceptance .wpcf7-list-item-label { display: block;}
}




/* ------------------------------------------------------------ *\
	Box
\* ------------------------------------------------------------ */

.box{position:relative;}

.box .box__content{}
.box .box__image{}
.box .box__image img{}

.box .box__aside{height: 100%;
display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}

.box .box__aside-content{flex:1;margin-bottom:2rem;}
.box .box__aside h4{margin-bottom: 0;}
.box .box__entry{transition:color .2s ease-in; flex: 1; hyphens: auto}

.box .box__list-contacts{justify-content:flex-start; margin-bottom: 0}
.box .box__list-contacts > li > a{cursor:pointer;}

@media (max-width: 991px) {

.box .box__entry{min-height:0;margin-bottom:0;}

}



/* ------------------------------------------------------------ *\
	List Contacts Icons
\* ------------------------------------------------------------ */
.list-contacts-icons{list-style-type:none;display:flex;align-items:center;padding:0;}
.list-contacts-icons > li{position:relative;}
.list-contacts-icons > li > a > i:nth-child(1){transition:opacity .2s, visibility .2s ease-in;}
.list-contacts-icons > li > a > i:nth-child(2){position:absolute;top:0;left:0;width:100%;height:100%;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s, visibility .2s ease-in;}
.list-contacts-icons > li:hover > a > i:nth-child(1){opacity:0;pointer-events:none;visibility:hidden;}
.list-contacts-icons > li:hover > a > i:nth-child(2){opacity:1;pointer-events:all;visibility:visible;}
.list-contacts-icons > li ~ li{margin-left:2rem;}
.list-contacts-icons > li > a{text-decoration:none;}