/* CSS Lutz Dittberner */

/* #### Farben ####
Blau: 67.38.131
#432683

Rot: 227.6.19
#e30613

Gelb: 255.232.0
#ffe800
*/

/* ----------- Erzeugt ein langsames Scrollen --------------- */
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
/* ----------- langsames Scrollen ende --------------- */

body {
  font-family: 'Roboto';
  height: 100%;
  position: relative;
}

@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
}



/* ############### Navigation ################# */

.bg-light{
    padding: 0;
     background-color: rgba(255,255,255,0.7) !important;
}

@media (max-width: 991.98px) {
.bg-light{
    padding: 0;
     background-color: transparent !important;
}
.navbar-dark .navbar-toggler {
margin-top: 10px;
margin-left: 10px;
color: rgba(0,0,0,.5)!important;
border-color: rgba(255,255,255,.5);
background-color: #000;
}
}



.bg-light .show {
     background-color: #fff !important;
}


.navbar .navbar-nav .nav-item {
    padding: 0 0px;
}

/* Nav Link */

.navbar .navbar-nav .nav-item .nav-link {
font-size: 15px;
color: #000;
font-weight: 400;
text-transform: uppercase;
padding: 6px 10px;
transition: all .3s ease-in-out;
}

.nav-item li::marker {
display: none;
}

/* Nva Link Under line */
.navbar .navbar-nav .nav-item .nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #000;
    transition: width .4s;
}


/* Nva Link Under line on Hover */
.navbar .navbar-nav .nav-item .nav-link:hover::after {
    width: 100%;
    transform: width .4s;
}

.navbar .navbar-nav .nav-item:first-child .nav-link:hover {
    color: #000;
    background: #c9a068;
}

.navbar .navbar-nav .nav-item:nth-child(2) .nav-link:hover {
    color: #000;
    background: #b69ea0;
}

.navbar .navbar-nav .nav-item:nth-child(3) .nav-link:hover {
    color: #000;
    background: #75b9c1;
}

.navbar .navbar-nav .nav-item:nth-child(4) .nav-link:hover {
    color: #000;
    background: #df5151;
}

.navbar .navbar-nav .nav-item:nth-child(5) .nav-link:hover {
    color: #000;
    background: #c1bfbf;
}

.navbar .navbar-nav .nav-item:nth-child(6) .nav-link:hover {
    color: #000;
    background: #d6ae3f;
}

.navbar .navbar-nav .nav-item:nth-child(7) .nav-link:hover {
    color: #000;
    background: #dc7f14;
}

.navbar .navbar-nav .nav-item:nth-child(8) .nav-link:hover {
    color: #000;
    background: #6997b7;
}

.navbar .navbar-nav .nav-item:nth-child(9) .nav-link:hover {
    color: #000;
    background: #e25561;
}

.navbar .navbar-nav .activated .nav-link::after {
    width: 100%;
    transform: width .4s;
}

.navbar .navbar-nav .nav-item .active:first-child  {
    color: #000;
    background: #c9a068;
}

.navbar .navbar-nav .nav-item:nth-child(2) .active  {
    color: #000;
    background: #b69ea0;
}

.navbar .navbar-nav .nav-item:nth-child(3) .active  {
    color: #000;
    background: #75b9c1;
}

.navbar .navbar-nav .nav-item:nth-child(4) .active  {
    color: #000;
    background: #df5151;
}

.navbar .navbar-nav .nav-item:nth-child(5) .active  {
    color: #000;
    background: #c1bfbf;
}

.navbar .navbar-nav .nav-item:nth-child(6) .active  {
    color: #000;
    background: #d6ae3f;
}

.navbar .navbar-nav .nav-item:nth-child(7) .active  {
    color: #000;
    background: #dc7f14;
}

.navbar .navbar-nav .nav-item:nth-child(8) .active  {
    color: #000;
    background: #6997b7;
}

.navbar .navbar-nav .nav-item:nth-child(9) .active  {
    color: #000;
    background: #e25561;
}

.navbar .navbar-nav .nav-item .active::after  {
width: 100%;
}

.navbar .navbar-nav .nav-item span {
color: #000;
font-size: 15px;
font-weight: 400;
}

@media (max-width: 575.98px) { 
.tel-nummer {
display: none;
}
}


/* Large devices (desktops, 992px and up)   */
@media (min-width: 992px) and (max-width: 1199.98px) { 
.navbar .navbar-nav .nav-item .nav-link {
font-size: 11px;
}
.navbar .navbar-nav .nav-item span {
font-size: 13px;
}
}

 
 /* ----------- Hintergrundbild oben ------------- */
 
#start{
position: absolute;
z-index: 0;

width: 100%;
height: auto;
overflow: hidden;
clear: both;
} 
 
 
 
 
 /* ----------- Content ------------- */ 
#content{
position: relative;
z-index: auto;
height: 100%;
overflow: hidden;
} 
  
.title {
padding: 4px 0px;
}

 /* ----------- Hintergründe Überschriften ------------- */ 
#bg-title-start,#bg-title-epochen,#bg-title-biografie,#bg-title-ausstellungen,#bg-title-zeitzeuge,#bg-title-eine-welt,#bg-title-rezensionen,#bg-title-kontakt,#bg-title-links {
position: relative;
}

#bg-title-start::before {
content:'';
position: absolute;
width:100%;
height:50px;
left:0px;
top:0px;
background-image: url("../images/bg_title_start.png"); 
background-repeat: repeat-x;
}

#bg-title-epochen::before {
content:'';
position: absolute;
width:100%;
height:50px;
left:0px;
top:0px;
background-image: url("../images/bg_title_epochen.png"); 
background-repeat: repeat-x;
}

#bg-title-biografie::before {
content:'';
position: absolute;
width:100%;
height:50px;
left:0px;
top:0px;
background-image: url("../images/bg_title_biografie.png"); 
background-repeat: repeat-x;
} 

#bg-title-ausstellungen::before {
content:'';
position: absolute;
width:100%;
height:50px;
left:0px;
top:0px;
background-image: url("../images/bg_title_ausstellungen.png"); 
background-repeat: repeat-x;
}  

#bg-title-zeitzeuge::before {
content:'';
position: absolute;
width:100%;
height:50px;
left:0px;
top:0px;
background-image: url("../images/bg_title_zeitzeuge.png"); 
background-repeat: repeat-x;
}

#bg-title-eine-welt::before {
content:'';
position: absolute;
width:100%;
height:50px;
left:0px;
top:0px;
background-image: url("../images/bg_title_eine_welt.png"); 
background-repeat: repeat-x;
} 

#bg-title-rezensionen::before {
content:'';
position: absolute;
width:100%;
height:50px;
left:0px;
top:0px;
background-image: url("../images/bg_title_rezensionen.png"); 
background-repeat: repeat-x;
}

#bg-title-kontakt::before {
content:'';
position: absolute;
width:100%;
height:50px;
left:0px;
top:0px;
background-image: url("../images/bg_title_kontakt.png"); 
background-repeat: repeat-x;
}

#bg-title-links::before {
content:'';
position: absolute;
width:100%;
height:50px;
left:0px;
top:0px;
background-image: url("../images/bg_title_links.png"); 
background-repeat: repeat-x;
}
 
h1,h2,h3,h4,h5 {
text-transform: uppercase;
color: #000;
}

h1 {
font-size: 2.0rem;
letter-spacing: 0.04em;
}

h2 {
font-size: 1.8rem;
font-weight: 300;
}

h5 {
font-weight: 300;
}
   
p {
font-size: 1.01rem;
font-weight: 300;
color: #000;
hyphens: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 5;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 5;
-ms-hyphenate-limit-lines: 4;
}

#content a {
color: #BD9945;
}

#content a:hover {
color: #000;
text-decoration: none;
}

.text-rot {
color: #BD9945;
}

#startboxen h5 {
font-size: 1.25rem;
text-transform: uppercase;
color: #BD9945;
}

@media (min-width: 768px) and (max-width: 991.98px) {
#startboxen h5 {
font-size: 0.9rem;;
}
} 
/*--------- Startseite Mediaboxen ---------*/

#mediaboxen .media {
color: #b6b6b4;
}

/* ----------- Epochen Seite -------------  */
.epochenzahl {
font-size: 1.65rem;
}
/* ----------- Biografie Seite -------------  */

#biografie td:first-child {
font-size: 1.25rem;
color: #75b9c1;
padding-right: 20px;
padding-left: 6px;
padding-bottom: 10px;
vertical-align: top;
white-space: nowrap;
}

#biografie td:nth-child(2) {
font-weight: 300;
padding-bottom: 10px;
}

#biografie tr:nth-child(odd) {
background-color: rgba(0,0,0,.04);
} 
/* ----------- Ausstellungen Seite -------------  */

#ausstellungen td:first-child {
font-size: 1.25rem;
color: #df5151;
padding-right: 20px;
padding-left: 6px;
padding-bottom: 10px;
vertical-align: top;
white-space: nowrap;
}

#ausstellungen td:nth-child(2) {
font-weight: 300;
padding-bottom: 10px;
}


/* ----------- Rezensionen Seite -------------  */
*[id^='rezensionModal'] .modal-header{
padding: 0.2rem 0.1rem;
}


*[id^='rezensionModal']  .modal-header .close {
    padding: 1rem 2rem;
}

*[id^='rezensionModal']  .modal-title {
    font-size: 1.15rem;
    padding-left: 20px;
}


/*--------- Footer ---------*/
#footer {
position: sticky;
z-index: 1;
}

#footer a{
color: #797978;
}
#footer a:hover{
color: #BD9945;
}

.footer {
background: linear-gradient(180.77761813953913deg, rgba(229, 229, 228,1) -4.951048470877268%,rgba(238, 238, 238,1) 40.701453937850694%,rgba(248, 248, 248,1) 88.4755228215998%,rgba(249, 249, 249,1) 88.4755228215998%);
font-size: 0.85rem;  
}

.trenner {
color: rgba(121,121,120,0.1);
font-size: 1.65rem;
display: inline-block;
width: 1px;
background: rgba(121,121,120,0.1);
}

#copyright {
z-index: 1;
}

.copyright {
color: #fff;
background-color: #000;
font-size: 0.85rem;
}
.copyright a{
color: #fff;
}

@media (max-width: 991.98px) { 
#footer .col-lg-3{
text-align: left;
}

}

/*--------- Button Scroll Top ---------*/

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #BD9945; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px 15px; /* Some padding */
  border-radius: 27px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #000; /* Add a dark-grey background on hover */
}


/*--------- Modal ---------*/
.modal-dialog {
    max-width: 90%;
    margin: 30px auto;
}

.modal-title {
    font-size: 2.1rem;
}

.modal-header {
    background-color: #797978;
}

.modal-body h2{
color: #000;
font-size: 1.4rem;
font-weight: 500;
}

.modal-body h3{
color: #000;
font-size: 1.1rem;
}

.modal-body p, li{
color: #797978;
font-size: 1rem;
font-weight: 400;
}

.modal-body a{
color:#BD9945;
font-size: 1rem;
}

.close {
    color: #fff;
    text-shadow: 0 1px 0 #000;
    opacity: .5;
}

.modal-title {
color: white;
}

.btn-secondary {
    color: #fff;
    background-color: #BD9945;
    border-color: #BD9945;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;
}