/*

Anmerkungen:
vor dem <head>-Tag jeder Lektion dieses stylesheet einbinden:
   <link href="./style.css" rel="stylesheet">
    </head>

Sidebar komplett ersetzen mit der Sidebar der Einheit.


sidebarChapters in die sidebar einpflegen, 
Ziffern ändern und aus 
<button class="sidebarChapterTitle" folgendes machen:
<a href="../../Einheit1_1/scormdriver/indexAPI.html" class="sidebarChapterTitle"
*/   


:root {
--color: #08704b;
--bg-color: #add5c0;
--gruen: #08704b;
}

    
body, html {
font-family: 'Rubik', 'Roboto', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', sans-serif;
font-size: 1rem;
font-weight:300;
line-height: 1.5 rem;
}
h1, h2, h3 { font-weight: 300; }

.header, .footer {
  width: 100%;
  height: auto;
  padding:20px 0;
  background-color: #f5f5f5;
}
.footer { text-align:right; }

strong { font-weight: 400; }
a { font-weight: 500; color: var(--gruen); text-decoration:none; }
footer a:hover,
.impressum a:hover { color: var(--color); text-decoration:underline; }
.list-inline-item:not(:last-child) { margin-right: 1rem; }
body.landing .py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
body.landing .pe-5 { padding-right: 0rem !important; }
body.landing .pt-4 { padding-top: 0.5rem !important; }
.navbar-brand img { width:120px; }
body.landing .navbar-brand img { width:140px; }
.ps-button { text-align:left; padding-right: 6em; margin: 0em; }
.kursbutton { transform: rotate(-6deg); max-width:180px; width:50%; height:auto; }
footer p.m-0 { display:none; }
img.schriftzug { width:70%; }

a.buttoni {
  min-width: 190px;
  min-height: 40px;
  padding: 10px 40px;
  border-radius: 20px;
  background: #154c41;
  border: 1px solid #154c41;
  color:#FFF !important;
  text-align: center;
  font-size: 1.1em;
  opacity:0.6;
}
a.buttoni:hover {
  background: #08704B;
  opacity:1.0;
}

.masthead p { font-size: 1.1rem; }
.kursbutton { max-width:200px; width:60%; height:auto; }
.ps-button { text-align:left; padding-right: 0em; margin: 2em 1em; }
footer.landing { position:absolute; bottom:0em; }

@media (min-width: 576px) { 
img.schriftzug { width:70%; }
 }
@media (min-width: 768px) { 
img.schriftzug { width:70%; }

  }
 
/* uebersicht  */   

.modal-lg .col-lg-5 img { object-position: top left; }
h2 { color: var(--color); }
h3.mb-3 { color: var(--color); }
p.bigger { margin:0 auto; max-width:800px; font-size:1.1em; }

.btn:hover {
  color: var(--color);
  background-color: var(--bg-color);
  border-color: var(--color);
}

.sidebarBottom {
text-align:center;
height:87px;
padding:10px 5px;
background-color: var(--color);
color: #FFFFFF;
}

.sidebarBottom h4 {
font-size:13px;
text-transform:uppercase;
color:#FFF;
}

.rfssO .finishWbtBar { display:none !important; }

.fTYRAL .sidebarChapters .sidebarChapter .sidebarChapterProgress .progressBar .progressBarLine .progress {
  right: -0px;
  left: -0px;
}

@media (min-width: 992px) {
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pe-5 { padding-right: 3rem !important; }
.pt-4 { padding-top: 1.5rem !important; }

.padding-center { padding: 1em 10em; }
footer.landing { position:absolute; bottom:0; width:100vH; }
footer p.m-0 { display:inline-block; }
.masthead p { font-size: 1.55rem; }
img.schriftzug { width:75%; }
}

/* pad quer */
@media screen and (min-width: 1024px) and (max-height: 800px) { 
img.schriftzug { width: 75%; max-width:250px; }
p.desc { font-size: 1.1rem; }  
.kursbutton { max-width:200px; width:60%; height:auto; }
.ps-button { text-align:left; padding-left:2em; margin: 2em; }
}