/*
 Theme Name:   Ring48
 Theme URI:    /
 Description:  Wordpress Child Theme von FADigital.
 Author:       Frank Albrecht
 Author URI:   https://www.fa-digital.de/
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  ring48
*/

/* barlow-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: 'Barlow';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/barlow-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: url('assets/fonts/barlow-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/barlow-v12-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('assets/fonts/barlow-v12-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('assets/fonts/barlow-v12-latin-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('assets/fonts/barlow-v12-latin-300.svg#Barlow') format('svg'); /* Legacy iOS */
}
/* barlow-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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/barlow-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('assets/fonts/barlow-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/barlow-v12-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('assets/fonts/barlow-v12-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('assets/fonts/barlow-v12-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('assets/fonts/barlow-v12-latin-regular.svg#Barlow') format('svg'); /* Legacy iOS */
}
/* barlow-700 - 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: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/barlow-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: url('assets/fonts/barlow-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/barlow-v12-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('assets/fonts/barlow-v12-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('assets/fonts/barlow-v12-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('assets/fonts/barlow-v12-latin-700.svg#Barlow') format('svg'); /* Legacy iOS */
}

/* montecarlo-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: 'MonteCarlo';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/montecarlo-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('assets/fonts/montecarlo-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/montecarlo-v11-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('assets/fonts/montecarlo-v11-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('assets/fonts/montecarlo-v11-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('assets/fonts/montecarlo-v11-latin-regular.svg#MonteCarlo') format('svg'); /* Legacy iOS */
}


:root {
  font-family: 'Barlow', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  --primary: #28353B;
  --white:#ffffff;
  --gray:#efefef;
  --highlight: #7ECDB9;
  --short: all .4s;
  --centered: translate(-50%,-50%);
  text-rendering: geometricPrecision;
}

#anfrage {
  background:var(--primary);
  padding:50px;
  margin:50px 0;
}

#anfrage .textwidget {
  width:60%;
  margin:0 auto;
  position:relative;
}

#anfrage h2,
#anfrage p,
#anfrage a {
  color:var(--white);
}


/* 404 */
.error404 header {
  display: none;
}
.error404-outer {
  width:100%;
  height:100vh;
}
.error404-outer-mobile {display: none;}

@-webkit-keyframes gradientbtn {
  0%{background-position:0% 35%}
  50%{background-position:100% 66%}
  100%{background-position:0% 35%}
}
@-moz-keyframes gradientbtn {
  0%{background-position:0% 35%}
  50%{background-position:100% 66%}
  100%{background-position:0% 35%}
}
@keyframes gradientbtn {
  0%{background-position:0% 35%}
  50%{background-position:100% 66%}
  100%{background-position:0% 35%}
}

body {overflow-x: hidden;background:#fff;}
header + article {overflow: hidden;}
body.noscroll {overflow-y: hidden;}
.inner {width:90%;margin:0 auto;position:relative;}
.row {display: flex;flex-wrap: wrap;}
.clear {clear:both;}
* {margin:0px;padding:0px;font-family: 'Barlow', Arial, Helvetica, sans-serif;box-sizing: border-box;font-size:16px;}
h1 {font-size:49px;font-weight:700;line-height:35px;color:var(--primary);margin-bottom:30px;}
h1 strong {font-size:49px;color:var(--primary);}
h2 {font-weight: 300;font-size: 36px;margin-bottom:15px;color:var(--primary);}
h3 {font-size:24px;font-weight:400;margin-bottom:15px;color:var(--primary);}
h4 {font-size:18px;font-weight:400;color:var(--primary)}
p {font-size:16px;line-height:28px;margin-bottom:15px;color:var(--primary);}
p a {color: var(--blue)}
p sup {font-size:10px;}
hr {margin-bottom: 12px;}
strong {font-weight:700;}
a[href^="tel:"] {text-decoration: none;color: inherit;}

.textwidget ul {
  margin-left:20px;
  font-size:16px;
  line-height:28px;
  color:var(--primary);
  margin-bottom:25px;
}

.textwidget ul li {
  margin-bottom:8px;
}

.section {
  margin-top:60px;
}

.flexwrap {
  display:flex;
  flex-wrap: wrap;
}


/* Header */
header {
  width:100%;
  background:transparent;
  padding:15px 0px;
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  z-index: 99;
}

header .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.logo a {
  display: flex;
  flex-wrap: wrap;
  width:300px;
  align-items: center;
  text-decoration: none;
  color:var(--primary);

}

.logo img {
  flex:0 1 180px;
  max-width:180px;
  margin-right:20px;
}

.zusatz {
  flex:0 1 100px;
  max-width:100px;
  font-size:12px;
}

.logo .subline {
  flex:0 1;
}

.stripe {
  width:32px;
  height:2px;
  background:var(--primary);
  margin-bottom:8px;
  display: block;
  position: relative;
  transition: var(--short)
}

.menulabel {
  margin-right:15px;
  font-size:16px;
  text-transform:uppercase;
}

.stripe.three {
  margin-bottom:0px;
  width:22px;
  left:10px;
}

.menutoggle {
    flex: 0 1;
    display: flex;
    position: relative;
    z-index: 10;
    justify-content: flex-end;
}

.menutoggle.closeit .stripe.two {
  opacity: 0;
}

.menutoggle.closeit .stripe.one {
  transform:rotate(45deg);
  top: 8px;
  left: 5px;
}

.menutoggle.closeit .stripe.three {
  transform:rotate(-45deg);
  width:32px;
  position: relative;
  top: -12px;
  left: 5px;
}

.menutoggle:hover {
  cursor: pointer
}

.menutoggle:hover .stripe.three {
  width:32px;
  left:0px;
}

.mainmenu {
  position: fixed;
  right:-150%;
  z-index: 9;
  top:0px;
  width:100%;
  height:100vh;
  background:var(--white);
  transition: var(--short);
}

.mainmenu .menu {
  position:absolute;
  left:30%;
  top:50%;
  transform:translate(0,-50%);
}

.mainmenu ul.menu {
  list-style: none;
  padding:0px;
  margin:0px;
}

.mainmenu ul.menu li {
  margin-bottom:15px;
}

.mainmenu  ul.menu li a{
  font-size:40px;
  font-weight:300;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:var(--primary);
  transition:var(--short);
  text-decoration: none;
}

.mainmenu.active {
  right:0px;
}

/* Text, einspaltig */

.section.text ul {
  list-style:disc;
  padding:0px 0px 20px 25px;
  font-family: 'Barlow', Arial, Helvetica, sans-serif;
  color:var(--primary);
  font-size: 16px;
  line-height: 28px;
}

.section.text ul li {
  margin-bottom:5px;
}

/* Fullscreen Intro */
.overlay {
  position:absolute;
  background:var(--white);
  opacity: 0.8;
  width:100%;
  left:0;
  top:0;
  height:100%;
}

.supline {
  color:var(--primry);
  font-family: 'MonteCarlo';
  font-weight: normal;
  font-size: 60px;
  line-height:1;
}

/* Teaser */
.singleteaser {
  flex:0 1 calc(25% - 10px);
  max-width: calc(25% - 10px);
  margin:5px;
  position: relative;
  aspect-ratio: 1;
}

.singleteaser img {
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  object-fit: cover;
  z-index: 1;
  transition: var(--short);
}

.singleteaser a {
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
}

.singleteaser a:hover img {
  transform:scale(1.25);
}

.singleteaser a:hover {
  cursor: pointer;
}

.singleteaser a,
.singleteaser a h4 {
  color:var(--primary);
}

.singleteaser a h4 {
  font-weight:700;
}

.teasercontent {
  position:absolute;
  z-index: 2;
  bottom:0;
  left:0;
  width:100%;
  padding:12px;
  background:rgba(255,255,255,0.85);
}


/* Icon */
.singleicon {
  display: flex;
  flex-wrap: wrap;
  flex:0 1 33.333%;
  max-width:33.333%;
  align-items: center;
  margin-bottom:35px;
}

.singleicon p {
  line-height:21px;
  margin-bottom:0;
}

.singleicon img {
  width:55px;
  height:auto;
  margin-right:20px;
}

.iconlist h2 {
  margin-bottom:35px;
}

/* Images */

.images .flexwrap {
  margin:0 -20px;
}

.singleimage {
  margin:20px;
}

.singleimage img {
  width:100%;
  height:auto;
}

.singleimage.fullwith {
  flex:0 1 100%;
  max-width:100%;
}

.singleimage.halfwidth {
  flex:0 1 calc(50% - 40px);
  max-width:calc(50% - 40px);
}

.singleimage.thirdwidth {
  flex:0 1 calc(33.333% - 40px);
  max-width:calc(33.333% - 40px);
}

/* Texte */

.textwrap {
  flex:0 1 calc(66.666% - 20px);
  max-width:calc(66.666% - 20px);
  margin-right:20px;
}

.locationswrap {
  flex:0 1 calc(33.333% - 50px);
  max-width:calc(33.333% - 50px);
  margin-left:50px;
  margin-top:5px;
}

.singlelocation {
  display:flex;
  flex-wrap: wrap;
  color:var(--primary);
  margin-bottom:8px;
}

.location {
  flex:0 1 70%;
  max-width:70%;
  padding-right:20px;
}

.distance {
  flex:0 1 30%;
  max-width:30%;
  text-align: right;
}


/* Footer */
footer {
  text-align: center;
  padding:50px 0px 20px 0px;
}

.footerlogo {
  width:250px;
  position:relative;
  margin:0 auto;
  margin-bottom:25px;
  margin-top:50px;
}


.footerlogo img {
  width:100%;
  height:auto;
}

footer ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  width:100%;
  justify-content: center;
  padding-top:30px;
  padding-bottom:30px;
}

footer ul li {
  flex:0 1 auto;
  margin:0 20px;
}

footer ul li a {
  color:var(--primary);
  text-decoration: none;
  text-transform:uppercase;
  letter-spacing: 1px;
  font-size:16px;
}

.footertext {
  color:var(--white);
}



footer .footerlogo svg,
footer .footerlogo svg path {
  fill:var(--white);
}

.menu-footermenue-container {
  margin-bottom:30px;
}

.menu-footermenue-container ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.menu-footermenue-container ul li {
  padding: 0px 10px;
}

.menu-footermenue-container ul li a {
  color:var(--white);
  font-size:16px;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--short);
}

.menu-footermenue-container ul li a:hover {
  color:var(--highlight);
}

/* Textblock Intro */




/* Fullscreen Intro */

.fullscreenintro {
  width:100%;
  height:100vh;
  position:relative;
  overflow: hidden;
  z-index: 10;
  background:#fff;
}

.fullscreen-image {
  width:100%;
  height:100vh;
  position: relative;
}
.fullscreen-image:after {
  content:"";
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  left:0px;
  top:0px;
  position: absolute;
}
.fullscreen-content {
  width:75%;
  position: absolute;
  left:50%;
  top:50%;
  text-align: left;
  z-index: 99;
  transform:translate(-50%,-50%);
  align-self: center;;
}

.fullscreenintro-content {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, 0%);
    width: 75%;
    z-index: 9;
}
.fullscreentext {
  max-width:600px;
  width:60%;
}

.fullscreenintro svg {
  fill:#fff;
  width:220px;
  margin-bottom:15px;
  height:auto;
}

.fullvideo {
  height:100vh;
  width:100%;
}
.fullvideo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.fullvideo img.desktop {

}

.fullvideo img.mobile {
  display: none;
}

.designtwo img {
  max-width:250px !important;

}
.smalltext {
  padding:90px 0px;
}
.smalltext p,
.smalltext h2 {
  color:#fff;
}


/* Button */




.btnwrap {
  position: relative;
}

.btn-default {
  background: transparent;
  padding:18px 35px;
  text-decoration: none;
  color:var(--primary);
  border:2px solid var(--primary);
  font-weight:700;
  transition: all 0.4s;
  border-radius: 30px;
  font-size:16px;
  font-weight: 700;
  display:inline-block;
  margin-top:10px;
  position:relative;
}

.btn-default:before {
  content:"";
  width:0;
  height:100%;
  background:var(--primary);
  position: absolute;
  left:-1px;
  top:-1px;
  border-radius: 30px;
  border:2px solid var(--primary);
  z-index: 1;
  transition: all 0.4s;
  opacity: 0;
}

.btn-default:hover:before {
  width:100%;
  opacity: 1;
}

.btn-default:hover {
  color:var(--white);
}

.btn-default span {
  position: relative;
  z-index: 2;
}

.anmeldebtn.btn-default{
    position: absolute;
    right: 140px;
    padding:15px 30px;
    text-decoration: none;
    color:#fff;
    font-weight:700;
    transition: all 0.4s;
}

.btn-default:hover,
.fullscreenintro-content p a:hover,
#anmeldung p a:hover {
  cursor: pointer;
  filter:brightness(1.3)
}

.btnwrap.center {
  text-align: center;
}

/* YouTube Link */
.youtubelink .widget_sow-image {
  position:relative;
}

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

.youtubelink .widget_sow-image:after {
  content:"";
  width:100%;
  height:100%;
  display: block;
  background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
  top:0px;
  left:0px;
  position: absolute;
  pointer-events: none;
}

.youtubelink .widget_sow-image:before {
  content:"▶" !important;
  box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 25%);
  pointer-events: none;
  font-size:30px;
  color:#fff;
  width:80px;
  height:50px;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display: block;
  background:#FF0000;
  text-align: center;
  line-height: 54px;
  padding-left:4px;
  border-radius: 15px;
}


.daten ul {
  list-style: none
}

.daten ul li {
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
  color:#fff;
}

.daten ul {
  list-style: none
}

.daten ul li strong {
    color: #cd016f;
}

/* ########################
####### Smartphone Portrait
#######################  */

@media screen and (max-width: 980px) {

  .singleicon {
    flex:0 1 100%;
    max-width:100%;
  }

  #anfrage .textwidget {
  width:90%;
  }

  .singleimage.thirdwidth {
    flex: 0 1 100%;
    max-width: 100%;
    margin: 10px 20px;
}

.singleimage.halfwidth {
  flex: 0 1 100%;
  max-width: 100%;
  margin: 10px 20px;
}

.textwrap {
  flex: 0 1 100%;
  max-width: 100%;
  margin-right: 0;
  margin-bottom: 25px;
}

.locationswrap {
  flex: 0 1 100%;
  max-width: 100%;
  margin-left: 0;
  margin-top: 0;
}

.singleteaser {
  flex: 0 1 100%;
  max-width: 100%;
  margin: 5px;
  position: relative;
  aspect-ratio: 1;
}

  .smallcontent {
    padding:0;
  }

  .singlegrid {
    flex:0 1 100%;
    max-width:100%;
    margin:0 0 25px 0;
  }

  .fullscreenintro-content img {
    width: 90%;
  }

  .fullvideo img.desktop {
    display: none;
  }

  .overlay.highlay {
    display: none;
  }
  
  .fullvideo img.mobile {
    display: block;
    width:100%;
    height:auto;
    background:#000;
    padding-top:50px;
    
  }

  .anmeldebtn.btn-default {
    position: fixed;
    right: 0px;
    background: #7ECDB9;
    padding: 15px 30px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    transition: all 0.4s;
    bottom: 0px;
    width: 100%;
    text-align: center;
}
.logo svg {
    flex: 0 1 150px;
    max-width: 150px;
    margin-right: 20px;
}
.fullscreenintro-content {
  width:90%;
  top:55%;
  transform: translate(-50%, -50%);

}

.supline {
  font-size:40px;
}
h1 {
    font-size: 29px;
    font-weight:700;
    text-transform: none;
    font-weight: 300;
    line-height: 1;
}

.fullscreentext {
  max-width: 600px;
  width: 100%;
}


h1 strong {
    font-size: 22px;
}
h2 {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
}
h3 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 5px;
}
.mainmenu .menu {
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translate(0,-50%);
}
.mainmenu ul.menu li a {
    font-size: 22px;
  }
.mainmenu ul.menu li {
      margin-bottom: 25px;
  }
.zusatz {
    display: none;
  }
  .logo {
    width:150px;
  }
  header{
    display: block;
  }
  header.whitehead {
    background:var(--white);
  }
  .error404-outer {display: none;}
  .error404-outer-mobile {display: block;width:100%;height:100vh;}
  #panel-7-1-0-0 p, 
  #panel-7-1-0-0 h2 {
    text-align:left !important
  }
  .fullscreenintro {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 10;
    background: #fff;
}
  .fullvideo {
    min-height: 100vh;
    width: 100%;
    height: 100%;
  }
  #post-82, #post-3 {
    padding-top:90px;
  }
}