﻿body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 18px;
    overflow-x: hidden;
}

html {scroll-behavior: smooth;}


a { 
    transition: all 0.3s ease; 
    text-decoration: none;
}

a:hover {text-decoration: none;}

button:focus { outline: none;}

p {
    color: #666;
    line-height: 1.9;
}

.tm-title-gray { color: #666; 
}

.tm-hr {
    width: 240px;
    border-top: 3px solid #0099FF;
    margin: 0;
}

.tm-hr-s { width: 140px; 
}

.tm-box-bordered { 
border: 1px solid #9C9D9E;
}

.container-fluid { 
max-width: 1480px; 
margin-right: 10%;
}

.tm-logo {
    position: relative;
    top: 50px;
    left: 15px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9C9D9E;
    width: cover;
    height: cover;
    padding: 50px 40px;
    
}

@media (max-width: 500px) {
    .tm-logo {
        left: 50%;
        margin-left: -200px;
    }
}

.tm-logo-text { font-size: 2rem;}

#parallax-1 { 
display: flex;
min-height: 690px;
}

#parallax-2 { min-height: 590px;}

#parallax-3 { min-height: 400px;}

.schaffer-logo-svg {
	position: relative;	
	transform: rotateY(0deg) rotateX(0deg) scale(1); 
	transform-style: preserve-3d;
    animation-name: blink;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-direction: initial;
	transform-origin:50% 50%;
}

@keyframes blink {
    0% { transform: scaleX(0) scaleY(0) translate(120px, 50%);}
    100% {transform: scaleX(1) scaleY(1); }
}

.sch-log-head {
	display: block;
	width: 120px;
	height: 120px;
	margin-left: 90px;
	border-radius: 50%;
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
	background-color: yellow;
	box-shadow: inset -25px -15px 40px rgba(0,0,0,.3);
	background-image: linear-gradient(-45deg, rgba(255,255,220,.3) 0%, transparent 100%);
	animation: hop 1.3s infinite linear;
}

@keyframes hop {
    0% {transform: translateY(0px);}
    50% {transform: translateY(13px);}
    100% {transform: translateY(0px);}
}

.sch-log-top {
	-webkit-animation-name: spinner; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 4s; 
    animation-name: spinner; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-duration: 4s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d;
    transform-origin: center center;
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
	}

@-webkit-keyframes spinner { 
    from 
    {-webkit-transform: rotateY(0deg);} 
    to {-webkit-transform: rotateY(-360deg);} 
	} 
}
@keyframes spinner { 
    from { 
        -moz-transform: rotateY(0deg); 
        -ms-transform: rotateY(0deg); 
        transform: rotateY(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateY(-360deg); 
        -ms-transform: rotateY(-360deg); 
        transform: rotateY(-360deg); 
    } 
}

.slog1 {
	font-size: 8.5em;
	font-weight: 1000;
	color: black;
	animation: showup 3s 1;
	filter: drop-shadow(6px 7px 2px rgb(0 0 0 / 0.5));
}

@keyframes showup {
    0% {opacity:0;margin-bottom:-800px;}
    10% {opacity:0;}
    60% {opacity:1;}
    100% {opacity:1;margin-bottom:0px;}
}

.slog2 {
	font-size: 8.5em;
	font-weight: 800;
	color: #1b5bb5;
 	animation: reveal 12s 1;
 	filter: drop-shadow(3px 7px 2px rgb(0 0 0 / 0.5));
}

@keyframes reveal {
    0% {opacity:0;}
    20% {opacity:0;}
    80% {opacity:1;}
    100% {opacity:1;}
}

.parallax-window {    
    background: transparent;
    position: relative;
}

#tm-main-nav {    
    padding: 0;
    z-index: 1000;
}

.tm-nav-container-outer {
    margin-top: 8px;
    border-top: 1px solid #CCCDCE;
    border-bottom: 1px solid #CCCDCE;
    position:sticky;
    top: 0px;
    z-index: 1000; 
    background-color: #d9ecfa; 
    box-shadow: 0 0 4px 0 rgba(144, 232, 224, 0.85), 0 6px 12px 0 rgba(24, 94, 224, 0.85);

}

.navbar-expand-lg .navbar-nav .nav-link {
    color: #6A6B6C;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    text-align: center;
    padding: 30px 49px;
    margin-right: 10px;
    text-transform: uppercase;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2));
}

.nav-item.active .nav-link,
.nav-item:hover .nav-link {
    color: #0099FF;
    border-top: 8px solid #0099FF;
    border-bottom: 8px solid #0099FF;
}
/*content Banner*/
/* === Cookie Consent Modal === */
#cookieConsentModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* dunkler Overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* === Modal Box === */
#cookieConsentModal .modal-content {
    background-color: #fff;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    text-align: left;
    animation: fadeIn 0.3s ease-in-out;
}

/* === Modal Header === */
#cookieConsentModal .modal-content h2 {
    margin-top: 0;
    font-size: 1.5rem;
    color: #333;
}

/* === Modal Text === */
#cookieConsentModal .modal-content p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* === Checkbox Gruppe === */
#cookieConsentModal .checkbox-group {
    margin: 1rem 0;
}

#cookieConsentModal .checkbox-group label {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 0.5rem;
}

#cookieConsentModal .checkbox-group input[type=checkbox] {
    margin-right: 0.5rem;
}

/* === Button Gruppe === */
#cookieConsentModal .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

#cookieConsentModal .button-group button {
    flex: 1;
    padding: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Farben für Buttons */
#acceptAllCookies {
    background-color: #007bff;
    color: #fff;
}

#acceptAllCookies:hover {
    background-color: #0056b3;
}

#declineAllCookies {
    background-color: #6c757d;
    color: #fff;
}

#declineAllCookies:hover {
    background-color: #495057;
}

#selectCookies {
    background-color: #f8f9fa;
    color: #333;
    border: 1px solid #ced4da;
}

#selectCookies:hover {
    background-color: #e2e6ea;
}

/* === Animation === */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}
/* === Responsive Anpassungen === */
@media (max-width: 480px) {
    #cookieConsentModal .modal-content {
        padding: 1.5rem;
    }

    #cookieConsentModal .button-group {
        flex-direction: column;
    }
}
/*content banner end*/
/*dropdown*/
.dropdown {
  float: left;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;       /*box größe anpassen*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #82bdf5;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/*dropdown end*/
/* Sidenav menu */
.sidenav {
  height: 100%;
  width: 0; /* changed with JS */
  position: fixed;
  z-index: 1006;
  left: 0;
  background-color: #a3cae6;
  overflow-x: hidden;
  padding-top: 80px;
  transition: 0.5s;
  box-shadow: 0 0 4px 0 rgba(144, 232, 224, 0.95), 0 6px 12px 0 rgba(24, 94, 224, 0.95);
  box-shadow: inset;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
  border: solid;
  border-color: #bad3e6;
  border-radius: 10px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  font-weight: 600;
  color: white;
  display: block;
  transition: 0.3s;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
  border-radius: 10px; 
  background-color: #81bae3;
  margin:5px;
}

.sidenav a:hover {
  color: #2f80d0;
}

.closebtn {
  position: absolute;
  top: 5px;
  left: 60%;
  right: 5px;
  box-shadow: none;
  box-sizing: unset;
}

#open {
	border-collapse: separate;
	border-spacing: 10px;
	margin-bottom: 2em;
	color: #2f80d0;
	font-weight: 600;
	text-align: right;
	border-radius: 20px;
	margin-left: 2px;
	background-color: white;
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.1));

}

.opendays {
	color: black;
}

.sn-t {
	color: black;
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.1));
}

.sn-fab-c {
	color: #f8ff7d;
	filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.1));
}

/* Language select*/
.tabs {
  display: flex;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.45) inset;
  padding: 0.75rem;
  padding-bottom: 0.30rem;
  border-radius: 99px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.tabs * {
  z-index: 2;
}

.l-container input[type=radio] {
  display: none;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 60px;
  font-size: .8rem;
  color: black;
  font-weight: 500;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.15s ease-in;
}

.notification {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .8rem;
  height: .8rem;
  position: absolute;
  top: 10px;
  left: 30%;
  font-size: 10px;
  margin-left: 0.75rem;
  border-radius: 50%;
  margin: 0px;
  background-color: #e6eef9;
  transition: 0.15s ease-in;
}

.l-container input[type=radio]:checked + label {
  color: #185ee0;
}

.l-container input[type=radio]:checked + label > .notification {
  background-color: #185ee0;
  color: #fff;
  margin: 0px;
}

.l-container input[id="radio-1"]:checked ~ .glider {
  transform: translateX(0);
}

.l-container input[id="radio-2"]:checked ~ .glider {
  transform: translateX(100%);
}

.glider {
  position: absolute;
  display: flex;
  height: 30px;
  width: 60px;
  background-color: #e6eef9;
  z-index: 1;
  border-radius: 99px;
  transition: 0.25s ease-out;
}

#radio1 {
	transition: 3s;
}

/* optional Style Page Content push */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.spaceholder  {
	padding-top: 120px;
}

.tm-intro { max-width: 580px; }
h4 { font-size: 1.5rem; }
.tm-text-primary { color: #0099FF; }
.tm-text-primary2 { color: white; }
.tm-text-primary-link { color: #0099FF; }
.tm-text-primary-link:hover { color: rgb(15, 133, 211); }

.tm-strategy-box { 
    display: flex; 
    align-items: flex-start;
}

.tm-services-box {
    display: flex;
    align-items: flex-start;
}

.tm-strategy-img { margin-right: 30px; }
.tm-services-img { margin-right: 40px; }
.tm-strategy-text { max-width: 480px;}
.mb-6 { margin-bottom: 120px; }
.mb-7 { margin-bottom: 140px; }
.mb-8 { margin-bottom: 80px; }
.mb-60 { margin-bottom: 60px; }
.mb-10 { margin-bottom: 100px; }
.mb-25 { margin-bottom: 250px; }
.mt-f { margin-top: 20px; }
.mt-6 { margin-top: 90px; }
.mt-7 { margin-top: 140px; }
.tm-px-3 {
    padding-left: 30px;
    padding-right: 30px;
}

@media (min-width: 992px) {
.pr-lg-5 { padding-right: 70px!important; }
}

.tm-text-gray { color: #666; }
.tm-bg-gray { background-color: #F2F2F2; }
.tm-bg-gray-dark { background-color: #EDEEEF; }
.tm-bg-white { background-color: rgba(255,255,255,0.6); }
.tm-bg-black-transparent { background-color: rgba(0,0,0,0.5 ); }
.tm-box { padding: 50px; }
.tm-box-2 { padding: 50px; max-width: 500px; }
.tm-box-3 { padding: 70px 35px;}
i { color: #ABC; }

.tm-overlay {
    max-width: 660px;
    padding: 75px 70px;
}

.tm-overlay2 {
    max-width: 660px;
    padding: 25px 20px;
}

.parallax-window-2 {
    display: flex;
    align-items: center;
            z-index: 1002;
}

.parallax-window-2b {
    display: flex;
    align-items: center;
}

.btn {
    padding: 15px 50px;
    border-radius: 0;
    font-size: 1.2rem;
}

.btn-primary {
    background-color: #0099FF;
    border-color: #0099FF;
}

.btn-primary:hover {
    background-color: #2f80d0;
    border-color: #2f80d0;
}

footer {
    margin-top: 70px;
    margin-bottom: 70px;
}

.tm-link-primary { color: #0099FF; }
.tm-link-primary:hover { color: #2f80d0; }
.fa-15x { font-size: 1.5em; }

.tm-social-icon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.tm-social-icon-2 {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    color: #fff;
}

.tm-social-link i { transition: all 0.3s ease; }
.tm-social-link:hover i { color: #0099FF; }

/* Hover effect */
.tm-about-person-layout {
    margin-bottom: 0; 
    width: 100%;
    
    overflow: hidden;

    
        
}

.tm-person {
	
	filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.9));
	-webkit-transition: -webkit-transform 0.55s;
	transition: transform 0.55s;
	-webkit-transform: translate3d(0,+360px,0);
	transform: translate3d(0,+360px,0);
	
}

.tm-about-person {
	position: relative;
    overflow: hidden;
    height: 455px;
    width: 100%;
    overflow: hidden;
    background: #3085a3;
	text-align: center;
	cursor: pointer;
	display: flex;
	top: 0;
		}

.tm-about-person img {
	position: absolute;
	display: block;
	min-width: 440px;
	min-height: 100%;
	overflow: hidden;
	opacity: 0.8;
	top: 0;
	/*transform: translate(-50%, -50%);*/
}

.tm-about-person figcaption {
	padding: 15px;
	color: #fff;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.tm-about-person figcaption::before,
.tm-about-person figcaption::after {
	pointer-events: none;
}

.tm-about-person figcaption,
.tm-about-person figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.tm-about-person figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.tm-about-person h2 { font-weight: 300; }
.tm-about-person h2 span { font-weight: 600; }

.tm-about-person h2,
.tm-about-person p {
	margin: 0;
}

.tm-about-person p {
	letter-spacing: 1px;
    font-size: 68.5%;
    color: #fff;
}

/*FAQ*/
/*Acco*/
.ac-container {
    max-width: 600px;
}

.ac-container label {
    height: 30px !important;
    line-height: 21px !important;
    font-size: 18px ;
    font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: #fff;
    background: -moz-linear-gradient(top,#fff 1%,#d9ecfa 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#d9ecfa));
    background: -webkit-linear-gradient(top,#fff 1%,#d9ecfa 100%);
    background: -o-linear-gradient(top,#fff 1%,#d9ecfa 100%);
    background: -ms-linear-gradient(top,#fff 1%,#d9ecfa 100%);
    background: linear-gradient(top,#fff 1%,#d9ecfa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#d9ecfa',GradientType=0 );
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1);
    height: 30px;

}

.ac-container {
    width: 100%;
    margin: 10px auto 30px auto;
    text-align: left;
}

.ac-container label:hover {
    background: #fff;
}

.ac-container input:checked + label,.ac-container input:checked + label:hover {
    background: #d9ecfa;
    color: #666;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3),0 2px 2px rgba(0,0,0,0.1);
    height: 30px;
    line-height: 21px;
    font-size: 20px;
}

.ac-container label:hover:after,.ac-container input:checked + label:hover:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center;
}

.ac-container input:checked + label:hover:after {
    background-image: url(../images/arrow_up.png);
}

.ac-container input {
    display: none;
}

.ac-container article {
    background: rgba(255,255,255,0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}

.ac-container article p {
    font-style: normal;
    color: #777;
    line-height: 21px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    font: normal normal 12px 'Open Sans';
    font-size: 16px !important;

}

.ac-container input:checked ~ article {
    -webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3);
}

.ac-container input:checked ~ article.ac-small {
    height: 180px;
    margin-bottom: 170px;

}

.ac-container input:checked ~ article.ac-medium {
    height: 240px;
    margin-bottom: 110px;

}

.ac-container input:checked ~ article.ac-large {
    height: 330px;
    margin-bottom: 20px;
}
/*Milo*/
figure.effect-milo { background: #2e5d5a; }

figure.effect-milo img {
	
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-20px,0,0) scale(1);
	transform: translate3d(-20px,0,0) scale(1);

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-milo:hover img {
	opacity: 0.5;
	-webkit-transform: translate3d(0,0,0) scale(1.12);
	transform: translate3d(0,0,0) scale(1.12);
}

figure.effect-milo h2 {
    font-size: 1.2rem;
	position: absolute;
    left: 0;
    right: 0;
	bottom: 0;
    padding: 20px;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(45, 92, 89, 0.5));
}

figure.effect-milo p {
	padding: 0 10px 0 0;
	border-right: 1px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.55s;
	-webkit-transform: translate3d(-40px,0,0);
	transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-milo:hover figcaption h3 {
	-webkit-transition: -webkit-transform 0.55s;
	transition: transform 0.55s;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	filter: drop-shadow(0px 0px 0px rgb(0 0 0 / 0.0));

}

}

/*Leistungen*/
.projcard-container {
  margin: 50px 0;
}

/* Actual Code: */
.projcard-container,
.projcard-container * {
  box-sizing: border-box;
}
.projcard-container {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}
.projcard {
  position: relative;
  width: 100%;
  height: 500px;
  margin-bottom: 40px;
  border-radius: 10px;
  background-color: #fff;
  border: 2px solid #ddd;
  font-size: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, .66);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.projcard:hover {
  box-shadow: 0 34px 32px -33px rgba(0, 0, 0, .18);
  transform: translate(0px, -3px);
}
.projcard::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(-70deg, #424242, transparent 50%);
  opacity: 0.07;
}
.projcard:nth-child(2n)::before {
  background-image: linear-gradient(-250deg, #424242, transparent 50%);
}
.projcard-innerbox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.projcard-img {
  position: absolute;
  height: 300px;
  width: 415px;
  top: 0;
  left: 0;
  transition: transform 0.2s ease;
}
.projcard:nth-child(2n) .projcard-img {
  left: initial;
  right: 0;
}
.projcard:hover .projcard-img {
  transform: scale(1.05) rotate(1deg);
}
.projcard:hover .projcard-bar {
  width: 70px;
}
.projcard-textbox {
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 430px;
  width: calc(100% - 470px);
  font-size: 17px;
}
.projcard:nth-child(2n) .projcard-textbox {
  left: initial;
  right: 430px;
}
.projcard-textbox::before,
.projcard-textbox::after {
  content: "";
  position: absolute;
  display: block;
  background: #ff0000bb;
  background: #fff;
  top: -20%;
  left: -55px;
  height: 140%;
  width: 60px;
  transform: rotate(8deg);
}
.projcard:nth-child(2n) .projcard-textbox::before {
  display: none;
}
.projcard-textbox::after {
  display: none;
  left: initial;
  right: -55px;
}
.projcard:nth-child(2n) .projcard-textbox::after {
  display: block;
}
.projcard-textbox * {
  position: relative;
}
.projcard-title {
  font-family: 'Voces', 'Open Sans', arial, sans-serif;
  font-size: 24px;
}
.projcard-subtitle {
  font-family: 'Voces', 'Open Sans', arial, sans-serif;
  color: #888;
}
.projcard-bar {
  left: -2px;
  width: 50px;
  height: 5px;
  margin: 10px 0;
  border-radius: 5px;
  background-color: #424242;
  transition: width 0.2s ease;
}
.projcard-blue .projcard-bar { background-color: #0088FF; }
.projcard-blue::before { background-image: linear-gradient(-70deg, #0088FF, transparent 50%); }
.projcard-blue:nth-child(2n)::before { background-image: linear-gradient(-250deg, #0088FF, transparent 50%); }
.projcard-red .projcard-bar { background-color: #D62F1F; }
.projcard-red::before { background-image: linear-gradient(-70deg, #D62F1F, transparent 50%); }
.projcard-red:nth-child(2n)::before { background-image: linear-gradient(-250deg, #D62F1F, transparent 50%); }
.projcard-green .projcard-bar { background-color: #40BD00; }
.projcard-green::before { background-image: linear-gradient(-70deg, #40BD00, transparent 50%); }
.projcard-green:nth-child(2n)::before { background-image: linear-gradient(-250deg, #40BD00, transparent 50%); }
.projcard-yellow .projcard-bar { background-color: #F5AF41; }
.projcard-yellow::before { background-image: linear-gradient(-70deg, #F5AF41, transparent 50%); }
.projcard-yellow:nth-child(2n)::before { background-image: linear-gradient(-250deg, #F5AF41, transparent 50%); }
.projcard-orange .projcard-bar { background-color: #FF5722; }
.projcard-orange::before { background-image: linear-gradient(-70deg, #FF5722, transparent 50%); }
.projcard-orange:nth-child(2n)::before { background-image: linear-gradient(-250deg, #FF5722, transparent 50%); }
.projcard-brown .projcard-bar { background-color: #C49863; }
.projcard-brown::before { background-image: linear-gradient(-70deg, #C49863, transparent 50%); }
.projcard-brown:nth-child(2n)::before { background-image: linear-gradient(-250deg, #C49863, transparent 50%); }
.projcard-grey .projcard-bar { background-color: #424242; }
.projcard-grey::before { background-image: linear-gradient(-70deg, #424242, transparent 50%); }
.projcard-grey:nth-child(2n)::before { background-image: linear-gradient(-250deg, #424242, transparent 50%); }
.projcard-customcolor .projcard-bar { background-color: var(--projcard-color); }
.projcard-customcolor::before { background-image: linear-gradient(-70deg, var(--projcard-color), transparent 50%); }
.projcard-customcolor:nth-child(2n)::before { background-image: linear-gradient(-250deg, var(--projcard-color), transparent 50%); }
.projcard-description {
  z-index: 10;
  font-size: 15px;
  color: #424242;
  height: 325px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.projcard-tagbox {
  position: absolute;
  bottom: 3%;
  font-size: 14px;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.projcard-tag {
  display: inline-block;
  background: #E0E0E0;
  color: #777;
  border-radius: 3px 0 0 3px;
  line-height: 26px;
  padding: 0 10px 0 23px;
  position: relative;
  margin-right: 20px;
  margin-bottom: 10px;
  cursor: default;
  user-select: none;
  transition: color 0.2s;
}
.projcard-tag::before {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  height: 6px;
  left: 10px;
  width: 6px;
  top: 10px;
}
.projcard-tag::after {
  content: '';
  position: absolute;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #E0E0E0;
  border-top: 13px solid transparent;
  right: -10px;
  top: 0;
}
/*Selbstzahler*/
.osteopic {
	display: inline;
}
/* Contact */
.kon {
	color: #666;
	font-size: 1.5rem;

}

.kons{
	color: #0099FF;
	font-size: 2rem;

}

.mapouter{
    position:relative;
    text-align:right;
    height:520px;
    width:100%;
}

.gmap_canvas {
    overflow:hidden;
    background:none!important;
    height:520px;
    width:100%;
}

/*Gallery new*/

.gallery {
	display: flex;
	padding: 2px;
	transition: .3s;
	}	
	
.gallerycaption {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 25px 15px 15px;
		width: 100%;
		font-family: 'Raleway', sans-serif;
		font-size: 16px;
		color: white;
		opacity: 0;
		background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255 ,255 , 0) 100%);
		filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
		transition: .3s;
		z-index: 6;
	}

.gallery:hover .galleryimage {
		filter: grayscale(1);
		transition: .3s;
	}
	
.gallerycolumn {
		display: flex;
		flex-direction: column;
		width: 33%;
	}
	
.gallerylink {
		margin: 2px;
		overflow: hidden;
	}	
.gallerylink:hover .galleryimage {
			transition: .3s;
			filter: grayscale(0);
			}
			
.gallerythumb:hover .gallerycaption {
				opacity: 1;
			}
		
	
	
.gallerythumb {
		position: relative;
	}
	
.galleryimage {
		display: block;
		width: 100%;
		transition: .3s;
	}	
.galleryimage:hover {
			transform: scale(1.1);
			transition: .3s;
			position: relative;
			z-index: 4;
	}
	
	

@media (max-width: 1199px) {
    .tm-box-3 { margin-bottom: 2rem; }
}

@media (min-width: 992px) and (max-width: 1100px) {
    .tm-services-img { width: 220px; }

.tm-logo{
	position: relative;	
	transform: scale(0.7);
	}
}

@media (max-width: 992px) {
.spaceholder {
	padding-top: 250px;
}
h2 {
	font-size:20px!important;
}
.osteopic {
	display: none;
}
.txt-sm{
	font-size: 10px!important;
}

.osteocol {
	margin-right: 25px;
	margin-left: 25 px;
}

.tm-logo{
	position: relative;	
	transform: scale(0.4);
	margin-bottom: 20%;
	}

    .navbar-toggler {
        position: absolute;        
        right: 15px;
        top: 10px;        
        background-color: white;
        padding: 10px 16px;
        font-size: 1.5rem;

        border-radius: 20;
    }

    .navbar-toggler i { 
    color: #0099FF; 
    }
  
    .navbar-collapse {
        position: relative;
    }


    .navbar-expand-lg .navbar-nav .nav-link {
        margin-right: 0;
        margin-top: 3px;
        margin-bottom: 3px;
        padding: 8px 25px; 
        display: block;
        text-align: center;

    } 

.nav-item.active .nav-link{
    background-color: #5cc5f2;
    color: white;
}

.nav-item:hover .nav-link {
    color: black;
    border-top: 8px solid #0099FF;
    border-bottom: 8px solid #0099FF; 

}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  min-width: 200px;       /*box größe anpassen*/
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  z-index: 1;
}

   
.dropdown-content a {
  float: none;
  color: black;
  position: sticky;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  
}

.dropdown-content2 {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  min-width: 200px;       /*box größe anpassen*/
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  z-index: 1;
}

   
.dropdown-content2 a {
  float: none;
  color: black;
  position: sticky;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  
}

.tabs {
  display: flex;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
  padding: 0.75rem;
  padding-bottom: 0.30rem;
  border-radius: 99px;
  margin:5px;
}
  
  .navbar-expand-lg .navbar-nav .nav-link .dropdown-content {
  float: right;
          
  }
    
  .navbar.responsive {
  position: relative;
  }
  
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;   
  }
  
  .navbar.responsive a {
    float: right;
    display: block;
    text-align: left;
    position: relative;
  }
  
  .navbar.responsive .dropdown {
  float: none;
  position: relative;        
  }
  
  .navbar.responsive .dropdown-content {
  position: relative;      
  }
  
  .navbar.responsive .dropdown .dropbtn {
    display: block;
    width: 50%;
    text-align: left;    
  }
  
.navbar.responsive .navbar-expand-lg .navbar-nav .nav-link {
    color: grey;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    text-align: left;
    padding: 30px 49px;
    margin-right: 150px;
    text-transform: uppercase;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    position: relative;
}
  
    .tm-box { margin-bottom: 30px; }
    .tm-box-s { max-width: 480px; }
}

/*@media (max-width: 565px) {*/
@media only screen and (max-width: 600px) {
	
/*	body {
    font-size: 24px!important;
    overflow-x: hidden;
    width: 100%;
   	}
*/
h1 { font-size: 28px!important;
	}
h2 { font-size: 20px!important;
	
}


.txt {
margin-right: 20%;
}

.txtc {
	position: flex;
	text-align: center;
	margin-left: 10%!important;
	margin-right: 10%;
	
}
    .tm-services-box {
        flex-direction: column;

    }

    .tm-services-img {
        margin-right: 0;
        margin-bottom: 30px;
    }
    .osteopic {
	display: none;
	}
	.txt-sm{
	font-size: 10px!important;
	}
	.ct2{
	display:none;
	}		
	.tm-logo{
	position: relative;	
	transform: scale(0.25);
	align: center;
	margin-left: -95%;
	}
	.mask1{   
	width: auto;
	height: 10%;
	max-height: 20%;
	}
	.parallax-1 { min-height: 90px;
	}
	.map{
	height: 250px;
	width: 250px;
	}
	.kon {
	color: #666;
	font-size: 1rem;
	padding-right: 0px;
	}

	.kons{
	color: #0099FF;
	font-size: 1.5rem;
	}
	.pal{
	padding-left: 5px;
	}
/* Actual Code: */
.projcard-container,
.projcard-container * {
  box-sizing: border-box;
}
.projcard-container {
  margin-left: auto;
  margin-right: auto;
  width: 430px;
}
.projcard {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
  border-radius: 10px;
  background-color: #fff;
  border: 2px solid #ddd;
  font-size: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, .66);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.proj1{
  height: 690px;
}
.proj2{
  height: 640px;
}
.proj3{
  height: 480px;
}
.proj4{
  height: 600px;
}
.proj5{
  height: 600px;
}
.proj6{
  height: 560px;
}
.proj1e{
  height: 680px;
}
.proj2e{
  height: 640px;
}
.proj3e{
  height: 520px;
}
.proj4e{
  height: 600px;
}
.proj5e{
  height: 640px;
}
.proj6e{
  height: 650px;
}

.projcard:hover {
  box-shadow: 0 34px 32px -33px rgba(0, 0, 0, .18);
  transform: translate(0px, -3px);
}
.projcard::before {
  content: "";
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  opacity: 0.07;
  display:none;
}
.projcard:nth-child(2n)::before {
    display:none;
}
.projcard-innerbox {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.projcard-img {
  position: absolute;
  height: 100px;
  width: 145px;
  top: 0;
  left: 0;
  transition: transform 0.2s ease;
}
.projcard:nth-child(2n) .projcard-img {
  left: initial;
  right: 0;
}
.projcard:hover .projcard-img {
  transform: scale(1.05) rotate(1deg);
}
.projcard:hover .projcard-bar {
  width: 70px;
}
.projcard-textbox {
  position: absolute;
  top: 12%;
  bottom: 7%;
  left: 30px;
  width: calc(100% - 110px);
  font-size: 14px;
}
.projcard:nth-child(2n) .projcard-textbox {
  left: initial;
  right: 430px;
}
.projcard-textbox::before,
.projcard-textbox::after {
  content: "";
  position: relative;
  display: block;
  background: #ff0000bb;
  background: #fff;
  top: -20%;
  left: -55px;
  height: 140%;
  width: 60px;
  transform: rotate(8deg);
}
.projcard:nth-child(2n) .projcard-textbox::before {
  display: none;
}
.projcard-textbox::after {
  display: none;
  left: initial;
  right: -55px;
}
.projcard:nth-child(2n) .projcard-textbox::after {
  display: block;
}
.projcard-textbox * {
  position: relative;
}
.projcard-title {
  font-family: 'Voces', 'Open Sans', arial, sans-serif;
  font-size: 24px;
  margin-left: 120px;
}
.projcard-subtitle {
  font-family: 'Voces', 'Open Sans', arial, sans-serif;
  color: #888;
  margin-left: 120px;
}
.projcard-bar {
  left: -2px;
  width: 50px;
  height: 5px;
  margin: 10px 0;
  margin-left: 130px;
  border-radius: 5px;
  background-color: #424242;
  transition: width 0.2s ease;
}
.projcard-blue .projcard-bar { background-color: #0088FF; }
.projcard-blue::before { background-image: linear-gradient(-70deg, #0088FF, transparent 50%); }
.projcard-blue:nth-child(2n)::before { background-image: linear-gradient(-250deg, #0088FF, transparent 50%); }
.projcard-red .projcard-bar { background-color: #D62F1F; }
.projcard-red::before { background-image: linear-gradient(-70deg, #D62F1F, transparent 50%); }
.projcard-red:nth-child(2n)::before { background-image: linear-gradient(-250deg, #D62F1F, transparent 50%); }
.projcard-green .projcard-bar { background-color: #40BD00; }
.projcard-green::before { background-image: linear-gradient(-70deg, #40BD00, transparent 50%); }
.projcard-green:nth-child(2n)::before { background-image: linear-gradient(-250deg, #40BD00, transparent 50%); }
.projcard-yellow .projcard-bar { background-color: #F5AF41; }
.projcard-yellow::before { background-image: linear-gradient(-70deg, #F5AF41, transparent 50%); }
.projcard-yellow:nth-child(2n)::before { background-image: linear-gradient(-250deg, #F5AF41, transparent 50%); }
.projcard-orange .projcard-bar { background-color: #FF5722; }
.projcard-orange::before { background-image: linear-gradient(-70deg, #FF5722, transparent 50%); }
.projcard-orange:nth-child(2n)::before { background-image: linear-gradient(-250deg, #FF5722, transparent 50%); }
.projcard-brown .projcard-bar { background-color: #C49863; }
.projcard-brown::before { background-image: linear-gradient(-70deg, #C49863, transparent 50%); }
.projcard-brown:nth-child(2n)::before { background-image: linear-gradient(-250deg, #C49863, transparent 50%); }
.projcard-grey .projcard-bar { background-color: #424242; }
.projcard-grey::before { background-image: linear-gradient(-70deg, #424242, transparent 50%); }
.projcard-grey:nth-child(2n)::before { background-image: linear-gradient(-250deg, #424242, transparent 50%); }
.projcard-customcolor .projcard-bar { background-color: var(--projcard-color); }
.projcard-customcolor::before { background-image: linear-gradient(-70deg, var(--projcard-color), transparent 50%); }
.projcard-customcolor:nth-child(2n)::before { background-image: linear-gradient(-250deg, var(--projcard-color), transparent 50%); }
.projcard-description {
  position: relative;
  z-index: 10;
  font-size: 15px;
  color: #424242;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.projd1{
  height: 520px;
  margin-top: 14%;
}
.projd2{
  height: 300px;
  margin-top: 12%;
}
.projd3{
  height: 260px;
  margin-top: 8%;
}
.projd4{
  height: 340px;
  margin-top: 8%;
}
.projd5{
  height: 330px;
  margin-top: 12%;
}
.projd6{
  height: 300px;
  margin-top: 15%;
}
.projd7{
  height: 340px;
  margin-top: 15%;
}
.projd1e{
  height: 490px;
  margin-top: 14%;
}
.projd2e{
  height: 300px;
  margin-top: 14%;
}
.projd3e{
  height: 260px;
  margin-top: 8%;
}
.projd4e{
  height: 340px;
  margin-top: 8%;
}
.projd5e{
  height: 330px;
  margin-top: 12%;
}
.projd6e{
  height: 380px;
  margin-top: 10%;
}
.projd7e{
  height: 340px;
  margin-top: 15%;
}
.projcard-tagbox {
  position: relative;
  bottom: 3%;
  font-size: 14px;
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.projcard-tag {
  display: inline-block;
  background: #E0E0E0;
  color: #777;
  border-radius: 3px 0 0 3px;
  line-height: 26px;
  padding: 0 10px 0 23px;
  position: relative;
  margin-right: 20px;
  margin-bottom: 10px;
  cursor: default;
  user-select: none;
  transition: color 0.2s;
}
.projcard-tag::before {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  height: 6px;
  left: 10px;
  width: 6px;
  top: 10px;
}
.projcard-tag::after {
  content: '';
  position: absolute;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #E0E0E0;
  border-top: 13px solid transparent;
  right: -10px;
  top: 0;
}
.gallerycaption {
		font-size: 5px;
		padding: 5px 5px 5px;
}

.ac-container label {
    height: 80px !important;
    line-height: 21px !important;
    font-size: 18px ;
    font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: #fff;
    background: -moz-linear-gradient(top,#fff 1%,#d9ecfa 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#d9ecfa));
    background: -webkit-linear-gradient(top,#fff 1%,#d9ecfa 100%);
    background: -o-linear-gradient(top,#fff 1%,#d9ecfa 100%);
    background: -ms-linear-gradient(top,#fff 1%,#d9ecfa 100%);
    background: linear-gradient(top,#fff 1%,#d9ecfa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#d9ecfa',GradientType=0 );
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1);
    height: 30px;
}
	
.ac-container article p {
    font-style: normal;
    color: #777;
    line-height: 21px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    font: normal normal 12px 'Open Sans';
    font-size: 14px !important;

}
.ac-container {
    width: 100%;
    margin: 10px auto 10px auto;
    text-align: left;
}

.ac-container input:checked ~ article.ac-small {
    height: 300px;
    margin-bottom: 250px;
}

.ac-container input:checked ~ article.ac-medium {
    height: 440px;
    margin-bottom: 110px;
}

.ac-container input:checked ~ article.ac-large {
    height: 530px;
    margin-bottom: 20px;
}


@media (max-width: 430px) {
    .tm-strategy-box { 
    flex-direction: column; 
}

    .tm-strategy-img {
        margin-right: 0;
        margin-bottom: 30px;
    }
}