@import url('../variablen.css');

section .softwareListe
{
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    gap: 5vw;

    flex-wrap: wrap;

    padding-bottom: 6vh;
}


section .softwareListe .listItem
{
    /* width: 90%; */

    margin-top: 5vh;
    
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    gap: 3vh;

    font-weight: bold;

    /* background-color: var(--hintergrundFarbeFooter); */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    border-radius: var(--borderRadius);

    padding: 1em;

    /* Die Einheit EM wird verwendet, wenn Abstände proportional zur aktuell
    eingestellten Schriftgröße realisiert werden. 1 Em entspricht einmal der
    Aktuellen Schriftgröße. Es wird die Schriftgröße genommen, die entweder
    im aktuellen Element definiert ist oder die des Eltern Elements. 
    2Em entspricht 2 mal der aktuellen schriftgröße. Das könnte beispielsweise
    2 mal 16px also 32 px sein. */

    /* Für die Breite und Höhe von Elementen werden auf dem ersten Kind die viewport
    Variablen verwendet. Als vh und vw. Befindet sich nun ein Kind in diesem Kind, 
    so werden Prozentwerte verwendet, welche sich dann auf die breite und höhe des
    ersten Kinds beziehen. So ist sichergestellt, dass kinder von kindern die breite
    und höhe ihres eltern elements (das erste Kind) nicht überschritet. 
    Damit Prozent Werte funktionieren ist unbedingt darauf zu achten, dass jedes 
    Kindelement eine Breite zugewiesen bekommt. Bei mehreren Kindern untereinander
    kann dann mehrmals prozent verwendet werden. Wird in dieser Reihe auch nur einmal
    vergessen einem Kindelement eine Höhe oder eine Breite zuzuweisen, so funktioniert die 
    weitere Verwendung von prozent in den kindelementen von diesem kind nicht mehr.*/
}

section .softwareListe .listItem .listItemContentContainer
{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    font-size: var(--textGröße);

    gap: 1em;
}

section .softwareListe .listItem .listItemContentContainer h3
{
    margin-top: 0.4em;
    margin-bottom: 0.4em;

    color: var(--textFarbeInhalt);
    font-size: var(--textGrößeÜberschriftH3);
}


section .softwareListe .listItem img
{
    border-radius: 10px;
}

/* Mobilansicht: */
@media (max-width: 768px) 
{

    /* Hier werden nur die Eigenschaften überschrieben, die hier erneut neu
    angegeben werden. Sectino .softwareListe steht ja bereits weiter oben und
    gibt dort viele weitere Sachen an. Diese bleiben aber wie gesagt alle 
    erhalten. Ändern tun sich nur diese, die neu angegeben werden. */
    section .softwareListe 
    {
        flex-direction: column;

        align-items: center;
    }

    section .softwareListe .listItem
    {
        flex-direction: column;
        align-items: center;

        width: 90%;

        padding-top: 3vh;
        padding-bottom: 5vh;
    }

    /* Den Links in der Mobilansicht einen Pfeil geben */
    section .softwareListe .listItem .listItemContentContainer a::before
    {
        content: "▶";
        margin-right: 8px;
    }

    section .softwareListe .listItem .listItemContentContainer h3
    {
        margin-top: 1.1em;
    }
}