/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-condensed-v27-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-condensed-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/roboto-condensed-v27-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-condensed-v27-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


body, html { margin:0; padding:0; background:#111; color:white; width:100%; font-family: 'Roboto'; arial, courier new; font-weight: 300; font-size:16px;}

h1 { font-family: 'Roboto Condensed'; font-weight:800; text-transform:uppercase; font-size:50px; letter-spacing:10px; margin:10px 0;}

h2 { font-family: 'Roboto Condensed'; font-weight:800; text-transform:uppercase; font-size:20px; letter-spacing:10px; margin:0;}

h3 { font-family: 'Roboto Condensed'; font-weight:800; text-transform:uppercase; font-size:2vw; letter-spacing:5px; margin:0; width:80%; margin:auto;}

h5 { font-family: 'Roboto Condensed'; font-weight:800; text-transform:uppercase; font-size:18px; letter-spacing:2px; margin:20px 0 10px 0;}

h6 { font-family: 'Roboto Condensed'; font-weight:800; text-transform:uppercase; font-size:14px; letter-spacing:2px; margin:20px 0 10px 0;}

p { line-height:26px; letter-spacing: -0.2px;}

/* -- Header -- */

#Logo { width:200px;position:absolute; z-index:20; top:20px; left:5%;}

#smi { position:absolute; z-index:20; right:3%; top:45px; list-style:none;}

#smi li img { list-style:none; width:25px; height:auto;}

.line { height:5px; width:100%; background:white; position:absolute; top:280px;}

.line1 { transform:rotate(4deg);}

.line2{ transform:rotate(1deg); top:285px;}

.line3{ transform:rotate(-2deg); top:435px;}

.RLc { width:85px; display:block; margin:30px auto 0 auto;}

.RLc2 { width:85px; display:block; margin:0 auto 0 auto;}

@media only screen and (max-width: 800px) {
	#Logo { width:150px;}
   .line1 {top:260px;}
	.line3{ top:415px;}
}

/* -- Slider --*/

@media only screen and (max-width: 800px) {
   .splide { margin-top:-2px;}
}

.splide { background:#111; width:87%; margin:60px auto 0 auto;}

.splide__slide { height:90vh;  vertical-align:center; min-height:350px;}

@media only screen and (max-width: 800px) {
   .splide__slide { height:auto;}
}

.splide img { }

.splide__arrow { border-radius:0; background:none; opacity:1;}

.splide__arrow svg{ fill:white; height:1.7em; width:1.7em;}

.splide__pagination { display:none;}

.splide__pagination__page.is-active { background:#fff;}

.ButtonK { color:white; border:2px solid white; padding:7px 25px; text-decoration:none; display:inline-block; margin-top:23px; text-transform:uppercase;  border-radius:50px; }

.ButtonK:hover { transition: all 0.8s ease 0s; border:2px solid #dd1e33;}


/* -- Content -- */

.BCenter { text-align:center; width:77%; margin:70px auto 45px auto;}

@media only screen and (max-width: 800px) {
   .BCenter{ width:90%;}
}


.KachelBox {display: flex; justify-content: center; gap:5px; flex-wrap: wrap;}

.Kachel {width:23%; height:auto;}

.Kachel img {width:100%;}

.KachelIm { position: relative; margin:0;}

.KachelIm .FC1{ width:80%; position: absolute; top: 50%; transform: translateY(-50%); left: 50%; transform: translateX(-50%); display:block; text-align:center; font-family: 'Roboto Condensed'; font-weight:800; text-transform:uppercase; font-size:1.9vw; text-shadow:2px 2px 5px black; }

.KachelIm .FC11{ position: absolute; top: 47%; transform: translateY(-50%); transform: translateX(-50%); display:block; text-align:center;}

.KachelIm:hover .FC1{ display:none;}

.KachelIm .FC2{ position: absolute; top: 2%; left: 2%; right:2%; bottom:3%; background:#000000d4; font-size:1vw; line-height:18px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.4s linear;}

.KachelIm .FC2 p { height:auto; line-height:18px; position: absolute; top: 40%; transform: translateY(-40%); text-align:center; padding:5px 8px;}

.KachelIm:hover .FC2{   visibility: visible; opacity: 1;}

@media only screen and (max-width: 1050px) {
   .Kachel { width:45%;}
   .KachelIm .FC2 { font-size:2vw;}
   .KachelIm .FC1 { font-size:2.5vw;}
   .KachelIm .FC2 p { line-height:25px;}
}

@media only screen and (max-width: 800px) {
   .Kachel { width:45%;}
   .KachelIm .FC2 { font-size:2vw;}
   .KachelIm .FC1 { font-size:2.5vw;}
   .KachelIm .FC2 p { line-height:20px;}
}

@media only screen and (max-width: 650px) {
   .Kachel { width:95%;}
   .KachelIm .FC2 { font-size:4vw;}
   .KachelIm .FC1 { font-size:7.5vw;}
    .KachelIm .FC2 p { line-height:24px;}
}

.DIR { text-align:center; margin:50px 0;}

.KachelBox2 {display: flex; justify-content: center; gap:20px; flex-wrap: wrap; margin:50px 0;}

.KachelFif {width:40%; height:auto;}

.VA {top: 50%; transform: translateY(-50%); position:relative;}

.KachelFif p { margin:0;}

.KachelFif2 {text-align:right;}

.KachelFif { text-align:left;}

.KachelFif ul { margin:0; padding:0;}

.KachelFif li { list-style:none; line-height:23px;}

.KachelFif img {width:90%;}

@media only screen and (max-width: 800px) {
   .KachelFif {width:90%; margin:auto; text-align:center;}
   h3 { font-size:5vw; width:90%;}
}


.BGI  {height:75vh;width:100%; background:url(../img/RomanTischtAuf_Privatkoch_Kochschule_B1.jpg); background-position:center; background-size:cover; margin:50px 0 20px 0;}


.KachelTw { width:26%; height:auto; overflow:hidden; margin:0; padding:0; background:#f5efe0;}

.KachelTw img {	width:100%; -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;}


.KachelTw:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

@media only screen and (max-width: 800px) {
   .KachelTw {width:40%;}
}

/* -- FOOTER -- */

.Footer { background:#272727; text-align:center; padding:30px 0;}

.Footer p { width:60%; margin:auto;}

#Footermenu { list-style:none; display:inline-block; margin:auto; padding:0;}

#Footermenu li { float:left; padding:0 10px;}

#Footermenu li a { color:#a5a5a5; text-transform:uppercase; font-size:11px; text-decoration:none;}

#Footermenu li a:hover {color:#df1e33;}

.TWOB { width:100%; text-align:right;}

.TWF { width:50px; height:auto; margin-right:20px;}

@media only screen and (max-width: 800px) {
   .Footer p { width:85%; margin:auto;}
}


.KID #Logo { width:200px;position:absolute; z-index:20; top:20px; left:50%; margin-left:-100px;}

.KID .BCenter { text-align:center; width:77%; margin:270px auto 45px auto;}

.KID a { color:white;}

@media only screen and (max-width: 800px) {
   .KID h1 {font-size:23px;}
}