/* =========================================
   ASS.CSS
   Eigene Styles nur für A.S.S. 1.0
   Wird nach style.css und discipline.css geladen
========================================= */


/* =========================================
   1. ASS HERO BEREICH
========================================= */

.ass-hero{
    position:relative;
    min-height:88vh;

    display:flex;
    align-items:center;

    color:#fff;
    overflow:hidden;

    background:
    linear-gradient(
        to right,
        rgba(0,0,0,0.96) 0%,
        rgba(0,0,0,0.84) 38%,
        rgba(0,0,0,0.42) 65%,
        rgba(0,0,0,0.76) 100%
    ),
    url("images/hero/ass-1-hero.png")
    center right / cover no-repeat;
}


/* Inhalt im Hero */

.ass-hero-content{
    position:relative;
    z-index:2;

    max-width:760px;

    padding:
    130px
    7vw
    90px;
}


/* Logo im Hero */

.ass-hero-logo{
    width:92px;
    height:auto;

    margin-bottom:38px;

    filter:
    drop-shadow(0 0 14px rgba(0,0,0,.85));
}


/* Kleine rote Zeile */

.ass-kicker{
    color:#d91c1c;

    text-transform:uppercase;
    letter-spacing:.18em;

    font-size:.95rem;
    font-weight:700;

    margin-bottom:18px;
}


.ass-kicker::after{
    content:"";

    display:block;

    width:78px;
    height:3px;

    background:#d91c1c;

    margin-top:14px;
}


/* Große Hauptüberschrift */

.ass-hero h1{
    font-size:
    clamp(3.8rem, 9vw, 8.5rem);

    line-height:.9;

    margin:
    0
    0
    22px;

    font-weight:900;
    letter-spacing:.04em;

    text-shadow:
    0 4px 22px rgba(0,0,0,.9);
}


/* Unterüberschrift */

.ass-hero h2{
    color:#d91c1c;

    font-size:
    clamp(1.1rem, 2vw, 1.8rem);

    text-transform:uppercase;

    line-height:1.25;

    margin:
    0
    0
    32px;
}


/* Hero Text */

.ass-hero-text{
    font-size:
    clamp(1.2rem, 2.2vw, 2rem);

    line-height:1.45;

    margin-bottom:34px;

    color:#f4f4f4;
}


/* Hero Button */

.ass-hero-btn{
    display:inline-block;

    background:
    linear-gradient(
        135deg,
        #a80000,
        #e32020
    );

    color:#fff;

    text-decoration:none;
    text-transform:uppercase;

    font-weight:800;
    letter-spacing:.08em;

    padding:
    18px
    34px;

    border-radius:8px;

    box-shadow:
    0 0 28px rgba(220,0,0,.45);

    transition:.3s ease;
}


.ass-hero-btn:hover{
    transform:translateY(-2px);

    box-shadow:
    0 0 34px rgba(255,0,0,.7);
}


/* Fakten unter Button */

.ass-hero-facts{
    display:flex;
    flex-wrap:wrap;

    gap:
    18px
    28px;

    margin-top:34px;

    font-size:.95rem;

    color:#f0f0f0;
}


/* =========================================
   2. INTRO BEREICH
   "Was ist A.S.S. 1.0?"
========================================= */

.ass-intro{
    padding:
    190px
    7vw
    130px;

    background:
    linear-gradient(
        to bottom,
        #070707,
        #111
    );

    color:#fff;

    border-top:
    1px solid rgba(255,255,255,.06);
}


/* Zweispaltiges Layout */

.ass-intro-inner{
    max-width:1300px;

    margin:auto;

    display:grid;

    grid-template-columns:
    1.45fr
    .9fr;

    gap:70px;

    align-items:start;
}


/* Kleine rote Überschrift im Intro */

.ass-section-kicker{
    color:#d91c1c;

    text-transform:uppercase;
    letter-spacing:.18em;

    font-size:.82rem;
    font-weight:700;

    margin-bottom:18px;
}


/* Intro Hauptüberschrift */

.ass-intro h2{
    font-size:
    clamp(2.4rem, 5vw, 4.5rem);

    line-height:1.05;

    margin:
    0
    0
    32px;

    color:#fff;
}


/* Intro Text */

.ass-intro-text p{
    font-size:1.12rem;

    line-height:1.9;

    color:#ffffff;

    margin-bottom:24px;

    max-width:760px;
}


/* Rechte Info-Box */

.ass-intro-box{
    background:
    rgba(255,255,255,.06);

    border:
    1px solid rgba(255,255,255,.14);

    border-radius:22px;

    padding:42px;

    min-height:430px;

    backdrop-filter:blur(8px);

    box-shadow:
    0 0 45px rgba(0,0,0,.48);
}


/* Box Überschrift */

.ass-intro-box h3{
    font-size:1.55rem;

    margin:
    0
    0
    26px;

    color:#fff;
}


/* Liste in der Box */

.ass-intro-box ul{
    list-style:none;

    padding:0;
    margin:0;
}


.ass-intro-box li{
    position:relative;

    padding-left:34px;

    margin-bottom:20px;

    line-height:1.55;

    color:#f0f0f0;
}


/* Rote Punkte vor Listeneinträgen */

.ass-intro-box li::before{
    content:"•";

    position:absolute;

    left:0;
    top:-2px;

    color:#d91c1c;

    font-size:1.45rem;
    font-weight:bold;
}


/* =========================================
   3. MOBILE OPTIMIERUNG HERO
========================================= */

@media(max-width:700px){

    .ass-hero{
        min-height:82vh;

        background-position:62% center;
    }


    .ass-hero-content{
        max-width:100%;

        padding:
        110px
        22px
        60px;
    }


    .ass-hero-logo{
        width:70px;

        margin-bottom:28px;
    }


    .ass-kicker{
        font-size:.75rem;

        letter-spacing:.14em;
    }


    .ass-hero h1{
        font-size:3.4rem;
    }


    .ass-hero h2{
        font-size:.95rem;

        line-height:1.35;
    }


    .ass-hero-text{
        font-size:1.1rem;
    }


    .ass-hero-btn{
        padding:
        15px
        22px;

        font-size:.9rem;
    }


    .ass-hero-facts{
        flex-direction:column;

        gap:8px;

        font-size:.88rem;
    }

}


/* =========================================
   4. MOBILE OPTIMIERUNG INTRO
========================================= */

@media(max-width:900px){

    .ass-intro{
        padding:
        90px
        22px
        80px;
    }


    .ass-intro-inner{
        grid-template-columns:1fr;

        gap:42px;
    }


    .ass-intro h2{
        font-size:2.5rem;
    }


    .ass-intro-text p{
        font-size:1rem;

        line-height:1.75;
    }


    .ass-intro-box{
        padding:30px;

        min-height:auto;
    }

}
/* =========================================
   3. THEMEN / TRAININGSINHALTE
========================================= */

.ass-topics{

    padding:
    140px
    7vw;

    background:
    linear-gradient(
        to bottom,
        #111,
        #0a0a0a
    );

    color:#fff;
}

/* =========================================
   4. SZENARIEN / TRAININGSORTE
========================================= */

.ass-scenarios{

    padding:
    140px
    7vw;

    background:
    linear-gradient(
        to bottom,
        #0a0a0a,
        #070707
    );

    color:#fff;
}


/* =========================================
   SZENARIEN GRID
========================================= */

.ass-scenario-grid{
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4, 1fr);

    gap:28px;
}


/* =========================================
   EINZELNE SZENARIO CARD
========================================= */

.ass-scenario-card{

    position:relative;

    min-height:300px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:36px;

    border-radius:24px;

    overflow:hidden;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.58),
        rgba(0,0,0,.15)
    filter:brightness(1.08);
    ),

    url("images/hero/ass-1-hero.png")
    center / cover no-repeat;

    border:
    1px solid rgba(255,255,255,.08);

    transition:.35s ease;
}

/* =========================================
   SZENARIO HINTERGRÜNDE
========================================= */

/* Tiefgarage */

.scenario-garage{

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,.05)
    ),

    url("images/hero/tiefgarage.png")
    center / cover no-repeat;
}


/* Keller & Eingänge */

.scenario-keller{

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,.05)
    ),

    url("images/hero/keller.png")
    center / cover no-repeat;
}


/* Bahnhof */

.scenario-bahnhof{

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,.05)
    ),

    url("images/hero/bahnhof.png")
    center / cover no-repeat;
}


/* Aufzug */

.scenario-aufzug{

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.28)
    ),

    url("images/hero/aufzug.png")
    center / cover no-repeat;
}

/* =========================================
   HOVER EFFEKT
========================================= */

.ass-scenario-card:hover{

    transform:
    translateY(-6px);

    border:
    1px solid rgba(255,0,0,.35);

    box-shadow:
    0 0 50px rgba(255,0,0,.14);
}


/* =========================================
   CARD ÜBERSCHRIFT
========================================= */

.ass-scenario-card h3{

    font-size:2rem;

    margin-bottom:16px;

    color:#fff;
}


/* =========================================
   CARD TEXT
========================================= */

.ass-scenario-card p{

    color:#dddddd;

    line-height:1.75;

    font-size:1rem;

    max-width:420px;
}


/* =========================================
   MOBILE OPTIMIERUNG
========================================= */

@media(max-width:900px){

    .ass-scenarios{

        padding:
        90px
        22px;
    }


    .ass-scenario-card{

        min-height:260px;

        padding:28px;
    }


    .ass-scenario-card h3{

        font-size:1.5rem;
    }

}

/* =========================================
   SECTION ÜBERSCHRIFT
========================================= */

.ass-section-head{

    max-width:900px;

    margin:
    0
    auto
    80px;
}


.ass-section-head h2{

    font-size:
    clamp(
        2.4rem,
        5vw,
        4.5rem
    );

    line-height:1.05;

    margin:
    0
    0
    30px;

    color:#fff;
}


.ass-section-head p{

    font-size:1.15rem;

    line-height:1.9;

    color:#dddddd;
}


/* =========================================
   CARD GRID
========================================= */

.ass-topic-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(320px,1fr)
    );

    gap:30px;
}


/* =========================================
   EINZELNE CARD
========================================= */

.ass-topic-card{

    position:relative;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:40px;

    overflow:hidden;

    transition:.35s ease;

    backdrop-filter:blur(8px);

    box-shadow:
    0 0 40px rgba(0,0,0,.35);
}


/* Hover Effekt */

.ass-topic-card:hover{

    transform:
    translateY(-6px);

    border:
    1px solid rgba(255,0,0,.35);

    box-shadow:
    0 0 55px rgba(255,0,0,.12);
}


/* =========================================
   ZAHL OBEN LINKS
========================================= */

.ass-topic-card span{

    display:inline-block;

    font-size:3rem;

    font-weight:900;

   color:#c40000;

   text-shadow:
   0 0 12px rgba(255,0,0,.25);

    margin-bottom:18px;

    line-height:1;
}


/* =========================================
   CARD ÜBERSCHRIFT
========================================= */

.ass-topic-card h3{

    font-size:1.45rem;

    line-height:1.3;

    margin:
    0
    0
    18px;

    color:#ffffff;
}


/* =========================================
   CARD TEXT
========================================= */

.ass-topic-card p{

    color:#dddddd;

    line-height:1.8;

    font-size:ei;
}


/* =========================================
   MOBILE OPTIMIERUNG
========================================= */

@media(max-width:900px){

    .ass-topics{

        padding:
        90px
        22px;
    }


    .ass-section-head{

        margin-bottom:50px;
    }


    .ass-section-head h2{

        font-size:2.5rem;
    }

    .ass-section-head p{

        font-size:1rem;

        line-height:1.75;
    }


    .ass-topic-card{

        padding:30px;
    }


    .ass-topic-card span{

        font-size:2.4rem;
    }


    .ass-topic-card h3{

        font-size:1.2rem;
    }

}

/* =========================================
   MOBILE CTA OPTIMIERUNG
========================================= */

@media(max-width:700px){

    .highlight h2{

        font-size:2.2rem;

        line-height:1.2;
    }

}

/* =========================================
   MOBILE WHATSAPP BUTTON FIX
========================================= */

@media(max-width:700px){

    .whatsapp-btn{
        left:16px;
        right:16px;

        width:auto;
        max-width:none;

        box-sizing:border-box;

        text-align:center;
    }

}
/* =========================================
   MOBILE SZENARIEN
========================================= */

@media(max-width:900px){

    .ass-scenario-grid{

        grid-template-columns:1fr;

    }

}
/* =========================================
   ASS 2.0 HERO
========================================= */

.ass-2-hero{

    background:
    linear-gradient(
        to right,
        rgba(0,0,0,0.96) 0%,
        rgba(0,0,0,0.82) 38%,
        rgba(0,0,0,0.36) 65%,
        rgba(0,0,0,0.72) 100%
    ),

    url("images/hero/ass-2-hero.png")
    center right / cover no-repeat;
}