/* Grundlegende Reset-Styles */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family:'OpenSansCondensed-Bold', sans-serif;
  font-size: 1.1rem;
}

/* Button */
#apply-button, button {
  width: 100%;
  padding: 0.8rem;
  background-color: #007aff;
  color: white;
  font-size: 1.1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#apply-button:hover, button:hover {
  background-color: #005bb5;
}

/* Alarmformular optimiert für Mobilgeräte */
.alarm-eingabe {
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  max-width: 500px;   /* hier am 01-06-25 geändert*/
  margin: 0 auto 2rem auto;
}

/* Tabelle */
.alarm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.8rem;
}

.alarm-table td {
  padding: 0.3rem 0.5rem;
  vertical-align: middle;
  text-align: left;
  width: 50%;
}

.back-button a {
    color: white;
    font-size: 28px;
    text-decoration: none;
   
}

.back-button {
    position: absolute;
    left: 10px;                    
}

/* Buttons */
button {
  width: 100%;
  max-width: 160px;
  padding: 0.6rem;
  font-size: 1rem;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

a.button {
width: 160px;
height: 41px;
font-size: 18px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 0px;
margin-left: 0px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none; /* Wichtig, um Link-Optik zu entfernen */
}

a.button:hover {
background-color: #0056b3;
}

body {
  font-family: sans-serif;
  background-color: #f8f9fa;
  color: #222;
  padding: 1rem;
  display: flex;   /*neu*/
  flex-direction: column;   /*neu*/
}

/* Positionierung des "current_user"-Spans */
#current_user {
  font-size: 20px;
  color: rgb(226, 226, 226);
  /* white-space: nowrap;  Verhindert Zeilenumbruch */
  display: inline-block;
  padding: 0 10px;
  text-transform: capitalize;
  margin-right: 20px; /* Optional: Abstand nach rechts */
}


footer {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 2rem;
  color: #888;
}

/* Formularstruktur */
form {
  width: 100%;
}

.gauge__body {
    position: absolute;
    top: 50px;
    left: 35px;
    width: 280px; 
   /* height: 10px; */
    border-top: 3px solid black;
    border-left: 3px solid black;
    border-right: 3px solid black;
    padding-bottom: 140px; 
    border-top-left-radius: 50% 100%; 
    border-top-right-radius: 50% 100%;
    overflow: hidden;
}

.gauge__zone1,
.gauge__zone2,
.gauge__zone3,
.gauge__zone4,
.gauge__zone5, 
.gauge__zone6

{
    position: absolute;
    top: 139px;
    left: -60px;
    width: 400px; /* Volle Breite von .gauge__body nutzen */
    height: 200px; /* Doppelte Höhe, um den Halbkreis zu füllen */
    transform-origin: center top;
}

.gauge__zone1 { background: green; transform: rotate(34.5deg);  border: 3px solid #f4f4f4}
.gauge__zone2 { background: yellow; transform: rotate(67.5deg); border: 3px solid #f4f4f4}
.gauge__zone3 { background: DarkOrange; transform: rotate(106.5deg); border: 3px solid #f4f4f4}
.gauge__zone4 { background: red; transform: rotate(180deg); }

.gauge__zone5 { background: rgb(110, 164, 223); transform: rotate(180deg); }
.gauge__zone6 { background: lightgreen; transform: rotate(119deg); border: 2px solid #f4f4f4}

.gauge__line { 	
    position: absolute;
    top: 139px;
    left: 0px;  /* verändern die Länge des Zeigers, Summe muß 50 sein */
    width: 140px;  /* verändern die Länge des Zeigers, Summe muß 50 sein */
    height: 5px; 
    border-radius: 2.5px;
    background:black;
    transform-origin: center right;
    transform: rotate(0.25turn);
    transition: transform 0.7s ease; /*verzögerung*/
}      

.gauge__line_ph, .gauge8__line_ph  { 	/* peak hold zeiger*/
    position: absolute;
    top: 139px;
    left: 0px;  /* verändern die Länge des Zeigers, Summe muß 50 sein */
    width: 140px;  /* verändern die Länge des Zeigers, Summe muß 50 sein */
    height: 3px; 
    border-radius: 1.5px;
    background:black;
    transform-origin: center right;
    transform: rotate(0.25turn);
    transition: transform 2s ease; /*verzögerung*/
}      

 .gauge4__line, .gauge5__line, .gauge2__line, .gauge3__line{ 	
    position: absolute;
    top: 139px;
    left: 0;
    width: 280px; /* Volle Breite von .gauge__body nutzen */
    height: 280px; /* Doppelte Höhe, um den Halbkreis zu füllen */
    transform-origin: center top;
    transform: rotate(0.25turn);
    transition: transform 1s ease; /*verzögerung*/
    background: rgb(0,86,179);
    background: linear-gradient(90deg, rgba(0,86,179,1) 0%, rgb(110, 164, 223) 100%);
}       

.gauge__cover, .gauge2__cover, .gauge3__cover, .gauge4__cover, .gauge5__cover, 
.gauge6__cover, .gauge7__cover, .gauge8__cover, .gauge3a__cover {
    top: 35px;
    left: 33px;
    width: 210px;
    height: 210px;
    background-color: #f4f4f4;
    border-radius: 50%; 
    position: absolute;
    display: flex;
    font-size: 1.5rem;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    padding-bottom: 30%;
    box-sizing: border-box;
}

.gauge7__cover, .gauge8__cover {
    padding-bottom: 8%;
    font-size: 1rem;
}

.gauge__cover, .gauge3a__cover {
    background-color: rgba(0,0,0,0);
}


.gauge__title {
    position: absolute;
    top: 210px;
    left: 175px;
    transform: translateX(-50%); /* Zentriert die Überschrift */
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    color: #004033;
    white-space: nowrap;
}

.gauge__skala_Wert0 {
    position: absolute;
    top: 170px;
    left: 10px;
    }

.gauge__skala_Wert50 {
    position: absolute;
    top: 15px; 
    left: 165px;
    }

.gauge__skala_Wert100 {
    position: absolute;
    top: 170px;
    left: 317px;
    }

    .gauge__skalastrich1,
    .gauge__skalastrich2, 
    .gauge__skalastrich3, 
    .gauge__skalastrich4,
    .gauge__skalastrich5,
    .gauge__skalastrich6,
    .gauge__skalastrich7,
    .gauge__skalastrich8,
    .gauge__skalastrich9,
    .gauge__skalastrich10,
    .gauge__skalastrich11    { 	

        position: absolute;
        top: 188px;
        left: 175px;  /* verändern die Länge des Zeigers, Summe muß 50 sein */
        width: 150px;  /* verändern die Länge des Zeigers, Summe muß 50 sein */
        height: 2px; 
        background:black;
        transform-origin: center left;
       }       

    .gauge__skalastrich1 {height: 4px; transform: rotate(180deg);}       
    .gauge__skalastrich2 {transform: rotate(198deg);}  
    .gauge__skalastrich3 {transform: rotate(216deg);}       
    .gauge__skalastrich4 {transform: rotate(234deg);}       
    .gauge__skalastrich5 {transform: rotate(252deg);}    
    .gauge__skalastrich6 {height: 3px; transform: rotate(270deg);}  
    .gauge__skalastrich7 {transform: rotate(288deg);}       
    .gauge__skalastrich8 {transform: rotate(306deg);}       
    .gauge__skalastrich9 {transform: rotate(324deg);}    
    .gauge__skalastrich10 {transform: rotate(342deg);}    
    .gauge__skalastrich11 {height: 4px; transform: rotate(360deg);}  


/* Links (current_user) ganz nach links verschieben */
.left-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Positioniere nach links */
    margin-left: 0; /* Verhindert unnötigen Abstand */
    padding-left: 10px; /* Abstand nach links */
}

/* Right Controls */
.right-controls {
    display: flex;
    align-items: center;
    gap: 22px;
    justify-content: flex-end; /* Sicherstellen, dass alles nach rechts geht */
    margin-right: 20px;
}

.gear img, .home img, .logout img {
  width: 25px;
  height: 25px;
  display: block;
  cursor: pointer;
}

html, body {
  height: 100%;
  margin: 0;
}

hr {
        width: 100%;
        border: none;
        border-top: 1px solid #ccc;
        margin: 0px 0;
    }

/* Kachel-Link 
.intro-link-m {
  display: block;
  text-decoration: none;
  color: inherit;
  margin: 0 auto 1.5rem auto;
  max-width: 90%;
} */

.input-group, .input-group2  {
    display: flex;
    align-items: flex-start; }


.input-group3 input,
.input-group3 select {
    width: 150px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1.1rem;
    text-align: right;
    box-sizing: border-box;
    height: 40px; /* Gleich erzwingen */
    appearance: none; /* optional für gleichmäßige Darstellung */
    -webkit-appearance: none; /* Safari/Chrome */
    -moz-appearance: none; /* Firefox */
    background-color: white;
}


/* Eingabefelder */
.input-group3 input[type="number"] {
  width: 100%;
  max-width: 200px;
  padding: 0.4rem;
  font-size: 1.1rem;
  /* border-radius: 6px; */
  border: 1px solid #ccc;
}


.input-group6 input {

    width: 320px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1.1rem;
    text-align: left;
    box-sizing: border-box;
    height: 40px; /* Gleich erzwingen */
    appearance: none; /* optional für gleichmäßige Darstellung */
    -webkit-appearance: none; /* Safari/Chrome */
    -moz-appearance: none; /* Firefox */
    background-color: white;
}


/* Eingabefelder */
.input-group4 input[type="number"] {
  width: 100%;
  max-width: 100px;
  padding: 0.4rem;
  font-size: 1rem;
  /* border-radius: 6px; */
  border: 1px solid #ccc;
}


.input-group5 select {
    width: 150px;
    height: 30px;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: right;
    box-sizing: border-box;
    background-color: white;

    /* Einheitliches Aussehen in allen Browsern */
    appearance: none;
    -webkit-appearance: none;  /* Chrome, Safari */
    -moz-appearance: none;     /* Firefox */
    
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 32px; /* Platz für Dropdown-Pfeil */
}

/*
.intro1_m, .intro2_m {
            height: 225px;
            width: 280px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #f4f4f4;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            position: absolute;
            top: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            transition: box-shadow 0.5s ease;

        }

        
.intro1_m { top: 50%;left:  5%; }
.intro2_m { top: 25%;left: 5%; }   */

.intro1_m:hover, .intro2_m:hover {box-shadow: 0px 0px 30px 2px #005eb8;}

.intro-image {
width: 100%;
max-width: 240px;
height: auto;
margin-bottom: 0px;
display: block;
}

.intro-link {
text-decoration: none;
color: inherit;
display: inline-block;
}


.logo2 h4 {
  font-size: 1.2rem;
  color: white;
  text-transform: uppercase;
  margin: 0;
}


.login, .menue {
  background-color: white;
  padding: 1rem;
  border-radius: 10px;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }




/* Label-Anzeige */
label {
  font-size: 1.1rem;
}

 #statusAlarm-klein {
            width: 30px;
            height: 30px;
            animation: blink 1.5s infinite;
        }

        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }




/* Navigation */
nav {
  position: relative;
  background-color: #005eb8;
  padding: 1rem;
  color: white;
  justify-content: center;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

nav h4 {
  font-size: 1.3rem;
  color: #333;
}

/* Logo */
.pcblogo {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1rem auto;
}

/* Seitenbeschriftung */
.seitenbeschriftung, .alarm-eingabe {
  text-align: center;
  margin-bottom: 2rem;
}


.title-m {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.title2-m, 
.title3-m {
  display: block;
  font-size: 1.0rem;
  margin-bottom: 0.3rem;
  color: #555;
}

.title3-m {
    font-size: 1.3rem;
}

.titel {
  text-align: center;
  margin-bottom: 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}
       th,td {
         /* align-items: center;*/
          padding: 8px 8px;
          
        }

td:first-child {
  width: 50%;
  text-align: left;
  padding-right: 0.5rem;
}
/*
#statusImage, #statusImage-sensor, #statusImage2, #statusImage_ftp, #statusAlarm {
        width: 40px;
        height: 40px;
}*/

.unit {
  font-size: 1.1rem;
  color: #444;
}

.unit2 {
        font-size: 14px;
        color:black;
        padding: 5px;
  }


.green {
    background-color: green;
    color: white;
  }
  
.yellow {
    background-color: yellow;
  }
  
.brown {
    background-color: darkorange;
    color: white;
  }
  
.red {
    background-color: red;
    color: white;
  }


.transparent {
    background-color: transparent;
    color: #bbb;
    font-style: italic;
  }

  /* FLEX-Layout für die Gauges */
.gauge-container {
  display: flex;
  flex-wrap: wrap;           /* bricht automatisch um */
  gap: 20px;                 /* Abstand zwischen Gauges */
  justify-content: center;   /* mittig auf größeren Screens */
  align-items: flex-start;
  margin: 1.5rem 0;
}

/* Gemeinsame Gauge-Karte (keine absolute Außen-Positionierung!) */
.gauge {
  position: relative;        /* damit die inneren absoluten Elemente sich hieran orientieren */
  width: 350px;
  height: 260px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f4f4f4;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

/* Auf sehr kleinen Displays: volle Breite */
@media (max-width: 420px) {
  .gauge {
    width: 100%;
    max-width: 350px;
  }
}