body			 { 
 					background-color: lightgray;  
 					font-size: 12px; font-family: verdana, helvetica,sans-serif; line-height: 18px; color:#252115;
        }


    /* Fley-Container für Flex-Items: article, nav, aside  */
		main {
			min-height: 20em;
			display: flex;
      // background-color: grey;
		}

		header, article, nav, aside, footer {
			margin: 0.25em;
			padding: 0.5em;
			border: 1px solid #ccc;
			border-radius: 0.5em;
		}

		article {
      /* LightYellow;   */
			background: #f5f1da;     
      flex: 1 3 35em;
			order: 2;
		}

		nav {
			background: #ede7d1;
			flex: 0 2 14em;
			order: 1;
		}


    header {
      background: 
        url(../images/log_vogt.png), 
        url(../images/back2.jpg) #000000;
      background-repeat: no-repeat, no-repeat;
      background-position: 
        left center, 
        left top;
      background-size: 
        60px auto,
       cover;   
			min-height: 10em; 
    }

    /* Standard für größere Bildschirme (Desktop/Tablet) */
    .res-img {
      max-width: 600px; /* Begrenzung, damit es auf dem Desktop nicht riesig wird */
      width: 100%;
      height: auto;     /* Verhindert Verzerrungen */
      display: block;   /* Entfernt den kleinen Standard-Abstand unter Bildern */
    }


		@media all and (max-width: 35em) {
			main {
				flex-direction: column;
			}
      /* Änderung der Reihenfolge für Kinder in Folge lt. html*/
			main > * {
				order: 0;
			}

      nav {
      flex-grow: 0;   
      flex-shrink: 1; 
      flex-basis: auto; 
      }

    .res-img {
    max-width: 100%; /* Hebt die Begrenzung auf */
    width: 100vw;    /* Nutzt die exakte Breite des Smartphone-Sichtfelds */
    }

		}



    nav ul {
        list-style-type: none;
        text-decoration: none;
        padding: 0.2em;
        display: inline-block;
        margin: 0 0.5em;
    }

    nav ul a {
        text-decoration: none;
    }

    nav ul li {
      padding-top: 0.5em;
    }


  h1,h2 {
    font-weight: normal;
  }


p,li  { 
        margin-bottom:1ex;     
      }




/* Formular */
form {
  margin: 10px  10px;  
}

legend {
	font-weight: bold;
	font-size:  120%;
	color: #999;
}	

fieldset {
  margin-bottom: 5px;
}

form label {
  display: inline-block;    /*  als Blockelement   */
  // width: 7em;
  text-align: right;
  vertical-align: middle;
}