/*
|--------------------------------------------------------------------------
| SS24 CMS
|--------------------------------------------------------------------------
|
| Datei:
| ss24.css
|
| Aufgabe:
| Grunddesign Frontend
|
| Version:
| 0.1.0 Alpha
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Grundwerte
|--------------------------------------------------------------------------
*/

:root {

    --ss24-primary: #8b1e1e;

    --ss24-secondary: #333333;

    --ss24-background: #f7f7f7;

    --ss24-white: #ffffff;

    --ss24-text: #222222;

    --ss24-border: #dddddd;

    --ss24-radius: 8px;

    --ss24-shadow:
        0 2px 8px rgba(0,0,0,0.08);

}



/*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {

    box-sizing: border-box;

}



html {

    font-size: 16px;

}



body {

    margin: 0;

    background:
        var(--ss24-background);

    color:
        var(--ss24-text);

    font-family:

        "Red Hat Display",
        Arial,
        sans-serif;

    line-height: 1.6;

}



/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/

.container {

    width: min(
        1200px,
        92%
    );

    margin-left: auto;

    margin-right: auto;

}



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

.ss24-header {

    background:
        var(--ss24-white);

    padding:

        40px 0;

    border-bottom:

        1px solid
        var(--ss24-border);

}



.ss24-header h1 {

    margin: 0;

    color:

        var(--ss24-primary);

    font-size:

        2.2rem;

}



.ss24-header p {

    margin-top:

        10px;

}



/*
|--------------------------------------------------------------------------
| Hero Bereich
|--------------------------------------------------------------------------
*/

.hero {

    background:

        var(--ss24-white);

    margin-top:

        40px;

    padding:

        40px;

    border-radius:

        var(--ss24-radius);

    box-shadow:

        var(--ss24-shadow);

}



.hero h2 {

    margin-top: 0;

    color:

        var(--ss24-primary);

}



/*
|--------------------------------------------------------------------------
| Artikelkarten
|--------------------------------------------------------------------------
*/

.latest {

    margin-top:

        40px;

}



.article-card {

    background:

        var(--ss24-white);

    padding:

        25px;

    margin-top:

        20px;

    border-radius:

        var(--ss24-radius);

    box-shadow:

        var(--ss24-shadow);

}



.article-card h3 {

    margin-top: 0;

}



/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.ss24-footer {

    margin-top:

        60px;

    padding:

        25px 0;

    background:

        var(--ss24-secondary);

    color:

        var(--ss24-white);

}



/*
|--------------------------------------------------------------------------
| Mobile Anpassungen
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {


    .ss24-header h1 {

        font-size:

            1.6rem;

    }


    .hero {

        padding:

            25px;

    }


}

/* --------------------------------------------------
   SS24 CMS Admin Navigation
-------------------------------------------------- */

.admin-nav {

    margin-top:20px;

    padding:10px;

    border-top:1px solid #ccc;

    font-size:0.95em;

}


.admin-nav strong {

    margin-right:15px;

}


.admin-nav a {

    margin-right:15px;

}