:root {
    --fenster-BreiteLinks: 100px;
    --fenster-BreiteMitte: 100px;
    --fenster-BreiteRechts: 100px;
    --fenster-BreiteMitteRechts: 100px;
    --fenster-Höhe: 100px;

    --fenster-ÜberschriftNullWert: 100px;
    --fenster-ÜberschriftEinsWert: 100px;
    --fenster-ÜberschriftZweiWert: 100px;
    --fenster-TextWert: 100px;
    --fenster-Breite20: 100px;
    --fenster-Breite30: 100px;
    --fenster-Breite70: 100px;
    --fenster-Breite105: 100px;
    --fenster-Breite270: 100px;
    --fenster-Höhe12: 100px;
    --fenster-Höhe25: 100px;
    --fenster-Höhe30: 100px;
    --fenster-Höhe50: 100px;
    --fenster-Höhe60: 100px;
    --fenster-Höhe70: 100px;
    --fenster-Höhe90: 100px;
    --fenster-Höhe170: 100px;
    --fenster-Höhe200: 100px;

    --fenster-TextWertKlassen: 100px;
    --fenster-TextWertEins: 100px;
    --fenster-Breite25: 100px;
    --fenster-Breite50: 100px;
    --fenster-Breite116: 100px;
    --fenster-Breite117: 100px;
    --fenster-Breite133: 100px;
    --fenster-Breite150: 100px;
    --fenster-Breite213: 100px;
    --fenster-Breite266: 100px;
    --fenster-Breite1000: 100px;
    --fenster-Höhe10: 100px;
    --fenster-Höhe58: 100px;
    --fenster-Höhe117: 100px;
    --fenster-Höhe196: 100px;
    --fenster-Höhe204: 100px;
    --fenster-Höhe220: 100px;
    --fenster-Höhe550: 100px;

    --fenster-BorderKlassen: 5px;
    
    --border: var(--fenster-BorderKlassen) solid black;
}

.Allgemein {
    display: flex;
}

html, body {
    margin: 0;
    padding: 0;
}


.ÜberschriftEins {
    font-size: var(--fenster-ÜberschriftEinsWert);
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration: underline;
    text-align: center;
}

.TextEins {
    font-size: var(--fenster-TextWert);
    text-align: justify;
    margin-left: var(--fenster-Breite20);
    margin-right: var(--fenster-Breite20);
    margin-top: var(--fenster-Höhe60);
    margin-bottom: var(--fenster-Höhe170);
}

.ÜberschriftZwei {
    font-size: var(--fenster-ÜberschriftZweiWert);
    margin-left: var(--fenster-Breite20);
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
}

.TextZwei {
    font-size: var(--fenster-TextWert);
    text-align: justify;
    margin-left: var(--fenster-Breite20);
    margin-right: var(--fenster-Breite20);
}

.Menuleiste {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: fixed;

    background-color: green;
    width: var(--fenster-BreiteLinks);
    height: var(--fenster-Höhe);

    pointer-events: none;
}

.menu {
    background-color: green;
    margin-top: var(--fenster-Höhe70);
    margin-left: auto;
    margin-right: auto;
    height: var(--fenster-Höhe60);
    width: var(--fenster-Breite70);
    text-align: center;
    pointer-events:all;
    cursor: pointer;
  }

.menu-item {
    background-color: white;
    height: var(--fenster-Höhe12);
    width: var(--fenster-Breite70);
    margin-bottom: var(--fenster-Höhe12);
    text-align: center;
}
.MenunameBox {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.Menuname {
    font-size: var(--fenster-ÜberschriftNullWert);
    color: white;
    transform: rotate(-90deg);
    font-weight: bold;
}

.LogoBox {
    margin-bottom: var(--fenster-Höhe70);
}

.Logo {
    height: var(--fenster-Höhe90);
    width: var(--fenster-Breite105);
}

.Text {
    margin-left: var(--fenster-BreiteLinks);
    background-color: lightgrey;
    width: var(--fenster-BreiteMitte);
    height: var(--fenster-Höhe);
}

.BilderRechts {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    background-color: lightgrey;
    width: var(--fenster-BreiteRechts);
    height: var(--fenster-Höhe);
}

.BilderBox {
    color: lightgrey;
}

.Bilder {
    height: var(--fenster-Höhe220);
    width: var(--fenster-Breite270);
}

.BildMitte {
    height: var(--fenster-Höhe200);
    width: var(--fenster-Breite150);
}

#AbstandUnten {
    margin-bottom: var(--fenster-Höhe25);
}
#AbstandOben {
    margin-top: var(--fenster-Höhe25);
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: var(--fenster-Breite30) solid transparent;
    border-right: var(--fenster-Breite30) solid transparent;
    border-top: var(--fenster-Höhe50) solid rgb(123, 123, 123);
}

.Vogelperspektive {
    margin-left: var(--fenster-BreiteLinks);
    width: var(--fenster-BreiteMitteRechts);
    height: var(--fenster-Höhe);
    background-color: lightgrey;
}

.ÜberschriftDrei {
    font-size: var(--fenster-ÜberschriftZweiWert);
    margin-top: var(--fenster-Höhe30);
    margin-left: var(--fenster-Breite20);
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
}

.TextDrei {
    font-size: var(--fenster-TextWert);
    text-align: justify;
    margin-left: var(--fenster-Breite20);
    margin-right: var(--fenster-Breite20);
}

.Mittig {
    display: flex;
    justify-content: center;
    align-items: center; /* Vertikales Zentrieren */
}

.Stock3 {           /*Gesamter Plan außen*/    
    margin-top: var(--fenster-Höhe30);
    height: var(--fenster-Höhe550);
    width: var(--fenster-Breite1000);

    color: black;
    font-size: var(--fenster-TextWertKlassen);
    background-color: white;

    border: var(--border);
}
.ObenUnten {                    /*Klassenräume oben und unten*/
    height: var(--fenster-Höhe117);
    width: var(--fenster-Breite1000);

    display: flex;
}
.GangObenUnten {                /*Gang waagrecht oben und unten*/
    height: var(--fenster-Höhe58);
    width: var(--fenster-Breite1000);

    background-color: white;
}

.Mitte {                        /*Räume in der Mitte*/
    height: var(--fenster-Höhe196);
    width: var(--fenster-Breite1000);

    display: flex;
}

.KlassenzimmerOben {
    height: var(--fenster-Höhe117);
    width: var(--fenster-Breite213);

    display: flex;
    justify-content: center;
    align-items: center;

    border-right: var(--border);
    border-bottom: var(--border);

    pointer-events:all;
    cursor: pointer;
}

.Lehrerzimmer {
    height: var(--fenster-Höhe117);
    width: var(--fenster-Breite133);               /*201 ist zwar schieacha, aba keine Ahnug wo der Pixel fehlt: 1500px=320*4+5*4+200. Aba da fehlt ein Pixel keine Ahung HTML Problem.*/

    border-bottom: var(--border);

    background-color: black;
}

.RaumLinks {
    height: var(--fenster-Höhe196);
    width: var(--fenster-Breite116);

    border-top: var(--border);
    border-right: var(--border);
    border-bottom: var(--border);

    background-color: black;
}

.GangLinksRechts {
    height: var(--fenster-Höhe196);
    width: var(--fenster-Breite50);

    background-color: white;
}

.RaumMitte {
    height: var(--fenster-Höhe196);
    width: var(--fenster-Breite266);

    border: var(--border);

    background-color: black;
}

.GangMitte {
    height: var(--fenster-Höhe204);
    width: var(--fenster-Breite133);

    background-color: white;            /* enfernen nur für Test-Tabelle, border auch und im html code*/

    border: 0px;
}

.RaumRechts {
    height: var(--fenster-Höhe196);
    width: var(--fenster-Breite117);

    border-top: var(--border);
    border-left: var(--border);
    border-bottom: var(--border);

    background-color: black;
}

.KlassenzimmerUntenLinks {
    height: var(--fenster-Höhe117);
    width: var(--fenster-Breite213);

    display: flex;
    justify-content: center;
    align-items: center;

    border-right: var(--border);
    border-top: var(--border);

    pointer-events:all;
    cursor: pointer;
}

.KlassenzimmerUntenRechts {
    height: var(--fenster-Höhe117);
    width: var(--fenster-Breite213);

    display: flex;
    justify-content: center;
    align-items: center;

    border-left: var(--border);
    border-top: var(--border);

    pointer-events:all;
    cursor: pointer;
}

.GangUnten {
    height: var(--fenster-Höhe117);
    width: var(--fenster-Breite133);

    background-color: white;
}

.Ende {
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0; /* positioniert die .Ende am unteren Bildschirmrand */
    padding: var(--fenster-Höhe10) 0;
}

h3 {
    font-size: var(--fenster-TextWertEins);
    color: green;
    margin: 0 var(--fenster-Breite25); /* Setzt den Abstand zwischen den Elementen auf 50px */
    pointer-events:all;
    cursor: pointer;
}