/* Grundlegendes Styling */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f4f4f4;
    color: #333;
}

/* Header mit Bild */
/* Header mit Bild, angepasst */
header {
    position: relative;
    background-image: url('../images/header.jpg'); /* Dein Bild */
    background-size: 50%;
    background-position: center 40%;
    color: white;
    text-align: center;
    padding: 30px 20px;
    padding: 30px 20px;   /* Höhe wieder großzügig machen */
    overflow: visible;     /* wichtig: darf über den Rand gehen */
     min-height: 125px; /* z.B. gleiche Höhe wie Startseite */
}


.header-text {
    position: relative;
    z-index: 2;
    text-align: center;
}

.header-text .traits {
    display: inline-block;
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #ffd700;
}

.header-text h1 {
    font-size: 2.5rem;
    margin-top: 0;
    color: white;
}




















/* Das „ausgeschnittene Rechteck“ unten rechts */
/* Das kleine Kästchen unten rechts */
header::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12vw;        /* Breite proportional zur Viewport-Breite */
    height: 5vh;         /* Höhe proportional zur Viewport-Höhe */
    background: #f4f4f4;
    z-index: 1;
    border-top-left-radius: 1vw; /* Abrundung ebenfalls relativ */
}


/* Log in Text */
.login-link {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 12vw;       /* gleiche Breite wie ::after */
    height: 5vh;       /* gleiche Höhe wie ::after */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e9eb;
    border-radius: 1vw 0 0 0; /* gleiche Abrundung wie ::after */
    font-size: 1rem;
}

.login-link a {
    color: rgb(4,4,4);
    text-decoration: none;
    font-weight: 600;
}

.login-link a:hover {
    background: #1d3463;
    color: #fff;
}



.info-bar {
    background-color: #333;   /* dunkler Hintergrund */
    color: #fff;              /* weiße Schrift */
    text-align: center;       /* mittig ausgerichtet */
    padding: 8px 15px;        /* etwas Abstand innen */
    font-size: 0.9rem;        /* etwas kleiner als normaler Text */
}

.info-bar a {
    color: #fff;              /* Link ebenfalls weiß */
    text-decoration: none;    /* keine Unterstreichung */
}

.info-bar a:hover {
    text-decoration: underline; /* beim Hover sichtbar */
}





/* Hauptbereich */
main {
    flex: 1;
}

.main-grid-container {
    max-width: 1200px;
    margin: 40px auto 0;
}

/* Slogan Styling */
.main-grid-container .slogan {
    font-family: 'Playfair Display', serif; /* elegante Serifenschrift */
    font-size: 2rem;
    font-weight: 700;
    color: #333; /* dunkles Grau für guten Kontrast */
    text-align: left;
    margin-bottom: 5px;
}

/* Seit über ... Styling */
.main-grid-container .since {
    font-size: 1rem;       /* gleiche Schriftgröße */
    line-height: 1.6;      /* angenehmer Zeilenabstand */
    color: #333;           /* gleiche Textfarbe */
    margin-bottom: 20px;   /* Abstand nach unten */
}



.main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 40px auto 0;
}

.grid-item {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.grid-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    padding: 10px;
    border-radius: 0 0 10px 10px;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}











/* Footer */
footer {
    position: relative;
    background: linear-gradient(to bottom, #f4f4f4 0%, #333 30%, #333 100%);
    padding: 30px 20px;
    margin-top: 80px;
    color: white;
    font-size: 0.8rem;
}


.footer-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

.footer-left {
    color: white !important;       /* alles weiß erzwingen */
    text-align: left;
    flex: 1;
    margin-left: -140px;
    line-height: 0.5;          /* kleinerer Zeilenabstand */
    font-size: 0.7rem;
    margin-top: 20px;
    
}

.footer-left a {
    color: white !important;       /* Links ebenfalls weiß */
    text-decoration: none;          /* optional: Unterstreichung entfernen */
}




.footer-right {
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
    flex-shrink: 0;
    position: relative;
    line-height: 1.4;
    font-size: 0.7rem;
    justify-content: flex-start; /* Text links, Adler rechts */
    margin-top: 40px;
}

/* Füge Adler als img oder ::after hinzu */
.footer-right::after {
    content: "";
    width: 60px;
    height: 60px;
    background: url('../images/adler.png') no-repeat center center;
    background-size: contain;
    margin-left: 15px; /* Abstand zwischen Text und Adler */
    flex-shrink: 0;
}



/* Header kleiner auf Tablets und Smartphones */
/* Tablets (max-width: 800px) */
@media (max-width: 800px) {
    /* Header anpassen */
    header {
        padding: 50px 20px;
        background-size: cover;
        background-position: center 30%;
    }
    .header-text h1 {
        font-size: 2rem;
    }
    .header-text .traits {
        font-size: 1rem;
    }

    /* Log in Button */
    .login-link {
        width: 120px;
        height: 55px;
        font-size: 0.9rem;
    }

    @media (max-width: 500px) {
    .info-bar p {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    .info-bar {
        padding: 10px;
    }
}


    /* Main Bereich */
    .main-grid {
        gap: 15px;
        grid-template-columns: repeat(2, 1fr); /* zwei Spalten */
        justify-items: center; /* Bilder horizontal zentrieren */
    }
    .grid-item {
        width: 90%; /* Bilder proportional */
        height: auto;
    }
    .grid-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }
    .grid-item .overlay {
        font-size: 1rem;
        padding: 8px;
    }
    .main-grid-container h2 {
        font-size: 1.5rem;
    }
    .main-grid-container .slogan {
        font-size: 1.7rem;
    }
    .main-grid-container .since,
    .main-grid-container p {
        font-size: 0.9rem; /* gleiche Schriftgröße für alle Absätze */
    }

    /* Text-Innenabstand */
    .main-grid-container {
        padding-left: 15px;
        padding-right: 15px;
    }
@media (max-width: 800px) and (min-width: 501px) {
    .footer-container {
        flex-direction: row; /* wieder nebeneinander */
        justify-content: space-between; /* Abstand links/rechts */
        align-items: flex-start; /* oben ausrichten */
        text-align: left;
        padding: -10 20px; /* Innenabstand links/rechts */
    }

    .footer-left {
        margin-left: 0;
        max-width: 50%; /* damit es nicht zu breit wird */
    }

    .footer-right {
        max-width: 45%;
        text-align: right;
    }

    
}


/* Smartphones (max-width: 500px) */
/* Smartphones (max-width: 500px) */
@media (max-width: 500px) {
    /* Header anpassen */
    header {
        padding: 30px 15px;
        background-position: center 25%;
    }
    .header-text h1 {
        font-size: 1.5rem;
    }
    .header-text .traits {
        font-size: 0.9rem;
    }

    /* Log in Button */
    .login-link {
        width: 90px;
        height: 45px;
        font-size: 0.8rem;
        border-top-left-radius: 8px;
    }

    /* Main Bereich */
    .main-grid {
        gap: 15px;
        grid-template-columns: 1fr; /* Bilder einzeln untereinander */
        justify-items: center; /* Bilder horizontal zentrieren */
    }
    .grid-item {
        width: 70%; /* etwas größer als vorher */
        height: auto; /* Höhe automatisch proportional */
    }
    .grid-item img {
        width: 100%;
        height: auto; /* Bild proportional skalieren */
        object-fit: cover;
        display: block;
    }
    .grid-item .overlay {
        font-size: 0.8rem;
        padding: 5px;
    }

.main-grid-container {
        padding-left: 15px;   /* Hier die Ränder einfügen */
        padding-right: 15px;  /* Hier die Ränder einfügen */

}
}
    .main-grid-container h2 {
        font-size: 1.2rem;
    }
    .main-grid-container .slogan {
        font-size: 1.4rem;
    }
    .main-grid-container .since {
        font-size: 0.8rem;
    }
}


/* Footer kleiner auf Smartphones/Tablets (max-width: 600px) */
/* Smartphones (max-width: 500px) */
@media (max-width: 500px) {
    .footer-container {
        display: flex;
        flex-direction: column;   /* übereinander */
        align-items: flex-start;  /* Grundausrichtung nach links */
        padding: 5px 10px;        /* wenig Abstand zum Rand */
        gap: 5px;                 /* enger Abstand zwischen den beiden */
    }

    .footer-left {
        width: 100%;              /* nimmt ganze Breite */
        text-align: left;         /* linksbündig */
        margin: 0;
    }

    .footer-right {
        width: 100%;              /* nimmt ganze Breite */
        text-align: right;        /* rechtsbündig */
        margin: 0;
    }
}























/*Styles für Philosophie!!! */

header.header-philosophie {
    position: relative;
    background-size: 50%; /* wie vorher */
    background-position: center 40%; /* wie vorher */
    color: white;
    text-align: center;
    padding: 30px 15px; /* gleiche Höhe wie Startseite */
    min-height: 125px;  /* unverändert */
    overflow: visible;
    
}

/* Text im Header vertikal mittig */
header.header-philosophie .header-text {
    position: absolute;
    top: 60%;            /* Mitte des Headers */
    left: 50%;           /* horizontal zentriert */
    transform: translate(-50%, -50%); /* genau zentrieren */
    z-index: 2;
}











.main-grid-philosophie {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* fix 4 Spalten wie auf Startseite */
    gap: 20px;
    max-width: 1200px;
    margin: 40px auto 0;
}

.main-grid-philosophie .grid-item {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    aspect-ratio: 1 / 1; /* quadratisch */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    width: 100%;
}

.main-grid-philosophie .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.main-grid-philosophie .grid-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    padding: 10px;
    border-radius: 0 0 10px 10px;
}

/* Hover-Effekt */
.main-grid-philosophie .grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Responsive für Tablets */
@media (max-width: 800px) {

header.header-philosophie {
        padding: 30px 15px;
        background-size: cover;
        background-position: center 30%;

    }


    .main-grid-philosophie {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Tablet */
        gap: 15px;
        justify-items: center;
    }

    .main-grid-philosophie .grid-item {
        width: 90%;
        height: auto;
    }

    .main-grid-philosophie .grid-item img {
        width: 100%;
        height: auto;
    }

    .main-grid-philosophie .grid-item .overlay {
        font-size: 1rem;
        padding: 8px;
    }
}

/* Responsive für Smartphones */
@media (max-width: 500px) {

    
   header.header-philosophie {
        padding: 30px 15px;
        background-size: cover;
        background-position: center 30%;
    }

    .main-grid-philosophie {
        grid-template-columns: 1fr; /* 1 Spalte auf Smartphones */
    }

    .main-grid-philosophie .grid-item {
        width: 70%;
        height: auto;
    }

    .main-grid-philosophie .grid-item .overlay {
        font-size: 0.8rem;
        padding: 5px;
    }
}