/* Custom Styling - Farben, Logo, Schriftarten */

/* Hier kannst du deine Farben definieren */
:root {
    --primary-color: #000000;
    --secondary-color: #666666;
    --background-color: #F8F2EA;
    --text-color: #0B0B0B;
    --border-color: #e0e0e0;
}

/* Schriftarten anpassen */
body {
    color: var(--text-color);
    background-color: var(--background-color);
}

/* Logo Anpassungen */
.logo {
    /* Logo-spezifische Anpassungen hier */
}

/* Navigation Farben */
.header-right a {
    color: var(--text-color);
}

.header-right a:hover {
    color: var(--secondary-color);
}

/* Header temporär ausblenden (kann durch Entfernen der Klasse `header-hidden` im HTML wieder aktiviert werden) */
header.header-hidden {
    display: none !important;
} /* === Portrait-Bild an Textbreite anpassen (Who am I?) === */

/* Basis: Handy / kleine Geräte */
.about-image-single img {
    width: 90%;        /* fast volle Breite des Containers auf Handy */
    max-width: 350px;  /* nie breiter als 350px */
    height: auto;      
    display: block;    
    margin: 0 auto;    
}

/* Tablet / mittlere Geräte */
@media (min-width: 600px) {
    .about-image-single img {
        width: 80%;     
        max-width: 400px;
    }
}

/* Desktop / große Bildschirme */
@media (min-width: 992px) {
    .about-image-single img {
        width: 70%;     
        max-width: 450px; 
    }
} /* === Portrait-Bild: Größe beibehalten, Abstand nach oben reduzieren === */
.about-image-single {
    margin-top: 10px !important; /* Abstand halbiert, zwingend angewendet */
}