/*  stylesheet für die Webpage Grand-duc  */
/* Date: 16.04.2023 */


    /*******    Allgemeine   Formatspezifikation   *********/

    html, body {
        margin: 0;
        height: 100%;
        background-color:lightgoldenrodyellow;
    }

    h1{
        font-family: 'Times New Roman', Times, serif;
        font-size: 28px;
        text-align: center;
    }

    h2{
        font-family: 'Times New Roman', Times, serif;
        font-size: 24px;
        text-align: center;
    }

    h3{
        font-size: 21px;
        text-align: center;
    }

    * {
        font-family: "Raleway";
        box-sizing: border-box;
    }

    iframe {
        display: block; 
        background: #FFFFFF;
        border: none; 
        height: 95vh; 
        width: 100vw;
    }

    .displayNone{
        display: none;
    }

    .center{
        text-align: center;
    }

    .text-weiss{
        color: #ffffff;
    }

    .text-grau{
        color: #606060;
    }

    .text-rot{
        color: #ff0000;
    }

    .text-dunkelrot{
        color: #8b2424;
    }

    .text-blau{
        color: #2600ff;
    }

    .text-schwarz{
        color: #000000;
    }

   .text-bold{
        font-weight: bold;
    }

    .display-block{
        display:block;
    }

    .ornament{
        background-image: url(../bilder/ornament1.gif);
        height: 32px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 20px;
        margin-bottom: 20px;
    }


    .bild-ornament-2{
        background-image: url(../bilder/ornament-2.gif);
        height: 23px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 30px;
        margin-bottom: 30px;
    }


    .bild-eule{
        background-image: url(../bilder/Eule.gif);
        height: 150px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 30px;
        margin-bottom: 60px;
    }

    .bild-pbgm{
        background-image: url(../bilder/pbgm.png);
        height: 100px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .bild-bg3d{
        background-image: url(../bilder/BernardGrandis3d.png);
        height: 30px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: 10px;
        margin-top: 15px;
        margin-bottom: 20px;
    }


    .bild-fingerfoodimglas{
        background-image: url(../bilder/fingerfoodimglas.png);
        width:330px;
        height: 400px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: 20px;  
        margin-top: -5px;
        margin-bottom: 10px;
    }
  
    .bild-fingerfood-2{
        background-image: url(../bilder/fingerfood-2.png);
        width:330px;
        height: 200px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: 20px;  
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .bild-ziege-1{
        background-image: url(../bilder/ziege-3.png);
        width:330px;
        height: 200px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: 20px;  
        margin-top: 5px;
        margin-bottom: 20px;
    }

    .bild-gal-ziegenkaese{
        background-image: url(../bilder/galerie_ziegenkaese.png);
        width:310px;
        height: 310px;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 auto;
        margin-bottom: -30px;
    }

    .bild-gal-bressehuhn{
        background-image: url(../bilder/gallerie_bressehuhn.png);
        width:310px;
        height: 310px;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 auto;
        margin-bottom: -30px;
    }


    .bild-gal-fingerfood-3{
        background-image: url(../bilder/galerie_fingerfood-3.png);
        width:310px;
        height: 310px;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 auto;
        margin-bottom: -30px;
    }

    .hr-main{
        color: rgb(238, 236, 236);
    }

    
    /***********     Spezifikation für die Anzeige auf Handys   ************/

    @media only screen and (max-width: 479.98px) {

        /* styles für die index Seite --------------------*/
        /* -----   Navigation Style  -----  */
        .top-nav {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background-color: #00BAF0;
            background: linear-gradient(to left, #eec10e, #0b0b0b);
            color: #FFF;
            height: 50px;
            padding: 0em;
            }

            .menu {
                display: flex;
                flex-direction: row;
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

            .menu > li {
                margin: 0 rem;
                overflow: hidden;
            }

            .menu-button-container {
                display: none;
                height: 200%;
                width: 30px;
                cursor: pointer;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: #13d90d;
            }

            #menu-toggle {
                display: none;
            }

            .menu-button,
            .menu-button::before,
            .menu-button::after {
                display: block;
                background-color: #f8f5f5;
                position: absolute;
                height: 4px;
                width: 30px;
                transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
                border-radius: 2px;
                margin-right: 38px;
            }

            .menu-button::before {
                content: '';
                margin-top: -8px;
            }

            .menu-button::after {
                content: '';
                margin-top: 8px;
            }

            #menu-toggle:checked + .menu-button-container .menu-button::before {
                margin-top: 0px;
                transform: rotate(405deg);
            }

            #menu-toggle:checked + .menu-button-container .menu-button {
                background: rgba(164, 177, 26, 0);
            }

            #menu-toggle:checked + .menu-button-container .menu-button::after {
                margin-top: 0px;
                transform: rotate(-405deg);
            }

            .menu-button-container {
                display: flex;
            }

            .menu {
                position: absolute;
                top: 0;
                margin-top: 50px;
                left: 0;
                flex-direction: column;
                width: 100%;
                justify-content: center;
                align-items: center;
            }

            #menu-toggle ~ .menu li {
                height: 0;
                margin: 0;
                padding: 0;
                border: 0;
                transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
            }

            #menu-toggle:checked ~ .menu li {
                border: 1px solid #333;
                height: 3em;
                padding: 0.5em;
                transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
            }

            .menu > li {
                display: flex;
                justify-content: center;
                margin: 0;
                padding: 0.5em 0;
                width: 100%;
                color: white;
                background-color: #222;
            }

            .menu > li:not(:last-child) {
                border-bottom: 1px solid #444;
            }

            .button-1 {
        
                cursor: pointer;
                text-transform: uppercase;
                text-align: center;
                position: relative;
                border-radius: 10px;
                font-size: 17px;
            }
            
        } /*  Ende der Definition für Handys  */







    /* tablets  ***********
    @media only screen and (min-width: 768px)  and (max-width: 900px) {
    }
     */

    /*******   Tablet Screen     ***************/

    @media only screen and (min-width: 479.98px) {

        #menu-toggle {
            display: none;
        }
        
        .top-nav {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background-color: #000000;
            height: 50px;
            width: 100%;

        }
        
        .menu {
            position: absolute;
            top: 0;
            margin-top: 00px;
            left: 68px;
            display: flex;
            flex-direction: row;
            background-color: #000000; /* eingefügt */
            height: 50px;
            justify-content:baseline;
            align-items:center;
         }



        .menu > li {
            display: flex;
            flex-direction: row;
            margin: 4px;
            padding: 1em 0;
            color: white;

        }


        /*  verwendung in der Startseite (index) für Notebooks  **/
        .button-1 {
            cursor: pointer;
            text-align: center;
            position: relative;
            border: none;
            font-size: 12px;
            color: #ffffff;
            background-color: #000000;
          }

        .button-1:hover{background-color: #f9a915;}

        .button-1:active{background-color: #d90d36;}

        .menu-button{
            display: none ;
        }

    }   /* ********  Ende spec für PC Monitor und Notebooks  *****/


/*     Menübeispiele         */

    .menueAuswahl{
        width: 340px;
        margin: 0 auto;
        text-align: center;
        font-size:17px; 
        color:#123456; 
        background-color: #f8f3c9;
        border-color: rgb(204, 167, 19);
        border-width: 2px;
        border-style: solid;
        box-shadow: 8px 8px 38px 2px rgb(143, 141, 141);
        padding-bottom: 20px;
    }

    
    .beispielmenues{
        text-align:center; font-size:20px; 
        margin: 0 auto;
        width:340px;
        color:#123456; 
        background-position: center;
        border-color: rgb(204, 167, 19);
        border-width: 2px;
        border-style: solid;
        box-shadow: 8px 8px 38px 2px rgb(143, 141, 141);
        padding: 10px;
    }


    .bgi-1 {
        background-image: url('../bilder/bgi-1.png');
    }

    .bgi-2 {
        background-image: url('../bilder/bgi-2.png');
    }

    .bgi-3 {
        background-image: url('../bilder/bgi-3.png');
    }

    .bgi-4 {
        background-image: url('../bilder/bgi-4.png');
    }

    .bgi-5 {
        background-image: url('../bilder/bgi-5.png');
    }

    .bgi-6 {
        background-image: url('../bilder/bgi-6.png');
    }

    .bgi-9 {
        background-image: url('../bilder/bgi-9.png');
    }


  

    .gang{
        color: #010179;
        text-align: center;
    }

    .wasistesdenn{
        color: #422626; 
        font-style: italic; 
        font-size: small;
    }





/********       main                  **************/

    #logo{
        color:blanchedalmond;
        font-size:10px; display: flex; text-align: center;
        margin-top: 3px; margin-left: 3px;
    }

.main-angebot{
    background-color:#f3db7d;
    font-size: 18PX;
    color: #000001;
    padding: 9px 9px;
    border-radius:  9px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    
    width:85%;
}

    .main-koeln{
        font-size: 20px;
        font-family:'Times New Roman', Times, serif;
        font-style: italic;
        text-align: center;
    }

    .main-feierl{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size:17px;
        color: #9c0008;
        }

    .main-cuisinier{
        text-align: center;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 12px;
        font-style: italic;
        color: #022b53;
    }

    .main-gesellschaften{
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 15px;
        margin: 0 auto;
        width: 320px; 
        text-align: left;
    }


    .main-alsmietkoch{
        padding-top: 20px;
        margin: 0 auto;
        width: 320px; 
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 16px;
        justify-content: center;
        padding-bottom: 20px;
    }

   
    .main-fieldset{
        margin: 0 auto;
        height:255px; 
        width:300px; 
        box-sizing: border-box;
        box-shadow: 8px 8px 38px 2px rgb(143, 141, 141); 
        border: rgb(250,250,210) 0,5px solid ;
        border-color: #ffd700;
        background-color: rgb(247, 250, 251);
    }

    /*  im Kontakt-Fenster      */
        .button-2{
            color:blue; 
            font-size: 15px;
            padding: 12px 18px;
            margin-left: 10px;
        }

        .kontakt-table{
            margin-left:30px
        }

        .kontakt-tr-3{
            height: 60px;
        }

        .kontakt-td-links{
            font-size: 28px; 
            text-align: center;
        }

        .kontakt-td-rechts{
            padding-left:5px;
        }

        .kontakt-legend-div{
            color: #5e4401;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 17px; 
            color: rgb(255, 255, 255);
            box-shadow: 8px 8px 38px 2px rgb(143, 141, 141);
            background-color: #ffd700;
            border-radius: 5px;
        }

/*   ************** organisatorischer Ablauf  ******************/


    .orgab{
        padding-top: 16px;
        padding-bottom: 8px;
        font-weight: bold;
    }

    .orgab-p{
        font-size:13px;
    }


/*   ************** partyservice  ******************/

    .ps-div-top{
        text-align: left;
        margin: 0 auto;
        width: 340px;
    }


    .ps-gabelgerichte{
        font-size: 20px;
        color: #080808;
        font-family:
            Georgia, 'Times New Roman', 
            Times, serif; 
        text-align: center;

    }


    .ps-info{
        color: #000000;
        font-size: 12px;
        font-style: italic;
        text-align: left;

        width:285px;margin:0 auto;
    }

    .ps-fingerfood{
        text-align: center;
    }

    .ps-div-beispielmenues{

        text-align:center; 
        font-size:20px;
        margin: 0 auto;
        width:340px;
        color:#123456; 
        background-position: center;
        border-color: rgb(204, 167, 19);
        border-width: 2px;
        border-style: solid;
        box-shadow: 8px 8px 38px 2px rgb(143, 141, 141);
        ;
    }

    .ps-preis{
        font-size: 12px;
        padding-bottom: 10px;
        padding-top:  15px;
    }

    .ps-gang{
        font-size: 16px;
        color: #00007f;
        text-align: center;
    }

    .ps-wasistesdenn{
        text-align: center;
        font-size: 13px; 
        font-style: italic; 
        color: #636060;

    }

    .ps-summary{
        list-style-type: style type;
        cursor: pointer;
        text-align: left; 
        font-family:Georgia, 'Times New Roman', Times, serif;
        font-size: 23px;
        font-weight: bold;
        margin-left: 2px; 
        margin-right: 2px;
    }




    /**************  Saisonale Menüs ******************/

    .bg-body{
        background-color:#fce589;
        background-color: #00BAF0;
    }


    .div-Saison{
        width: 320px;
        text-align:center; 
        font-size:17px; 
        margin: 0 auto;
        color:#123456; 
        background-color: #f8f3c9;
        border-color: rgb(204, 167, 19);
        border-width: 2px;
        border-style: solid;
        box-shadow: 8px 8px 38px 2px rgb(143, 141, 141);
    

    }

    .div-titel{
        text-align: center;
    }

    .div-info{
        width:300px;
        font-style: italic; 
        color: rgb(0, 0, 0);
        margin: 0 auto;

    }

    .untertitel{
        font-size: 4vw; 
        font-weight: bold;
    }

    .hauptgericht-F{
        color: #878787;
        font-size: 18px;
        padding-bottom: 6px;

    }


    .hauptgericht-D{
            color: #0300a4;
            font-size: 15px;
            font-weight: bold;

        }
 
    .beilage{
        padding-top: 5px;
            color: #333;
            font-size: 13px;
            font-style: italic;
            line-height: 18px;
    }



    /*************    main Philosophie     ***************/

    .ph-summary{
        margin-left: 20px;
        margin-right: 20px;
        text-align: left;
        cursor: pointer;
        font-size: 20px;


    }

    .ph-details{
        text-align: left;
        margin-left:20px;
        margin-right: 20px; 
    }








/******    PC-Monitore ab 780px Breite    ****/

@media only screen and (min-width: 780px) {

    .button-1 {
        cursor: pointer;
        text-align: center;
        position: relative;
        border: none;
        font-size: 17px;
        color: #ffffff;
        background-color: #000000;
      }


    .div-Saison{
        width:600px;
    }

}



    /***************   orientation landscape   ************
    @media (orientation: landscape) {
        


    }

*/


/********     Anlieferung       *********/

    .anl-beispiel{
        text-align:center; 
        font-size:17px; 
        margin-left: 3vw;
        margin-right: 3vw;
        color:#123456; 
        background-color: #f8f3c9;
        border-color: rgb(204, 167, 19);
        border-width: 2px;
        border-style: solid;
        box-shadow: 8px 8px 38px 2px rgb(143, 141, 141);
        padding: 2vw
    }

/******* nur zum Testen   *****/
/* main dialog section */

.dialog-format-button{
  
    background-color:#f3db7d;
    font-size: 18PX;
    color: #000001;
    padding: 9px 9px;
    margin-bottom: 3px;
    border-radius:  9px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    width:95%;  /* bezieht sich auf das umgebende div */
}

.dialog-format-dialog{
    position:absolute;
    margin-top: 160px;
    background-color: rgb(249, 221, 130);
    border-radius: 15px;
    border: #800040 1px solid;
    width: 315px;

}

.dialog-format-titel{
    font-weight: bold;
}