/* Grundlegendes Styling */

/* Farben: 

Robo-grau dbdede
Robo-mint a2faed

    Türkis: #85e3e3
    helles Grau: #f8f8f8
    mittleres Grau: #6f6f6f
    dunkles Grau / Text: #333333
*/

body {
    font-family: 'Arial', sans-serif;
    margin-top: 100px;
    margin-left: 200px;
    margin-right: 200px;
    padding: 20px;
    background-color: #f8f8f8; /* Logo Grau */
    color: #333333; /* dunkles Grau/Schwarz für den Text */
}

a {
   color: #333333; /* Roboter Türkis */
   text-decoration: none;
   text-shadow:
   1px 1px #a2faed;
}

a:hover {
    color: #333333; /* Roboter Türkis */
    text-decoration: underline;
    text-shadow:
    1px 1px #a2faed;
}

header {
    display: flex;
    align-items: center;

    /*border: 2px solid;
    border-radius: 5px;*/
}

nav ul {
    list-style-type: none;

}

nav ul li {
    display: inline;
    margin-right: 20px;

}


footer {
    text-align: center;
    padding: 1rem;
}


.content-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}


.text {
    flex: 1;
}

.hina-foto {
    width: 230px;              /* Maximale Breite des Bildes */
    height: auto;                  /* Höhe automatisch anpassen */
    flex-shrink: 0;
    margin-left: 20px;             /* Abstand zwischen Bild und Text */
    border-radius: 5px;            /* Abgerundete Ecken (optional) */
    pointer-events: none; /* Verhindert Interaktionen mit dem Bild */

}

.logo {
    pointer-events: none; /* Verhindert Interaktionen mit dem Bild */
}


@media (max-width: 768px) {
    body {
        margin: 0;
        padding: 20px;
    }

    .content-wrapper {
        flex-direction: column;
    }

    .hina-foto {
        order: -1;
        width: 220px;
        max-width: 100%;
        margin: 0 auto 20px;
    }

    nav ul {
        padding-left: 0;
    }

    nav ul li {
        display: block;
        margin: 10px 0;
    }
}