/* ——— rw20.css – Ver 1.0.1 —— */
/* ——— doppelpunktdrei.net ——— */

/* --------------------------------------------------
–––> IMPORT SOME NICE TYPOGRAPHY
-------------------------------------------------- */

@font-face {
    font-family: "RiekeHead";
    src: url("../font/RiekeHead-Light.woff") format("woff");
    font-weight: 200;
}

@font-face {
    font-family: "RiekeHead";
    src: url("../font/RiekeHead-Regular.woff") format("woff");
    font-weight: 400;
}

@font-face {
    font-family: "RiekeHead";
    src: url("../font/RiekeHead-Bold.woff") format("woff");
    font-weight: 600;
}

@font-face {
    font-family: "RiekeText";
    src: url("../font/RiekeText-Medium.woff") format("woff");
    font-weight: 400;
}

@font-face {
    font-family: "RiekeText";
    src: url("../font/RiekeText-RegularItalic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "RiekeText";
    src: url("../font/RiekeText-Bold.woff") format("woff");
    font-weight: 600;
}

@font-face {
    font-family: "RiekeText";
    src: url("../font/RiekeText-BoldItalic.woff") format("woff");
    font-weight: 600;
    font-style: italic;
}



/* --------------------------------------------------
–––> RESET
-------------------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,
form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,
canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,
summary,time,mark,audio,video {
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	text-rendering: optimizeLegibility;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display: block; }
body { line-height: 1; }
ol,ul { list-style: none; }
blockquote,q { quotes: none; }
blockquote:before,blockquote:after,
q:before,q:after { content: ''; content: none; }
:focus { outline: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

::-webkit-input-placeholder  { color: rgba(204, 128, 102, 1);; } /* Webkit */
:-moz-placeholder { color: rgba(204, 128, 102, 1);; }  /* Firefox <= 18 */
::-moz-placeholder { color: rgba(204, 128, 102, 1);; }  /* Firefox >= 19 */
:-ms-input-placeholder {  color: rgba(204, 128, 102, 1);; } /* Internet Explorer */



/* --------------------------------------------------
–––> CORE ELEMENTS
-------------------------------------------------- */

body {
  font-family: "RiekeText", sans-serif;
  font-size: 1.25em;
  font-weight: 400;
  color: rgb(51, 115, 128);
  overflow-x: hidden;
  /* opacity: 0; */
  /* background-color: rgb(0, 50, 55); */

  /* TRANSITION */
  transition: all .15s cubic-bezier(0.3, 0, 0.6, 1);
  -moz-transition: all .15s cubic-bezier(0.3, 0, 0.6, 1);
  -webkit-transition: all .15s cubic-bezier(0.3, 0, 0.6, 1);
}

h1 {
  font-family: "RiekeHead", sans-serif;
  font-size: 2.75em;
  font-weight: 600;
  hyphens: auto;
  padding-bottom: .2em;
  color: rgb(229, 161, 138);
  border-bottom: 0.05em solid rgb(51, 115, 128);
}

h3 {
  font-family: "RiekeText", sans-serif;
  font-size: 1.25em;
  line-height: 1.3em;
  font-weight: 600;
  text-decoration: underline;
  padding-top: 1em;
  padding-bottom: .5em;
}

.heading-subline {
  font-family: "RiekeText", sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 400;
  padding-top: 0.4em;
}

p {
  line-height: 1.75em;
  padding-bottom: 1em;
}

a {
  font-weight: 600;
  text-decoration: underline;
  color:rgb(51, 115, 128);
}

strong {
  font-weight: 600;
}

#init-fade, #nav-fade, #heading-fade, #body-fade, #img-fade, #line-fade {
  opacity: 0;
}

#line-fade {
  width: 0%;
}

.core-wrapper {
  width: 1200px;
  margin: 0 auto 0 auto;
  padding: 2.25em 0;
}

.divider {
  border-bottom: 0.25em solid rgb(107, 167, 179);
  clear: both;
  padding: 0.5em;
  margin: 0.5em;
}

.schmuckrahmen-ur {
  border: 0.25em solid rgb(255, 192, 170);
  position: absolute;
  width: 102%;
  height: 102%;
  margin: 1.5em;
  z-index: 100;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.schmuckrahmen-ur:hover {
  margin: 0.75em;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.schmuckrahmen-ol {
  border: 0.25em solid rgb(255, 192, 170);
  position: absolute;
  width: 104%;
  height: 104%;
  margin: -1.25em;
  z-index: 100;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.schmuckrahmen-ol:hover {
  margin: -.85em;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.schmuckrahmen-or {
  border: 0.25em solid rgb(255, 192, 170);
  position: absolute;
  width: 104%;
  height: 104%;
  margin: -1.25em .7em;
  z-index: 100;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.schmuckrahmen-or:hover {
  margin: -.85em .3em;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.section-heading {
  font-family: "RiekeHead", sans-serif;
  font-size: 1.75em;
  font-weight: 600;
  width: 10em;
  height: 2.05em;
  margin: -1em auto;
  padding: 0.2em;
  color: white;
  background-color: rgb(107, 167, 179);
  border: 0.1em solid white;
}

.section-heading div {
  width: 100%;
  height: 100%;
  border: 0.07em solid rgb(255, 192, 170);
  text-align: center;
  padding-top: 0.15em;
}

#elc-cookie-consent #elc-cookie-consent-settings {
  line-height: 1.5em;
}

.elc-primary-heading {
  margin-bottom: .5em;
}


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

  .core-wrapper {
    width: 100%;
  }

}

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

  body {
    font-size: 1em;
  }

  .schmuckrahmen-ur {
    border: 0.2em solid rgb(255, 192, 170);
    margin: 1em;
  }

  .schmuckrahmen-or {
    border: 0.2em solid rgb(255, 192, 170);
  }

  .schmuckrahmen-ol {
    border: 0.2em solid rgb(255, 192, 170);
  }

  .divider {
    border-bottom: 0.2em solid rgb(107, 167, 179);
  }

}

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

  body {
    font-size: 0.9em;
  }

  h1 {
    font-size: 2em;
  }

  .divider {
    margin: 0 !important;
  }

}

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

  .schmuckrahmen-ur {
    margin: 0.5em;
  }

  .schmuckrahmen-ol {
    margin: -.65em;
  }

  .schmuckrahmen-or {
    margin: -.65em .35em;
  }

  .schmuckrahmen-ol:hover {
    margin: -.35em;
  }

  .schmuckrahmen-or:hover {
    margin: -.35em .05em;
  }

}




/* --------------------------------------------------
–––> HEAD
-------------------------------------------------- */

.head {
  width: 100%;
  height: 7em;
  background-color: rgb(107, 167, 179);
  position: fixed;
  z-index: 10000;
  -webkit-box-shadow: 0px 0px 100px 0px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 100px 0px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 100px 0px rgba(255,255,255,0.8);
}

.head-logo {
  background: url("../svg/rw-logo-head.svg") no-repeat;
  width: 290px;
  height: 50px;
}

.head-logo span {
  font-size: 1.05em;
  font-weight: 400;
  color: white;
  float: right;
  padding: 60px 8px 0 0;
}


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

  .head {
    height: 6.0em;
  }

  .head .core-wrapper {
    padding: 1.875em 0;
  }

  .head-logo {
    width: 13em;
    height: 2.35em;
  }

  .head-logo span {
    font-size: 0.93em;
    padding: 3em 0.45em 0 0;
  }

}

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

  .head {
    height: 4.5em;
  }

  .head .core-wrapper {
    padding: 1.15em 0;
  }

  .head-logo span {
    display: none;
  }

}



/* --------------------------------------------------
–––> NAVIGATION
-------------------------------------------------- */

nav {
  float: right;
  position: relative;
  bottom: 3.25em;
}

nav ul {
  display: flex;
}

nav ul li:not(:last-child) {
  padding: 0 1em 0 0;
}

nav ul li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 0 2px 1em;
  background-color: rgb(255, 192, 170);
}

nav a, #nav-toggle {
  color: white;
  text-decoration: none;
  padding-bottom: 0em;
  border-bottom: 0.1em solid rgb(51, 115, 128);

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

nav a:hover, #nav-toggle:hover {
  border-bottom: 0.25em solid rgb(255, 192, 170);
  padding-bottom: 0.25em;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

nav .active {
  border-bottom: 0.1em solid rgb(255, 192, 170);

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

#nav-toggle {
  float: right;
  display: none;
  position: relative;
  bottom: -0.9em;
  padding-bottom: 2px;
}


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

  .head {
    padding: 0 2em;
  }

}

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

  #head-nav ul {
    display: none;
    background: rgb(77, 140, 153);
    width: 150px;
    padding: 20px 20px;
    line-height: 2em;
    margin-top: 3em;
    margin-right: -20px;
    text-align: right;
  }

  nav ul li:not(:last-child)::after {
    content: none;
  }

  nav ul li:not(:last-child) {
    padding: initial;
  }

  #nav-toggle {
    display: initial;
  }

}

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

  #head-nav ul {
    margin-top: 4em;
  }

  #nav-toggle {
    bottom: -0.8em;
  }

}

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

  .head {
    padding: 0 1em;
  }

}


/* --------------------------------------------------
–––> INTRO
-------------------------------------------------- */

.intro {
  background: url("../img/rw-sbkd-1.png") no-repeat center;
  background-size: cover;
  width: 100%;
  height: 960px;
  padding-top: 8em;
}

.intro-heading {
  float: left;
  max-width: 50%;
  padding-top: 3em;
  position: relative;
  z-index: 100;
}

.intro-heading span {
  font-family: "RiekeHead", sans-serif;
  font-size: 4.75em;
  line-height: 1.2em;
  font-weight: 600;
  color: rgb(229, 161, 138);
}

.intro-body {
  float: left;
  max-width: 60%;
  padding: 1em 0.5em;
}

.intro-portrait {
  position: relative;
  float: right;
  display: flex;
  border: 0.25em solid rgb(107, 167, 179);
  margin: -300px 0;
}

.intro-portrait-img {
  width: 390px;
  height: 520px;
}


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

  .intro {
    height: 930px;
  }

  .intro .core-wrapper {
    padding: 2em;
  }

  .intro-heading span{
    font-size: 3.75em;
  }

  .intro-portrait {
    margin: -260px 0;
  }


}

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

  .intro {
    height: 800px;
  }

  .intro-heading {
    padding-top: initial;
  }
  
  .intro-heading span{
    font-size: 3.25em;
  }

  .intro-body {
    font-size: 0.9em;
    max-width: 50%;
  }

  .intro-portrait {
    margin: -210px 0;
  }

  .intro-portrait-img {
    width: 340px;
    height: 450px;
  }

}

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

  .intro-heading span {
    font-size: 2.75em;
  }

  .intro-portrait {
    margin: -185px 0;
  }

}

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

  .intro {
    height: 720px;
  }
  
  .intro-heading span {
    font-size: 2.5em;
  }

  .intro-body {
    font-size: 1em;
    max-width: 50%;
  }

  .intro-portrait {
    margin: -150px 0;
    border: 0.2em solid rgb(107, 167, 179);
  }

  .intro-portrait-img {
    width: 300px;
    height: 400px;
  }

}

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

  .intro {
    height: 620px;
  }

  .intro .core-wrapper {
    padding: 0 1em;
  }

  .intro-portrait {
    margin: -110px 0;
  }

  .intro-portrait-img {
    width: 230px;
    height: 300px;
  }

}

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

  .intro {
    padding-top: 8em;
    height: 520px;
  }

  .intro-heading span {
    font-size: 2em;
  }

  .intro-body {
    max-width: 100%;
    margin-top: 2em;
    padding: 1em 0;
  }

  .intro-portrait {
    margin: -115px 0;
  }

  .intro-portrait-img {
    width: 8em;
    height: 9em;
  }

}

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

  .intro-heading span {
    font-size: 1.5em;
  }

  .intro-portrait {
    margin: -105px 0;
  }

  .intro-portrait-img {
    width: 8em;
    height: 8em;
  }

}



/* --------------------------------------------------
–––> NEWS
-------------------------------------------------- */

.news .core-wrapper {
  padding: 2em 6em;
}

.news-item-odd {
  padding: 5em 0;
}

.news-img-frame-odd {
  position: relative;
  display: flex;
  float: left;
  width: min-content;
  margin-right: 1.75em;
  border: 0.15em solid rgb(107, 167, 179);
}

.news-img {
  width: 14em;
  height: 8em;
}

.schmuckrahmen-news-odd {
  border: 0.15em solid rgb(255, 192, 170);
  position: absolute;
  width: 102%;
  height: 104%;
  margin: -0.7em 0.4em;
  z-index: 100;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.news-img-frame-odd:hover .schmuckrahmen-news-odd {
  margin: -1.2em 0.9em;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.news-item-even {
  padding: 5em 0;
  text-align: right;
}

.news-img-frame-even {
  position: relative;
  display: flex;
  float: right;
  width: min-content;
  margin-left: 1.75em;
  border: 0.15em solid rgb(107, 167, 179);
}

.schmuckrahmen-news-even {
  border: 0.15em solid rgb(255, 192, 170);
  position: absolute;
  width: 102%;
  height: 104%;
  margin: 0.4em -0.7em;
  z-index: 100;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.news-img-frame-even:hover .schmuckrahmen-news-even {
  margin: 0.9em -1.2em;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.news-content p {
  padding-bottom: 0.2em;
}

.news-headline {
  font-family: "RiekeHead", sans-serif;
  font-size: 2em;
  line-height: 1.25em;
  font-weight: 600;
  color: rgb(229, 161, 138);
}


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

  .news .core-wrapper {
    padding: 2em 4em;
  }

  .news-headline {
    font-size: 1.75em;
  }

}

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

  .news-headline {
    font-size: 1.75em;
  }

}

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

  .news .core-wrapper {
    padding: 2em;
  }

  .news-item-odd, .news-item-even {
    padding: 3em 0;
  }

  .news-item-even {
    text-align: left;
  }

  .news-img {
    width: 11em;
    height: 7em;
  }

  .news-img-frame-even {
    margin-left: initial;
    margin-right: 1.75em;
    float: left;
  }

  .news-headline {
    font-size: 1.4em;
  }

}

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

  .news-img {
    width: 9em;
    height: 6em;
  }

  .news-headline {
    font-size: 1.25em;
  }

  .news-body p {
    font-size: .75em;
  }

}

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

  .news-img-frame-odd, .news-img-frame-even {
    margin-left: -3em;
  }

}



/* --------------------------------------------------
–––> VITA
-------------------------------------------------- */

.vita .core-wrapper {
  padding: 2em 6em;
}

.vita {
  background: url("../img/rw-sbkd-2.png") no-repeat center;
  background-size: cover;
  width: 100%;
  height: 55em;
  overflow: hidden;
}

.vita-item-wrapper {
  margin: 7em 0;
  height: 14em;
}

.vita-heading p {
  font-family: "RiekeHead", sans-serif;
  font-size: 3em;
  line-height: 1.2em;
  font-weight: 600;
  color: rgb(229, 161, 138);
  position: relative;
  left: 1em;
  padding-bottom: initial;
}

.vita-heading-right p {
  font-family: "RiekeHead", sans-serif;
  font-size: 3em;
  line-height: 1.2em;
  font-weight: 600;
  color: rgb(229, 161, 138);
  padding: 0 50px;
  text-align: right;
  position: relative;
  right: 1em;
  padding-bottom: initial;
}

.vita-portrait-img {
  width: 14em;
  height: 14em;
}

.vita-portrait-left {
  position: relative;
  float: left;
  display: flex;
  width: max-content;
  height: max-content;
  border: 0.25em solid rgb(107, 167, 179);
}

.vita-portrait-right {
  position: relative;
  float: right;
  display: flex;
  width: max-content;
  height: max-content;
  border: 0.25em solid rgb(107, 167, 179);
}

.vita .divider {
  clear: initial;
  padding: initial;
}

.vita-table {
  /* float: left; */
  padding: 1em 2em;
}

.vita-table-right {
  /* float: right; */
  padding: 1em 2em;
}

.vita-table-item {
  display: grid;
  grid-template-columns: 1.25fr 3fr;
  grid-column-gap: 1em;
  align-items: baseline;
  padding: 0.35em;
}

.vita-table-item-right {
  display: grid;
  grid-template-columns: 3fr 1.25fr;
  grid-column-gap: 1em;
  align-items: baseline;
  padding: 0.35em;
}

.vita-table-label {
  grid-column: 1;
  text-align: right;
  color: rgb(204, 128, 102);
  font-weight: 600;
  font-size: 0.85em;
}

.label-right {
  grid-column: 2 !important;
  text-align: left !important;
}

.content-right {
  grid-column: 1 !important;
  text-align: right !important;
}

.vita-table-content {
  grid-column: 2;
  font-weight: 600;
}


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

  .vita .core-wrapper {
    padding: 2em 4em;
  }

}

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

  .vita .core-wrapper {
    padding: 2em;
  }

}

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

  .vita {
    height: 48em;
  }

  .vita-item-wrapper {
    margin: 5em 0;
  }

  .vita-heading p, .vita-heading-right p {
    font-size: 2.5em;
  }

  .vita-portrait-img {
    width: 12em;
    height: 12em;
  }

  .vita-table, .vita-table-right {
    padding: 0 1em;
  }

}

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

  .vita-portrait-left, .vita-portrait-right {
    border: 0.2em solid rgb(107, 167, 179);
  }

}

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

  .vita {
    height: 44em;
  }

  .vita-item-wrapper {
    margin: 4em 0;
  }

  .vita-table, .vita-table-right {
    padding: .8em 1.5em;
  }

}

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

  .vita-portrait-img {
    width: 11em;
    height: 11em;
  }

  .vita-portrait-left {
    margin-left: -3em;
    margin-top: .6em;
  }

  .vita-portrait-right {
    margin-right: -3em;
    margin-top: .6em;
  }

  .vita-table-label {
    font-size: .7em;
  }

  .vita-table-content {
    font-size: .9em;
  }

}

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

  .vita .core-wrapper {
    padding: 4.5em 0;
  }

  .vita-heading, .vita-heading-right {
    margin-bottom: 1em;
  }

  .vita-heading p, .vita-heading-right p {
    font-size: 2em;
  }

  .vita-portrait-img {
    width: 7em;
    height: 7em;
  }

  .vita-portrait-left {
    margin-left: -1em;
    margin-top: -3em;
  }

  .vita-portrait-right {
    margin-right: -1em;
    margin-top: -3em;
  }

  .vita-table, .vita-table-right {
    padding: .8em 2.5em;
    clear: both;
  }

}

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

  .vita-portrait-img {
    width: 5em;
    height: 5em;
  }

  .vita-portrait-left {
    margin-left: -1em;
    margin-top: -1em;
  }

  .vita-portrait-right {
    margin-right: -1em;
    margin-top: -1em;
  }

  .vita-table, .vita-table-right {
    padding: .8em .5em;
    clear: both;
  }

}



/* --------------------------------------------------
–––> HÖRPROBEN
-------------------------------------------------- */

.hoerproben .core-wrapper {
  padding: 8em 0;
}

.hoerproben-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  grid-gap: 2em;
}

.hoerproben-grid-tint {
  width: 100%;
  height: 100%;
  background-color: rgb(107, 167, 179);
  opacity: 0;
  z-index: 0;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.hoerproben-grid-img {
  width: 280px;
  height: 170px;
  border: 0.15em solid rgb(107, 167, 179);
  z-index: -10;
}

.hoerproben-grid-meta {
  position: absolute;
  border: 0.15em solid rgb(255, 192, 170);
  width: 280px;
  height: 170px;
  color: white;
  padding: 5px 10px;
  margin: 0px;
  opacity: 0;
  z-index: 10;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.hoerproben-grid-meta video {
  display: none;
}

.hoerproben-grid-meta-rolle {
  font-family: "RiekeHead", sans-serif;
  font-size: 1.25em;
  font-weight: 600;
  line-height: initial;
  padding-bottom: 0.1em;
  width: 230px;
}

.hoerproben-grid-meta-werk {
  font-size: 0.7em;
  line-height: 1.35em;
  width: 230px;
}

.hoerproben-grid-btn div {
  background: url("../svg/ico-play.svg") no-repeat;
  width: 18px;
  height: 18px;
  float: left;
}

.hoerproben-grid-btn {
  position: absolute;
  bottom: 15px;
}

.hoerproben-grid-meta a {
  color: white;
  font-size: 0.7em;
  position: relative;
  top: -4px;
  padding: 10px;
}

.hoerproben-grid-item:hover .hoerproben-grid-tint {
  opacity: 0.8;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.hoerproben-grid-item:hover .hoerproben-grid-meta {
  padding: 20px 25px;
  margin: -10px;
  opacity: 1;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}


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

  .hoerproben .core-wrapper {
    padding: 8em 2em;
  }

  .hoerproben-grid-img {
    width: 100%;
  }

  .hoerproben-grid-meta {
    width: calc(100% / 3 - 2.75em);
    padding: 20px 25px;
    margin: -10px;
    opacity: 1;

    /* TRANSITION OFF */
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
  }

  .hoerproben-grid-tint {
    opacity: 0.7;
  }

}

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

  .hoerproben-grid-meta {
    width: calc(100% / 2 - 3em);
  }

}

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

  .hoerproben-grid-meta {
    width: calc(100% / 2 - 3em);
  }

  .hoerproben-grid-meta-rolle {
    font-size: 1.5em;
  }

  .hoerproben-grid-meta-werk {
    font-size: 0.85em;
  }

}

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

  .hoerproben-grid-meta {
    width: calc(100% - 4em);
  }

}

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

  .hoerproben-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

}




/* --------------------------------------------------
–––> REFERENZEN
-------------------------------------------------- */

.referenzen {
  padding-bottom: 9em;
}

.referenzen-listing {
  padding: 0 8em;
}

.referenzen-listing-filter {
  padding: 60px;
  display: flex;
  justify-content: center;
}

.referenzen-listing-filter-btn {
  background-color: rgb(255, 236, 229);
  color: rgb(204, 128, 102);
  padding: 0.5em;
  font-weight: 600;
  font-size: 0.85em;
  margin: 0.5em;
  text-decoration: none;
  display: flex;
}

.referenzen-listing-filter-btn span {
  padding: 0 5px;
}

.filter-btn-active {
  background-color: rgb(76, 140, 153);
  color: white;
}

.filter-btn-icon {
  width: 16px;
  height: 16px;
  background-color: white;
}

.icon-active {
  width: 16px;
  height: 16px;
  background-color: rgb(229, 161, 138);
  border: 3px solid white;
}

.referenzen-listing-legende {
  color: rgb(229, 161, 138);
  font-size: 0.8em;
  line-height: 1.5em;
  font-style: italic;
}

.referenzen-listing-item {
  display: grid;
  grid-template-columns: 3fr 3fr 1fr;
  grid-column-gap: 1.25em;
  grid-row-gap: 0.75em;
  align-items: baseline;
  padding: 0.7em 0;
  font-size: 0.85em;
  border-bottom: 0.1em solid rgb(255, 217, 204);
}

.referenzen-listing-item-rolle {
  grid-column: 1;
  line-height: 1.35em;
}

.referenzen-listing-item-werk {
  grid-column: 2;
  line-height: 1.35em;
}

.referenzen-listing-item-meta {
  grid-column: 3;
  line-height: 1.35em;
  font-size: 0.85em;
  color: rgb(204, 128, 102);
  text-align: right;
}

.tab_filme, .tab_games, .tab_hoerspiele {
  display: none;
}


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

  .referenzen-listing {
    padding: 0 2em;
  }

}

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

  .referenzen-listing-item {
    display: block;
  }

}



/* --------------------------------------------------
–––> KONTAKT
-------------------------------------------------- */

.kontakt {
  background: url("../img/rw-sbkd-3.png") no-repeat center;
  background-size: cover;
  width: 100%;
}

.kontakt .section-heading {
  position: relative;
  top: -1em;
}

.kontakt .core-wrapper {
  padding: 4em 8em;
}

.kontakt p {
  text-align: center;
}

.kontakt-formular {
  width: 85%;
  margin: auto;
  padding: 4em;
}

.kontakt-formular p {
  padding-bottom: 1.25em !important;
}

.kontakt-formular input, textarea {
  width: 100%;
  font-family: "RiekeText", sans-serif;
  font-size: 0.85em;
  background: white;
  border: 0.1em solid rgb(204, 128, 102);
  padding: 0.4em 0.6em;
  color: rgb(51, 115, 128);
  transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
}

.kontakt-formular input:focus, .kontakt-formular textarea:focus {
  border: 0.1em solid rgba(0, 136, 160, 1);
  transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
}

.kontakt-formular-button {
  width: max-content !important;
  float: right;
  background: rgb(76, 140, 153) !important;
  border: none !important;
  color: white !important;
  cursor: pointer;
}

.kontakt-formular-button::before {
  background-image: url("../svg/ico-send.svg");
  width: 16px;
  height: 16px;
}

.kontakt-formular-button:focus, .kontakt-formular-button:hover {
  border: 0.1em solid rgba(3, 217, 255, 1) !important;
}

.kontakt-formular-alert {
  margin-top: 2em;
  background: rgba(77, 223, 229, 0.5);
  padding: 0;
}

.social-buttons {
  display: flex;
  margin: 0 auto;
  width: max-content;
  padding: 5em;
}

.social-buttons-item {
  width: 5em;
  height: 5em;
  margin: 1.25em;
  background: rgb(76, 140, 153);
  border: .2em solid white;

  /* TRANSITION */
  transition: all .15s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .15s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .15s cubic-bezier(0.42, 0, 0.1, 1);
}

.social-buttons-item:hover {
  background: rgb(107, 167, 179);
  border: .0em solid white;

  /* TRANSITION */
  transition: all .15s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .15s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .15s cubic-bezier(0.42, 0, 0.1, 1);
}

.social-buttons .social_soundcloud {
  background-image: url("../svg/ico-soundcloud.svg");
}

.social-buttons .social_twitter {
  background-image: url("../svg/ico-twitter.svg");
}

.social-buttons .social_youtube {
  background-image: url("../svg/ico-youtube.svg");
}


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

  .kontakt-formular {
    width: 100%;
  }

}

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

  .kontakt .core-wrapper {
    padding: 4em 1em;
  }

}

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

  .kontakt-formular {
    padding: 1em;
  }

  .social-buttons {
    padding: 3em 0;
  }

}

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

  .social-buttons-item {
    margin: 1em;
  }

}



/* --------------------------------------------------
–––> SINGLES
-------------------------------------------------- */

.singles {
  width: 100%;
  height: max-content;
  padding-top: 8em;
}

.singles-wrapper {
  padding-bottom: 1.5em;
}

.singles-heading-wrapper {
  padding-top: 1em;
}

.singles p {
  font-size: 0.9em;
}

.singles ul {
  padding-bottom: 1em;
  font-size: 0.85em;
}

.singles ul li {
  list-style: initial;
  line-height: 2em;
  margin-left: 2em;
}


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

  .singles .core-wrapper {
    padding: 0 2em;
  }

}

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

  .singles .core-wrapper {
    padding: 0 1em;
  }
  
}



/* --------------------------------------------------
–––> FOOTER
-------------------------------------------------- */

.footer {
  width: 100%;
  height: max-content;
  background-color: rgb(107, 167, 179);
  display: flex;
}

.footer .core-wrapper {
  padding: 1.25em 0;
}

.footer-logo {
  background: url("../svg/rw-logo-footer.svg") no-repeat;
  width: 4em;
  height: 2em;
  float: left;
}

.footer p {
  color: white;
  padding-bottom: initial;
  float: left;
  margin: .2em 1em;
  font-size: 0.9em;
}

.footer-links {
  float: right;
  position: relative;
  bottom: -.5em;
  font-size: .9em;
}

.footer-links a {
  color: white;
  text-decoration: none;
  padding-bottom: 0em;
  border-bottom: 0.1em solid rgb(51, 115, 128);

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.footer-links a:hover {
  border-bottom: 0.25em solid rgb(255, 192, 170);
  padding-bottom: 0.25em;

  /* TRANSITION */
  transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -moz-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
  -webkit-transition: all .25s cubic-bezier(0.42, 0, 0.1, 1);
}

.footer-links ul {
  display: flex;
}

.footer-links ul li:not(:last-child) {
  padding: 0 1em 0 0;
}

.footer-links ul li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 0 2px 1em;
  background-color: rgb(255, 192, 170);
}


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

  .footer .core-wrapper {
    padding: 1.25em 2em;
  }

  .footer-links {
    float: left;
    margin: .2em 1em;
  }

}

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

  .footer .core-wrapper {
    padding: 1.25em 1em;
  }

  .footer-logo {
    float: inherit;
    margin-bottom: 1em;
  }

  .footer p, .footer-links {
    margin: .2em 0;
  }

}