
/* Mobile */

@media only screen and (max-width:840px) {	
	.desktop {
		display: none!important;
	}
    body {
        padding-top: 20vw;
        font-size: 6vw;
        font-size: 5.5vw;
    }	
	.small {
		font-size: .75em;
		line-height: 1.3;
	}

    .hamburger {
        width: 10vw;
        height: 4vw;
        right: 4vw;
        top: 4.2vw;
    }
	.hamburger.active {
		top: 5vw;
	}
    .hamb_line {
        width: 10vw;
        margin-bottom: 2vw;
    }
	.active .hamb_line:first-child {
		width: 10vw;
	}
	.active .hamb_line:last-child {
		width: 10vw;
	}
	.hamb_line:last-child, .hamburger:not(.active):hover .hamb_line:last-child {
		width: 7vw;
	}
	#ani1 {
		width: 20%;
		left: 36.1%;
		top: 17%;
	}	
	#ani2 {
		width: 20%;
		left: 43.7%;
		top: 17%;
	}
	#ani3 {
		width: 40%;
		left: 30%;
		top: 50%;
	}

	ul {
		margin-top: 4vh;
		margin-left: 2vw;
	}
/*	
	ul>li:before {
		content: "– ";
		line-height: 1.55;
		margin-left: -3vw;
	}
*/	
	.break-desktop br {
		display: none;
	}
	.pt8 {
		padding-top: 8vh !important;
	}
	.ptm4 {
		padding-top: 4vh !important;
	}
	.ptm6 {
		padding-top: 6vh !important;
	}
	.ptm12vw {
		padding-top: 12vw !important;
	}
	.ptm24vw {
		padding-top: 24vw !important;
	}
	.ptm8 {
		padding-top: 8vh !important;
	}
	.ptm10 {
		padding-top: 10vh !important;
	}
	.pb2 {
		padding-bottom: 2vh !important;
	}
	.pb4 {
		padding-bottom: 4vh !important;
	}
	.pb6 {
		padding-bottom: 6vh !important;
	}
	.pb8 {
		padding-bottom: 8vh !important;
	}
	.mt6 {
		margin-top: 6vh !important;
	}	
	.mb8 {
		margin-bottom: 8vh !important;
	}

	#sitelogo.icon {
		width: 10%;
		margin: 0 0 0 5%;
	}	
	.default {
		font-size: 17px!important;
	}
	.break-desktop br {
		display: none;
	}
	.break-desktop .mobile br {
		display: inline-block;
	}
    header {
        background: #fff;
        position: fixed;
        left: 0;
        top: -1px;
        width: 100vw;
        height: 14vw;
        z-index: 9;
        margin: 0;
        /* display: block; */
        /* padding-bottom: 2vh; */
    }
    a#siteicon {
        z-index: 9999;
        position: absolute;
        left: 39vw;
        top: -2vw;
        margin: 0;
        width: 16vw;
        z-index: 9999;
        background: #fff;
        padding: 6.612vw 3vw 1.5vw 3vw;
        border-radius: 50%;
        box-shadow: 0 2vw 2vw -2vw rgba(0, 0, 0, .2);
    }
	.contactbut {
		border-radius: 6vw;
		margin: 3vw 0 0 0;
		padding: 1vw 3vw 1vw 3vw;
		font-size: 3.5vw;
		top: 0;
		right: 18vw;
		letter-spacing: 0.1vw;
	}
	a.arrow {
		padding-right: 6vw;
	}
	a.arrow:before {
		content: "";
		width: 2.2vw;
		height: 2.8vw;
		top: 1.5vw;
		right: 2.4vw;
	}
	#down {
		right: 3vw;
		bottom: 4vw;
		font-size: 9vw;
		width: 8vw;
	}
    #Intro {
        margin-top: 0;
    }
	#Intro .title {
		font-size: 18vw;
		line-height: .9;
		margin-bottom: 6vw;
	}
    #Intro .subtitle {
        font-size: 8vw;
        line-height: 1.2;
        margin-top: 4vh;
        margin-bottom: 6vh;
    }
	#Intro figure img {
		width: 150%;
		max-width: 150%;
		margin-left: -20%;
	}

	#navigation {
		width: 100vw;
		padding: 0;
		margin-top: 0;
		justify-content: space-between;
	}
    #navigation.active {
        width: 100vw;
        padding: 10vh 0 0 0;
        margin-top: 0;
        height: 90vh;
    }
    #navigation ul.links {
        width: 75vw;
        margin: 0;
    }
    #navigation .links A {
        font-size: 7vw;
        margin: .5vh 0;
        transform: translateX(-70vw);
    }
	#navigation.active .links A {
		transform: translateX(0vw);
	}
    ul.submenue {
        position: relative;
        left: 0;
        top: 0;
        border-left: 1px solid #fff;
        padding-left: 6vw;
        margin-top: 1vh;
    }
    #navigation .links ul.submenue A {
        font-size: 5vw;
        margin: 0;
        line-height: 1.5;
    }
	.nav-footer {
		margin-bottom: 10vh;
		margin-top: 0;
	}
    .nav-footer .footer-icon {
        width: 10vh;
        margin-bottom: 2vh;
    }
    .nav-adresse {
        left: 17vw;
        width: 75vw;
        font-size: 4vw;
        display: block;
        line-height: 1.3;
        bottom: 6vh;
    }
	.nav-adresse div {
		width: 100%;
	}

	.down-link {
		bottom: 3vh;
		width: 80px;
		height: 80px;
		position: fixed;
	}
    p, a {
        margin-bottom: 4vw;
        margin-top: 4vw;
    }
	p.big {
		font-size: 1.5em;
	}
	h2, .news h2 {
		font-size: 7vw;
		line-height: 1.3;
		margin-top: 6vw;
		margin-bottom: 0;
	}
    .section-content {
        padding: 12vw 0 18vw 0;
        width: 88vw;
    }
	.title {
		font-size: 4vw;
	}
    h2.teaser {
        font-size: 6vw;
        /* margin-top: 3vw; */
        /* margin-bottom: 0; */
    }
	.section-content .text {
		font-size: 4vw;
	}
	.section-content.line-top {
		padding-top: 3vh;
	}
	.left-content {
		width: 100%;
		padding-right: 0;
	}
	.main-content {
		width: 100%;
	}
	.flex {
		flex-direction: column;
	}	
	.flex > * {
		width: 100%;
	}	
    .img-btn {
		width: 36vw;
        padding: 2vw;
        border: 1px solid #1c1c1c;
        border-radius: 20vw;
        height: 36vw;
        margin-top: 6vw;
        margin-bottom: 4vw;
    }
	.fade .img-btn {
		width: 36vw;
	}
	.fade.animate .img-btn {
		width: 70vw;
	}
	
	a.switch_btn {
		font-size: .8em;
	}
	.kreise {
		margin-top: 10vw;
		flex-direction: column;
		gap: 3vw;		
	}
    .kreis {
        width: 70vw;
        height: 70vw;
        font-size: 5.7vw;
        margin: 0 auto;
    }
	.kreis .small {
		font-size: .7em;
		width: 80%;
	}
    .blog-content {
        margin-top: 0;
        flex-direction: column;
    }
	.blog-box {
		width: 100%;
		margin-top: 8vw;
		padding-top: 8vw;
		border-top: 1px solid #1c1c1c;
	}
	
/* Unterseiten */	
	#start h1.headline_top {
		min-width: 80%;
		width: auto;
		font-size: 12vw;
	}
	.content-section .headline_2 {
		font-size: 10vw;
		line-height: 1.3;
	}

	.content-section h3 {
		font-size: 21px;
	}
	.section-content.full.banner.color {
		padding-bottom: 8vw;
	}
	.banner-text {
		top: 6%;
	}
	.banner-text.zitat {
		font-size: 7vw;
	}
	.banner-text.zitat .name {
		font-size: 4vw;
	}
	.wir .banner-text {
		position: relative;
		left: initial;
		top: initial;
		margin: auto;
	}
	.col-right {
		width: 100%;
		margin-left: auto;
	}
	
	.kontakt-logo {
		width: 64%;
		margin-bottom: 4vw;
	}

    .kontakt-header {
        font-size: 8vw;
        line-height: 1.1;
        margin-bottom: 4vw;
        text-align: center;
    }	
	.kontakt-text, .kontakt-text a {
		font-size: 5vw;
	}
    .kontakt-text {
        flex-direction: column;
        text-align: center;
    }
	.kontakt-text .footer-name, .kontakt-text .footer-adresse, .kontakt-text .footer-kontakt {
		width: 100%;
	}
    footer {
        background: #80684B;
        color: #fff;
        border-radius: 10vw 10vw 0 0;
        font-weight: 300;
        padding: 4vw 2vw;
        margin-top: 8vw;
    }
	footer p {
		margin-top: 3vw;
		margin-bottom: 1vw;
	}
	.kontakt-text .footer-icon {
		width: 25%;
	}
	
    .footer {
        margin-top: 2vw;
        padding-top: 6vw;
        font-size: 4vw;
        text-align: center;
    }
	.legal-links {
		float: none;
		display: block;
		margin-top: 4vw;
	}
    .legal-links a {
        color: #fff !important;
        margin-left: 4vw;
        margin-right: 4vw;
        font-size: 4vw;
    }
	#up {
		bottom: 5vw;
		right: 5vw;
		width: 6vw;
		height: 6vw;
		padding: 2vw;
	}
	
/* Impressum, Datenschutz */	
	body.legal {
		font-size: 16px;
		line-height: 1.4;
	}	
    .legal h1 {
        font-size: 8vw;
    }
	.legal h2 {
		font-size: 5vw;
		letter-spacing: 0;
		margin: 10vw 0 4vw 0;
		font-weight: 600;
	}
	.legal .content-section p, .legal .content-section a {
		margin-bottom: 12px;
		margin-top: 12px;
	}
	.legal ul {
		margin-top: 12px;
		margin-left: 10px;
		margin-bottom: 24px;
	}
	.legal strong, .legal b {
		font-weight: 500;
	}
	.pagecontent {
		width: 90%;
		margin: 8vh auto 4vh auto;
	}	
	.textpage .titel {
		font-size: 10vw;
		margin-bottom: 7vw;
	}
	.pagecontent .titel {
		text-align: left;
	}	
	.pagecontent h2 {
		font-size: 5.5vw;
		margin: 8vw 0 3vw 0;
		line-height: 1.1;
		text-align: left;
	}	
	.pagecontent p, .pagecontent a {
		font-size: 15px;
		margin: 1.5vw 0;
		text-align: left;
	}
	
}