@charset "utf-8";

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DEVICE | 16:10 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media only screen and (device-aspect-ratio: 16/10) {

    article {bottom: 10%; left: 0; width: 100%; height: 60%; padding-top: 2%;}

    .content_slide.right, .content_slide.left {border-image-width: 2rem;}
    
    @media not all and (min-resolution:.001dpcm) { @media {                                 /* Apple Safari selector */
        .content_slide.right {
        /*  border: 20px solid transparent;       */
            border-image-source: url(../img/stamp_right.png);
            border-image-slice: 63 64 fill;
            border-image-repeat: repeat;
            border-image-width: 2rem;
        }

        .content_slide.left {
        /*  border: 20px solid transparent;       */
            border-image-source: url(../img/stamp_left.png);
            border-image-slice: 63 64 fill;
            border-image-repeat: repeat;
            border-image-width: 2rem;
        }
    }}

    footer.all_over {height: 10%; font-size: 1.1rem; padding: 2.4% 1.5% 0;}


    /* ~~~~~~~~~~~~~ PAGE | 2 | product ~~~~~~~~~~~~~ */


   	/* ~~~~~~~~~~~~~ IMPRINT + DSGVO ~~~~~~~~~~~~~- */

    .popup_1, .popup_2, #popup_Eierkunde {border-image-width: 2rem;}

    @media not all and (min-resolution:.001dpcm) { @media {                                 /* Apple Safari selector */
        .popup_1, .popup_2, #popup_Eierkunde {
            height: 80%;
            border-image-slice: 64 61 fill;
            border-image-repeat: repeat;
        }

        #popup_Eierkunde {
            height: 60%;
            border-image-slice: 68 64 fill;
        }
    }}
}


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ TABLET | landscape ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media only screen and (orientation: landscape) and (max-width: 1400px) and (min-height: 700px) {

    body {font-size: 200%;}


    /* ~~~~~~~~~~~~~ TYPO | FONT ~~~~~~~~~~~~~ */

    body h2 {font-size: 2.1rem; line-height: 2.3rem; padding-bottom: 3%;}
    
    body h4.sub {position: relative; margin-top: 15%;}

    body p {padding-bottom: 2.5%;}

    .headline_top {margin-top: 0;}

    .headline_text {padding-top: 6%;}

    .gap_top {padding-top: 2.5%;}

    .text_small {font-size: 1.8rem !important;}

    @media only screen and (orientation: landscape) and (max-width: 1300px) and (min-height: 800px) and (max-height: 900px) {       /* Kindle | iPad Pro 10.5 */
        body h2 {font-size: 1.9rem; line-height: 2.1rem;}
        .text_small {font-size: 1.6rem !important;}
    }


    /* ~~~~~~~~~~~~~ GENERAL ~~~~~~~~~~~~~ */

    article {bottom: 6.5%; height: 65%; padding-top: 3%;}

    footer.all_over {height: 6.5%; font-size: 1.35rem; padding: 1.6% 2% 0;}

    @media only screen and (orientation: landscape) and (max-width: 1300px) and (min-height: 800px) and (max-height: 900px) {       /* Kindle | iPad Pro 10.5 */
        footer.all_over {font-size: 1.2rem; padding: 1.1% 1.5% 0;}
    }

    @media only screen and (orientation: landscape) and (max-width: 1150px) and (min-height: 830px) and (max-height: 900px) {       /* iPad Pro 10.5 */
        footer.all_over {font-size: 1.35rem; padding: 1.6% 2% 0;}
    }


    /* ~~~~~~~~~~~~~ FORMFIELD ~~~~~~~~~~~~~ */

    form.origin .input_origin {padding-bottom: .3%;}

    form.origin .input_01 {width: 4rem;}

    form.origin .input_02 {width: 4.5rem;}

    form.origin .input_03 {width: 5rem;}

    form.origin .input_04 {width: 7.5rem;}

    form.origin .input_05 {width: 13rem;}

    @media only screen and (orientation: landscape) and (max-width: 1300px) and (min-height: 800px) and (max-height: 900px) {       /* Kindle | iPad Pro 10.5 */
        form.origin .input_01 {width: 3.5rem;}
        form.origin .input_02 {width: 4rem;}
        form.origin .input_03 {width: 4.5rem;}
        form.origin .input_04 {width: 7rem;}
        form.origin .input_05 {width: 11rem;}
    }

    @media only screen and (orientation: landscape) and (max-width: 1150px) and (min-height: 830px) and (max-height: 900px) {       /* iPad Pro 10.5 */
        form.origin .input_05 {width: 13rem;}
    }


    /* ~~~~~~~~~~~~~ BUTTON ~~~~~~~~~~~~~ */

    form.origin .button_wrap {margin-top: 5%;}

    form.origin .button_origin {font-size: 1.2rem;}

    @media only screen and (orientation: landscape) and (max-width: 1300px) and (min-height: 800px) and (max-height: 900px) {       /* Kindle | iPad Pro 10.5 */
        form.origin .button_origin {font-size: 1.1rem;}
        form.origin .button_wrap {margin-top: 4%;}
    }


    /* ~~~~~~~~~~~~~ SLIDER | content ~~~~~~~~~~~~~ */

    .content_slide {font-size: 1.8rem;}

    .content_slide.left {border-image-width: 2.5rem; padding: 3% 3% 3% 5%;}

    .content_slide.right {border-image-width: 2.5rem; padding: 3% 5% 3% 3%;}

    @media not all and (min-resolution:.001dpcm) { @media {                                 /* Apple Safari selector */
        .content_slide.right {
            border-image-slice: 63 64 fill;
            border-image-repeat: repeat;
        }

        .content_slide.left {
            border-image-slice: 63 64 fill;
            border-image-repeat: repeat;
        }
    }}

    .content_slide.content_first {padding: 3%;}

    .content_slide.content_image {padding: 10% 2%;}
    
    .content_slide.image_full_left {padding: 2% 2% 2% 1.5%;}
    
    .content_slide.image_full_right {padding: 2% 1.5% 2% 2%;}
    
    .text_box {
        top: 50%;
        height: auto;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .text_box .pix_sub {position: relative; margin-top: 12%;}

    table.image_text_box {margin-top: 3%;}

    @media only screen and (orientation: landscape) and (max-width: 1300px) and (min-height: 800px) and (max-height: 900px) {       /* Kindle | iPad Pro 10.5 */
        .content_slide {font-size: 1.6rem;}
        .content_slide.left {border-image-width: 2rem; padding: 2.5% 2.5% 2.5% 4%;}
        .content_slide.right {border-image-width: 2rem; padding: 2.5% 4% 2.5% 2.5%;}
        .content_slide.content_image {padding: 6% 2%;}
        .content_slide.content_first {padding: 2.5%;}
        .content_slide.image_full_left {padding: 1.5% 1.5% 1.5% 1%;}
        .content_slide.image_full_right {padding: 1.5% 1% 1.5% 1.5%;}
    }

    @media only screen and (orientation: landscape) and (max-width: 1150px) and (min-height: 830px) and (max-height: 900px) {       /* iPad Pro 10.5 */
        .content_slide.left {border-image-width: 2.5rem; padding: 3% 3% 3% 4.5%;}
        .content_slide.right {border-image-width: 2.5rem; padding: 3% 4.5% 3% 3%;}
        .content_slide.content_image {padding: 10% 2%;}
        .content_slide.image_full_left {padding: 1.5% 1.5% 1.5% 1%;}
        .content_slide.image_full_right {padding: 1.5% 1% 1.5% 1.5%;}
    }


   	/* ~~~~~~~~~~~~~ PAGE | Eierkunde ~~~~~~~~~~~~~ */

    table.herkunft {font-size: 1.5rem;}

    table.herkunft td {line-height: 2rem; padding-right: .6rem;}
   
    table.herkunft td.margin_gap {padding-right: 2rem;}


    .page_6 table.herkunft {font-size: 1.7rem; margin: 0 auto 2.5% auto}            /* Ernährungstabellen */

    .page_6 table.herkunft td {line-height: 2.2rem;}

    .page_6 table.herkunft .table_left {padding-right: .5rem;}

    .page_6 table.herkunft .table_right {padding-right: 2rem;}


    .page_7 table.herkunft {font-size: 1.7rem; margin: 0 auto 2.5% auto;}           /* Kochzeiten */

    .page_7 table.herkunft td {line-height: 2.2rem;}

    ul.list_infos_phil li, ul.list_infos_zutaten li, ol.list_infos_rezept li {padding-bottom: 1.5%;}
    
    @media only screen and (orientation: landscape) and (max-width: 1300px) and (min-height: 800px) and (max-height: 900px) {       /* Kindle | iPad Pro 10.5 */
        .page_5 table.herkunft {font-size: 1.4rem;}
        .page_5 table.herkunft td {line-height: 1.6rem;}
        .page_5 table.herkunft thead.page_5 {font-size: 1.9rem; line-height: 2.2rem;}

        .page_6 table.herkunft {font-size: 1.5rem;}
        .page_6 table.herkunft td {line-height: 2rem;}
        .page_6 table.herkunft .table_left {padding-right: 1rem;}
        .page_6 table.herkunft .table_right {padding-right: 3.5rem;}

        .page_7 table.herkunft {font-size: 1.5rem; margin: 0 auto 2.5% auto;}
        .page_7 table.herkunft td {line-height: 2rem;}
    }


   	/* ~~~~~~~~~~~~~ IMPRINT + DSGVO ~~~~~~~~~~~~~- */

    #overlay_1, #overlay_2, #overlay_Eierkunde {background-color: rgba(15, 15, 15, .85);}
    
    .popup_1, .popup_2, #popup_Eierkunde {border-image-width: 2.5rem;}

    @media not all and (min-resolution:.001dpcm) { @media {                                 /* Apple Safari selector */
        .popup_1, .popup_2, #popup_Eierkunde {
            border-image-slice: 64 61 fill;
            border-image-repeat: repeat;
        }

        #popup_Eierkunde {
            border-image-slice: 68 64 fill;
        }
    }}

    #popup_Eierkunde {width: 70%; height: 50%;}

    .content_legal {height: 76%; font-size: 1.6rem;}
    
    @media only screen and (orientation: landscape) and (max-width: 1300px) and (min-height: 800px) and (max-height: 900px) {       /* Kindle | iPad Pro 10.5 */
        .popup_1, .popup_2, #popup_Eierkunde {border-image-width: 2rem;}
        .content_legal {height: 71%; font-size: 1.4rem;}
    }

    @media only screen and (orientation: landscape) and (max-width: 1150px) and (min-height: 830px) and (max-height: 900px) {       /* iPad Pro 10.5 */
        .popup_1, .popup_2, #popup_Eierkunde {border-image-width: 2.5rem;}
        .content_legal {height: 76%; font-size: 1.5rem;}
    }


        /* ~~~~~~~~~~~~~ IMPRINT + DSGVO | typo ~~~~~~~~~~~~~- */
           
    .header_legal h1 {font-size: 3.1rem; padding: 2% 0 1% 0;}
    
    .footer_legal p {font-size: 1.2rem; padding-top: 2%;}
    
    .content_legal h2 {font-size: 2.2rem; line-height: 2.4rem;}
    
    .content_legal h3 {font-size: 1.9rem;}
    
    .content_legal ul {padding: 0 0 1.5% 2.5%;}
    
    .content_legal li {padding: 0 0 1% .5%;}
    
    .content_legal ul.list_text li {padding-bottom: 1.5%}
    
    .content_legal td.legal_front {width: 13%;}
    
    .close {top: 4%; right: 6%; font-size: 4.5rem;}

    @media only screen and (orientation: landscape) and (max-width: 1300px) and (min-height: 800px) and (max-height: 900px) {       /* Kindle | iPad Pro 10.5 */
        .content_legal h2 {font-size: 2rem; line-height: 2.2rem;}
        .content_legal h3 {font-size: 1.8rem;}
        .close {font-size: 3.5rem;}
    }

    @media only screen and (orientation: landscape) and (max-width: 1150px) and (min-height: 830px) and (max-height: 900px) {       /* iPad Pro 10.5 */
        .close {font-size: 4rem;}
    }
}



    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ TABLET | portrait ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    
@media only screen and (orientation: portrait) and (min-width: 700px) and (max-height: 1400px) {

    body {font-size: 200%;}
    

    /* ~~~~~~~~~~~~~ TYPO | FONT ~~~~~~~~~~~~~ */

    body h1 {font-size: 6.5rem; line-height: 6rem;}

    body h2 {font-size: 2.5rem; line-height: 2.7rem; padding-bottom: 2%;}

    body h3, body h4 {font-size: 2.6rem;}

    body h4.sub {position: relative; margin-top: 6%;}

    body p {padding-bottom: 1.5%;}

    .headline_top {margin-top: 0;}

    .headline_text {padding-top: 4%;}

    .gap_top {padding-top: 1.5%;}

    .text_small {font-size: 2.1rem !important;}

    @media only screen and (orientation: portrait) and (min-width: 800px) and (max-width: 900px) and (max-height: 1300px) {     /* Kindle | iPad Pro 10.5 */
        body h1 {font-size: 6.5rem; line-height: 6rem;}
        body h2 {font-size: 2.1rem; line-height: 2.3rem;}
        body h3, body h4 {font-size: 2.5rem;}
        body h4.sub {position: relative; margin-top: 8%;}
        .headline_text {padding-top: 3%;}
        .text_small {font-size: 1.9rem !important;}
    }


    /* ~~~~~~~~~~~~~ GENERAL ~~~~~~~~~~~~~ */

    article {bottom: 4%; height: 80%; padding-top: 4%;}

    footer.all_over {height: 4%; font-size: 1.4rem; padding: 1.5% 2.5% 0;}

    @media only screen and (orientation: portrait) and (min-width: 800px) and (max-width: 900px) and (max-height: 1300px) {     /* Kindle | iPad Pro 10.5 */
        article {bottom: 6%; height: 75%;}
        footer.all_over {height: 6%; font-size: 1.3rem; padding: 3.5% 2.5% 0;}
    }

    @media only screen and (orientation: portrait) and (min-width: 830px) and (max-width: 900px) and (max-height: 1150px) {     /* iPad Pro 10.5 */
        article {bottom: 4%; height: 75%;}
        footer.all_over {height: 4%; padding: 1.5% 2.5% 0;}
    }


    /* ~~~~~~~~~~~~~ FORMFIELD ~~~~~~~~~~~~~ */

    form.origin .input_origin {padding-bottom: .3%;}

    form.origin .input_01 {width: 4.5rem;}

    form.origin .input_02 {width: 5rem;}

    form.origin .input_03 {width: 5.5rem;}

    form.origin .input_04 {width: 9rem;}

    form.origin .input_05 {width: 15rem;}

    @media only screen and (orientation: portrait) and (min-width: 800px) and (max-width: 900px) and (max-height: 1300px) {     /* Kindle | iPad Pro 10.5 */
        form.origin .input_04 {width: 8rem;}
        form.origin .input_05 {width: 14rem;}
    }

    @media only screen and (orientation: portrait) and (min-width: 830px) and (max-width: 900px) and (max-height: 1150px) {     /* iPad Pro 10.5 */
        form.origin .input_04 {width: 8.5rem;}
        form.origin .input_05 {width: 14.5rem;}
    }


    /* ~~~~~~~~~~~~~ BUTTON ~~~~~~~~~~~~~ */

    form.origin .button_wrap {margin-top: 3%;}

    form.origin .button_origin {font-size: 1.3rem;}

    @media only screen and (orientation: portrait) and (min-width: 800px) and (max-width: 900px) and (max-height: 1300px) {     /* Kindle | iPad Pro 10.5 */
        form.origin .button_origin {font-size: 1.2rem;}
        form.origin .button_wrap {margin-top: 4%;}
    }

    @media only screen and (orientation: portrait) and (min-width: 830px) and (max-width: 900px) and (max-height: 1150px) {     /* iPad Pro 10.5 */
        form.origin .button_origin {font-size: 1.3rem;}
        form.origin .button_wrap {margin-top: 3%;}
    }


    /* ~~~~~~~~~~~~~ SLIDER | content ~~~~~~~~~~~~~ */

    .content_slide {float: left; width: 100%; height: 50%; font-size: 2.1rem;}

    .content_slide.left {
        -webkit-border-image: url(../img/stamp_mobile.png) fill 65 round;
        -moz-border-image: url(../img/stamp_mobile.png) fill 65 round;
        -ms-border-image: url(../img/stamp_mobile.png) fill 65 round;    
        -o-border-image: url(../img/stamp_mobile.png) fill 65 round;
        border-image: url(../img/stamp_mobile.png)  fill 65 round;
        border-image-width: 2.5rem;
        padding: 0 10%;
    }

    .content_slide.right {
        -webkit-border-image: url(../img/stamp_mobile.png) fill 65 round;
        -moz-border-image: url(../img/stamp_mobile.png) fill 65 round;
        -ms-border-image: url(../img/stamp_mobile.png) fill 65 round;    
        -o-border-image: url(../img/stamp_mobile.png) fill 65 round;
        border-image: url(../img/stamp_mobile.png)  fill 65 round;
        border-image-width: 2.5rem;
        padding: 0 10%;
    }

    @media not all and (min-resolution:.001dpcm) { @media {                                 /* Apple Safari selector */
        .content_slide.right {
            border-image-slice: 63 64 fill;
            border-image-repeat: repeat;
        }

        .content_slide.left {
            border-image-slice: 63 64 fill;
            border-image-repeat: repeat;
        }
    }}

    .content_slide.content_first {padding: 4%;}

    .content_slide.content_image {padding: 4% 12%;}

    .content_slide.image_full_left, .content_slide.image_full_right {padding: 2.5% 2%;}

    .text_box {
        top: 50%;
        height: auto;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .text_box .pix_sub {position: relative; margin-top: 3.5%;}

    table.image_text_box td.box_left {padding-right: 1rem;}

    table.image_text_box {margin-top: 2%;}

    @media only screen and (orientation: portrait) and (min-width: 800px) and (max-width: 900px) and (max-height: 1300px) {     /* Kindle | iPad Pro 10.5*/
        .content_slide {font-size: 1.9rem;}
        .content_slide.left {padding: 0 8%; border-image-width: 2rem;}
        .content_slide.right {padding: 0 8%; border-image-width: 2rem;}
        .content_slide.image_full_left, .content_slide.image_full_right {padding: 2.5% 2%; }
        .content_slide.content_image {padding: 4% 10%;}
        .text_box .pix_sub {margin-top: 5%;}
    }

    @media only screen and (orientation: portrait) and (min-width: 830px) and (max-width: 900px) and (max-height: 1150px) {     /* iPad Pro 10.5 */
        .content_slide {font-size: 1.95rem;}
        .content_slide.left {border-image-width: 2.5rem;}
        .content_slide.right {border-image-width: 2.5rem;}
        .content_slide.content_image {padding: 4% 14%;}
        .text_box .pix_sub {margin-top: 3.5%;}
    }


    /* ~~~~~~~~~~~~~ PAGE | Index ~~~~~~~~~~~~~ */

    .text_welcome {top: 45%; padding: 0 9%;}


    /* ~~~~~~~~~~~~~ PAGE | Eierkunde ~~~~~~~~~~~~~ */

    table.herkunft {font-size: 2.1rem;}

    table.herkunft td {line-height: 2.6rem; padding-right: .6rem;}

    table.herkunft td.margin_gap {padding-right: 5rem;}


    .page_6 table.herkunft {font-size: 2.1rem;}                                         /* Ernährungstabellen */

    .page_6 table.herkunft td {line-height: 2.6rem;}

    .page_6 table.herkunft .table_left {padding-right: 1.5rem;}

    .page_6 table.herkunft .table_right {padding-right: 5rem;}


    .page_7 table.herkunft {font-size: 2rem;}                                           /* Kochzeiten */

    .page_7 table.herkunft td {line-height: 2.5rem;}

    ul.list_infos_phil li, ul.list_infos_zutaten li, ol.list_infos_rezept li {padding-bottom: 1.5%;}

    @media only screen and (orientation: portrait) and (min-width: 800px) and (max-width: 900px) and (max-height: 1300px) {     /* Kindle | iPad Pro 10.5*/
        table.herkunft {font-size: 1.8rem;}
        table.herkunft td {line-height: 2.3rem;}
        table.herkunft td.margin_gap {padding-right: 4rem;}

        .page_5 table.herkunft {font-size: 1.7rem;}
        .page_5 table.herkunft td {line-height: 1.9rem;}
        .page_5 table.herkunft thead.page_5 {font-size: 2.1rem; line-height: 2.3rem;}

        .page_6 table.herkunft {font-size: 1.9rem;}
        .page_6 table.herkunft td {line-height: 2.4rem;}

        .page_7 table.herkunft {font-size: 1.8rem;}
        .page_7 table.herkunft td {line-height: 2.3rem;}
    }

    @media only screen and (orientation: portrait) and (min-width: 830px) and (max-width: 900px) and (max-height: 1150px) {     /* iPad Pro 10.5 */
        table.herkunft {font-size: 1.95rem;}
        table.herkunft td {line-height: 2.45rem;}
        table.herkunft td.margin_gap {padding-right: 6rem;}
    }


    /* ~~~~~~~~~~~~~ DATA ~~~~~~~~~~~~~ */

    #overlay_1, #overlay_2, #overlay_Eierkunde {background-color: rgba(15, 15, 15, .85);}

    #popup_Eierkunde {width: 80%; height: 40%; border-image-width: 2.5rem;}


    /* ~~~~~~~~~~~~~ IMPRINT | DSGVO ~~~~~~~~~~~~~ */
       
    .popup_1, .popup_2 {width: 80%; height: 85%; border-image-width: 2.5rem; padding: 0 4%;}

    @media not all and (min-resolution:.001dpcm) { @media {                                 /* Apple Safari selector */
        .popup_1, .popup_2, #popup_Eierkunde {
            border-image-slice: 64 61 fill;
            border-image-repeat: repeat;
        }

        #popup_Eierkunde {
            border-image-slice: 68 64 fill;
        }
    }}

    .content_legal {height: 79%; font-size: 1.7rem; padding: 0 4% 0 2%;}

    .header_legal {padding-bottom: 4%;}

    .footer_legal {padding-top: 4%;}

    @media only screen and (orientation: portrait) and (min-width: 800px) and (max-width: 900px) and (max-height: 1300px) {     /* Kindle | iPad Pro 10.5*/
        .popup_1, .popup_2, #popup_Eierkunde {border-image-width: 2rem;}
        .content_legal {height: 81.5%; font-size: 1.5rem;}
    }

    @media only screen and (orientation: portrait) and (min-width: 830px) and (max-width: 900px) and (max-height: 1150px) {     /* iPad Pro 10.5 */
        .popup_1, .popup_2, #popup_Eierkunde {border-image-width: 2.5rem;}
        .content_legal {height: 80.5%;}
    }


    /* ~~~~~~~~~~~~~ IMPRINT + DSGVO | typo ~~~~~~~~~~~~~- */

    .header_legal h1 {font-size: 3.1rem; line-height: 6rem; padding: 2.5% 0 .5% 0;}

    .footer_legal p {font-size: 1.3rem; padding-top: 3.5%;}

    .content_legal h2 {font-size: 2.2rem; line-height: 2.4rem;}

    .content_legal h3 {font-size: 1.9rem;}

    .content_legal td.legal_front {width: 15%;}

    .content_legal ul {padding: 0 0 1.5% 3%;}

    .close {top: 2%; right: 4%; font-size: 4rem;}

    @media only screen and (orientation: portrait) and (min-width: 800px) and (max-width: 900px) and (max-height: 1300px) {     /* Kindle | iPad Pro 10.5*/
        .header_legal h1 {font-size: 2.5rem;}
        .footer_legal p {font-size: 1.2rem; padding-top: 3%;}
        .content_legal h2 {font-size: 1.85rem; line-height: 2.05rem;}
        .content_legal h3 {font-size: 1.8rem;}
        .close {font-size: 3.5rem;}
    }

    @media only screen and (orientation: portrait) and (min-width: 830px) and (max-width: 900px) and (max-height: 1150px) {     /* iPad Pro 10.5 */
        .header_legal h1 {font-size: 3rem;}
        .footer_legal p {font-size: 1.25rem; padding-top: 2%;}
        .close {font-size: 4rem;}
    }
}



    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PHONE | landscape ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    
@media only screen and (orientation: landscape) and (max-width: 950px) and (max-height: 450px) {
    
    body {font-size: 200%;}


    /* ~~~~~~~~~~~~~ TYPO | FONT ~~~~~~~~~~~~~ */

    body h2 {font-size: 2rem; line-height: 2.2rem; padding-bottom: 2%;}

    body h4.sub {position: relative; margin-top: 8%;}

    body p {padding-bottom: 1.5%;}

    .headline_top {margin-top: 0;}

    .headline_text {padding-top: 2%;}

    .gap_top {padding-top: 1.5%;}

    .text_small {font-size: 1.5rem !important;}

    @media only screen and (orientation: landscape) and (max-width: 950px) and (min-height: 400px) {                            /* iPhone 6|7|8| plus */
        body h2 {font-size: 2.1rem; line-height: 2.3rem; padding-bottom: 3%;}
        body h4.sub {margin-top: 10%;}
        .text_small {font-size: 1.55rem !important;}
    }

    /* ~~~~~~~~~~~~~ GENERAL ~~~~~~~~~~~~~ */

    article {bottom: 7%; height: 71%; padding-top: 3%;}

    footer.all_over {height: 7%; font-size: 1.4rem; padding: .8% 1.5% 0;}

    @media only screen and (orientation: landscape) and (max-width: 950px) and (min-height: 400px) {                            /* iPhone 6|7|8| plus */
        article {height: 67%;}
        footer.all_over {font-size: 1.45rem; padding: 1.1% 2% 0;}
    }


    /* ~~~~~~~~~~~~~ FORMFIELD ~~~~~~~~~~~~~ */

    form.origin .input_01 {width: 5rem;}

    form.origin .input_02 {width: 4rem;}

    form.origin .input_03 {width: 6rem;}

    form.origin .input_04 {width: 8.5rem;}

    form.origin .input_05 {width: 13rem;}


    /* ~~~~~~~~~~~~~ SLIDER | content ~~~~~~~~~~~~~ */

    .content_slide {font-size: 1.6rem;}

    .content_slide.left {border-image-width: 2.5rem; padding: 0 2.5% 0 4%;}

    .content_slide.right {border-image-width: 2.5rem; padding: 0 4% 0 2.5%;}

    @media not all and (min-resolution:.001dpcm) { @media {                                 /* Apple Safari selector */
        .content_slide.right {
            border-image-slice: 63 64 fill;
            border-image-repeat: repeat;
        }

        .content_slide.left {
            border-image-slice: 63 64 fill;
            border-image-repeat: repeat;
        }
    }}

    .content_slide.content_first, .content_slide.content_image {padding: 3.5% 3%;}

    .content_slide.image_full_left {padding: 1.5% 1.5% 1.5% 1%;}

    .content_slide.image_full_right {padding: 1.5% 1% 1.5% 1.5%;}

    .text_box {
        top: 50%;
        height: auto;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .text_box .pix_sub {position: relative; margin-top: 5%;}

    table.image_text_box {margin-top: 2%;}

    @media only screen and (orientation: landscape) and (max-width: 950px) and (min-height: 400px) {                            /* iPhone 6|7|8| plus */
        .content_slide {font-size: 1.65rem;}
        .content_slide.left {border-image-width: 2.5rem; padding: 2% 3% 2% 4.5%;}
        .content_slide.right {border-image-width: 2.5rem; padding: 2% 4.5% 2% 3%;}
        .content_slide.content_first, .content_slide.content_image {padding: 5% 3%;}
        .content_slide.image_full_left {padding: 1.5% 1.5% 1.5% 1%;}
        .content_slide.image_full_right {padding: 1.5% 1% 1.5% 1.5%;}
    }

    @media only screen and (orientation: landscape) and (max-width: 670px) and (min-height: 375px) {                            /* iPhone 6|7|8 */
        .content_slide.content_first, .content_slide.content_image {padding: 6% 3%;}
    }

    @media only screen and (orientation: landscape) and (min-width: 800px) and (max-width: 820px) and (max-height: 375px) {     /* iPhone X|XS */
        .content_slide.content_first, .content_slide.content_image {padding: 2.5% 3%;}
    }


    /* ~~~~~~~~~~~~~ PAGE | Unternehmen ~~~~~~~~~~~~~ */

    ul.list_infos_phil {margin-left: 3%;}


    /* ~~~~~~~~~~~~~ PAGE | Eierkunde ~~~~~~~~~~~~~ */

    table.herkunft {font-size: 1.5rem;}

    table.herkunft td {line-height: 2rem; padding-right: .6rem;}
   
    table.herkunft td.margin_gap {padding-right: 2rem;}

    ul.list_infos_phil li, ul.list_infos_zutaten li, ol.list_infos_rezept li {padding-bottom: 1.5%;}

    @media only screen and (orientation: landscape) and (max-width: 750px) and (max-height: 370px) {                            /* PHONE small screen */
        li.icon-bulb_yellow.mobile_small {display: none;}
    }


    /* ~~~~~~~~~~~~~ DATA ~~~~~~~~~~~~~ */

    #overlay_1, #overlay_2, #overlay_Eierkunde {background-color: rgba(15, 15, 15, .85);}

    #popup_Eierkunde {width: 70%; height: 60%; border-image-width: 2.5rem;}


    /* ~~~~~~~~~~~~~ IMPRINT | DSGVO ~~~~~~~~~~~~~- */
       
    .popup_1, .popup_2, #popup_Eierkunde {border-image-width: 2.5rem;}

    @media not all and (min-resolution:.001dpcm) { @media {                                 /* Apple Safari selector */
        .popup_1, .popup_2, #popup_Eierkunde {
            border-image-slice: 64 61 fill;
            border-image-repeat: repeat;
        }

        #popup_Eierkunde {
            border-image-slice: 68 64 fill;
        }
    }}
    
    .content_legal {height: 61%; font-size: 1.4rem;}
    
    @media only screen and (orientation: landscape) and (max-width: 670px) and (min-height: 375px) {                            /* iPhone 6|7|8 */
        .content_legal {height: 67%;}
    }

    @media only screen and (orientation: landscape) and (max-width: 950px) and (min-height: 400px) {                            /* iPhone 6|7|8| plus */
        .content_legal {height: 68%;}
    }

    @media only screen and (orientation: landscape) and (max-width: 750px) and (max-height: 370px) {                            /* PHONE small screen */
        .content_legal {height: 63%;}
    }


    /* ~~~~~~~~~~~~~ IMPRINT + DSGVO | typo ~~~~~~~~~~~~~- */

    .header_legal h1 {font-size: 2.9rem; padding: 2.5% 0 .5% 0;}

    .footer_legal p {font-size: 1.1rem; padding-top: 2%;}

    .content_legal h2 {font-size: 2rem; line-height: 2.2rem;}

    .content_legal h3 {font-size: 1.7rem;}

    .content_legal td.legal_front {width: 12%;}

    .content_legal ul {padding: 0 0 1.5% 2.5%;}

    .close {top: 5%; right: 6%; font-size: 5rem;}
}



    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PHONE | portrait ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media only screen and (orientation: portrait) and (max-width: 450px) and (max-height: 950px) {

    body {font-size: 200%;}


    /* ~~~~~~~~~~~~~ TYPO | FONT ~~~~~~~~~~~~~ */

    body h1 {font-size: 5.6rem; line-height: 5.1rem;}

    body h2 {font-size: 2.1rem; line-height: 2.3rem; padding-bottom: 2.5%;}

    body h3, body h4 {font-size: 2.2rem;}

    body h4.sub {position: relative; margin-top: 10%;}

    body p {padding-bottom: 1.5%;}

    .headline_top {margin-top: 0;}

    .headline_text {padding-top: 4%;}

    .gap_top {padding-top: 1.5%;}

    .text_small {font-size: 1.8rem !important;}

    @media only screen and (orientation: portrait) and (min-width: 375px) and (max-height: 950px) {                            /* iPhone 6|7|8 */
        body h1 {font-size: 6rem; line-height: 5.5rem;}
        body h2 {font-size: 2.3rem; line-height: 2.5rem;}
        body h3, body h4 {font-size: 2.4rem;}
    }

    @media only screen and (orientation: portrait) and (max-width: 375px) and (min-height: 800px) {                            /* iPhone X|XS */
        body h1 {font-size: 5.4rem; line-height: 4.9rem;}
        body h2 {font-size: 2rem; line-height: 2.2rem; padding-bottom: 3%;}
        body h3, body h4 {font-size: 2.1rem;}
        body p {padding-bottom: 2%;}
        .headline_text {padding-top: 4.5%;}
        .gap_top {padding-top: 2%;}
        .text_small {font-size: 1.65rem !important;}
    }


    /* ~~~~~~~~~~~~~ GENERAL ~~~~~~~~~~~~~ */

    article {bottom: 4%; height: 80%; padding-top: 6%;}

    footer.all_over {height: 4.5%; font-size: 1.5rem; padding: 3% 2.5% 0;}


    /* ~~~~~~~~~~~~~ FORMFIELD ~~~~~~~~~~~~~ */

    form.origin .input_01 {width: 5rem;}

    form.origin .input_02 {width: 4rem;}

    form.origin .input_03 {width: 6rem;}

    form.origin .input_04 {width: 8.5rem;}

    form.origin .input_05 {width: 14rem;}


    /* ~~~~~~~~~~~~~ BUTTON ~~~~~~~~~~~~~ */

    form.origin .button_origin {width: 30%; font-size: 1.2rem; padding: 2% 0;}


    /* ~~~~~~~~~~~~~ SLIDER | content ~~~~~~~~~~~~~ */

    .content_slide {float: left; width: 100%; height: 50%; font-size: 1.8rem;}

    .content_slide.left {
        -webkit-border-image: url(../img/stamp_mobile.png) fill 65 round;
        -moz-border-image: url(../img/stamp_mobile.png) fill 65 round;
        -ms-border-image: url(../img/stamp_mobile.png) fill 65 round;
        -o-border-image: url(../img/stamp_mobile.png) fill 65 round;
        border-image: url(../img/stamp_mobile.png) fill 65 round;
        border-image-width: 2.5rem;
        padding: 0 6%;
    }

    .content_slide.right {
        -webkit-border-image: url(../img/stamp_mobile.png) fill 65 round;
        -moz-border-image: url(../img/stamp_mobile.png) fill 65 round;
        -ms-border-image: url(../img/stamp_mobile.png) fill 65 round;    
        -o-border-image: url(../img/stamp_mobile.png) fill 65 round;
        border-image: url(../img/stamp_mobile.png)  fill 65 round;
        border-image-width: 2.5rem;
        padding: 0 6%;
    }

    @media not all and (min-resolution:.001dpcm) { @media {                                 /* Apple Safari selector */
        .content_slide.right {
            border-image-slice: 63 64 fill;
            border-image-repeat: repeat;
        }

        .content_slide.left {
            border-image-slice: 63 64 fill;
            border-image-repeat: repeat;
        }
    }}

    .content_slide.content_first {padding: 4%;}

    .content_slide.content_image {padding: 10% 0;}

    .content_slide.image_full_left, .content_slide.image_full_right {padding: 3.5% 2.5%;}

    .text_box {
        top: 50%;
        height: auto;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .text_box .pix_sub {position: relative; margin-top: 8%;}

    table.image_text_box {margin-top: 2%;}

    @media only screen and (orientation: portrait) and (min-width: 375px) and (max-height: 950px) {                            /* iPhone 6|7|8 */
        .content_slide.left, .content_slide.right {border-image-width: 3rem;}
/*        .content_slide.content_image {padding: 5% 0%;} */
    }

    @media only screen and (orientation: portrait) and (max-width: 375px) and (min-height: 800px) {                            /* iPhone X|XS */
        .content_slide {font-size: 1.65rem;}
        .content_slide.left, .content_slide.right {border-image-width: 2.5rem;}
/*        .content_slide.content_image {padding: 10% 0%;} */
    }


    /* ~~~~~~~~~~~~~ PAGE | Index ~~~~~~~~~~~~~ */

    .text_welcome {top: 45%; font-size: 5.5rem; line-height: 6.5rem; padding: 0 10%;}


    /* ~~~~~~~~~~~~~ PAGE | Eierkunde ~~~~~~~~~~~~~ */

    table.herkunft {font-size: 1.5rem;}

    table.herkunft td {line-height: 2.1rem; padding-right: .5rem;}

    table.herkunft td.margin_gap {padding-right: 3rem;}

    ul.list_infos_phil li, ul.list_infos_zutaten li, ol.list_infos_rezept li {padding-bottom: 1.5%;}

    @media only screen and (orientation: portrait) and (max-width: 375px) and (min-height: 800px) {                            /* iPhone X|XS */
        table.herkunft {font-size: 1.4rem;}
        table.herkunft td {line-height: 2rem;}
    }


    /* ~~~~~~~~~~~~~ DATA ~~~~~~~~~~~~~ */

    #overlay_1, #overlay_2, #overlay_Eierkunde {background-color: rgba(15, 15, 15, .85);}

    #popup_Eierkunde {width: 80%; height: 40%; border-image-width: 2.5rem;}


    /* ~~~~~~~~~~~~~ IMPRINT | DSGVO ~~~~~~~~~~~~~- */
       
    #overlay_1, #overlay_2, #overlay_Eierkunde {background-color: rgba(15, 15, 15, .85);}

    .popup_1, .popup_2 {width: 90%; height: 80%; border-image-width: 2.5rem; padding: 0 3.5%;}

    @media not all and (min-resolution:.001dpcm) { @media {                                 /* Apple Safari selector */
        .popup_1, .popup_2, #popup_Eierkunde {
            border-image-slice: 64 61 fill;
            border-image-repeat: repeat;
        }

        #popup_Eierkunde {
            border-image-slice: 68 64 fill;
        }
    }}
    
    .content_legal {height: 82%; font-size: 1.6rem;}
    
    .header_legal {padding-bottom: 4%;}

    .footer_legal {padding-top: 4%;}

    @media only screen and (orientation: portrait) and (min-width: 375px) and (max-height: 950px) {                            /* iPhone 6|7|8 */
        .popup_1, .popup_2, #popup_Eierkunde {border-image-width: 3rem;}
        .content_legal {height: 80%;}
    }

    @media only screen and (orientation: portrait) and (max-width: 375px) and (min-height: 800px) {                            /* iPhone X|XS */
        .content_legal {height: 82%;}
    }


    /* ~~~~~~~~~~~~~ IMPRINT + DSGVO | typo ~~~~~~~~~~~~~- */

    .header_legal h1 {font-size: 2.5rem; padding: 2.5% 0 .5% 0;}

    .footer_legal p {font-size: 1.3rem; padding-top: 3%;}

    .content_legal h2 {font-size: 2.4rem; line-height: 2.6rem;}

    .content_legal h3 {font-size: 1.9rem;}

    .content_legal td.legal_front {width: 20%;}

    .content_legal ul {padding: 0 0 1.5% 4%;}

    .close {top: 4%; right: 6%; font-size: 4rem;}
}


	/* ~~~~~~~~~~~~~ FALLBACK ~~~~~~~~~~~~~ */

/*

@media screen and (orientation: portrait) {
    .width-vmax {width: 100vh;}
    .width-vmin {width: 100vw;}
    .height-vmax {height: 100vh;}
    .height-vmin {height: 100vw;}
}

@media screen and (orientation: landscape) {
    .width-vmax {width: 100vw;}
    .width-vmin {width: 100vh;}
    .height-vmax {height: 100vw;}
    .height-vmin {height: 100vh;}
}

*/