/* ----- Preparation ----- */

/* --- Nohemi Light --- */
@font-face {
    font-family: 'Nohemi'; /* Der Name für die ganze Familie */
    src: url('../fonts/Nohemi-Light.woff2') format('woff2'), /* Bester Standard */
    url('../fonts/Nohemi-Light.otf') format('opentype'); /* Fallback */
    font-weight: 300; /* Diese Datei entspricht der Stärke 300 */
    font-style: normal;
    font-display: swap;
}

/* --- Nohemi Regular --- */
@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-Regular.woff2') format('woff2'),
    url('../fonts/Nohemi-Regular.otf') format('opentype');
    font-weight: 400; /* Diese Datei entspricht der Stärke 400 */
    font-style: normal;
    font-display: swap;
}

/* --- Nohemi Bold --- */
@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-Bold.woff2') format('woff2'),
    url('../fonts/Nohemi-Bold.otf') format('opentype');
    font-weight: 700; /* Diese Datei entspricht der Stärke 700 */
    font-style: normal;
    font-display: swap;
}

/* --- Nohemi Black --- */
@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-Black.woff2') format('woff2'),
    url('../fonts/Nohemi-Black.otf') format('opentype');
    font-weight: 900; /* Diese Datei entspricht der Stärke 900 */
    font-style: normal;
    font-display: swap;
}


:root {
    /* Fonts */
    --Font-NH: 'Nohemi';

    /* Colors */
    --Color-White: #FFFFFF;
    --Color-Black: #000000;
    --Color-Blue: #1C135D;
    --Color-Red: #C30000;

    /* Main Stuff */
    --Width-Section: clamp(80%, 95vw, 75em);

    font-family: 'Nohemi', serif;
    all: unset;
    color: #1C135D;
}

/* ----- General ----- */


html{
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    transition: background-color 0.3s, color 0.3s;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    cursor: default;
    background-color: var(--Color-White);
}

section{
    width: var(--Width-Section);
    padding-bottom: 12em;
    min-height: fit-content;
}

img{
    height: 100%;
}

a{
    color: inherit;
    text-decoration: none;
    font-family: var(--Font-NH);
}

a:focus, a:active{
    color: inherit;
}

body{
    overflow-x: hidden;
}

main{
    padding-top: 8dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
}

h1{
    width: 100%;
    text-align: center;
    font-family: var(--Font-NH), serif;
    font-size: 6rem;
    font-weight: 700;
    line-height: 95%;
    margin-bottom: 0.5em;
    color: var(--Color-Blue);
}

h2{
    width: 100%;
    text-align: center;
    font-family: var(--Font-NH), serif;
    font-size: 4rem;
    font-weight: 400;
    margin-bottom: 0.5em;
    color: var(--Color-Blue);
}

h3{
    width: 100%;
    text-align: center;
    font-family: var(--Font-NH), serif;
}

p {
    font-family: var(--Font-NH), serif;
}

/* --- Section Divider --- */

.sectionDivider {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.sectionDividerHr {
    flex: 3;
}

.sectionDividerCrest {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Page CSS ----- */

.p0s1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    width: 100%;
}

.p0s1Inner{
    width: var(--Width-Section);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

.p0s1img {
    width: 100%;
    height: 100%;
    overflow: hidden; /* WICHTIG: Schneidet das gezoomte Bild ab */
}

.p0s1img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transform: scale(1); /* Stellt den Startzustand sicher */
}

.p0s1div {
    padding-top: 4rem;
}

.p0s1div p {
    font-size: 2.5rem;
    font-weight: 250;
    color: var(--Color-Black)
}

.p0s1div a {
    font-size: 2rem;
    border-bottom: 2px solid var(--Color-Blue);
}

.p0s1 h3 {
    font-weight: 400;
    font-size: 2.3rem;
    color: var(--Color-Black);
    margin: 0;
}

.p0s1 h1 {
    margin-top: 2rem;
    font-size: 5rem;
}
/* Meine Geschichte Element */

.p0s3Left img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.p0s3Left{
    flex: 1;
}
.p0s3Right{
    flex: 3;
}

.p0s3RightHeader h2{
    text-align: left;
}
.p0s3RightText{
    font-size: 1.6rem;
    font-family: var(--Font-NH);
    font-weight: 300;
}

.p0s3RightLink{
    padding-top: 1.5em;
    font-size: 1.3rem;
    border-bottom: solid 2px var(--Color-Red);
    width: fit-content;
}

/* ----- Header ----- */

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

    width: 100%;
    padding: 1.25rem 2.5rem;
    box-sizing: border-box;
}

.header-spacer {
    flex: 1;
}

.brand-name {
    flex-shrink: 0;
    color: var(--Color-Blue);
    font-size: 3rem;
    font-weight: 400;
    font-family: var(--Font-NH);
    letter-spacing: -1px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    padding-top: 0.1em;
    line-height: 0.9em;

}


.sponsor-wrapper {
    flex: 1;
    text-align: right;
}

.sponsor-link {
    display: inline-block;

    color: var(--Color-Red);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;

    border-bottom: 2px solid var(--Color-Red);
    padding-bottom: 0.2rem;
    white-space: nowrap;
}

 /* p0s3 */

.p0s3{
    display: flex;
    justify-content: center;
}

.p0s3Inner{
    align-items: stretch;
    display: flex;
    flex-direction: row;
    gap: 2em;
    width: min(100%,70em);
}

/* Meine Geschichte Element */

.p0s3Left img{
    aspect-ratio: 2/3;
    height: 100%;
    object-fit: cover;
}

.p0s3Left{
    flex: 1;
}
.p0s3Right{
    flex: 3;
}

.p0s3RightHeader h2{
    text-align: left;
}
.p0s3RightText{
    font-size: 1.6rem;
}
.p0s3RightLink{
    padding-top: 2em;
    font-size: 1.3rem;
    width: fit-content;
}

.p0s3sec h3 {
    padding-bottom: 1rem;
    font-size: 2rem;
    font-weight: 400;
}

.p0s3RightLink a {
    color: var(--Color-Red);
    text-decoration: none;
    border-bottom: 2px solid var(--Color-Red);
}

/* Titel Section */

.p4s3d2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.p4s3d2 h3 {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 0;
}

.p4s3d2 p {
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1.5em;
}

/* PicSec */

.picSec p {
    font-size: 1.7rem;
    font-weight: 300;
    text-align: center;
    font-family: var(--Font-NH);
}

.picSecMain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
}

.picSecMainPicDiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.picSecMainPics1 {
    display: flex;
    flex: 1;
    min-width: 400px;
    position: relative;
    overflow: hidden;
}

.picSecMainPics1 img {
    width: 100%;
    /* height: auto; */
    aspect-ratio: 3/2;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.picSecMainPic2 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.picSecMainPic2 img {
    width: 100%;
    object-fit: cover;
    object-position: 50% 73%; /* Zeigt den obersten Teil des Bildes */
    aspect-ratio: 3/1;
    transition: transform 0.4s ease;
}

.picSecMainPics1::after,
.picSecMainPic2::after {
    content: '';
    position: absolute;
    inset: 0; /* (top: 0; right: 0; bottom: 0; left: 0;) */
    background-color: rgba(28, 19, 93, 28); /* Dunkelblau, ähnlich Screenshot */
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease;
    z-index: 1; /* Liegt unter dem Text, aber über dem Bild */
}

/* --- Bestehender Overlay-Text (Überschrift) --- */
.pic-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* Liegt über dem blauen Overlay */
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 0px 20px rgba(0,0,0,0.9);
    width: 90%;
    padding: 0.5rem;
    box-sizing: border-box;
    font-family: var(--Font-NH);

    /* HINZUGEFÜGT: Transition für die Bewegung nach oben */
    transition: top 0.4s ease;
}

/* HINZUGEFÜGT: Der neue Detailtext (beim Hover) */
.pic-overlay-details {
    position: absolute;
    top: 70%; /* Startet weiter unten */
    left: 40%;
    transform: translateX(-40%);
    width: 90%;
    font-family: var(--Font-NH);
    font-size: 4rem; /* Verhindert zu breiten Text auf großen Bildern */
    /* clamp(80%, 95vw, 75em)*/
    z-index: 2; /* Liegt auch über dem blauen Overlay */

    color: white;
    font-size: min(1rem, max(0.3rem,1vw)); !important
    text-align: left;

    opacity: 0; /* Standardmäßig unsichtbar */

    /* HINZUGEFÜGT: Transition für das Erscheinen */
    transition: top 0.4s ease, opacity 0.4s ease;
}

/* Styling für die Liste, wie im Screenshot */
.pic-overlay-details ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}
.pic-overlay-details li {
    margin-bottom: 0.5rem;
}

/* 3. Bewegt die Überschrift nach oben */
.picSecMainPics1:hover .pic-overlay-text,
.picSecMainPic2:hover .pic-overlay-text {
    top: 20%; /* Neue Position (von 50%) */
}

/* 4. Blendet den Detailtext ein und bewegt ihn hoch */
.picSecMainPics1:hover .pic-overlay-details,
.picSecMainPic2:hover .pic-overlay-details {
    font-size: clamp(0.8rem, 1vw, 1.2rem);
    top: 30%; /* Neue Position (von 70%) */
    opacity: 1;
}


/* --- HOVER-EFFEKTE --- */

/* 1. Zoomt das Bild */
.picSecMainPics1:hover img,
.picSecMainPic2:hover img {
    transform: scale(1.05);
}

/* 1. Basis-Zustand (Immer leicht sichtbar) */
.picSecMainPics1::after,
.picSecMainPic2::after {
    /* ... (hier stehen Ihre anderen Definitionen wie content,
           position, width, height, background-color) ... */

    opacity: 0.3; /* <-- SETZEN SIE DIESEN WERT (z.B. 20%) */

    /* Wichtig, damit der Übergang sanft bleibt */
    transition: opacity 0.3s ease;
}

/* 2. Hover-Zustand (Volle Deckkraft beim Hovern) */
.picSecMainPics1:hover::after,
.picSecMainPic2:hover::after {
    opacity: 0.8; /* Wird beim Hovern voll sichtbar */
}

/* 2. Blendet das blaue Overlay ein
.picSecMainPics1:hover::after,
.picSecMainPic2:hover::after {
    opacity: 1;
}*/

/* --- NEUER BUTTON-STIL --- */

.picSecButton {
    /* HINZUGEFÜGT: Abstand nach den Bildern */
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-button {

    display: inline-block;
    background-color: var(--Color-Red);
    color: var(--Color-White);
    font-size: 1.1rem;
    font-weight: 400;
    text-decoration: none;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Hover-Effekt für Interaktion */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
    background-color: #a02325; /* Etwas dunkler beim Hover */
    transform: scale(1.03); /* Leichte Vergrößerung */
}

/* p0s5 */

.p0s5section {
    width: 100% !important;
    padding-bottom: 0;
}

.p0s5 {
    background-color: var(--Color-Blue);
    color: var(--Color-White);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    gap: 2rem;

}

.p0s5div3 a {
    border-bottom: 2px solid var(--Color-White);

}

.p0s5div2 h3 {
    color: var(--Color-White) !important;
    font-weight: 400;
    font-size: 3rem;
}

.p0s5div3 a {
    font-weight: 200;
    font-size: 1.1rem;

}


/* --- Footer --- */
.site-footer {
    color: var(--Color-Blue); /* Dunkelblau, basierend auf dem Bild */
    padding: 3rem 2rem; /* Abstand oben/unten und an den Seiten */
    margin-top: 4rem; /* Abstand zur Sektion darüber */
}

.footer-container {
    width: 90%;


    margin: 0 auto;
}

.footer-main-content {
    display: flex;
    flex-wrap: wrap; /* Sorgt für Umbruch auf kleinen Bildschirmen */
    justify-content: space-between;
    gap: 2rem; /* Abstand zwischen den Spalten */
    margin-bottom: 2rem;
}

.footer-column {
    flex: 1; /* Spalten teilen sich den Platz */
    min-width: 220px; /* Mindestbreite vor dem Umbruch */
}

.footer-column1 {
    flex: 2; /* Spalten teilen sich den Platz */
    min-width: 220px; /* Mindestbreite vor dem Umbruch */
}

/* Styling für E-Mail-Spalte */
.footer-email-label {
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 200;
}

.footer-email-link {
    font-size: 1.75rem; /* Größere Schrift für die E-Mail */
    font-weight: 700;
    color: #172554;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 3px solid #172554; /* Unterstrich wie im Bild */
    word-break: break-all; /* Verhindert Überlaufen */
}

/* Styling für Kontakt & Nav Spalten */
.footer-column h3 {
    text-transform: uppercase;
    font-size: 1.7rem;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: left; !important
}

.footer-contact p {
    margin: 0.5rem 0;
    line-height: 1.6;
    font-weight: 300;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 0.5rem;
}

.footer-nav a {
    text-decoration: none;
    color: var(--Color-Blue);
    font-weight: 300;
    font-family: var(--Font-NH);
    transition: opacity 0.3s ease;
}

.footer-nav a:hover {
    opacity: 0.7;
}

/* Styling für die untere Leiste */
.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid #cccccc; /* Graue Trennlinie */
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    color: #777; /* Grauer Text für Copyright */
}

/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 1200px) {
    .site-header {
        flex-direction: column;
        gap: 1.5rem;
    }

    .header-spacer {
        display: none;
    }

    .brand-name {
        font-size: 1.8rem;
    }

    .sponsor-wrapper {
        flex: initial;
        text-align: center;
    }
}

@media (max-width: 860px) {
    .picSecMainPic2 img {
        aspect-ratio: 3/2;
    }

    .pic-overlay-details {
        font-size: 2.1vw;
    }
}

@media only screen and (max-width: 700px) {

    section {
        padding-bottom: 4rem;
    }

    h1 {
        font-size: 3rem;
    }

    .p0s1 h1{
        font-size: 3rem;
        width: 98%;
    }

    h2 {
        font-size: 2rem;
    }

    .p0s1 h3 {
        font-size: 1.4rem;
    }

    .p0s1div p {
        font-size: 1.25rem;
    }

    .p0s1div a {
        font-size: 1rem;
    }

    .p0s1div {
        padding-top: 1rem;
    }

    .picSecMainPics1 img {
        aspect-ratio: 5/4;
        width: 100%;
    }

    .picSecMainPic2 img {
        width: 100%;
        aspect-ratio: 5/4;
    }

    .p4s3d2 h3 {
        font-size: 1.5rem;
    }

    .p4s3d2 p {
        font-size: 0.9rem;
    }

    .picSec p {
        font-size: 0.9rem;
    }

    .picSecMain {
        width: 100% !important;
    }

    .picSec {
        width: 100% !important;
    }

    .p0s3Left img{
        aspect-ratio: 4/2;
        object-position: 50% 29%;
        max-height: 25rem;
        object-fit: cover;

    }

    .p0s3Inner{
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    .p0s3RightText{
        font-size: 1.2rem;
        font-weight: 300;
    }

    .p0s5div2 h3 {
        font-size: 1.5rem;
    }

    .p0s5div2 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .p0s5div3 a {
        font-size: 0.8rem;
    }

    .p0s3RightLink {
        font-size: 1rem;
    }

    .p0s1img {
        width: 100%;
        aspect-ratio: 7/5
    }
}