/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Andreas Huber
 Author URI:   https://web-dev-ah.de
 Template:     generatepress
 Version:      0.1
*/

/* ----------------------------------------------- Kategorie Container ---------*/
.project-categories a.category-link {
    font-size: 12px;
    text-decoration: none;
    color: black; /* Oder eine andere Farbe nach Wahl */
    margin: 5px 0; /* Für Abstand zwischen den Links */
    cursor: pointer;
    display: block; /* Stellt sicher, dass die Links untereinander stehen */
    padding-bottom: 10px;
}

.project-categories a.category-link:hover {
    text-decoration: underline;
}

.project-categories a.category-link.active {
    text-decoration: underline;
}


/* ----------------------------------------------- Projekt Übersicht ---------*/
.projects-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border-left: 1px solid black; /* Fügt eine linke Grenze hinzu */
        padding-left: 20px
;
}

.project-item {
    display: flex; /* Ändert das Layout der Projektitems zu Flexbox */
    align-items: center; /* Zentriert die Items vertikal */
    width: 100%; /* Setzt die Breite des Projektitems */
    cursor: pointer; /* Ändert den Cursor zu einer Hand, wenn der Benutzer über Projekt-Elemente fährt */
}

.project-image-container {
    flex: 0 0 auto; /* Verhindert das Strecken des Bildcontainers */
}

.project-image {
    width: 80px; /* Breite des Bildes */
    height: auto; /* Höhe des Bildes, behält das Seitenverhältnis bei */
    object-fit: cover; /* Stellt sicher, dass das Bild den Bereich gut ausfüllt */
}

.project-info-container {
    padding-left: 20px; /* Fügt einen Abstand zwischen Bild und Projektname hinzu */
}

.project-title {
    margin: 0; /* Entfernt den Standardabstand von Überschriften */
}



/* ----------------------------------------------- Projekt Details Container ---------*/
/* Stil für die Container der Projektdetails */
.project-details-container {
    display: flex;
    flex-direction: column; /* Richtet die Kinder vertikal aus */
    border-left: 1px solid black; /* Fügt eine linke Grenze hinzu */
    padding-left: 15px; /* Fügt einen linken Innenabstand hinzu */
}


.project-details-info {
    /* Stil für den inneren Informationscontainer, keine Änderung erforderlich */
}

.project-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%; /* Stellt sicher, dass der Bildercontainer die volle Breite einnimmt */
}

.project-detail-image {
    width: 60px; /* Setzt die Breite des Bildes fest */
    height: 60px; /* Setzt die Höhe des Bildes fest */
    object-fit: cover; /* Schneidet das Bild zu, um es dem Container anzupassen */
    object-position: center; /* Zentriert das Bild im Container */
    margin-bottom: 5px; /* Fügt einen Abstand unter dem Bild hinzu */
}

.project-title {
    /* Kleinere Überschrift */
    font-size: 12px; /* Anpassen nach Bedarf */
    margin-bottom: 15px; /* Weniger Abstand nach der Überschrift */
}

.project-meta {
    /* Stil für die Liste der Projektdaten */
    list-style-type: none; /* Entfernt Aufzählungszeichen */
    padding: 0; /* Entfernt den Innenabstand */
    margin: 0; /* Entfernt den Außenabstand */
    font-size: 14px; /* Kleinere Schriftgröße für die Daten */
}

.project-meta li {
    line-height: 1.5;
    display: flex; /* Ändern Sie die Anzeige zu Flex, um die Ausrichtung zu steuern */
    margin-bottom: 5px;
}

.project-meta li::before {
    content: attr(data-label); /* Verwendet das data-label für den Inhalt */
    position: absolute;
    left: 0; /* Setzt die Bezeichnung am Anfang des Elements */
    font-weight: bold; /* Macht die Bezeichnungen fett */
}

.field-name {
    font-weight: bold; /* Macht die Feldnamen fett */
    min-width: 160px; /* Ändern Sie dies, um genügend Platz für den längsten Feldnamen zu schaffen */
}

.field-content {
    display: inline-block; /* Ermöglicht spezifische Stilisierungen und Abstände */
}


.project-details-info, .project-images {
    width: 100%; /* Sorgt dafür, dass die Container die volle Breite einnehmen */
}

.overview-detail-image {
    width: 100px;
    height: auto;
    object-fit: contain; /* Damit das Bild komplett sichtbar bleibt und das Seitenverhältnis beibehält */
}

.project-detail-image {
    width: 60px; /* Setzt die Breite des Bildes fest */
    height: 60px !important; /* Setzt die Höhe des Bildes fest */
    object-fit: cover; /* Schneidet das Bild ab, um es dem Container anzupassen, ohne das Seitenverhältnis zu bewahren */
    object-position: center; /* Zentriert das Bild */
}

.back-button-container {
    width: 100%; /* Sorgt dafür, dass der Container die volle Breite einnimmt */
    display: flex; /* Verwendet Flexbox für die Ausrichtung */
    justify-content: flex-start; /* Ausrichtung des Zurück-Buttons am Anfang */
}

.back-button {
    max-width: 100px; /* Setzt eine maximale Breite für den 'Zurück'-Button */
    padding: 5px 5px; /* Polsterung um den Text */
    margin-top: 10px; /* Abstand von oben */
    cursor: pointer; /* Handzeiger als Cursor */
    text-decoration: none; /* Keine Unterstreichung */
    background-color: #444; /* Dunkelgraue Hintergrundfarbe */
    color: white; /* Weiße Textfarbe */
    border-radius: 5px; /* Abgerundete Ecken */
    font-size: 12px;
}

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background: rgba(71, 71, 71, 1);
    top: 0;
    left: 0;
    text-align: center;
}

.lightbox img {
    max-height: 60vh; /* oder ein anderer Prozentsatz oder feste Höhe, je nach Bedarf */
    max-width: 95%; /* Verhindert, dass das Bild zu breit wird */
    object-fit: contain; /* Stellt sicher, dass das gesamte Bild sichtbar ist */
    margin: auto; /* Zentriert das Bild in der Lightbox */
}

.lightbox:target {
    display: block;
}