/* Body-Stile */
body {
    
    display: flex;
    
    margin: 0;
    flex-direction: column;
    
}



.logo-container {
    position: relative;
}

/* Einheitliche Rundung für alle Elemente außer der Navigation */
:root {
    --logo-height: auto; /* Initialer Wert, wird durch JavaScript überschrieben */
}




/*---------------------------------------------------------------*/


	
	
/* Weißer Background */
.content-container {
    width: 100%;
    padding: 1.5rem;
    height: auto;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

h3 {
    font-size: 18px; /* Schriftgröße */
    font-weight: bold; /* Schriftstärke */
    color: #333; /* Textfarbe */
    margin-bottom: 10px; /* Abstand nach unten */
}



.summary-container {
    margin: 0;
    padding: 10px 0;
}

.summary-container p {
    margin: 0;
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.summary-container b {
    width: 200px; /* Adjust this width as needed for alignment */
    display: inline-block;
}

.summary-container ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.summary-container ul li {
    padding-left: 1.2em;
    text-indent: -1.2em;
    display: flex;
    align-items: center;
}

.summary-container ul li:before {
    content: "\\2022";
    color: #000;
    display: inline-block;
    width: 1.2em;
    margin-left: -1.2em;
}

#addAkButton,
.deleteBtn,
.editBtn {
    background-color: transparent;
    color: #045db4;
    border: 2px solid #045db4;
    padding: 8px 16px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-size: 14px;
    margin-right: 8px; /* Abstand zwischen den Buttons */
    margin-bottom: 10px; /* Abstand unter den Buttons */
}

#addAkButton:hover,
.deleteBtn:hover,
.editBtn:hover {
    background-color: #045db4;
    color: #fff;
    border-color: #045db4;
}

/* Tabelle-Stile */
#akTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#akTable th,
#akTable td {
    border: 1px solid #ccc; /* Rahmen um Zellen */
    padding: 12px 16px; /* Innenabstände für Zellen */
    text-align: left; /* Text links ausrichten */
}

#akTable th {
    background-color: #045db4;
    color: #fff;
}

#akTable tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

#akTable tbody tr:hover {
    background-color: #f0f0f0; /* Hervorhebung bei Hover */
}


/* Checkbox-Label und Checkbox-Stile */

    
.checkbox-label {
    display: flex; /* Flexbox verwenden */
    align-items: flex-start; /* Ausrichtung an der oberen Zeile */
    margin-bottom: 10px; /* Abstand zum nächsten Element */
}

.checkbox-label input[type="checkbox"] {
    margin-right: 5px ; /* Abstand zwischen Checkbox und Text */
}

.checkbox-item {
    display: flex; /* Flexbox verwenden */
    align-items: flex-start; /* Ausrichtung an der oberen Zeile */
    margin-bottom: 3px; /* Abstand zwischen den Checkbox-Elementen */
}

.checkbox-item input[type="checkbox"] {
    margin-top: 3.5px; /* Feinjustierung für vertikale Ausrichtung */
    margin-right: 5px ; /* Abstand zwischen den Checkbox-Elementen */
}

.checkbox-item2 {
    display: flex; /* Flexbox verwenden */
    align-items: flex-start; /* Ausrichtung an der oberen Zeile */
}

.checkbox-item2 input[type="checkbox"] {
    margin-top: 3.5px; /* Feinjustierung für vertikale Ausrichtung */
    margin-right: 5px ; /* Abstand zwischen den Checkbox-Elementen */
}

.checkbox-list {
    display: flex;
    flex-wrap: wrap; /* Umbruch für Checkbox-Liste */
}


/* Label-Text wird umgebrochen, wenn er zu lang ist */
.checkbox-label span {
    flex: 1; /* Der Text wird umgebrochen, wenn er zu lang ist */
    overflow-wrap: break-word; /* Textumbruch bei Bedarf */
}


/* Eindeutige Klasse für das zweite Label */
.unique-label {
    flex: 1; /* Flexibles Wachstum für den Text */
}

.btn {
    background-color: #045db4;
    color: #fff;
    font-size: 16px;
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    margin-top: 7px;
    transition: background-color 0.1s ease;
}

.btn:hover {
    background-color: #e46f12;
}

.column {
    flex: 1;
}

.checkbox-item:last-child {
    margin-right: 0;
}

#kommentarFeld textarea {
     width: 100%;
    padding: 7px; /* Reduziere den Innenabstand der Eingabefelder */
    font-size: 14px; /* Reduziere die Schriftgröße der Eingabefelder */
    border: 1px solid #045db4;
    border-radius: var(--border-radius);
    transition: border-color 0s ease;
    font-family: inherit;
    margin-bottom: 5px;
}

#kommentarFeld textarea:focus {
    border-color: #e46f12;
    outline: none;
}

#kommentarFeld label {
    color: #222;
    font-size: 16px;
    margin-bottom: 7px;
    display: block; /* Damit das Label über dem Textarea-Feld steht */
}

#subgroups {
    width: 100%;
    background-color: white;
    padding: 7px; /* Reduziere den Innenabstand der Checkliste */
    font-size: 14px; /* Reduziere die Schriftgröße der Checkliste */
    border: 1px solid #045db4;
    border-radius: var(--border-radius);
    transition: border-color 0s ease;
    font-family: inherit; /* Verwendet die Schriftart des übergeordneten Elements */
}

#subgroups:focus {
    border-color: #e46f12;
    outline: none;
}


/* Grid container styles */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media screen and (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 2rem;
    }
}

@media screen and (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}


/* Kachel-Stile */
.grid-item {
    text-align: center;
    border: 3px solid #045db4;
    background-color: #fff; /*Hinzufügen des weißen Hintergrunds*/
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0s;
    position: relative;
    z-index: 1;
    border-radius: var(--border-radius); /* Einheitliche Rundung */
    overflow: hidden; /* Verhindert, dass Kinder-Elemente über die Grenzen hinausgehen */
}


.grid-item:hover {
    /* Ändern Sie die border-Eigenschaft */
  border: 3px solid #e46f12;*/
}

.grid-item h3 {
  margin-bottom: 0px;
   color: #333;
}

.grid-item i {
    color: #333;
  font-size: 24px;
   margin-bottom: 5px; /* Neuer Abstand zwischen Icon und Text */
}

.grid-item a {
    display: block;
  width: 100%;
height: 100%;
    padding: 20px; /* Padding auf das Anchor-Tag anwenden */
    text-decoration: none;
color: inherit;
  border-radius: var(--border-radius); /* Einheitliche Rundung */
}







/* Menü-Button-Stile */
.menu-button {
    width: 100%; /* Breite auf 100% setzen */
    margin-bottom: 10px;
    display: none; /* Zunächst ausblenden */
    background-color: transparent;
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 10px;
    border-radius: var(--border-radius); /* Einheitliche Rundung */
    transition: background-color 0.3s ease;
}

.menu-button:hover {
    background-color: #e46f12;
}






/*Profile-Page*/
  #notification {
      display:none;
      position:fixed; top:5rem; right:1rem;
      background:var(--color-orange);
      color: white;
      padding:1rem 1.5rem;
      border-radius:4px;
      box-shadow:0 2px 6px rgba(0,0,0,0.2);
      z-index:100;
      transition:opacity .3s;
    }

    .visitenkarte {
      display:flex;
      align-items:center;
      background: white;
      border-radius: 8px;
      box-shadow:0 4px 12px rgba(0,0,0,0.1);
      padding:1rem;
      margin-bottom: 1rem;
    }

        .avatar-container {
      position: relative; width:110px; height:110px;
      margin-right:1.5rem;
    }
    .avatar-container img {
      width:100%; height:100%;
      border-radius:50%; object-fit:cover;
      border:4px solid var(--color-orange);
    }
    /* Fortschritts-Border */
    .avatar-container::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0;
      width: 0; height: 4px;
      background: var(--color-orange);
      transition: width .2s ease;
    }
    .avatar-container.uploading::after {
      width: var(--color-bg, 0%);
    }
    .avatar-container .icon {
      position: absolute;
      background: rgba(0,0,0,0.6);
      color: #fff;
      width: 32px; height:32px;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      cursor: pointer;
    }

    .camera-icon { 
        bottom:4px; 
        left:4px; }
    .delete-icon { bottom:4px; right:4px; }
    .avatar-container input[type="file"] { display:none; }

    .info h2 {
      color:var(--color-blue-dark);
      font-size:1.5rem;
    }
    .info p {
      font-size:.85rem;
    }
    
    
    .flex-container {
       display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    }
    
    .flex-container .box {
    flex: 1 1 100%; /* Nimmt erstmal die volle Breite */
    max-width: 100%;
}

/* Wenn zwei Karten vorhanden sind, teile die Fläche auf */
.flex-container .box {
  flex: 1 1 49%;
  max-width: 49%;
}

/* 1 box → volle Breite */
.flex-container:only-child .box {
  flex: 1 1 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
    .flex-container .box {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

    .box {
      background: white;
      border-radius: 8px;
      box-shadow:0 2px 8px rgba(0,0,0,0.05);
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }
    .box-header {
      background:var(--color-blue-dark);
      color:#fff;
      padding:0.8rem;
      font-size:1rem;
      font-weight:600;
    }
    .box-body {
      padding:1rem;
    }