body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column; /* Navbar bleibt oben */
	background: #e7f4fd;
}

.login-container {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
    backdrop-filter: blur(10px);
}

.logo {
    display: block;
    margin: 0 auto 20px;
    width: 150px;
}

.input-field {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.submit-button {
    width: 100%;
    padding: 10px;
    background-color: #E88700;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.submit-button:hover {
    background-color: #cc6f00;
}

.text-link {
    color: #E88700;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

/* Kopfzeile */
.navbar {
    background-color: #E88700;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
    box-sizing: border-box;
}

.navbar img {
    max-height: 50px;
    vertical-align: middle;
}

.navbar input[type="text"] {
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
	padding-top: 2px;
    padding-bottom: 2px;
    border: none;
    outline: none;
    width: 200px;
    background-color: white;
    margin-left: auto; /* Sorgt dafür, dass das Suchfeld immer rechts ist */
    margin-right: 20px; /* Abstand zum rechten Rand */
}

/* Logout-Icon in Navbar */
.logout-icon {
    color: white;
    font-size: 20px;
    text-decoration: none;
}

.logout-icon:hover {
    color: #ccc;
}


/* Seitenleiste */
.sidebar {
    width: 250px;
    background-color: #1F2937;
    height: 100vh;
    position: fixed;
    top: 48px;
    left: 0;
    transition: width 0.3s;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar.collapsed {
    width: 80px;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Lässt die Liste den verfügbaren Raum füllen */
}

.sidebar li {
    padding: 5px;
    padding-left: 29px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Icon und Text */
}

.sidebar li a {
    color: #fff;
    text-decoration: none;
}

.sidebar i {
    font-size: 20px;
    margin-right: 10px; /* Abstand zwischen Icon und Text */
}

.sidebar li:hover {
    background-color: #444;
}

/* Eingeklappte Sidebar */
.sidebar.collapsed .sidebar-text {
    opacity: 0;
    width: 0;
    display: none;
}

.sidebar.collapsed li {
    justify-content: center; /* Zentriert die Icons im eingeklappten Zustand */
    padding-left: 0;
}

.sidebar.collapsed i {
    margin-right: 0;
}

/* Logout-Icon am unteren Rand */
.sidebar-logout {
    margin-top: auto; /* Positioniert das Logout-Icon unten */
    width: 100%;
    padding: 15px;
    color: white;
}

.sidebar-logout a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
}

.sidebar-logout a:hover {
    background-color: #444;
}

/* Eingeklappte Sidebar - Logout-Icon */
.sidebar.collapsed .sidebar-logout .sidebar-text {
    display: none;
}

.sidebar.collapsed .sidebar-logout i {
    justify-content: center;
}

/* Hauptinhalt */
.main {
    margin-left: 257px; /* Platz für die Sidebar */
    margin-top: 48px;   /* Platz für die Navbar */
    padding: 20px;      /* Innenabstand für Inhalte */
    width: calc(100% - 257px); /* Füllt den restlichen Platz neben der Sidebar */
    min-height: 100vh;  /* Stellt sicher, dass der Main-Bereich die gesamte Höhe einnimmt */
    box-sizing: border-box;
    transition: margin-left 0.3s;
	background-color: #e7f4fd !important;
}

.sidebar.collapsed ~ .main {
    margin-left: 80px; /* Mehr Platz bei eingeklappter Sidebar */
    width: calc(100% - 80px);
}

.main .content {
	width: 100%;
	padding: 20px;
	/*padding-top: 70px;*/
}

.table-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-top: 20px;
}

/* Breadcrum Styles */
.breadcrumb-container {
    background-color: #f5f5f5;
    padding: 10px 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0; /* Abstand entfernen */
    position: fixed;
    top: 48px; /* Direkt unter der Navbar */
    left: 256px; /* Platz für die Sidebar */
    right: 0;
    z-index: 0 !important; /* Überlappungen verhindern */
    transition: left 0.3s ease; /* Animiert die Verschiebung */
}

.sidebar.collapsed ~ .main .breadcrumb-container {
    left: 80px; /* Platz für die eingeklappte Sidebar */
}

.breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
    list-style: none;
    display: flex;
}

.breadcrumb-item a {
    color: #E88700; /* Orange */
    text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "|";
    padding: 0 8px;
    color: #6c757d; /* Dunkelgrau für das Trennzeichen */
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #6c757d; /* Dunkelgrau */
}


/* Styling Listenansichten */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.table th, .table td {
    padding: 10px;
    border: 1px solid #ccc;
}

.rounded-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.geschlecht-color.m {
    background-color: #cce5ff; /* Hellblau für Jungen */
}

.geschlecht-color.w {
    background-color: #f8d7da; /* Rosa für Mädchen */
}

.geschlecht-color.d {
    background-color: #d4edda; /* Hellgrün für divers */
}

/* Setze die Tabelle auf 100% Breite */
#kinder-app table {
    width: 100%;
    border-collapse: collapse;
}

#kinder-app th, #kinder-app td {
    padding: 10px;
    text-align: left;
}

/* Standard-Hintergrundfarben für abwechselnde Zeilen */
#kinder-app tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Hellgrau */
}

#kinder-app tbody tr:nth-child(even) {
    background-color: #ffffff; /* Weiß */
}

/* Hover-Effekt beibehalten */
#kinder-app tbody tr:hover {
    background-color: #e9f2ff; 
}


/* Entferne den Hintergrund für die Zellen */
#kinder-app th, #kinder-app td {
    background-color: transparent;
}



tbody tr:hover {
    background-color: #e2e6ea;
}

tbody tr.m:hover {
    background-color: #cce5ff;
}

tbody tr.w:hover {
    background-color: #f8d7da;
}
th.sortable {
    cursor: pointer;
    position: relative;
}

th.sortable:after {
    content: '↑↓';
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc; /* Farbe der Pfeile */
}

th.sortable.sorted-asc:after {
    content: '↑';
    color: #000; /* Farbe für aktiven Pfeil */
}

th.sortable.sorted-desc:after {
    content: '↓';
    color: #000; /* Farbe für aktiven Pfeil */
}

		.male { background-color: #e0f7fa; }
        .female { background-color: #fce4ec; }
        .diverse { background-color: #e8f5e9; }
        .hover-male:hover { background-color: #b3e5fc; }
        .hover-female:hover { background-color: #f8bbd0; }
        .hover-diverse:hover { background-color: #c8e6c9; }
        .icon-info { color: orange; cursor: pointer; }
        .avatar { width: 40px; height: 40px; border-radius: 50%; }

.info-popup {
    position: absolute;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 10;
}

.info-popup.bottom {
    top: 20px;
}

.info-popup.top {
    bottom: 20px;
}
.info-popup:hover {
	cursor: none;
}

.info-popup::after {
    content: '';
    position: absolute;
    top: -5px; /* Pfeil an der oberen Kante */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

.icon-info {
	position: relative;
    cursor: none;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

select {
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
}

input[type="text"] {
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 4px;
    
}

input[type="text"]:focus {
    
    border-color: #FFA500;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.pagination button {
    background-color: #FFA500;
    color: white;
    border: none;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pagination button:hover {
    background-color: #FF8C00;
}

.pagination button:disabled {
    background-color: #CBD5E0;
    cursor: not-allowed;
}


.pagination button:hover:not(:disabled) {
    background-color: #FFA500;
    color: white;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.group-pill {
    display: inline-block;
    padding: 0.3em 0.6em;
    font-size: 11px;
    font-weight: 400;
    border-radius: 9999px;
    color: white;
    text-align: center;
	width: 100px;
	background-color: #aaa;
}

.group-jupiter {
    background-color: #ff6d01;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
}

.group-mars {
    background-color: #4ed0e1;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
}

.group-saturn {
    background-color: #f7cb4d;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
}

.group-neptun {
    background-color: #8e7cc3;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
}

.group-mercury {
    background-color: #60bd07;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
}

.group-venus {
    background-color: #a62c2b;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
}

  .kachel {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	  		
	  		position: relative;
	  		
        }



.kachel span {display: inline-block; margin-top: 20px;}

.edit-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	font-size: 12px;
}

.main-info, #anlagen {
	position: relative;
}


.kachel:hover .edit-button, .main-info:hover .edit-button, #anlagen:hover .edit-button {
  opacity: .8;
}

.edit-button i {
  color: #333;
}

.vertragsinfos {
	font-size: 14px;
}

.leaflet-control-zoom {
    margin: 0;
    left: 10px; /* Setze den gewünschten Abstand */
    top: 10px;  /* Positioniere die Buttons weiter oben */
}
#map span {margin-top: 0 !important}
#map .leaflet-marker-icon {border-radius: 100px !important;}

#search-results {
    position: absolute;
    top: 100%; /* Direkt unter das Eingabefeld setzen */
    z-index: 999 !important;
    left: 0;
    width: 300px !important; /* Breitere Anzeige */
    background-color: rgba(0, 0, 0, 0.7); /* Halbtransparenter Hintergrund */
    color: white;
    backdrop-filter: blur(8px);
    font-size: 0.9rem;
    padding: 10px;
    border-radius: 8px;
	border: 0;
    white-space: nowrap; /* Verhindert das Umbrechen von Text */
    overflow-x: auto; /* Ermöglicht horizontales Scrollen bei langen Ergebnissen */
}
    #search-results .hover\\:bg-gray-800:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Hover-Effekt */
    }


.profile-card {
    background-color: #4e80ee;
    border-radius: 10px;
    overflow: hidden;
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.main-info {
    display: flex;
    padding: 20px;
    flex: 1;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 20px;
}

.personal-info h1 {
    font-size: 30px;
    margin: 0 0 10px 0;
}

.personal-info p {
    margin: 5px 0;
    font-size: 16px;
}

.group-info {
    background-color: #ff7f27;
    padding: 10px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
	font-size: 1rem;
    min-width: 40px;
	border-right: 1px solid #CCDDFA;
	border-left: 1px solid #CCDDFA;
}

.additional-info {
    display: flex;
    flex-direction: column;
    background-color: #e8eef9;
    color: #333;
    min-width: 120px;
}

.info-block {
    flex: 1;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
	color: #fff;
}

.info-block.kg {
    background-color: #9DBDFA;
	border-bottom: 1px solid #CCDDFA;
	
}

.info-block.schulanfang {
    background-color: #9DBDFA;
}

.info-block .value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.info-block .label {
    font-size: 12px;
}

.info-block.kg span {
    background-color: #d5e2f8;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    margin-bottom: 5px;
    display: inline-block;
}

@media screen and (max-width: 1023px) {
    .profile-card {
        flex-direction: column;
    }

    .group-info {
        writing-mode: horizontal-tb;
        padding: 10px;
    }

    .additional-info {
        flex-direction: row;
    }
}
	   .overflow-y-auto {
        scrollbar-width: thin;
        scrollbar-color: #CBD5E0 #EDF2F7;
    }
    .overflow-y-auto::-webkit-scrollbar {
        width: 6px;
    }
    .overflow-y-auto::-webkit-scrollbar-track {
        background: #EDF2F7;
    }
    .overflow-y-auto::-webkit-scrollbar-thumb {
        background-color: #CBD5E0;
        border-radius: 3px;
    }
    /* Linksbündige Ausrichtung für Logbuch-Einträge */
    .overflow-y-auto ul li {
        text-align: left;
    }
</style>
	<style scoped>
.editable-tile {
  position: relative;
}

.edit-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.edit-icon:hover {
  opacity: 1;
}

.modal {
  display: flex;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#editForm {
  display: grid;
  gap: 15px;
}

#editForm label {
  font-weight: bold;
  margin-bottom: 5px;
}

#editForm input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

#editForm button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

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

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}