/* css Styles fuer berufung-karriere.ch */


/* ------- ANFANG FONTS ------- */

/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2019 Schwartzco Inc.
        License: 1907-GZEHPG     
*/


@font-face {
  font-family: 'Graphik-Bold';
  src: url('../webfonts/Graphik-Bold-Web.woff2') format('woff2'),
       url('../webfonts/Graphik-Bold-Web.woff') format('woff');
  font-weight:  700;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Graphik-Medium';
  src: url('../webfonts/Graphik-Medium-Web.woff2') format('woff2'),
       url('../webfonts/Graphik-Medium-Web.woff') format('woff');
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}

/* ------- ANFANG FONTS ------- */



/* ------- ANFANG ALLGEMEIN ------- */

::selection {
    background: #000000;
    color: #ECECEC;
	text-shadow: none;
}
/* und hiermit der Firefox >=1 */
::-moz-selection {
    background: #000000;
    color: #ECECEC;
	text-shadow: none;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
}

body, html { 
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-size: 27px; 
	line-height: 37px; 
	color: #000000; 
	padding: 0; 
	margin: 0; 
	height: 100%; 
	cursor: url(../cursor.png) 10 0,auto;
	scroll-behavior: smooth;
}

body { 
	background-color: #F5F5F5;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { 
	content: " "; 
	display: table; 
}
.clearfix:after { 
	clear: both; 
}

/* WICHTIG nullen der Tags */
* { 
	margin: 0; 
	padding: 0; 
}

article, footer, header, nav, section { 
	display: block; 
}

img { 
	border: 0; 
}

.clearer { 
	clear: both; 
	font-size: 0px; 
	line-height: 0px; 
	height: 0px; 
}

a, .a {
	text-decoration: none;
	color: #000000;
	cursor: url(../cursor.png) 10 0,auto;
}

a:hover, .a:hover {
	cursor: pointer;
}

.textlink {
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	text-decoration: underline solid 2px;
}

.textlink:hover {
	text-decoration: none;
}

.underline {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	position: relative;
	overflow: hidden;
	margin-top: -8px; 
}

.underline:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 100%;
	bottom: 2px;
	background: #000000;
	height: 2px;
	-webkit-transition-property: right;
	transition-property: right;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.underline:hover:before, .underline:focus:before, .underline:active:before {
  right: 0;
}

h1,.h1 { 
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 45px; 
	line-height: 55px; 
	color: #000000; 
	padding: 0; 
	margin: 0 0 50px 0; 
}

h2,.h2 { 
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 36px; 
	line-height: 46px; 
	color: #000000; 
	padding: 0; 
	margin: 0 0 30px 0; 
}

h3,.h3 { 
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 32px; 
	line-height: 42px; 
	color: #000000; 
	padding: 0; 
	margin: 0 0 20px 0; 
}

p { 
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 45px; 
	line-height: 55px; 
	color: #000000; 
	padding: 0; 
	margin: 0 0 50px 0; 
}

.bold { 
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
}

ul {
	display: block;
	padding: 0 0 0 40px;
	width: 1050px;
}

ul li {
	padding: 0 0 20px 10px;
	list-style-type: disc;
}

.ul_decimal {
	display: block;
	margin: 0;
	padding: 0;
	width: 1050px;
}

.li_decimal_1, .li_decimal_2, .li_decimal_3, .li_decimal_4, .li_decimal_5, .li_decimal_6 {
	background: url(../img/icon_decimal_1.svg) no-repeat 0 0 transparent;
	list-style-type: none;
	margin: 0 0 20px 0;
	padding: 5px 0 10px 70px;
	vertical-align: middle;
}

.li_decimal_2 {
	background: url(../img/icon_decimal_2.svg) no-repeat 0 0 transparent;
}

.li_decimal_3 {
	background: url(../img/icon_decimal_3.svg) no-repeat 0 0 transparent;
}

.li_decimal_4 {
	background: url(../img/icon_decimal_4.svg) no-repeat 0 0 transparent;
}

.li_decimal_5 {
	background: url(../img/icon_decimal_5.svg) no-repeat 0 0 transparent;
}

.li_decimal_6 {
	background: url(../img/icon_decimal_6.svg) no-repeat 0 0 transparent;
}

.li_square {
	list-style: square;
}

#quotes {
	list-style: none;
	padding: 0;
	width: 100%;
}

#quotes li { 
	display: none;
	list-style: none;
	padding: 0;
}

/* -------- ENDE ALLGEMEIN -------- */



/* --------- ANFANG NAVIG --------- */

nav {
	z-index: 99999;
	position: absolute;
	top: 60px;
	right: 45px;
	animation: animfade 0.75s;
	-moz-animation: animfade 0.75s; /* Firefox */
	-webkit-animation: animfade 0.75s; /* Safari and Chrome */
	-o-animation: animfade 0.75s; /* Opera */
}
@keyframes animfade
{
0% {opacity:0;}
50% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes animfade /* Firefox */
{
0% {opacity:0;}
50% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes animfade /* Safari and Chrome */
{
0% {opacity:0;}
50% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes animfade /* Opera */
{
0% {opacity:0;}
50% {opacity:0;}
100% {opacity:1;}
}

nav ul {
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	position: relative;
	height: 100%;
	width: 100%;
}

nav ul li {
	list-style: none;
	float: left;
	padding: 0 0 0 30px;
}

nav ul li a {
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 18px; 
	line-height: 45px;
}

nav ul li .underline {
	margin-top: 0; 
}

.navig_aktiv {
	border-bottom: 2px solid currentColor;
	padding-bottom: 8px;
}

.navig_wrapper {
	display: none;
}

/* ---------- ENDE NAVIG ---------- */



/* ---------- ANFANG LOGO ---------- */

.logo { 
	z-index: 99999;
	position: absolute;
    left: 45px;
	top: 40px;
	animation: animfade 0.75s;
	-moz-animation: animfade 0.75s; /* Firefox */
	-webkit-animation: animfade 0.75s; /* Safari and Chrome */
	-o-animation: animfade 0.75s; /* Opera */	
}

.logo img { 
	height: 95px;
}

/* ---------- ENDE LOGO ---------- */




/* ---------- ANFANG HOME ---------- */

/* vertical 1:2:1 */

.vertical-divider {
	display: flex;
	flex-flow: column nowrap;
	height: 100%;
}

/* container in page center */

.container {
	display: flex;
	flex-flow: row nowrap;
	flex: 2;
}

.container_mobile {
	display: none;
}

.container>.item {
	display: flex;
	flex-flow: column;
	justify-content: left;
	align-content: left;
	align-items: left;
	transition: .3s;
	max-width: 50%;
	min-width: 10%;
	flex: 1;
	text-align: left;
}

.container>.item:hover {
	transition: .3s;
	max-width: 52% !important;
	flex: 4;
}

.privatpersonen {
	z-index: -1;
	position: fixed;
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-size: 36px;
	line-height: 46px;
	width: 40%;
	left: 5vw;
	top: 40vh;
	animation: animfade 1.5s;
	-moz-animation: animfade 1.5s; /* Firefox */
	-webkit-animation: animfade 1.5s; /* Safari and Chrome */
	-o-animation: animfade 1.5s; /* Opera */
}

.bg_privatpersonen:hover {
	z-index: 10 !important;
	background-color: #FAE696;
}

.unternehmen {
	z-index: -1;
	position: fixed;
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-size: 36px;
	line-height: 46px;
	width: 40%;
	right: 5vw;
	top: 40vh;
	animation: animfade 1.5s;
	-moz-animation: animfade 1.5s; /* Firefox */
	-webkit-animation: animfade 1.5s; /* Safari and Chrome */
	-o-animation: animfade 1.5s; /* Opera */
}

.bg_unternehmen {
	cursor: url(../cursor-2.png) 10 0,auto;
}

.bg_unternehmen:hover {
	z-index: 10 !important;
	background-color: #9BDCE4;
}

.stage_bg_img { 
	background: url(../img/bg_img_stage.jpg) center no-repeat; 
	background-size: cover;
	animation: animfade 1.25s;
	-moz-animation: animfade 1.25s; /* Firefox */
	-webkit-animation: animfade 1.25s; /* Safari and Chrome */
	-o-animation: animfade 1.25s; /* Opera */
}

.container_bg_img {
	z-index: 1000;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.js-bg-calc {
	width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    position: relative;
}

/* ---------- ENDE HOME ---------- */




/* ---------- ANFANG CONTENT ---------- */

.site_bg_privatpersonen {
	background-color: #FAE696 !important;
}

.site_bg_unternehmen {
	background-color: #9BDCE4 !important;
	cursor: url(../cursor-2.png) 10 0,auto;
}

.wrapper_content {
	margin: 0 auto;
	padding-top: 285px;
	width: 1410px; 
}

.content {
	width: 1410px; 
	padding: 0 0 150px 0;
}

.wrapper_home {
	z-index: 1000 !important;
	width: 100%; 
	background-color: #F5F5F5;
}

.home {
	margin: 0 auto;
	width: 1410px; 
	padding: 25vh 0;
}

.width_1050 {
	width: 1050px; 
}

.content_kontakt {
	width: 1170px; 
	margin: 0;
	padding: 0 0 150px 0;
	animation: animfade 1.25s;
	-moz-animation: animfade 1.25s; /* Firefox */
	-webkit-animation: animfade 1.25s; /* Safari and Chrome */
	-o-animation: animfade 1.25s; /* Opera */
}

.content_kontakt_privatpersonen, .content_kontakt_unternehmen {
	width: 930px; 
	margin: 0 auto;
	padding: 200px 0 300px 0;
}

.quotes {
	margin: 0 auto;
	padding: 0 0 100px 0;
	width: 930px;
	-moz-animation: animfade 1.25s; /* Firefox */
	-webkit-animation: animfade 1.25s; /* Safari and Chrome */
	-o-animation: animfade 1.25s; /* Opera */
}

.quotes p {
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 45px; 
	line-height: 55px; 
	color: #000000; 
	padding: 0; 
	margin: 0 0 10px 0; 
}

.bild-quotes {
	margin: 0 auto;
	width: 1410px;
	padding-bottom: 150px;
	-moz-animation: animfade 1.25s; /* Firefox */
	-webkit-animation: animfade 1.25s; /* Safari and Chrome */
	-o-animation: animfade 1.25s; /* Opera */
}

.bild-quotes img {
	width: 100%;
}

.bild-teamfoto {
	margin: 0 auto;
	width: 1410px;
	padding: 100px 0 0 0;
}

.bild-teamfoto img {
	width: 1410px;
}

/* ---------- ANFANG ERGÄNZUNG TEAMFOTO DE TN ---------- */

.bild-teamfoto-de {
	margin: 0 auto;
	width: 1410px;
	padding: 0 0 150px 0;
}

.bild-teamfoto-de img {
	width: 1410px;
}

/* ---------- ENDE ERGÄNZUNG TEAMFOTO DE TN ---------- */

.arrow_link {
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 27px;
	line-height: 30px;
	background-image: url("../img/arrow-link.png");
	background-repeat: no-repeat;
	background-position: left; 
	background-size: 40px 17px;
	padding: 0 0 0 75px;
}

.arrow_link:hover {
	background-image: url("../img/arrow-link-hover.png");
	background-repeat: no-repeat;
	background-position: left; 
	background-size: 50px 17px;
	padding: 0 0 0 75px;
}

.wrapper_link_unternehmen {
	z-index: 1000;
	position: fixed; 
	width: 80px; 
	height: 100vh; 
	right: 0;
	transition: 0.5s;
	animation: animfade 0.75s;
	-moz-animation: animfade 0.75s; /* Firefox */
	-webkit-animation: animfade 0.75s; /* Safari and Chrome */
	-o-animation: animfade 0.75s; /* Opera */
}

.wrapper_link_unternehmen:hover {
	background-color: #9BDCE4;
	cursor: url(../cursor-2.png) 10 0,auto;
}

.link_unternehmen { 
	position: fixed;
	text-align: center;
	right: -35px; 
	top: 50%;
	height: 20px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.link_unternehmen a { 
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 18px; 
	line-height: 45px; 
}

.wrapper_link_privatpersonen {
	z-index: 1000;
	position: fixed; 
	width: 80px; 
	height: 100vh; 
	left: 0;
	transition: 0.5s;
	animation: animfade 0.75s;
	-moz-animation: animfade 0.75s; /* Firefox */
	-webkit-animation: animfade 0.75s; /* Safari and Chrome */
	-o-animation: animfade 0.75s; /* Opera */
}

.wrapper_link_privatpersonen:hover {
	background-color: #FAE696;
	cursor: url(../cursor.png) 10 0,auto;
}

.link_privatpersonen { 
	position: fixed;
	text-align: center;
	left: -40px; 
	top: 50%;
	height: 20px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.link_privatpersonen a { 
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 18px; 
	line-height: 45px; 
}

.portrait_kontakt { 
	width: 330px;
	float: right;
}

.portrait_kontakt img { 
	width: 330px;
}

.team_schweiz, .team_deutschland { 
	width: 1410px;
	margin: 0 auto;
}

.georges_gladig, .cornalia_schneider, .uwe_misselbeck { 
	width: 525px;
	float: left;
}

.susanne_moesle_hueppi, .horst_schneider, .joerg_puetz { 
	width: 525px;
	float: right;
}

.kurzbeschrieb { 
	width: 525px;
	padding: 20px 0 100px 0;
}

.portrait_NEU { 
	width: 330px;
	padding: 20px 0 0 0;
}

.portrait_NEU img { 
	width: 330px;
}

.sticky {
	position: fixed;
}

.cv {
	float: right;
	width: 60%;
	padding: 0 0 150px 0;
}

.cv ul {
	width: 100%;
}

.cv ul li {
	width: 100%;
}

/* ---------- ENDE CONTENT ---------- */




/* ---------- ANFANG TABELLE ---------- */

.header-tabelle { 
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 27px; 
	line-height: 37px; 
	padding: 25px;
	text-align: center;	
}

.flex-container {
  display: flex;
}

.flex-item {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	padding: 20px 20px 25px 20px;
	width: 100%;
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-size: 18px; 
	line-height: 28px; 
	text-align: center;
}

.flex-item-1, .flex-item-2, .flex-item-3, .flex-item-4 {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	padding: 20px 20px 25px 20px;
	width: 25%;
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-size: 18px; 
	line-height: 28px; 
	margin-right: 10px;
}

.flex-item-4 {
	margin-right: 0;
}

.tabellen-titel { 
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 27px; 
	line-height: 37px; 
}

.bg-05 {
	background-color:rgba(0,0,0,0.05);
}

.bg-15 {
	background-color:rgba(0,0,0,0.15);
}

.bg-25 {
	background-color:rgba(0,0,0,0.25);
}

.margin-bottom-20 {
	margin-bottom: 20px;
}

.margin-bottom-10 {
	margin-bottom: 10px;
}


/* ---------- ENDE TABELLE ---------- */




/* ---------- ANFANG FORMULAR ---------- */

.formular {
	margin: 100px 0 0 0;
}

.formma input,
.formma textarea {
	background-color:#9BDCE4;
}

.btn,
.btnma {
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-size: 18px;
	color: #E9E9E9;
	line-height: 20px; 
	background-color: #000000;
	padding: 14px 20px;
	border-style: none;
	border-radius: 7px;
	cursor: pointer;
}

.btn:hover {
	color: #FAE696;
}

.btnma:hover {
	color: #9BDCE4;
} 

label {
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-size: 18px; 
	line-height: 20px; 
}

textarea {
	width: 50%;
	height: 150px;
	padding: 12px 20px;
	margin: 10px 0 25px 0;
	box-sizing: border-box;
	background-color: #FAE696;
	border: #000000 2px solid;
	border-radius: 7px;
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-size: 18px; 
	line-height: 20px; 
}

textarea:focus {
	background-color: #D4C37F;
	outline: none !important;
}

textarea:active {
	background-color: #D4C37F;
	outline: none !important;
}

.formma textarea:focus {
	background-color: #8fbfc4;
	outline: none !important;
}

.formma textarea:active {
	background-color: #8fbfc4;
	outline: none !important;
}

input {
	width: 50%;
	padding: 12px 20px;
	margin: 10px 0 25px 0;
	box-sizing: border-box;
	background-color: #FAE696;
	border: #000000 2px solid;
	border-radius: 7px;
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-size: 18px; 
	line-height: 20px; 
}

input:focus {
	background-color: #D4C37F;
	outline: none !important;
}

input:active {
	background-color: #D4C37F;
	outline: none !important;
}

.formma input:focus {
	background-color: #8fbfc4;
	outline: none !important;
}

.formma input:active {
	background-color: #8fbfc4;
	outline: none !important;
}

/* ---------- ENDE FORMULAR ---------- */




/* ---------- ANFANG FOOTER ---------- */

.wrapper_footer { 
	padding-top: 50px;
}

.footer_privatpersonen, .footer_unternehmen { 
	width: 50%;
	float: left;
	text-align: center;
	height: 100px;
	padding-top: 40px;
	background-color: #FAE696;
}

.footer_unternehmen { 
	background-color: #9BDCE4;
	cursor: url(../cursor-2.png) 10 0,auto;
}

.wrapper_footer_kontakt { 
	z-index: 99999 !important; 
	padding-top: 150px;
	width: 100%;
	min-height: 100vh;
	background-color: #E9E9E9;
}

.wrapper_kontakt { 
	margin: 0 auto;
	width: 1410px; 
}

.som img { 
	width: 22px; 
}

/* ---------- ENDE FOOTER ---------- */




/* ---------- ANFANG TOP ARROW ---------- */

.top_arrow { 
	z-index: 9999;
	position: fixed;
	right: 40px; 
	bottom: 120px;
	width: 39px;
	height: 39px;
}

.top_arrow img { 
	width: 39px;
	height: 39px;
}

#top_arrow {
	display:none;
}

.section1 { 
	right: 0px; 
	top: 0px;
	width: 1px;
	height: 1px;
}

/* ---------- ENDE TOP ARROW ---------- */




/* ---------- ANFANG QUICK-CONTACT ---------- */

/* Quick-Contact Container (Position wie bisher) */
.quick-contact { 
  display: block;
  position: fixed;
  z-index: 100;
  right: 90px; 
  bottom: 120px;
  animation: animfade 2.5s;
}

/* Pill-Button */
.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;                           /* Abstand zwischen Icon & Text */
  background: #000;                   /* schwarzer Button */
  color: #fff;                        /* Textfarbe */
  font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 30px;                /* pillenförmig */
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}

/* Hover-Effekt */
.wa-btn:hover {
  transform: scale(1.05);
  background: #25D366;                /* WhatsApp-Grün */
  color: #fff;
}

/* Icon */
.wa-btn svg {
  width: 28px;
  height: 28px;
  fill: #fff;                         /* Icon-Farbe */
  flex-shrink: 0;
}

/* ---------- ENDE QUICK-CONTACT ---------- */




/* ---------- ANFANG QUICK-CONTACT-SCROLL ---------- */

.quick-contact-scroll { 
	display: block; 
	position: fixed;
	z-index: 100;
	right: 90px; 
	bottom: 120px;
	width: 39px;
	height: 39px;
	animation: animfade 2.5s;
	-moz-animation: animfade 2.5s; /* Firefox */
	-webkit-animation: animfade 2.5s; /* Safari and Chrome */
	-o-animation: animfade 2.5s; /* Opera */
}

.quick-contact-scroll img { 
	width: 39px;
	height: 39px;
}

#quick-contact {
	display: inline;
}

.section2 { 
	right: 0px; 
	top: 0px;
	width: 1px;
	height: 1px;
}

/* ---------- ENDE QUICK-CONTACT-SCROLL ---------- */




/* ---------- ANFANG TOOLTIP ---------- */

.quick-contact-scroll .tooltiptext {
	visibility: hidden;
	background-color: #000000;
	font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
	font-size: 14px; 
	line-height: 20px; 
	color: #E9E9E9; 
	padding: 10px 15px;
	top: -15px;
	border-radius: 3px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: auto;
	right: 128%;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Tooltip arrow */
.quick-contact-scroll .tooltiptext::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent transparent #000000;
}

/* Show the tooltip text when you mouse over the tooltip container */
.quick-contact-scroll:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

/* ---------- ENDE TOOLTIP ---------- */




/* -------- ANFANG MEDIA ---------*/

@media (max-width: 1023px){
/* Style sheet iPhone */
body, html { 
	font-size: 16px; 
	line-height: 24px; 
}

.underline:hover:before, .underline:focus:before, .underline:active:before {
  display: none;
}

h1,.h1 { 
	font-size: 28px; 
	line-height: 34px; 
	margin: 0 0 20px 0; 
}

h2,.h2 { 
	font-size: 20px; 
	line-height: 26px; 
	margin: 0 0 20px 0; 
}

h3,.h3 { 
	font-size: 18px; 
	line-height: 24px; 
	margin: 0 0 15px 0; 
}

p { 
	font-size: 23px; 
	line-height: 31px; 
	margin: 0 0 30px 0; 
}

ul {
	padding: 0 0 0 20px;
	width: 100%;
}

ul li {
	padding: 0 0 15px 5px;
}

.ul_decimal {
	width: 100%;
}

.li_decimal_1, .li_decimal_2, .li_decimal_3, .li_decimal_4, .li_decimal_5, .li_decimal_6 {
	background: url(../img/icon_decimal_1.svg) no-repeat 0 0 transparent;
	background-size: 30px;
	margin: 0 0 15px 0;
	padding: 2px 0 10px 45px;
	vertical-align: middle;
}

.li_decimal_2 {
	background: url(../img/icon_decimal_2.svg) no-repeat 0 0 transparent;
	background-size: 30px;
}

.li_decimal_3 {
	background: url(../img/icon_decimal_3.svg) no-repeat 0 0 transparent;
	background-size: 30px;
}

.li_decimal_4 {
	background: url(../img/icon_decimal_4.svg) no-repeat 0 0 transparent;
	background-size: 30px;
}

.li_decimal_5 {
	background: url(../img/icon_decimal_5.svg) no-repeat 0 0 transparent;
	background-size: 30px;
}

.li_decimal_6 {
	background: url(../img/icon_decimal_6.svg) no-repeat 0 0 transparent;
	background-size: 30px;
}

nav {
	display: none;
}

.navig_wrapper {
	display: block;
}

.navig_mobile {
	position: relative;
	padding: 120px 0 0 55px;
}

.logo { 
    left: 15px;
	top: 15px;
}

.logo img { 
	height: 60px;
}

.vertical-divider {
	display: none;
}
	
.container_mobile {
	display: block; 
}

.stage-wrapper {
	height: 100vh;
	z-index: 8999;
}

.privatpersonen {
	z-index: 2;
	position: relative;
	font-family: 'Graphik-Medium', Helvetica, Arial, sans-serif;
	font-size: 23px;
	line-height: 33px;
	width: 100%;
	left: 0;
	top: 0;
	background-color: #FAE696;
	padding: 30px 15px 45px 15px;
}

.unternehmen {
	z-index: 2;
	position: relative;
	font-size: 23px;
	line-height: 33px;
	width: 100%;
	right: 0;
	top: 0;
	background-color: #9BDCE4;
	padding: 30px 15px 45px 15px;
}

.js-bg-calc {
    position: relative;
}

.wrapper_content {
	padding-top: 110px;
	width: 100%; 
}

.content { 
	width: 100%;
	padding: 0 15px 60px 15px;
	animation: animfade 2s;
	-moz-animation: animfade 2s; /* Firefox */
	-webkit-animation: animfade 2s; /* Safari and Chrome */
	-o-animation: animfade 2s; /* Opera */
}

.home {
	width: 100%; 
	padding: 15vh 15px;
}

.width_1050 {
	width: 100%; 
}

.content_kontakt {
	width: 100%; 
	padding: 0 15px 30px 15px;
}

.content_kontakt_privatpersonen, .content_kontakt_unternehmen {
	background-color: #FAE696;
	width: 100%; 
	padding: 50px 10vw 50px 10vw;	
	margin: 50px 0 0 0;
}

.content_kontakt_unternehmen {
	background-color: #9BDCE4;
}

.quotes {
	margin: 0 auto;
	padding: 0 15px 25px 15px;
	width: 100%;
}

.quotes p {
	font-size: 23px; 
	line-height: 33px; 
	margin: 0 0 10px 0; 
}

.bild-quotes {
	width: 100%;
	padding: 0 15px 25px 15px;
}

.bild-quotes img {
	width: 100%;
}

.bild-teamfoto {
	width: 100%;
	padding: 100px 15px 0 15px;
}

.bild-teamfoto img {
	width: 100%;
}

/* ---------- ANFANG ERGÄNZUNG TEAMFOTO DE TN ---------- */
	
.bild-teamfoto-de {
	width: 100%;
	padding: 0 15px 25px 15px;
}

.bild-teamfoto-de img {
	width: 100%;
}
	
/* ---------- ENDE ERGÄNZUNG TEAMFOTO DE TN ---------- */

.text_accordion { 
	width: 100%;
	float: none;
	padding: 0 0 50px 0;
}

.portrait_kontakt { 
	display: none;
}

.portrait_kontakt img { 
	width: 100%;
}

.arrow_link {
	font-size: 16px;
	line-height: 20px;
	background-size: 30px 13px;
	padding: 0 0 0 50px;
}

.arrow_link:hover {
	background-position: left; 
	background-size: 38px 13px;
	padding: 0 0 0 50px;
}	

.wrapper_link_unternehmen {
	display: none;
}

.wrapper_link_privatpersonen {
	display: none;
}

.header-tabelle { 
	font-size: 18px; 
	line-height: 28px; 
	padding: 15px;
}

.flex-container {
	display: flex;
	flex-direction: column;
}

.flex-item {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	padding: 10px 15px;
	font-size: 16px; 
	line-height: 26px; 
	text-align: left;
}

.flex-item-1, .flex-item-2, .flex-item-3, .flex-item-4 {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	padding: 10px 15px;
	width: 100%;
	font-size: 16px; 
	line-height: 26px; 
	margin: 0 0 10px 0;
}	

.flex-item-4 {
	margin: 0;
}

.tabellen-titel { 
	font-size: 18px; 
	line-height: 28px; 
}

.wrapper_footer { 
	padding-top: 30px;
}

.footer_privatpersonen, .footer_unternehmen { 
	width: 100%;
	float: none; 
	height: 70px;
	padding: 25px 15px 0 0;
}

.wrapper_footer_kontakt { 
	padding-top: 50px;
}

.wrapper_kontakt { 
	margin: 0 auto;
	width: 100%; 
}

.som img { 
	width: 18px; 
}

.top_arrow { 
	right: 15px; 
	display: none;
}
	
.scroll { 
	display: none; 
	position: absolute;
	left: 50vw; 
	bottom: 50px;
	width: 39px;
	height: 39px;
	animation: animfade 2s;
	-moz-animation: animfade 2s; /* Firefox */
	-webkit-animation: animfade 2s; /* Safari and Chrome */
	-o-animation: animfade 2s; /* Opera */
}

.quick-contact { 
	display: block;
	position: fixed;
	z-index: 100;
	right: 30px; 
	bottom: 30px !important;
}

.quick-contact-scroll { 
	right: 30px; 
	bottom: 30px;
}

.quick-contact-scroll:hover .tooltiptext {
	visibility: hidden;
	opacity: 1;
}

.formular {
	margin: 50px 0 0 0;
}

input {
	width: 100%;
}

textarea {
	width: 100%;
}
	
.team_schweiz, .team_deutschland { 
	width: 100%;
	padding: 0 15px 0 15px;
}

.georges_gladig, .cornalia_schneider, .uwe_misselbeck { 
	width: 100%;
	float: none;
}

.susanne_moesle_hueppi, .horst_schneider, .joerg_puetz { 
	width: 100%;
	float: none;
}

.kurzbeschrieb { 
	width: 100%;
	padding: 20px 0 50px 0;
}

.portrait_NEU { 
	width: 75%;
	padding: 0;
}

.portrait_NEU img { 
	width: 100%;
}

.sticky {
	position: relative;
}

.cv {
	float: none;
	width: 100%;
	padding: 0 15px 150px 15px;
}

}

@media (min-width: 1024px) and (max-width: 1279px){

.logo img { 
	height: 85px;
}

nav {
	top: 50px;
}

}

@media (min-width: 1024px) and (max-width: 1439px){

body, html { 
	font-size: 18px; 
	line-height: 28px; 
}

h1,.h1 { 
	font-size: 32px; 
	line-height: 42px; 
	margin: 0 0 30px 0; 
}

h2,.h2 { 
	font-size: 27px; 
	line-height: 37px; 
	margin: 0 0 20px 0; 
}

h3,.h3 { 
	font-size: 22px; 
	line-height: 32px; 
	margin: 0 0 15px 0; 
}

p { 
	font-size: 36px; 
	line-height: 46px; 
	margin: 0 0 50px 0; 
}

ul {
	width: 75%;
}
	
ul li {
	padding: 0 0 15px 10px;
}

.ul_decimal {
	width: 75%;
}

.li_decimal_1, .li_decimal_2, .li_decimal_3, .li_decimal_4, .li_decimal_5, .li_decimal_6 {
	background: url(../img/icon_decimal_1.svg) no-repeat 0 0 transparent;
	background-size: 35px;
	margin: 0 0 15px 0;
	padding: 5px 0 10px 55px;
	vertical-align: middle;
}

.li_decimal_2 {
	background: url(../img/icon_decimal_2.svg) no-repeat 0 0 transparent;
	background-size: 35px;
}

.li_decimal_3 {
	background: url(../img/icon_decimal_3.svg) no-repeat 0 0 transparent;
	background-size: 35px;
}

.li_decimal_4 {
	background: url(../img/icon_decimal_4.svg) no-repeat 0 0 transparent;
	background-size: 35px;
}

.li_decimal_5 {
	background: url(../img/icon_decimal_5.svg) no-repeat 0 0 transparent;
	background-size: 35px;
}

.li_decimal_6 {
	background: url(../img/icon_decimal_6.svg) no-repeat 0 0 transparent;
	background-size: 35px;
}

nav ul li {
	padding: 0 0 0 20px;
}

nav ul li a {
	font-size: 16px; 
	line-height: 40px;
}

.navig_aktiv {
	padding-bottom: 6px;
}

.privatpersonen {
	font-size: 27px;
	line-height: 37px;
	left: 5vw;
	top: 40vh;
}

.unternehmen {
	font-size: 27px;
	line-height: 37px;
	top: 40vh;
}

.wrapper_content {
	padding-top: 235px;
	width: 100%; 
}

.content {
	width: 100%; 
	padding: 0 80px 100px 80px;
}

.home {
	width: 100%; 
	padding: 10vh 80px;
}

.width_1050 {
	width: 100%; 
}

.content_kontakt {
	width: 85%; 
	padding: 0 80px 100px 80px;
}

.content_kontakt_privatpersonen, .content_kontakt_unternehmen {
	width: 65%; 
	padding: 150px 0 200px 0;
}

.quotes {
	padding: 0 80px 50px 80px;
	width: 75%;
}

.quotes p {
	font-size: 36px; 
	line-height: 46px; 
	margin: 0 0 10px 0; 
}

.bild-quotes {
	width: 100%;
	padding: 0 80px 100px 80px;
}

.bild-teamfoto {
	width: 100%;
	padding: 50px 80px 0 80px;
}

.bild-teamfoto img {
	width: 100%;
}	

/* ---------- ANFANG ERGÄNZUNG TEAMFOTO DE TN ---------- */

.bild-teamfoto-de {
	width: 100%;
	padding: 0 80px 100px 80px;
}

.bild-teamfoto-de img {
	width: 100%;
}	

/* ---------- ENDE ERGÄNZUNG TEAMFOTO DE TN ---------- */	
	
.portrait_kontakt { 
	width: 250px;
	float: right;
}

.portrait_kontakt img { 
	width: 250px;
}
	
.wrapper_footer { 
	padding-top: 0;
}

.footer_privatpersonen, .footer_unternehmen { 
	height: 80px;
	padding-top: 35px;
}

.wrapper_kontakt { 
	width: 100%; 
}
	
.arrow_link {
	font-size: 18px;
	line-height: 20px;
	background-size: 30px 13px;
	padding: 0 0 0 60px;
}

.arrow_link:hover {
	background-position: left; 
	background-size: 38px 13px;
	padding: 0 0 0 60px;
}	
	
.wrapper_link_unternehmen {
	width: 60px; 
}

.link_unternehmen { 
	right: -35px; 
}

.link_unternehmen a { 
	font-size: 16px; 
	line-height: 40px; 
}

.wrapper_link_privatpersonen {
	width: 60px; 
}

.link_privatpersonen { 
	left: -40px; 
}

.link_privatpersonen a { 
	font-size: 16px; 
	line-height: 40px; 
}
	
.top_arrow { 
	right: 40px; 
}

.team_schweiz, .team_deutschland { 
	width: 100%;
	padding: 0 80px 0 80px;
}

.georges_gladig, .cornalia_schneider, .uwe_misselbeck { 
	width: 50%;
	float: left;
}

.susanne_moesle_hueppi, .horst_schneider, .joerg_puetz { 
	width: 50%;
	float: right;
}

.kurzbeschrieb { 
	width: 85%;
	padding: 20px 0 75px 0;
}

.portrait_NEU { 
	width: 280px;
	padding: 10px 0 0 0;
}

.portrait_NEU img { 
	width: 280px;
}

.cv {
	width: 60%;
	padding: 0 80px 150px 0;
}

}

@media (min-width: 1440px) and (max-width: 1679px){

h1,.h1 { 
	margin: 0 0 40px 0; 
}

h2,.h2 { 
	margin: 0 0 20px 0; 
}

h3,.h3 { 
	margin: 0 0 15px 0; 
}

.wrapper_content {
	padding-top: 285px;
	width: 1200px; 
}

.content {
	width: 1200px; 
	padding: 0 0 150px 0;
}

.home {
	width: 1200px; 
}

.width_1050 {
	width: 930px; 
}

.content_kontakt {
	width: 1050px; 
	margin: 0;
	padding: 0 0 150px 0;
}

.content_kontakt_privatpersonen, .content_kontakt_unternehmen {
	width: 810px; 
	padding: 200px 0 300px 0;
}
	
.quotes {
	margin: 0 auto;
	padding: 0 0 100px 0;
	width: 810px;
}

.bild-quotes {
	width: 1200px;
	padding-bottom: 150px;
}

.bild-teamfoto {
	width: 1200px;
	padding: 100px 0 0 0;
}

.bild-teamfoto img {
	width: 1200px;
}	
	
/* ---------- ANFANG ERGÄNZUNG TEAMFOTO DE TN ---------- */

.bild-teamfoto-de {
	width: 1200px;
	padding-bottom: 150px;
}

.bild-teamfoto-de img {
	width: 1200px;
}

/* ---------- ENDE ERGÄNZUNG TEAMFOTO DE TN ---------- */

.portrait_kontakt { 
	width: 300px;
	float: right;
}

.portrait_kontakt img { 
	width: 300px;
}
	
.wrapper_kontakt { 
	margin: 0 auto;
	width: 1200px; 
}

.team_schweiz, .team_deutschland { 
	width: 1200px;
	padding: 0;
}

.georges_gladig, .cornalia_schneider, .uwe_misselbeck { 
	width: 500px;
	float: left;
}

.susanne_moesle_hueppi, .horst_schneider, .joerg_puetz { 
	width: 500px;
	float: right;
}

.kurzbeschrieb { 
	width: 500px;
}

.portrait_NEU { 
	width: 300px;
}

.portrait_NEU img { 
	width: 300px;
}

.cv {
	width: 65%;
}
	
}

/* -------- ENDE MEDIA ---------*/

/* ====== START: Hero-Slideshow + Sprechblase (mit Fallback) ====== */

/* Bühne vollflächig */
.hero-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Slides (als Background-Ebene für Crossfade) */
.stage-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  will-change: opacity;
}

/* Sichtbarer Layer im Fade */
.stage-slide.is-visible { opacity: 1; }

/* Overlay-Container für Sprechblase – responsiv eingerückt */
.hero-overlay {
  position: absolute;
  z-index: 2;
  left: clamp(12px, 5vw, 80px);
  right: clamp(12px, 5vw, 80px);
  bottom: clamp(24px, 10vh, 160px);
  display: flex;
  align-items: flex-end;
}

/* Sprechblase – halbtransparent, mit Rand und Pfeil */
.speech-bubble {
  position: relative; /* Bezug für ::before/::after */
  display: inline-block;
  max-width: min(900px, 80vw);
  background: rgba(255, 255, 255, 0.65);
  border: 2px solid #000;
  border-radius: clamp(10px, 1.5vw, 16px);
  padding: clamp(12px, 1.6vw, 22px) clamp(14px, 2vw, 28px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);

  /* Parameter für Pfeil */
  --arrow: 18px;                               /* Größe äußerer Pfeil */
  --inner-offset: 2px;                         /* Abstand für sichtbaren Rand */
  --arrow-gap: clamp(12px, 2vw, 24px);         /* Einrückung vom rechten Blasenrand */
}

/* Pfeil oben rechts – Rand (zeigt nach unten-links, 90° CCW) */
.speech-bubble::after {
  content: "";
  position: absolute;
  top: calc(var(--arrow) * -1);
  right: var(--arrow-gap);
  width: var(--arrow);
  height: var(--arrow);
  background: #000; /* Randfarbe */
  /* Dreieck: Spitze nach unten-links */
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* Pfeil oben rechts – Füllung */
.speech-bubble::before {
  content: "";
  position: absolute;
  top: calc((var(--arrow) - var(--inner-offset)) * -1);
  right: calc(var(--arrow-gap) + var(--inner-offset));
  width: calc(var(--arrow) - var(--inner-offset));
  height: calc(var(--arrow) - var(--inner-offset));
  background: rgba(255,255,255,0.65); /* gleiche Füllung wie die Blase */
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* Typo in der Blase */
.speech-text {
  font-family: 'Graphik-Bold', Helvetica, Arial, sans-serif;
  font-size: clamp(20px, 2.3vw, 36px);
  line-height: 1.25;
  margin: 0;
}

/* --- Fallback / SEO-Helfer --- */

/* Sichtbares Fallback-Bild, wenn JS aus ist */
.fallback-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Sobald JS aktiv (Klasse via JS gesetzt), Fallback-Bild ausblenden */
.js-enabled .fallback-img {
  display: none !important;
}

/* Unsichtbares <img> nur für Alt/Title (SEO/Screenreader) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ---- Breakpoints passend zum Layout ---- */

/* <= 1439px: Pfeil minimal kleiner, max-width etwas lockern */
@media (max-width: 1439px) {
  .speech-bubble {
    --arrow: 16px;
    max-width: min(820px, 84vw);
  }
}

/* <= 1023px (Mobile): kompakter, Overlay höher */
@media (max-width: 1023px) {
  .hero-overlay {
    left: clamp(12px, 4vw, 24px);
    right: clamp(12px, 4vw, 24px);
    bottom: clamp(20px, 12vh, 100px);
  }
  .speech-bubble {
    --arrow: 14px;
    max-width: 92vw;
    padding: clamp(10px, 3.5vw, 16px) clamp(12px, 4vw, 18px);
    border-radius: 12px;
  }
  .speech-text {
    font-size: clamp(16px, 4.8vw, 23px);
  }
}

/* Bewegungs-Reduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  .stage-slide { transition: none; }
}

/* ====== ENDE: Hero-Slideshow + Sprechblase (mit Fallback) ====== */