body {  
            font-family:  Roboto, Arial, Helvetica, sans-serif,  Verdana, Geneva, Tahoma, sans-serif; 
            background-color: #FFFFFF;
            margin: 0;
            padding: 5px;
            font-size: 14px;            
        }

        textarea
        {
          text-align: left; 
          background-color: #F0F0F0;
          border:1px solid #999999;
          width:100%;
          margin:5px 0;
          padding:3px;
        }        
        
        table {
            width: 100%; 
            background-color: #FFFFFF;  
            border: 1px solid black;  
            border-collapse: collapse;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        td  {   
            border-left: 1px solid black;  
            text-align: left; 
            vertical-align:top; 
            white-space: nowrap;
            padding: 2px;
        }
        
        th  {   
            background-color: #274A70;
            color: white;
            border-left: 1px solid rgb(66, 66, 66);  
            border: 1px solid lightgrey;  
            text-align: left; 
            vertical-align:top; 
            white-space: text-wrap; 
            padding: 2px;
        }
        tr:nth-child(even) {
           background-color: #F0F0F0;
        }
        tr:nth-child(odd) {
           background-color: #E0E0E0;
        }        
        tr  {   
            border-bottom: 1px solid rgb(66, 66, 66);  
        }

        
        table.noBorder {
            width: 100%; 
            background-color: #FFFFFF;  
            border: 0px solid black;  
            border-collapse: collapse;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        td.noBorder  {   
            border-left: 0px solid black;  
            text-align: left; 
            vertical-align:top; 
            white-space: nowrap;
            padding: 2px;
        }
        tr.noBorder  {   
            background-color: #FFFFFF;  
        }
        tr.noBorder:nth-child(even) {
           background-color: #FFF;
        }
        tr.noBorder:nth-child(odd) {
           background-color: #FFF;
        }        
        
        th.noBorder  {   
            border-left: 0px solid rgb(66, 66, 66);  
            text-align: left; 
            vertical-align:top; 
            white-space: text-wrap; 
            padding: 2px;
        }

        
        header {
            background-color: #FFFFFF;
            padding: 10px 0;
            color: white;
            text-align: center;
        }

        table.header {
            background-color: #FFFFFF;
            width: 100%;
            border-collapse: collapse;
        }

        td.header {
            background-color: #272B3A;
            padding: 10px;
        }

        td.header a {
            background-color: #272B3A;
            color: white;
            text-decoration: none;
            font-weight: bold;
        }

        td.header a:hover {
            background-color: #272B3A;
            text-decoration: underline;
        }

        td.header:nth-child(2) {
            background-color: #272B3A;
            text-align: center;
        }

        td.header:nth-child(3) {
            text-align: right;
        }
       
/*
        table.header{
            border: 2px solid;
            text-align: left;
            width: 100%;
            background-color: gainsboro;
            padding: 2px 2px 2px  2px;
            margin: 5px 0px 10px  0px;
        }
        
        th.header{
            text-align: left;
            background-color: white;
        }
        td.header{
            text-align: left;
            background-color: gainsboro;
        }
  */      
        
        p {
          font-family: roboto;
        }

        h1 {
          font-family: roboto;
          font-size: 30px;
          text-align: left;
        }
        
        input.profiledetail {
            width: 60%;
            box-sizing: border-box;
            padding-top: 4px;
            margin-top: 4px;
          }
        
        label.profiledetail {
            width:40%;
            float:left;
            display: inline-block;
            text-transform: uppercase;
            padding-top: 4px;
            margin-top: 4px;
        }
          
        profiledetail.input:focus {
            background-color: lightblue;
        }
        
        input.profilelist {
            width: 100%;
            box-sizing: border-box;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
          }
          
        select.profilelist {
            width: 100%;
            box-sizing: border-box;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
          }
        
        label.profilelist {
            font-size: 14px;            
            width:100%;
            float:left;
            display: inline-block;
            text-transform: uppercase;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
        }
          
        input.profilelist:focus {
            background-color: lightblue;
        }        
        
        button {
          margin: 0px 0px 0px 0px;
          padding: 2px 0px 2px 0px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 14px;
          width: 100%;
        }        
        
        textarea {
          margin: 0px 0px 0px 0px;
          padding: 2px 0px 2px 0px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 14px;
          width: 100%;
        }        

        .profiltable {
            width:100%;
            display: inline-block;
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
        }
        
        a.button {
            width:100%;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
            border: 1px outset buttonborder;
            border-radius: 3px;
            color: buttontext;
            background-color: buttonface;
            text-decoration: none;
        }        
    
        
        table.overview {
            background-color: #484F6B;  
            border: 1px solid black;  
            border-collapse: collapse;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        td.overview {
            overflow: hidden; 
            text-overflow: ellipsis; 
            white-space: nowrap;            
            box-sizing: border-box;
        }
        th.overview {
            overflow: hidden; 
            text-overflow: ellipsis; 
            white-space: nowrap;            
            box-sizing: border-box;
        }        
/*        
        tr.overview:nth-child(even) {
           background-color: #484F6B;
        }
        tr.overview:nth-child(odd) {
           background-color: #484F6B;
        }        
        tr.overview  {   
            border-bottom: 1px solid rgb(66, 66, 66);  
        }
        
*/        
    div.LOGIN{
        background-color: #f0f0f0;
        display: flex;
        justify-content: center; 
        align-items: center; 
        height: 100vh;
        }
    h2.LOGIN {
        color: #333;
        text-align: center;
    }

    form.LOGIN {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 300px;
    }

    input.LOGIN[type="text"],
    input.LOGIN[type="password"] {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    input.LOGIN[type="submit"] {
        width: 100%;
        padding: 10px;
        background-color: #272B3A;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    input.LOGIN[type="submit"]:hover {
        background-color: #272B3A;
    }
        
.kacheln-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px;
    overflow-y: auto;
    max-height: 80vh; /* Scrollbar, wenn nicht genug Platz */
}

.kachel {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    width: 270px;
    height: 200px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 600px) {
    .kachel {
        width: 100%; /* Setzt die Breite auf 100% des Containers */
    }
}

.kachel h3 {
    margin-top: 0;
    font-size: 18px;
    color: #274A70;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.kachel-content {
    flex-grow: 1;
    overflow-y: auto;
}
    
.kachel table {
    background-color: #fff;  
    border: 0px solid black;  
    border-collapse: collapse;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.kachel td {
    background-color: #274A70;
    font-size: 14px;
    color: white;
    overflow: hidden; 
    text-overflow: ellipsis; 
    text-align: right; 
    white-space: nowrap;            
    box-sizing: border-box;
}
.kachel th {
    background-color: #FFF;
    color: darkgray;
    font-size: 12px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;            
    box-sizing: border-box;
}        
.kachel a {
    background-color: #274A70;
    font-size: 14px;
    color: white;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;            
    box-sizing: border-box;
}

    h1, h2 {
      color: #005f8f;
    }
    address {
      font-style: normal;
      margin-bottom: 2em;
    }

     footer {
      margin-top: 3em;
      padding: 1em;
      font-size: 0.9em;
      color: #666;
      border-top: 1px solid #ccc;
      text-align: center;
    }
    footer a {
      color: #005f8f;
      text-decoration: none;
      margin: 0 1em;
    }
    footer a:hover {
      text-decoration: underline;
    }