@charset "utf-8";
/* CSS Document */

/***************************************************************************

	Projekt:			WandelMut
	CSS fuer:			Microsite
	Autor / copyright:	madiko. Franziska Koeppe https://madiko.com
	letzte Aenderung:	2025-03-11
	letzte Prüfung: 	2025-03-11

 ***************************************************************************/

/* Einzahl für atoms, modules und classes verwenden! */

/* ##### table of content

    Layout
    Texte
    Links
    Bilder

 ***************************************************************************/

/***************************************************************************

    Layout

***************************************************************************/

 body {
     background-color: #242526 ;
     color: #D5DBE0;
     text-align: center;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 12px;
     box-sizing: border-box;
 }

    @media screen and (min-width: 800px) {

        body {
                font-size: 15px;
            }

    }


 .intro {
     width: 100%;
     background-color: #0C0C0D;
     border-bottom: #217DD9 3px solid;
     color: #E6ECF2;
     text-align: center;       
 }

    .intro-container {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 90%;
        max-width: 800px;
        padding: 2em;

    }

 .card-container {
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 3em;
     text-align: center;            
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     width: 100%;
 }

 
    .card {
        flex-basis: 90%;
        flex-grow: 0;
        flex-shrink: 0;
        background: #303132;
        padding: 2em;
        box-shadow: #0b0a0b 0 0.35em 0.75em 0;
        margin: 1em;
    }


    @media screen and (min-width: 800px) and (max-width: 1499px) {
        .card {
            flex-basis: calc(33% - 6em);
        }
    }


    @media screen and (min-width: 1500px) {
        .card {
            flex-basis: calc(33% - 5em);
        }
    }



 .main_secondary {
     width: 100%;
     position: relative;
     background: #2c2d2e;
     margin-bottom: 3em;
 }

 .container {
     position: relative;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     width: 90%;
     max-width: 800px;
     padding: 2em 2em 3.5em 2em;
 }

 .center {
     width: 90%;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     font-size: 1.25em;
     line-height: 150%;
 }

 .spacer {
     content: "\00a0"; /* Leerzeichen einfügen */
     width: 100%;
     height: 3em;
 }


 .footer {
    background-color: #040F1A;
    color: #9AB9D9;
    text-align: center;
    padding: 1em;
    font-size: 0.75em;
}

/***************************************************************************

    Texte

***************************************************************************/

.txt-left {
    text-align: left;
}

.txt-center {
    text-align: center;
}

 h1 {
     font-size: 4em;
     line-height: 100%;
 }

 h1.sub {
     font-size: 2.5em;
     font-weight: 300;
     line-height: 125%;
     padding-top: 0;
     margin-top: -0.5em;
 }

 h2 {
     padding: 0em;
     margin: 0em;
     font-size: 2.5em;
     font-weight: 300;
     line-height: 125%;
     text-align: left;
     color: #629DD9;
 }


 #event-title {
    padding: 0.75em 0em 0em 0em;
    margin-top: -0.5em;
    margin-bottom: -0.25em;
} 


 h3 {
     margin-bottom: -0.25em;
     padding: 1em 0em 0.025em 0em;
     font-size: 1.5em;
     font-weight: 600;
     text-align: left;
 }

 .card h3 {
     padding: 0;
     margin: 0;
 }

 p {
     padding: 1em 0 0 0;
     margin: 0;
     text-align: left;
 }


/***************************************************************************

    Links

***************************************************************************/

 a,
 a:active,
 a:visited {
     margin: inherit;
     text-decoration: none;
     color: #3285D9;
 }

 a:hover {
     color: #FFF;
     font-weight: 500;
     text-decoration: underline;
 }

 a.button {
     margin-top: 2em;
     padding: 0.75em 1em;
     background: #3285D9;
     border-radius: 10px;
     color: #251912;     
     text-decoration: none;
     line-height: 200%;
 }

 a.button:hover {
     background: #3562A8;
     color: #DFE3EA;
     font-weight: normal;
     text-decoration: none;     
 }

/***************************************************************************

    Bilder

***************************************************************************/

img {
    max-width: 100%;
    height: auto;
    padding: 1.5em 0;
}