.search-container { background-color: #c2c7cc; color: #fff; } .search-container:after { content: ""; display: block; clear: both; } .search-container .col { float: left; width: 25%; box-sizing: border-box; padding: 20px; } .search-container input, .search-container select { width: 100%; box-sizing: border-box; vertical-align: top; height: 20px; line-height: 20px; text-align: center; border: none; } .search-container input { margin-right: -20px; } .search-container span { display: inline-block; height: 20px; width: 20px; line-height: 20px; text-align: center; vertical-align: middle; } .search-container button { background-color: #ae100a; color: #fff; font-weight: bold; padding: 11px; text-align: center; border: none; cursor: pointer; width: 100%; } .icons-container { margin-left: -8px; margin-right: -10px; } .icons-container .icons { padding: 8px; } .elementlist, .formated-elementlist { color: #575757; } .formated-elementlist { border-collapse: collapse; } .elementlist .element, .formated-elementlist td { padding: 10px; border-top: 1px dotted #575757; background: #eeeff2; } .elementlist .element.light, .formated-elementlist td:nth-child(2n+1) { background: #fff; } .formated-elementlist td { background: #fff; } .formated-elementlist tr:nth-child(2n+1) td { background: #eeeff2; } .elementlist .element:first-child, .formated-elementlist tr:first-child td { border-top: none; margin-top: 0; } .elementlist a, .formated-elementlist a { color: #575757; } .elementlist .ico { vertical-align: middle; padding-bottom: 4px; } #content .elementlist h3, #content .formated-elementlist h3, .element-details h3 { font-size: 16px; text-transform: uppercase; margin-top: 0; } .elementlist .image, .formated-elementlist img { float: left; } .elementlist .data { margin-left: 160px; position: relative; } .highlight { color: #efeced; } .highlight a { color: #efeced; } .highlight .element { padding: 10px; border-top: 1px dotted #efeced; background: #7f8c9d; } .highlight .element.light { background: #7f8c9d; } #content .elementlist h3, #content .elementlist h3 a, #content .formated-elementlist h3, #content .formated-elementlist h3 a, .element-details h3 { font-family: 'Prata', serif; font-weight: normal; } #content .formated-elementlist h3 a { text-decoration: none; } #content .formated-elementlist h3 a:hover { text-decoration: underline; } .elementlist .price { position: absolute; top: 20px; right: 5px; font-size: 0.9em; font-weight: bold; } .elementlist .btn-space { padding-right: 20px; } .elementlist .btn-nowrap { white-space: nowrap; } .elementlist .btn-bold { font-weight: bold; } .details-line { height: 1px; border: none; border-top: 1px solid #F0F3F6; margin-bottom: 10px; } .beherbergung-popup { width: 630px; margin: 20px auto; padding: 10px; position: relative; border: 10px solid #c2c7cc; background-color: #ffffff; } .beherbergung-popup .element-images { float: left; } .beherbergung-popup .element-images img { display: block; } .beherbergung-popup .element-details { width: 430px; margin: 10px; float: left; } @media (max-width: 630px) { .beherbergung-popup { width: 100% !important; box-sizing: border-box !important; } .beherbergung-popup .element-images { float: none !important; text-align: center !important; } .beherbergung-popup .element-details { width: 100% !important; margin: 0 !important; float: none !important; } } @media (max-width: 970px) { .elementlist .data { line-height: 2em; } } @media (max-width: 470px) { .elementlist .data { margin-left: 0 !important; } .elementlist .image, .formated-elementlist img { float: none; display: block; width: 100%; height: auto; margin-bottom: 10px; } } .beherbergung-popup .mobile-contact-button-list { display: flex; justify-content: space-between; align-items: flex-start; } .beherbergung-popup .mobile-button-contact { background-color: #ae100a; color: #fff; width: 49%; text-align: center; padding: 20px 0; font-weight: bold; font-size: 18px; display: inline-block; text-decoration: none; } .beherbergung-popup .mobile-button-data { font-size: 16px; text-align: left; } .beherbergung-popup .mobile-button-data > * { color: #fff; display: block; padding: 10px; font-weight: normal; } .beherbergung-popup .fa-arrow-circle-up { color: #ae100a; font-size: 30px; } @media (max-width: 470px) { .beherbergung-popup .mobile-contact-button-list { display: block; } .beherbergung-popup .mobile-button-contact { width: 100%; margin: 0; margin-top: 10px; } } @supports (display: grid) { .icons-container { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); display: grid; margin-right: 0; } }