@font-face {
    font-family: Helvetica;
}

@font-face {
    font-family: "Cambria Math";
}

@font-face {
    font-family: Calibri;
}

@font-face {
    font-family: "Calibri Light";
}

html[lang=de] a#de {
    display:none;
}

html[lang=en] a#en {
    display:none;
}

a#de,
a#en {
    position: absolute; top: 17px; right: 8px;
}

a>svg {
    height: 31px;
    display: block;
    position: relative;
    z-index: 1;
}

img {
	border:none; 
}

p.MsoNormal, li.MsoNormal, div.MsoNormal {
    margin-top: 0cm;
    margin-right: 0cm;
    margin-bottom: 8.0pt;
    margin-left: 0cm;
    line-height: 130%;
    font-size: 14.0pt;
    font-family: "Calibri",sans-serif;
}

h1 {
    margin-top: 12.0pt;
    margin-right: 0cm;
    margin-bottom: 0.1rem;
    margin-left: 0cm;
    line-height: 107%;
    page-break-after: avoid;
    font-size: 16.0pt;
    font-family: "Calibri Light",sans-serif;
    color: #2F5496;
    font-weight: normal;
}

h2 {
    margin-top: 2.0pt;
    margin-right: 0cm;
    margin-bottom: 0cm;
    margin-left: 0cm;
    line-height: 107%;
    page-break-after: avoid;
    font-size: 21.0pt;
    font-family: "Calibri Light",sans-serif;
    color: #2F5496;
    font-weight: normal;
}

p.MsoTitle, li.MsoTitle, div.MsoTitle {
    margin: 0cm;
    font-size: 28.0pt;
    font-family: "Calibri Light",sans-serif;
    letter-spacing: -.5pt;
}

p.MsoTitleCxSpFirst, li.MsoTitleCxSpFirst, div.MsoTitleCxSpFirst {
    margin: 0cm;
    font-size: 28.0pt;
    font-family: "Calibri Light",sans-serif;
    letter-spacing: -.5pt;
}

p.MsoTitleCxSpMiddle, li.MsoTitleCxSpMiddle, div.MsoTitleCxSpMiddle {
    margin: 0cm;
    font-size: 28.0pt;
    font-family: "Calibri Light",sans-serif;
    letter-spacing: -.5pt;
}

p.MsoTitleCxSpLast, li.MsoTitleCxSpLast, div.MsoTitleCxSpLast {
    margin: 0cm;
    font-size: 28.0pt;
    font-family: "Calibri Light",sans-serif;
    letter-spacing: -.5pt;
}

a:link, span.MsoHyperlink {
    color: #0563C1;
    text-decoration: underline;
}

span.TitelZchn {
    font-family: "Calibri Light",sans-serif;
    letter-spacing: -.5pt;
}

span.berschrift1Zchn {
    font-family: "Calibri Light",sans-serif;
    color: #2F5496;
}

span.berschrift2Zchn {
    font-family: "Calibri Light",sans-serif;
    color: #2F5496;
}

.MsoChpDefault {
    font-family: "Calibri",sans-serif;
}

.MsoPapDefault {
    margin-bottom: 8.0pt;
    line-height: 107%;
}

div.WordSection1 {
    margin-right: 1rem;
    width: 650px;
    max-width: 100vw;
    display: inline-block;
    max-width: calc(100vw - 10px);
}

body {
    margin: 5px;
}

main{
	display:flex;
    justify-content: center;
    flex-wrap: wrap;
}

#Grafik24, #Grafik25 {
    width: calc(100% - 13px);
    height: auto;
}

.WordSection1 video {
    position: absolute;
    top: 12.5%;
    left: 9%;
    width: 35.3%;
    border-radius: 0.7rem;
}

#videoContainer {
    height: fit-content;
    display:grid;
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    gap: 4px; 
}

#videoContainer video {
    width:200px;
    max-width:200px;
    height: 200px;
    max-height: 200px;
    object-fit: contain;
}


#videoContainer > div{
    max-width: 200px;
    display: flex;
    flex-direction: column;
    border: 1px solid lightgray;
    align-items: center;
    padding: 5px;
}

#videoContainer > div > div {
    display:flex;
    width: 100%;
    justify-content: space-around;
}

div.play {
    display:inline-block;
    margin-bottom: 0.3rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill:darkgray' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E");
}

div.play.playing {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill:darkgray' viewBox='0 0 320 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z'/%3E%3C/svg%3E");
} 

#videoContainer > div > div > div.max {
    display:inline-block;
    margin-bottom: 0.3rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M152 32c4.4 0 8 3.6 8 8s-3.6 8-8 8H16V184c0 4.4-3.6 8-8 8s-8-3.6-8-8V40c0-4.4 3.6-8 8-8H152zM0 328c0-4.4 3.6-8 8-8s8 3.6 8 8V464H152c4.4 0 8 3.6 8 8s-3.6 8-8 8H8c-4.4 0-8-3.6-8-8V328zM296 32H440c4.4 0 8 3.6 8 8V184c0 4.4-3.6 8-8 8s-8-3.6-8-8V48H296c-4.4 0-8-3.6-8-8s3.6-8 8-8zM448 328V472c0 4.4-3.6 8-8 8H296c-4.4 0-8-3.6-8-8s3.6-8 8-8H432V328c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E");
}

#videoMax video {
    width:512px;
}

.modal-dialog{
    --bs-modal-width: 546px;
}

.calimg {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.calimg > img {
    width: 150px;
    padding: 0.5rem;
}