body {
    font-family: Arial, sans-serif;
    background-color: #eef2f3; /* Weicherer Hintergrund */
    color: #26323e;
    margin: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin-bottom: 50px; /* Platz für die Leiste schaffen, damit sie nichts verdeckt */
	 overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

.container {
	max-width: 90vmin;
    margin: 0 auto; /* Zentriert den Container auf der Seite */
}

.calendar-container{
	margin-top: 20px;
	    margin-bottom: 20px;
    background-color: #fff;
	border-radius: 8px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
	
	
	
	
}


.body-data-display {
	margin-top: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}


table {
    width: 100%;
	border: none;
    border-collapse: collapse; /* Ensure no gaps between cells */
	border: 2px solid #15900000; 

}

thead {
	background-color: #159;
	color: #fff;
	 box-shadow: 0 5px 10px -1px rgba(0, 0, 0, 0.7), inset 0px 4px 5px rgba(0, 0, 0, 0.4);
	border-left: 2px solid #159; 
	border-right: 2px solid #159; 
	border-bottom: 2px solid #159;
}


th, td {
	padding: 0px;
    width: 3em;
    height: 3em; /* Festgelegte Höhe für gleichmäßige Zellen */
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box; /* Bezieht Padding und Border in die Maße ein */
	 border: 1px solid #ccc;
	 border-top: none;
}

/* Box um das Training starten-Formular */
.training-start-container {
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten hinzufügen */
}

/* Box um laufende Trainings */
.running-training-container {
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten hinzufügen */
}





/* Datum der Trainingseinträge */
.training-date {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
    color: #26323e;
    padding-bottom: 5px;
}





/* Bildgröße */
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    max-width: 100px;
    max-height: 100px;
}

/* Stil für das Enddatum */
.training-end {
    background-color: #14bf95; /* Grüner Hintergrund */
    color: #fff; /* Weißer Text */
    font-weight: bold;
    border-radius: 50%;
    padding: 5px;
    display: inline-block;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    position: relative;
}

/* Stil für das heutige Datum als Ring */
.today {
    position: relative;
    z-index: 2;
    width: 1.5em;
    height: 1.5em;
    border: 3px solid #ffeb3b !important;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: transparent; /* Transparenter Hintergrund für den heutigen Tag */
    
}

/* Button Stil */
button {
    background-color: #14bf95;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #0f8f70;
}

/* Eingabefelder Stil */
input[type="text"], input[type="file"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: calc(100% - 18px); /* Volle Breite */
    margin-bottom: 10px;
}

input[type="text"]:focus, input[type="file"]:focus {
    border-color: #14bf95;
    outline: none;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* Stil für den "Neue Daten" Button */
.body-data-button {
    background-color: #14bf95;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

.body-data-button:hover {
    background-color: #0f8f70;
}

.modal {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed; 
    z-index: 1001; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.9); 
}


/* Allgemeine Modals */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
    max-width: 500px; /* Max-Breite des Modals */
    border-radius: 10px;
}

/* Schließen-Button für allgemeine Modals */
.modal-content .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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


/* Eingabefelder Stil im Modal */
.modal-content input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 5px 0 10px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.modal-content input[type="number"] {
    width: 90%;
    padding: 10px;
    margin: 5px 0 10px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Button im Modal */
.submit-button {
    background-color: #14bf95;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

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



/* Stil für Mess-Tage */
.measurement-day {
    background-color: #FF9800;
    color: #fff; /* Weißer Text */
    font-weight: bold;
    border-radius: 50%;
    display: inline-flex;
	box-sizing: border-box;
	 width: 2em;
    height: 2em;
	justify-content: center;
    align-items: center;
}

/* Stil für End-Tage */
.challenge-end-day {
    background-color: #FF5722; /* Orange für das Ende der Challenge */
    color: #fff; /* Weißer Text */
    font-weight: bold;
    border-radius: 50%;
    display: inline-flex;
	box-sizing: border-box;
	 width: 2em;
    height: 2em;
	justify-content: center;
    align-items: center;
}

/* Stil für die Navigationsleiste am unteren Rand */
.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #14bf95;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
	    border-top-left-radius: 10px; /* Abrunden der unteren linken Ecke */
    border-top-right-radius: 10px; /* Abrunden der unteren rechten Ecke */
}

.nav-item {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    color: white;
    text-decoration: none;
    font-size: 16px;
}

.nav-item:hover {
    background-color: #0f8f70;
}

/* Stil für Trainingstage */
.training-day {
    background-color: #1bb6fa; /* Farbe für Trainingstage */
    color: #fff; /* Weißer Text */
    font-weight: bold;
    border-radius: 50%;
    display: inline-flex;
	box-sizing: border-box;
	 width: 2em;
    height: 2em;
	justify-content: center;
    align-items: center;
	text-decoration: none;
}

.training-day:hover {
    background-color: #1e88e5; /* Dunklere Farbe beim Hover */
    cursor: pointer;
}


/* Kombinierter Stil für heute und Trainingstag */
.today.training-day {
    z-index: 3;
}

.today.training-day:hover {
    background-color: #1e88e5; /* Dunklere Farbe beim Hover */
    cursor: pointer;
}

.month-navigation {
	background-color: #159;
	color: #fff;
    display: flex;
    justify-content: space-between; /* Verteile die Buttons gleichmäßig */
    align-items: center; /* Vertikale Ausrichtung der Buttons */
    padding: 10px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}

.month-navigation button {
    background-color: #26323e;
    color: white;
    border: none;
	margin: 0px 5px; /* Verhindert zusätzlichen Außenabstand */
    cursor: pointer;
    font-size: 40px; /* Größere Schrift für bessere Lesbarkeit */
	   display: flex; /* Macht den Inhalt flexfähig */
}

.month-navigation button:hover {
    background-color: #0f8f70;
}

#currentMonth {
    font-size: 18px; /* Größere Schrift für den Monat */
    font-weight: bold;
    text-align: center; /* Zentriert den Monatstext */
    flex-grow: 1; /* Nimmt den verfügbaren Platz zwischen den Buttons ein */
}

#floatingButton {
    width: 60px;
    height: 60px;
    background-color: #14bf95;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 50px;
    right: 20px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.extra-button {
    width: 60px;
    height: 60px;
    background-color: #14bf95;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 20px; /* Gleiche Rechts-Position wie der + Button */
    opacity: 0;
    transform: scale(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 999;
}

.extra-button.show {
    opacity: 1;
    transform: scale(1);
}

.extra-button img {
    width: 30px;
    height: 30px;
    background: none; /* Kein Hintergrund */
    border: none; /* Kein Rahmen */
    display: block;
}


#extraButton1 {
    bottom: 120px; /* Abstand vom unteren Rand anpassen */
    right: 40px; /* Abstand von der rechten Seite anpassen */
}

#extraButton2 {
    bottom: 70px; /* Abstand vom unteren Rand anpassen */
    right: 90px; /* Abstand von der rechten Seite anpassen */
}


#floatingButton:active {
    cursor: grabbing;
}

#floatingButton span {
    font-size: 30px;
    font-weight: bold;
}


.input-container {
    margin-bottom: 15px; /* Fügt Abstand zwischen den Feldern hinzu */
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Vergrößert den Abstand unterhalb der Checkbox */
}

.checkbox-container label {
    margin-left: 8px; /* Fügt Abstand zwischen Checkbox und Label hinzu */
}

input[type="password"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: calc(100% - 18px); /* Gleiche Breite wie das Benutzername-Feld */
    margin-bottom: 10px;
}


/* Stile für die obere Navigationsleiste */
.top-nav {
    display: flex;
    align-items: center;
    background-color: #14bf95; /* Gleiche Farbe wie die untere Leiste */
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Damit die Leiste oben bleibt */
	    border-bottom-left-radius: 10px; /* Abrunden der unteren linken Ecke */
    border-bottom-right-radius: 10px; /* Abrunden der unteren rechten Ecke */
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Stile für das Profilbild */
.profile-image {
	object-fit: cover;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 10px;
	
}

.feed-profile-image {
    object-fit: cover;
    width: 32px; /* Erhöhe die Größe für die Profilbilder im Feed */
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}


/* Stile für den Benutzernamen */
.username {
    color: white;
    font-size: 18px;
    font-weight: bold;
}

/* Stil für das Container-Element, um den Platz der Top-Navigation auszugleichen */
.container {
    margin-top: 60px; /* Höhe der oberen Leiste ausgleichen */
}

.training-header {
    display: flex;
    justify-content: space-between; /* Platz zwischen Trainingsnamen und Profilinfo */
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

.small-profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}



.training-images img {
    display: block;
    margin: 0 auto; /* Zentriert die Bilder, falls es nur eins ist */
    max-height: 35vmin;
	max-width: 35vmin;
	border: none;
    border-radius: 4px;
    cursor: pointer;
}


.friend-profile-header {
    text-align: center;
    margin-bottom: 20px;
}

.friend-profile-image {
    width: 100px; /* Mittelgroßes Profilbild */
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.training-name {
    flex-grow: 1; /* Lässt den Trainingsnamen den verfügbaren Platz einnehmen */
	margin-bottom: 5px;
	margin-top: 0px;
	font-weight: bold;
    font-size: 1.2em; /* Größere Schrift für den Trainingsnamen */
}

/* Box um jeden Trainingseintrag */
.training-entry {
    border-radius: 8px;
    margin-bottom: 10px; /* Weniger Abstand zwischen den Einträgen */
    background-color: #F7F6EC;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

.training-info {
	padding:  20px  20px 10px;
	font-weight: normal;

	
}

/* Stile für die Bilder nebeneinander */
.training-images {
	background-color: #fafafa;
	border-radius: 8px;
	margin:10px;
	box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between; /* Stellt sicher, dass die Bilder links und rechts erscheinen */
    align-items: center; /* Zentriert die Bilder vertikal */
    gap: 20px; /* Erhöht den Abstand zwischen den Bildern */
    padding: 10px 10px; /* Fügt etwas vertikalen Abstand hinzu */
}

.training-time {
	font-size: 0.8em;
}

.profile-info {
	background-color: #fafafa;
	border-radius: 8px;
	padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Profilbild und Name */
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}

/* Stil für den Container der offenen Freundschaftsanfragen */
.pending-requests {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.pending-requests h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em; /* Etwas größere Schrift für den Titel */
}

.pending-requests ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.pending-requests li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Platz zwischen Benutzername und Buttons */
}

.pending-requests span {
    font-weight: bold;
    color: #26323e;
    margin-right: 10px;
    flex-grow: 1; /* Lässt den Benutzernamen den verfügbaren Platz einnehmen */
}

.pending-requests button {
    margin-left: 10px; /* Abstand zwischen den Buttons */
    padding: 8px 15px; /* Angemessene Größe für die Buttons */
    font-size: 14px;
    border-radius: 5px;
}

.pending-requests button:first-child {
    background-color: #14bf95; /* Grün für den Annehmen-Button */
}

.pending-requests button:last-child {
    background-color: #f44336; /* Rot für den Ablehnen-Button */
}

/* Stil für die Freundesliste */
.friend-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd; /* Optional, um die einzelnen Freunde zu trennen */
}

.friend-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* Unterstreichen entfernen */
    color: inherit; /* Vererbt die Farbe */
    margin-right: auto; /* Lässt den Remove-Button am rechten Rand */
}

.friend-item img.profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.friend-username {
    font-size: 16px;
    color: #14bf95; /* Grün oder eine andere Farbe deiner Wahl */
    font-weight: bold;
	margin-right: 10px;
}

.friend-item button.remove-friend {
    background-color: transparent;
    color: #f44336; /* Rot für das Minus-Symbol */
    border: none;
    font-size: 24px; /* Größe des Minus-Symbols */
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}

.friend-item button.remove-friend:hover {
    color: #d32f2f; /* Dunkleres Rot beim Hover */
}

/* Bild-Modal */
#imageModal {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed; 
    z-index: 1001; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.8); /* Transparenter schwarzer Hintergrund */
}

/* Container für das Bild im Modal */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
}

/* Bild im Modal */
.image-modal-content {
    display: block;
    margin-left: auto;
    margin: auto;
    max-width: 90%; /* Verhindert, dass das Bild größer als der Bildschirm wird */
    max-height: 90%; /* Begrenzt die Bildhöhe auf 90% der Bildschirmhöhe */
}


/* Schließen-Button für das Modal */
#imageModal .close {
    color: #fff;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1002;
}

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

.post-entry {
	border-radius: 8px;
    margin-bottom: 10px;
    background-color: #F7F6EC;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
    text-align: center; /* Zentriert den gesamten Inhalt */
}

.post-image-container{
	padding: 10px;
	margin: 10px;
	box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	background-color: #fafafa;
}

.post-image {
	padding: 0px;
    max-width: 100%; /* Bild nimmt die volle Breite des Containers ein */
    max-height: 100%; /* Beibehaltung des Seitenverhältnisses */
    object-fit: cover; /* Bild wird vollständig angezeigt, ohne das Seitenverhältnis zu verlieren */
    border: none; /* Entfernt eventuelle Ränder */
}

.like-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 20px;
}

.like-button {
    background-color: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
}

.like-button:hover {
    background-color: transparent;
}

.heart-icon {
    display: inline-block; /* Sicherstellt, dass das Icon als Block-Element behandelt wird */
    width: 32px;
    height: 32px;
    background-color: transparent;
    cursor: pointer;
    background-image: url('/icons/gray-heart-icon.png'); /* Pfad zum grauen Herz */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; /* Zentriert das Icon */
}

.heart-icon.liked {
    background-image: url('/icons/red-heart-icon.png'); /* Pfad zum roten Herz */
}

.like-count {
    margin-left: 8px;
    font-size: 14px;
    color: #888;
}

.delete-button {
    background: none;
    border: none;
    color: red;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.delete-button:hover {
    color: darkred;
	background: none;
}



.two-section-container {
    display: flex;
    justify-content: space-between;
    width: 100%; /* Nutzt die volle Breite */
    align-items: center; /* Zentriert die Elemente vertikal */
		padding:  20px  20px 10px;
}

#croppingImage {
    max-width: 100%;
    max-height: 60vh; /* Passt die Höhe des Bildes an den Bildschirm an */
    display: block;
    margin: 0 auto;
}

.comment-button {
    background-color: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
    margin-left: 20px; /* Abstand zum Like-Button */
}

.comment-icon {
    display: inline-block;
    width: 30px; /* Größe anpassen */
    height: 30px;
    background-color: transparent;
    cursor: pointer;
    background-image: url('/icons/comment-icon-gray.png'); /* Du brauchst ein Icon! */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.comment-count {
    margin-left: 8px;
    font-size: 14px;
    color: #888;
}

/* ... (vorhandene Stile) ... */
        .comment-form button {
            margin-top: 10px;
 }

        /* --- NEUE STILE HINZUFÜGEN --- */
        
        /* 1. Float vom Datum entfernen */
        .comment-item .comment-date {
            float: none; /* Deaktiviert das alte float */
            font-size: 0.8em;
            color: #888;
            margin-right: 10px; /* Abstand zum Lösch-Button */
        }

        /* 2. Profil-Info anpassen, um space-between zu nutzen */
        .comment-item .profile-info {
            display: flex;
            justify-content: space-between; /* WICHTIG: Teilt die Info auf */
            align-items: center;
            font-size: 0.9em;
            color: #555;
            margin-bottom: 5px;
        }

        /* 3. Container für linke Seite (Bild + Name) */
        .comment-user-info {
            display: flex;
            align-items: center;
        }
        /* 4. Container für rechte Seite (Datum + Button) */
        .comment-actions {
            display: flex;
            align-items: center;
        }

        /* 5. Stil für den neuen Lösch-Button */
        .delete-comment-btn {
            background: none;
            border: none;
            color: #f44336; /* Rot */
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
            padding: 0 5px;
            line-height: 1;
        }
        .delete-comment-btn:hover {
            color: #d32f2f; /* Dunkelrot */
            background: none;
        }
    </style>
</head>


/*farben    #F7F6EC
#fafafa