/* ==========================================================================
   Änderungen am Grundlayout, weil es schöner ist wenn:
   ========================================================================== */

h2, .single h2, .page h2, #rezensionsarchiv .desMonats h2{margin-bottom:7px;}
.grid3 > article, .grid3 > article.first{margin-bottom:15px;}

/* Werbung TopBanner automatisches Resize */
.adform-adbox, .adform-adbox *{
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
}

/* Tagestipp, lange Version verstecken bis 650px */
.full-tagestipp{display:none}
.excerpt-tagestipp{display:inline}

/* Schatten im FooterNav */
#footerNavContainer{background:none;padding-top:0;}
#container{box-shadow: 0px 10px 7px -10px rgba(0,0,0,0.6);padding-bottom:30px;}

/* Selects bei Terminfinder */
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.finder select{  
    display: block;
    width: 100%;
    height:29px;
    padding:0 4px;
    margin: 0;
    box-shadow: none;
    background: #fff;
    line-height: 25px;
    border-radius: 5px;
    border: 1px solid #d3d3c3;
    font: normal 12px/1.25 Georgia,Times,serif;
    color: #1a171b;
    text-indent:5px;
}

.finder input{text-indent: 5px;}
.finder .ui-datepicker-trigger{position: relative;top:-1px;}

/* Restaurants: Bilder links, Finder besser */
.restaurantImage{margin:20px 0;max-width:100%;height:auto;}
#restaurantFinder form div.three{margin-right:0;}
#restaurantFinder form div p{margin-bottom: 5px;}

/* ==========================================================================
   Neues mobiles Menü ab 650px
   ========================================================================== */

#mobile-menu{
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    height:auto;
    box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.6);
    background:#fff;
    display:none;
    z-index: 9999;
}

#mobile-left{
    float: left;
    width:100%;
    max-width:410px;
    height:70px;
    background: url(http://kreuzer-leipzig.de/wp-content/themes/kreuzer/img/kreuzer-responsive-logo.png) no-repeat;
    background-position:15px 1px;
    background-size: 383px 64px;
}

#mobile-right{
    float: right;
    width:130px;
    height:70px;
    cursor: pointer;
    text-align:center;
}

#mobile-search{
    float:left;
    width:65px;
    height:100%;
    cursor: pointer;
    text-align:center;
}

#mobile-search svg{width:100%;margin:12px 0 0 0;}

#mobile-search form{
    position:absolute;
    top:17px;
    right:120px;
    display:none;
    width:250px;
}

#mobile-search form input{
    width:200px;
    background:#fff;
    border-color:#1a171b;
}

#mobile-search form span{
    display:block;
    width:41px;
    height:28px;
    text-align: center;
    line-height: 30px;
    position: relative;
    top:-33px;
    left:177px;
    background: #fff;
}

#mobile-menu-trigger{
    float:right;
    width:65px;
    height:100%;
    text-align:center;
}

#mobile-menu-trigger svg{width:100%;margin:11px 0 0 0;}

#mobile-menu nav, #mobile-menu ul{
    clear:both;
    width:100%;
    margin:0;
    padding:0;
}

#mobile-menu ul{
    width:100%;
    padding:0 0 10px 0;
    list-style: none;
    display:none;
}

#mobile-menu ul li{padding:1px 15px 1px 15px;}
#mobile-menu ul li.indent{text-indent:30px;}
#mobile-menu ul li span.trenner{
    display: block;
    width:100%;
    border-bottom:1px solid #1a171b;
    padding-top:2px;
    margin-bottom:2px;
}

#mobile-menu ul li, #mobile-menu ul li a{
    font:normal 13px/1.3 Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    text-decoration:none;
}

/* ==========================================================================
   Media queries
   Responsive Anpassung mit sechs Breaking Points:
   1024px, 890px, 768px, 640px, 480px, 360px
   ========================================================================== */

@media screen and (max-width: 1024px) {
    /* Änderungen im Grundgerüst */
    #container{width:100%;padding-top:70px;}
    
    #topBanner, #header,
    #content, #sidebar, #termineNav,
    #footerNavContainer{display:block;clear:both;float:none;width:95%;margin:auto;}
    
    #aktuelles{height:470px;}
    #slider, #slider > article, #slider > article > figure, #slider > article > figure img{width:100%;height:400px;}
    
    #footerNav, #footerContainer{width:100%;}
    #footerContainer{height:100%;}
    #footer{width:95%;margin:0 2.5%;}
    #footer p:first-child{line-height:20px;padding:10px 0;}
    
    #searchbox, #serviceNav, .textwidget:nth-of-type(1), #spezial, 
    #sidebarMonatstipps, #sidebarRessorts, #shop, #sidebarMediathek {display:none;}
    
    /* Mobiles Menü einblenden */
    #mobile-menu{display:block!important;}
    #header{display:none;}
    
    /* Änderungen für die einzelnen Bereiche */
    #termineNav ul, #aktuelles, #tagestipps, #gastroteaser, #archive, #sidebarRessorts{width:100%;}
    
    /* Menüzeilen */
    #termineNav ul{display: inline-block;}
    #termineNav li{display: inline-block;padding:5px 0 0 0;}
    
    /* Tagestipps, 3-Teilung */
    .grid3 > article.first, .grid3 > article{width:30%;}
    .grid3 > article{margin-left:5%;}
    .grid3 > article.first{margin:0;}
    
    /* Sidebar */
    #sidebar{margin-bottom:30px;}
    
    /* Textwidget */
    .textwidget table{width:100%}
    .textwidget tr td:nth-child(1){width:140px;}
    .textwidget tr td:nth-child(2){width:0px;}
    .textwidget tr td:nth-child(3){width:auto}
    
    /* Heft-Vorschau */
    #heft{margin-bottom:20px;}
    #sidebar h5, #heft p{display:block;width:100%;}
    #heft p{margin-bottom:15px;}
    
    /* Anzeige neben Heft, wenn vorhanden (Rectangle Banner in Sidebar) */
    .zweiteilung{float:left;width:67%;}
    #rectangleBanner{float:right;width:30%;}
    #rectangleBanner h4{margin-top:0;}
    
    body.page-id-240 #rectangleBanner{float:none;width:100%;}
    body.page-id-240 #rectangleBanner h4{margin-top:7px;}
    
    /* Ressorts */
    #sidebarRessorts{display:none;margin-bottom:13px;}
    #sidebarRessorts article.media{width:30%;float:left;margin-left:5%;}
    #sidebarRessorts article.media:nth-of-type(1){margin-left:0;}
    #sidebarRessorts article.media > section{clear:both}
    
    /* Rezensionen */
    #sidebarRezensionen{display:inline-block;margin-bottom:13px;}
    #sidebarRezensionen article.media{width:30%;float:left;margin-left:5%;margin-bottom:20px;}
    #sidebarRezensionen article.media:nth-of-type(1), #sidebarRezensionen article.media:nth-of-type(4){margin-left:0;}
    #sidebarRezensionen article.media > section{clear:both}

    /* Shop */
    #shop .button{display:inline-block;margin:5px 0 0 3px;}
    
    /* Footer-Menü */
    #footerNav nav{height:190px;width:15%;}
    #footerNav nav:nth-child(3), #footerNav nav:nth-child(6){width:12%}
    #footerNav nav:nth-child(4), #footerNav nav:nth-child(5){width:10%;} 
    
    /* Unterseite: Abo */
    .gform_wrapper input{width:100%!important;}
    
    /* Unterseite: Shop */
    iframe#Spreadshop, iframe#Spreadshop *{width:100%!important;}
    
    /* Unterseite: Kontakt */
    .gform_wrapper ul.gform_fields li.gfield{padding-right:0;}
    
    /* Unterseite: Restaurants */
    #field_18_10{width:100%!important;padding-right:0;}
    .gform_wrapper li.gfield.field_description_below+li.gsection{margin-right:0;}
    
    /* Unterseite: Artikel */
    #relatedPosts article{width:31%;margin-right:20px;margin-bottom:20px;}
    #relatedPosts article:nth-of-type(3){margin-right:0;}
    #relatedPosts .first{clear:none;}
    
    #respond form input, #respond form textarea{padding:9px 0px;width:100%;text-indent:9px;}
    #respond form #submit{padding:9px 0;width:100%;}
    
    #commentList .comment{width:100%;padding-right:0;padding-left:0;}
    .thread-odd .commentContent, .thread-odd .commentHeader{padding:0 15px;overflow-wrap: break-word;word-wrap: break-word;}
    
    /* Unterseite: Termine */
    #terminFinder .grid.one{width:22%;margin-right:2%;}
    #terminFinder .grid.two{width:28%;margin-right:4%;}
    #terminFinder .grid.three{width:23%;margin:0;}
    #terminFinder .grid.three input{width:100%;}
    
    /* Schatten im FooterNav */
    #footerNavContainer{padding-top:30px;}
    #container{padding-bottom:0;display:inline-block;}
}

@media screen and (max-width: 890px) {
    /* Slidergröße etwas weniger */
    #aktuelles{height:420px;}
    #slider, #slider > article, #slider > article > figure, #slider > article > figure img{width:100%;height:350px;}
    
    #headerNav{clear:both;float:left;}
    #headerNav ul{position:static;display:inline-block;margin-top:10px;}
    #headerNav li:first-child{margin-left:0;}
    #headerNav a{border-top:none;border-bottom:3px solid #fff;padding-top:0;padding-bottom:20px;}

    /* Unterseite: Artikel */
    #relatedPosts article{width:48%;margin-right:20px;margin-bottom:20px;}
    #relatedPosts article:nth-of-type(2){margin-right:0;}
    #relatedPosts article:nth-of-type(3){margin-right:20px;}
    #relatedPosts article:nth-of-type(4){margin-right:0;}
    #relatedPosts .first{clear:none;}
    
    /* Unterseite: Termine */
    #terminFinder .grid.one{width:25%;margin-right:2%;}
    #terminFinder .grid.two{width:25%;margin-right:5%;}
    #terminFinder .grid.three{width:21%;margin:0;}
    #terminFinder .grid.three input{width:100%;}
}

@media screen and (max-width: 768px) {
    /* Slidergröße etwas weniger */
    #aktuelles{height:370px;}
    #slider, #slider > article, #slider > article > figure, #slider > article > figure img{width:100%;height:300px;}
    
    /* Tagestipps & Gastroteaser, Bilder etwas schmaler */
    #tagestipps figure, #gastroteaser figure, #archive figure{width:170px;}
    
    /* Artikelvorschau, Bildgröße */
    #ressorts figure{width:240px;}
    #ressorts figure > img{min-width:240px;min-height:158px;}
    
    /* Footer-Menü */
    #footerNav nav, #footerNav nav:nth-child(3),
    #footerNav nav:nth-child(5), #footerNav nav:nth-child(6){width:23.3333333%;}
    #footerNav nav:nth-child(4) {width:auto;}
    
    #footerNav nav:nth-child(1), #footerNav nav:nth-child(2), #footerNav nav:nth-child(3), #footerNav nav:nth-child(4){height:210px;}
    #footerNav nav:nth-child(5), #footerNav nav:nth-child(6), #footerNav nav:nth-child(7){height:100px;} 
    
    /* Unterseiten: Artikel */
    #relatedPosts figure{width:75px;}
    #relatedPosts figure > img{min-width:75px;min-height:75px;}

    /* Unterseite: Termine */
    #terminFinder .grid.one{width:31%;margin:0 2% 0 0;}
    #terminFinder .grid.two{width:31%;margin:0 5% 0 0;}
    #terminFinder .grid.three{width:31%;margin:0;}
    #terminFinder .grid.three input{width:95%;}
    #submitFinder{display:block;position:static;clear:both;margin:10px 0;float:right;}
    
    /* Unterseite: Restaurants */
    #restaurantFinder .grid.one{width:31%;margin:0 2% 0 0;}
    #restaurantFinder .grid.two{width:31%;margin:0 5% 0 0;}
    #restaurantFinder .grid.three{width:31%;margin:0;}
    #restaurantFinder .grid.three input{width:95%;}
}

@media screen and (max-width: 650px) {
    /* Slidergröße etwas weniger */
    #aktuelles{height:340px;}
    #slider, #slider > article, #slider > article > figure, #slider > article > figure img{width:100%;height:270px;}
    
    /* Tagestipps, Slider */
    .grid3 > article.first, .grid3 > article{width:100%;}
    .grid3 > article{margin-left:0;}
    #tagestipps figure {float:left;margin-right:20px;}
        
    #tagestipps-slider{width:100%;height:200px;overflow: hidden;}
    #tagestipps-slider-container{width:9999px;}
    #slide1, #slide2, #slide3{float:left;margin-right:20px;}
    .full-tagestipp{display:inline!important}
    .excerpt-tagestipp{display:none}
    
    #tagestipps-slider-nav{
        position:relative;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        height: 27px;
        padding-top: 10px;
        line-height: 9px;
    }
    #tagestipps-slider-nav a{
        background: #d3d3c3;
        width: 9px;
        height: 9px;
        display: inline-block;
        font-size: 0;
        color: #d3d3c3;
        margin: 0 4px;
        border-radius: 9px;
    }
    #tagestipps-slider-nav a:hover{
        background: #e4007d;
        color: #e4007d;        
    }
    
    /* Anzeige unter Heft, wenn vorhanden (Rectangle Banner in Sidebar) */
    .zweiteilung{clear:both;width:100%;}
    #rectangleBanner{clear:both;width:100%;}
    
    /* Artikelvorschau, Bildgröße */
    #ressorts figure{width:170px;margin-bottom:0;}
    #ressorts figure > img{min-width:170px;min-height:112px;}

    /* Unterseite: Artikel */
    #relatedPosts article{width:48%;margin-right:20px;margin-bottom:20px;}
    #relatedPosts article:nth-of-type(2){margin-right:0;}
    #relatedPosts article:nth-of-type(3){margin-right:20px;}
    #relatedPosts article:nth-of-type(4){margin-right:0;}
    #relatedPosts .first{clear:none;}
    #relatedPosts figure{width:75px;}
    #relatedPosts figure > img{min-width:75px;min-height:75px;}
    
    /* Unterseite: Termine */
    #terminFinder .grid.one{width:42%;margin-right:2%;}
    #terminFinder .grid.two{width:56%;margin:0;}
    #terminFinder .grid.three{width:60%;margin:0;}
    #terminFinder .grid.three input{width:100%;}
    #submitFinder{display:block;position:absolute;margin:0;right:10px;bottom:10px;}
    
    /* Terminbild, Bildgröße */
    #termine figure{width:170px;height:112px;margin-bottom:0;}
    #termine figure > img{min-width:170px;min-height:112px;}
    
    /* Unterseite: Archiv */
    #archive article figure{float:left;margin-right:20px;}
    
    /* Unterseiten: Restaurants */
    .metaBar p.alignright{display:block;width:100%;margin:0 0 15px 0;}
    
    #restaurantFinder .grid.one{width:42%;margin-right:2%;}
    #restaurantFinder .grid.two{width:56%;margin:0;}
    #restaurantFinder .grid.three{width:40%;margin:0;}
    #restaurantFinder .grid.three input{width:100%;margin-bottom:8px;}
    
    #gastroteaser article figure {float:left;margin-right: 20px;}
}

@media screen and (max-width: 560px) {
    /* Slidergröße etwas weniger */
    #aktuelles{height:300px;}
    #slider, #slider > article, #slider > article > figure, #slider > article > figure img{width:100%;height:230px;}
    
    /* Mobiles Menü, Logo anpassen */    
    #mobile-left{
        width:60%;
        height:60px;
        background: url(http://kreuzer-leipzig.de/wp-content/themes/kreuzer/img/kreuzer-responsive-logo.png) no-repeat;
        background-position:13px 45%;
        background-size: 95% auto;
    }
    #mobile-right, #mobile-search, #mobile-menu-trigger{height:60px;text-align:center;}
    #mobile-right{width:100px;}
    #mobile-search, #mobile-menu-trigger{width:50px;}
    #mobile-search svg{width:75%;margin:7px 6px 0 0;}
    #mobile-menu-trigger svg{width:75%;margin:6px 6px 0 0;}
    #mobile-search form{width:210px;right:85px;top:13px;}
    #mobile-search form input{width:180px;}
    #mobile-search form span{left:147px;}
    #mobile-menu ul li{padding:2px 13px 2px 13px;}
    
    /* Unterseite: Artikel */
    #ressorts .metaBar{height:58px;line-height:28px;}
    #ressorts .metaBar .recommend, #ressorts .metaBar .print, #ressorts .metaBar .FlattrButton{position:absolute;}
    #ressorts .metaBar .FlattrButton{left:5px;top:32px;}
    #ressorts .metaBar .print{left:auto;right:10px;top:35px;}
    #ressorts .metaBar .recommend{left:auto;right:40px;top:35px;}

    #relatedPosts article{width:100%;margin-right:0;margin-bottom:10px;}
    #relatedPosts article:nth-of-type(2){margin-right:0;}
    #relatedPosts article:nth-of-type(3){margin-right:0;}
    #relatedPosts article:nth-of-type(4){margin-right:0;}
    #relatedPosts figure{width:75px;}
    #relatedPosts figure > img{min-width:75px;min-height:75px;}
    
    /* Unterseiten: Restaurants */
    #rezensionen .metaBar{height:58px;line-height:28px;}
    #rezensionen .metaBar .recommend, #ressorts .metaBar .print, #ressorts .metaBar .FlattrButton{position:absolute;}
    #rezensionen .metaBar .FlattrButton{left:5px;top:32px;}
    #rezensionen .metaBar .print{left:auto;right:10px;top:35px;}
    #rezensionen .metaBar .recommend{left:auto;right:40px;top:35px;}
}

@media screen and (max-width: 480px) {
    .divider{margin-bottom:8px;}
    .service .divider{margin-bottom:20px;}
    
    /* Aktuelles-Slider */
    #aktuelles{display:none!important;}
    
    /* Gastroteaser, Bild und Text untereinander */
    #gastroteaser figure, #archive figure,
    #gastroteaser article a, #archive figure a{min-width:100%;}
    #gastroteaser figure > img, #archive figure > img{min-width:100%;min-height:auto;}
    
    /* Tagestipps Bilder etwas schmaler */
    #tagestipps figure {min-width:120px;width:120px;height:90px;margin-bottom:10px;}
    #tagestipps figure > img {min-width:120px;width:120px;min-height:90px;height:90px;margin-bottom:10px;}
    
    /* Artikelvorschau, Bild und Text untereinander */
    .media > a{clear:both;float:none;width:100%;}
    #ressorts figure{min-width:100%;}
    #ressorts figure > img{min-width:100%;min-height:auto;}
    
    /* Heft */
    #heft div.box{width:90%;}
    
    /* Textwidget */
    #spezial .media > a{clear:both;float:left;width:120px;}
    
    /* Monatstipps */
    #sidebarMonatstipps article.media, #sidebarRessorts article.media:nth-of-type(1){width:100%;margin-left:0%;}
    #sidebarMonatstipps article.media a{float:left;width:75px;}
    #sidebarMonatstipps article.media a figure{float:left;margin-right:20px;}
    #sidebarMonatstipps article.media > section{clear:none;}
    
    #sidebarMonatstipps article.media .teaser a{float:left;width:auto;}
    
    /* Ressorts */
    #sidebarRessorts article.media, #sidebarRessorts article.media:nth-of-type(1){width:100%;margin-left:0%;}
    #sidebarRessorts article.media a{float:left;width:75px;}
    #sidebarRessorts article.media a figure{float:left;margin-right:20px;}
    #sidebarRessorts article.media > section{clear:none;}
    
    /* Rezensionen */
    #sidebarRezensionen article.media, #sidebarRezensionen article.media:nth-of-type(1),
    #sidebarRezensionen article.media:nth-of-type(4){width:100%;margin-left:0%;margin-bottom:0;}
    #sidebarRezensionen article.media a{float:left;width:75px;}
    #sidebarRezensionen article.media a figure{float:left;margin-right:20px;}
    #sidebarRezensionen article.media > section{clear:none;}
    #sidebarRezensionen article.media .teaser a{float:none;width:auto;}
    
    /* Footer-Menü */
    #footerNav nav{width:30%;}
    #footerNav nav:nth-child(1), #footerNav nav:nth-child(2),
    #footerNav nav:nth-child(3), #footerNav nav:nth-child(4),
    #footerNav nav:nth-child(5), #footerNav nav:nth-child(6)
    {width:45%;} 
    #footerNav nav:nth-child(1), #footerNav nav:nth-child(2){height:210px;}
    #footerNav nav:nth-child(3), #footerNav nav:nth-child(4){height:100px;}
    #footerNav nav:nth-child(5), #footerNav nav:nth-child(6){height:120px;}
    
    /* Mobiles Menü */
    #mobile-left{background-position:10px 50%;}
    #mobile-search{text-align:right;}
    #mobile-search svg, #mobile-menu-trigger svg{width:60%;margin:6px 0 0 0;}
    #mobile-menu ul li{padding:2px 10px 2px 10px;}
    
    /* Unterseiten: Artikel */
    #relatedPosts article.media, #sidebarRessorts article.media:nth-of-type(1){width:100%;margin-left:0%;}
    #relatedPosts article.media a{float:left;width:75px;}
    #relatedPosts article.media a figure{float:left;margin-right:20px;}
    #relatedPosts article.media .teaser a{float:none;width:auto;}
    #relatedPosts article.media > section{clear:none;}
    
    /* Unterseite: Termine */
    #terminFinder .grid.one{width:100%;margin:0 0 5px 0;}
    #terminFinder .grid.one input{width:77%;}
    .finder .ui-datepicker-trigger{float:right;}
    #terminFinder .grid.two{width:100%;margin:0;}
    #terminFinder .grid.three{width:100%;margin:0;}
    #terminFinder .grid.three input{width:97%;}
    #submitFinder{display:block;position:static;clear:both;margin:10px 0;float:right;}
    
    #ui-datepicker-div{margin-left:20%;}
    
    #termine article.media > section{clear: both;}
    
    #termine figure{width:207px;height:138px;margin-bottom:10px;}
    #termine figure > img{min-width:207px;min-height:138px;}
    
    /* Unterseite: Monatstipps */
    article.monatstipp header{clear: both;}
    
    /* Unterseiten: Restaurants */
    #restaurantFinder .grid.three{width:38%;}
    #restaurantFinder #submitFinder{display:block;position:absolute;margin:0;right:10px;bottom:10px;}    
}