@charset "utf-8"; /* muss in der ersten Zeile stehen */

/*css Document*/

    /* nunito-regular - latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/nunito-v25-latin-regular.woff2') format('woff2'),
       url('../fonts/nunito-v25-latin-regular.woff') format('woff');
}

/* nunito-700 - latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/nunito-v25-latin-700.woff2') format('woff2'),
       url('../fonts/nunito-v25-latin-700.woff') format('woff');
}

/* nunito-300italic - latin */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300;
  src: local(''),
       url('../fonts/nunito-v25-latin-300italic.woff2') format('woff2'),
       url('../fonts/nunito-v25-latin-300italic.woff') format('woff');
}

/* nunito-700italic - latin */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('../fonts/nunito-v25-latin-700italic.woff2') format('woff2'),
       url('../fonts/nunito-v25-latin-700italic.woff') format('woff');
}


/* ---------------------------------------------------- STANDARDS */
    
    *   {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
        }
          
    html {font: 1rem Nunito, sans-serif; color: #d0cac6; letter-spacing: 1px; } /* #d0cac6 */
    
    img {
        display: block;
        max-width: 100%;
        height: auto;
    }
    
        input[id*="checker"]    {
        display: none;
    }
    
    b   {
      font-weight: bold;
      color: yellow;
    }
    
/* DESKTOP ----------------------------------------------------- DESKTOP */
    
    @media screen and (min-width:801px) {
        
/* ---------------------------------------------------- DIVs */
    
    body    {
        
        background-image: url(../img/hg/BaumMitKoechern.jpg);
        background-position: left;
        background-size: cover;
    }
    
    #all {
        max-width: 80vw;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid black;
    }
    
    header  {
        width: 100%; 
        background-image: url(../img/hg/Titel_Puschel_1800x350.jpg);
        background-position: center;
        background-size: cover;
        height: 250px;
        border-bottom: 2px solid rgb(51, 51, 51);
        padding: 5%;
    }
    
    header h1  {
        text-align: center;
    }
        
    header a, header h1    {
        color: #f5d8c4;   
        font-size: 2.5rem;
        line-height: 2.3rem;
        text-shadow: 6px 6px 1rem #4a1c0e, 10px 10px 1rem #935b49, 0 0 0.5rem #7c3e2b;
        text-decoration: none; 
    }    
        
    
    header .satz    {
        font-size: 1.5rem;
        padding-left: 0%;
    }

/* ---------------------------------------------------- NAVI */ 
    #navalt { visibility: hidden; display: none; }
    #topnav p { visibility: hidden; display: none;}
        
    #topnav {      
        z-index: 9998;
    }
   
    #topnav > ul  {
        display: flex;
        list-style: none;
        
    }
    
    
    #topnav > ul > li    {
        flex-basis: 0;
        flex-grow: 1;
        text-align: center;
    }
    
    #topnav li  {
        position: relative; 
    }
    
/* ------------------------------- NORMAL 1. Ebene */
    
    #topnav a   {
        text-decoration: none; 
        background: black; 
        color: whitesmoke;
        font-size: 1rem;
        letter-spacing: 1px;
        line-height: 3rem;
        border-left: 1px solid #333333;
        border-bottom: 1px solid #333333;
        display: block;
        white-space: nowrap;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        transition: .35s;
    }
    
    #topnav ul li:first-of-type a  {
        border-left: 0;
    }
/* ------------------------------- HOVERN von a 1. Ebene*/
    
    #topnav ul a:hover {
        background: #be5912; 
        color: whitesmoke; 
        font-style: italic;
    }

/* ------------------------------- ACTIV */
    
     #topnav ul a.akt {
	    text-decoration: underline;
        font-weight: 700;
	}
    
    #topnav ul ul a.noakt {
	    text-decoration: none;
        font-weight: 300;
	}
    
/* ------------------------------- HOVERN von 1. Ebene blendet 2. Ebene ein */
/* bereitet auch das transform vor */
    
    #topnav ul li:hover ul  {
        opacity: 1;
        z-index: 100;
        transform: translateY(0px);
        visibility: visible;
    }   
    
/* ------------------------------------------------ NORMAL 2. Ebene */
/* ausgeblendet, Vorbereitung zum Einblenden mit transform 2. Ebene */
    
    #topnav ul ul {
        list-style: none;
        text-align: left;
        position: absolute;
        min-width: 100%;             /* keine Auswirkung */
        opacity: 0;
        visibility: hidden;
        z-index: -1;
        transition: 0.3s;
        transform: translateY(0px);       
    }
    
/* ---------------------------------------- NORMAL 2. Ebene, LINIEN */
    
    #topnav ul ul a {
        border-bottom: 1px solid #333333;
        border-left: 0px solid #333333;
    }
    
    #topnav ul ul li:last-of-type a  {
        border-bottom: none;
    }
    
    #topnav ul ul li:first-of-type a  {
        border-top:  1px solid #333333;
    }
        
    
/* ------------------------------------------- HOVERN von a 2. Ebene */
/* weil hier kein optischer Unterschied zwischen 1. und 2. Ebene ist, wird dieser Punkt nicht gebraucht */
    
    #topnav ul ul li a:hover {
    }
       
        
/* ----------------------------------------------- STICKY MENUE */
    #topnav.sticky  {
        position: fixed;
        top: 0;
        left: auto;
        right: auto;
        width: 80vw;
    }
    
       
    #topnav.sticky ~ #content    {
       margin-top: 2rem;
    }    
    
        
        
/* ----------------------------------------------- MAIN FONTS HPTEXT MAIN */            
    
    #content    {
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        padding: 5%;
        padding-left: 3%;        
    }
   

    main    {
        width: 80%;
        border-left: 4px dotted #3b3b3b;
        padding-top: 2%;
        padding-left: 5%;
    }
     
    .hptext p {
        font-weight: 300;
        line-height: 1.2rem;
        padding-right: 8%;
        column-count: 3;
        column-width: 250px;
        column-gap: 40px;
    } 
    
    .hptext h2    {
        font-weight: 400;
        font-size: 1.3rem;
        line-height: 3rem;
        text-align: left;
        padding-top: 0;
        padding-bottom: 0;
    }
        
    .hptext-ohne-p h2 {
        font-weight: 400;
        font-size: 1.3rem;
        line-height: 3rem;
        text-align: left;
        padding-top: 0;
        padding-bottom: 0;
    }  
        
    .hptext-ohne-p p {
        font-weight: 300;
        line-height: 1.2rem;
        }  
        
    
        
/* ----------------------------------------------- FONTS ALLGEMEIN */        
        html .kursiv {font-style: italic;}     
        html .dunkel {color: #b5b0b0; } /* #e5e1e1 whitesmoke */
        
        strong  {font-weight: 300; }
        
 /* ---------------------------------------------------- MAIN LINKS TO TOP */
        
    main #Home a, main #Handwerk a, main #Philosophie a, 
    main #Galerie a, main #Highlights a, main #Kontakt a {
        text-decoration: none;
        color: #d0cac6;
        border-bottom: 0;
        border-top: 0;
        }
        
    main #Home a:hover, main #Handwerk a:hover, main #Philosophie a:hover, 
    main #Galerie a:hover, main #Highlights a:hover, main #Kontakt a:hover {
        text-decoration: none;
        color: #bc7c4f;        
        transition: .35s;
        border-bottom: 3px solid #bc7c4f;
        border-top: 3px solid #bc7c4f;
        }    
        
/* ----------------------------------- In MAIN IMG ICON */
    
    .gap05      {gap: 0.5rem;}         
    .flex       {display: flex;}       
    .flex-just  {display: flex; justify-content: center;}      
    .margin     {margin-top: 5%; margin-right: 10%; margin-bottom: 5%;}       
    .padd10     {padding-right: 10%;}    

  
/* --------------- BILDER FÜR DIE GALERIEN ------------ */        
    
        
    figure.gal img,
    .border    {
        border: 1px solid white;
        border-radius: 20px;
        overflow: hidden;
        transition: .25s;
        transition-timing-function: ease-in-out;
        transform: scale(1);
        }    
        
    figure.gal img:hover,
    .border:hover   {
        border: 2px solid #be5912;
        transform: scale(1.1);
        -webkit-filter: sepia(1);
        filter: sepia(1);
        }           
    figure  {width: 100%;}
        
    .galerie    {
        column-count: 4;
        column-width: 20vw;
        column-rule: 0;
        column-gap: 2vw;
    }
        
    .galerie-one    {
        width: 52vw;
    }
        
    #leer  { width: 10px; margin: 2%;}
     
/* --------- ENDE BILDER FÜR DIE GALERIEN ------------ */
        
    .icon  {
        display: flex;
        justify-content: center;
    }
        
    .icon img   {
        width: 5vw;
        padding-top: 5%;  
        } 
       
     
/* ---------------------------------------------------- ASIDE */     
    aside   {
        width: 20%;
        margin-right: 2%;
        padding-top: 3%;
    }
    
    aside img   {
        border: 2px solid #3b3b3b;
        object-fit: cover;
        object-position: 50% 0;
        border-radius: 50%;
        width: 6.5rem;
        height: 6.5rem;
        transition: .25s;
        transform: scale(1);
        transition-timing-function: ease-in-out;
    }
        
        aside img:hover   {
        border: 2px solid whitesmoke;
        transform: scale(1.3);
    }
    
/* ---------------------------------------------------- ASIDE + HIGHLIGHT */
    
    .highlight p {
        font-size: 0.8rem;    
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 2rem;
        border-bottom: 2px dotted #3b3b3b;
        margin-bottom: 1rem;
    }    

    
/* ---------------------------------------------------- FOOTER */ 
    
    footer  {
    }  
        
    .foot    {
        display: flex;
        background-color: black;
        }
        
    .foot li  {
        list-style: none;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        line-height: 3rem;
        
        }
    .foot a  {
        color: whitesmoke;
        text-decoration: none;
        font-size: 0.8rem;    
        }   
        
    .foot li:first-of-type  {
        padding-left: 5%;
        }
        
    .foot a:hover { 
        color: whitesmoke; 
        font-style: italic;
        border-bottom: 1px solid whitesmoke;
        }
        
/* ---------------------------------------------------- TOP-BUTTON */
    #unten_alles {
        position: fixed;
        bottom: 3rem;
        right: 0;
        left: 0;
    }
    
    #top_position   {
        height: 3rem;
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
    }
    
    #top_main   {
        display: flex;
        justify-content: flex-end;
        width: 85.1vw;
        height: 2rem;
        margin-left: 5%;
        z-index: 100;
    }
    
    #back-top   {     
        display: none;     
    }
    
    #back-top a  {
        text-decoration: none;
        color: whitesmoke;
        font-style: italic;
        font-weight: 700;
        font-size: 0.8rem;
        background: rgba(128, 128, 128, 0.5);
        padding: 0.8rem 0.8rem;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    
    #topnav .nohome a {
        text-decoration: none;
    }
     
/* ---------------------------------------------------- COOKIE */
        
#cookiedingsbums {  /* ganzer Rahmen */
        text-align:center; 
        border: 8px double rgba(245, 245, 245, 0.4);
        background: rgba(83, 83, 83, 0.95);
        background-image: url(../img/hg/BaumAmMorgen-s.jpg);
        background-position: center;
        background-size: cover;
        position:fixed;
        top: 15%; 
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000; 
        width: 60vw;
        font-size: 1rem;
        padding-left: 7%;
        padding:7%;
        } 
        
        
    .cookietext {
        text-align: center;
        line-height: 1.5rem;
        color: whitesmoke;
        width: 100%;
        }  
            
    .cookietext a {      
        color: whitesmoke; 
        text-decoration: none;
        border-bottom: 1px solid whitesmoke;
        }

    .cookietext a:hover {
        border-bottom:5px solid #d16315;
        color: #d16315;
        }

    .cookiebut     {
        padding-top: 3rem;
        display: flex;
        justify-content: space-around;
        gap: 1rem;
        }
        
    .butlinks,   
    .butrechts   {
        color: black;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        border-top: 3px solid whitesmoke; 
        border-bottom: 3px solid whitesmoke;
        padding: 1rem 2rem;
        margin-top: 2rem;
        background: #ddd; /* Old browsers */
        background: linear-gradient(#9f9f9f, #ddd, #9f9f9f);
        } 
    

    .cookiedingsbumsCloser:hover { /* Die Buttons einzeln */
        border-bottom:5px solid #d16315; 
        border-top: 5px solid #d16315; 
        color: #d16315;
        background: #ddd; /* Old browsers */
        }
            
        
/* ------------------------------------------ KONTAKT  */ 
     .last   {
        margin-top: 3%; 
        }
        
     .last p {
        margin-left: 40%;
        padding-top: 2rem;      
        padding-right: 2rem;
        }
        
     .lastpict    {
        width: 52vw;
        background-image: url(../img/hg/Anja_IMG_4773_breit.jpg);
        background-position: left;
        background-size: cover;
        }
        
    .lastpict p {
        
        }    
             
     .last .mailto   {
        }
        
     .last .mailto p {
        padding-bottom: 1.5rem;
        width: 100%;
        padding-left: 0;
        margin-left: 0;
        text-align: center;
        }    
    
     .last .mailto a {
        text-decoration: none;
        border-bottom: 1px solid;
         line-height: 1.5rem;
        transition: .35s;
        }    
        
    .last .mailto a:hover {
        border-bottom: 3px solid #bc7c4f;
        border-top: 3px solid #bc7c4f;
        color: #bc7c4f;
        letter-spacing: 2px;
        }        
        
/* ------------------------------------------ KONTAKT FORMULAR */
        

    fieldset {
        }
        
    form input, form textarea {
        width: 100%;
        padding: 0.5rem;
        background: #363636;
        outline: none;
        border: 0;
        color: whitesmoke;
        resize: vertical;
    }
        
    form input:focus,
    form textarea:focus {
        background: #4d4d4d;
    }    
    
    form p  { /*nicht benötigt */}
        
    button, form input[type="submit"] {
        padding: 1rem;
        line-height: 1.5rem;
        border: 2px solid #3e3e3e; 
        background: linear-gradient(#2c2c2c, #5f5e5d, #2c2c2c);
        border-radius: 10px;
        transition: .35s;
    }
    
    form input[type="submit"]:hover {
        background:  linear-gradient(#bc7c4f, #dda37b, #bc7c4f);
        color: #723a12;
        cursor: pointer;
        font-weight: 900;
        letter-spacing: 10px;
        font-size: 1rem;
    }  
        
    .fake     {
      width: 35%;
      margin-left: 40%;
      margin-top: 2rem;
      padding-top: 1rem;
      color: whitesmoke;
    }
        
/* ------------------------------------------ KONTAKT MAILTO als Alternative */
        

        
        
        
        
} /* ENDE --- an 601 */ 


/* TABLET ----------------------------------------------------- TABLET */
    
    @media screen and (min-width:601px) and (max-width:800px) {
        
/* ---------------------------------------------------- DIVs */
    
    body    {
        
        background-image: url(../img/hg/BaumMitKoechern.jpg);
        background-position: left;
        background-size: cover;
    }
    
    #all {
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid black;
    }
    
    header  {
        width: 100%; 
        background-image: url(../img/hg/Titel_Puschel_1800x350.jpg);
        background-position: center;
        background-size: cover;
        height: 170px;
        border-bottom: 2px solid rgb(51, 51, 51);
        padding: 7%;
    }
    
    header h1  {
        text-align: center;
    }
        
    header a, header h1    {
        color: #f5d8c4;   
        font-size: 2.5rem;
        line-height: 2.3rem;
        text-shadow: 6px 6px 1rem #4a1c0e, 10px 10px 1rem #935b49, 0 0 0.5rem #7c3e2b;
        text-decoration: none; 
    }    
        
    
    header .satz    {
        font-size: 1.5rem;
        padding-left: 7%;
    }

/* ---------------------------------------------------- NAVI */
        
    #navalt { visibility: hidden; display: none; }
    #topnav p {  visibility: hidden; display: none;}
        
        
    
    #topnav {      
        z-index: 9998;
    }
   
    #topnav > ul  {
        display: flex;
        list-style: none;  
    }
    
    
    #topnav > ul > li    {
        flex-basis: 0;
        flex-grow: 1;
        text-align: center;
    }
    
    #topnav li  {
        position: relative; 
    }
    
/* ------------------------------- NORMAL 1. Ebene */
    
    #topnav a   {
        text-decoration: none; 
        background: black; 
        color: whitesmoke;
        font-size: 0.8rem;
        letter-spacing: 1px;
        line-height: 3rem;
        border-left: 1px solid #333333;
        border-bottom: 1px solid #333333;
        display: block;
        white-space: nowrap;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        transition: .35s;
    }
    
    #topnav ul li:first-of-type a  {
        border-left: 0;
    }
/* ------------------------------- HOVERN von a 1. Ebene*/
    
    #topnav ul a:hover {
        background: #be5912; 
        color: whitesmoke; 
        font-style: italic;
    }

/* ------------------------------- ACTIV */
    
     #topnav ul a.akt {
	    text-decoration: underline;
        font-weight: 700;
	}
    
    #topnav ul ul a.noakt {
	    text-decoration: none;
        font-weight: 300;
	}
    
/* ------------------------------- HOVERN von 1. Ebene blendet 2. Ebene ein */
/* bereitet auch das transform vor */
    
    #topnav ul li:hover ul  {
        opacity: 1;
        z-index: 100;
        transform: translateY(0px);
        visibility: visible;
    }   
    
/* ------------------------------------------------ NORMAL 2. Ebene */
/* ausgeblendet, Vorbereitung zum Einblenden mit transform 2. Ebene */
    
    #topnav ul ul {
        list-style: none;
        text-align: left;
        position: absolute;
        min-width: 100%;             /* keine Auswirkung */
        opacity: 0;
        visibility: hidden;
        z-index: -1;
        transition: 0.3s;
        transform: translateY(0px);       
    }
    
/* ---------------------------------------- NORMAL 2. Ebene, LINIEN */
    
    #topnav ul ul a {
        border-bottom: 1px solid #333333;
        border-left: 0px solid #333333;
    }
    
    #topnav ul ul li:last-of-type a  {
        border-bottom: none;
    }
    
    #topnav ul ul li:first-of-type a  {
        border-top:  1px solid #333333;
    }
        
    
/* ------------------------------------------- HOVERN von a 2. Ebene */
/* weil hier kein optischer Unterschied zwischen 1. und 2. Ebene ist, wird dieser Punkt nicht gebraucht */
    
    #topnav ul ul li a:hover {
    }
       
        
/* ----------------------------------------------- STICKY MENUE */
    #topnav.sticky  {
        position: fixed;
        top: 0;
        left: auto;
        right: auto;
        width: 90vw;
    }
    
       
    #topnav.sticky ~ #content    {
       margin-top: 2rem;
    }    
    
        
        
/* ----------------------------------------------- MAIN FONTS HPTEXT MAIN */            
    
    #content    {
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;        
    }
   

    main    {
        width: 100%;
        padding-top: 2%;
        padding-left: 5%;
        padding-right: 5%;
    }
     
/* ---------------------------------------- MAIN FONTS HPTEXT MAIN */  
    
    .hptext p { /* p in main */
        font-weight: 300;
        line-height: 1.2rem;
        padding-right: 8%;
    } 
    
    .hptext h2    { /* h2 in main */
        font-weight: 700;
        font-size: 1.2rem;
        line-height: 3rem;
        text-align: left;
        padding-top: 0.5rem;
        padding-left: 2rem;
    }
        
    .hptext-ohne-p h2 { /* h2 im Kontakt */
        font-weight: 700;
        font-size: 1.2rem;
        line-height: 3rem;
        text-align: left;
        padding-top: 0.5rem;
        padding-left: 2rem;
    }  
        
    .hptext-ohne-p p { /* Text im Kontakt */
        font-weight: 300;
        line-height: 1.2rem;
        }  
        
    
 /* ---------------------------------------------------- MAIN LINKS TO TOP */
        
    main #Home a, main #Handwerk a, main #Philosophie a, 
    main #Galerie a, main #Highlights a, main #Kontakt a {
        text-decoration: none;
        color: #d0cac6;
        border-bottom: 0;
        border-top: 0;
        }
        
    main #Home a:hover, main #Handwerk a:hover, main #Philosophie a:hover, 
    main #Galerie a:hover, main #Highlights a:hover, main #Kontakt a:hover {
        text-decoration: none;
        color: #bc7c4f;        
        transition: .35s;
        border-bottom: 3px solid #bc7c4f;
        border-top: 3px solid #bc7c4f;
        } 
        
/* ----------------------------------------------- FONTS ALLGEMEIN */        
        html .kursiv {font-style: italic;}     
        html .dunkel {color: #b5b0b0; } /* #e5e1e1 whitesmoke */
        
        strong  {font-weight: 300; }
        
/* ----------------------------------- In MAIN IMG ICON */
    
    .gap05          {}         
    .flex           {display: flex;}       
    .flex-just      {display: flex; justify-content: center;}
    .flex-around    {display: flex; justify-content: space-around;}
    .margin         {margin-top: 5%; margin-bottom: 5%;}       
    .padd10         {padding-right: 10%;}    
    .gal            {width: 100%; justify-content: space-between;}
  
/* --------------- BILDER FÜR DIE GALERIEN ------------ */        
   /* <figure class="gal flex gap05 margin"> */ 
        
    figure.gal img,
    .border    {
        border: 1px solid white;
        border-radius: 20px;
        overflow: hidden;
        transition: .25s;
        transition-timing-function: ease-in-out;
        transform: scale(1);
        }    
        
    figure.gal img:hover,
    .border:hover   {
        border: 2px solid #be5912;
        transform: scale(1.1);
        -webkit-filter: sepia(1);
        filter: sepia(1);
        }           
    
    figure  {width: 100%;}
        
    .galerie,    
    .galerie-one {
        width: 100%;
    }
        
    .galerie img {
        padding-bottom: 5%; 
        }    
        
   #leer  { width: 10px; margin: 2%;}
        
/* --------------------------------------------------- ICONS auf MAIN */
        
    .icon  {
        display: flex;
        justify-content: center;
    }
        
    .icon img   {
        width: 10vw;
        padding-top: 5%;  
        }    
       
     
/* ---------------------------------------------------- ASIDE */     
    aside   {
        width: 100%;
        padding-top: 3%;
        padding-left: 5%;
        padding-right: 5%;
    }
    
    aside img   {
        border: 2px solid #3b3b3b;
        object-fit: cover;
        object-position: 50% 0;
        border-radius: 50%;
        width: 7.5rem;
        height: 7.5rem;
        transition: .25s;
        transform: scale(1);
        transition-timing-function: ease-in-out;
    }
        
        aside img:hover   {
        border: 2px solid whitesmoke;
        transform: scale(1.3);
    }
    
/* ---------------------------------------------------- ASIDE + HIGHLIGHT */
    
    aside .highlight p {
        font-size: 0.9rem;
        text-align: center;
        padding: 2%;    
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 2rem;
        border-bottom: 2px dotted #3b3b3b;
        margin-bottom: 1rem;
    }    

    
/* ---------------------------------------------------- FOOTER */ 
    
    footer  {
    }  
        
    .foot    {
        display: flex;
        background-color: black;
        }
        
    .foot li  {
        list-style: none;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        line-height: 3rem;
        
        }
    .foot a  {
        color: whitesmoke;
        text-decoration: none;
        font-size: 0.8rem;    
        }   
        
    .foot li:first-of-type  {
        padding-left: 5%;
        }
        
    .foot a:hover { 
        color: whitesmoke; 
        font-style: italic;
        border-bottom: 1px solid whitesmoke;
        }
        
/* ---------------------------------------------------- TOP-BUTTON */
    #unten_alles {
        position: fixed;
        bottom: 3rem;
        right: 0;
        left: 0;
    }
    
    #top_position   {
        height: 3rem;
        width: 100vw;
    }
    
    #top_main   {
        display: flex;
        justify-content: flex-end;
        width: 98vw;
        height: 2rem;
        z-index: 100;
    }
    
    #back-top   {     
        display: none;     
    }
    
    #back-top a  {
        text-decoration: none;
        color: whitesmoke;
        font-style: italic;
        font-weight: 700;
        font-size: 0.8rem;
        background: rgba(128, 128, 128, 0.5);
        padding: 0.8rem 0.8rem;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    
    #topnav .nohome a {
        text-decoration: none;
    }
        
/* ---------------------------------------------------- COOKIE */
        
    #cookiedingsbums {  /* ganzer Rahmen */
        text-align:center; 
        border: 8px double rgba(245, 245, 245, 0.4);
        background: rgba(83, 83, 83, 0.95);
        background-image: url(../img/hg/BaumAmMorgen-s.jpg);
        background-position: center;
        background-size: cover;
        position:fixed;
        top: 15%; 
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000; 
        width: 50vw;  
        font-size: 1rem;
        padding: 3%;
        } 
        
        
    .cookietext {
        text-align: center;
        line-height: 1.5rem;
        color: whitesmoke;
        width: 100%;
        }  
            
    .cookietext a {      
        color: whitesmoke; 
        text-decoration: none;
        border-bottom: 1px solid whitesmoke;
        }

    .cookietext a:hover {
        border-bottom:5px solid #d16315;
        color: #d16315;
        }

    .cookiebut     {
        height: 40%;
        padding-top: 1rem;
        }
        
    .butlinks,   
    .butrechts   {
        color: black;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        border-top: 3px solid whitesmoke; 
        border-bottom: 3px solid whitesmoke;
        padding: 0.5rem 1rem;
        margin-top: 1rem;
        background: #ddd; /* Old browsers */
        background: linear-gradient(#9f9f9f, #ddd, #9f9f9f);
        } 
    

    .cookiedingsbumsCloser:hover { /* Die Buttons einzeln */
        border-bottom:5px solid #d16315; 
        border-top: 5px solid #d16315; 
        color: #d16315;
        background: #ddd; /* Old browsers */
        background: linear-gradient(#fddfb6, antiquewhite, #fddfb6);
        }
            

        
/* ------------------------------------------ KONTAKT  */ 
     .last   {
        margin-top: 3%; 
        }
        
     .last p {
        margin-left: 5%;
        padding-top: 2%;      
        padding-right: 2%;
        }
        
     .lastpict    {
        width: 100%;
        background-image: url(../img/hg/Anja_IMG_4773_breit-s.jpg);
        background-position: left;
        background-size: cover;
        }
        
        
     .last .mailto p {
        padding-bottom: 1.5rem;
        width: 100%;
        padding-left: 0;
        margin-left: 0;
        text-align: center;
        }    
    
     .last .mailto a {
        text-decoration: none;
        border-bottom: 1px solid;
        line-height: 1.5rem;
        transition: .35s;
        }    
        
    .last .mailto a:hover {
        border-bottom: 3px solid #bc7c4f;
        border-top: 3px solid #bc7c4f;
        color: #bc7c4f;
        }        
        
/* ------------------------------------------ KONTAKT FORMULAR */
        

    fieldset {
        }
        
    form input, form textarea {
        width: 100%;
        padding: 0.5rem;
        background: #363636;
        outline: none;
        border: 0;
        color: whitesmoke;
        resize: vertical;
    }
        
    form input:focus,
    form textarea:focus {
        background: #4d4d4d;
    }    
    
    form p  { /*nicht benötigt */}
        
    form input[type="submit"] {
        padding: 1rem;
        line-height: 1.5rem;
        border: 2px solid #3e3e3e; 
        background: linear-gradient(#2c2c2c, #5f5e5d, #2c2c2c);
        border-radius: 10px;
        transition: .35s;
    }
    
    form input[type="submit"]:hover {
        background:  linear-gradient(#bc7c4f, #dda37b, #bc7c4f);
        color: #723a12;
        cursor: pointer;
        font-weight: 900;
        letter-spacing: 10px;
        font-size: 1rem;
    }  
                
        
        
        
} /* ENDE ---  601 bis 800 */ 


/* MOBIL ----------------------------------------------------- MOBIL */
    
     @media screen and (max-width:600px) {
        
/* ---------------------------------------------------- DIVs */
    
    body    {
        
        background-image: url(../img/hg/BaumMitKoechern_s.jpg);
        background-position: left;
        background-size: cover;
    }
    
    #all {
        max-width: 100vw;
    }
    
    header  {
        width: 100%; 
        background-image: url(../img/hg/Titel_Puschel_1800x350.jpg);
        background-position: center;
        background-size: cover;
        height: 120px;
        border-bottom: 2px solid rgb(51, 51, 51);
        padding: 5%;
    }
    
    header h1  {
        text-align: center;

    }  
        
    header a, header h1    {
        color: #f5d8c4;   
        font-size: 1.5rem;
        line-height: 1.8rem;
        text-shadow: 6px 6px 1rem #4a1c0e, 10px 10px 1rem #935b49, 0 0 0.5rem #7c3e2b;
        text-decoration: none; 
    }    
        
    
    header .satz    {
        font-size: 1.2rem;
    }
    
/* ---------------------------------------------------- ALTERNATIVE NAVI */
    #topnav p { visibility: hidden; display: none;}     
         
    #navalt {
        z-index: 9997;
        background: black;
        height: 5rem;
        }
         
    #navalt a   { 
         padding-top: 1rem;
         padding-bottom: 1rem;
         transition: 0.5s;
         transform: scale(1); 
         } 
         
    #navalt a:hover {
        transform: scale(1.3);
         }   
        
         
/* ---------------------------------------------------- NAVI */ 

  
    #topnav > ul  {
        list-style: none;
        width: 100%;
    }
         
         
    
/* ------------------------------- NORMAL 1. Ebene */
    

         
    #topnav { /* der schwarze Bereich, li */
        background: black;
        position: fixed;
        right: -250px;
        top: 0;
        z-index: 9998;
        width: 250px;
        transition: 0.5s;       
    }
    
    #navchecker:checked ~ #topnav   {
        right: 0px;
    }
    
    #topnav p   { /* X */
        background: #d16315;
        color: white;
        position: absolute;
        top: 0;
        left: -48px;
        width: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 1.5rem;
        font-weight: bold;
        border-radius: 1rem 0 0 1rem;
    }
    
    #topnav label   {
        display: block;
        transition: 0.5s 0.5s;
    }

    #navchecker:checked ~ #topnav label {
        transform: rotate(45deg);
    }
       
    #topnav ul   {
        list-style: none;
    }
    
    #topnav li  {    
    }
    
    #topnav a    {
        display: block;
        text-decoration: none;
        padding-left: 1rem;
        font-size: 1rem;
        color: whitesmoke;
        line-height: 48px;
        border-bottom: 1px solid black;
         }
         
/* ------------------------------- ACTIV */
    
     #topnav ul a.akt {
	    text-decoration: underline;
        font-weight: 700;
	}
    
    #topnav ul ul a.noakt {
	    text-decoration: none;
        font-weight: 300;
	}

        
/* ----------------------------------------------- STICKY MENUE */
   #navalt.sticky  {
        position: fixed;
        top: 0;
        left: auto;
        right: auto;
        width: 100vw;
    }
    
       
    #navalt.sticky ~ #content    {
       margin-top: 5rem;
    }    
          
/* ---------------------------------------------------- CONTENT */
    
    
    #content    {
        background: rgba(0, 0, 0, 0.5);
        padding: 5%;
        display: flex;
        flex-direction: column;
        margin-top: 0%;
    }
   
    main    {
        width: 100%;
        padding-top: 2%;
        padding-left: 5%;
        padding-right: 5%;
    }

    
/* ---------------------------------------- MAIN FONTS HPTEXT MAIN */  
    
    .hptext p { /* p in main */
        font-weight: 300;
        line-height: 1rem;
    } 
    
    .hptext h2    { /* h2 in main */
        font-weight: 700;
        font-size: 1rem;
        line-height: 2.5rem;
        text-align: left;
    }
        
    .hptext-ohne-p h2 { /* h2 im Kontakt */
        font-weight: 700;
        font-size: 1rem;
        line-height: 2.5rem;
        text-align: left;
    }  
        
    .hptext-ohne-p p { /* Text im Kontakt */
        font-weight: 300;
        line-height: 1rem;
        }  
        
    
 /* ---------------------------------------------------- MAIN LINKS TO TOP */
        
    main #Home a, main #Handwerk a, main #Philosophie a, 
    main #Galerie a, main #Highlights a, main #Kontakt a {
        text-decoration: none;
        color: #d0cac6;
        border-bottom: 0;
        border-top: 0;
        }
        
    main #Home a:hover, main #Handwerk a:hover, main #Philosophie a:hover, 
    main #Galerie a:hover, main #Highlights a:hover, main #Kontakt a:hover {
        text-decoration: none;
        color: #bc7c4f;        
        transition: .35s;
        border-bottom: 3px solid #bc7c4f;
        border-top: 3px solid #bc7c4f;
        } 
        
/* ----------------------------------------------- FONTS ALLGEMEIN */        
        html .kursiv {font-style: italic;}     
        html .dunkel {color: #b5b0b0; } /* #e5e1e1 whitesmoke */
        
        strong  {font-weight: 300; }
        
/* ----------------------------------- In MAIN IMG ICON */
    
    .gap05      {}         
    .flex       {display: flex;}       
    .flex-just  {display: flex; justify-content: center;}      
    .margin     {margin-top: 5%; margin-right: 10%; margin-bottom: 5%;}       
    .padd10     {padding-right: 10%;}    

  
/* --------------- BILDER FÜR DIE GALERIEN ------------ */        
    
        
    figure.gal img,
    .border    {
        border: 1px solid white;
        border-radius: 20px;
        overflow: hidden;
        transition: .25s;
        transition-timing-function: ease-in-out;
        transform: scale(1);
        }    
        
    figure.gal img:hover,
    .border:hover   {
        border: 2px solid #be5912;
        transform: scale(1.1);
        -webkit-filter: sepia(1);
        filter: sepia(1);
        }   
         
    figure  {width: 100%;}
    
    .galerie,    
    .galerie-one {
        width: 100%;
    }
        
    .galerie img {
        padding-bottom: 5%;
        } 
        
    #leer  { width: 10px; margin: 2%;}   
/* --------------------------------------------------- ICONS auf MAIN */
        
    .icon  {
        display: flex;
        justify-content: center;
    }
        
    .icon img   {
        width: 8vw;
        padding-top: 5%;  
        }    
       
     
/* ---------------------------------------------------- ASIDE */
         
    aside   {
        width: 100%;
        padding-top: 3%;
    }
    
    aside img   {
        border: 2px solid #3b3b3b;
        object-fit: cover;
        object-position: 50% 0;
        border-radius: 50%;
        width: 6.5rem;
        height: 6.5rem;
        transition: .25s;
        transform: scale(1);
        transition-timing-function: ease-in-out;
    }
         
    aside img:hover   {
        border: 2px solid whitesmoke;
        transform: scale(1.3);
    }     
    
/* ---------------------------------------------------- ASIDE + HIGHLIGHT */
    
    aside .highlight p {
        font-size: 0.8rem;
        text-align: center;
        padding: 2%;    
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 2rem;
        border-bottom: 2px dotted #3b3b3b;
        margin-bottom: 1rem;
    }    

    
/* ---------------------------------------------------- FOOTER */ 
    
    footer  {
    }  
        
    .foot    {
        display: flex;
        background-color: black;
        }
        
    .foot li  {
        list-style: none;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        line-height: 3rem;
        
        }
    .foot a  {
        color: whitesmoke;
        text-decoration: none;
        font-size: 0.8rem;    
        }   
        
    .foot li:first-of-type  {
        padding-left: 5%;
        }
        
    .foot a:hover { 
        color: whitesmoke; 
        font-style: italic;
        border-bottom: 1px solid whitesmoke;
        }
        
/* ---------------------------------------------------- TOP-BUTTON */
    #unten_alles {
        position: fixed;
        bottom: 3rem;
        right: 0;
        left: 0;
    }
    
    #top_position   {
        height: 3rem;
        width: 100vw;
    }
    
    #top_main   {
        display: flex;
        justify-content: flex-end;
        width: 96vw;
        height: 2rem;
        z-index: 100;
    }
    
    #back-top   {     
        display: none;     
    }
    
    #back-top a  {
        text-decoration: none;
        color: whitesmoke;
        font-style: italic;
        font-weight: 700;
        font-size: 0.8rem;
        background: rgba(128, 128, 128, 0.5);
        padding: 0.8rem 0.8rem;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    
    #topnav .nohome a {
        text-decoration: none;
    }
        
/* ---------------------------------------------------- COOKIE */
        
    #cookiedingsbums {  /* ganzer Rahmen */
        text-align:center; 
        border: 8px double rgba(245, 245, 245, 0.4);
        background: rgba(83, 83, 83, 0.95);
        background-image: url(../img/hg/BaumAmMorgen-s.jpg);
        background-position: center;
        background-size: cover;
        position:fixed;
        top: 15%; 
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000; 
        width: 50vw;  
        font-size: 1rem;
        padding: 3%;
        } 
        
        
    .cookietext {
        text-align: center;
        line-height: 1.5rem;
        color: whitesmoke;
        width: 100%;
        }  
            
    .cookietext a {      
        color: whitesmoke; 
        text-decoration: none;
        border-bottom: 1px solid whitesmoke;
        }

    .cookietext a:hover {
        border-bottom:5px solid #d16315;
        color: #d16315;
        }

.cookiebut     {
        height: 40%;
        padding-top: 1rem;
        }
        
    .butlinks,   
    .butrechts   {
        color: black;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        border-top: 3px solid whitesmoke; 
        border-bottom: 3px solid whitesmoke;
        padding: 0.5rem 1rem;
        margin-top: 1rem;
        background: #ddd; /* Old browsers */
        background: linear-gradient(#9f9f9f, #ddd, #9f9f9f);
        } 
    

    .cookiedingsbumsCloser:hover { /* Die Buttons einzeln */
        border-bottom:5px solid #d16315; 
        border-top: 5px solid #d16315; 
        color: #d16315;
        background: #ddd; /* Old browsers */
        background: linear-gradient(#fddfb6, antiquewhite, #fddfb6);
        }
            

        
/* ------------------------------------------ KONTAKT  */ 
     .last   {
        margin-top: 3%; 
        }
        
     .last p {
        margin-left: 2%;
        padding-top: 5%;      
        padding-right: 2%;
        }
        
     .lastpict    {
        width: 100%;
        background-image: url(../img/hg/Anja_IMG_4773_breit-s.jpg);
        background-position: left;
        background-size: cover;
        }
        
    .lastpict p {     
        }    
             
     .last .mailto   {
        }
        
     .last .mailto p {
        padding-bottom: 1.5rem;
        width: 100%;
        padding-left: 0;
        margin-left: 0;
        text-align: center;
        }    
    
     .last .mailto a {
        text-decoration: none;
        border-bottom: 1px solid;
        line-height: 1.5rem;
        transition: .35s;
        }    
        
    .last .mailto a:hover {
        border-bottom: 3px solid #bc7c4f;
        border-top: 3px solid #bc7c4f;
        color: #bc7c4f;
        }        
        
/* ------------------------------------------ KONTAKT FORMULAR */
        

    fieldset {
        }
        
    form input, form textarea {
        width: 100%;
        padding: 0.5rem;
        background: #363636;
        outline: none;
        border: 0;
        color: whitesmoke;
        resize: vertical;
    }
        
    form input:focus,
    form textarea:focus {
        background: #4d4d4d;
    }    
    
    form p  { /*nicht benötigt */}
        
    form input[type="submit"] {
        padding: 1rem;
        line-height: 1.5rem;
        border: 2px solid #3e3e3e; 
        background: linear-gradient(#2c2c2c, #5f5e5d, #2c2c2c);
        border-radius: 10px;
        transition: .35s;
    }
    
    form input[type="submit"]:hover {
        background:  linear-gradient(#bc7c4f, #dda37b, #bc7c4f);
        color: #723a12;
        cursor: pointer;
        font-weight: 900;
        letter-spacing: 10px;
        font-size: 1rem;
    }  
        
/* ------------------------------------------ KONTAKT MAILTO als Alternative */
        

        
        
        
        
} /* ENDE --- (300) bis 600 */