/*
Theme Name: M1N1 Twenty Seventeen Child
Description: Minimal child theme for m1n1.de
Template: twentyseventeen
Version: 1.0.0
Text Domain: m1n1-twentyseventeen-child
*/

/*
 * Eigene M1N1-Anpassungen.
 *
 * Das Parent-Stylesheet wird in functions.php geladen.
 * Keine Änderungen direkt im Twenty-Seventeen-Theme vornehmen.
 */


/*
 * HIER dein gesichertes "Zusätzliches CSS"
 * vollständig darunter einfügen.
 */

/*
Füge deinen eigenen CSS-Code nach diesem Kommentar hinter dem abschließenden Schrägstrich ein. 

Klicke auf das Hilfe-Symbol oben, um mehr zu erfahren.
*/

/*
Definitionen für das Kontakt Form 7 Form
"Bestellformular" html-id="wfs-orderform"
*/
#wfs-orderform {
  background:#C12A20;
  padding:20px 15px 15px 15px;
  border-radius:5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
}
#wfs-orderform input[type="submit"] {
  background:#C12A20;
  padding:20px;
  font-size:18px;
}
#wfs-orderform select {
  color: black;
	background:#C0C0C0;
  width: 25% ;
  font-size:17px !important;
}
#wfs-orderform input[type="submit"]:hover {
  background:#8BC34A;
}
/*
Definitionen für das Kontakt Form 7 Form
"Bestellformular" html-id="5asorderform"
*/
#wfs-orderform-en {
  background:#C12A20;
  padding:20px 15px 15px 15px;
  border-radius:5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
}
#wfs-orderform-en input[type="submit"] {
  background:#C12A20;
  padding:20px;
  font-size:18px;
}
#wfs-orderform-en select {
  color: black;
	background:#C0C0C0;
  width: 25% ;
  font-size:17px !important;
}
#wfs-orderform-en input[type="submit"]:hover {
  background:#8BC34A;
}

/*
Einstellungen für Contakt Form WFS Bestellung NEU 2020
*/
#anfrage {
  background:#004225;
  padding:20px 15px 15px 15px;
  border-radius:5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.4);
}

#anfrage label {
  color: #FCE903;
}

#anfrage input[type="submit"]:hover {
  background:#8BC34A;
	color:#FCE903
}


/*
Allgemeine Einstellungen für Kontakt Form 7 
*/

div.wpcf7-f124-p176-o1 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#c0c0c0;
/* Hier: generelle Font Color
#000 -> black
#FFF -> white
	*/
color:#000;
font-family:lora, sans-serif;
font-style:italic;   
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#c0c0c0;
width:100%;
text-align:center;
	text-transform:uppercase;
}
.wpcf7 submit {
background: #555555;
color: #FFFFFF;
}

/* Blogübersicht auf volle Inhaltsbreite setzen */
@media screen and (min-width: 48em) {

    body.blog:not(.has-sidebar) #primary article {
        float: none;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.blog .site-content .page-header {
        float: none;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.blog .navigation.pagination {
        float: none;
        width: 100%;
        max-width: none;
    }
}

/* Blog: Beitragsbild links, Text rechts */
@media screen and (min-width: 48em) {

    body.blog .site-main > article.has-post-thumbnail {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        grid-template-areas:
            "bild kopf"
            "bild inhalt";
        column-gap: 2rem;
        align-items: start;
    }

    body.blog .site-main > article.has-post-thumbnail .entry-header {
        grid-area: kopf;
        float: none;
        width: auto;
        margin: 0;
        padding: 0 0 0.6rem 0;
    }

    body.blog .site-main > article.has-post-thumbnail .post-thumbnail {
        grid-area: bild;
        width: 240px;
        height: 180px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
    }

    body.blog .site-main > article.has-post-thumbnail .post-thumbnail img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    body.blog .site-main > article.has-post-thumbnail .entry-content {
        grid-area: inhalt;
        float: none;
        width: auto;
        margin: 0;
    }
}

/* Trennlinie zwischen den Artikeln */
body.blog .site-main > article {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
}

/* Mobil: Bild wieder in normaler Breite */
@media screen and (max-width: 47.999em) {

    body.blog .post-thumbnail img {
        width: 100%;
        height: auto;
        max-height: none;
    }
}