* {
	margin: 0;
	padding:0;
	border: 0;
}

html, body {
	overflow-x:hidden;
}

html {height: 100%}

body {background-image:url(../images/wegweiser-joan-dablin.jpg); background-size: cover; background-position: center; background-attachment:fixed;}


p, a, h1, h2, h3, h4, h5, ul, li {font-family:Arial, Helvetica, sans-serif; color: #000;}

li {margin-left: 20px;}

p {text-align:right; padding: 10px; float: right; width: fit-content; font-size: 16px;}


h1 {color: transparent;
    font-size: 100px;}
h1::before {
    content: url(../images/joan-dablin-00-schwarz-orange-2021.svg);
    position: relative;
    top: 2px;
	margin-right: -500px;}
	
	
div#rechtliches p {text-align:left; width: auto; float: none; clear:both; padding: 0; line-height: 1.2;}
div#rechtliches h1 {color: #000;}
div#rechtliches h1::before {content: normal;}
div#rechtliches h2, div#rechtliches h3, div#rechtliches h4  {margin-top: 25px;}

div#leiste-oben, section#footer {width: calc(100% - 20px); background: linear-gradient(175deg, rgba(255, 255, 255, 0.85), transparent 75%); padding: 10px}

section#footer { position: fixed; bottom: 0; background: linear-gradient(175deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25));}

div#rechtliches {padding: 50px;}

div#rechtliches > div {background: linear-gradient(175deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)); text-align:left; padding:10px; margin-bottom: 105px;}

.anbieter {
    text-align: center;
}

img.anbierter-logo {
    height: 35px;
    width: auto;
    max-width: calc(25% - 30px);
    padding: 5px 10px 5px 10px;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	margin: 0;
	
}
div.socialmedia {float: left; width: fit-content;}

img.social-logo {max-height: 35px; width: auto; padding: 5px;}
div.socialmedia > a, div.anbieter a {color: transparent;}

hr.umbruch {visibility: hidden; margin-top: 20px; width: 100%;}

	
@media (max-width: 570px) {
	h1 {transform: scale(0.5); font-size: 10px;}
		div#rechtliches h1 {transform: scale(1.0); font-size: 26px;}

	}	
	
	
@media (max-width: 480px) and (min-width: 380px) {
img.social-logo {height: auto; max-width: calc(25% - 13px);}
div.socialmedia {float: left; width: calc(100% - 202px);}

	}	
	
@media (max-width: 380px) {
	h1 {transform: scale(0.33);}
	div#rechtliches h1 {transform: scale(1.0);}
	div.socialmedia {width: 66%;}
	img.social-logo {height: auto; max-width: calc(25% - 13px);}

	}	




.text {
    width: 30%;
    bottom: 155px;
    position: absolute;
    padding-left: 10px;
    background: #000;
    margin-left: 10px; 
}

.text p {
    float: none;
    text-align: left;
    color: #fff;
}

@media (max-width: 900px) {
    .text {
        width: 50%;
    }
}

@media (max-width: 480px) {
    .text {
        width: 92%;
    }
}

@media (max-width: 416px) {
    .text {
        bottom: 200px;
    }
}