/* Stil der Seite Meisterstimmungen von Bernhard Farenholtz  */

/* ====================================================   GLOBALE DEFINITION   ============================== */

/* alternatives Boxmodell */

html {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  max-width: 75em;
  margin: 0 Auto;
  font: normal 0.9em Calibri, Verdana, Arial, sans-serif;      /*  Schriftart  */
  background: #F0f0f0;                                         /*  Hintergrundfarbe grau */

}


/* ====================================================   HEADER   ==================================================== */


[role="banner"] {                    /*  Hintergrundfarbe dunkelblau */
                                     /*  border: medium solid red;          zum Testen */
  position: relative;
  margin: 0 0;
  background: #173559 url("../jpgdatn/logo_meisterstimmungen.jpg") no-repeat right;
  background-size: 200px;
  background-position: 97% top;
  padding: 0.4em 0 0.4em 0;
}

[role="banner"] h1, h2, p {
  margin: 0.9em 0 0;                                       /*  Abstand der Überschriften zum oberen Rand  */
  padding-left: 7.7%;                                      /*  Abstand der Überschriften vom linken Rand */
  font: lighter 1.5em Calibri, Verdana, sans-serif;
  color: #F0F0F0;                                          /* Textfarbe grau    */
}

[role="banner"] h2 {
  font: lighter 1.2em/120% Calibri, Verdana, sans-serif;
  margin: 1.0em 0 0;
}

[role="banner"] p {
  font: normal 1.3em/110% Calibri, Verdana, sans-serif;
  margin: 1.3em 0 0 0;                                      /* Abstand der E-Mail von oben               */
}


/* ====================================================  NAV   ==================================================== */

nav {
                                 /*             border: medium solid red;      zum Testen   */
  max-width: 55em;                            /*  Breite der Linkleiste  */
  margin: 2.7em 0 0 5.5%;                     /* Abstände der Linkleiste  */
}

nav ul {
  text-align: center;
  margin: 0;
  padding: 0;
  list-style-type: none;       /* ohne Bullets o.ä. */

}

nav a {
  font: lighter 1.5em Calibri, Verdana, sans-serif;
  background: #28729a;
  color: #EEAE14;               /* Linkfarbe gold */
  font-size: 1.2em;
/*  text-decoration: none; */
  display: inline-block;
 padding: 0.3em;

}

nav a:hover,
nav a:focus {
  background: #28729a;          /*  Hellblau  */
  color: white;
  text-decoration: none;
}

nav a:hover::after,
nav a:focus::after {
  color: transparent;
}



/* =====================================  content  ============================== */

a {
  text-decoration: none;
}

.intro h1 {
                                       /*  border: 1px solid red;     zum Testen */
  font: 2.2em Calibri, Verdana, sans-serif;
  color: #173559;                      /*  hellere Textfarbe: color: #0164A9; */
  margin: 0.5em;
}

main li,
main h2,
main p {
  color: #333;
  font: normal 1.1em Calibri, Verdana, Arial, sans-serif;
  padding: 0;
}

a,
p a {
    color: #173559;
    text-decoration: none;
    font-weight: bold;
}

/* Formatierung, wenn der Benutzer mit der Maus über den Link fährt (Hover-Effekt) */

a:hover,
p a:hover {
  color: #28729a;          /*   Hellblau für Hover-Effekt */
    /*     color: #eeae14;              gold */
    text-decoration: none;  /* nix Unterstreichung beim Hover */
}


.bildtext h1,
.detailseite h1 {
  font-size: 1.7em;
  color: #173559;
  padding: 0 0 -0.2em 0;
  margin: 0;
}

.bildtext h2
.detailseite h2, {
  font-size: 1em;
  font-weight: bold;
  padding-bottom: 0.3em;
}

section.intro {
                               /*      border: 1px solid red;      zum Testen */
  background: #fff;
  text-align: center;
  padding: 0;
}

section.flexinhalt {
                               /*      border: 1px solid red;      zum Testen */
  background: #fff;
  padding: 1.8em 0 1.8em 3em;
  margin: 0 0;
}

.bildtext,
.flexbild,
.detailseite {
                             /*      border: 1px solid red;        zum Testen */
  padding: 0 1.5em 0 0;
  margin: 0 0;
}

section.dankeseite {
                              border: 1px solid red;    /*       zum Testen    */
  background: #fff;
  text-align: center;
  margin: 0;
  padding: 1em 0 20em;
}



/* ======================== Formular ======================================================= */

form {
  border: 1px solid black;
  width: 90%;
  background-color: #F5F5F5;
  margin: 0 auto;
  padding: 0 1em;
}

form label {
  color: #173559;
  font: Calibri, Verdana, Arial, sans-serif;
  display: block;
  font-size: 1em;
  margin: 0 0;
  padding: 0.7em 0 0.3em 0.5em;
                                    /*     border: 1px solid red;     zum Testen */
}

.cbox {
  padding-bottom: 1em;
}

input,
textarea
{
  width: 100%;
  font-size: 1.1em;
  padding: 0.3em 0.5em;            /* Höhe der Eingabefelder */
  margin: 0 0;
  font-family: Verdana, Arial;
  color: #173559;
  border-radius: 0.2em;
  border:1px solid gray;
  outline: none;
  resize: vertical;
}

input:focus,
textarea:focus {
    border:1px solid #EEAE14;
}

button[type=submit] {
    background-color: #173559;
    color: #FFF;
    cursor: pointer;
    width: 10em;
    padding: 0.4em 0;           /*  Höhe des Bottons */
    margin: 0 0 0.3em 0.5em;
    border-radius: 0.2em;
}

button[type=submit]:hover {
    background-color: #EEAE14;
    box-shadow: 2px 2px 2px grey;
}

input[type="checkbox"] {
  padding: 0;
  width: 22px;
  transform: scale(1.2);
}

input[id="quiz"] {
  width: 2.4em;
  margin: 0.4em 0 0.1em;
  padding: 3px 5px 6px 7px;
}

span.mensch {
  color: #173559;
  font: Calibri, Verdana, Arial, sans-serif;
  padding-left: 0.5em;
}

/* =====================================================  Footer ===================================== */
footer {
  padding: 0.4em 1em 0.8em;
  margin: 0em 0em 1em;
  text-align: right;
  font-size: 0.9em;
  color: #aaa;
  border-color: #d1d1d1;
  border-top: 1px #ccc solid;
  background-color: #FFFFFF;
}

footer > * {
  flex:  1;
}




/* =====================================================  Layout ===================================== */

/* ------------------ zuerst Handy --------------------  */

@media screen and (max-width: 30em) {         /* Logo im Header verschwindet bei kleinem Bildschirm */
  [role="banner"] {
    background-image: none;
  }
}

@media screen and (max-width: 40em) {         /* Bild im Detailtext verschwindet bei kleinem Bildschirm */

/*  img.detailbild {
    display: none;
  } */
  textarea {
    height: 12em;
  }
}

body {
  padding: 0 0em;
}

main {
  max-width: 65em;
  margin: 0 auto;
  padding: 0 0;
}


nav ul {
  display: flex;
  flex-direction: column;
}

nav li {
  margin: .3em 0;
  flex: 1 1 100%;
}

nav a {
  width: 85%;
  margin: 0 5%;
  border-radius: 0.3em;
}

[aria-current=page] {
  color: #649DC8;
}


/*  ---------------- breiter als 40 em ------------------ */

@media screen and (min-width: 40em) {
  body {
    padding: 0;
  }

  nav ul {
    flex-direction: row;
    background: transparent;
  }

  nav li {
    margin: 0;
    flex: 1 1 0%;
  }

  nav a {
    background: transparent;
  }

  [aria-current=page] {
    color: #649DC8;
    border-bottom: 1px solid #EEAE14;
  }

  .flexinhalt,
  .flexinhalt > a {
    display: flex;
    flex: 1 1 100%;
  }

  .kontaktbild,
  .flexbild {
                                /*     border: 1px solid red;      zum Testen */
    max-width: 340px;
  }

  .kontaktbild {
    margin: 0 0;
    padding: 2.8em 1.5em 0 0;
                                  /*     border: 1px solid red;        zum Testen */
  }

  .meinformular h1,
  .impressum h1 {
    margin: 0;
    padding: 0 0 0 1em;
  }

  .detailseite p {
    padding: 0 3em 0 7em;
    max-width: 60em;
  }

  .detailseite h1 {
    padding-left: 4.6em;
  }

  .detailseite h2 {
    padding-left: 7.2em;
  }
  img.detailbild {
    max-width: 40%;
    float:right;
    margin-left: 1.5em;
  }
  textarea {
    height: 6em;
  }
}

/* Main und Footer werden zum Flex-Container */

main,
footer {
  display: flex;
  flex-flow: row wrap;
}

 main > * {
  flex: 1;
}

main {
  max-width: 75em;
  margin: 0 0;
  padding: 0 0;
}

section {
                                   /*  border: 1px solid red;        zum Testen */
  flex: 0 0 100%;

}

.kontaktbild,
.flexbild {
                                  /*  border: 1px solid red;       zum Testen */
  flex: 1 1 25em;
  max-width: 540px;                /* Begrenzt die Zeilen auf eine gut lesbare Länge */
}

.bildtext {
  flex: 2 2 50em;
  max-width: 45em;
}

.meinformular {
  flex: 2 2 50em;
  max-width: 35em;
  padding-right: 2.5em;
                                 /*    border: 1px solid red;      zum Testen */
}

.impressum {
  flex: 2 2 50em;
  max-width: 35em;
  padding-left: 2em;
                                 /*   border: 1px solid red;    zum Testen   */
}

/*
.impressum a {
  font-weight: bold;
  color: #173559;
} */

.kontaktbild img,
.flexbild img {
                                 /*  border: 1px solid red;      zum Testen */
  width: 98%;
/*  overflow: hidden; */

}

.detailseite {
                                  /*  border: 1px solid red;       zum Testen */
  flex: 1 1 25em;
  max-width: 1024px;           /* Begrenzt die Zeilen auf eine gut lesbare Länge */
}

.detailseite img {
                                 /*  border: 1px solid red;      zum Testen */
  width: 98%;
/*  overflow: hidden; */
}