@media screen and (min-width: 900px) 
{
        .gridbox {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 50%;
            min-width: 900px;
        }


}    
@media screen and (max-width: 900px) 
{
        .gridbox {
            display: grid;
            grid-template-columns:  1fr;
            width: 95%;
        }
}

        * {
            color: #474747;
            font-size: 20px;
            font-weight: 400;
            font-family: 'Roboto', sans-serif;
            background-color: #f8f9fa;
            border: 0px solid;
            border-color: black;
        }


        header {    /* aktuell leer - deswegen 0px */
            text-align: left;
            height: 0px;
            padding-left: 0rem;
            padding-top: 0rem;
        }


        /* ------------------ ANFANG FOTO VIDEO --------------- */
        nav {
            
            /*background-image: url('images/foto.jpeg');
            background-size: cover; */
        }
        nav * {
            color: white;
            font-family: "Julius Sans One", serif;
        }

        /**** NICHT EDITIEREN ****/
        nav img {
            width: 100%;
            max-width: 900px;
            height: auto;
        }

        /**** NICHT EDITIEREN ****/
        nav video {
            width: 100%;
            max-width: 900px;
            height: auto;
        }

         .overlapping-grid {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;

            /* alle Inhalte zentrieren */
            text-align: center;

        }

        /*  Zwei Container für Overlap - Bild und Schrift */
        .overlapping-font-container {
            grid-row-start: 1;
            grid-row-end: 2;
            grid-column-start: 1;
            grid-column-end: 2;
            z-index: 2;

            background-color: transparent; 
        }

        .overlapping-image-container {
            grid-row-start: 1;
            grid-row-end: 2;
            grid-column-start: 1;
            grid-column-end: 2;
            z-index: 1;
        }

        /* Schriftgrößen für Bild-Overlap */
        .overlapping-font-sm {
            background-color: transparent; 
            font-size: 24px;
        }

        .overlapping-font-lg {
            background-color: transparent; 
            font-size: 36px;
        }
        

        /* ------------------ ENDE FOTO VIDEO --------------- */


        footer {
            text-align: center;
            vertical-align: middle;
            height: auto;
            padding: 0.5rem;
            font-size: 15px;
        }

        footer img {
            width: auto;
            height: 70px;
            padding-right: 2rem;
            background-color: transparent;
        }

        /* ----- oberer Teil der Page / ausser Foto ----- */

        .einleitung {
            display: flex;
            flex-direction: column;
            padding-inline: 0.5rem;
            justify-content: center;
            align-items: center;
            padding-bottom: 1rem;
            padding-top: 1rem;
        }

        /* --- Ja gesagt --- */

        .headline  {
            text-align: center;
        }

        .headline strong {
            font-size: 32px;
            font-weight: 800;
        }

        /* --- Liebe Freunde... --- */
        .vorwort {
            margin-top: 50px;
            text-align: center;
        }


        /* --- grid für unteren Teil --- */
        .gridbox {
            gap: 1rem;
            padding: 0.5rem;
            margin: auto;
        }


        /* ---- ein Inhaltsfeld im Grid ---- */

        .inhalt-item * {
            background-color: white;
            font-size: 16px;
        }

        .inhalt-item {
            height: 250px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: white;
            padding: 1rem;
            font-size: 16px;
        }


        /* Fuer Tabelle: item= linke Spalte  / text= rechte Spalte */

        .li-item {
            width: 100px;
            height: 30px;
            vertical-align: top;
            font-size: 16px;
        }


        .li-item strong {
            font-weight: 800;
            font-size: 16px;
        }

        .li-text {
            vertical-align: top;
            text-align: left;
            padding-left: 1rem;
            font-size: 16px;
        }




        /* ---------------- nur für die Login Seite ---------------- */

        .gridbox-loginpage {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 2rem;
        }


        .inhalt-item-loginpage {
            font-size: 32px;
            font-weight: 400;
            width: 300px;
            height: 150px;
            text-align: center;
            align-items: center;
            
        }

        .inhalt-item-loginpage form {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-inline: 2rem;
            font-size: 16px;
        }

        .inhalt-item-loginpage *{

            background-color: #f8f9fa;
        }

        .inhalt-image-loginpage {
            width: 300px;
            text-align: center;
            padding-bottom: 1rem;
        }
        .inhalt-image-loginpage img{
            width: auto;
            height: 200px;
        }