/* ==========================================================================
   [05] CONTENT-SEKTIONEN (MAIN LAYOUT)
   ========================================================================== */

.banner-container {
    line-height: 0;
    border-bottom: 8px solid #1a5c6b;
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Sanfter Schatten-Übergang zum nächsten Bereich, wirkt wie "Andocken" */
.banner-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.15));
    pointer-events: none;
}

.slider {
    display: flex;
    transition: transform 0.8s ease-in-out;
}

.banner-image {
    width: 100%;
    display: block;
    flex-shrink: 0;
}

.about-section { 
    background: #ffffff; 
    padding: 0px 0; 
}

.about-content {
    position: relative;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    padding: 60px 40px;
    color: #1a5c6b;

    /* Scharfe Kanten links/rechts bleiben dein Markenzeichen */
    border-left: 15px solid #1a5c6b;
    border-right: 15px solid #1a5c6b;
}

/* Feiner Licht-Strich oben, simuliert Glaskante */
.about-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 92, 107, 0.3), transparent);
}

.about-highlight {
    background: #1a5c6b;
    color: white;
    padding: 2px 8px;
    font-weight: bold;
    border-radius: 0; /* winziges Rounding, wirkt wie ein "Chip"/Tag statt Kasten */
}

/* ==========================================================================
   [05] CONTENT-SEKTIONEN (MAIN LAYOUT) — MOBILE ANPASSUNGEN
   ========================================================================== */

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

    .about-section {
        padding: 24px 0;
    }

    .about-content {
        padding: 36px 22px;

        /* Kanten bleiben dein Markenzeichen, aber schlanker für schmale Screens */
        border-left: 8px solid #1a5c6b;
        border-right: 8px solid #1a5c6b;
    }

    .about-content::before {
        left: 8px;
        right: 8px;
    }

    .about-content h2,
    .about-content h1 {
        font-size: 1.5rem;
    }

    .about-content p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
}

/* Extra-Schliff für ganz kleine Handys */
@media screen and (max-width: 480px) {

    .about-content {
        padding: 28px 16px;
        border-left: 6px solid #1a5c6b;
        border-right: 6px solid #1a5c6b;
    }

    .about-content::before {
        left: 6px;
        right: 6px;
    }

    .about-highlight {
        padding: 1px 6px;
        font-size: 0.95em;
    }
}

/* ==========================================================================
   STARTSEITE (INDEX) — kühl, klar, präzise
   Ändert nur Formsprache, Typografie und Animationen. Layout, Hintergrundbilder
   und PHP bleiben unangetastet. Wird in constr.php NACH den anderen Stylesheets
   geladen. Zum Zurückdrehen: die <link>-Zeile in constr.php entfernen.
   Kein Weichzeichnen, kein Wackeln, kein Farbschein; nicht an
   "Animationen reduzieren" gekoppelt.
   ========================================================================== */

:root {
    --snap: cubic-bezier(0.2, 0, 0, 1);   /* schnell los, sauber gebremst */
}

/* ---------- BANNER ---------- */

/* Beim Laden wird das Banner von links nach rechts aufgedeckt */
.banner-container {
    animation: bannerWipe 0.8s var(--snap) backwards;
}
@keyframes bannerWipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* Der weiche dunkle Schatten wird kühler und feiner ... */
.main-grid .banner-container::after {
    background: linear-gradient(to bottom, transparent, rgba(26, 92, 107, 0.16));
}

/* ... und darüber läuft eine dünne eisblaue Messlinie ein, direkt über dem Markenbalken */
.banner-container::before {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 2px;
    background: #9cc1c9;
    z-index: 2;
    transform-origin: left center;
    animation: lineDraw 1s var(--snap) 0.3s backwards;
}
@keyframes lineDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Bannerwechsel: kürzer und klarer statt langsam und weich */
.main-grid .slider {
    transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
}

/* ---------- TEXTBEREICH ---------- */

/* Der Glas-Block deckt sich von oben nach unten auf */
.about-content {
    animation: contentReveal 0.6s var(--snap) backwards;
}
@keyframes contentReveal {
    from { clip-path: inset(0 0 100% 0); opacity: 0; }
    to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}

/* Glaskante oben: feine Linie läuft von der Mitte nach außen auf */
.about-content::before {
    transform-origin: center;
    animation: edgeDraw 0.9s var(--snap) 0.3s backwards;
}
@keyframes edgeDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Typografie: Überschriften straffer, Fließtext luftiger */
.main-grid .about-content h1,
.main-grid .about-content h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.15;
}
/* kleiner Akzentbalken unter jeder Überschrift: Markenblau + Eisblau, läuft ein */
.main-grid .about-content h1::after,
.main-grid .about-content h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 0.55em;
    background: linear-gradient(to right, #1a5c6b 0 70%, #9cc1c9 70% 100%);
    transform-origin: left center;
    animation: lineDraw 0.7s var(--snap) 0.45s backwards;
}
.main-grid .about-content p {
    line-height: 1.7;
}

/* Hervorhebung: eckiger "Chip" in Markenform, wird beim Laden aufgedeckt */
.main-grid .about-highlight {
    border-radius: 0;
    padding: 2px 10px;
    letter-spacing: 0.02em;
    transition: background 0.2s var(--snap);
    animation: chipWipe 0.5s var(--snap) 0.5s backwards;
}
.main-grid .about-highlight:hover {
    background: #237384;
}
@keyframes chipWipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* Links im Fließtext: Unterstreichung läuft beim Drüberfahren ein */
.main-grid .about-content p a,
.main-grid .about-content li a {
    color: inherit;
    text-decoration: none;
    background: linear-gradient(#1a5c6b, #1a5c6b) 0 100% / 100% 1px no-repeat;
    transition: background-size 0.2s var(--snap), color 0.2s var(--snap);
}
.main-grid .about-content p a:hover,
.main-grid .about-content li a:hover {
    background-size: 100% 100%;
    color: #ffffff;
}