/* Ausrichtung direkt am Rand  */

*{
    margin: 0;  
    padding: 0;
    box-sizing: border-box;
}


body{
    font-size: 12px;
    font-family: 'Nunito Sans';
}



/* Grundgerüst der Webseite 3 Spalten Grid */
#container{
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-areas: "hintergrund inhalt hintergrund";
    background-color: white;
}



/* Grid für Section graue Box Umbruch der Zeilen bei zu langen Texten */

.grid_beschreibung{
    display: grid;
    grid-template-columns: 40% auto;
}




/* Class Bild der Stellenausschreibung */
img{
    width: 100%;
    height: 50%;
}


/* Graue Box Stellenbeschreibung */
.gray-box {
    background-color: #ccc;
    padding-top: 0;
}


/* Weiße Box Stellenbeschreibung */
.white-box {
    background-color: white;
    padding-top: 0;
}


/* Box Atrribut grau und weiß*/
.box {
    width: 48%;
    padding: 20px;
    margin-bottom: 20px;     
}


.box-weiss {
    width: 48%;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;     
}

/* Überschrift Stellenbeschreibung  */
#Stellenbeschreibung{
    margin-top: 10px;
    margin-bottom: 10px;
}


/* Class für Ränder Hintergrund */
.leer{
    background-color: rgb(238, 238, 238);
}


/* Fette Schrift bei der Beschreibung */

.schrift_fett{
    font-weight: bold;
}

.abstand {
    display: inline-block;
    /* width: 160px; */
    width: 40%;        /* Abstand zwischen Ort:  Geschäftstelle  */
}

/* Abstand der Paragraphen zu einander nach unten */
.auflistung ul{
    padding-left: 20px;
}


div p , li , p{
    padding-bottom: 5px;
}

/* Beschreibung Section Flex Container , Das bieten wir und Kontakt Flex */

.flex{
    display: flex;
}



/* h3 Überschriften Abstand nach unten */
section h3{
    margin-bottom: 10px;
}

/* Abstand nach jeder Section nach unten */
.section-abstand{
    margin-bottom: 20px;
}


/* Auflistung rote Vierecke  und rote Schriftfarbe */
.custom-list ul{
    list-style-type: none;
    padding-left: 10px;
}

.custom-list li::before{     
    content: "\25A0";
    color: #dc020e;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.rote-schrift , a{
    color: #dc020e;
}

a:visited{
    text-decoration: none;
}

/* Stellemarkt Regel */

#stellenmarkt::before{
    content: "←";
    color: #dc020e;
}

#stellenmarkt{
    padding-left: 20px;
}

/* Alle Regeln zum Button zumn Bewerben */

.bewerben-btn {
    background-color: #dc020e;
    color: white;
    font-size: 18px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* Stil für den Hover-Effekt */
.bewerben-btn:hover {
    background-color: #ae0a14;
}



.container-btn {
    display: flex;
    justify-content: center;
}

a.no-underline  {
    text-decoration: none;
    color: inherit;
}

a.no-underline:visited {
    color: inherit;
}

a.no-underline-appl{
    text-decoration: none;
    color: white;
}

a.no-underline-appl:visited{
    text-decoration: none;
    color: white;
}


/* Regeln für den Ausdruck */


#Klingt_interessant{
    margin-bottom: 40px;
}


section{
    padding-left: 20px;
    padding-right: 20px;
}














/* Section Layout Änderungen */   

@media screen and (max-width: 900px) {
    #container{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: "inhalt";
        background-color: white;
    }

    /* Beschreibung Section Flex Container , Das bieten wir und Kontakt Flex */

.flex{
    display: flex;
    flex-direction: column;
}


/* Box Atrribut grau und weiß*/
.box {
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;     
}


.box-weiss {
    width: 100%;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;     
}

#Klingt_interessant{
    margin-bottom: 40px;
}

.abstand {
    display: inline-block;
    /* width: 160px; */
    width: 40%;        /* Abstand zwischen Ort:  Geschäftstelle  */
    padding-bottom: 6px;
}

section{
    padding-left: 5px;
    padding-right: 5px;
}



.bewerben-btn {
    background-color: #dc020e;
    color: white;
    font-size: 12px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 20px;
    margin-top: 20px;
}

}


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

p,li{
    font-size: 11px;
}

h3{
    font-size: 13px;
}

h2{
    font-size: 15px;
}

.bewerben-btn {
    background-color: #dc020e;
    color: white;
    font-size: 12px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 20px;
    margin-top: 20px;
}

}



/* Regeln Druck */
@media print{
    header img {
        width: 100%;
    }

    .bewerben-btn {
        display: none;
    }

    #container{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: "inhalt";
        background-color: white;
    }

    .leer{
        display: none;
    }

    
}