/*  main section */
:root {
        box-sizing: border-box;
        line-height: 1.4;
      /*  font-size: 16px; */
        font-size: 0.75em;
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
        font-style: normal;
        --main-font: 'Open Sans', sans-serif;
        --second-font: "TabletGothic", "Helvetica Neue", Helvetica, Arial, FreeSans, sans-serif;
        --text-color: #000000;
        --third-font: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        --green: #28a745;
        --main-color: #00456f;
        --second-colour: #e50046;
        --main-back: #ffffff;
        --second-back: rgb(207, 226, 242,0.5);
        --bg-opacity: 0.5;
        --header-back: rgb(207, 226, 242,0.5);
        --header-img:  url(https://moodle.nibis.de/elec/mod/resource/view.php?id=10388);
        --header-color: #000000;
}

@media (min-width: 800px) {
     :root {
         font-size: 0.875em;
     }
 }
@media (min-width: 1200px) {
     :root {
         font-size: 1em;
     }
}
body {
    font-family: var(--main-font);
    font-weight: 300;
    font-style: normal;
    color: var(--text-color);
    background-color:  var(--main-back);
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h1 {
   display: block;
   font-weight: bold; 
   font-size: 2em;
   margin-block-start: 0.67em;
   margin-block-end: 0.67em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
}
p {
   display: block;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
}
span>a {
    color: #000000;
}

h3.sectionname {
    font-size: 1.6em;
    margin: 0 0 0.6em 0;
    background-color: var(--main-back);
    color: var(--text-color);
    font-family: var(--third-font);
    font-weight: bold;
    border-bottom: 2px solid var(--main-color);
    border-top: 2px solid var(--main-color);
}

.sectionname {
    font-size: 1.6em;
    margin: 0 0 0.6em 0;
    background-color: var(--main-back);
    color: var(--text-color);
    font-family: var(--third-font);
    font-weight: bold;
    border-bottom: 2px solid var(--main-color);
    border-top: 2px solid var(--main-color);
}

/*  <!-- Linien entfernen, Leerzeilen klein  -->   */
.section li.activity.hasinfo {
    border-bottom: 0px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}    

/*  Hintergrund Header  */
#page-header .card {
 /*   height: 200px; */   
    background-color: var(--header-back);
    background-size:cover; 
}    

/*  Feld unter Themen ...   Bild über ganze Breite   */
.summary {
    margin-left: 0px !important;
}

/*  
    background-image: url(https://moodle.nibis.de/mbnds/pluginfile.php/6696/mod_folder/content/0/ds-mod-b.png);
    border-radius: 20px;
    color: #ffffff;
*/    
/*
.course-content ul.topics li.section .summary, .course-content ul.topics li.section .content>.availabilityinfo, .course-content ul.weeks li.section .summary, .course-content ul.weeks li.section .content>.availabilityinfo {
    margin-left: 25px;
}    
*/

#page-header .card {
    -webkit-background-clip: border-box;
    background-clip: border-box;
    background-color: var(--header-back);
}    
#page-header .card-body {
    background-image: var(--header-img);
    /* background-image: url(https://moodle.nibis.de/mbnds/mod/resource/view.php?id=4918); */
    /* background-image: url(https://moodle.nibis.de/mbnds/mod/resource/view.php?id=4896); */
    border-radius: 5px;
    color: var(--header-color);
    text-align: right;
    /* width: 400px; */
    /* background: right; */
    /* background-position: right; */
    background-position: center right;
    background-size: contain;
    background-repeat: no-repeat;
     background-color: var(--header-back);
   }    

.page-header-headings h1 {
    font-weight: 700;
    text-align: initial;
}

/*
.card-body .d-sm-flex {
    background-image: url(https://moodle.nibis.de/mbnds/mod/resource/view.php?id=4899);
    border-radius: 5px;
    color: #000;
    max-height: 60px;
    text-align: right;
    background-position: center right;
    background-size: contain;
    background-repeat: no-repeat;
}    
*/


/* youtube videos über iframe resizable */
.vid-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}    
.vid-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}    

/*  tools section */
.welcome {
    margin-bottom: 10px;
    margin-left: 1px;
    margin-top: 25px;
    border-left: 10px solid var(--main-color);
    padding: 0 0.0em;
    overflow: hidden;
}
.welcome>h2 {
    margin-left: 10px;
    padding: .75em .25em;
    font-size: 1.7em;
    font-weight: 600;
    margin-bottom: .5em;
    border-bottom: 1px solid #AAA;
}
.welcome>p {
    margin-left: 10px;
    padding-bottom: .5em;
    font-size: 1.3em;
    font-weight: 300;
}

/*  agenda section */
.agenda {
    font-size: 1.1em;
    margin: 0 1em .5em;
    border-left: 7px solid var(--main-color);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(170, 170, 170);
}
.agenda>h2 {
    font-size: 1.1em;
    font-weight: bold;
    margin-left: 1em;
    margin-bottom: 0.5em;
    padding-top: 0.25em;
}
.agenda>p {
    font-size: 1em;
    padding-left: 2em;
    margin-bottom: 1em;
    margin-left: 1em;
}
.agenda_item_end {
    font-size: 1em;
    padding-left: 2em;
    padding-bottom: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(170, 170, 170);
}

/*  info section */

.info_1 {
    background: #ffffff;
    padding: 1.0em;
    border-radius: 10px;
    border: 2px solid var(--main-color);
    text-align: center;
}
.info_1>h2 {
    font-size: 1.2em;
    font-family: var(--main-font);
    font-weight: 600;
}
.info_1>p {
    font-family: var(--third-font);
    font-size: 1.0em;
    font-weight: 300;
}
.info_2 {
    background: var(--main-color);
    color: #ffffff;
    padding: 1.0em;
    border-radius: 10px;
    border: 2px solid var(--main-color);
    width: 50%;
    width: 80%;
    text-align: center;
    margin-left: 10%;
}
.info_2>h2 {
    font-weight: 600;
    font-size: 1.2em;
}
.info_2>p {
    font-weight: 300;
}

.info_3 {
    margin-left: 20%;
    margin-bottom: 2em;
    width: 60%;
    background: #ffffff;
    padding: 0em;
    border-radius: 0px;
    border-bottom: 1px solid var(--main-colour);
    text-align: center;
}
.info_3>h2 {
    font-size: 1.1em;
    font-family: var(--main-font);
    font-weight: 800;
}
.info_3>p {
    font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.0em;
    font-weight: 400;
}

/*  spacer section */
.spacer_1 {
    border: solid var(--main-color) 1px;
    background-color: var(--main-color);
    height: 1px;
    width: 200px;
}
.spacer_2 {
    border: solid var(--main-color) 0.5px;
    height: 1px;
    width: 400px;
}


.headbox {
    font-family: var(--third-font);
    padding: 10px;
    background-color: aliceblue;
    color: black;
    font-size: 1.8em;
    font-weight: bold;
}



.unterthema_1 {
    font-size: 1.1em;
    background: var(--second-back);
    color: var(--second-colour);  /*#CEE3F6;*/
    border-bottom: 2px solid var(--second-colour);/*#0B0B0B;*/
    text-align: center;
}
.unterthema_2 {
    font-size: 1.1em;
    border-bottom: 2px solid #000000;
    box-shadow: 30px 2px 0px 2px var(--main-color);
    margin-bottom: 10px !important;
}
.unterthema_3 {
    font-size:  1.1em;
    border-bottom: 2px solid var(--main-color);
    font-weight: 500;
}
.aufgabe_1 {
    margin: 0 auto .5em;
    overflow: hidden;
    padding: 0 1em;
}
.aufgabe_1>h2 {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5em;
    padding: 0.75em 0.25em;
    border-bottom: 1px solid #000000;
}
.aufgabe_1>h3 {
    font-size: 1.0em;
    text-align: center;
    font-weight: 600;
}
.aufgabe_1>p {
    font-size: 1.0em;
    text-align: center;
    font-style: italic;
}
.aufgabe {
    border-bottom: 5px solid var(--main-color);
    box-shadow: 0px 5px 5x silver;
}
.aufgabe_bg {
    background-color: #F6E3CE;
    border-bottom: 5px, solid, #df7401;
    box-shadow: 0px 5px 5x silver;
}
.aufgabe_3 {
    border-left: 8px solid var(--main-color);
    border-right: 8px solid var(--main-color);
    border-bottom: 1px solid var(--main-color);
    border-top: 1px solid var(--main-color);
    text-align: center;
    font-size: 1.2em;
    font-weight: 800;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.bild_thema {
    width: 30;
    height: 30;
}
.info {
    padding: 1.0em;
    border-radius: 10px;
    border: 0.5px solid #0B0B61;
    text-align: center;
}
.information {
    border-left: 5px solid #0B0B61;
}
.header-pg {
    text-align: center;
    border-bottom: 5px solid #f9f9f9;
    border-top: 2px solid #f9f9f9;
    font-weight: 500;
    font-size: 1.9em;
}
.bg-attention {
    --bg-opacity: 1;
    background-color: #ffe646;
    background-color: rgba(255, 230, 70, var(--bg-opacity));
}
.article-heading__title {
    display: block;
    font-size: 1.875em;
    font-weight: bold;
    line-height: 1.2;
}
.page__content {
    background-color: #fff;
    box-shadow: 0 0 0.3125em rgb(65 70 77 / 50%);
    color: #252525;
    margin: 0 auto;
    max-width: 62.5em;
    min-width: 300px;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}


.bg-section {
    overflow: hidden;
    max-width: 1080px;
    clear: both;
    padding: 0;
    margin: 0 0 0 0;
}
.bg-section svg {
    width: 100%;
    object-fit: cover;
}
.bg-section img {
    width: 100%;
    object-fit: cover;
}
.bg-category {
    background-color: var(--main-color);
    color: #ffffff;
    display: block;
    width: 200px;
    position: absolute;
    bottom: 58px;
    padding: 5px 0.0em 0.0em 5px;
    margin-left: 1.5em;
    margin-top: 0.0em;
    margin-bottom: 0.0em;
    z-index: 900;
    /* margin-bottom: 15px; */
    /* margin-bottom: 73px; */
    /* margin-top: -30px; */
}
.bg-category h2,h3 {
    font-size: 0.8em;
    font-weight: 600;
    margin: 0 0 0 0;
}

.bg-thema {
    color: var(--text-color);
    background-color: RGBA(255, 255, 255, .9);
    display: block;
    position: absolute;
    bottom: 10px;
    width: 600px;
    padding: 15px 0.0em 15px 5px;
    margin-left: 1.5em;
    margin-top: 0.0em;
    margin-bottom: 0.0em;
    z-index: 600;
}
.bg-thema h2,h3 {
    font-size: 1.4em;
    font-weight: 600;
    margin: 0 0 0 0;
}
.bg-rect-theme {
    opacity:0.8;
    fill:#f9f9f9;
    fill-opacity:1;
    stroke-width:0.3"
}
.bg-rect-cat {
    opacity:1;
    fill:#00456f;
    fill-opacity:1;
}
.bg-cat-text {
    font-size: 0.6em;
    fill:#f9f9f9;
    display: block;
    font-weight: 700;  
}
.bg-rect-text {
    display: block;
    fill: var(--text-color);
    font-size: 0.8em;
    font-weight: 500;
    font-family: sans-serif;
    font-style: italic;
}


.links {
    background-color: rgba(245, 245, 245, 0.7);
    padding: 15px 0px 15px 15px;
    margin: 0px;
    font-weight: 500;
}

td {
    padding: 5px;
}

td:first-child  {
    font-weight: 600;
}

/*  Nav flex cards  */
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: center;
}
.flex-item {
    margin: 10px;
    width: 200px;
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}
.flex-card {
    height: 115px;
    -webkit-background-clip: border-box;
    background-clip: border-box; 
    justify-content: space-evenly; 
    border: 1px solid rgba(0, 0, 0, .125); 
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
    border-radius: 15px; 
    overflow: hidden;
    flex: 1 1 auto; 
    min-height: 1px; 
    padding: 1.25rem;
    text-align: center!important;
    color: #000000!important;
}
.flex-card * {
    transition: 0.3s ease all;
}
.flex-card img {
    width: 64px; 
    height: 64px; 
    object-fit: cover; 
    display: block; 
    margin-bottom:80px; 
    margin-left: auto; 
    margin-right: auto;
}
.flex-card:hover img,
.flex-card:focus-within img {
    margin-top: -155px;
}
.flex-card:hover h3,
.flex-card:focus-within h3 {
    color: #000000;
    font-size: 1.2rem; 
    font-weight: 700;
    padding: 8px 12px 0;
}
.flex-card:link h3
{
    color: #000000;
}
.flex-card:hover p
{
font-size: 0.9rem; 
font-weight:400;
}