/* =Kunde: 	Onda
-----------------------------------------------------------------------------*/

/* =Imports
-----------------------------------------------------------------------------*/

@import "css/cookie-modal.css";
@import "css/panel.css";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@100..900&family=Roboto+Condensed:wght@100..900&display=swap');


/* =General
-----------------------------------------------------------------------------*/

html  {
	/* 2 */
	-webkit-text-size-adjust: 100%;
	/* 3 */
	background: rgba(255,255,255,1);
	color: rgba(84,84,88,1);
	font: normal 200 22px/34px "Roboto Condensed", Arial, Helvetica, Geneva, sans-serif;
	scroll-behavior: smooth;
}
body  {
	text-decoration: none;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
header, section, footer {
	display: block;
	clear: both;
	float: none;
}


/* =Helper
-----------------------------------------------------------------------------*/


/* =Links
-----------------------------------------------------------------------------*/

section a, footer p a {
  color: rgba(81,81,80,1);
  text-decoration: none;
  cursor: pointer;
	padding-bottom: 1px;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
section a:hover, section a:focus, footer p a:hover {
  color: rgba(0,0,0,1);
  text-decoration: none;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}

::-moz-selection { 
	background: rgba(120,130,115,1); color: #fff; text-shadow:none; 
}
::selection { 
	background: rgba(120,130,115,1); color: #fff; text-shadow:none; 
}

/* =Typography
-----------------------------------------------------------------------------*/

* + h1, * + .uk-h1, * + h2, * + .uk-h2, * + h3, * + .uk-h3, * + h4, * + .uk-h4, * + h5, * + .uk-h5, * + h6, * + .uk-h6 {
    margin-top: 0px;
}
h1 {
	font: normal 500 3rem/1em "Noto Serif Display", Arial, Helvetica, Geneva, sans-serif;
	padding-top: 20px;
	padding-bottom: 60px;
	color: rgba(120,130,115,1);
	width: 70%;
}
h2, .uk-h2 {
	font: normal 600 1.6rem/1.3em "Noto Serif Display", Arial, Helvetica, Geneva, sans-serif;
	margin-bottom: 10px;
	margin-top: 40px;
	padding-top: 40px;
}
h3, .uk-h3{
	font: normal 600 1.6rem/1.3em "Noto Serif Display", Arial, Helvetica, Geneva, sans-serif;
	margin-bottom: 10px;
	margin-top: 10px;
}
.uk-offcanvas-bar h3 {
	color: rgba(120,130,115,1);
	
}
h4, .uk-h4 {
	font: normal 600 1.2rem/1.3em "Noto Serif Display", Arial, Helvetica, Geneva, sans-serif;
	margin-bottom: 10px;
	margin-top: 10px;
}
strong, .uk-strong {
	font: 400 1em/1.45em "Roboto Condensed", Arial, Helvetica, Geneva, sans-serif;
}
ul li p {
	margin: 0px;
}
p {
	hyphens:auto;
}
hr {
	height: 10px;
	background-color: rgba(255,255,255,1);
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	clear: both;
	float: none;
	width: 60px;
}

/* =Color
-----------------------------------------------------------------------------*/
.farbe, .uk-primary {
	background-color: rgba(120,130,115,1);
	color: rgba(255,255,255,1);
}
.grey, .uk-secondary {
	background-color: rgba(81,81,80,1);
	color: rgba(255,255,255,1);
}
.hellgrau {
	background-color: rgba(120,130,115,.1);
}
.white {
	background-color: rgba(255,255,255,1);
}

/* =Grid
-----------------------------------------------------------------------------*/
.grid > *:not(:last-child) {
	margin-right: 20px;
	margin-bottom: 60px;
}
.grid > .column-12 {
	width: 100%;
}
.grid > .column-6 {
	width: calc(50% - 50px);
}
.grid > .column-4 {
	width: calc(33% - 50px);
}
.grid > .column-3 {
	width: calc(25% - 50px);
}
.grid figure {
	overflow: hidden;
}
.video iframe {
    height: 675px;
    width: 100%;
}


/* =Header
-----------------------------------------------------------------------------*/
header {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 180px;
	z-index: 1000;
	padding: 35px 60px 20px 50px;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 20px 0px rgba(120,130,115,.2);
}
header a.logo img {
	padding-bottom: 150px;
}
.hamburger {
	color: rgba(120,130,115,1);
	position: fixed;
	bottom: 10%;
	left: 15px;
}
.uk-offcanvas-bar a {
    color: rgba(120,130,115,1);
	font: 1.4rem "Noto Serif Display", Lucida, Verdana, sans-serif;
    font-weight: 600;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    border: 0px none rgba(255, 255, 255, 0) !important;
    text-transform: uppercase;
    margin-left: -8px;
	text-decoration: none;
}
.hamburger:hover, .uk-offcanvas-bar a:hover {
    color: rgba(0,0,0,1);
	text-decoration: none;
}


/* =Navigation
-----------------------------------------------------------------------------*/
.uk-nav li a {
	font: 1.4rem "Noto Serif Display", Lucida, Verdana, sans-serif;
	font-weight: 600;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 0px;
	color: rgba(64,64,68,1);
	border: 0px none rgba(255,255,255,0) !important;
	text-transform: uppercase;
	margin-left: -8px;
}
.uk-nav li a:hover, .uk-nav li.uk-active a {
	color: rgba(120,130,115,1);
	border: 0px none rgba(255,255,255,0) !important;
}
.uk-nav li a::before {
	content: "–";
	display: block;
	padding-bottom: 5px;
	opacity: 0;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}
.uk-nav li a:hover::before, .uk-nav li.uk-active a::before {
	content: "–";
	opacity: 1;
}


/* =Offcanvas
-----------------------------------------------------------------------------*/

/* =Seitenaufbau
-----------------------------------------------------------------------------*/
.slider {
	padding: 0px;
	margin-left: 200px;
	width: calc(100vw - 200px);
}
.slider .uk-slideshow-items > li {
}
.box {
	width: fit-content;
	margin-right: auto;
	margin-left: auto;
	margin-top: -115px;
}
.box h4 {
	color: rgba(255,255,255,1);
}
section, .titelbox {
	margin-left: 200px;
	z-index: 1;
	margin-bottom: 0px;
}
footer {
	margin-left: 200px;
}
section > .uk-container, footer .uk-container {
	width: calc(100vw - 200px);
	max-width: 1000px;
}
section.line {
	border-top: 2px solid rgba(255,255,255,1);
}
section.end {
	padding-bottom: 80px;
}

/* =Module
-----------------------------------------------------------------------------*/

/* =Immo
-----------------------------------------------------------------------------*/
.trenner {
	height: 25px;
}
.einheit.uk-strong {
	font-size: .75em;
	line-height: 1em;
	padding-bottom: 5px;
}

.honeypot {
	position: absolute;
	left: -9999px;
}
.imgicon {
	background-color: rgba(255,255,255,1);
	color: rgba(0,0,0,1);
	text-align: center;
	font-weight: bold;
	font-size: 14px;
    min-width: 18px;
    width: 24px;
    height: 24px;
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
}
.imgicon span {
	display: block;
	margin-top: -4px;
}
.imgicon:hover {
	background-color: rgba(120,130,115,1);
}
.imgicon:first-of-type {
	background-color: rgba(255,255,255,1);
	color: rgba(255,255,255,0);
    width: 20px;
    height: 20px;
    padding: 0px;
	box-shadow: 0px 0px 4px 0px rgba(0,0,0,0);
	border: 5px solid rgba(120,130,115,1);
	z-index: 1;
}
.poilist {
	padding: 10px 20px;
	min-width: 290px;
}
.poilist > li {
	margin: 0 !important; 
	padding: 0 !important;
}
.poilist  > * > .poinumber {
	width: 30px;
}
.poilist  > *:first-of-type  {
	display: none;
}
.uk-drop {
    width: auto;
}
.tooltip {
	padding: 6px 12px;
	background-color: rgba(120,130,115,1);
	color: rgba(255,255,255,1);
}
.tooltip span {
	padding-left: 20px;
}
.legende li {
	padding-bottom: 6px;
}
.legende svg {
	margin-right: 10px;
	margin-top: -3px;
}
.legende strong {
	width: 185px;
}
.downloads a img {
	box-shadow: 0px 0px 10px 0px rgba(64,64,68,.1);
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
.downloads a:hover img {
	box-shadow: 2px 2px 15px 0px rgba(64,64,68,.3);
}

/* =Plugins
-----------------------------------------------------------------------------*/
.uk-lightbox {
	background-color: rgba(255,255,255,.9);
}
.uk-lightbox-toolbar {
	background-color: rgba(255,255,255,0);
}
.uk-lightbox-button {
	background-color: rgba(64,64,68,1);
	color: rgba(255,255,255,1);
}
.uk-lightbox-toolbar * {
	color: rgba(84,84,84,1) !important;
}
.uk-thumbnav>*>::after {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, .6));
}

-----------------------------------------------------------------------------*/

/* = Mapbox
-----------------------------------------------------------------------------*/

.mapboxgl-map {
	height: 600px !important;
    min-height: 800px !important;
}
.mapboxgl-canvas {
}
.mapboxgl-popup-content {
    background: rgba(120,130,115,1) !important;
    border-radius: 0px !important;
    box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
    padding: 30px 20px 15px !important;
	min-width: 240px;
}
.mapboxgl-popup-content p, .mapboxgl-popup-content a {
	font: 16px/1.4em "Roboto Condensed", Arial, Helvetica, Geneva, sans-serif !important;
	color: rgba(255,255,255,1);
}
.mapboxgl-popup-close-button {
    border-radius: 0px !important;
	font: 36px/40px "Roboto Condensed", Arial, Helvetica, Geneva, sans-serif !important;
	color: rgba(255,255,255,1);
	margin-right: 10px;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-top-color: rgba(120,130,115,1) !important;
}
.mapboxgl-marker > svg > g > g {
	fill: rgba(255,255,255,1);
}
.mapboxgl-marker > svg > g > g > circle {
	fill: rgba(120,130,115,1);
}
a.mapboxgl-ctrl-logo {
    opacity: .3;
}
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    padding: 0 5px;
    margin: 0;
}
.mapboxgl-ctrl-group:not(:empty) {
    box-shadow: 0 0 0 1px rgba(255,255,255,1) !important;
}
.mapboxgl-ctrl-group {
    border-radius: 0px !important;
    background: rgba(240,240,242,1) !important;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
}
.mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-in:hover,
.mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-out:hover,
.mapboxgl-ctrl-group .mapboxgl-ctrl-compass:hover {
    background: rgba(255,255,255,1) !important;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
}
.mapboxgl-ctrl-group button {
    background-color: inherit !important;
}
.mapboxgl-ctrl-group button+button {
    border-top: 1px solid rgba(255,255,255,1) !important;
}
.mapboxgl-ctrl a {
    color: rgba(0,0,0,.2) !important;
	border: 0 none rgba(255,255,255,0);
}



/* =Immo
-----------------------------------------------------------------------------*/
.stickySVG {
	padding-right: 20px;
}
.js-filter > .einheit > div:first-child, 
.js-filter > .einheit > div:nth-child(2) {
	width: 10%;
}
.js-filter > .einheit > div:nth-child(3),
.js-filter > .einheit > div:nth-child(4),
.js-filter > .einheit > div:nth-child(5) {
	width: 18%;
}
.js-filter > .einheit > div:nth-child(6) {
	width: 22%;
}
.js-filter > .einheitNo > div:first-child {
	width: calc(20% + 60px);
}
.js-filter > .einheitNo > div:nth-child(2) {
	width: calc(50% - 60px);
}
.js-filter > .einheitNo > div:nth-child(3) {
	width: 26%;
}
.whg-off > path {
	cursor: pointer;
	display:inline;
	fill:rgba(255,255,255,1);
	stroke:#1D1D1B;
	stroke-miterlimit:10;
}
#whg-Fill *.on > path  {
	fill: rgba(120,130,115,1);
	cursor: pointer;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
#filter *.on {
  background: rgba(255,255,255,1);
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
.einheit {
	border-bottom: 1px solid rgba(40,95,120,.1);
	padding: 5px;
	cursor: default;
}
.einheitNo {
	border-bottom: 1px solid rgba(40,95,120,.1);
	padding: 5px;
}
.vermietet {
	color: rgba(0,0,0,.3);
}
.vermietet:hover, .einheit.uk-strong:hover, .einheitNo:hover, .trenner:hover {
  background: rgba(40,95,120,0) !important;
}
.icon {
	position: absolute;
	right: 0px;
	width: 20px;
	margin-top: 5px;
}


/* =Formulare
-----------------------------------------------------------------------------*/
.uk-button-disabled {
	cursor: not-allowed;
	border: 0px solid transparent;
	margin-top: 16px;
	margin-bottom: 16px;
}

.uk-radio,
.uk-checkbox,
.uk-checkbox {
  background-color: rgba(255,255,255,1);
  border-color: rgba(84,84,88,0);
}

.uk-radio:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
  background-color: rgba(120,130,115,1);
  border-color: transparent;
}

.uk-radio:checked:focus,
.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus {
  background-color: rgba(0,0,0,1);
}

.uk-form-label {
	font-size: 1em;
	color: rgba(84,86,85,.5);
}

.uk-form-horizontal .uk-form-controls{
}


.uk-input, .uk-select, .uk-textarea {
	background-color: rgba(255,255,255,1);
	color: #000;
	border: 0px solid rgba(197,199,199,1);
	border-bottom: 2px solid rgba(244,244,244,1);
	transition: 0.15s ease-in-out;
	transition-property: color, background-color, border;
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
	outline: none;
	background-color: rgba(255,255,255,1);
	color: #000;
	border-bottom: 2px solid rgba(84,86,85,1);
}
.honeypot {
	position: absolute;
	left: -9999px;
}



/* =
-----------------------------------------------------------------------------*/

/* =Misc
-----------------------------------------------------------------------------*/

.colophon{
	display:block;
	position:fixed;
	bottom:25px;
	left:25px;
	width:25px;
	height:25px;
	background:url(img/Designheit-Bildmarke.svg) no-repeat right bottom;
	opacity: 0.05;
	filter: alpha(opacity=5);
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
	z-index: 1010;
}
.colophon:hover{
	opacity:1;
	filter: alpha(opacity=100);
	}

.footer {
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: .9em;
	line-height: 1.4em;
}
.footer > * ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* @l – Laptop / Tablet Landscape */

@media (max-width: 1200px) {
html  {
	font-size: 20px;
}
.colophon{
	display:none;
}
header {
	width: 140px;
	padding: 35px 30px 20px 20px;
    box-shadow: 10px 10px 5px 12px rgba();

}
header a.logo img {
    padding-bottom: 80px;
}
.uk-nav li > a {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
	font-size: 1.2em;
}
.box {
}
.slider {
    padding: 0px;
    margin-left: 190px;
    width: calc(100vw - 190px);
}
section, .titelbox {
    margin-left: 190px;
}
section, footer {
    margin-left: 190px;
}
section > .uk-container, 
footer .uk-container {
	width: calc(100vw - 270px);
	max-width: 840px;
}
.grid > *:not(:last-child) {
	margin-right: 20px;
	margin-bottom: 60px;
}
.grid > .column-12 {
	width: 100%;
}
.grid > .column-6 {
	width: calc(50% - 30px);
}
.grid > .column-4 {
	width: calc(33% - 30px);
}
.grid > .column-3 {
	width: calc(25% - 50px);
}
.grid figure {
	overflow: hidden;
}
.js-filter .expand {
    width: calc(100% - 60px);
}
.expand.uk-child-width-1-7\@m >*:first-of-type {
    width: 80px;
}

}
/* @m – Tablet Portrait */

@media (max-width: 960px) {
.colophon{
	display:none;
}
header {
	width: 60px;
	padding: 35px 10px 20px;
}
header a.logo img {
    padding-bottom: 80px;
	padding-left: 0px;
}
.canvasLogo img {
    width: 100px;
    margin-top: 30px;
	margin-left: 55px;
	margin-bottom: 100px;
}
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
    left: 260px;
}
.uk-offcanvas-bar {
    background: rgba(255,255,255,1);
	width: 280px;
}
.slider .uk-slideshow-items > li {
    height: 50vh;
}
.slider {
	padding: 0px;
	margin-left: 80px;
	width: calc(100% - 40px);
}
.slider .uk-slideshow-items > li {
}
.box {
}
h1 {
	padding-bottom: 20px;
	width: 100%;
}
h2 {
	margin-top: 0;
}
h4 {
	font-size: 1rem;
}
section, footer, .titelbox {
    margin-left: 80px;
	width: calc(100% - 40px);
}
section .uk-container, footer .uk-container {
    width: calc(100vw - 100px);
    max-width: calc(100% - 70px);
}
.grid {
	display: block;
	width: calc(100% - 40px);
	margin-right: 0px;
}
.grid > .column-6 {
	width: 100%;
	margin-right: 0px;
}
.grid > .column-12 {
	width: 100%;
	margin-right: 0px;
}
.uk-child-width-1-7\@m > * {
    width: calc(100% * 1 / 3.001);
}
.uk-child-width-1-7\@m >*:first-of-type, 
.uk-child-width-1-7\@m >*:nth-of-type(2) {
	max-width: calc(100% * 1 / 3.001) !important;
    width: calc(100% * 1 / 3.001);
}
.expand.uk-child-width-1-7\@m >*:first-of-type {
    width: calc(100% * 1 / 3.001);
	min-width: 85px;
}
.uk-child-width-1-7\@m >*:nth-of-type(2),
.uk-child-width-1-7\@m >*:nth-of-type(3) {
	padding-top: 35px;
}
.whg-label {
	width: 75px;
}
.zusatz .zusatzexpand {
	width: 66% !important;
	min-width: 66% !important;
}
.zusatz .uk-child-width-1-7\@m >*:nth-of-type(2),
.zusatz .uk-child-width-1-7\@m >*:nth-of-type(3) {
	padding-top: 0px;
}
h1 {
    font: 2rem/1.2em "Noto Serif Display", Arial, Helvetica, Geneva, sans-serif;
    max-width: 100%;
}
}

/* @s – Phone Portrait */
@media (max-width: 640px) {
.colophon{
	display:none;
}
h1 {
    font: 1.7rem/1.2em "Noto Serif Display", Arial, Helvetica, Geneva, sans-serif;
    max-width: 100%;
	width: 100%;
	padding-bottom: 20px;
}
h2, .uk-h2, h3, .uk-h3 {
	font: normal 600 1.2rem/1.3em "Noto Serif Display", Arial, Helvetica, Geneva, sans-serif;
	margin-top: 0;
}
header {
	width: 100%;
	padding: 5px 10px 20px;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	min-height: 30px;
}
header a.logo img {
    padding-bottom: 0px;
	padding-left: 0px;
	width: 60px;
}
.hamburger {
	bottom: auto;
	left: auto;
	top: 10px;
	right: 20px;
}
.slider {
	padding: 0px;
	margin-left: 0px;
	width: 100%;
	margin-top: 80px;
}
.slider .uk-slideshow-items > li {
}
.titelbox {
    margin-top: 0px;
    margin-bottom: -40px;
	width: 100%;
    }
.box {
	margin: 0px;
}
.grid {
	display: block;
	width: 100%;
	margin-right: 0px;
}
.grid > *:not(:last-child) {
    margin-right: 0px;
    margin-bottom: 0px;
}
section, footer, .titelbox {
    margin-left: 0px;
	margin-right: 0px;
}
section .uk-container, footer .uk-container {
    width: calc(100% - 30px);
    max-width: calc(100% - 30px);
}
.label {
	width: 50%;
	display: inline-block;
}
.uk-container {
    max-width: 100%;
	width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.js-filter > .einheit > div:first-child, 
.js-filter > .einheit > div:nth-child(2),
.js-filter > .einheit > div:nth-child(3),
.js-filter > .einheit > div:nth-child(4),
.js-filter > .einheit > div:nth-child(5),
.js-filter > .einheit > div:nth-child(6) {
	width: 100%;
}

.js-filter > .einheitNo > div:first-child,
.js-filter > .einheitNo > div:nth-child(2),
.js-filter > .einheitNo > div:nth-child(3) {
	width: 100%;
}
  
  }