/*
Theme Name: Umathum
Text Domain: umathum
Version: 1.3.3
*/

@keyframes menu-animation {
    from {-webkit-transform:scale(0.5); transform:scale(0.5) translateY(-500px); opacity: 0; transition:ease-out 0.3s; padding-top:30px;}
    to {-webkit-transform:scale(1); transform:scale(1) translateY(0px); opacity: 1; padding-top:0px;}
    }
    /* ~~~ @keyframes start-ani {
    0% {transform:scale(1); transition:ease-out 3s; }
    40% {transform:scale(1); transition:ease-out 3s; }
    100% {transform:scale(1.1); }
    }~~~ */

    @media all {


    * {margin:0; padding:0; border:0; box-sizing:border-box;}
    img {border:0; width:100%; height:auto;}
    html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, main
    {font:inherit; vertical-align:baseline;}
    /* HTML5 display-role reset for older browsers */
    article, address, aside, details, main, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
    ol, ul {list-style:none;}
    blockquote, q {quotes:none;}
    blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
    table {border-collapse:collapse; border-spacing: 0;}

    html, body {width:100%; height:100%; hyphens:none;}

    body {background:#fff; font: normal 1.0em/1.5em 'Open Sans', sans-serif, Arial, Verdana, Helvetic; font-weight:400; color:#000;}

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Allgemein ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /* ~~~ Schrift Oswald ~~~ */
    h1, h2, h3, #menu ul li a, #menu ul li a:link, .kreis .text h2, .kreis .text p, .kreis.topnews .text h1, #warenkorb a .menge, #warenkorb .menge, .slogan, #footer-menu li a, #footer-menu li a:link, .fancybox-caption, .grosslage-text, .bannerbild h2, .beschreibung .zusatzlink, .beschreibung .preis, .produkt .beschreibung .angaben, .anzahl .plus, .anzahl .menge, .anzahl .minus, .produkt .jahrgang, input.zahl, #zusatz-menu ul li a, #back-link a, .gutschein-wert-anzeige {font-family: 'Oswald', serif, Arial, Verdana, sans-serif; font-weight:300; text-transform:uppercase; letter-spacing:0.05em;}
    #menu ul li.current-menu-parent a, #menu ul li.current-menu-parent a:link, #warenkorb a .menge, #warenkorb .menge, .fancybox-caption, .produkt .jahrgang, .produkt .jahrgang h2, .beschreibung .preis, .gutschein-wert-anzeige {font-weight:400;}


    /* ~~~ Schrift Open Sans ~~~ */
    #menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link {font-family:'Open Sans'; }

    h1 {font-size:220%; line-height:130%; margin:20px 0 10px 0;}
    h2, h3 {font-size:140%; line-height:120%; margin:7px 0;}
    h1 {text-align:center;}

    p {margin-bottom:7px;}

    strong, b {font-weight:700;}
    em {font-style:italic;}

    .blocksatz {text-align:justify;}
    .zentriert {text-align:center; }
    sup {vertical-align: 20%; font-size:80%}

    /* ~~~ "Schriftfarbe GOLD" ~~~*/
    a, a:link, a:visited, #footer-main-menu li a, .alsDetail ul.linkliste li::before, #warenkorb .menge, #footer-menu a, #footer-menu a:link, h1, h2, h3, .produkt.auswahl-box h2, .anzahl .plus, .anzahl .menge, .anzahl .minus, .produkt .jahrgang, input.zahl, .gutschein-wert-anzeige {color:#9c8247; }

    /* ~~~ "Links" ~~~*/
    a, a:link, a:visited {text-decoration:none;}
    a:hover, a:focus, a:active {color:#000; text-decoration:underline; }

    /* ~~~ Zusammengefasste allgemeine Definitionen   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /* ~~~ FLEX-Boxen  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* ~~~ row nowrap ~~~ */
    header, #menu-cont, #menu ul, #icon-wrapper, #menu-smart #but-cont, .logo-umathum, .produkt .beschreibung .auswahl, .auswahl .anzahl, .anzahl .plus, .anzahl .menge, .anzahl .minus, .in-warenkorb, .produktfoto {display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap;}
    /* ~~~ row wrap ~~~ */
    .listen-cont, .galerie-cont, #footer-menu ul, #footer-logos, .event, #quickbut-cont, .quickbut, #menu ul, #footer-wrapper, .logos-fremd, #footer-menu ul, #pfeil-top, .jahrgang-wrapper, .produkt, .jahrgang-wrapper .jahrgang {display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; }
    /* ~~~ column ~~~ */
    .jahrgang-wrapper, .jahrgang ul {display:-webkit-flex; display:flex; -webkit-flex-flow:column; flex-flow:column; }
    /* ~~~ justify-content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~~ flex-start ~~~ */
    .xxxx {-webkit-justify-content:flex-start; justify-content:flex-start; }
    /* ~~~ flex-end ~~~ */
    #pfeil-nach-oben, #icon-wrapper, .jahrgang-wrapper, .jahrgang-wrapper .jahrgang {-webkit-justify-content:flex-end; justify-content:flex-end; }
    /* ~~~ center ~~~ */
    header, #menu-cont, #menu-smart #but-cont, #footer-menu ul, #footer-logos, .quickbut, #menu ul, .logo-umathum, .logos-fremd, #footer-wrapper, #footer-menu ul, #pfeil-top, .listen-cont, .anzahl .plus, .anzahl .menge, .anzahl .minus, .in-warenkorb, .produktfoto, .galerie-cont {-webkit-justify-content:center; justify-content:center; }
    /* ~~~ space-between ~~~ */
    #quickbut-cont {-webkit-justify-content:space-between; justify-content:space-between; }
    /* ~~~ space-evenly ~~~ */
    .xxxx {-webkit-justify-content:space-evenly; justify-content:space-evenly; }
    /* ~~~ align-items  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~~ flex-start ~~~ */
    .xxx {-webkit-align-items:flex-start; align-items:flex-start; }
    /* ~~~ flex-end ~~~ */
    #icon-wrapper, header {-webkit-align-items:flex-end; align-items:flex-end; }
    /* ~~~ flex-center ~~~ */
    #menu-cont, #menu-smart #but-cont, #icon-wrapper, #pfeil-top, .anzahl .plus, .anzahl .menge, .anzahl .minus, .in-warenkorb {-webkit-align-items:center; align-items:center; }
    /* ~~~ strech ~~~ */
    .xxx {-webkit-align-items:stretch; align-items:stretch; }

    /* ~~~ Breite + Position + Eigenschaften ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* ~~~ Breite max 1240px ~~~*/
    .xxx {max-width:1240px; margin:0 auto;}
    /* ~~~ Breite 100% ~~~*/
    header, #menu-cont, main, #menu ul li, #content-wrapper, #content, .bannerbild, footer-wrapper, #footer-menu, #menu, #menu ul, #menu ul li ul, #menu ul li ul li, .beitrag .bild.ganze-breite, hr, #quickbut-cont, .form-field table, .flex-control-nav, .buorg {width:100%;}
    /* ~~~ Position "relative" ~~~*/
    header, #header-mitte, #logo, #menu-smart #but-cont, #menu-cont, #content, #menu ul li, #menu ul li ul, #content-wrapper, .bannerbild, .auswahl-box, .beitrag, .produkt.auswahl-box figure, .beitrag .bild, .beitrag .bild figure, .alsListe, .quickbut, footer {position:relative;}
    /* ~~~ Position "absolute" ~~~*/
    #logo a, #logo a:link, #icon-wrapper, #search-toggle a, #search-toggle a:link, #search-field, #warenkorb a, #warenkorb a:link, #warenkorb .menge, #sprachwahl a, #sprachwahl a:link, #menu-smart,#menu-smart .but, #menu-smart .but span.menu1, #menu-smart .but span.menu2, #menu-smart .but span.menu3, #menu, p.mehrlink a, p.mehrlink a:link, .bannerbild h2 {position:absolute;}
    /* ~~~ "overflow:hidden" ~~~*/
    #logo, main, #content-wrapper, .bannerbild, .bannerbild li, .auswahl-box, .produkt.auswahl-box figure, .alsDetail, .bodydiv, .alsListe, .quickbut {overflow:hidden;}
    /* ~~~ "display:block" ~~~*/
    #menu ul li a, #menu ul li a:link, #menu ul li.akt ul, #menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link, #menu-smart, #menu-smart .but span.menu1, #menu-smart .but span.menu2, #menu-smart .but span.menu3, p.mehrlink a, p.mehrlink a:link, #warenkorb a, #warenkorb a:link, #sprachwahl a, #sprachwahl a:link {display:block;}
    /* ~~~ "text-decoration:none" ~~~*/
    #menu ul li a, #menu ul li a:link {text-decoration:none;}
    /* ~~~ "text-transform:none" ~~~*/
    #menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link {text-transform:none;}
    /* ~~~ "transition:all 0.5s ease" ~~~*/
    #search-toggle a, #search-toggle a:link, #search-toggle a:focus, #search-toggle a:hover, #pfeil-nach-oben a, #pfeil-nach-oben a:link, #pfeil-nach-oben a:hover, #pfeil-nach-oben a:focus, #menu-smart #but-cont  {transition:all 0.5s ease;}
    /* ~~~ "white-space:nowrap" ~~~*/
    .umbruch, #menu ul li a, #menu ul li a:link {white-space:nowrap;}
    /* ~~~ "cursor:pointer" ~~~*/
    .searchbut, #menu ul li a:hover, #menu ul li a:focus, #menu ul li.akt a, #mobilp-menu ul li.akt a:hover, #menu ul li.akt a:focus, #menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link, .kreis.news p.mehrlink a, .kreis p.mehrlink a {cursor:pointer;}


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /* ~~~~~~~~~~~~ Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    header {height:70px; z-index:70; margin:0; padding:0; background:#fff;}
        #header-mitte {width:1240px; margin:0 auto;}

    /* ~~~ Logo-NEU
    #logo {position:absolute; left:7%; top:2px; width:177px; height:76px; z-index:1000; }
        #logo figure {width:100%; }
        #logo a, #logo a:link {width:100%; height:100%; display:block;}
        #logo a:focus, #logo a:hover {}~~~~~~~~~~~~~~~~~ */
    /* ~~~ Logo-OLD ~~~~~~~~~~~~~~~~~ */
    #logo {position:absolute; left:7%; top:2px; width:177px; height:76px; z-index:1000;}
        #logo figure a, #logo figure a:link {width:100%; height:100%; z-index:1000; background:url(./assets/images/logo-schrift-umathum.svg) 0 0 no-repeat; background-size:contain; transition:all 0.5s ease; display:block;}
        #logo figure a:focus, #logo figure a:hover {background:url(./assets/images/logo-schrift-umathumr.svg) 0 0 no-repeat; background-size:contain; transition:all 0.5s ease;}

    /* ~~~ Lupe + Warenkorb ~~~ */
    #icon-wrapper {position:absolute; top:0; right:7%; width:auto; height:70px; z-index:50;}
        #search-toggle, #warenkorb, #sprachwahl {position:relative; width:60px; height:60px;}
    /* ~~~ Button-Suche-Einblender~~~ */
        #search-toggle a, #search-toggle a:link {width:50px; height:50px; background:url(./assets/images/icon-lupe.svg) 0 0 no-repeat; background-size:cover;}
        #search-toggle a:focus, #search-toggle a:hover {background:url(./assets/images/icon-luper.svg) 0 0 no-repeat; background-size:cover;}
        .searchbut {height:auto; vertical-align:middle;}
        /* ~~~ eingeblendetes Suchefeld~~~ */
        #search-field {display:none; right:7%; top:80px; z-index:50; width:320px; height:auto; padding:30px 10px 30px 30px; background:rgba(255,255,255,0.90); border:1px solid #9c8247;}
            #suchediv {width:320px;}
            #suchstr, #volltextsuche {display:inline-block; width:200px; height:35px; color:#000; font-size:90%; padding:0 5px; vertical-align:middle; border:1px solid #bbb; }



            #gobutton, #suchbutton {width:40px; margin-left:10px; padding:0; border:none; box-shadow:none; vertical-align:top; background:none; margin: 0px;}
            #suchbutton {margin-top:10px;}
            #volltextsuche {margin:10px 0 0 7px; font-size:100%;}

    /* ~~~ Button-Warenkorb~~~ */
        #warenkorb a, #warenkorb a:link {width:50px; height:50px; z-index:50; background:url(./assets/images/icon-warenkorb.svg) 0 0 no-repeat; background-size:cover; transition:all 0.5s ease; }
        #warenkorb a:focus, #warenkorb a:hover {background:url(./assets/images/icon-warenkorbr.svg) 0 0 no-repeat; background-size:cover; transition:all 0.5s ease; }
        #warenkorb .menge {width:100%; height:auto; text-align:center; font-size:130%; top:17px; left:-5px; z-index:40; transition:all 0.5s ease; }
        #warenkorb:hover .menge, #warenkorb:focus .menge {color:#000; text-decoration:none; transition:all 0.5s ease;}

    /* ~~~ Button-Spracheauswahl~~~ */
        /*#sprachwahl a, #sprachwahl a:link {width:50px; height:50px; background:url(./assets/images/icon-sprachwahl.svg) 0 0 no-repeat; background-size:cover; transition:all 0.5s ease; right:7px;}
        #sprachwahl a:focus, #sprachwahl a:hover {background:url(./assets/images/icon-sprachwahlr.svg) 0 0 no-repeat; background-size:cover; transition:all 0.5s ease;}*/
        #sprachwahl a.language-link.is-active{
            display: none;
        }
        #sprachwahl a.language-link{
            font-size: 0px;
        }
        #sprachwahl .de a.language-link{width:50px; height:50px; background:url(./assets/images/icon-sprachwahlr.svg) 0 0 no-repeat; background-size:cover; transition:all 0.5s ease; right:7px;}
        #sprachwahl .en a.language-link{width:50px; height:50px; background:url(./assets/images/icon-sprachwahl.svg) 0 0 no-repeat; background-size:cover; transition:all 0.5s ease; right:7px;}
        /*#sprachwahl a.language-link {width:50px; height:50px;  transition:all 0.5s ease;}
        #sprachwahl .en a.language-link{right:7px;}*/

    /* ~~~~~~~~~~~~ MENU ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /* ~~~ Menu Container ~~~~~~ */
    #menu-cont {height:auto; margin:0 auto; }
    /* ~~~ Hamburger ~~~ */
    #menu-smart {z-index:1000; width:auto; top:5px; right:50%; margin-right:-30px;}
    #menu-smart #but-cont a, #menu-smart #but-cont a:link {z-index:49000; width:60px; height:60px; display:block;}
    #menu-smart #but-cont a:focus {background:rgba(148,110,64,0.2); }
    #menu-smart #but-cont a:hover, #menu-smart #but-cont a:active, #menu-smart #but-cont a:visit {background:none;}


    #menu-smart .but {width:50px; height:30px; margin:3px 0 0 0px; cursor: pointer; left:5px; bottom:12px;}
    #menu-smart .but span.menu1, #menu-smart .but span.menu2, #menu-smart .but span.menu3 {z-index:50000; width:50px; height:3px; left:0; background:#000; transition: all 0.30s cubic-bezier(0.75, 0.25, 0.10, 0.95); }
    #menu-smart:hover .but span.menu1, #menu-smart:hover .but span.menu2, #menu-smart:hover .but span.menu3 {background:#9c8247;  transition: all 0.5s ease-in-out;}
    #menu-smart .but span.menu1 {top: 0;}
    #menu-smart .but span.menu2 {top: 11px;}
    #menu-smart .but span.menu3 {top: 22px;}
    #menu-smart .but.move span.menu1 { top: 11px; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.50s cubic-bezier(0.75, 0.25, 0.10, 0.95); background:#9c8247; }
    #menu-smart .but.move span.menu2 {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: all 0.50s cubic-bezier(0.75, 0.25, 0.10, 0.95); background:#9c8247; }
    #menu-smart .but.move span.menu3 { opacity: 0; transition: opacity 0.20s cubic-bezier(0.75, 0.25, 0.10, 0.95); }

    /* ~~~ Menu Container ~~~ */
    #menu {display:none; position:absolute; top:0; left:0; z-index:100; background:#fff; box-shadow:none; padding:93px 0 40px 0;}
    /* ~~~ für den schrägen Footer ~~~ */
    #menu-wrapper {position:relative; z-index:120; width:100%; height:auto; background:#fff; padding:0 5%;}
    #menu-footer {position:absolute; bottom:-65px;  z-index:110; box-sizing:border-box; height:200px; width:100%; box-shadow:0px 15px 15px rgba(0,0,0,0.2); background:#fff; transform:skew(0deg,-3deg);}

    /* ~~~ Menu 1. Ebene ~~~ */
    #menu ul {padding:0 1% 10px 0%; animation:menu-animation 0.7s 1;}
    #menu ul li {width:20%;  }
    #menu ul li a, #menu ul li a:link {padding:0.6em 10px 25px 0px; background:none; text-align:left; font-size:150%; color:#000; }
    #menu ul li a:hover, #menu ul li.current-menu-parent > a, #menu ul li a:focus, #menu ul li.current-menu-parent > a:hover, #menu ul li.current-menu-parent > a:focus {color:#9c8247; text-decoration:none; }

        /* ~~~ Menu 1. Ebene: Pfeile ~~~ */
        #menu ul li a.menu-but::after {background:transparent url("./assets/images/pfeil-menu-zu.svg") 0 0 no-repeat; background-size:contain; }
        #menu ul li a.menu-pfeil::after {background:transparent url("./assets/images/pfeil-menu-auf.svg") 0 0 no-repeat; background-size:contain; }
        #menu ul li.akt a.menu-but::after {background:transparent url("./assets/images/pfeil-menu-zu.svg") 0 0 no-repeat; background-size:contain; }
        #menu ul li.akt a.menu-pfeil::after {background:transparent url("./assets/images/pfeil-menu-auf.svg") 0 0 no-repeat; background-size:contain; }
        /* ~~~ Menu 1. + 2. Ebene: Pfeile ~~~ */
        #menu ul li a.menu-pfeil::after, #menu ul li a.menu-but::after, #menu ul li ul li a.menu-pfeil-sub::after, #menu ul li ul li a.menu-but-sub::after {content:""; position:relative; display:inline-block; width:10px; height:10px; margin-left:7px; margin-bottom:7px;}
        #menu ul li ul li a.menu-pfeil-sub::after, #menu ul li ul li a.menu-but-sub::after {content:""; position:relative; display:inline-block; width:13px; height:13px; margin-left:7px; margin-bottom:0px;}

    /* ~~~ Menu 2. Ebene ~~~ */
    #menu ul li ul {display:block; top:0; left:0; animation:none;}
    /* ~~~ #menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link {padding:0 0 7px 0; white-space:pre-wrap; color:#000; font-weight:300; font-size:100%; line-height:1.3em; letter-spacing:0; transition: all 0.3s ease-in-out; text-decoration:none; }
    #menu ul li ul li a:hover, #menu ul li.akt ul li a:hover, #menu ul li ul li a:focus, #menu ul li.akt ul li a:focus, #menu ul li.akt ul li.akt a, #menu ul li.akt ul li.akt a:link {color:#946e40; text-decoration:none; padding:0 0 7px 10px; transition: all 0.3s ease-out;}
    #menu ul li.akt ul li.akt a, #menu ul li.akt ul li.akt a:link {color:#946e40; padding:0 0 7px 0; margin-left:10px; font-weight:700;} ~~~ */
    #menu ul li ul li a, #menu ul li ul li a:link {padding:0 0 7px 0; white-space:pre-wrap; color:#000; font-weight:300; font-size:100%; line-height:1.3em; letter-spacing:0; transition: all 0.3s ease-in-out; text-decoration:none; }
    #menu ul li ul li a:hover, #menu ul li ul li a:focus {color:#946e40; text-decoration:none; padding:0 0 7px 10px; transition: all 0.3s ease-out;}
    #menu ul li ul li.current-menu-item a, #menu ul li ul li.current-menu-item a:link, #menu ul li ul li.current-menu-item a:hover, #menu ul li ul li.current-menu-item a:focus {color:#946e40; padding:0 0 7px 0; margin-left:10px; font-weight:700;}

        /* ~~~ Menu 2. Ebene: Pfeile ~~~ */
        #menu ul li ul li a.menu-but-sub::after {background:transparent url("./assets/images/pfeil-menu-zu-sub.svg") 0 0 no-repeat; background-size:contain; }
        #menu ul li ul li a.menu-pfeil-sub::after {background:transparent url("./assets/images/pfeil-menu-auf-sub.svg") 0 0 no-repeat; background-size:contain; }

    /* ~~~ Menu 3. Ebene ~~~ */
    #menu ul li ul li ul, #menu ul li.akt ul li ul {display:block; }
    #menu ul li.akt ul li.akt ul {display:block; }
    #menu ul li ul li ul li a, #menu ul li ul li ul li a:link, #menu ul li.akt ul li.akt ul li a, #menu ul li.akt ul li.akt ul li a:link {font-weight:normal; padding:0.3em 0em 0.3em 25px; font-size:95%;}
    #menu ul li.akt ul li.akt ul li a::before {content: "";}
    #menu ul li ul li ul li a:hover, #menu ul li.akt ul li.akt ul li a:hover, #menu ul li.akt ul li.akt ul li a:focus, #menu ul li.akt ul li.akt ul li.akt a,#menu ul li.akt ul li.akt ul li.akt a:link {color:#ec691f; }
    #menu ul li.akt ul li.akt ul li.akt a::before {color:#ec691f; content: "> ";}

    /* ~~~ Animation des Pfeiles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        .pfeildown {-webkit-transition:-webkit-transform .03s ease-out; transition:transform .0s ease; -webkit-transform:rotate(0); transform:rotate(0);}
        .pfeilup {-webkit-transition:-webkit-transform .03s ease-out; transition:transform .0s ease; -webkit-transform:rotate(-180deg); transform:rotate(-180deg);}

    /* ~~~ Abdeckung
    #abdeckung {position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; background: rgba(255,255,255,0.3); display:none;}

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* ~~~ Bereich "main" >  Beiträge  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    main {z-index:50;}

    /* ~~~ "conten-wrapper" = Rahmen für "content"  + "Container für Beiträge" > Definition siehe oben Zeile 71 + 73 ~~~~~~~~~~~~~~~~~~~~*/
    #content-wrapper, footer {width:94%; margin:0 auto;}
    #content-wrapper {z-index:50;}
    #content {width:100%;}

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /* ~~~ Footer ~~~*/
    footer {margin:35px auto; background:#f0ece4; padding:30px 30px 0 30px; z-index:20;}
    #footer-wrapper {padding-bottom:30px; margin-bottom:30px;}
    /* ~~~ Footer Logos ~~~ */
    .logo-umathum {-webkit-order:1; order:1;}
    address {-webkit-order:2; order:2;}
    .footer-text.offen {-webkit-order:3; order:3;}
    .footer-text {-webkit-order:4; order:4;}
    .logos-fremd {-webkit-order:5; order:5;}
    .logo-umathum {width:15%;}
    address, .footer-text {width:24%;}

    .footer-text li a, .footer-text li a:link {padding:7px 0; display:block;}
    .footer-text li.akt a, .footer-text li.akt a:link {color:#000; text-decoration:none; margin-left:7px;}
    .footer-text.offen {width:37%; padding:0 1% 0 0;}
    .logos-fremd {width:100%; margin-top:30px;}
    .logo-umathum figure {width:80%;}
    .logos-fremd figure {width:60px; height:60px; margin:0 10px 10px 10px; float: left;}
    .logos-fremd figure img {width:100%;}
    .logos-fremd figure a, .logos-fremd figure a:link {display:block; width:100%; height:100%;}
    .logos-fremd figure a:focus {background:rgba(255,255,255,0.8); border-radius:50%;}
    /* ~~~ Footer Texte & Links ~~~ */
    address, .footer-text {color:#000; padding-left:1%;}
    address h2, .footer-text h2 {font-size:140%; line-height:120%; margin-bottom:15px; color:#000;}
    address p, .footer-text p {font-size:90%; line-height:110%; margin-bottom:5px;}
    .footer-text li:akt a, .footer-text li:akt a:link {color:#000; text-decoration:underline;}

    /* ~~~ Footer-Menu~~~ */
    #footer-menu {font-size:140%; text-transform:uppercase; border-top:1px solid #fff; border-bottom:1px solid #fff; padding:20px;}
    #footer-menu li a, #footer-menu li a:link, #footer-menu li a:visited {padding:0 20px; line-height:50%; display:block; transition: all 0.5s ease-out;}
    #footer-menu li a:active, #footer-menu li a:focus, #footer-menu li a:hover, #footer-menu li.akt a {color:#000; transition: all 0.5s ease-out; text-decoration:none;}

    /* ~~~ Footer Unten Text ~~~ */
    #footer-text {z-index:50; padding:45px 0 50px 0; color:#fff; text-align:center;}
    /* ~~~ Footer Pfeil nach oben ~~~ */
    #pfeil-top {width:100%; height:50px; }
    #pfeil-top a, #pfeil-top a:link {width:70px; height:26px; background:url(./assets/images/pfeil-top.svg) 0 0 no-repeat; background-size:cover; transition:all 0.5s ease; display:block;}
    #pfeil-top a:focus, #pfeil-top a:hover {background:url(./assets/images/pfeil-topr.svg) 0 0 no-repeat; background-size:cover; transition:all 0.5s ease; cursor:pointer; text-decoration:none;}

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /* ~~~ Beitrag Standard allgemein~~~*/
    .beitrag li {margin:0 0 7px 0; }
    .beitrag li {line-height:120%; }
    /* ~~~ Bilder ~~~*/
    .beitrag .bild {width:48%; margin:0  0 7px 0; display:inline-block;}
    .beitrag .bild.links {float:left; margin-right:15px;}
    .beitrag .bild.hochformat {width:30%;}
    .beitrag .bild.rechts {float:right; margin-left:15px;}
    .beitrag .bild figcaption p {margin:0 0 10px 0; font-size:90%; font-style:italic;}

    /* ~~~ Table ~~~*/
    .beitrag table {margin:15px 0; padding:15px 0; }
    .beitrag td, .beitrag th {width:auto;  padding: 0.25em; text-align: left; vertical-align:top;}
        .beitrag th {margin:7px 0 7px 0; padding:10px 7px 10px 7px; border:none; }

    hr, hr.wp-block-separator {border:0; border-bottom:1px dotted #9c8247; margin:5px 0; }

    /* ~~~ beitrag Detailansicht ~~~*/
    .alsDetail {padding:0 5%;}

    .alsDetail ul {margin:1% 0; }
    .alsDetail li {background:transparent url('./assets/images/bullet.svg') 0 5px no-repeat; text-indent:0; padding-left:0.8em; margin-bottom:0.3em; }

    /* ~~~ Sterne, Jahrgang beitrag Detailansicht ~~~*/
    .jahrgang {text-align:center;}
    .jahrgang a, .jahrgang a:link {padding: 7px 5px;}
    .jahrgang a, .stern img {display:inline-block;}
    .stern {padding-left:43%;}
    .stern img {height:11px; width:68px; }
    /* ~~~ WEINLISTE ~~~*/
    .weinkurzliste hr {margin-bottom:15px; }
    .weinkurzliste li {margin-bottom:15px; }
    .weinkurzliste li a, .weinkurzliste li a:link {display:block; }
    .bezugsquellen a, .bezugsquellen a:link {padding:10px 3px; display:inline-block;}

    /* ~~~ Einleitung zentriert ~~~*/
    .einleitung { margin-bottom: 20px; text-align: center; border-top:none; }
    .intro, .bodydiv {margin-bottom:20px;}

    .zwei-spalten {-webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:1.5em; -moz-column-gap:1.5em; column-gap:1.5em; -webkit-hyphens: none; hyphens: none;}
    /* ~~~.zwei_spalten ul {column-break-after: column;} ~~~*/
    .zwei-spalten li {display:block;}
    .zwei-spalten h2 {text-align:left; margin-top:20px; break-before:avoid; }
    .zwei-spalten p {text-align: justify; page-break-inside:void; column-break-inside:avoid; -webkit-column-break-inside:avoid;}
    .zwei-spalten .bild {width:100%; margin:0 0px 3px 0; float:none;}
    .zwei-spalten {padding:15px 0;}

    .intro, .bodydiv {overflow:hidden; margin:0 0 10px 0;}
    .intro.zwei_spalten h2, .bodydiv.zwei_spalten h2, .bodydiv.bodydiv1.zwei_spalten h2, .bodydiv.bodydiv2.zwei_spalten h2, .bodydiv.bodydiv3.zwei_spalten h2, .bodydiv.bodydiv4.zwei_spalten h2 {margin:7px 0 13px 0; }
    .intro.zwei_spalten {margin:0px; padding:0.2em 0 0.2em 0; border-bottom: none; }

    .intro h2 {margin:0 0 10px 0; }

    .alsDetail ul.linkliste {list-style:none;}
    .alsDetail ul.linkliste li:first-child {border-top:2px dotted #c1c1c1;}
    .alsDetail ul.linkliste li {background:none; padding-left:0; margin:0; padding: 10px 0 10px 22px; list-style: none; }
    .alsDetail ul.linkliste li {background:transparent url("./assets/images/pfeil-linkliste.svg") 0 12px no-repeat; background-size: 15px;}

    /* ~~~ Listen Beiträge ~~~~~~~~~~~~~~~*/
    .alsListe {text-align:left; padding:15px 0; margin:0 15%; border-bottom:1px solid #9c8247;}
    .alsListe:first-child {margin-top:20px; }
    .alsListe a {text-decoration:none; }
    .alsListe a:hover {text-decoration:none;}
    .alsListe h1, .alsListe h2 {font-size:140%; line-height:1.3em; text-align:left; padding:0; margin:0;}
    .alsListe p {margin:0;}
    .alsListe figure {position:relative; }
    .alsListe .bild {width:35%; float:left; overflow:hidden; msrgin:0; padding:0;}
    .alsListe .listentext {margin-left:37%; width:63%; vertical-align:top; padding:0 5px 10px 0;}
    .alsListe.ohneBild .listentext {margin-left:0; }

    /* ~~~ Container für SHOP & Download: Boxen, Kacheln usw. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .listen-cont, .galerie-cont  {margin-top:35px; }

    /* ~~~ mehrlink~~~*/
    p.mehrlink a, p.mehrlink a:link {width:200%; height:100%; top:0; right:0; z-index:700; text-align:left; line-height:0; transition:all 0.5s ease; text-decoration:none; font-size:10%; display:block;}
    p.mehrlink a:hover, p.mehrlink a:focus {transition: all 0.5s ease; text-decoration:none;}

    /* ~~~ Shop-Produktauswahl & Download: Bild-Boxen mehrlink~~~*/
    .produkt.auswahl-box p.mehrlink a, .produkt.auswahl-box p.mehrlink a:link, .alsListe p.mehrlink a, .alsListe p.mehrlink a:link {background:rgba(148,110,64,0);}
    .produkt.auswahl-box p.mehrlink a:hover, .produkt.auswahl-box p.mehrlink a:focus, .alsListe p.mehrlink a:hover, .alsListe p.mehrlink a:focus {background:rgba(148,110,64,0.15);}

    /* ~~~ Mehrlink für Kreise ~~~ */
    .kreis.news p.mehrlink a, .kreis p.mehrlink a {font-size:10%; background:transparent;}
    .kreis.news p.mehrlink a:hover, .kreis p.mehrlink a:hover, .kreis.news p.mehrlink a:focus, .kreis p.mehrlink a:focus {background:transparent; }


    /* ~~~ Shop-Produktauswahl & Download: Bild-Boxen hover-Effekt ~~~~~~*/
    .produkt.auswahl-box figure img, .galerie-box figure img, .alsListe figure img {transition:transform 2s cubic-bezier(.19, 1, .22, 1)0ms; }
    .produkt.auswahl-box:hover figure img, .produkt.auswahl-box:focus figure img, .alsListe:hover figure img, .alsListe:focus figure img, .galerie-box:hover figure img, .auswahl-box:focus figure img { -webkit-transform:scale(1.075, 1.075); transform:scale(1.075, 1.075);}

    /* ~~~ Shop-Produktauswahl & Download: Bild-Boxen ~~~~~~~~~~~~~~~*/
    .produkt.auswahl-box {width:48%; margin:0 0 30px 0;}
    .produkt.auswahl-box h2, .galerie-box h2 {width:100%; text-align:center; margin:0; padding:7px 0; font-size:170%; }
    .produkt.auswahl-box:hover h2, .galerie-box:hover h2 {color:#000;}

    /* ~~~ Download-Galerie ~~~ */
    .galerie-cont {padding:0;}
    .galerie-box {width:180px; margin:0 5px 10px 5px; border:1px solid #9c8247; padding:20px 20px 0 20px; overflow:hidden;}
    .galerie-box figure {width:100%; }
    .galerie-box:hover {border:1px solid #000;}
    .galerie-box figure img {transition: transform 1000ms cubic-bezier(.19,1,.22,1)0ms; width:100%; height:auto;}
    .galerie-box:hover figure img { -webkit-transform: scale(1.075,1.075); transform: scale(1.075,1.075); cursor:pointer; transition: all 0.5s ease-out;}
    .galerie-box figcaption h2 {font-size:100%; padding:10px 0;}

    .galerie-box a, .galerie-box a:link {width:100%; height:100%; display:block; }

    /* ~~~ Shop-DETAIL-beitrag ~~~~~~~~~~~~~~~*/
    .produkt.detail {width:100%; margin:40px auto;}
        .produkt.detail .jahrgang-wrapper {display:block; width:7%; min-width:80px; padding-top:10px;}
            .jahrgang-wrapper .jahrgang h2 {width:100%; font-size:100%; color:#000; margin-bottom:20px;}
            .jahrgang-wrapper .jahrgang ul {width:100%;}
            .jahrgang-wrapper .jahrgang ul li {margin-bottom:20px;}
            .jahrgang-wrapper .jahrgang ul li a {display:block;}
            .jahrgang-wrapper .jahrgang ul li.akt a {color:#000; text-decoration:underline;}
        .produkt.detail .produktfoto {width:25%; }
            .produkt.detail .produktfoto figure {position:relative; width:100%;}
            .produkt.detail .produktfoto figure img {position:relative;}
        .produkt.detail .beschreibung {width:60%; padding-top:10px;}
            .produkt.detail .beschreibung h1, .beschreibung h2 {text-align:left; color:#000; margin-top:0;}
            .produkt.detail .beschreibung h1 {font-size:200%; line-height:130%; font-weight:400;}
            .produkt.detail .produkt.detail .beschreibung h2 {font-size:140%; line-height:130%; margin-bottom:5%;}
            .produkt.detail .beschreibung .detailbeschreibung {display:block; line-height:120%; }
            .produkt.detail .beschreibung .zusatzlink, .produkt.detail .beschreibung .preis {text-transform:uppercase;}
            .produkt.detail .beschreibung .zusatzlink {font-size:130%; margin:15px 0;}
            .produkt.detail .beschreibung .preis {font-size:140%; margin:15px 0; font-weight:400;}
            .produkt.detail .beschreibung .angaben {font-size:90%; margin-bottom:7px;}
            .beschreibung .auswahl {width:280px; height:auto; margin:20px 0; border:1px solid #9c8247; background:#fff;}
                    .auswahl .anzahl {width:140px; height:60px; border-right:1px solid #9c8247;}
                        .anzahl .plus, .anzahl .menge, .anzahl .minus {width:33.33%; height:100%; font-weight:400; text-align:center}
                        .anzahl .plus a, .anzahl .plus a:link, .anzahl .minus a, .anzahl .minus a:link {display:block; width:100%; height:100%; padding-top:38%;}
                        .anzahl .minus a:link {padding-top:32%;}
                        .anzahl .plus a:hover, .anzahl .plus a:focus, .anzahl .minus a:hover, .anzahl .minus a:focus {text-decoration:none; }
                        .anzahl .plus {font-size:200%;}
                        input.zahl {width:100%; height:60px; background:none; border:none; border-radius:0; padding:0; box-shadow:none; font-size:140%; font-weight:400; text-align:center; color:#9c8247;}
                        input.zahl:hover, input.zahl:active, input.zahl:hover, input.zahl:focus {border:none; box-shadow:none; transition:none;}
                        input.zahl placeholder {color:#9c8247;}

                        .anzahl .minus {font-size:200%; }
                        .in-warenkorb {width:140px; height:60px; }
                        .in-warenkorb div, .in-warenkorb div {width:35px; height:35px; z-index:50; background:url(./assets/images/icon-warenkorbr.svg) 0 0 no-repeat; background-size:cover; transition:all 0.5s ease; }
                        .in-warenkorb div:focus, .in-warenkorb div:hover {background:url(./assets/images/icon-warenkorb.svg) 0 0 no-repeat; background-size:cover; transition:all 0.5s ease; }

    /* ~~~ Shop-KACHEL - Weine + Spezialitäten ~~~~~~~~~~~~~~~*/
    .produkt.kachel {width:50%; padding:15px 0; min-width:290px;}
    .produkt.kachel:nth-child(1n) {margin:5% 0 50px 0;}
    .produkt.kachel:nth-child(2n) {margin:5% 0 50px 0;}
    .produkt.kachel .jahrgang-wrapper {display:none; }
        .produkt.kachel .produktfoto {width:27%; margin:0 2%;}
        .produkt.kachel .produktfoto figure {position:relative; width:100%; height:100%; }
        .produkt.kachel .produktfoto figure a, .produkt.kachel .produktfoto figure a:link {position:relative; left:0; bottom:0; height:100%; width:100%; max-height:500px; max-width:188px; display:block;}
        .produkt.kachel .produktfoto figure a img, .produkt.kachel .produktfoto figure a:link img {position:absolute; left:0; bottom:0; max-height:500px; max-width:188px; transition:all 0.3s ease-out;}
        .produkt.kachel .produktfoto figure a:hover img, .produkt.kachel .produktfoto figure a:focus img {bottom:15px; transition:all 0.3s ease-out;}

        .produkt.kachel .beschreibung {width:69%; padding-top:0; margin-bottom:20px; min-height:300px;}
        .produkt.kachel .beschreibung h1 {font-size:130%; line-height:130%; margin-bottom:5px; text-align:left; color:#000; font-weight:400; }
        .produkt.kachel .beschreibung h2 {font-size:110%; line-height:120%; margin-bottom:10px;}
        .produkt.kachel .beschreibung p {margin-bottom:0;}
        .produkt.kachel .beschreibung .zusatzlink {font-size:120%; margin:7px 0;}
        .produkt.kachel .beschreibung .detailbeschreibung {display:none;}
        .produkt.kachel .beschreibung .preis {font-size:120%; margin:7px 0;}
        .produkt.kachel .auswahl {margin:10px 0 0 0;}

    /* ~~~ Shop-KACHEL - Probierpakete + Gutschein ~~~~~~~~~~~~~~~*/
    .produkt.kachel.Gutscheine {width:530px; padding-top:250px; display:-webkit-flex; display:flex; -webkit-flex-flow:column; flex-flow:column;}
    .produkt.kachel.Gutscheine, .produkt.kachel.Gutscheine:nth-child(1n), .produkt.kachel.Gutscheine:nth-child(1n) {margin:30px 0;}
    .produkt.kachel.Gutscheine .jahrgang-wrapper {display:none; }
    .produkt.kachel.Gutscheine .produktfoto {width:80%; margin:0 auto;}
    .produkt.kachel.Gutscheine .produktfoto figure a, .produkt.kachel.Gutscheine .produktfoto figure a:link {position:relative; left:0; bottom:0; height:100%; width:100%; max-width:804px; max-height:500px; display:block; }
    .produkt.kachel.Gutscheine .produktfoto figure a img, .produkt.kachel.Gutscheine .produktfoto figure a:link img {position:absolute; left:0; bottom:0; max-width:804px; max-height:500px; transition:all 0.3s ease-out; }
    .produkt.kachel.Gutscheine .produktfoto figure a:hover img, .produkt.kachel.Gutscheine .produktfoto figure a:focus img {bottom:15px; transition:all 0.3s ease-out;}
    .produkt.kachel.Gutscheine .beschreibung {width:70%; margin:0 auto 20px auto;}
    .produkt.kachel.Gutscheine .beschreibung, .produkt.kachel.Gutscheine .beschreibung h1, .produkt.kachel.Gutscheine .beschreibung h2 {text-align:center;}
    .produkt.kachel.Gutscheine .beschreibung .zusatzlink {margin:15px 0;}
    .produkt.kachel.Gutscheine .auswahl {margin:20px auto;}

    .produkt.detail.Gutscheine .produktfoto {width:50%; margin-top:60px;}
    .produkt.detail.gutschein.Gutscheine .produktfoto {position:relative; width:50%; margin-top:0;}
    .produkt.detail.Gutscheine .beschreibung {width:48%; margin-left:2%; padding-top:0;}
    .produkt.detail.Gutscheine .beschreibung .werteingabe input.zahl {width:auto; max-width:70px; text-align:left; margin-left:5px; padding-left:5px; background:#efeae2;}
    .produkt.detail.Gutscheine .beschreibung .werteingabe {font-size:120%; margin:15px 0; font-weight:600;}
    .gutschein-wert-anzeige {width:100%; text-align:center; position:absolute; left:0; top:50%; font-size:300%;}

    /* ~~~ Shop-KACHEL - Hintergrund ~~~~~~~~~~~~~~~*/
    .produkt.kachel::before {width:90%; height:90%; -webkit-transform:scale(0.9); transform:scale(0.9); content:""; position:absolute; left:10%; top:10%; background:rgba(156,139,71,0.0); z-index:-1; transition:all 0.5s ease-out;}
    .produkt.kachel:hover::before, .produkt.kachel:focus::before {width:100%; height:100%; -webkit-transform:scale(1); transform:scale(1); content:""; position:absolute; left:0; top:0; background:rgba(156,139,71,0.15); z-index:-1; transition:all 0.5s ease-out;}

    /* ~~~ Popup für Versandkosten ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    #popupwindow {display:none; position:absolute; top:100px; left:3%; z-index:50; width:94%; background-color:#fff; box-shadow:rgba(0,0,0,0.4) 0px 7px 7px 7px;}
        #popupwindow-innen {width:100%; height:100; position:relative; padding:40px 20px 20px 20px; }
            #popupwindow-innen h1 {font-size:200%;}

            #close-wrapper {position:absolute; top:10px; right:10px; width:40px; height:40px; }
                #close-wrapper a, #close-wrapper a:link {width:40px; height:40px; background:#9c8247; transition: all 0.5s ease-out; display:block;}
                #close-wrapper a:hover, #close-wrapper a:focus {background:#000; transition: all 0.5s ease-out;}

    #popupwindow-innen #ajaxinhalt .bannerbild {display:none;}

    /* ~~~ ZUSATZ-Menu "SORTIMENT" Container ~~~ */
    #zusatz-menu, #back-link {width:100%; position:relative; z-index:51; margin:0 auto; box-shadow:none; font-size:140%;}
    #back-link {z-index:30;}
        #back-link a, #back-link a:link  {color:#946e40; text-align:center; margin:0 auto; padding:30px 0; display:block;}
        #back-link a:hover, #back-link a:focus  {color:#000; }
        #back-link a::before {content:"< ";}
    /* ~~~ ZUSATZ-Menu 1. Ebene ~~~ */
    #zusatz-menu ul {position:relative; z-index:55; width:500px; margin:0 auto; animation:none; background:#fff; border:1px solid #9c8247;}
    #zusatz-menu ul li a, #zusatz-menu ul li a:link {padding:20px 0 25px 0px; background:none; text-align:center; display:block; color:#946e40; transition:all 0.5s ease-out;}
    #zusatz-menu ul li a:hover, #zusatz-menu ul li a:focus {color:#000; transition:all 0.5s ease-out; letter-spacing:0.1em; text-decoration:none; }
        /* ~~~ ZUSATZ-Menu 1. Ebene: Pfeile ~~~ */
        #zusatz-menu ul li a.menu-but::after {background:transparent url("./assets/images/pfeil-menu-auf.svg") 0 0 no-repeat; background-size:contain; }
        #zusatz-menu ul li a.menu-pfeil::after {background:transparent url("./assets/images/pfeil-menu-zu.svg") 0 0 no-repeat; background-size:contain; }
        /* ~~~ ZUSATZ-Menu 1. Ebene: Pfeile ~~~ */
        #zusatz-menu ul li a.menu-pfeil::after, #zusatz-menu ul li a.menu-but::after {content:""; position:absolute; width:20px; height:20px; right:20px; top:25px;}
    /* ~~~ ZUSATZ-Menu 2. Ebene ~~~ */
    #zusatz-menu ul li ul {display:none; position:absolute; top:69px; left:-1px; animation:none; padding:10px 0 20px 0; box-shadow:0px 15px 15px rgba(0,0,0,0.2); }
    #zusatz-menu ul li ul li a, #zusatz-menu ul li ul li a:link {padding:10px 0; white-space:pre-wrap; font-weight:300; font-size:100%; line-height:1.3em; letter-spacing:0; color:#946e40; transition:all 0.5s ease-out;}
    #zusatz-menu ul li ul li a:hover, #zusatz-menu ul li ul li a:focus {color:#000; letter-spacing:0.1em; transition:all 0.5s ease-out; }
    #zusatz-menu ul li ul li.akt a, #zusatz-menu ul li ul li.akt a:link {color:#000; text-decoration:underline; letter-spacing:0.0em; }


    /* ~~~.produkt.kachel::before {-webkit-transform:scale(0); transform:scale(0); content:""; display:block; position:absolute; left:0; right:0; bottom:0; top:0; background:rgba(156,139,71,0.15); z-index:-1;}
    .produkt.kachel:hover::before {-webkit-transform:scale(1); transform:scale(1); right:-15px; bottom:60px; top:170px; opacity: 0; transition:transform 0.5s cubic-bezier(.645,.045,.355,1) 0s,opacity 0.35s cubic-bezier(.645,.045,.355,1) 0.15s; -webkit-transition: transform 0.5s cubic-bezier(.645,.045,.355,1) 0s,opacity 0.35s cubic-bezier(.645,.045,.355,1) 0.15s;} ~~~~~~~~~~~~~~~*/

    /* ~~~ Video ~~~ */
    .videorahmen {max-width:100%; height:auto; margin-bottom:20px; padding:10px 15%; background:#1f1f1d; }
    .videobox {width:100%; height:auto; margin:0; padding:0;}
    .responsive-video {position:relative; padding-bottom:55%; padding-top:5px; height:0; overflow:hidden; }
    .responsive-video iframe, .responsive-video object, .responsive-video embed, .responsive-video video {position:absolute; top:0; left:0; width:100%; height:100%;}

    /* ~~~ Copyright bei Bildern~~~*/
    .figure-copyright {position:absolute; z-index:1000; left:0; bottom:0; font-size:85%; padding:3px 5px; color:#fff; transition: all 0.2s ease-in-out; line-height:120%;}
    .figure-copyright-content {opacity:0; transition: all 0.2s ease-in-out;}
    .figure-copyright:hover {background:rgba(255,255,255,0.8); color:#000;}
    .figure-copyright:hover .figure-copyright-content {opacity:1;}
    .figure-copyright::before {content:'© ';}
    .beitrag .bild figure .figure-copyright, .article-mod-calendar .section-events .event .figure .figure-copyright {bottom:5px; }
    .alsListe figure.bild .figure-copyright {bottom:0; }

    /* ~~~ Slider Bannerbild auf allen Innenseiten~~~~~~~~~~~~~~~*/
    .bannerbild {margin-top:0; }
        .bannerbild h2 {top:10px; left:0;  z-index:30; width:100%; color:#fff; padding:0; margin:0; font-size:200%; text-align:center; text-shadow:0 0 3px #000;}

    /* ~~~ Slider Bannerbild auf auf der Startseite ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .flexslider.start {margin-top:0; }

    /* ~~~ Hintergrundbild ----------------------------------------------------- ~~~ */
    /*.flexslider.start li:nth-child(1) img {display:table; position:relative; width:100%; height:80%; min-height:600px; padding:0; margin:0 auto; text-align:center; background:url(./assets/images/bannerbilder/umathum-start-01.jpg) no-repeat center center scroll; background-size:cover;}
    .flexslider.start li:nth-child(2) img {display:table; position:relative; width:100%; height:80%; min-height:600px; padding:0; margin:0 auto; text-align:center; background:url(./assets/images/bannerbilder/umathum-start-02.jpg) no-repeat center center scroll; background-size:cover;}
    .flexslider.start li:nth-child(3) img {display:table; position:relative; width:100%; height:80%; min-height:600px; padding:0; margin:0 auto; text-align:center; background:url(./assets/images/bannerbilder/umathum-start-03.jpg) no-repeat center center scroll; background-size:cover;}*/
    .flexslider.start li img {display:table; position:relative; width:100%; height:80%; min-height:600px; padding:0; margin:0 auto; text-align:center; background-size:cover !important;}

    /* ~~~ Definition f. die Kreise START----------------------------------------------------- ~~~ */

    /* ~~~ Kreise allgemein ----------------------------------------------------- ~~~ */
    #news-cont, .kreis-cont.links, .kreis-cont.rechts {position:absolute; z-index:50;}
    #news-cont {left:20px; top:20px;}
    .kreis-cont.links, .kreis-cont.rechts {bottom:3%; width:40%; height:auto; display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap;}
    .kreis-cont.links {left:0; -webkit-justify-content:flex-end; justify-content:flex-end;}
    .kreis-cont.rechts {right:0; -webkit-justify-content:flex-start; justify-content:flex-start;}
        .kreis {position:relative; width:135px; height:135px; background:rgba(156,130,71,0.7); border-radius:50%; text-align:center; overflow:hidden; transition:all 0.5s ease-out; margin:0;}
        .kreis:hover  {background:rgba(156,130,71,0.90); transition:all 0.5s ease-out; cursor:pointer}
            .kreis .text {position:absolute; left:0; bottom:12px; width:100%; height:30px; text-align:center; -webkit-transform: rotate(0deg); transform: rotate(0deg);}
                .kreis .text h2, .kreis.topnews .text h1, .kreis.topnews .text h2, .kreis.topnews .text p {color:#fff; text-shadow:none; position:relative; top:0; }
    /* ~~~ Der Top-News-Kreis ----------------------------------------------------- ~~~ */
        .kreis.topnews {width:200px; height:200px;}
            .kreis.topnews .text {left:-17px; top:5%; padding:15% 7% 7% 7%; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); transition:all 0.5s ease; }
            .kreis.topnews .text h1 {text-transform:uppercase; text-align:center; font-size:120%; line-height:1.5em;}
            .kreis.topnews .text h2 {margin-bottom:5px;  font-size:110%;}
            .kreis.topnews .text p {font-size:110%; line-height:1.2em; text-transform:none;}
    /* ~~~ Die kleinen Kreise ----------------------------------------------------- ~~~ */
            .kreis .text h2 {font-size:120%; margin:0; }
    .kreis-cont.links .kreis {margin-left:10%;}
    .kreis-cont.rechts .kreis {margin-right:10%;}
    /* ~~~ Animationen Kreisbilder ~~~ */
    .kreis.topnews:hover .text { left:0; -webkit-transform: rotate(0deg); -webkit-transition-duration:0.5s; -webkit-transform-origin:center center; transform:rotate(0deg); transition-duration:0.5s; transform-origin:center center; }
    .kreis.shop .bild, .kreis.wein .bild, .kreis.news .bild, .kreis.weingut .bild {position:absolute; left:0; top:0; width:100%; height:auto; -webkit-transform:rotate(0deg); transform:rotate(0deg); transition:all 0.5s ease;;}

    .kreis.shop:hover .bild {width:110%; left:0%; top:-10%; -webkit-transform:rotate(15deg); -webkit-transition-duration:0.5s; -webkit-transform-origin:center center; transform:rotate(15deg); transition-duration:0.5s; transform-origin:center center;}
    .kreis.wein:hover .bild {left:6%; top:5%; -webkit-transform:rotate(132.5deg); -webkit-transition-duration:0.5s;-webkit-transform-origin:center center; transform:rotate(132.5deg); transition-duration:0.7s; transform-origin:center center;}
    .kreis.news:hover .bild {width:130%; left:-25%; top:-20%; -webkit-transform: rotate(-15deg) ;-webkit-transition-duration:0.3s; -webkit-transform-origin:center center; transform:rotate(-15deg); transition-duration:0.5s; transform-origin:center center;}
    .kreis.weingut:hover .bild {left:0%; top:0%; -webkit-transform:rotate(360deg); -webkit-transform-origin:center center; transform:rotate(360deg); transition-duration:0.8s; transform-origin:center center;}

    /* ~~~ Lagenkarte + Lagenkreise----------------------------------------------------- ~~~ */
    #karten-wrapper {position:relative; display:table; width:100%; height:600px; background:url(./assets/images/die-region.jpg) center center no-repeat; background-size:cover; z-index:7; }
        #lagenkarte {position:relative; margin:0 auto; width:600px; height:600px; background:url(./assets/images/lagenkarte.svg) center center no-repeat; background-size:cover; z-index:8; }
            .lagenkreis {position:absolute; width:20%; height:20%; }
                .lagenkreis a, .lagenkreis a:link {position:relative; width:90%; height:90%; margin-top:5%; margin-left:5%; z-index:100; opacity:0.2; border-radius:50%; border:1px solid #fff; transition:all 0.9s ease; display:block; }
                .lagenkreis a:hover, .lagenkreis a:focus {opacity:0.90; width:100%; height:100%; margin:0;background:url(./assets/images/lagenkreis.svg) center center no-repeat; background-color:rgba(255,255,255,1); background-size:cover; border:none; transition:all 0.5s ease; }
                    .lagenkreis.kirschgarten {left:0; top:0;}
                    .lagenkreis.terrassen {left:26.1%; top:17.26%; }
                    .lagenkreis.gross-haideboden {left:55.57%; top:37.61%; }
                    .lagenkreis.haideboden1 {left:48.57%; top:67.61%; }
                    .lagenkreis.haideboden2 {left:67.57%; top:23.61%; }
                    .lagenkreis.hallebuehl {left:31.59%; top:51.63%; }
                    .lagenkreis.vom-stein {left:75.32%; top:41.81%; }
                    .lagenkreis.weingut {left:75.32%; top:59.61%; }
                    .lagenkreis.ried-kirchberg {left:5.66%; top:24%;}
                    .lagenkreis.kirschgarten a:hover, .lagenkreis.kirschgarten a:focus {background:url(./assets/images/lagenkreis-kirschgarten.svg) center center no-repeat; background-color:rgba(255,255,255,1); background-size:cover;}
                    .lagenkreis.terrassen a:hover, .lagenkreis.terrassen a:focus {background:url(./assets/images/lagenkreis-terrassen.svg) center center no-repeat; background-color:rgba(255,255,255,1); background-size:cover;}
                    .lagenkreis.gross-haideboden a:hover, .lagenkreis.gross-haideboden a:focus {background:url(./assets/images/lagenkreis-gross-haideboden.svg) center center no-repeat; background-size:cover; background-color:rgba(156,130,71,0.95); transition:all 0.5s ease; }
                    .lagenkreis.haideboden1 a:hover, .lagenkreis.haideboden1 a:focus, .lagenkreis.haideboden2 a:hover, .lagenkreis.haideboden2 a:focus {background:url(./assets/images/lagenkreis-haideboden.svg) center center no-repeat; background-color:rgba(255,255,255,1); background-size:cover;}
                    .lagenkreis.hallebuehl a:hover, .lagenkreis.hallebuehl a:focus {background:url(./assets/images/lagenkreis-hallebuehl.svg) center center no-repeat; background-color:rgba(255,255,255,1); background-size:cover;}
                    .lagenkreis.vom-stein a:hover, .lagenkreis.vom-stein a:focus {background:url(./assets/images/lagenkreis-vom-stein.svg) center center no-repeat; background-color:rgba(255,255,255,1); background-size:cover;}
                    .lagenkreis.weingut a:hover, .lagenkreis.weingut a:focus {background:url(./assets/images/lagenkreis-weingut.svg) center center no-repeat; background-color:rgba(255,255,255,1); background-size:cover;}
                    .lagenkreis.ried-kirchberg a:hover, .lagenkreis.ried-kirchberg a:focus {background:url(./assets/images/lagenkreis-ried-kirchberg.svg) center center no-repeat; background-color:rgba(255,255,255,1); background-size:cover;}
            .grosslage-text {display:none; position:absolute; width:100%; height:auto; left:0; bottom:0; padding:10px; font-size:120%; text-align:center; text-transform:none; background:rgba(255,255,255,0.75); transition:none; color:#826d3b; }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FLEX SLIDER~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* Browser Resets */
    .flex-container a:active,
    .flexslider a:active,
    .flex-container a:focus,
    .flexslider a:focus  {outline: none;}
    .slides,
    .flex-control-nav,
    .flex-direction-nav {margin:0; padding:0; list-style: none;}
    /* FlexSlider wichtige Styles
    *********************************/
    .flexslider {margin:0; padding:0; border:0; position:relative;}
    .flexslider .slides > li {display: none; } /* Hide the slides before the JS is loaded. Avoids image jumping */
    .flexslider .slides img {width: 100%; margin:0; padding:0; display: block;}
    .flex-pauseplay {display:none;}
    /* Clearfix for the .slides element */
    .slides:after {content: "."; display: block; clear:both; visibility:hidden; line-height:0;height: 0;}
    html[xmlns] .slides {display: block;}
    * html .slides {height: 1%;}
    .no-js .slides > li:first-child {display: none;}
    .flex-viewport {max-height:600px; transition: all 0.5s ease; }
    .loading .flex-viewport {max-height: 600px;}
    .carousel li {margin-right:0;}
    /* Direction Nav */
    .flex-direction-nav {height:0; display:block;}
    .flex-direction-nav a {width: 45px; height:110px; margin:-35px 0 0; display:block; background:url(./assets/images/bg-direction-nav.svg) no-repeat 0 0; position:absolute; top:45%; z-index:1600; cursor:pointer; text-indent:-9999px; opacity:0.0; transition:all .3s ease;}
    .flex-direction-nav .flex-next {background-position:100% 0; right:0px; }
    .flex-direction-nav .flex-prev {left:0px;}
    .flexslider:hover .flex-next {opacity:0.4; right:5px;}
    .flexslider:hover .flex-prev {opacity:0.4; left:5px;}
    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity:0.9; cursor:pointer;}
    .flex-direction-nav .flex-disabled {opacity:0.7; cursor: default;}
    /* Control Nav */
    .flex-control-nav {position:absolute; bottom:0; left:48%; z-index:1600; text-align:left; font-size:0px;}
    .flex-control-nav li {margin:0 7px; display: inline-block; zoom:1; }
    .flex-control-paging li a {width:14px; height:14px; display:block; background:rgba(255,255,255,0.3); cursor:pointer; text-indent:-9999px; border-radius:14px; border:1px solid #fff;}
    .flex-control-paging li a:hover {background:rgba(255,255,255,1.0); }
    .flex-control-paging li a.flex-active {background:rgba(255,255,255,0.8);}
    .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
    .flex-control-thumbs li {width: 25%; float: left; margin: 0;}
    .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
    .flex-control-thumbs img:hover {opacity: 1;}
    .flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Formularelemente ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    form { max-width: 100%; margin:0;}
    fieldset { padding:0.5em 1em; border-bottom:2px solid #fff; margin:0.5em 0;}
    fieldset:last-child {border-bottom:none; margin:0.5em 0 0 0;}
    fieldset.auswahl {padding-left:26%;}
    legend { font-size:1.2em; font-weight:400; margin:0 0.75em 10px 0.75em;}
    .form-field {background:#f0ece4; padding:0.75em 0em; }
    /* Labels */
    label { display: inline-block;}
    label { margin: .2em 0;}
    #myname {display:none;}
    /* remove standard-styles */
    input, select, textarea {-webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; border-radius: 0; font-size:1em; width:85%; position:relative;}
    input.kalendertisch, input.uhrzeit, select.klein {width:50%; position:relative;}
    /* .Zebra_DatePicker_Icon_Wrapper {width:60%} */
    .Zebra_DatePicker_Icon_Wrapper {position:relative; width:60%;}
    .Zebra_DatePicker_Icon, .Zebra_DatePicker_Icon_Inside_Right {position:absolute; right:5px; top:7px;}
    /* Input & Textarea */
    input, textarea {background:#fff; border: 1px solid #949494; border-radius:5px; padding:.75em 1em .5em 1em; box-shadow:inset 0 2px 1px 0 rgba(0,0,0,0.2);}
    input, select, textarea {font: normal 0.85em/1.4em 'Open San', sans-serif, Arial, Verdana, Helvetic; font-weight:300; color:#231f1f; }
    textarea {resize:vertical;}
    input:hover, input:active, input:hover, input:focus, textarea:hover, textarea:active, textarea:focus {border:1px solid #957d41; box-shadow:inset 0 2px 1px 0 rgba(0,0,0,0.0);transition: all 0.4s ease-out;}
    /* speziell für hlw19 Zeitablauffeld für login */
    #login-box input.ablauf {width:33%; text-align:center;}
    /* Select */
    select {width:50%; border: 1px solid #bbb; padding:.75em 1em .5em .5em; box-shadow:0 3px 3px 0 rgba(0,0,0,0.25); border-radius:5px; background: #fff url('./assets/images/pfeil-menu-zu.svg') 95% 47% no-repeat; background-size: auto 15px;}
    select:hover, select:focus { box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); background: #fff url('./assets/images/pfeil-menu-auf.svg') 95% 47% no-repeat; background-size: auto 15px; border:1px solid #9c8247; transition: all 0.4s ease-out; cursor:pointer;}
    select .opt-abstand {padding-left:20px; }
    /* Hide browser-styling in IE10 */
    select::-ms-expand {display:none;}
    /* Hide custom-icons in lower versions of Internet Explorer (< IE10). */
    .lt-ie10 select {  background-image: none; }
    /* graceful degradation for ie8 */
    input[type='checkbox'], input[type='radio'] { width:auto; float:left; margin-right:0.75em; background:transparent; border:none;}
    /* better styling only for modern browsers. To identify them, check for pseudoclass (:checked, :not(:checked)) */
    /* hide standard inputs */
    input[type='checkbox']:checked, input[type='checkbox']:not(:checked), input[type='radio']:checked, input[type='radio']:not(:checked) {background: transparent; position: relative; visibility: hidden; margin:0; padding:0; }
    input[type='checkbox'] + label,input[type='radio'] + label,
    .woocommerce input[type='checkbox'], .woocommerce input[type='radio'] {cursor: pointer; position:relative;}
    /* add custom inputs with ::before */
    input[type='checkbox']:checked + label::before, input[type='checkbox']:not(:checked) + label::before,
    input[type='radio']:checked + label::before, input[type='radio']:not(:checked) + label::before,
    label > input:not(:checked)::before,
    label > input:checked::before {
    content:' '; display:inline-block; width:20px;  height:20px;  position: relative; top:4px;  border:1px solid #949494; background:#fff; margin-right:0.75em; border-radius:3px; overflow:hidden;}
    input[type='checkbox'] + label::after, input[type='radio'] + label::after,
    .woocommerce input[type='checkbox']::after, .woocommerce input[type='radio']::after {position:absolute; display:none; content:''; }
    input[type=radio]:checked + label::before, input[type=radio]:not(:checked) + label::before {border-radius: 50%;}
    input[type='checkbox']:hover  + label::before, input[type='checkbox']:focus  + label::before, input[type='radio']:hover  + label::before, input[type='radio']:focus  + label::before  {background:#dcd3bf; border:1px solid #9c8247; transition: all 0.4s ease-out; }
    input[type='checkbox']:checked  + label::before, input[type='radio']:checked  + label::before,
    .woocommerce input[type='checkbox']:checked::before {background:#9c8247; border:1px solid #9c8247; overflow:hidden;}
    input[type='checkbox']:checked  + label::after, .woocommerce input[type='checkbox']:checked::after {display:block; top: 7px; left: 7px; width:5px; height:11px; -webkit-transform:rotate(45deg); transform:rotate(45deg); border:2px solid #fff; border-top:0; border-left:0; transition: all 0.4s ease-out; }
    input[type='radio']:checked + label::after {display:block; top: 13px; left:9px; width:4px; height:4px; background:#fff; border-radius:50%; transition: all 0.4s ease-out; }
    .woocommerce input[type='checkbox']:not(:checked)::before, .woocommerce input[type='checkbox']:checked::before,
    .woocommerce input[type='checkbox']:not(:checked)::after, .woocommerce input[type='checkbox']:checked::after {
        visibility: initial;
    }

    /* Tabelle */
    .form-field table {margin-top:0.5em;}
    .form-field td, .form-field td:first-child .col2, .form-field th {width:100%; padding: 0.2em; margin-bottom:5px; text-align: left; vertical-align:top;}
    .form-field th {margin:7px 0 7px 0; padding:10px 7px; border:none; width:100%;}
    .form-field td:first-child {text-align:right; width:30%; border:none; padding-top:9px;}
    .form-field td.col2:first-child, th {text-align: left; padding-left:30px;}
    #hinweis {padding-bottom:15px; border-bottom:2px solid #fff;}
    .mini {font-size:0.8em; font-style:italic; margin-left:1em;}

    /* Buttons */
    .submit, .form-submit{width:auto; max-width:100%; margin:0.75em 0 0.75em 0; padding:0.5em 1.5em; cursor:pointer; box-shadow:0px 2px 2px 0px rgba(0,0,0,0.45); border-radius:5px; text-align:center; font-size:1em; overflow:hidden; border:1px solid #9c8247; background-color:#9c8247; color:#fff; transition: all 0.5s ease-out;;}
    .submit:hover, .form-submit:hover {color: #fff; box-shadow:1px 1px 2px 0px rgba(0,0,0,0.45); transition: all 0.5s ease-out; border:1px solid #000; background-color:#000;}


    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Warenkorb = shopping cart~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    .shopping-cart {background:none; }
    .shopping-cart thead {background:#f0ece4; font-weight:bold;}
    .shopping-cart td:first-child {text-align:left;}
    .shopping-cart td:first-child, .shopping-cart th, .shopping-cart td, .shopping-cart thead th {width:auto; padding:30px 5px 20px 5px;}
    .shopping-cart tfoot td.price, .shopping-cart tfoot td.total-price {width:auto; padding:10px 5px;}
    .shopping-cart th.price, .shopping-cart td.price, .shopping-cart th.total-price, .shopping-cart td.total-price {text-align:right;}
    .shopping-cart td.price {font-style:italic;}
    .shopping-cart td.product-thumbnail {padding:5px 0 0 0;}
    .shopping-cart td.product-thumbnail img {height:70px; width:auto; margin:5px 10px 0 10px;}
    .shopping-cart tbody tr {border-bottom:1px solid #9c8247;}
    .shopping-cart tfoot {font-weight:bold;}
    .shopping-cart thead th {padding:7px 5px;}
    .shopping-cart td.remove-button {width:40px; height:40px; position:relative;}
    /*.shopping-cart td.remove-button input {display:inline-block; height:40px; width:40px; padding:0; font-size:0; background:#fff; border-color:#efefef; color:#000; cursor:pointer; text-indent: 3em;}
    .shopping-cart td.remove-button::after {position:absolute; bottom:40px; left:12px; height:23px; width:23px; content:""; background:url(./assets/images/remove-bucket.svg) 0 0 no-repeat; background-size:contain; cursor:pointer; }*/

    .shopping-cart td.remove-button input {
        display: inline-block;
        height: 40px;
        width: 40px;
        padding: 0;
        background: #fff;
        border-color: #efefef;
        color: #000;
        cursor: pointer;
        text-indent: 3em;
        background: url(./assets/images/remove-bucket.svg) 0 0 no-repeat;
        background-size: 70%;
        background-position: center;
        margin: 0px;
    }
    #shopping-cart-button {float:right; clear:right; text-align:right;}
    .submit.update {background:#fff; color:#9c8247; border:1px solid #9c8247; margin-right:10px;}
    .submit.update:hover {background:#000; color:#fff; border:1px solid #000;}
    input.amount {width:50px; height:auto; background:none; padding:5px; box-shadow:none; font-size:100%; font-weight:400; text-align:center; color:#000; border:1px solid #9c8247;}



    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FANCYBOX~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .fancybox-button, .fancybox-infobar__body {background:rgba(156,130,71,0.7);}
    .fancybox-caption-wrap { background: linear-gradient(180deg,transparent 0,rgba(156,130,71,.0) 20%,rgba(156,130,71,.0) 40%,rgba(156,130,71,.0) 80%,rgba(156,130,71,.0));}
    .fancybox-caption {padding:30px 0; font-size:120%; line-height:20px; text-align:center; border-top:none; color:#000;}
    .fancybox-infobar__body { display:inline-block; width:70px; line-height:44px; font-size: 1em; }
    .fancybox-button {width:60px; height:60px; line-height:60px;}
    .fancybox-placeholder {box-sizing:content-box; }
    .fancybox-button--play::before, .fancybox-button--fullscreen::before {top:23px; left:25px; }
    .fancybox-button--thumbs::before {top:27px; left:27px; }
    .fancybox-placeholder::before {content: ''; background:#fff; position:absolute; top:-20px; left:-20px; right:-20px; bottom:-20px;}
    .fancybox-controls {position:static; }
    .fancybox-button--left, .fancybox-button--right {position:absolute; top:50%; transform:translateY(-50%); height:88px; width:88px; line-height:88px;}
    .fancybox-button--left::after, .fancybox-button--right::after {width:18px; height:18px; margin:18px;}
    .fancybox-button--left {left:0;}
    .fancybox-button--right {right:0;}
    .fancybox-infobar__body {position: absolute; top: 0;}
    .fancybox-infobar__body, .fancybox-button--left, .fancybox-button--right, .fancybox-buttons {z-index:99994;}
    .fancybox-bg {background:#efece4; }
    .fancybox-infobar {display:none;}
    .fancybox-container--ready .fancybox-bg {opacity:0.90;}
    .fancybox-image, .fancybox-spaceball {width:90%; height:90%; top:5%; left:5%;}

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Browser UPDATE~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .buorg {position:absolute; top:0px; left:0px; border-bottom:1px solid #A29330; background:#FDF2AB no-repeat 1em 0.55em url(http://browser-update.org/img/dialog-warning.gif); text-align:left; cursor:pointer; font-family: Arial,Helvetica,sans-serif; color:#000; font-size: 16px;}
    .buorg div {padding:5px 36px 5px 40px;}
    .buorg a {color:#E25600;}
    #buorgclose {position: absolute; right: .5em; top:.2em; height: 20px; width: 12px; font-weight: bold; font-size:14px; padding:0;}

    /* Instagram Overlay */
    .social-cont {
        position: absolute;
        top: 30%;
        right: 0;
    }
    .social {
        background: rgba(156,130,71,0.7);
        transition: all 0.5s;
        margin-bottom: .25em;
    }
    .social a {
        display: block;
        padding: 1em;
    }
    .social:hover {
        background: rgba(156,130,71,0.9);
        transition: all 0.5s;
    }
    .social:hover img {
        transform: rotate(360deg);
        transition: 0.5s ease-out;
    }
    .social img {
        width: 30px;
        height: 30px;
        display: block;
        transition: 0.5s ease-out;
    }

    }
    @media only screen and (min-width: 1025px) {
    /*.flexslider.start li:nth-child(1) img, .flexslider.start li:nth-child(2) img, .flexslider.start li:nth-child(3) img {min-height:650px;}*/
    .flexslider.start li img {min-height:650px;}
    #karten-wrapper, #lagenkarte { height:650px; }
    #lagenkarte {width:650px; }
    auswahl-box {width:45%;}
    }
    @media only screen and (min-width: 1100px) {
    .produkt.detail {max-width:1040px; margin:10px auto;}
    .produkt.detail .jahrgang-wrapper {width:8%; padding-top:0;}
    .produkt.detail .produktfoto {width:25%; padding:0 10px;}
    .produkt.detail .beschreibung {width:63%; padding-top:0;}
    .produkt.detail .beschreibung h1 {font-size:270%; line-height:130%;}
    .produkt.detail .beschreibung h2 {font-size:180%; line-height:130%; margin-bottom:15px;}
    .produkt.detail .beschreibung .preis {font-size:170%; margin:15px 0;}
    #back-link {max-width:1040px; margin:0 auto;}
    #back-link a, #back-link a:link  {margin-left:390px; text-align:left; padding:20px 0; }
    }
    @media only screen and (min-width: 1240px) {
    .produkt.kachel .beschreibung {min-height:400px;}
    .produkt.kachel .beschreibung h1 {font-size:150%; line-height:130%; margin-bottom:5px;}
    .produkt.kachel .beschreibung h2 {font-size:130%; line-height:130%; margin-bottom:15px;}
    .produkt.kachel .beschreibung p {margin-bottom:3px;}
    .produkt.kachel .beschreibung .zusatzlink {font-size:130%; margin:10px 0;}
    .produkt.kachel .beschreibung .preis {font-size:150%; margin:15px 0;}
    .produkt.kachel .auswahl {margin:20px 0 0 0;}
    .produkt.kachel .produktfoto figure a:hover img, .produkt.kachel .produktfoto figure a:focus img {bottom:20px;}

    .galerie-cont {padding:0 5%;}
    .galerie-box {width:210px;}

    #popupwindow {left:15%; width:70%;}
    #popupwindow-innen h1 {font-size:300%;}
    }
    @media only screen and (min-width: 1421px) {
    h1 {font-size:390%; line-height:150%; margin:20px 0 10px 0;}
    h2, h3 {font-size:140%; line-height:120%; margin:7px 0;}

    #karten-wrapper, #lagenkarte {height:700px; }
    #lagenkarte {width:700px; }

    .bannerbild h2 {font-size:320%; top:4%;}
    .produkt.auswahl-box{width:40%;}
    .produkt.auswahl-boxh2 {font-size:200%; }

    .galerie-cont {padding:0 10%;}
    .galerie-box {width:230px; }

    .alsDetail {padding:0 10%;}
    .alsListe {margin:0 20%;}
    .logos-fremd figure {width:80px; height:80px; margin:0 10px 20px 10px;}
    footer {margin:50px auto;}
    address p, .footer-text p {font-size:90%; line-height:150%;}

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

    #karten-wrapper, #lagenkarte {height:750px; }
    #lagenkarte {width:750px; }
    .produkt.auswahl-box{width:37%;}
    }
    @media screen and (min-width: 1600px)  {
    #news-cont {left:3%; top:5%;}
    .kreis.topnews {width:240px; height:240px;}
    .kreis.topnews .text h1 {font-size:150%; line-height:1.5em;}
    .kreis.topnews .text h2 {font-size:120%;}
    .kreis.topnews .text p {font-size:110%; line-height:1.2em;}
    .kreis-cont.links {margin-left:5%; width:35%;}
    .kreis-cont.rechts  {margin-right:5%; width:35%;}
    .kreis {width:170px; height:170px;}
    .kreis .text {bottom:20px;}
    .alsDetail {padding:0 15%;}
    .zwei-spalten {padding:25px 0;}

    #karten-wrapper, #lagenkarte {height:800px; }
    #lagenkarte {width:800px; }

    .galerie-cont {padding:0 15%;}
    .galerie-box {width:250px; }

    }
    @media only screen and (min-width: 1681px) {
    /*.flexslider.start li:nth-child(1) img, .flexslider.start li:nth-child(2) img, .flexslider.start li:nth-child(3) img {min-height:940px;}*/
    .flexslider.start li img {min-height:940px;}
    #karten-wrapper, #lagenkarte {height:940px; }
    #lagenkarte {width:940px; }

    .produkt.kachel {width:45%; padding:15px 0; }
    .produkt.kachel:nth-child(1n) {margin:5% 0 50px 5%;}
    .produkt.kachel:nth-child(2n) {margin:5% 5% 50px 0;}
    .produkt.kachel .beschreibung h1 {font-size:200%; line-height:130%; margin-bottom:5px;}
    .produkt.kachel .produktfoto {width:27%; margin:0 2%;}
    .produkt.kachel .beschreibung {width:65%;}

    .logo-umathum, .logos-fremd {width:16%;}
    .logos-fremd {margin-top:0px;}
    address, .footer-text, .footer-text.offen {width:22%;}
    }
    @media only screen and (min-width: 1921px) {
    #menu-wrapper {padding:0 15%;}
    /*.flexslider.start li:nth-child(1) img, .flexslider.start li:nth-child(2) img, .flexslider.start li:nth-child(3) img {min-height:1170px;}*/

    .flexslider.start li img {min-height:1170px;}
    #karten-wrapper, #lagenkarte {height:1170px; }
    #lagenkarte {width:1170px; }

    .produkt.kachel {width:40%; padding:15px 0; }
    .produkt.kachel:nth-child(1n) {margin:5% 0 50px 10%;}
    .produkt.kachel:nth-child(2n) {margin:5% 10% 50px 0;}

    .alsDetail {padding:0 20%;}
    .logo-umathum, .logos-fremd, address, .footer-text,  .footer-text.offen {width:20%; }
    footer {margin:70px auto; padding:40px 40px 10px 40px;}
    .logo-umathum figure {width:100%;}
    address, .footer-text {padding-left:2%;}

    }
    @media only screen and (min-width: 2200px) {
    .produkt.kachel {width:35%; }
    .produkt.kachel:nth-child(1n) {margin:5% 0 50px 15%;}
    .produkt.kachel:nth-child(2n) {margin:5% 15% 50px 0;}
    }
    @media screen and (max-width: 1240px)  {
    #header-mitte {width:100%; }
    #icon-wrapper {right:30px;}



    .listen-cont, .galerie-cont {margin-top:20px;}

    }
    @media screen and (max-width: 1040px)  {

    #menu {width:50%; border-right:1px solid #cecece; }
    #menu {display:none; top:0; left:0; padding:0; max-width:560px; width:100%; padding-top:98px; box-shadow:0px 15px 15px rgba(0,0,0,0.2);}

    #menu ul {width:100%; padding:0; -webkit-flex-flow:column; animation:none; border-top:1px solid #cecece;}
    #menu ul li a.menu-pfeil::after, #menu ul li a.menu-but::after, #menu ul li ul li a.menu-pfeil-sub::after, #menu ul li ul li a.menu-but-sub::after {position:absolute; margin:0; top:15px; right:7px; display:inline-block; width:20px; height:20px; content:"";}
    #menu ul li ul li a.menu-pfeil-sub::after, #menu ul li ul li a.menu-but-sub::after {right:22px; top:7px;}
    /* ~~~ Menu 1. Ebene ~~~ */
        #menu ul li {width:100% }
        #menu ul li a, #menu ul li a:link {padding:0.6em 10px 0.6em 0; border-bottom:1px solid #cecece; font-size:110%;}
    /* ~~~ #menu ul li a.menu-but::after {top:15px; right:15px; background: url("./assets/images/pfeil-menu-auf.svg"); }
        #menu ul li a.menu-pfeil::after {background:url("./assets/images/pfeil-menu-zu.svg"); } ~~~ */
        #menu ul li a.menu-but::after {background:transparent url("./assets/images/pfeil-menu-auf.svg") 0 0 no-repeat; background-size:contain; }
        #menu ul li a.menu-pfeil::after {background:transparent url("./assets/images/pfeil-menu-zu.svg") 0 0 no-repeat; background-size:contain; }
            #menu ul li.akt a.menu-but::after {background:transparent url("./assets/images/pfeil-menu-auf.svg") 0 0 no-repeat; background-size:contain; }
        #menu ul li.akt a.menu-pfeil::after {background:transparent url("./assets/images/pfeil-menu-zu.svg") 0 0 no-repeat; background-size:contain; }

        /* ~~~ Menu 2. Ebene ~~~ */
        #menu ul li ul, #menu ul li.akt ul {display:none; border-top:none;}
        #menu ul li ul li {padding-right:20px;}
        #menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link {padding:0.3em 15px 0.3em 15px; line-height:1.5em; font-size:100%;}
        #menu ul li ul li a.menu-but-sub::after {background:transparent url("./assets/images/pfeil-menu-auf-sub.svg") 0 0 no-repeat; background-size:contain;  }
        #menu ul li ul li a.menu-pfeil-sub::after {background:transparent url("./assets/images/pfeil-menu-zu-sub.svg") 0 0 no-repeat; background-size:contain;  }
        #menu ul li.akt ul li.akt a, #menu ul li.akt ul li.akt a:link {margin-left:0;}

        /* ~~~ Menu 3. Ebene ~~~ */
        #menu ul li ul li ul, #menu ul li.akt ul li ul {display:none; border-bottom:none;}
        #menu ul li ul li ul li a, #menu ul li ul li ul li a:link, #menu ul li.akt ul li.akt ul li a, #menu ul li.akt ul li.akt ul li a:link {border:none; padding:0.15em 0em 0.25em 30px; font-size:100%;}
        #menu ul li.akt ul li.akt ul li a::before {content: "";}

    .alsDetail {padding:0;}
    .stern {padding-left:40%;}
    .kreis-cont.links .kreis {margin-left:5%;}
    .kreis-cont.rechts .kreis {margin-right:5%;}

    .beitrag figure.ganze-breite {margin:5px 0;}
    .fancybox-button--close::after, .fancybox-button--close::before {height: 4px; width: 30px; top: calc(50% - 6px); left: calc(50% - 12px);}

    .produkt.box{width:50%;}
    .produkt.boxh2 {font-size:150%;}

    .produkt.kachel, .produkt.kachel:nth-child(1n), .produkt.kachel:nth-child(2n) {width:60% !important; margin:0 auto 100px auto !important; }
    .produkt.kachel:first-child { margin:100px auto 100px auto !important;}

    .produkt.kachel::before {width:90%; height:90%; left:5%; top:5%; background:rgba(156,139,71,0.0); z-index:-1; transition:all 0.5s ease-out;}
    .produkt.kachel:hover::before, .produkt.kachel:focus::before {width:100%; height:100%; content:""; position:absolute; left:0; top:0; background:rgba(156,139,71,0.15); z-index:-1; transition:all 0.5s ease-out;}

    .produkt.kachel .beschreibung {margin-bottom:0;}

    .produkt.kachel .auswahl {width:70%; min-width:170px; height:auto; margin:10px 0;}
    .auswahl .anzahl {width:50%; height:45px; }
    .anzahl .plus a, .anzahl .plus a:link, .anzahl .minus a, .anzahl .minus a:link {display:block; width:100%; height:100%; padding-top:9px;}
    .anzahl .minus a:link {padding-top:7px;}
    .anzahl .plus, .anzahl .minus {font-size:150%;}
    input.zahl {height:50px; font-size:120%;}
    .in-warenkorb {width:50%; height:45px;}

    footer {margin:20px auto;}
    address h2, .footer-text h2 {font-size:130%; line-height:120%; margin-bottom:5px;}
    .logo-umathum {width:20%; margin:0 5% 0 25%;}
    .logo-umathum figure {width:100%;}
    address {width:50%; margin-bottom:30px;}
    .footer-text.offen {width:50%;}
    .footer-text {width:35%;}
    .logos-fremd {width:15%; margin:0;}

    }
    @media screen and (max-width: 900px)  {
    #menu {max-width:55%;}
    /*.flexslider.start li:nth-child(1) img, .flexslider.start li:nth-child(2) img,.flexslider.start li:nth-child(3) img {min-height:500px; } */
    .flexslider.start li img {min-height:500px; }
    #karten-wrapper, #lagenkarte {height:500px; }
    #lagenkarte {width:500px; }

    .fancybox-button--left, .fancybox-button--right {width:74px; }
    .fancybox-placeholder::before {top:-15px; left:-15px; right:-15px; bottom:-15px;}
    .fancybox-placeholder {width:96%; margin:0 auto;}

    .kreis-cont.links .kreis {margin-left:2%;}
    .kreis-cont.rechts .kreis {margin-right:2%;}

    .produkt.detail .beschreibung {width:55%;}
    .produkt.kachel, .produkt.kachel:nth-child(1n), .produkt.kachel:nth-child(2n) {width:70% !important;}
    }
    @media screen and (max-width: 800px)  {

    #news-cont, .kreis-cont.links, .kreis-cont.rechts {display:none; }
    #logo {left:3%;}
    #icon-wrapper {right:2%;}
    .bannerbild h2 {top:80%; font-size:170%;}

    .listen-cont {-webkit-justify-content:space-between; justify-content:space-between;}

    .produkt.box{width:86%; margin:0 7% 0 7%;}
    .produkt.kachel, .produkt.kachel:nth-child(1n), .produkt.kachel:nth-child(2n) {width:80% !important;}
    .produkt.kachel.Gutscheine, .produkt.kachel.Gutscheine:nth-child(1n), .produkt.kachel.Gutscheine:nth-child(2n) {width:80%; margin:30px 0 30px 10%; padding-top:36%; }
    .produkt.kachel.Gutscheine .produktfoto {width:80%; margin:0 0 0 10%;}
    .produkt.kachel.Gutscheine .beschreibung {width:70%; margin:0 auto;}

    .galerie-box {width:23%;}

    .alsListe {margin:0 7% 20px 7%;}
    .stern {padding-left:35%;}

    .event {-webkit-flex-flow:column; flex-flow:column;}
    #quickbut-cont {-webkit-justify-content:center; justify-content:center; }
    .quickbut {width:20%; }
    .quickbut figure {width:60px; height:60px; }
    #footer-logos figure {width:24%; margin:20px 3%;}

    .flex-direction-nav, .flex-control-nav {display:none;}

    #footer-wrapper {padding-bottom:10px; margin-bottom:10px;}
    address {margin-bottom:0; padding-left:0;}
    .footer-text.offen {width:100%; padding:10px 0; margin:15px 0; border-top:1px solid #fff; border-bottom:1px solid #fff;}
    .footer-text.offen h2, .footer-text.offen p {text-align:center;}
    .logo-umathum {width:30%; margin:0 5% 0 15%;}
    .logo-umathum figure {width:100%;}
    address {width:50%; margin-bottom:30px;}
    .footer-text {width:50%;  -webkit-order:5; order:5;}
    .logos-fremd {width:30%; margin:0 5% 0 15%; -webkit-order:4; order:4;}
    #footer-menu {font-size:120%;}
    #footer-menu li a, #footer-menu li a:link {padding:20px;}
    }
    @media screen and (max-width: 700px)  {
    .gutschein-wert-anzeige {top:220px; }
    .galerie-box {width:31%;}
    }
    @media screen and (max-width: 640px)  {
    .flexslider.start li img {min-height:390px;}
    #karten-wrapper, #lagenkarte {height:450px; }
    #lagenkarte {width:450px; }
    .gutschein-wert-anzeige {top:210px; }



    footer {width:95%; margin:15px auto 15px auto; }
    #footer-wrapper {padding-bottom:15px; margin-bottom:15px;}
    .logo-umathum, .logos-fremd {width:30%; margin:0 3% 0 0;}
    address, .footer-text {width:67%; margin-bottom:0;}
    #footer-menu li a, #footer-menu li a:link {padding:10px;}
    }
    @media screen and (max-width: 600px)  {
    body {font-size:105%; }
    header {height:50px;}
    #logo {width:106px; height:45px; top:7px; left:15px;}
    #menu-smart {top:5px; margin-right:-20px;}
    #menu-smart #but-cont, #menu-smart #but-cont a, #menu-smart #but-cont a:link {width:40px; height:40px;}
    #menu-smart .but { width:40px; height:40px;left:5px; top:5px;}
    #menu-smart .but span.menu1, #menu-smart .but span.menu2, #menu-smart .but span.menu3 {width:30px; height:2px; left:0;}
    #menu-smart .but span.menu1 {top:4px;}
    #menu-smart .but span.menu2 {top:12px;}
    #menu-smart .but span.menu3 {top:20px;}
    #menu {min-width:320px; padding-top:46px; }
    #search-toggle, #search-toggle a, #search-toggle a:link, #menu-smart #but-cont {width:40px; height:40px; }
    #icon-wrapper {height:50px;}
    #search-toggle, #warenkorb, #sprachwahl {width:45px; height:45px;}
    #search-toggle, #search-toggle a, #search-toggle a:link, #menu-smart #but-cont, #warenkorb a, #warenkorb a:link, #sprachwahl a, #sprachwahl a:link,#sprachwahl .de a.language-link, #sprachwahl .en a.language-link {width:40px; height:40px; }
    #search-field {top:60px;}
    #warenkorb .menge {font-size:110%; top:10px; left:-2px;}
    #content-wrapper {width:95%; padding:0 auto;}

    .bannerbild .figure-copyright {top:0; bottom:90%;}

    .produkt.box{width:100%; margin:0;}
    .produkt.kachel, .produkt.kachel:nth-child(1n), .produkt.kachel:nth-child(2n) {width:98% !important;}

    .produkt.kachel.Gutscheine, .produkt.kachel.Gutscheine:nth-child(1n), .produkt.kachel.Gutscheine:nth-child(2n) {width:98%; margin:30px auto; padding-top:45%; }
    .produkt.kachel.Gutscheine .produktfoto {width:90%; margin:0 auto;}

    .produkt.detail {-webkit-justify-content:center; justify-content:center; }
    .produkt.detail .jahrgang-wrapper {width:80px; padding-top:30px;}
    .produkt.detail .produktfoto {width:130px; margin-right:70px;}
    .produkt.detail .beschreibung {width:100%; padding-top:10px; text-align:center;}
    .produkt.detail .beschreibung, .produkt.detail .beschreibung h1, .produkt.detail .beschreibung h2 {text-align:center;}
    .produkt.detail .beschreibung .auswahl {margin:20px auto;}

    .produkt.detail.Gutscheine .produktfoto, .produkt.detail.Gutscheine .beschreibung {width:100%; margin:0;}
    .produkt.detail.gutschein.Gutscheine .produktfoto {width:70%;}
    .gutschein-wert-anzeige {top:50%; }
    #popupwindow {top:70px;}

    #zusatz-menu, #back-link {padding:15px 0; font-size:120%;}
    #zusatz-menu, #back-link {padding:0;}
    /* ~~~ ZUSATZ-Menu 1. Ebene ~~~ */
    #zusatz-menu ul {position:relative; width:100%; }
    #zusatz-menu ul li a, #zusatz-menu ul li a:link {padding:15px 0;}
    #zusatz-menu ul li a.menu-pfeil::after, #zusatz-menu ul li a.menu-but::after {content:""; position:absolute; width:15px; height:15px; right:20px; top:20px;}
    #zusatz-menu ul li ul {top:55px; left:0px; animation:none; padding:10px 0 20px 0; box-shadow:0px 7px 7px rgba(0,0,0,0.2); }

    .alsDetail {padding:0 0 20px 0; }
    .alsListe {margin:0; }
    .einleitung {text-align:justify;}
    h1 {font-size:180%;}
    h2 {font-size:140%;}
    .form-field {padding:10px; }
    .beitrag table, .beitrag thead, .beitrag tbody, .beitrag tfoot, .beitrag th, .beitrag td, .beitrag tr, #angaben-cont table, #angaben-cont tbody, #angaben-cont tr, #angaben-cont td, #angaben-cont th {display:block; width: 100%;}
    .beitrag th {padding:3px 5px 3px 5px; }
    .beitrag thead tr {position: absolute; top: -9999px; left: -9999px; padding-bottom:10px;}
    .beitrag td {position:relative; padding:5px 0 0 0; }
    .beitrag td:first-child { width:95%; text-align:left; padding:0; margin-bottom:0.0em;}
    .submit, input, select, textarea {width:100%;}
    .shopping-cart td:first-child, .shopping-cart th, .shopping-cart td, .shopping-cart thead th {width:auto; padding:7px 5px;}
    .shopping-cart td.product-thumbnail {padding:0;}
    .shopping-cart td.product-thumbnail img {height:70px; width:auto; margin:10px 0 0 0;}
    .shopping-cart tr {padding-left:20%;}
    .shopping-cart th.price, .shopping-cart td.price, .shopping-cart th.total-price, .shopping-cart td.total-price {text-align:left;}
    #shopping-cart-button {float:none; clear:both; text-align:center;}
    .shopping-cart td.remove-button::after {bottom:0px;}
    .shopping-cart table {border-top:1px solid #9c8247;}

    .fancybox-image, .fancybox-spaceball {width:86%; height:86%; top:7%; left:7%;}
    .fancybox-caption {padding: 10px 0 10px 0; font-size: 100%; line-height:100%;}}
    @media screen and (max-width: 550px)  {
    .beitrag .bild, .beitrag bild.hochformat {width:100%; float:none; clear:both;}
    .alsListe .bild {width:100%; float:none;}
    .alsListe .listentext {margin-left:0; width:100%; }
    .zwei-spalten {-webkit-column-count:1; -webkit-column-gap:0; column-count:1; column-gap:0; padding:0;}
    .zwei-spalten p {text-align:left;}


    .produkt.kachel .produktfoto {width:30%;}
    .produkt.kachel .beschreibung {width:66%;}

    .galerie-box {width:47%;}
    }
    @media screen and (max-width: 500px)  {
    #search-field {right:-50%;}
    #menu, #menu-wrapper {max-width:100%; border-right:none; box-shadow:none;}
    /*.flexslider.start li:nth-child(1) img, .flexslider.start li:nth-child(2) img,.flexslider.start li:nth-child(3) img {min-height:385px; }*/
    .flexslider.start li img{min-height:385px; }
    #karten-wrapper, #lagenkarte {height:385px; }
    #lagenkarte {width:385px; }

    #icon-wrapper {right:30%; }

    #menu-smart {right:0%; margin-right:15px;}
    #menu-cont {-webkit-align-items:flex-end; align-items:flex-end;}

    .bannerbild h2 {top:70%; }
    .produkt.kachel .beschreibung {min-height:320px;}
    .produkt.kachel:first-child {margin:30px auto !important;}
    .produkt.kachel:nth-child(1n), .produkt.kachel:nth-child(2n) {margin-bottom:30px !important;}
    .auswahl .anzahl {width:65%; }
    .in-warenkorb {width:35%;}

    .beitrag .bild.hochformat, .beitrag .bild.links, .beitrag .bild.rechts, .js-faq-content figure {width:100%; float:none; margin:0 0 7px 0;}
    .stern {padding-left:30%;}

    footer {padding:10px;}
    }
    @media screen and (max-width: 420px)  {
    #karten-wrapper, #lagenkarte {height:365px; }
    #lagenkarte {width:365px; }
    .produkt.kachel, .produkt.kachel:nth-child(1n), .produkt.kachel:nth-child(2n) {margin-bottom:20px !important;}
    }
    @media screen and (max-width: 400px)  {
    #icon-wrapper {right:25%; }
    #search-field {width:300px; right:-45%;}
    #karten-wrapper, #lagenkarte {height:345px; }
    #lagenkarte {width:345px; }
    .produkt.kachel { margin:10px auto 10px auto !important;}
    .produkt.kachel .produktfoto {width:36%;}
    .produkt.kachel .beschreibung {width:60%;}
    .produkt.kachel.Gutscheine .produktfoto {width:95%; }
    .produkt.kachel.Gutscheine .beschreibung {width:90%; }
    .produkt.detail.gutschein.Gutscheine .produktfoto {width:100%;}
    .stern {padding-left:25%;}
    }
    @media screen and (max-width: 360px)  {
    #search-field {right:-40%;}
    #icon-wrapper {right:20%; }
    /*.flexslider.start li:nth-child(1) img, .flexslider.start li:nth-child(2) img,.flexslider.start li:nth-child(3) img {min-height:400px; } */
    .flexslider.start li img {min-height:400px; }
    #karten-wrapper, #lagenkarte {height:305px; }
    #lagenkarte {width:305px; }

    .produkt.kachel .beschreibung {min-height:280px;}
    .produkt.kachel:first-child {margin:10px auto !important;}
    .produkt.kachel:nth-child(1n), .produkt.kachel:nth-child(2n) {margin-bottom:10px !important;}

    #menu ul li a, #menu ul li a:link {padding:0.3em 10px 0.3em 0; }
    #menu ul li a.menu-pfeil::after, #menu ul li a.menu-but::after, #menu ul li ul li a.menu-pfeil-sub::after, #menu ul li ul li a.menu-but-sub::after {top:10px; }

    .bannerbild h2 {top:60%; }
    }
    @media print {
    body {background:#fff;color:#000; font: normal 0.85em/1.4em Open Sans, Sans-Serif, Arial, Verdana, Helvetica; }
    h1, h2, h3 {font-family: 'Arvo', Arial, Verdana, sans-serif; }
    h1 {font-size:160%;}
    #icon-wrapper, #search-field, #menu-cont, #menu-smart, .mehrlink, .tandler, #pfeil-nach-oben-cont, .flex-control-nav {display:none;}
    header {height:86px; border-bottom:1px solid #7b88a0; margin-bottom:15px;}
    #illu, #illu a, #illu a:link {margin-top:0; width:320px; height:86px;}
    .bannerbild {margin-top:10px;}
    p.mehrlink a {background:none;}
    .listen-cont, #quickbut-cont {-webkit-justify-content:space-between; justify-content:space-between; padding-bottom:20px;}
    .beitrag.produkt.box{max-width:32%; margin:0 0 20px 0;}
    .beitrag .alsDetail .videobox {width:50%; margin:0 auto;}
    .bannerbild .teaser {bottom:5px; right:5px; max-width:60%; padding:10px; }
    .figure-copyright {background:rgba(255,255,255,0.8); color:#000;}
    .figure-copyright-content {opacity:1;}
    .figure-copyright:hover {background:rgba(255,255,255,0.8); color:#000;}
    nav, header, main, #content-wrapper, #content, .beitrag {width:100%; padding:0; margin:0;}
    #footer-logos {-webkit-justify-content:space-around; justify-content:space-around; }
    #footer-logos figure {width:25%; margin:20px 0;}
    }
    #block-logo.contextual-region {
        position: unset;
    }

    /* 0404/2019 - custom css*/

    input.button--add-to-cart {

    width: 100px;
    height: 60px;
    border-right: 1px solid #9c8247;
    box-shadow: none;
    background: url(./assets/images/icon-warenkorbr.svg) 0 0 no-repeat;
    background-position: center;
    font-size: 0px;
    background-size: 30% 70%;
    cursor: pointer;
    border-radius:unset;
    }


    #search-block-form .form-item { display:inline-block; width:200px; height:35px; color:#000; font-size:90%; padding:0 5px; vertical-align:bottom; border:1px solid #bbb;}

            #search-block-form .form-item input {   border:none; box-shadow:none; background:none;}
            #search-block-form .form-actions{ display:inline-block;}
            #search-form {
                padding: 0 15%;
            }
    /*#block-umathum-content h2{
        text-align: center;
    }		*/
    .margin-top-40 {
        margin-top: 40px;
    }
    .align-center{
        text-align: center;
    }
    .quntity-amount .form-number{width:50px; height:auto; background:none; padding:5px; box-shadow:none; font-size:100%; font-weight:400; text-align:center; color:#000; border:1px solid #9c8247;}

    .shopping-cart .form-actions {
        float: right;
        clear: right;
        text-align: right;
    }
    .shopping-cart #edit-submit.form-submit {
        background: #fff;
        color: #9c8247;
        border: 1px solid #9c8247;
        margin-right: 10px;
    }
    .checkout-progress.clearfix {
        padding: 40px 0px;
    }
    .layout-checkout-form, .user_account #block-umathum-content {
        background: #f0ece4;
        padding: 0.75em 1em;
    }

    fieldset.checkout-pane { padding:0.5em 1em;  margin:0.5em 0;}


    div.address-container-inline > .form-item {
        display: inline-block;
         margin-right: 0.5em;
        width: 45%;
    }

    .checkout-pane label,.user_account label {
        display: table;
    }
    .checkout-pane input, .checkout-pane textarea, .checkout-pane select, .user_account input, .user_account textarea, .user_account select {
        margin: 10px 0px 5px;
    }
    .fieldset-wrapper {
        padding: 10px;
    }
    .layout-region-checkout-secondary h3{
        margin-bottom:20px;
    }
    .checkout-pane-order-summary, .checkout-pane-coupon-redemption {
        padding: 0.5em 1em;
        border: 2px solid #fff;
        margin: 40px 0;
    }
    .fieldset-legend {
        font-size: 140%;
        line-height: 120%;
        margin: 7px 0;
        color:#9c8247;
        font-family: 'Oswald', serif, Arial, Verdana, sans-serif;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 0.05em;

    }
    input.button--add-to-cart:hover{
        background-color:transparent;
    }

    .checkout-progress li {
        background: #9c8247 !important;
    }
    .checkout-progress li:hover {
        background: #000 !important;
    }

    .layout-region-checkout-secondary table {

        width: 100%;
    }
    .checkout-pane-order-summary td:first-child, .checkout-pane-order-summary th, .checkout-pane-order-summary td, .checkout-pane-order-summary thead th {
        width: auto;
        padding: 10px 5px 10px 5px;
    }
    .checkout-pane-payment-information legend{
        margin: 0;
    }
    legend {

        margin: 10px 0em 10px 0em;
    }
    .checkout-pane-order-summary footer {
        margin: 0px;
        padding: 0px 5px;
        width: 100%;
    }

    #block-umathum-local-tasks ul {
        width: 100%;
        list-style: none;
    }
    #block-umathum-local-tasks ul li{
        list-style: none;
        display: inline-block;
        width: auto;
        max-width: 100%;
        margin: 0.75em 0 0.75em 0;
        padding: 0.5em 1.5em;
        cursor: pointer;
        box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.45);
        border-radius: 5px;
        text-align: center;
        font-size: 1em;
        overflow: hidden;
        border: 1px solid #9c8247;
        background-color: #9c8247;
        color: #fff;
        transition: all 0.5s ease-out;
    }

    #block-umathum-local-tasks ul li a{
    color: #fff;
    }

    .order-status {
        text-align: center !important;
    }

    .order-information {
        padding: 20px 60px;
        background-color: #fff;
        /* box-shadow: blue; */
        /* border: 1px solid #000; */
    }

    .order-information.custom .field__label,.order-header-left  {
        background-color: #f0ece4;
        padding: 10px;
        font-weight: bold;
        margin: 20px 0px;
    }
    .order-header-left div {
        display: inline-block;
    }

    .order-information.custom .views-field-total-price__number {
        text-align:right;
    }

    .views-col {
        float: left;
        padding: 20px;
        margin: 10px 0px;
    }

    .views-col li {
        background: none;
        padding: 0px;
    }


    .commerce-order-item-add-to-cart-form {
        display:flex;
        margin: 20px 0;
    }

    .produkt.kachel.Gutscheine .commerce-order-item-add-to-cart-form {margin:20px 0 0 45px;}



    .commerce-order-item-add-to-cart-form   input.form-number {
        width: 100px;
        height: 60px;
        background: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        font-size: 140%;
        font-weight: 400;
        text-align: center;
        color: #9c8247;
        border: 1px solid #9c8247;
        border-right: none;
    }

    #edit-order-fieldscheckout {
        padding: 0.5em 1.5em;
    }
    .checkbox-error label{
        border: 1px solid red;
    }
    #back-link div {
        display: inline-block;
    }

    .pager__items {
        margin:1em auto;
        text-align:center;
        max-width:600px;
    }
    .pager__items li {
        float:left;
        padding:5px;
        margin:7px;

    }
    .disabledbutton {
        pointer-events: none;
        opacity: 0.4;
    }
    @media only screen and (max-width: 600px) {
    .produkt.kachel.Gutscheine .commerce-order-item-add-to-cart-form {margin:20px 0 0 30px;}
    }
    @media only screen and (max-width: 560px) {
    .produkt.kachel.Gutscheine .commerce-order-item-add-to-cart-form {margin:20px 0 0 20px;}
    }
    @media only screen and (max-width: 460px) {
    .produkt.kachel.Gutscheine .commerce-order-item-add-to-cart-form {margin:20px 0 0 10px;}
    }
    @media only screen and (max-width: 360px) {
    .produkt.kachel.Gutscheine .commerce-order-item-add-to-cart-form {margin:20px 0 0 0px;}
    }

    .winelist td, th.views-field {
      padding:0 15px 0 0;
      text-align:left;
      font-weight:normal;

    }

    .winelist-table th {
     font-weight:bold;
    }


    #edit-payment-information .fieldset-wrapper{
       display: -webkit-flex; /* Safari 6.1+ */
       display: flex;
       -webkit-flex-direction: column; /* Safari 6.1+ */
       flex-direction: column;

    }

    #edit-payment-information-payment-method--wrapper, fieldset[data-drupal-selector~="edit-payment-information-payment-method"] {

        -webkit-order: 1; /* Safari 6.1+ */
        order:1;
    }

    #edit-payment-information-add-payment-method{
    -webkit-order: 2;
    order:2;
    }

    #edit-payment-information-billing-information{
        -webkit-order: 1; /* Safari 6.1+ */
        order:1;
    }

    #menu-wrapper .contextual {
        padding:0;
        top:60px;
        width:15%;
        font-size:14px;
    }
    #menu-wrapper .contextual ul li {
        width:100%;
        position:static;
    }
    #menu-wrapper .contextual ul li a {
        font-size:14px;
        display:block;
        float:none;
        padding:0;
    }

    .language-switcher-language-url .links {
        display:flex;
        align-content: center;
    }
    label.form-required:after {
        content:' *';
    }
    @media only screen and (max-width: 600px) {
      .winelist-table th {display:none;}
      .winelist-table td {display:block;}
      .winelist-table tr:nth-of-type(even) {background-color:#F0ECE4};
    }
    div[role=alert], div[role=alert] ul li {color:#F00;font-weight:bold;}


    .social-cont {
        position: absolute;
        top: 30%;
        right: 0;
        z-index:50;
    }

    .social {
        background: rgba(156,130,71,0.7);
        transition: all 0.5s;
        margin-bottom: .25em;
    }

    .social a {
        display: block;
        padding: 1em;
    }

    .social:hover {
        background: rgba(156,130,71,0.9);
        transition: all 0.5s;
    }

    .social:hover img {
        transform: rotate(360deg);
        transition: 0.5s ease-out;
    }

    .social img {
        width: 30px;
        height: 30px;
        display: block;
        transition: 0.5s ease-out;
    }

    main, #content-wrapper {
        overflow:visible;
    }

    h1 sup {
        font-size: 60%;
    }

    button.in-warenkorb {
        background-color: initial;
    }
    p.mehrlink a, p.mehrlink a:link {
        z-index: 0;
    }

    ul.links {
        display: flex;
        align-items: center;
        height: 60px;
    }
    ul.links li {
        width: 24px;
        height: 24px;
    }
    ul.links li:first-child {
        position: relative;
    }
    ul.links li:first-child::after {
        content: ' | ';
        position: absolute;
        right: -3px;
        top: -2px;
    }
    .winelist-table th {
        padding-left: 0;
        padding-right: 15px;
    }
    .ausverkauft {
        font-size: 1.5em;
        line-height: 1em;
        margin-top: .5em;
        color: red;
    }

    /* wordpress styles */
    .wp-block-embed__wrapper {
        position: relative;
        padding-bottom: 55%;
    }
    .wp-block-embed iframe {
        max-width: 100%;
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image {
        display: inline-block;
    }
    .wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption, .wp-block-image>figcaption{
        display: block;
    }

    /* woocommerce */
    header.woocommerce-products-header {
        z-index: 0;
    }
    .woocommerce-info {
        border-top-color: #9c8247;
    }
    .woocommerce-info::before {
        color: #9c8247;
    }
    .woocommerce a.remove {
        display: inline-block;
        height: 40px;
        width: 40px;
        padding: 0;
        background: #fff;
        color: #000 !important;
        cursor: pointer;
        text-indent: 3em;
        background: url(./assets/images/remove-bucket.svg) 0 0 no-repeat !important;
        background-size: 70% !important;
        background-position: center !important;
        margin: 0px;
        border-radius: 5px;
        border: 1px solid #efefef;
        box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 45%);
        transition: all 0.5s ease-out;
    }
    .woocommerce a.remove:hover,
    .woocommerce .cart .button:hover {
        box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 45%);
        transition: all 0.5s ease-out;
    }
    .woocommerce-cart-form thead {
        background: #f0ece4;
    }
    .woocommerce table.shop_table {
        padding: 0;
    }
    .woocommerce table.cart img {
        height: 70px;
        width: auto;
        margin: 5px 10px 0 10px;
    }
    .woocommerce .quantity .qty {
        width: 50px;
        height: auto;
        background: none;
        padding: 5px;
        box-shadow: none;
        font-size: 100%;
        font-weight: 400;
        text-align: center;
        color: #000;
        border: 1px solid #9c8247;
    }
    .woocommerce .cart .button {
        background: #fff;
        color: #9c8247;
        border: 1px solid #9c8247;
        margin-right: 10px;
    }
    .woocommerce button.button {
        color: #9c8247;
        box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 45%);
    }
    .woocommerce button.button:hover {
        background-color: initial;
        color: #9c8247;
    }
    .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
        color: inherit;
        background-color: #ebe9eb;
        box-shadow: none;
    }
    .woocommerce a.button.alt, .woocommerce button.button.alt {
        width: auto;
        max-width: 100%;
        margin: 0.75em 0 0.75em 0;
        padding: 0.5em 1.5em;
        cursor: pointer;
        box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 45%);
        border-radius: 5px;
        text-align: center;
        font-size: 1em;
        overflow: hidden;
        border: 1px solid #9c8247;
        background-color: #9c8247;
        color: #fff;
        transition: all 0.5s ease-out;
    }
    .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
        color: #fff;
        box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 45%);
        transition: all 0.5s ease-out;
        border: 1px solid #000;
        background-color: #000;
    }
    .woocommerce-checkout #payment ul.payment_methods li {
        padding-left: 3.5em;
        background: none;
        background-color: #f7f6f7;
    }
    .woocommerce li {
        background: none;
        padding-left: 0;
    }
    .woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1 {
        margin-bottom: 1em;
    }
    .woocommerce ul.products li.product {
        margin: 0;
    }
    .woocommerce ul.products {
        margin: 3em 0;
    }
    .woocommerce ul.products li.product a:hover {
        text-decoration: underline;
    }
    .woocommerce.columns-2 ul.products li.product {
        width: 50%;
    }
    .woocommerce-shipping-fields h3#ship-to-different-address > label {
        margin: 0;
    }
    .woocommerce-shipping-fields h3#ship-to-different-address > label input {
        height: 26px;
    }
    .woocommerce ul#shipping_method li label,
    .woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-new label {
        display: inline-block;
    }
    .woocommerce ul.products li.product {
        width: 50%;
        padding: 15px 0;
        min-width: 290px;
        margin: 5% 0 50px 0;
    }
    #stripe-payment-data label {
        display: inline-block !important;
    }

    /* Pagination */
    .pagination {
        margin-top: 1em;
        text-align: center;
    }
    .pagination a, .pagination span {
        padding: 0 .5em;
    }

    /* Weintagebuch */
    .weintagebuchauswahl {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .weintagebuchauswahl-element {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 33%;
    }
    .weintagebuchauswahl-element img {
        border-radius: 50%;
        width: 100%;
        max-width: 200px;
        min-width: 80px;
    }
    .weintagebuchauswahl-element img:hover {
        opacity: 90%;
    }

	input[name="myname"]{
        display: none;
    }

    @media screen and (max-width: 700px) {
        .weintagebuchauswahl-element{
            width: 27%;
        }
    }

    @media screen and (max-width: 948px){
        .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details, .wc-bacs-bank-details.order_details.bacs_details {
            display: flex;
            flex-direction: column;
        }
        .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li, .wc-bacs-bank-details.order_details.bacs_details li{
            border: none;
            padding: .25em 0;
        }
    }


#news-cont .kreis.topnews a, #news-cont .kreis.topnews a:link, #news-cont .kreis.topnews a:visited {
	color: #000;
	text-decoration:none;
}
#news-cont .kreis.topnews a:hover, #news-cont .kreis.topnews a:active, #news-cont .kreis.topnews a:focus {
	color: #000;
	text-decoration:underline;
}

	.wpml-ls-display {font-family:'Oswald', serif, Arial, Verdana, sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; margin-left:3px; font-size:16px;}

	.produkt.auswahl-box {margin: 0 0 20px 0;}
	.produkt.auswahl-box p {width:100%; text-align:center;}
	.produkt.auswahl-box h2 {padding:0;}

	@media screen and (max-width: 900px)  {
		.produkt.auswahl-box h2 {font-size:120%; padding:0 0 5px 0;}
	}
	@media screen and (max-width: 550px)  {
		.produkt.auswahl-box {width:80%; margin:0 10% 0 10%;}
	}
	@media screen and (max-width: 800px)  {
		.kreis-cont.links, .kreis-cont.rechts {display:block; }
		#news-cont {display:none;}
		.kreis-cont.links, .kreis-cont.rechts {bottom:1%; width:49%; height:auto; display:flex; flex-flow:row nowrap;}
		.kreis {width:80px; height:80px;}
		.kreis.shop .bild, .kreis.wein .bild, .kreis.news .bild, .kreis.weingut .bild {left:5%; top: -5px; width: 90%;}
		.kreis .text {bottom:22px; height:12px;}
		.kreis .text h2 {font-size:13px; }
	}
	@media screen and (max-width: 600px) {
		#sprachwahl {margin-top:-15px;}
	}

    @media all {
        .produkt.detail.probierpaket-querformat .produktfoto {
            width: 50%;
            margin-top: 60px;
        }

        .produkt.detail.probierpaket-querformat .beschreibung {
            width: 48%;
            margin-left: 2%;
            padding-top: 0;
            }
        }
    @media screen and (max-width: 700px) {
        .produkt.detail.probierpaket-querformat .produktfoto,
        .produkt.detail.probierpaket-querformat .beschreibung {
        width: 100%;
        margin: 0;
        }
    }


/* neu ab Januar 2025 mit Video Button */

@media all {

	.flex-control-nav {
    position: absolute;
    bottom: 0;
    left: 48%;
    z-index: 1600;
    text-align: left;
    font-size: 0px;
	}

	.kreis-cont-start {
		position: absolute;
		z-index: 50;
		width: 100%;
    left: 0;
		bottom: 4%;
		display: flex;
		flex-flow: row nowrap;
    justify-content: center;
	}

	.kreis {
		position:relative;
		width: 135px;
		height: 135px;
		background: rgba(156,130,71,0.7);
		border-radius: 50%;
		text-align: center;
		overflow: hidden;
		transition: all 0.5s ease-out;
		margin: 0 1%;
	}

	.kreis.shop .bild,
	.kreis.wein .bild,
	.kreis.video .bild,
	.kreis.news .bild,
	.kreis.weingut .bild {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: auto;
		transform: rotate(0deg);
		transition: all 0.5s ease;
	}

	.kreis .text {
		position: absolute;
		left: 0;
		bottom: 12px;
		width: 100%;
		height: 30px;
		text-align: center;
		transform: rotate(0deg);
	}

	.kreis .text h2 {
		font-size: 120%;
		margin: 0;
	}

	.kreis.shop:hover .bild {
		left: 0%;
		top: -7%;
		transform: rotate(15deg) scale(1.1);
		transition-duration: 0.5s;
		transform-origin: center center;
	}

	.kreis.wein:hover .bild {
		left: 6%;
		top: 7%;
		transform: rotate(132.5deg);
		transition-duration: 0.7s;
		transform-origin: center center;
	}

	.kreis.video:hover .bild {
		left: 0;
		top: -5%;
		transform: scale(1.3);
		transition-duration: 0.7s;
		transform-origin: center center;
	}

	.kreis.news:hover .bild {
		left: -25%;
		top: -20%;
		transform: rotate(-15deg) scale(1.1);
		transition-duration: 0.5s;
		transform-origin: center center;}

	.kreis.weingut:hover .bild {
		left: 0%;
		top: 0%;
		transform: rotate(360deg);
		transition-duration: 0.8s;
		transform-origin: center center;
	}

	.logos-fremd {
		width: 16%;
		height: auto;
		margin: 0;
		padding: 0 0 10px 0;
		justify-content: flex-start;
		flex-flow: row wrap;
		align-items: flex-start;
	}

	.logos-fremd figure {
		width: 80px;
		height: 80px;
		margin: 0 10px 20px 10px;
	}

	#footer-wrapper {
    padding-bottom: 0;
    margin-bottom: 30px;
	}

}

@media screen and (min-width: 1921px) {
	.logos-fremd {
		width:20%;
		padding: 0 5% 10px 0;
	}

}

@media screen and (min-width: 1601px) {
	.kreis {
		width: 170px;
		height: 170px;
	}
}

@media screen and (max-width: 1680px) {
	.logos-fremd {
		width: 100%;
		justify-content: center;
		margin-top: 20px;
	}
}

@media screen and (max-width: 1600px) {
	.kreis-cont-start {
		bottom: 30px;
	}

	.flex-control-nav {
		bottom: -7px;
		left: 46.5%;
	}
}

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

	.logos-fremd figure {
		width: 60px;
		height: 60px;
		margin: 0 10px 10px;
	}

	.footer-text {
			width: 45%;
	}

	.footer-text.offen {
    width: 40%;
		text-align: right;
		margin-right: 5%;
	}

}

@media screen and (max-width: 1000px) {
	.flex-control-nav {
		left: 45%;
	}

	.kreis {
		width: 90px;
		height: 90px;
	}

	.kreis.shop .bild,
	.kreis.wein .bild,
	.kreis.video .bild,
	.kreis.news .bild,
	.kreis.weingut .bild {
		left: 5%;
		top: -5px;
		width:90%;
	}

	.kreis.video:hover .bild {
		left: 5%;
		top: -10%;
	}

	.kreis .text {
		bottom: 17px;
		height: 13px;
	}

	.kreis .text h2 {
		font-size:13px;
	}
}

@media screen and (max-width: 800px) {
	.flex-control-nav {
		display: none;
	}

	.kreis-cont-start {
		bottom: 7px;
	}

	.kreis.shop:hover .bild {
		left: 0%;
		top: -12%;
		transform: rotate(12deg) scale(1.0);
	}

	.kreis.wein:hover .bild {
		left: 8%;
		top: 2%;
		transform: rotate(132.5deg);
	}

	.kreis.news:hover .bild {
		left: -25%;
		top: -30%;
		transform: rotate(-15deg) scale(1.0);
	}

	.kreis.weingut:hover .bild {
		left: 5%;
		top: -5%;
	}

	.kreis .text {
		bottom: 20px;
	}

	.social a {
    display: block;
    padding: 0.5em;
	}

	.logos-fremd {
		width: 35%;
		margin: 0 5% 0 0;
		padding: 0 0 10px 0;
		justify-content: flex-end;
	}

	.footer-text.offen {
    width: 100%;
		text-align: center;
		margin-right: 0;
		padding: 10px 0;
		margin: 0 0 25px 0;
	}
}

@media screen and (max-width: 640px) {
	.logo-umathum {
			width: 35%;
			margin: 0 3% 0 0;
	}

	address {
		width: 45%;
		margin-bottom: 0;
	}
}

@media screen and (max-width: 600px) {
	.logos-fremd,
	.logo-umathum {
        margin: 0 3% 0 0;
  }

	address,
	.footer-text {
		width: 57%;
		margin-bottom: 0;
	}

	.logos-fremd {
		padding: 0 0 10px 0;
		justify-content: flex-end;
	}

	.footer-text.offen {
    width: 100%;
	}
}

@media screen and (max-width: 500px) {
	.kreis {
		width: 70px;
		height: 70px;
		margin: 0 2px
	}

	.kreis.shop .bild,
	.kreis.wein .bild,
	.kreis.video .bild,
	.kreis.news .bild,
	.kreis.weingut .bild {
		left: 10%;
		top: -5px;
		width:80%;
	}

	.kreis.shop:hover .bild {
		top: -14%;
		transform: rotate(12deg) scale(0.9);
	}

	.kreis.video:hover .bild {
		left: 10%;
	}

	.kreis.news:hover .bild {
		transform: rotate(-12deg) scale(0.9);
	}

	.kreis .text {
		bottom: 17px;
		height: 12px;
	}

	.kreis .text h2 {
		font-size:12px;
	}

}

@media screen and (max-width: 380px) {
	.kreis {
		width: 60px;
		height: 60px;
		margin: 0 2px;
	}

	.kreis.shop .bild,
	.kreis.wein .bild,
	.kreis.video .bild,
	.kreis.news .bild,
	.kreis.weingut .bild {
		left: 12.5%;
		top: -5px;
		width:75%;
	}

	.kreis .text {
		bottom: 12px;
		height: 13px;
	}

	.kreis .text h2 {
		font-size:10px;
	}

}

.woocommerce-error, .woocommerce-info, .woocommerce-message {
    background-color: #efece4;
}

.woocommerce-message {
    border-top-color: #998249;
}

.woocommerce-message::before {
    content: "\e015";
    color: #998249;
}

div[role=alert], div[role=alert] ul li {
    color: #000;
    font-weight: normal;
    font-family: 'Oswald';
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}