/*mobile Anpassungen*/
/*Breiten*/
@media only screen and (max-width: 1590px) { 
    #leistungen .buttons {justify-content: start;align-items: start;gap: 100px;}
    #leistungen .filter-group {display: flex;flex-direction: column;align-items: start;margin-left: 0;}
}
@media only screen and (max-width: 1390px) { 
    #leistungen .galerieThumbnail.shuffle-item {margin-right: 20px;}
    #leistungen .galerieThumbnail.shuffle-item a {width: 220px;}
    #leistungen .galerieThumbnail.shuffle-item:before {transform: rotate(-90deg) translate(-55%,-120px);}
    #leistungen .galerieThumbnail.shuffle-item::after {right: 0px;}
}
@media only screen and (max-width: 1330px) { 
    #header .header-oben {padding-top: 35%;margin-left: 5vw;}
    .subsite #header .header-oben {padding-top: 50px;margin-left: 100px;padding-right: 105px;}
    main .content-inner .inner, #leistungen .leistungen-shuffle-inner, main .macy-container {margin-left: 5vw;}
    #pfeil {bottom: 3%;}
}
@media only screen and (max-width: 1200px) {
    h1 {font-size: 3.0em;}
    h2 {font-size: 2.6em;}
    h3 {font-size: 1.4em;}
    .mainnav ul.rex-navi1 > li {margin-right: 20px;}
    .mainnav ul.rex-navi1 > li a {font-size: 1.5em;}
    .headline h1 {margin-bottom: 0.3em;}
}
@media only screen and (max-width: 1120px) {
    .contentbild-breite-500px {float: none;margin: 5px 2em 0.6em 0;}
    .contentbild-breite-500px figcaption {text-align: left !important;}
}
@media only screen and (max-width: 1070px) {
    #header .header-oben {padding-top: 27%;}
}
@media only screen and (max-width: 1000px) {
    .mainnav {flex-direction: column;}
    .subsite .mainnav {flex-direction: row;}
    .contentbild-breite-450px {float: none;margin: 5px 2em 0.6em 0;}
    .contentbild-breite-450px figcaption {text-align: left !important;}
}
@media only screen and (max-width: 950px) {
    h1 {font-size: 2.6em;}
    h2 {font-size: 2em;}
    #leistungen .buttons {gap: 50px;}
}
@media only screen and (max-width: 900px) {
    #button {top: 10px;}
    #mobile-button:after {width: 30px;height: 30px;}
    #mobile-button {width: 77px;height: 70px;}
    #mobile-button::after {top: 20px;left: 18px;}
    #termin .absatz {padding: 5px 1em 5px 3em;}
    #termin .absatz p {font-size: 1.25em;}
    #termin .absatz::before {top: 13px;left: 1.2em;}
    #sidebar {display: none;width: 0;}
    main {max-width: 100%;} 
    #header .logo.main {display: block;}
    .subsite #header .logo.main {width: 80px;top: 60px;}
    #header .headerbg {background-size: 100vw;width: 100vw;}        
}
@media only screen and (max-width: 700px) {
    body:not(#start) .mainnav ul.rex-navi1 > li {margin-right: 10px;display: inline-block;}
    #leistungen .leistungen-shuffle-inner {margin: 0 2vw 0 8vw;}
    .contentbild-breite-400px {float: none;margin: 5px 2em 0.6em 0;}
    .contentbild-breite-400px figcaption {text-align: left !important;}
}
@media only screen and (max-width: 670px) {
    #termin {margin-right: calc(-100% + 56px); width: 100vw;height: auto;cursor: pointer;pointer-events: auto;transition: all 0.5s ease;}
    #termin.show {margin-right: 0;width: 80vw;transition: all 0.5s ease;}
    #termin .absatz {height: 40px;overflow: hidden;padding-left: 3.5em;transition: all 0.5s ease;}
    #termin.show .absatz {height: 63px;transition: all 0.5s ease;}
    #termin .absatz strong {padding-left: 0;}
    #header .headerbg > div {background-size: contain;width: 130vw;background-position: -6vw 0;}
    #header .header-oben {padding-top: 35%;padding-right: 130px;}
    .subsite #header .header-oben {padding-top: 90px;margin-left: 15px;}
    #header .header-oben h1 {font-size: 2.2em;line-height: 1.1em;}
    #header .logo.main {top: 33vw;}
    .mainnav ul.rex-navi1 > li {margin-right: 5px;}
    main .content-inner .inner, #leistungen .leistungen-shuffle-inner, main .macy-container {margin: 2em 15px 2em 15px;}
    #leistungen .shuffle-container {margin-left: 15px;}
    #leistungen .galerieThumbnail.shuffle-item figcaption {height: auto;}
    #leistungen .buttons {display: block;margin: 20px 0 50px 0;}
    #leistungen .btn-list:first-child {margin-bottom: 0.5em;}
    #leistungen .btn-list:nth-child(2) {float: left;margin-right: 3em;}
    #leistungen .filter-group button {padding-left: 0;}
}
@media only screen and (max-width: 630px) {
    .mainnav {flex-direction: row-reverse;justify-content: start;}
    .mainnav ul.rex-navi1 > li {display: block;padding: 0;}
}
@media only screen and (max-width: 600px) {    
    #header .logo.main {width: 100px;}    
    .mainnav ul.rex-navi1 > li {margin-right: 10px;}
}
@media only screen and (max-width: 580px) {
    #header .header-oben {padding-top: 30%;}
}
@media only screen and (max-width: 560px) {
    #header .header-oben {padding-top: 30%;}
    #leistungen .galerieThumbnail.shuffle-item a { width: 200px;}
    #leistungen .galerieThumbnail.shuffle-item:before {transform: rotate(-90deg) translate(-55%,-95px);font-size: 1em;}
    .contentbild-breite-300px {float: none;margin: 5px 2em 0.6em 0;}
    .contentbild-breite-300px figcaption {text-align: left !important;}
}
@media only screen and (max-width: 520px) {
    #header .headerbg > div {width: 160vw;background-position: -10vw -20px;}
    nav.menu-mobile {width: 80vw;transform: translate3d(-80vw,0,0);}
    .menu-open #page {transform: translate3d(80vw,0,0);}
    #header .header-oben {margin-left: 15px;}
    .team-bildbox .absatz {min-width: auto;}
    main .spalte1, main .spalte2 {float: none;clear: both;width: 100% !important;}
    main .spalte1 {padding-bottom: 1em;}
    #start main #kontakt + div .spalte1 {border-bottom: 2px solid #707070;padding-bottom: 1em;margin-bottom: 2em;}
    #footer-inner {padding: 0em 0 2em 2em;}
}
@media only screen and (max-width: 490px) {
        #leistungen .galerieThumbnail.shuffle-item a {width: 100%;}
    #leistungen .galerieThumbnail.shuffle-item:before {transform: rotate(-90deg) translate(-55%,-80px);}    
}
@media only screen and (max-width: 470px) { 
    #button {top: 0;}
    #header .header-oben h1 {font-size: 2em;}
    .mainnav ul.rex-navi1 > li {padding: 0;}
    .mainnav ul.rex-navi1 > li a {font-size: 1.3em;padding: 5px 5px 5px 23px;}
    .mainnav ul.rex-navi1 > li a::before {width: 20px;height: 20px;left: 0px;top: 8px;}
    .mainnav ul.rex-navi1 > li:hover a, .mainnav ul.rex-navi1 > li:active a, .mainnav ul.rex-navi1 > li.rex-current a, .mainnav ul.rex-navi1 > li.rex-active a {border-radius: 15px;}
}
@media only screen and (max-width: 463px) {  
    #termin.show .absatz {height: 87px;}
    .contentbild-breite-200px {float: none;margin: 5px 2em 0.6em 0;}
    .contentbild-breite-200px figcaption {text-align: left !important;}
}
@media only screen and (max-width: 440px) {
    #header .header-oben {padding-top: 25%;}
}
@media only screen and (max-width: 420px) {
    #header .logo.main {width: 75px;}
    #leistungen .btn-list:nth-child(2) {margin-right: 1em;}
    .floatLeft, .rechtsUmfliessen, .floatRight, .linksUmfliessen {clear: both;float: none;margin-left: 0;}
    .absatz table {width: 100% !important;}    
}
@media only screen and (max-width: 400px) { 
    #header .header-oben h1 {font-size: 1.8em;}
    .mainnav ul.rex-navi1 {line-height: 35px;}
    .mainnav ul.rex-navi1 > li {margin-right: 0;}
}
@media only screen and (max-width: 365px) { 
    #header .header-oben h1 {font-size: 1.5em;}
    #leistungen .buttons {margin: 20px 0 20px 0;}
    #leistungen .btn-list:nth-child(2) {float: none;margin-right: 3em;margin-bottom: 1em;}
}
/*Höhen*/
@media only screen and (max-height: 900px) {
    #sidebar .inner {padding-top: 8vh;}
}
@media only screen and (max-height: 750px) {
    #footer {position: relative;}
    #sidebar .inner {row-gap: 0;}
}