:root {
  --orange: #eae5d4;
  --color-button: #e9722b;
  --petrol: #096c7c;
  --gelb: #ffdc00;
  --bg-movies: rgba(71, 9, 6, 1.0);
  --bg-orange: #fe920d;
  --bg-hell: #ffd591;
  --bg-rotbraun: rgba(236, 122, 0, 0.3);
  --rotbraun: #8d1522;
  --sidebar:#f2df95;
  --deeporange: #e9722b;
  --txt-dark: #51350b;
}

.content-space-t-1 { padding-top:1rem; }
.content-space-t-2 { padding-top:2rem; }
.content-space-t-3 { padding-top:3rem; }
.content-space-t-4 { padding-top:4rem; }
.content-space-t-5 { padding-top:5rem; }
.content-space-t-6 { padding-top:6rem; }
.content-space-t-7 { padding-top:7rem; }
.content-space-t-8 { padding-top:8rem; }
.content-space-t-9 { padding-top:9rem; }


.content-space-1 { padding-top: 3.5rem;padding-bottom: 3.5rem; }


html, body, .view {
font-family: "Open Sans", sans-serif; 
font-weight: 300; 
font-size: 1em;
color: var(--txt-dark);
background-color: #eae5d4;
}
html, body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 0;
}
main {
flex: 1;
padding-bottom:5rem; 
}

.img-fluid { position:relative; }
.img-fluid .authorcopy { position:absolute; right:0.5rem; bottom:0.3rem; color:#FFF; float:right; font-size:0.8em; }
.img-rounded { border-radius: 10px; }
.img-fluid .authorcopy {
  position: absolute;
  width: 100%;
  right: -96%;
  bottom:-5%;
  background-color: transparent;
  transform-origin: top left;
  transform: rotate(-90deg);
  color:#fbe9cd; font-size:0.7em;
  font-style:italic;
}
 
body.article-1 { 
background: url(../img/hero-bg.jpg) top center; 
background-repeat: no-repeat;
background-size: cover; 
}

p { margin: 0 0 10px 0; }
b, strong { font-weight: 600; }


h1, h2, h3, h4, h5, h6 {
  font-family: "Pompiere", sans-serif;
  font-weight: 700;
  margin: 0 0 0.7rem 0;
  padding: 0;
  color: var(--txt-dark);
}
.bootstrap-table .fixed-table-container .table { margin-bottom:3em !important; }
.tabelle h4 { font-family: "Open Sans", sans-serif; font-size:1.1em; font-weight:600; line-height:1.5em }
.tabelle th.light { font-size:1.2rem; background-color: var(--bg-hell);}
.tabelle .small { font-size:0.9rem; }
h2.light { margin: 0 0 0rem 0; color:#FFF; }
h3 { margin: 1.4rem 0 0.7rem 0; }
.color-white { color:#FFF; }
.headline h1 { color:#FFF; padding-bottom: 20px; }
.headline h6 { color:#FFF; margin-top: 20rem; text-align:center }
.section-header .section-title {
  font-size: 32px;
  text-align: center;
  font-weight: 700;
  margin-top:0;
  margin-bottom: 5px;
  color: #FFF;
}
.section-header .section-description {
  text-align: center;
  padding-bottom: 40px;
  color: #fff;
  font-size:19px;
}

section.kasten > .container, .container .kasten { 
background-color: var(--bg-hell); 
padding:40px; 
border-radius: 10px; 
margin-bottom:5rem;
}

.infoblock, .infoblock h3, .infoblock a { color:#FFF; }
.infoblock a:hover { color: var(--color-link); }

/*--------------------------------------------------------------
# Ueber mich - Testimonial
--------------------------------------------------------------*/

.testimonial .content-space-2 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.testimonial .img-rounded { border: 1px solid var(--gelb);  }
.bg-soft-dark-to-start-75 {
  background-image: linear-gradient(to right,rgba(255,255,255,0) 25%,rgba(246,168,0,.6) 0); }
.blockquote {
  position:relative;
font-size:1.2rem; color:#FFF;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

#header.header-scrolled {
  background: var(--petrol);
  height: 70px;
  transition: all 0.5s;
}


#header.header-scrolled .navbar-brand-logo { max-width:150px;  }
#logo { padding-top:6px; padding-bottom:6px; }
.navbar-brand-logo { max-width:180px; }

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/

.hero-container {
  position: relative;
  top: 0em;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.freigestellt img { max-width:90%; margin:0 auto;}

.herokasten { 
width:90%; margin:-2em auto 0 auto; 
padding: 30px 20px; 
display: inline-block;
border-radius: 10px;
transition: 0.5s;
color: #fff;
background-color:  var(--bg-rotbraun); 
}
.hero-container h1 {
  margin: 0;
  font-weight: bold;
  font-family: "Gruppo", sans-serif;
  font-size: 42px;
  line-height: 36px;
  color: #FFF;
}
.hero-container span {
  color: var(--gelb);
  margin: 15px 0 0 0;
  font-size: 22px;
  font-weight:400;
  font-family: "Poppins", sans-serif;
}
.hero-container h2 {
  font-family: "Open Sans", sans-serif;
  color: #FFF;
  font-size:1.1rem;
  line-height:1.6rem;
}
.hero-container .social-links i {
color: var(--rotbraun);
font-size:1.8rem;
}
.hero-container .social-links i:hover {
color: var(--gelb);
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

#footer {
  background: var(--bg-orange);
  padding: 0px 0 0 0;
  color: #fff;
  font-size: 1rem;
}
#footer a {
  color: #fff;
  text-decoration: none;
}
#footer h6 { font-family: "Oswald", sans-serif; color: #FFF; font-size: 1.2rem; font-weight: 500; }

.bg-footer { background: var(--bg-movies); }
#footer .copyright .col-md-7 { text-align: left; }
#footer .copyright .col-md-5 { text-align: right; }



/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
  margin-bottom: 30px;
}

#portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 25px auto;
  list-style: none;
  text-align: center;
  border-radius: 50px;
}

#portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 12px 18px 14px 18px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #FFF;
  margin: 0 5px 10px 5px;
  transition: all ease-in-out 0.3s;
  background: var(--bg-orange);
  border-radius: 4px;
}

#portfolio #portfolio-flters li:hover,
#portfolio #portfolio-flters li.filter-active {
  color: var(--txt-dark);
  background: var(--bg-hell);
}

#portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: var(--bg-hell);
  border-radius:10px;
  border: 1px solid var(--gelb);
}



.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portfolio .portfolio-wrap .portfolio-info::before {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  top: 35px;
  left: 35px;
  border-top: 3px solid #FF6600;
  border-left: 3px solid #FF6600;
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info::after {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 35px;
  right: 35px;
  border-bottom: 3px solid #FF6600;
  border-right: 3px solid #FF6600;
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 30px;
  color: #FFF;
  font-weight: 600;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: #FFF;
  font-size: 18px;
  padding: 0;
  margin: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a.btn {
  margin: 15px 2px 0;
  display: inline-block;
  transition: 0.3s;
  color:#FFF;
}
.portfolio .portfolio-wrap .portfolio-links a.btn:hover {
background-color: var(--deeporange);
}

.portfolio .portfolio-wrap:hover::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info::before {
  top: 15px;
  left: 15px;
}

.portfolio .portfolio-wrap:hover .portfolio-info::after {
  bottom: 15px;
  right: 15px;
}
.kursimg { max-width:100%; height:auto; }
.portfolio-item .card-datum,
.portfolio-item .card-title,
.portfolio-item .card-body { padding-left:15px; padding-right:15px;}
.badge {padding: .525em .975em;line-height: normal;}
.badge.bg-orange { background-color: var(--deeporange); }
.pinned-top-end {position: absolute;top: -.0625rem;right: -.0625rem;}
.pinned-top-end.badge {border-radius: 0 .375rem 0 .375rem;}
.card-datum { color:#FFF; background-color: var(--deeporange); padding-top:0.7rem; padding-bottom:0.2rem;font-size:1.2rem; }
.card-title { margin-top:30px; color: var(--txt-dark);}
.card-title h3 { font-size: 1.9rem; margin-bottom:0; }
.card-body { padding-top:0.2rem; color: var(--txt-dark); }
.card-footer { 
  color: var(--txt-dark);;
  background-color: var(--bg-hell);
  border-top: 2px solid var(--deeporange);
  padding: 15px;
}
#angebot .card-footer { border:none; background-color: var(--bg-hell); }
a.btn-sagna { background-color: var(--color-button); color: #FFFFFF !important; border-radius: .375rem; }
.card-footer .col.text-right { justify-content: flex-end; padding-right:0 }
.back-to-top:hover { background: var(--bg-hell); color: #fff; }

.content-space-t-10 { padding-top:8rem; }


/*--------------------------------------------------------------
# Movielist
--------------------------------------------------------------*/

.card-body.movie > .row > .col-md-3 { padding:0; }
.card-body.movie h3 { font-size:1.8rem; }
.card-body.movie p { font-size:0.9rem; line-height:1.3rem; }
.row.innerhalb { margin-left:0; margin-right:0; }
.actors-footer { font-size: 0.8rem; line-height:0.9rem; margin-top: 0.5rem; font-weight: 700;  margin-bottom: 0; color: #2d374b;}
.actors-footer-source { display: block; color: #677788; font-size: .75rem;font-weight: 400;margin-top: .25rem;}
ul.list-inline.actors li {width: 23.5%; }
.badge.bg-soft-dark { margin:2px; padding: .1em .5em; font-family:'Oswald', sans-serif; font-size:.9rem; font-weight:400; }


@media (min-width: 768px) {
  .col-md-2.movie {
    flex: 0 0 auto;
    width: 23%;
  }
  .col-md-1b { flex: 0 0 auto; width: 12.6665%; }
  .col-md-2b { flex: 0 0 auto; width: 20.6666%; }
}

/*------- # Voting Circle ---------*/

@keyframes progress {
  0% {
    --percentage: 0;
  }
  100% {
    --percentage: var(--value);
  }
}

@property --percentage {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

[role="progressbar"] {
  --percentage: var(--value);
  --primary: #369;
  --secondary: #adf;
  --size: 100%;
  animation: progress 2s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role="progressbar"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    var(--primary) calc(var(--percentage) * 1%),
    var(--secondary) 0
  );
  mask: radial-gradient(white 55%, transparent 0);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="progressbar"]::after {
  counter-reset: percentage var(--value);
  content: counter(percentage) ""; /* hier könnte z.B. % dahinter */
  font-family: "Pompiere", sans-serif;
  font-size: 1.8rem;
  color: var(--primary);
}




/*--------------------------------------------------------------
# Responsive

@media (min-width: 576px) { #footer { background: white; } }
@media (min-width: 768px) { #footer { background: yellow; }  }
@media (min-width: 992px) { #footer { background: pink; }  }
@media (min-width: 1200px) { #footer { background: red; }  }
@media screen and (min-width: 1024px) and (max-height: 800px) { #footer { background: blue; }  }

--------------------------------------------------------------*/

@media (min-width: 576px) {
.hero-container h1 {
  font-size: 50px;
  line-height: 50px;
  margin: 0 0 0.3rem 0;
}
.hero-container h2 {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight:500;
}
.hero-container span {
  color: var(--gelb);
  margin: 10px 0 0 0;
  font-size: 25px;
  font-family: "Poppins", sans-serif;
}
}

@media (min-width: 768px) {
.herokasten {
  width: 60%;
  margin: -14em auto 0 auto;
  padding: 20px 30px;
  }
.hero-container h1 {
  font-size: 54px;
  line-height: 50px;
  margin: 0 0 0.3rem 0;
}
.hero-container h2 {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight:500;
}
.hero-container span {
  color: var(--gelb);
  margin: 10px 0 0 0;
  font-size: 25px;
  font-family: "Poppins", sans-serif;
}
}

@media (min-width: 992px) {
.hero-container { top: -4em; }
}


@media (min-width: 1024px) {
.hero-container {
  position: absolute;
  bottom: 20vH;
  top: 6em;
  padding-left:1%; 
  max-width:65%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  }
.herokasten { 
width:70%; margin:-12em auto 0 auto; 
padding: 30px 40px; 
display: inline-block;
border-radius: 10px;
transition: 0.5s;
color: #fff;
background-color:  var(--bg-rotbraun); 
}
.hero-container h1 {
  font-size: 64px;
  line-height: 60px;
  margin:0 0 0.7rem 0;
}
.hero-container h2 {
  font-family: "Open Sans", sans-serif;
  color: #FFF;
  font-size:1.4rem;
  line-height:1.8rem;
}


}


@media screen and (min-width: 1024px) and (max-height: 800px) {

.herokasten { 
width:60%; margin:-12em auto 0 auto; 
padding: 10px 30px; 
}
.hero-container h1 {
  font-size: 45px;
  line-height: 40px;
  margin:0 0 0.2rem 0;
}
.hero-container h2 {
  font-size:1.2rem;
  line-height:1.4rem;
}
.hero-container span {
  color: var(--gelb);
  margin: 1px 0 0 0;
  font-size: 24px;
  font-family: "Poppins", sans-serif;
}

}


@media (min-width: 1200px) {
.hero-container { top: 4em; }
.content-space-t-10 { padding-top:10rem; }
.herokasten { width:70%; margin:-17em auto 0 auto; }
.tabelle td.kurstitel, .tabelle th.kurstitel  { width:40%; padding-right:3em;padding-left:1.3em; }
}



@media print {
.container { width:100%; }
#genres {width:25%; }
#actors {width:45%; }
#tags {width:30%; }
#genres .text-body.vote { position:relative; top:-20px; }
#genres .text-body.vote {height:40px !important;width:40px !important; margin-bottom:0px !important; }
#tags .badge { font-size:11px; }
ul.list-inline.actors li { width:64px; }
ul.list-inline.actors li .cast-pic img { width:60px;}
#actors .actors-footer { font-size:9px;font-weight:normal; }
.actors-footer-source {display:none;}
}