/* Importiere globale Stile */
@import url("about.4a79fee3dbad.css");  /* Setzt alle Browser-Standards zurück */
@import url("blog.f8ca3b726756.css");  /* Setzt alle Browser-Standards zurück */

body, html {
    color: white;
    background: #333;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
}


.row {
    height: 100%;
}

.right-column {
    background-color: #34353a; /* Ändere die Hintergrundfarbe nach Bedarf */
}

.left-column {
    background-color:#494b50; /* Ändere die Hintergrundfarbe nach Bedarf */
}

.container-fluid {
    height: 100%;
    width: 100%;
}

.sidebar {
    padding: 20px;
}

.logo h1 {
    font-size: 2.5rem;
    font-weight: bolder;
    margin-bottom: 50px;
    letter-spacing: 3px;
    margin-left: 10px;
}

.nav-link {
    color: #ffffff;
    font-size: 1.0rem;
    font-weight: lighter;
    transition: color 0.3s ease; /* Übergangseffekt für die Farbänderung */
    opacity: 0.6;
}

.nav-link:hover {
    color: #cccccc; /* Ändern Sie hier die Farbe je nach gewünschter Helligkeit */
}

@keyframes borderMovement {
    0% { transform: translateY(0); }
    50% { transform: translateY(5px); } /* Beispiel für eine Bewegung um 5 Pixel */
    100% { transform: translateY(0); }
}

.profile img {
    width: 250px;
    height: auto;
    margin-right: 20px;
    border: 2px solid #ccc;
    animation: borderMovement 3s infinite; /* Beispiel für eine Animation, die alle 3 Sekunden wiederholt wird */
}

.profile-text-container {
    width: 600px;
    height: 250px;
    padding: 20px;
}

.profile-text-container h2 {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.profile-text-container p {
    font-size: 0.9rem;
    font-weight: lighter;
    opacity: 0.6;
}

.social-icons a {
    display: inline-block;
    margin-right: 10px;
    color: white;

}

.right-column {
    opacity: 0; /* Startet mit einer Opazität von 0 (unsichtbar) */
    animation: fadeIn 3s forwards; /* Verwendet die fadeIn-Animation für 1 Sekunde */
}

.navbar-toggler .navbar-toggler-icon img {
    width: 22px; /* Anpassen der Breite des Icons */
    height: 22px; /* Anpassen der Höhe des Icons */
    /* Weitere Anpassungen nach Bedarf */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Startet mit einer Opazität von 0 */
    }
    to {
        opacity: 1; /* Endet mit einer Opazität von 1 (vollständig sichtbar) */
    }

}


/* Stil für den Toggle-Wrapper */
.toggle-wrapper {
    align-self: flex-end; /* Ausrichtung am rechten Rand */
}


.footer {
    margin-top: 80px;
    text-align: left;
    width: 100%;
    font-size: 0.8rem;
    opacity: 0.7;

}


/* Das modale Popup */
.modal {
    display: none; /* Verstecke das Popup standardmäßig */
    position: fixed; /* Positioniere das Popup fixiert */
    z-index: 1; /* Stellen Sie sicher, dass das Popup über allem anderen liegt */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Fügen Sie einen Bildlauf hinzu, wenn das Popup zu groß ist */
    background-color: rgba(0,0,0,0.4); /* Hintergrund mit transparentem Schwarz */
  }
  
  /* Inhalt des modales Popups */
  .modal-content {
    background-color: rgba(0,0,0,0.8);
    margin: 15% auto; /* Zentrieren Sie das Popup vertikal und horizontal */
    padding: 20px;
    border: 1px solid #888;
    width: 20%; /* Setzen Sie die Breite des Popups */
  }
  
  /* Schließen Sie das Symbol (x) */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
@media (min-width: 992px) {
    .navbar-collapse.collapse {
        display: block !important;
    }

    .left-column {
        position: fixed;
        width: 82%;
        top: 0;
        left: 0;
        bottom: 0;
        overflow-y: auto; /* Ermöglicht das Scrollen innerhalb des .left-column, falls nötig */
        background-color:#494b50; /* Hintergrundfarbe, bereits definiert */
    }

    .right-column {
        margin-left: 16.67%; /* Platz für den fixierten .left-column */
        overflow-y: auto; /* Ermöglicht das Scrollen innerhalb des .right-column */
        background-color: #34353a; /* Hintergrundfarbe, bereits definiert */
    }

    /* Stelle sicher, dass der gesamte Container die volle Bildschirmhöhe einnimmt */
    .container-fluid {
        height: 100vh;
    }
}

/* Anpassungen für mittlere Bildschirme (Tablets) */
@media (max-width: 991.98px) {


    .right-column {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 0; /* Stellt sicher, dass kein zusätzlicher Abstand oben ist */
        min-height: 100vh; /* Stellt sicher, dass der Container mindestens die volle Höhe des Viewports einnimmt */
        height: auto; /* Erlaubt dem Container, größer zu werden, wenn mehr Inhalt vorhanden ist */
    }

    .left-column {
        justify-content: space-between; /* Setzt die Elemente an die entgegengesetzten Enden der Div */
        height: auto; /* Entferne min-height, damit die Höhe automatisch angepasst wird */
        min-height: 0;
    }
    .sidebar {
        padding: 0px;
    }
    .navbar-collapse.collapse.show {
        display: block;
    }
    .logo-mob {
        display: flex; /* Stellt sicher, dass das Logo sichtbar ist */
        align-items: center; /* Vertikale Ausrichtung */
        justify-content: flex-start; /* Horizontale Ausrichtung nach links */
        flex-grow: 1; /* Erlaubt dem Logo, den verfügbaren Platz zu nutzen */
    }

    .toggle-wrapper {
        justify-content: flex-end; /* Horizontale Ausrichtung nach rechts */
        flex-grow: 0; /* Verhindert, dass der Toggle-Wrapper wächst */
    }

    .logo-mob h1 {
        margin-top: 5px;
        font-size: 1.8rem;
        font-weight: bold;
        align-items: left;
    }

    .logo h1 {
        display:none;
    }

    .navbar, .container-fluid {
        height: 80px;
        padding-top: 0;
        padding-bottom: 0;
        max-height: 120px;
    }

    .navbar {
        height: 80px; /* Höhe der Navbar */
        width: 100%;
    }

    /* Reduziert den Abstand innerhalb der Navbar für kleinere Bildschirme */
    .nav-link, .logo {
        margin: 0;
        padding: 0;
    }

    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        align-items: right;
        margin-bottom: 5px;
        
        /* Passt das Icon an, um sicherzustellen, dass es sichtbar ist */
    }

    .nav-item {
        text-align: right; /* Menüpunkte rechtsbündig ausrichten */
        margin-right: 22px;
        margin-top: 2px;
    }

    .profile {
        padding: 10px;
        padding-top: 20px;
    }


    .profile, .profile-text-container {
        text-align: center; /* Zentriert den Text */
        max-width: 100%;
    }

    .profile-text-container p {
        font-size: 0.9rem;
        font-weight: lighter;
        opacity: 0.6;
    }
    .profile-text-container h2 {
        font-size: 2.0rem;
        font-weight: bolder;
	margin-top:0px;
	text-align: center;
    }

    .profile img {
        margin: 0 auto; /* Zentriert das Bild */
    }

    .footer {
        padding: 1rem;
        text-align: center;
        width: 100%;
        margin-top: auto; /* Drückt den Footer nach unten, wenn weniger Inhalt vorhanden ist */
    }
}