/* =========================================
           GRUNDEINSTELLUNGEN
        ========================================= */

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            /* background: #e9e9e9; */
            color: #333;
            line-height: 1.6;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
        }
		
		


        /* =========================================
           KOPFBEREICH / HEADER
        ========================================= */

/*        header {
            width: 100%;
            height: 400px; */

            /* Platzhalter für ein Bild */
		/*	background:
                linear-gradient(
                    rgba(0,0,0,0.25),
                    rgba(0,0,0,0.25)
                ),
                url("../images/100.jpg");
                //center center / cover no-repeat;
		*/		

/*
            display: flex;
            align-items: center;
            justify-content: center;

            color: white;
            text-align: center;
			
        }

        header h1 {
            font-size: 42px;
            text-shadow: 2px 2px 5px #000;
        }
*/


        /* =========================================
           INHALT
        ========================================= */

        main {
            padding: 20px;
        }


        /* =========================================
           VOLLSEITIGER BEREICH
        ========================================= */

        .full-width {
            width: 100%;
            min-height: 180px;

            /* background: #f4f4f4;
            border: 1px solid #ccc; */

            padding: 25px;
            margin-bottom: 20px;
			
			text-align: justify;
        }

        .full-width h2 {
            margin-bottom: 10px;
            color: #222;
        }
		
		
        .full-width h1 {
            text-align: center;
            color: #f18825;
        }		


        /* =========================================
           4 SPALTEN
        ========================================= */

        .four-columns {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .column-box {
            min-height: 200px;
            background: #f7f7f7;
            border: 1px solid #ccc;
            padding: 20px;
        }

        .column-box h3 {
            margin-bottom: 10px;
            color: #222;
        }

		.column-box a {
			text-decoration: none;
			
		}



        /* =========================================
           WEITERER VOLLFLÄCHIGER BEREICH
        ========================================= */

        .content-area {
            width: 100%;
            min-height: 220px;
            /* background: #fafafa;
            border: 1px solid #ccc; */
            padding: 25px;
            margin-bottom: 20px;
        }


        /* =========================================
           FOOTER
        ========================================= */

        footer {
            background: #222;
            color: white;
            padding: 20px;
        }

        .footer-columns {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .footer-box {
            min-height: 150px;
            background: #333;
            border: 1px solid #555;
            padding: 20px;
        }

        .footer-box h3 {
            margin-bottom: 10px;
            color: white;
        }

		.footer-box a {
			text-decoration: none;
			color: #fff;
		}
		

        /* =========================================
           TABLET
        ========================================= */

        @media (max-width: 900px) {

            .four-columns {
                grid-template-columns: repeat(2, 1fr);
            }

            .footer-columns {
                grid-template-columns: repeat(2, 1fr);
            }

            .nav-menu > li > a {
                font-size: 14px;
                padding: 12px 5px;
            }

        }


     /* =========================================
           KLEINE SMARTPHONES
        ========================================= */

        @media (max-width: 480px) {

            header {
                height: 220px;
            }

            header h1 {
                font-size: 24px;
            }

            .column-box {
                min-height: 180px;
            }

            .footer-box {
                min-height: 150px;
            }

        }
 


/* ##########  alter Bereich  ############# */
		/* Image Seitenanpassung */
		.scale img {
			max-width: 100%;
			max-height: 100%;
			width: auto;
			height: auto;
		}

	header {
		width: 100%;
		height: 200px;
		background-image: url(../images/Panorama.jpg);
		background-size: 100% 100%;
	}

	
	.trenn {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;

		hyphenate-limit-chars: auto 5;
		hyphenate-limit-lines: 2;
		-webkit-hyphens: auto;
		-webkit-hyphenate-limit-chars: auto 3;
		-webkit-hyphenate-limit-lines: 4;
		-ms-hyphens: auto;
		-ms-hyphenate-limit-chars: auto 3;
		-ms-hyphenate-limit-lines: 4;   
	} 	


/* Box auf Mieterseite */
	.box {
		background-color: #fff;
		margin: 1em 0 1em 0;
		line-height: 1.3em;
		padding: 3em;
		text-align: center;
		border: 1px solid black;
		border-radius: 5px;
		-moz-box-shadow: 10px 10px 5px #888;
		-webkit-box-shadow: 10px 10px 5px #888;
		box-shadow: 10px 10px 5px #888;
	}

	.verweis{
		color: #000;
		text-decoration-style: dotted;
		font-weight: bold;
	}
	
	.col_kategorie {
		color: red;
		font-weight: bold;
	}
		
#cookie{
  padding: 2em;
  background-color:#FFFFFF;
  color:#000000;
  border: 1px solid #000000;
  width: 70%;
  min-width: 350px;
  line-height:30px;
  z-index: 2;
  font-size:16px;
  text-align:center;
  white-space: wrap;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity:0.8;
  moz-opacity:0.8;  
 }

 .cookieposition{
	position: absolute;
	top: 200px;
	display: grid;
	place-items: center;
 }

		
#logo {
		height: 110px;
		position:relative;
		top: 0px;
		left:10px;
		background-repeat:no-repeat;
		z-index:2;
	}
		
#logotext {
    padding-top: 50px;
    font-size: 20pt;
    color: white;
}

/* #######  Mieterseite  ######### */
 .btn{
    padding: 5px;
    display: block;
    width: 300px;
    background-color: #64A92c;

    border-right:3px solid black;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-decoration:none;
    border-radius: 7px;
 }

	.btn_div{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}

 .btn_pdf{
  position: relative;
  top: 0px;
  width: 270px;
  height: 75px;
  margin: 0 .5em 1em 0;
  padding: 0 5px;
  text-align: left;
  font-size: 14px;
  font-weight:bold;
	color: #888888;
	background: #FFFFFF;		
  border-radius:10px;
 }

 .btn_pdf img{
    padding-right: 5px;
    vertical-align:middle;
 }

 .btn_pdf span{
    display:inline-block;
    width: 120px;
    vertical-align:middle;
 }
 

		
		
 /* Mieterseiten TopNavigation */
	#navbox{
		display: flex; 
		flex-flow: row wrap;
		justify-content: center; /* flex-start;	*/	
		align-items:center;
		margin: 1em 1em 0 1em;
		width: 100%;
	}
/*	
	.navbtn{
		width: 11em;
		height: 2em;
		font-weight: bold;
		font-size: 1.2em;
		font-family: arial, helvetica;
		text-align: center;
		color: #fff;		
		background: #0088c8;
		margin: 0 .4em .4em 0;
		padding: .2em;
		border: 1px solid #c0c0c0;
		border-radius: .2em;
		cursor: pointer;
	}
*/
	
	.mieterbtn{
		width: 11em;
		height: 1.3em;
		font-weight: bold;
		font-size: 1.2em;
		font-family: arial, helvetica;
		text-align: center;
		background: #FFFFFF;
		margin: 0 .4em .4em 0;
		padding: .2em;
		border: 1px solid #c0c0c0;
		border-radius: .2em;
	}
	

	
	/* Links für Objekteumgebung */
	.umgebungbtn{
		width: 15em;
		height: 30px;
		font-weight: bold;
		font-size: .8em;
		font-family: arial, helvetica;
		text-align: center;
		background: #0088c8;
		margin: 0 .4em .4em 0;
		padding: .2em;
		/* border: 1px solid #c0c0c0; */
		border-radius: .2em;
	}

	.mieterlink{
		text-decoration: none;
		color: #fff;
	}
	
	.red{ color: red !important;}



	.tooltip {
		position: relative;
		display: inline-block;
	}

	.tooltip .tooltiptext {
		visibility: hidden;
		width: 500px;
		background-color:#E7C600;
		color: black;
		text-align: left;
		border-radius: 6px;
		padding: 5px;
		position: absolute;
		z-index: 1;
		bottom: 200%;
		left: 55px;
		/* margin-left: -60px; */
  
		/* Fade in 2 sec nach to 100% opac: */
		opacity: 0;
		transition: opacity 2s;
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}

	.tooltipleft{ color: red !important; }
	
 /* Buttons */
 button {
	width: 200px;
	margin: 0 10px 5px 0;
	padding: .4em .8em;
	background: #0088c8 linear-gradient(hsla(0, 0%, 100%, .2), transparent);
	border: thin solid rgba(0, 0, 0, .1);
	border-radius: 0 0.4em 0.4em 0.4em;
	box-shadow: 0 .2em 0.4em rgba(0, 0, 0, .5);
	color: white;
	text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
	font-size: 110%;
	line-height: 1.5;
} 

 button:focus,
 button:hover {
	box-shadow: 0 .3em 0.6em rgba(0, 0, 0, .8);
 }

 button.cancel {
	background-color: #c32e04;
 }

 button.ok {
	background-color: #508eb8; /* #5a9900; */
 }


/* ######## Laufschriften / Ticker ######## */
	.marquee-container {
		width: 100%;
		margin:0 0 0 0;
		overflow: hidden;
		white-space: nowrap;
		box-sizing: border-box;
		height:40px;		
		background:#0088c8; /* #dfdfdf; */
	}

	.marquee-text {
		display: inline-block;
		padding-left:100%;
		padding-top:10px;
		padding-bottom:10px;
		animation-name: ticker;
		animation-duration: 150s;
		/* animation-delay: 3s;
		animation-iteration-count: 2; */
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		color:#fff;
	}
	
	.marquee-text:hover{
		animation-play-state: paused;
	}

	.marquee-quelle{
		position:relative; 
		top:-45px;
		height:42px !important;		
		padding:7px 0 0 5px; 
		width:200px;
		color:#fff; 
		background:#f18825;
		font-weight:bold;
	}

	
	@keyframes ticker {
		0% {
			transform: translate(0, 0);
		}
		100% {
			transform: translate(-100%, 0);
		}
	}

	a.marquee{
		text-decoration:none;
		color:#fff;
		font-weight:normal;
	}
	
	a.marquee:hover{
		background:black;
		color:white;
	}
	
/* ############################# */