/*Ein mobile First aufgebauter CSS-Code/https://kulturbanause.de/blog/responsive-webdesign-und-mobile-first/*/

h1 { font-size:16pt; color:#d2691e; font-family:tahoma; font:bold; text-align:center;}
h2 { font-size:10pt; color:black; font-family:tahoma; font:bold;}
h3 { font-size:16pt; color:#d2691e; font-family:tahoma; font:bold; text-align:center;}
/*index bildhintergrund*/h4 { font-size:16pt; color:#ffffff; font-family:tahoma; font:bold; text-align:center;}
h6 { font-size:10pt; color:black; font-family:tahoma; font:bold;}
    /*
       https://css--tricks-com.translate.goog/snippets/css/a-guide-to-flexbox/?_x_tr_sl=en&_x_tr_tl=nl&_x_tr_hl=nl&_x_tr_pto=sc
    */

	.navbar ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
    background: #66757f;
    display: flex;
    flex-direction: column;
    /*flex-direction: column; /* Vertikale Anordnung */
	}

    .navbar a {
      background: black;
      color: white;
      display: block;
      padding: 0em;
      margin: 0.3em; /*Abstand zwischen dem Menu*/
      height: 25px; /*Menuhöhe*/
    }

    /* Ansicht f�r Tablets-GSM */
    /*(min-width:38.75em) (min-width:22em)*/
    @media screen and (min-width:22em) {
      .header {
        float: left;
        width: 100%;
      }
      .logo {
        float: left;
      }

	.navbar {
		/*Abstand rundum*/
    background-color: 66757f;
    position: relative; /*fixed*/
    z-index: 999;
    margin-right: 1em;
    margin-bottom: 0em;
    top: 10px;
    font-size: 1.2em;
	}

/*	.navbar ul { nach oben verschoben*/

	.navbar li {
		display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
	}

	.navbar li a {
		color: black;
		display: block;
		/*padding: 10px 20px;*/
    padding: 1em;
    border-radius: 10px;
		text-decoration: none;
    background: white;
	}

	/* Style the dropdown menu */
	.navbar ul ul {
		position: absolute;
		top: 100%;
		display: none;
	}

	.navbar ul ul li {
		display: block;
    margin-bottom: 0em;
	}

	.navbar li:hover ul {
		display: block;
	}

	/* Change the background color of dropdown links on hover */
	.navbar ul ul li a:hover {
		background-color: #cccaca;
	}

    }

    /* Ansicht f�r Desktop-Monitore */
    @media screen and (min-width:45em) {
      .navbar ul {	
        flex-direction: row;  
      }
      .navbar li {
        font-size: 1em;
      }  

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background: #66757f;
        max-width: 960px;
        margin: 0em auto;
        border-radius: 20px;
      }
      .content {
        width: 95%;
        margin-top: 20px;  /*Abstand zum Menu*/
        padding: 3px;
        background-color: #c5d1d9;
        border: 2px solid black;
        border-radius: 20px;
        /*
        border-left:8px double #ffd700;
        border-right:8px double #ffd700;
        */
      }

    /* Morenkopf */
      /* https://www.html-seminar.de/css-bilder-und-design-sofortbildkamera-rechts-links.htm*/
      figure {
          background-color: #c5d1d9;
          width: 100px;
          height: 90px; /*height: auto;*/
          float: right;
          clear: right;
          padding: 1em 1em 1em 1em;
          /*border: 1px solid silver;*/
          margin: 0 3em 0 0;    
          /*box-shadow: 10px 0px 25px #555;*/
          transform: rotate(10deg);
      } 

      .gesicht {
          position: relative;
          width: 100px;
          height: 100px;
          background: rgba(17, 17, 0, 0.968);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: 0.5s;
      }

      .gesicht::before {
          content: "";
          top: 70px;
          position: absolute;
          width: 50px;
          height: 17px;
          background: crimson;
          border-bottom-left-radius: 50px;
          border-bottom-right-radius: 50px;
          transition: 0.5s;
      }

      .augen {
          position: relative;
          top: -15px;
          display: flex;
      }

      .augen .eye {
          position: relative;
          width: 30px;
          height: 30px;
          display: block;
          background: rgb(105, 103, 103);
          border-radius: 50%;
          margin: 0 5px;
      }

      .augen .eye::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 20px;
          transform: translate(-50%, -50%);
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: rgb(247, 246, 246);
      }
    /* Morenkopf ende */

      }
      div#foot {
        text-align:center;
      }
      .sidebarright {
        width: 34%;
        float: right;
      }
      .sidebarleft {
        width: 34%;
        float: left;
      }
      .Center {
        margin-left: auto;
        margin-right: auto;
        background-color: #C0C0C0;
      }

    /*fotogalerie*/
    #page{
      margin-top: 90px; /*Abstand zum menu*/
    }
    /* app_page ============ */
    .appwin{display:table;margin:0 auto 2em;background:#f7f7f7;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-radius:10px;position:relative;font-size:16px;}
    .appwin h4{text-align:center;}
    .app{margin:2em;z-index:-4;}

    /* width_limits ============ */
    .minw700{min-width:700px;}
    .minw800{min-width:800px;}
    .minw900{min-width:900px;}
    .maxw700{max-width:700px;}
    .maxw800{max-width:800px;}
    .maxw900{max-width:900px;}

    .button1 {
      background-color: #04AA6D; /* Green */
      border: none;
      border-radius: 10px;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }

    .button2 {
      background-color: #008CBA; /* Blue */
      border: none;
      border-radius: 10px;
      color: black;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }
    
    /*.button1 {background-color: #04AA6D;} /* Green */
    /*.button2 {background-color: #008CBA;} /* Blue */

    /* Begrüßung*/
    .gruss {
      top: -60px;
      float: right;
      font-size: 16pt; 
      font:bold;
      font-family:tahoma;
      color: #6707b6;
      transform: rotate(10deg);
      position: relative;
      display: flex;
      margin-right:20px

    }