@font-face {
        font-family: "IBMPlexSans";
        src: url("/fonts/IBMPlexSans-Regular.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
    }
    @font-face {
      font-family: "IBMPlexSans";
      src: url("/fonts/IBMPlexSans-Bold.ttf") format("truetype");
      font-weight: 700;
      font-style: normal;
    }
    html {
        font-size: 10px;
        scroll-behavior: smooth;       /* sanftes Scrollen */
        /*scroll-snap-type: y mandatory;  aktiviert Snap Scrolling vertikal */
        overflow-y: scroll;
    }
    table{
        margin-top: -5rem;
    }
    td{
        padding-right: 2rem;
    }
    body {
        font-family: "IBMPlexSans", sans-serif;
        color: #b7c5e2;
        background: radial-gradient(circle, #475572, #273552);
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    h1{
        font-size: 6rem;
        max-width: calc(100vw - 40rem);
        margin: 0;
    }
    .strongLarge{
        font-size: 5rem;
        font-weight: bold;
    }
    #opening .strongLarge{
        width:80%;
        grid-row: 2;
    }
    .strongMedium{
        font-size: 3rem;
        font-weight: bold;
    }
    p,li{
        font-size: 2.5rem;
    }
    #main{
        display: flex;
        align-items: center;
        flex-direction: column;
        scroll-snap-align: start;
        /*background: radial-gradient(circle, #475572, #273552);*/
        width: 100%;
    }
    .dialog{
        scroll-snap-align: start;
        color: #b7c5e2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 1200px;
        margin-bottom: 50px;
    }

    button{
        background-color: #b7c5e2;
        color: #273552;
        border-radius: 40px;
        border-width: 4px;
        border-color: #273552;
        cursor: pointer;
        font-size: 3rem;
    }
    button:hover{
        background-color: #c7d5f2;
    }
    a{
        color: #b7c5e2;
    }
    a:visited{
        color: #97a5c2;
    }
    footer{
        padding: 2rem 0rem;
        background-color: black;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    footer p{
        max-width: 1200px;
    }
    #footerContainer{
        display: flex;
        gap:20px;
        font-size: 3rem;
    }
    #opening{
        max-width: 1400px;
        display: grid;
        justify-items: center;
        align-content: center;
        grid-template-columns: 1fr 1fr;
        padding: 4rem;
    }
    #header{
        width: 80rem;
        margin-top: 15rem;
    }
    .card{
        width: 31rem;
        transition: all .4s;
        border-radius: 2rem;
    }
    .card:hover{
        box-shadow: 10px 5px 5px black;
        z-index: 1;
        scale: 1.1;
    }
    #pictures{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row: 1/3;
        gap: 2rem;
        grid-column: 2;
        margin-right: 8rem;
        margin-top: 6rem;
    }
    #grafic{
        grid-row: 1/3;
        grid-column: 2;
        width: 70rem;
    }
    #arrowDown{
        color: #273552;
        position: absolute;
        bottom: 10dvh;
    }
    #logo{
        position: fixed;
        top: 40px;
        right: 40px;
        width: 17rem;
        mix-blend-mode: difference;
    }
    #buttonBoard{
        display: flex;
        gap: 50px;
        margin: 20px 20px;
    }
    #toTest{
        margin-left: 20px;
    }
    .mode {
        transform: translateZ(0);
        font-size: 4rem;
        border: none;
        padding: 2rem 3rem;
        border-radius: 30px;
        color: #273552;
        background: linear-gradient(120deg, #4f8cff, #7fcfff);
        cursor: pointer;
        transition: all 0.25s ease;
        width: 45rem;
        overflow: hidden;
    }

    .mode::before {
        content: attr(data-text);
        display: flex;
        color: #273552;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, #afccff, #ffffff);
        transition: all 0.4s ease;
        z-index: 0;
    }

    .mode:hover::before {
        left: 0;
    }

    .mode span,
    .mode::before {
        pointer-events: none;
    }

    .mode.active {
        background: linear-gradient(120deg, #4f8cff, #7fcfff);
        color: white;
        transform: scale(1.05);
    }

    .mode:hover {
        transform: scale(1.08);
    }
    @media (max-width:1530px) {
        html { font-size: 8px; }
        #header{width:60rem;}
        .dialog{
            width: 80vw;
        }
    }
    @media (max-width:1070px) {
        #grafic{width:50rem;margin:0px;}
        html { font-size: 7px; }
        #opening{display: flex;
                flex-direction: column;
            align-items: center;}
        footer p{
        width: 80vw
        }
        #buttonBoard{
        flex-direction: column;
        gap:25px;}
    }
    @media (max-width:600px){
        #grafic{
        position: absolute;
        top: 45rem;
        right: 8rem;
        width: 25rem;
    }
    h1{margin-top: 5rem;}
        html { font-size: 5px;
        scroll-snap-type: none;}

        #main{display: flex; align-items: center;}
    }
    @media (max-width:500px){
        #grafic{
        position: absolute;
        top: 51rem;
        right: 8rem;
        width: 25rem;
    } }