:root {
 --main-gradient: 
 linear-gradient(to right, #53c4f1 2%, #9d4cd4 5%, #ff881b 10%, #D70A92 90%);
}


body {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    background: #e04098;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 50px 90px;
    box-sizing: border-box;
    justify-content: center;
}

.page-container {
    width: 100%;
    max-width: 1600px; /* Begrenzt die maximale Breite */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich breite Spalten */
    gap: 20px; /* Abstand zwischen den Hauptquadraten */
    width: 100%;
    margin-bottom: 30px;
        position: relative;
}

.large-square {
background-color: #fff;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    aspect-ratio: 1 / 1;
    padding: 60px;
    box-sizing: border-box;
    flex-direction: column;
}

.large-square h1 {
    font-size: 2.5em;
    color: #0075bf; /* Blau für "Inhalt" */
    margin: 0;
    margin-top: 4rem;

        background: var(--main-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;

}

.footer-gradient{
        font-size: 2.5em;
    color: #0075bf; /* Blau für "Inhalt" */
    bottom: 0;
    width: 100%;
    height: 5px;
    position: fixed;
    bottom: 0;
        background: var(--main-gradient);

    /*background-size: 500% auto;*/
    /*animation: textShine 5s ease-in-out infinite alternate;*/
}

.small-squares-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Zwei Spalten für die kleinen Quadrate */
    grid-template-rows: repeat(2, 1fr);    /* Zwei Reihen für die kleinen Quadrate */
    gap: 20px; /* Abstand zwischen den kleinen Quadraten */
    aspect-ratio: 1 / 1; /* Macht den gesamten 2x2 Grid quadratisch */
}

.teaser-card {
    background-color: #fff; /* Hintergrund für den Button-Bereich */
    display: flex;
    flex-direction: column;
    overflow: visible; /* Verhindert Überlaufen */
}

.teaser-image-container {
    flex-grow: 1; /* Nimmt den meisten Platz ein, damit Button unten bleibt */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Farbverlauf wie im Mockup (hellgrau zu dunkelgrau) */
    background: linear-gradient(to bottom, #d0d0d0, #707070);
    padding: 0px; /* Innenabstand, damit Text nicht am Rand klebt */
    box-sizing: border-box;
}

.bild-text {
    font-size: 3em; /* Größe anpassen nach Bedarf */
    font-weight: bold;
    color: #e04098; /* Pink/Magenta */
    text-align: center;
}

.teaser-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 15px; /* Padding für den Text im Overlay */
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
        background: linear-gradient(0deg, #000000, #000000d4, #00000087, #00000000);
    transition: all 2s ease-in-out;
    
}

.teaser-text-overlay h2 {
    font-size: 1.6em;
    margin: 0 0 5px 0;
    text-shadow: 0px 0px 6px #000000;
    line-height: 1em;
}

.teaser-text-overlay p {
    font-size: 0.9em;
    margin: 0;
    padding-bottom: 20px;
    text-shadow: 0px 0px 6px #000000;
}

.teaser-card{
    transition: all 1s ease-in-out;
    isolation: isolate; 
    
}

.teaser-card:hover{
    /*transform: scale(1.1);*/
    transition: all 1s ease-in-out;
    box-shadow: 0px 0px 20px 12px #00000070
}

.teaser-button {
    background-color: #fff;
    color: #383838;
    text-align: center;
    padding: 12px 10px;
    text-decoration: none;
    font-size: 0.9em;
    border-top: 1px solid #eee; /* Leichte Trennlinie */
    display: block; /* Nimmt volle Breite des Elternelements ein */
    font-weight: bold;
}

.teaser-button:hover {
    color: #e04098;
}

.page-footer {
    text-align: center;
    width: 100%;
    padding: 20px 0;
}

.slogan {
    font-size: 1.5em;
    color: #0075bf; /* Blau für "Inhalt" */
    margin: 0;

        background: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
    font-weight: bold;
    margin-bottom: 1rem;
}

.footer-nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
    font-size: 0.9em;
}

.footer-nav a:hover {
    color: #fff;
    font-weight: bold;
}




@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}


.large-square h1 {
    font-size: 2.5em;
    color: #0075bf;
    margin: 0;
    margin-top: 4rem;
    background: var(--main-gradient);
    background-size: 300% auto; /* Größerer Bereich für Bewegung */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 10s ease infinite;
}






/* --- NEU: Vorbereitung für den animierten Hover-Rahmen --- */

/* 1. Die Teaser-Karte muss zum Positionierungs-Anker für den Rahmen werden. */
.teaser-card {
    position: relative; /* Wichtig für das Pseudo-Element */
    background-color: #fff; /* Stellt sicher, dass die Karte selbst undurchsichtig ist */
    /*z-index: 1;  Stellt sicher, dass die Karte über dem Rahmen liegt */
    isolation: isolate; 
}

/* 2. Erstellen des Pseudo-Elements, das unser Rahmen sein wird. */
.teaser-card::before {
    content: ' ';
    position: absolute;
    z-index: -1; /* Legt den Rahmen HINTER die Karte */

    /* Macht den Rahmen 4px größer als die Karte auf jeder Seite */
    inset: -4px; 
    
    /* Wir verwenden den exakt gleichen Gradienten und die Animation wie bei deinem h1 */
    background: var(--main-gradient);
    background-size: 300% auto;
    animation: gradientMove 5s ease infinite;

    /* Standardmäßig ist der Rahmen unsichtbar und wird beim Hovern eingeblendet */
    opacity: 0;
    transition: opacity 0.4s ease-out; /* Sanfter Übergang für das Einblenden */
}

/* 3. Beim Hovern über die Karte... */
.teaser-card:hover::before {
    /* ...wird der Rahmen sichtbar gemacht. */
    opacity: 1;
}

/* Du kannst deinen bestehenden .teaser-card:hover Block behalten oder anpassen.
   Die Box-Shadow sieht auch mit dem Rahmen gut aus. */
.teaser-card:hover {
    transition: all 1s ease-in-out;
    box-shadow: 0px 0px 20px 12px #00000070;
}




@keyframes gradientMove {
    0% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 0% center;
    }
}


/* --- NEU: Animation für das Einblenden der Teaser-Karten --- */

/* 1. Wir definieren die eigentliche Animation mit @keyframes.
      Wir nennen sie "fadeInUp". */
@keyframes fadeInUp {
    /* Startzustand der Animation */
    from {
        opacity: 0;
        transform: translateY(20px); /* Startet 20px weiter unten */
    }
    /* Endzustand der Animation */
    to {
        opacity: 1;
        transform: translateY(0);   /* Endet auf der finalen Position */
    }
}

/* 2. Wir weisen die Animation den Teaser-Karten zu. */
.teaser-card {
    /* Wichtig: Die Karte muss am Anfang unsichtbar sein. */
    opacity: 0;
    animation: fadeInUp 1.0s ease-out forwards;
}

/* 3. (Der schönste Teil) Wir staffeln die Animationen mit Verzögerungen.
      Dafür nutzen wir den :nth-child Selektor. */

/* Die erste Karte startet sofort (oder mit minimaler Verzögerung) */
.small-squares-grid .teaser-card:nth-child(1) {
    animation-delay: 0.1s;
}

/* Die zweite Karte startet 0.15s nach der ersten */
.small-squares-grid .teaser-card:nth-child(2) {
    animation-delay: 0.25s; /* 0.1s + 0.15s */
}

/* Die dritte Karte startet weitere 0.15s später */
.small-squares-grid .teaser-card:nth-child(3) {
    animation-delay: 0.4s;  /* 0.25s + 0.15s */
}

/* Und die vierte Karte als letztes */
.small-squares-grid .teaser-card:nth-child(4) {
    animation-delay: 0.55s; /* 0.4s + 0.15s */
}

.logo{
    max-width: 200px;
}


/* --- FINALE VERSION mit der border-image-Methode --- */
.gimmick-square {
    position: fixed;
    z-index: -1;
    width: 50px;
    height: 50px;
    border: 1px solid #fff; 
    /*border-image-source: var(--main-gradient);*/
    /*border-image-slice: 1;*/
    animation: growAndFade 1.5s ease-out forwards;
}

/* 2. Die Keyframe-Animation für das Wachsen und Verblassen. */
@keyframes growAndFade {
    0% {
        transform: scale(0);   
        opacity: 1;            
    }
    80% {
        opacity: 1;           
    }
    100% {
        transform: scale(2.5); 
        opacity: 0;           
    }
}




/* Responsive Anpassungen (optional, aber empfohlen) */
/* Breakpoint für Tablets und kleinere Desktops (bis 1150px) */
@media (max-width: 1150px) {
    /* Haupt-Grid auf eine Spalte umstellen */
    .main-grid {
        grid-template-columns: 1fr;
    }

    /* Die starre quadratische Form entfernen, damit die Höhe flexibel wird */
    .large-square, .small-squares-grid {
        aspect-ratio: auto;
    }
}


/* Breakpoint für Smartphones (bis 768px) */
@media (max-width: 768px) {
    /* Body-Padding reduzieren für mehr Platz */
    body {
        padding: 20px;
    }


    /* Auch die kleinen Teaser-Karten in eine Spalte zwingen */
    .small-squares-grid {
        grid-template-columns: 1fr;
    }

    /* Das große Inhaltsquadrat anpassen */
    .large-square {
        padding: 30px; /* Weniger Innenabstand */
    }
    .large-square h1 {
        font-size: 2em; /* Schriftgröße anpassen */
        margin-top: 2rem;
    }
    .large-square img {
        max-width: 200px; /* Logo etwas kleiner machen */
    }

    /* --- WICHTIG: Die Teaser-Karten für mobile Ansicht optimieren --- */

    .teaser-card {
        /* Gibt den gestapelten Karten etwas Abstand nach unten.
           Ersetzt den 'gap' des Grids in der vertikalen Richtung. */
        margin-bottom: 20px; 
    }

    /* Das Text-Overlay vergrößern und lesbarer machen */
    .teaser-text-overlay {
        padding: 15px 20px; /* Mehr Innenabstand */
        /* Höhe anpassen, damit mehr Platz für Text ist */
        height: auto;
        min-height: 40%;
    }
    
    .teaser-text-overlay h2 {
        font-size: 1.4rem; /* DEUTLICH größere Schrift für Lesbarkeit */
    }

    .teaser-text-overlay p {
        font-size: 1rem; /* Auch den Absatztext vergrößern */
        padding-bottom: 30px; /* Mehr Abstand zum Button schaffen */
    }

    /* Den "mehr erfahren" Button anpassen */
    .teaser-button {
        padding: 15px 10px; /* Größere Klickfläche */
        font-size: 1rem;
    }

    section.large-square.content-square::before {
    width: 150px;
    background: var(--main-gradient);
    }
}

.background-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            overflow: hidden;
            
        }

        .blob {
            position: absolute;
            width: 40vw;
            height: 40vw;
            border-radius: 50%;
            filter: blur(10vw);
            opacity: 0.9;
        }

        .color-1 { background: #53c4f1; }
        .color-2 { background: #9d4cd4; }
        .color-3 { background: #ff881b; }
        .color-4 { background: #afcc45; }
        .color-5 { background: #D70A92; }

        /* Die Animationen sind perfekt, die behalten wir bei */
        .blob.color-1 { animation: move1 20s infinite ease-in-out; }
        .blob.color-2 { animation: move2 22s infinite ease-in-out; }
        .blob.color-3 { animation: move3 25s infinite ease-in-out; }
        .blob.color-4 { animation: move4 18s infinite ease-in-out; }
        .blob.color-5 { animation: move2 28s infinite ease-in-out reverse; }

        @keyframes move1 {
            0%, 100% { transform: translate(-10%, -10%) scale(1); }
            25% { transform: translate(80%, -10%) scale(0.8); }
            50% { transform: translate(80%, 80%) scale(1.2); }
            75% { transform: translate(-10%, 80%) scale(0.9); }
        }
        @keyframes move2 {
            0%, 100% { transform: translate(80%, 80%) scale(1); }
            25% { transform: translate(-10%, 80%) scale(1.2); }
            50% { transform: translate(-10%, -10%) scale(0.8); }
            75% { transform: translate(80%, -10%) scale(1.1); }
        }
        @keyframes move3 {
            0%, 100% { transform: translate(50%, -20%) scale(1.1); }
            50% { transform: translate(50%, 120%) scale(0.8); }
        }
        @keyframes move4 {
            0%, 100% { transform: translate(-20%, 50%) scale(0.8); }
            50% { transform: translate(120%, 50%) scale(1.2); }
        }

        /* 
         * EBENE 2: Die Magenta-Vignette.
         * Funktioniert weiterhin perfekt als "Scheinwerfer".
         */
        .vignette-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: radial-gradient(
                ellipse at center,
                #e04098 0%,
                #e04098 40%,
                transparent 70% /* Der Übergang ist etwas weicher */
            );
            pointer-events: none; 
        }