/*
	Theme Name: Spinesociety-Theme
	Theme URI: https://spinesociety.ch/
	Description: Dies ist ein <b>ready-to-start</b> Child-Theme. Entwickelt und bereitgestellt von Hozjan Artwork. Dieses Theme beinhaltet einige hilfreiche und sinnvolle Features.
	Author: Hozjan Artwork - Benny Hozjan
	Author URI: https://www.hozjan.net/
	Template: Divi
	Version: 1.0.0
	Tag: Child Theme, Hozjan Artwork 
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
	Standard CSS
	========================================================================== */
* {
	margin:0;
	padding:0;
	box-sizing: border-box;
	}
	
html { font-size: 62.5%; }
	
#page-container {overflow:hidden}
	
a[href^="#"] {cursor:pointer!important}	

:root {
	/* Global Colors */
	--blue:     #009ECC;
	--light:	#F4F6F8;
	--lightblue:#8DCBFF;
	--darkblue: #252F62;
	--white:	#ffffff;
	
	/* Transition */
	--tra-3s:	all .3s ease-in-out
	}
	
.mce-panel .mce-stack-layout-item.mce-first {
	position: sticky!important;
	top: -60px;
	}
	
.bh-align-center-section,
.bh-align-center-row .et_pb_column,
.bh-align-center-module {
	display: flex;
	flex-direction: column;
	justify-content: center;
	}
	
	@media (min-width: 992px) {
		body.et_cover_background {
		  min-height: 100vh!important;
		  background: url("/wp-content/themes/Spinesociety-Theme/img/bg-spine.jpg") no-repeat;
		  background-size: auto 100vh!important;
		  background-position: right center!important;
		  background-attachment: fixed!important;
		  background-blend-mode: multiply;
		  } 
	}

body.single #main-content {
	background:transparent
	}
	
.et_pb_menu .et_pb_menu__menu>nav>ul>li.members::before{
  content:"\f2bd";
  font-family: FontAwesome !important;
  font-weight: 400 !important;
  color: #252F62;
  font-size: 20px;
  display:inline-block;
  position:relative;
  top:50%;
  transform:translateY(-10%);
  margin-right:6px
}

li.lang-item-de img,
li.lang-item-fr img,
li.lang-item-en img {
  width:18px;
}

@media (max-width: 1360px) {
 .et_mobile_nav_menu {
 display: block!important;
 }
 
.et_pb_menu__menu {
 display: none!important;
 }
  
  ::marker {
   color:white
  }
 }

/* ==========================================================================
	Mobile Menu CSS
	========================================================================== */
.et_pb_module .et_mobile_menu {
    width: calc(100% + 10rem);
    left: -5rem;
    margin-top: 1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 0 20px 30px -6px rgba(112,111,111,.15)
}

.et_pb_menu .et_mobile_menu li a {
    font-size: 1.6rem!important;
    font-weight: 600!important;
    line-height: 4rem;
    text-align: left;
}

.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}

.mobile_menu_bar:before {
	transition: all .4s ease;
	transform: rotate(0deg);
	display: block;
}
/*rotate the Divi Menu icon on click*/
.mobile_nav.opened .mobile_menu_bar::before {
	transition: all .4s ease;
	transform: rotate(90deg);
	display: block;
}
	
/* ==========================================================================
	Buttons CSS
	========================================================================== */
.et_pb_button.submit,
.et_pb_button {
	background:var(--blue);
	color:var(--light);
	font-size:1.8rem;
	font-weight:800;
	padding: 1rem 2rem!important;
	border:none!important;
	transition:var(--tra-3s)
	}
	
.et_pb_button.submit:hover,
.et_pb_button:hover {
	background:var(--darkblue)!important;
	color:var(--light)!important;
	font-size:1.8rem!important;
	font-weight:800;
	padding: 1rem 2rem!important;
	border:none;
	}
	
.et_pb_button:after {
	display:none
	}
	
		
/* ==========================================================================
	TEAM CSS Styling
	========================================================================== */
.et_pb_team_member_image img {
	border-radius:10px;
	}
	
.et_pb_team_member::before {
	display:table;
	position:absolute;
	top:10px;
	left:0;
	padding:.5rem 1rem;
	background:var(--darkblue);
	color:var(--light);
	font-size:1.2rem;
	z-index:1;
	}
	
/* ==========================================================================
	AKKORDEON CSS Styling
	========================================================================== */
.et_pb_accordion .et_pb_toggle_close .et_pb_toggle_title::before {
	content:"\33"!important;
	font-size:20px;
	}

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::before {
	display:block;
	content:"\32"!important;
	font-size:20px;
	}
	
/* ==========================================================================
	BOX CSS Styling
	========================================================================== */
.et_pb_text.box {
	padding:2rem 2.5rem;
	border-radius:10px;
	}
	
.et_pb_text.box ul {
	list-style:none!important}
	
.et_pb_text.box ul li {
	padding:.75rem;
	cursor:pointer;
	}
	
.et_pb_text.box ul li::before{
	content: '\24'!important;
	position:absolute;
	color: var(--blue);
	font-family: 'ETMODULES'!important;
	left:-.8rem;
	font-size: 1.8rem!important;
	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
	}
	
.et_pb_text.box-2 h4 {
	color: rgba(255, 146, 0, 1);	
	}

.et_pb_text.box-2 ul li::before {
	color: rgba(255, 146, 0, 1);
	content: '\e052'!important;
	}


/* ==========================================================================
	ZERTIFIKATE BLOG CSS
	========================================================================== */	
.et_pb_post {
	background:white;
	border-radius:15px;
	padding:2rem;
	margin-bottom:20px!important
	}

.et-blog-css-grid > div {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
	gap: 20px;
	}

	@media (max-width: 960px) {
		.et-blog-css-grid > div {
			grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
		}
	}
	
	@media (max-width: 480px) {
		.et-blog-css-grid > div {
			grid-template-columns: repeat(auto-fill, minmax(95%, 1fr));
		}
	}
	
/* ==========================================================================
	Font CSS
	========================================================================== */
.et_pb_module.et_pb_text h1 {
	font-weight: 800;
	font-size : clamp(3rem, 5vw, 4rem);
	line-height : clamp(3.5rem, 5vw, 4.5rem);
	margin-bottom:3rem;
	letter-spacing: -1px;
	}
	
.et_pb_module.et_pb_text h2 {
	font-size : clamp(2.6rem, 5vw, 3.5rem);
	line-height : clamp(3rem, 5vw, 4rem);
	margin-bottom:2rem;
	letter-spacing: -1px;
	}
	
.et_pb_module.et_pb_text h3 {
	font-size : clamp(2.3rem, 5vw, 3rem);
	line-height : clamp(2.6rem, 5vw, 3.5rem);
	margin-bottom:2rem;
	letter-spacing: -1px;
	}
	
.et_pb_module.et_pb_text h4,
h3.et_pb_toggle_title {
	font-size : clamp(2rem, 5vw, 2.4rem);
	line-height : clamp(2.4rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -1px;
	}
	
.et_pb_module.et_pb_text p,
.et_pb_blurb .et_pb_blurb_description p,
.et_pb_module.et_pb_text li, 
.et_pb_module .et_pb_toggle_content p {
	font-size : clamp(1.5rem, 5vw, 1.6rem);
	line-height : clamp(1.8rem, 5vw, 2rem);
	}
	
.et_pb_module.et_pb_text.subtext p {
	font-size : clamp(1.8rem, 5vw, 2rem);
	line-height : clamp(2.2rem, 5vw, 2.4rem);
	}
	

	
	/* ==========================================================================
	Footer CSS
	========================================================================== */
.bh_footer .footer-credit p {
	font-size:1.2rem!important;
	opacity:.9
	}
	
.bh_footer .footer-address p {
	font-size:1.4rem!important;
	opacity:.9
	}
	
.et-db #et-boc .bh_footer ul.bh-footer-data,
.et-db #et-boc .bh_footer ul.bh-footer-links {
	list-style-type: none;
	padding: 0px!important;
	}
	
.et-db #et-boc .bh_footer ul.bh-footer-data li,
.et-db #et-boc .bh_footer ul.bh-footer-links li {
	font-size : 1.4rem!important;
	padding:4px;
	text-transform: uppercase;
	margin-left:15px;
	}
	
.et-db #et-boc .bh_footer ul.bh-footer-data li::before,
.et-db #et-boc .bh_footer ul.bh-footer-links li::before {
	content: '\24'!important;
	position:absolute;
	color: var(--lightblue);
	font-family: 'ETMODULES'!important;
	left:-.8rem;
	font-size: 1.8rem!important;
	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
	}
	
.et-db #et-boc .bh_footer ul.bh-footer-data li a,
.et-db #et-boc .bh_footer ul.bh-footer-links li a {
	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
	color: var(--light)!important;
	}
	
.et-db #et-boc .bh_footer ul.bh-footer-data li a:hover,
.et-db #et-boc .bh_footer ul.bh-footer-links li a:hover,
.et-db #et-boc .bh_footer ul.bh-footer-data li:hover::before,
.et-db #et-boc .bh_footer ul.bh-footer-links li:hover::before {
	color: var(--blue)!important;
	}
	
.et-db #et-boc .bh_footer .swissmade {
	width:12px;
	height:auto;
	display:inline-block;
	margin-bottom:-3px;
	margin-right:3px
	}
	
/* ==========================================================================
	SPICE CSS
	========================================================================== */	
.spice {
	display: flex;
	flex-wrap:wrap;
	gap: 20px;
	padding:15px 0;
	border-bottom: 1px solid #FF9E0D;
	}
	
.spice .spice-1 p,
.spice .spice-2 p, 
.spice .spice-3 p,
.spice .spice-4 {
	font-size:1.4rem!important;
	}
	
.spice .spice-2 a {
	color:var(--dark);
	text-decoration:underline;
	cursor: pointer;
	}
	
.spice .spice-1 {
	flex: 1 1 30%;
	font-weight:800;
	}
.spice .spice-2 {
	flex: 1 1 25%
	}
.spice .spice-3 {
	flex: 1 1 25%;
	}
.spice .spice-4 {
	flex: 1 1 11%;
	}
	
.spice .spice-1::before,
.spice .spice-2::before,
.spice .spice-3::before,
.spice .spice-4::before {
	display:table;
	font-size:1.2rem;
	font-weight:800;
	border-radius:5px;
	color:#FF9E0D
	}
	
.spice .spice-1::before {
	content:"Topic";}
	
.spice .spice-2::before {
	content:"Institution";}
	
.spice .spice-3::before {
	content:"Summary";}
	
.spice .spice-4::before {
	content:"Looking for partner";}
	
	@media (max-width: 768px) {
		.spice .spice-1,
		.spice .spice-2, 
		.spice .spice-3,
		.spice .spice-4  {
			flex: 1 1 50%; /* Two columns */
		}
	}
	
	@media (max-width: 480px) {
		.spice .spice-1,
		.spice .spice-2, 
		.spice .spice-3,
		.spice .spice-4  {
			flex: 1 1 100%; /* One column */
		}
	}
	
/* ==========================================================================
	SPEARS EVENTS CSS
	========================================================================== */
.spears-veranstaltung a[href=""],
.spears-veranstaltung a:not([href]) {
	opacity:0;
	pointer-events: none;
	}


.spears-veranstaltung {
	display: flex;
	flex-wrap:wrap;
	align-items:center;
	gap: 20px;
	padding:15px 0;
	border-bottom: 1px solid var(--blue);
	}
	
.spears-veranstaltung .spears-1 p,
.spears-veranstaltung .spears-2 p, 
.spears-veranstaltung .spears-3 p, 
.spears-veranstaltung .spears-4 a {
	font-size:1.4rem!important;
	}
	
.spears-veranstaltung .spears-4 a {
	color:var(--light);
	background:var(--blue);
	padding:6px;
	border-radius:3px;
	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
	cursor:pointer
	}
	
.spears-veranstaltung .spears-4 a:hover {
	background:var(--darkblue);  
	}
	
.spears-veranstaltung .spears-1 {
	flex: 1 1 35%;
	font-weight:800;
	}
.spears-veranstaltung .spears-2 {
	flex: 1 1 20%
	}
.spears-veranstaltung .spears-3 {
	flex: 1 1 25%;
	}
.spears-veranstaltung .spears-4 {
	flex: 1 1 auto;
	}
	
	@media (max-width: 768px) {
		.spears-veranstaltung .spears-1,
		.spears-veranstaltung .spears-2, 
		.spears-veranstaltung .spearse-3,
		.spears-veranstaltung .spears-4  {
			flex: 1 1 50%; /* Two columns */
		}
	}
	
	@media (max-width: 480px) {
		.spears-veranstaltung .spears-1,
		.spears-veranstaltung .spears-2, 
		.spears-veranstaltung .spears-3,
		.spears-veranstaltung .spears-4  {
			flex: 1 1 100%; /* One column */
		}
	}
	

/* ==========================================================================
	SPEARS FELLOWSHIP CSS
	========================================================================== */
.spears-fellowship {
	display: flex;
	flex-wrap:wrap;
	gap: 20px;
	padding:15px 0;
	border-bottom: 1px solid var(--blue)
	}
	
.spears-fellowship .spears-1 p,
.spears-fellowship .spears-2 p,
.spears-fellowship .spears-3 a,
.spears-fellowship .spears-4 a {
	font-size:1.4rem!important;
	}
	
.spears-fellowship .spears-3 a {
	color:var(--dark);
	text-decoration:underline;
	cursor: pointer;
	font-weight:normal
	}
	
.spears-fellowship .spears-1 {
	flex: 1 1 25%;
	font-weight:800;
	}
.spears-fellowship .spears-2 {
	flex: 1 1 30%;
	}
.spears-fellowship .spears-3 {
	flex: 1 1 25%;
	}
.spears-fellowship .spears-4 {
	flex: 1 1 auto;
	}

.spears-fellowship .spears-4 a {
	color:var(--light);
	background:var(--blue);
	padding:6px;
	border-radius:3px;
	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
	cursor:pointer
	}
	
.spears-fellowship .spears-4 a:hover {
	background:var(--darkblue);  
	}

.spears-fellowship a[href=""],
.spears-fellowship a:not([href]) {
	opacity:0;
	pointer-events: none;
	}

.spears-fellowship .spears-1::before,
.spears-fellowship .spears-2::before,
.spears-fellowship .spears-3::before{
	display:table;
	font-size:1.2rem;
	font-weight:800;
	border-radius:5px;
	color:#029ECC
	}
	
.spears-fellowship .spears-1::before {
	content:"Institution";}
	
.spears-fellowship .spears-2::before {
	content:"Offer";}
	
.spears-fellowship .spears-3::before {
	content:"Contact";}
	
	@media (max-width: 768px) {
		.spears-fellowship .spears-1,
		.spears-fellowship .spears-2, 
		.spears-fellowship .spearse-3,
		.spears-fellowship .spearse-4 {
			flex: 1 1 50%; /* Two columns */
		}
	}
	
	@media (max-width: 480px) {
		.spears-fellowship .spears-1,
		.spears-fellowship .spears-2, 
		.spears-fellowship .spears-3,
		.spears-fellowship .spearse-4  {
			flex: 1 1 100%; /* One column */
		}
	}

/* ==========================================================================
	& Co. CSS
	========================================================================== */
.resources-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.resource-item {
  padding: 1rem 1.25rem;
}

/* 2-Spalten-Layout */
.resource-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.resource-col p {
  margin: 0;
  word-break: break-word;
}
.resource-col a {
  color: var(--dark);
  text-decoration: underline;
  position: relative;
  padding-left: 1.2em;
  margin: 0;
}

.resource-col a::before {
  content: "\35";
  font-family: "ETModules";
  font-size:1.8rem;
  font-weight:900;
  position: absolute;
  left: 0;
  top: -2px!important;
  color: var(--dark);
}


/* SNEX Quality (grün) */
.resources-wrapper.snex_quality .resource-col a {
  color: #3CC6B4;
}

/* SNEX Registry (blau) */
.resources-wrapper.snex_registry .resource-col a {
  color: #3CC6B4;
}

/* EXPE (weinrot) */
.resources-wrapper.expe_resources .resource-col a {
  color: #FF566D;
}

.resources-wrapper.snex_quality .resource-col a:hover,
.resources-wrapper.snex_registry .resource-col a:hover,
.resources-wrapper.expe_resources .resource-col a:hover {
	color:#252F62
}

/* Responsiv: untereinander ab Tablet */
@media (max-width: 768px) {
  .resource-columns {
    grid-template-columns: 1fr;
  }
}

	
/* ==========================================================================
	SNEX CSS
	========================================================================== */
.home .et_pb_module .et_pb_toggle_content p {
	font-size:inherit
}

/* Style the accordion button */
.snex-accordion {
 display: grid;
    grid-template-columns: repeat(2, 1fr); /* 6 equal columns */
    grid-gap: 20px; /* Add some space between the columns */
    margin: 20px 0;
}



/* Style the accordion button */
.accordion-button {
    background-color: #D7F2E2;
    color: var(--darkblue);
    cursor: pointer;
    width: 100%;
    border: 1px solid #3CC6B4;
  border-radius:5px;
    text-align: left;
  padding:5px;
    outline: none;
    display: flex;
    justify-content: space-between; /* To separate title from the icon */
    align-items: center;
    transition: background-color 0.2s ease;
    position: relative;
    font-weight:600;

}

.accordion-button.active {
  background-color: #3CC6B4;
  color: #fff;
}

.accordion-button::after {
    content: '\33'; /* Unicode for a down arrow */
  font-family:"ETModules";
  font-weight:bold;
    font-size: 14px;
    transition: transform 0.3s ease;
    position: absolute;
    right: 10px; /* Adjust this for spacing */
}

/* Rotate arrow when active */
.accordion-button.active::after {
    transform: rotate(180deg); /* Upward arrow */
}

/* Style the accordion content */
.accordion-content {
    padding: 0 20px;
    display: none; /* Hidden by default */
    background-color: rgba(255,255,255,.5);
    border-radius: 5px;
}



/* Make sure it looks good on smaller screens */
@media screen and (max-width: 1200px) {
    .snex-accordion {
        grid-template-columns: repeat(2, 1fr); /* 4 columns on smaller screens */
    }
}

@media screen and (max-width: 768px) {
    .snex-accordion {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet-sized screens */
    }
}

@media screen and (max-width: 480px) {
    .snex-accordion {
        grid-template-columns: 1fr; /* Single column on small screens */
    }
}

.accordion-content ul {
    list-style-type: none;
  padding:0;
}

.accordion-content ul li {
	padding: 4px 0;
	cursor:pointer;
	list-style: none;
	color:var(--darkblue;);
	position:relative;
	line-height:16px;
	}
	
.accordion-content ul li a {
  	color:var(--darkblue);
  	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
	margin-left:1rem;
	}

.accordion-content ul li a:hover {
	color:#00b294!important;
	}

.accordion-content ul li::before {
	content: '\69'!important;
	position:absolute;
	color: #00b294;
	font-family: 'ETMODULES'!important;
	left:-1rem;
	font-size: 1.4rem!important;
	-webkit-transition: .3s all ease-in-out;
	-o-transition: .3s all ease-in-out;
	transition: .3s all ease-in-out;
	}	

/* ==========================================================================
	SYSS CSS
	========================================================================== */
.syss-members {
  display: grid;
  gap: 1rem;
  font-family: inherit;
}

.syss-header {
  font-weight: 600;
  color:#9651ef;
}

.syss-row {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr 1.3fr 1fr 0.5fr;
  gap: 1rem;
  padding: 0.8rem 1rem;
  align-items: start;
  border-bottom: 1px solid #9651ef;
}

.syss-col p { margin: 0; }

.syss-linkedin a {
  color: #0077b5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.syss-linkedin a:hover {
  transform: scale(1.15);
}

.syss-linkedin svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

@media (max-width: 992px) {
  .syss-row {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .syss-header { display: none; }
  .syss-row { grid-template-columns: 1fr; }
  .syss-col { padding: 0.2rem 0; }
}	

/* Labels + Werte wie im Beispiel */
.syss-label {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: #9651ef; 
  margin-bottom: .35rem;
}

.syss-value {
  line-height: 1.35;
}

.syss-name .syss-value p { margin: 0; } /* Multi-Zeilen sauber */

 /* zentrierte Icon-Zelle */
.syss-linkedin .syss-linkedin-value {
  min-height: 2rem;
}

.syss-linkedin a {
  color: #0077b5;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.syss-linkedin a:hover { transform: scale(1.15); }
.syss-linkedin svg { width: 22px; height: 22px; fill: currentColor; }

/* dezente Trenner zwischen Rows */
.syss-row + .syss-row {
  padding-top: 1.1rem;
}

/* Responsive: deine Breakpoints bleiben, Label/Wert bleibt je Spalte erhalten */
@media (max-width: 992px) {
  .syss-row { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 768px) {
  .syss-header { display: none; } /* du nutzt keine Headrow mehr */
  .syss-row { grid-template-columns: 1fr; }
  .syss-col { padding: .2rem 0; }
}
	
/* ==========================================================================
	GRID CSS
	========================================================================== */	
.et_pb_toggle_content h5 {
  margin:30px 0 0 0;
}

.grid-container {
	display: grid;
    grid-template-columns: 1fr; /* First row is a single column */
    grid-gap: 10px; /* Spacing between grid items */
	}

.row-2 {
    grid-template-columns: 1fr 1fr; /* Second row has two columns */
	}

.item {
    padding: 10px;
    background-color: rgba(255,255,255,.6);
    border-radius:5px;
}

.item ul {padding-bottom:4px}

.item ul > li { 
	line-height:1.5rem;
	padding:4px 0
	}

@media (max-width: 768px) { 
	.row-2 {
    	grid-template-columns: 1fr; /* Second row has two columns */
	}
}