/*
Theme Name: Tankprofi
Version: 1.0
Year: 2024
*/

/* */
/* IMPORT FONTS */
/* */

/* open-sans-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/open-sans-v40-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('./fonts/open-sans-v40-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/open-sans-v40-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('./fonts/open-sans-v40-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* Digital Serial - latin */
@font-face {
  font-display: swap;
  font-family: 'Digital Serial';
  font-style: normal;
  font-weight: 600;  
	src: url('./fonts/digital-serial-bold.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('./fonts/digital-serial-bold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}




/* */
/* CSS RESET */
/* */

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

* {
	margin: 0;
	padding: 0;
}


html {
	hanging-punctuation: first last;
	color-scheme: dark light;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothiing: antialiased;		
}

html, body {
	background:#fff;
}

body {
	min-height: 100svh;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap:balance;
}

p,
.p {
	max-width:110ch;
	text-wrap: pretty 
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

input, button, textarea, select {
  font: inherit;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

@media (prefers-reduced-motion: no-preference) {
	:has(:target) {
		scroll-behavior: smooth;
		scroll-padding-top: 3rem;
	}
}





/* */
/* GLOBAL STYLES */
/* */


:root {
	--medium-grey: #7a7a7a;
	--light-grey: rgb(241,241,241);
	--brand-green: rgb(124,185,50);
	--brand-darker-green: #679b27;
	--standard-black: #444444;	
}

html {
	font-size:18px;	
	line-height:1.5;
}

body {	
	background:#ffffff;
	color:#333;
	font-family:'Open Sans',Arial,sans-serif;
	font-weight:400;	
	hyphens:none;	
}

@media(max-width:991px) {
	html {			
		font-size:14px;
	}
	.container {
		padding:0 15px;
	}
}

#page {
	
}

.container-fluid {
	--bs-gutter-x:0!important;
}

.color-brand-green {
	color: var(--brand-green);
}

.section {
	padding:60px 0 30px 0;
}

.section-small {
	padding:25px 0 0 0;
}

.section-first {
	padding:15px 0 60px 0;
}

.bg-lightgrey .section {
	padding-top:90px;
}

.pb-0 {
	padding-bottom:0;
}

.mt-60 {
	margin-top:60px;
}

.bg-lightgrey {
	background: var(--light-grey);
	position:relative;
	padding:0.75rem 0 1em 0;
}

.bg-lightgrey:before
 {
        content: "";
        position: absolute;  
	 top:0;
        left: 0;
        background-color: white!important;
        width: 24vw;
        height: 30px;
        clip-path: polygon(0% 0%, 100% 0%, calc(100% - 40px) 100%, 0% 100%);
}

.primary {
	color: rgba(124,185,50,.9)
}

.bg-primary
{
	background: rgba(124,185,50,.9)!important;
	color: #fff!important;	
}

.bg-secondary {
	background:#f5f5f5!important;
}

.bg-white {
	background:#fff;
}

.white {
	color:#fff;
}

.semi-bold {
	font-weight: 500;
	padding-right: 2px;
}

h1, .h1 {
	font-size: 2.5rem;
	font-weight: 400;
	line-height:1.2;
}

h2, .h2, .highlight {
	font-size:2.25rem!important;
	font-weight: 500;
	line-height:1.25;
}

.teaser-content h2 {
	font-size:1.5rem!important;	
	font-family:'Digital Serial', 'Open Sans', Arial, sans-serif!important;
}

h3,
h1.h3,
h2.h3,
h3.highlight
{
	font-family:'Digital Serial', 'Open Sans', Arial, sans-serif!important;
	font-size:1.75rem!important;
	font-weight: 500!important;
	line-height:1.3!important;
}

h3.small {
	font-size:1.5rem!important;
}

h4, .h4 {
	font-weight:400;
	font-weight:600;
}

p {
	margin-top:16px;
}
p,
li {
    font-size: 1.125rem;
	line-height: 1.6;
}

ul.list {
    list-style: none;    
    padding: .65rem .5rem;
}

ul.list li {
    position: relative;
    padding-left: 20px;  /* Platz für das Icon */
    text-indent: -20px;  /* Negativer Einzug für die erste Zeile */
}

ul.list li::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-regular);
    content: '\f105';
    color: var(--brand-green);
    margin-right: 6px;
    width: 14px;         /* Feste Breite für das Icon */
    text-indent: 0;      /* Setzt den Einzug für das Icon zurück */
}

.section {
		padding:30px 0;
	}

.service-box {
	padding-bottom:20px;
}

/* ==========
	COMPONENTS
	========= */



/* ==========
	LAYOUT
	========= */

.header-desktop {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background:#fff;
	z-index:9;
}

#content-wrapper {
	position:relative;
	margin-top:140px;
}

.top-bar {
	width:100vw;
	height:40px;
	padding:0 45px;
	background: var(--light-grey);
	line-height:1rem;
}

#menu-brand-menu {
	margin:0;
	padding:0;	
	display:flex;
	justify-content: flex-start;
	align-items: center;
}

#menu-brand-menu .menu-item {		
	padding: 5px 20px 13px 20px;	
	list-style:none;		
	font-weight:600;
}

#menu-brand-menu #menu-item-103 {	
	background:#fff;	
}

#menu-brand-menu .menu-item a, .top-bar__info {
	font-size:13px;
	color:#333;	
	text-transform:uppercase;
	text-decoration:none;	
	letter-spacing:0.5px;
}

.link-referenzen, .link-referenzen a {
	padding:20px 20px 13px 20px;
	text-decoration:none;
	text-transform:uppercase;
	font-size:13px;
	letter-spacing:0.5px;
	color:#333;
}

.header-main {			
	display:flex!important;
	align-items:center;
}

.header-main-start {
	height:100px;
	transition: all .3s ease-out;
}

.header-main-scrolled {
	height:60px;
	transition: all .3s ease-out;
}

.header-main--inner {
	height:100%;
	width:100%;
	padding:0 30px;
}

.header-logo-start {	
	height:2.6rem;
	transition: all .3s ease-out;
}

.header-logo-scrolled {	
	height:2rem;
	transition: all .3s ease-out;
}

#ubermenu-nav-main-3 li:last-child a {
	padding-right:0;
}

#header-mobile {
	display:none;
}

@media(max-width:991px) {
#header-mobile {
	display:block;
	position:fixed!important;
	top:0!important;
	left:0!important;
	right:0!important;
	width:100vw!important;
	max-width:100vw!important;
	overflow:hidden;
	height:65px!important;
	background:#fff!important;
	border-bottom:1px solid #f4f4f4!important;
	z-index:9!important;
}
	.mobile-logo {
		height:40px;
		margin-left:20px;
	}
	
	#content-wrapper {
		margin-top:65px;
	}
	.shiftnav.shiftnav-skin-standard-dark, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu {
		background: rgb(124,185,50)!important;
	}
	.shiftnav.shiftnav-skin-standard-dark li.menu-item .shiftnav-submenu-activation, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.shiftnav-retract .shiftnav-target {
		 background: rgb(124,185,50)!important;
    border-bottom: none!important;
    border-top: none!important;
		text-shadow:none!important;
	}
	.shiftnav:after {
		box-shadow:none!important;
	}
	
	.shift-logo {
		width:100%;
		display:flex;
		align-items:center;	
		justify-content:center;
		font-family:'Digital Serial', 'Open Sans', Arial, sans-serif!important;
	font-size:2rem!important;
	font-weight: 600!important;
	line-height:1.157!important;
		padding:60px!important;
	}
}

#vendor, #js {
	display:none;
}

/* ==========
	UBERMENU
	========= */
.ubermenu .ubermenu-target-text {
	color:rgb(68,68,68)!important;
	font-weight:600!important;
	line-height:1!important;
	padding:.6em 1.25em!important;
	font-size:1.25rem!important;
}

.ubermenu-sub-indicators.ubermenu-sub-indicators-align-text .ubermenu-has-submenu-drop>.ubermenu-target>.ubermenu-sub-indicator {
	margin-left:-6px!important;
}

.ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target>.ubermenu-sub-indicator {
	margin-top:-9px!important;
}

.fa-angle-down:before {
	font-size:1.15rem!important;	
}

.btn-action
{
	position: relative;
	background: rgba(124,185,50,1)!important;
	color: #fff!important;			
	border-radius:2px;
	border:none;
	padding:12px 36px 12px 24px;	
	overflow: hidden;	
}

.btn-action i {
	margin-right:15px;
}


.btn-action::before {
    content: '';	
    position: absolute;    
	right: 0;
    bottom: 0;
    width: 19px; /* Adjust the size of the fold if needed */
    height: 19px;
    background-color: white;
	border:none;
     clip-path: polygon(0 102%, 102% 0, 102% 102%);	 
    
}

.btn-action:hover {
    background-color: var(--brand-darker-green)!important;
}



/* ==========
	Components
	========= */

.hero-wrapper {
	display:flex;
	justify-content:start;
}

.hero-left, .hero-right {    
    display: flex;
    align-items: center; /* Centers the content vertically */ 
	justify-content:end;
	width: calc(99.9% / 2);
}

.hero-right img {
	height:auto;
}

.hero-text {
    padding: 20px;
    text-align: left; /* Aligns the text to the right */
    max-width: 80%; /* Limits max width of text box */
    margin-left: auto; /* Pushes the box to the right */
}

h1.hero-headline {
	font-size:1.5rem;
	color: var(--medium-grey);
	line-height:1;
}

/* Ensures the image covers the full area of hero-right */
.hero-right img {
    width: 100%; /* Makes sure the image is full width */    
	min-height:400px;
    object-fit: cover; /* Ensures image covers the area without distortion */
	object-position: 15% 50%;
}

.p-30 {
	padding:30px;
}

@media(max-width:1279px) {
	
	.container {
		padding:0 10px;
	}
	
	.section {
		max-width:calc(100vw - 30px)!important;
	}
	
	.hero-wrapper {
		flex-direction:column;
	}
	
	.hero-left, .hero-right {
		flex-direction:column;
		width:100%;
		 align-items: start; 
		justify-content: start;
	}
	
	.hero-left {
		padding-left:10px;
		margin-bottom:15px;
	}
	
	.hero-right {
		margin-top:0;
		clip-path:none!important;
	}
	
	.hero-right img {		
		max-width:100vw;
		min-height:0;
		height:auto;
		object-position: 50% 50%;
		margin-bottom:30px;
	}
	.p-30 {
		padding:0;
	}
	
	.teaser-industry {
		height:40vh;
		background-position: 100% 100%!important;
	}
	
		.teaser-private {
		height:40vh;
		background-position: 40% 100%!important;
	}
	
	
	.container-wide {
		max-width:calc(100vw - 20px)!important;
		overflow-x:hidden;
	}
	.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover, .carousel-control-prev, .carousel-control-next {
		display:none;
	}
	
	.carousel-inner {
		width: calc(100svw - 20px)!important;
	}
	
	.carousel-item img {
		width:100%;
		height:250px;			
	}
	.carousel-item .card-body {
		padding:15px 10px!important;
	}
	.carousel-item .card-body p.card-text {
	margin-top:0!important;
	}
	.service-box {
		display:none;
	}
	
	.bg-lightgrey:before {
		display:none;
	}
	
	.container-fluid.bg-lightgrey {
		padding:15px 0;
	}
	
	
}

.highlight {
	font-family:'Digital Serial', 'Open Sans', Arial, sans-serif!important;
	font-size:3.5rem;
	line-height:1!important;
	font-weight:600;	
}

.text-highlight {
	font-weight:600;
	color: var(--brand-green);
}

a.link {
	color: var(--brand-green);
	margin-right:1rem;
	font-size:1.25rem;
	text-decoration:none;
	font-weight:600;
}

a.link::before {
	 display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
	 font: var(--fa-font-regular);
	content:'\f105';
	color: var(--brand-green);
	margin-right:6px;
}

a.link:hover,
a.link:hover::before {
	color: var(--standard-black);	
}

.teaser-wrapper {
	display:flex;
	align-items:start;
}

.teaser-item {
	position:relative;	
	height:700px;		
	width: calc(99.9% / 2)
}

.teaser-item.teaser-industry {
	margin-right:6px;
}

.teaser-item.teaser-private {
	margin-left:6px;
}


.teaser-industry {
	background:url('/wp-content/uploads/2024/07/tankprofi-start-industrietank-1536x1152-v4.jpg');	
					background-position:50% 50%;
	background-size:cover;
	background-repeat:no-repeat;
}

.teaser-private {
	background:url('/wp-content/uploads/2024/07/tankprofi-start-privat-1536x1152-v1.jpg');
		background-position:50% 50%;
	background-size:cover;
	background-repeat:no-repeat;	
}

.teaser-content {
	position:absolute;
	left:40px;
	bottom:-1px;
	width:45%;
	min-width:500px;
	max-width:550px;
	background:#fff;
	padding:50px;
		clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100.1%, 0% 40px);
	background:#fff;
	outline: 1px solid white;
	
}

.teaser-content::after {
	position:relative;
}

.gs_logo_single img {
	max-height:150px!important;
	width:auto!important;
}

.teaser-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: white;
}

@media(max-width:1599px) {
	.teaser-wrapper {
		flex-direction:column;
	}
	.teaser-item {
		height:60vh;
		width:100%;
		margin-bottom:15px;
	}
	.teaser-item.teaser-industry {
	margin-right:0;
}

.teaser-item.teaser-private {
	margin-left:0;
}

}

@media(max-width:767px) {
	.teaser-content {
	position:absolute;
	left:20px;
	bottom:0;
	width:45%;
	min-width:400px;
	max-width:100svw;
	background:#fff;
	padding:45px 30px;	
}	
	.d-flex {
		flex-wrap:wrap;
	}
	
	.hero-right {
		margin-top:15px;
	}
	.section-first {
		padding:0;
	}
	.section {
		padding:30px 0;
		margin:0 15px;
		max-width:calc(100vw - 30px)!important;
		overflow:hidden;		
	}
	
	.container-fluid {
		padding:0;
	}
	
	.hero-right img {
		min-height:none;
		height:auto;
	}

}

@media(max-width:470px) {
	.section {		
		padding:20px 0!important;
	}
	
	.teaser-content {        
	position: absolute;		
		bottom:0;
		right:0;
		width:auto;
		min-width:0;        
        padding:40px 30px 10px 30px;
	}
	
	.teaser-content .d-flex {
		display:none!important;
	}
}

.hero-right,
.corner-bottomleft
{
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 40px 100%, 0% calc(100% - 40px));
}	

.carousel-inner .card,
.corner-bottomright {
	border:none;
	clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0% 100%);

}

.corner-topleft {
	clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 40px);
}

.corner-topright {
	clip-path: polygon(0% 0%, calc(100% - 40px) 0%, 100% 40px, 100% 100%, 0% 100%);
}

.carousel-inner .col:nth-child(odd) .card-body {
	background: var(--light-grey);
	color:var(--standard-black);
	padding:30px;
}

.carousel-inner .col:nth-child(even) .card-body {
	background: var(--brand-green);
	color:#fff;
	padding:30px;
}

.carousel-indicators {
	display:none;
}




@media(min-width:1500px) {
.carousel-item .col {
flex: 1 0 25%; /* Adjust to show 4 cards per slide */
max-width: 25%;
}
        .card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .card-body {
            flex: 1 1 auto;
        }

}

@media(max-width:1499px) {
	
	.carousel-item .col {
flex: 1 0 50%; /* Adjust to show 4 cards per slide */
max-width: 50%;
}
        .card {
            height: 100%;
            display: flex;
            flex-direction: column;	
			padding:0 0 30px 30px;
			
        }
        .card-body {
            flex: 1 1 auto;
        }

}

@media(max-width:799px) {
	
	.carousel-item .col {
flex: 1 0 100%; /* Adjust to show 4 cards per slide */
max-width: 100%;
}
        .card {
            height: 100%;
            display: flex;
            flex-direction: column;	
			padding:0 0 30px 0;
			
        }
        .card-body {
            flex: 1 1 auto;
        }

}

.service-wrapper {
	display:flex;
	justify-content:center;
	align-items:center;
}


.service-img {
	margin-right:90px
}

.service-img img {
	height:270px;
}

.service-desktop {
	display:block;
}

.service-mobile {
	display:none;
}

@media(max-width:991px) {
	
	h1,
	.h1 {
		font-size:2.25rem!important;
		line-height:1.2!important
	}
	h2,
	.h2,
	.highlight {
		font-size:1.75rem!important;
		line-height:1.2!important
	}
	h3,
	.h33 {
		font-size:1.5rem!important;
		line-height:1.2!important
	}
	p,
	li
	{
		font-size:1.15rem!important;
		line-height:1.!important;
	}
	
	.mt-5 {
		margin-top:1.5rem!important;
	}
	.container {
		padding: 0 15px;
	}
	.container-fluid.bg-lightgrey {
		margin-top:0;
	padding:10px 0;
	}
	.container-fluid.mb-5 {
		margin-bottom:0!important;
	}
	.m-2 {
		margin:0!important;
		margin-bottom:20px!important;
	}
	.bg-lo
	.service-wrapper {
		display:block;
		max-width:100%;
	}
	.service-img {
		padding-right:0	;
		margin-left:auto;
		margin-right:auto;
		max-height:40vh;
		margin-top:15px;
	}	
	.service-img img {
		height:auto;
	}
	.service-info {
		padding:0;
	}
	.service-info h3.small {
		font-size:1.25rem!important;
	}
	
	.service-desktop {
		display:none;
}

 .service-mobile {
	display:block;
}
}

.start-fridolin {
	position:relative;
}

.start-fridolin-content {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;	
	background:rgba(255,255,255,.9);
}

.carousel-control-next-icon, .carousel-control-prev-icon {
	padding:30px;
}

@media(min-width:1920px) {
	.container-wide {
		width:1830px;
		margin-left:auto;
		margin-right:auto;
	}
}

@media(min-width:1920px) {
	.container-fluid {
		max-width:2560px!important;
	}
}

.carousel-item a {
    text-decoration: none !important;
}

.carousel-control-next,
.carousel-control-prev {
	width:6%!important;
}

footer a {
	text-decoration:none!important;
	color:#333!important;
}

/* Row als Tabelle behandeln */
.row-custom-01 {
  display: table;
  width: auto;
  border-collapse: separate;
  border-spacing: 2rem 1rem; /* Abstand Spalten/Zeilen */
}

/* Jede Bootstrap-Col wird zu einer Tabellenzelle */
.row-custom-01 > [class*="col-"] {
  display: table-cell;
  vertical-align: top;
}

/* Listen */
ul.list-box {
  padding: 0;
  margin: 0;
}

ul.list-box li {
  list-style: none;
  margin-bottom: 15px;
}

/* Buttons */
ul.list-box a {
	display: block;
  text-decoration: none;
  white-space: nowrap; /* kein Zeilenumbruch */

}




/* ---------- Responsive Breakpoint ---------- */
/* Unterhalb 992px (Bootstrap lg) wieder Standard-Flow */
@media (max-width: 991.98px) {
  .row-custom-01 {
    display: block;
  }

  .row-custom-01 > [class*="col-"] {
    display: block;
    margin-bottom: 2rem; /* etwas Abstand zwischen den Spalten */
  }

  ul.list-box a {
    width: 100%; /* Buttons füllen die ganze Spaltenbreite */
  }
}

a.link-phone {
	text-decoration:none;
	color:#333;
	font-weight:600;
}

/* --- Stacked Responsive Tables --- */
  @media (max-width: 768px) {
      .stacked-table thead {
        display: none;
      }

      .stacked-table, 
      .stacked-table tbody, 
      .stacked-table tr, 
      .stacked-table td {
        display: block;
        width: 100%;
      }

      .stacked-table tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 0.75rem;
        background-color: #fff;
      }

      .stacked-table td {
        text-align: left;
        padding: 0.75rem;
        border: none;
        position: relative;
      }

      .stacked-table td::before {
        content: attr(data-label) ": ";
        display: block;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: #333;
      }
    }