.kopfzeile {
    font-size: 2rem;
    padding: 0px;
    margin: 0 auto;     /*Zentrierung*/
    margin-top: 1dvh;
    text-align: center;
}
.knopf {height: 5dvh; 
    width: 5dvh; 
    background-color: #999999; 
    text-align: center; 
    border: 1px solid rgb(56, 56, 56);
    border-radius: 1dvh;
    margin: 0 auto;
    box-shadow: inset -0.2dvh -0.2dvh 1dvh rgba(0, 0, 0, 0.6);}
.knopf:hover{ background-color: #444444;}    

/* .link {
    width: 20dvh;
    background-color: white;
    border: 1px solid rgb(56, 56, 56);
    border-radius: 1dvh;
    margin: 1 1;
} */

/* 1. CSS für große Bildschirme (Desktop / Monitor) */
.container1080{
    /* background-color: #898d4a; */
    width: 40%;             /* Stellt sicher, dass er responsive ist */
    max-width: 40%;         /* Das Limit */
    /* height: 90dvh; */
    margin: 0 auto;          /* Zentriert den Container */
    padding-left: 1.5rem;    /* Bootstrap-Padding beibehalten */
    padding-right: 1.5rem;   /* Bootstrap-Padding beibehalten */
}
.canvas{
    width: 100%;
    max-width: 100%;
    height: 10dvh;
    border:2px solid #201e91;
}
/* 2. Media Query für kleine Bildschirme (Handy / Mobile) */
@media (max-width: 768px) {
    .container1080 {
        /* Überschreibt die Regel, wenn der Bildschirm 768px oder kleiner ist */
        /* background-color: #444444; */
        width: 100%;
        max-width: 92%;
        height: 100dvh;
        /* max-height: 90%; */
        margin: 0 auto; /* Entfernt die Zentrierung, da 100% Breite */
        padding: 0px; /* Reduziert Padding optional auf Mobilgeräten */
    }
}
/* 1. Flex-Container für die Row */
.gauge-row {
    display: flex; /* Aktiviert Flexbox */
    flex-direction: row; /* Stellt sicher, dass die Elemente in einer Reihe sind */
    justify-content: space-around; /* Verteilt den Leerraum gleichmäßig zwischen den Elementen */
    align-items: flex-start; /* Stellt sicher, dass die Elemente oben beginnen */
}

/* 2. Flex-Items (Die einzelnen Gauge-Container) */
.gauge-container {
    /* Erlaubt dem Container, gleichmäßig Platz einzunehmen */
    flex: 1; 
    background-color: #7e7e7c;
    width: 200px;
    height: auto; 
    padding: 2px;
    margin: 2%;
}
.rechteck {
    background-color: rgb(143, 114, 114);
    border: 3px solid black;
    border-radius: 10px;
    width: 100%;
    height: 150px;
    padding: 0px;
    margin: 0 auto;     /*Zentrierung*/
    color: white;
    text-align: center;}
.kreis {
    height: 5dvh;
    width: 5dvh;
    background-color: #7e7e7c;
    border: 1px solid black;
    border-radius: 2.5dvh;
    line-height: 5dvh;      /*text wird vertikal zentriert*/
    text-align: center;
    box-shadow: inset -0.2dvh -0.2dvh 1dvh rgba(0, 0, 0, 0.6);}

.hellGe {background-color: #ffff00;}
.darkGe {background-color: #666600;}
.hellRt {background-color: #ff0000;}
.darkRt {background-color: #660000;}
.hellGn {background-color: #00ff00;}
.darkGn {background-color: #006600;}
.hellBl {background-color: #6666ff;}
.darkBl {background-color: #000066;}
.box-90 {
    display: block;
    background-color: #888888;
    width: 90%;
    max-width: 90%;
    min-width: 10%;
    border: 3px solid #888888;
    margin: 0 auto; /* zentriert die Box; entferne wenn du keine Zentrierung willst */
}