/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* clickable div */
.click-div, .click-div-ns{
	position: relative;
	height: inherit;
/*	transition: transform .5s; /* Animation */ 
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
	border: 1x solid #f0f0f0;
    transition: box-shadow .3s;
    -webkit-transition: box-shadow .3s;
	padding: 20px;
}

.click-div a:before, .click-div-ns a:before{
	content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
}

.click-div:hover, .click-div-ns:hover {
    -webkit-box-shadow: 0 20px 40px rgba(0,0,0,.2);
    box-shadow: 0 20px 40px rgba(0,0,0,.2);
}

.click-div .gb-icon{
	margin-right: 20px;
	transition: margin-right .3s;
}

.click-div:hover .gb-icon{
	margin-right: 0;
}
/* box shadow */
.boxs{    
/*	-webkit-box-shadow: -1px 1px 3px 0 rgba(121,129,135,.3);
    box-shadow: -1px 1px 3px 0 rgba(121,129,135,.3)
*/
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
	border: 1px solid #f0f0f0;
	padding: 20px;
}

.boxsl{    
/*	-webkit-box-shadow: -1px 1px 3px 0 rgba(121,129,135,.3);
    box-shadow: -1px 1px 3px 0 rgba(121,129,135,.3)
*/
	-webkit-box-shadow: 0 0 40px rgba(0,0,0,.2);
    box-shadow: 0 0 40px rgba(0,0,0,.2);
	border: 1px solid #f0f0f0;
	padding: 20px;
}


.header-shadow{
	-webkit-box-shadow: 0 2px 8px rgba(0,0,0,.8);
    box-shadow: 0 2px 8px rgba(0,0,0,.8);
	border: 1px solid #f0f0f0;
}

/* easy table of content */
div#ez-toc-container{
	border: 2px solid #f0f0f0!important;
	padding-right: 10px !important;
	border-radius: 0 !important;
}

/* site wide smooth scroll */
html {
  scroll-behavior: smooth;
}

/* design lohntabelle */
#myInput {
  background-image: url('https://viavetia.de/wp-content/uploads/2023/12/searchicon.png'); /* Add a search icon to input */
  background-color: #fff;
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 14px; /* Increase font-size */
}

#myTable th, #myTable td {
  text-align: left; /* Left-align text */
  padding: 8px; /* Add padding */
}

#myTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

/* site logo */
.site-logo img{
	margin-bottom: -10px;
	border-radius: 0 0 6px 6px;
}

.header-image{
	position: absolute;
	top: 0px;
	z-index: 1;
}
/*
.site-header{
	margin-bottom: -5px;
} */

.no-line-link a{
	text-decoration: none;
}

/* ribbon auf box, div muss position: relative sein */
.ribbon-txt{
  /* adjust the below to control the shape */
  --d:12px; 
  --w:200px;
  --c: #28a745;
  /**/

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
  color: #fff;
  text-align: center;
  width: var(--w);
  transform-origin: bottom left;
  padding:5px 0 calc(var(--d) + 5px);
  background:
    linear-gradient(rgba(0,0,0,0.6) 0 0) bottom/100% var(--d) no-repeat
    var(--c);
  clip-path:polygon(0 100%,0 calc(100% - var(--d)),50% calc(100% - var(--d) - var(--w)/2),100% calc(100% - var(--d)),100% 100%,calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)))
}

/* angle the div */
@media (min-width: 1025px) {
    /* CSS in here for desktop only */
.angle-div{
	  transform: /*translate(29.29%, -100%)*/ rotate(5deg); /* 29.29% = 100%*(1 - cos(45deg)) */

}
}