html, body {
	font-family: 'Montserrat';
	background: radial-gradient(darksalmon, mediumblue);
	background: #745d75;
	background: repeating-radial-gradient(black, salmon 350px); /* 10px 350px) */
	background: mediumslateblue;
	cursor: crosshair;
	font-size: 16px;
}

h1, h2, h3, p {
	text-align: left;
	margin: 0 auto;
	color: #23603e;
	color: white;
	line-height: 1.4;
}

h1, h2, h3, .h3 {
	letter-spacing: .05em;
	font-weight: bold;
    overflow-wrap: break-word;
}

h1 {
	font-size: 100px;
	font-size: 12vw;
	letter-spacing: .05em;
}

h2 {
	font-size: 8vw;
}

h3, .h3 {
	font-size: 8vw;
}

p, a, blockquote, em, strong, ul, ol, li, span {
	
}

p {
	text-align: left;
	text-align: justify;
	font-weight: 100;
}

a {
	cursor: cell;
	color: inherit;
}

em {
	background: white;
	color: mediumslateblue;
}

hr {
	border-top: 5px dotted cornsilk;
}

strong, .bold {
	font-weight: 800;
}

.regular {
	font-weight: 400;
}

.thin {
	font-weight: 100;
}

.farbig h3 {
	text-align: center;
	border: 2px solid transparent;
	transition: opacity 2s;
	margin-bottom: 1rem;
}
.farbig h3:hover, .farbig[aria-expanded='true'] h3 {
	border: 2px solid;
	opacity: 1 !important;
}

.big-ass {
	font-size: 59vw;
	font-weight: bold;
	line-height: 1;
}

header p {
	text-transform: uppercase;
	background: indianred;
	text-align: center;
	letter-spacing: .05em;
}

footer p {
	background: cadetblue;
	text-align: center;
	font-weight: 400;
	letter-spacing: .05em;
	margin-bottom: 0;
}
footer p a {
	color: white;
	text-decoration: underline;
}
footer p a:hover {
	color: hotpink;
}

.content {
	padding: 20px;
}

.main a {
	border-bottom: 2px solid;
}

.aufruf {
	margin-top: 100px;
}

.box {
	width: 60%;
	margin: 100px;
}
.box:nth-child(even) {
	margin-left: auto;
}
.box p {
	color: mediumslateblue;
    text-shadow: blanchedalmond 3px 2px;
	font-weight: 700;
	text-align: center;
}
.box p:hover {
	color: orchid;
	cursor: none;
}
.box em {
	background: none;
}

.img-bg {
	background: white;
	padding: 50px;
	background-position: bottom; 
	border: 20px solid white;
	margin-top: 50px;
	margin-bottom: 50px;
}
img {
	max-height: 50vh;
}
.img-wrap a {
	background: repeating-radial-gradient(salmon, transparent 100px);
	display: block;
}
.img-wrap img {
	display: block;
	margin: auto;
	padding: 50px;
}
.img-wrap a:hover img {
	max-height: 100vh;
}
.img-wrap iframe {
	margin-left: auto;
	margin-right: auto;
}
.embed-responsive {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.underline {
	border-bottom: 2px solid;
	font-style: italic;
}
.alt .alt-text {
	display: none;
}
.alt:hover .alt-text {
	display: inline;
	border-bottom: 0px;
}

.semi-trans {
	opacity: .5;
}

a.info {
	display: block;
	text-align: right;
}
.info h3 {
	display: inline-block;
	color: beige;
	text-align: right;
	border-bottom: 3px solid;
	background: salmon;
    border-right: 5px solid;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px;
}
.info:hover h3, .info[aria-expanded='true'] h3 {
	color: salmon;
	background: beige;
	border-color: salmon;
}
#info p {
	color: beige;
	padding: 20px;
}
#info a {
	background: beige;
	color: mediumslateblue;
}

.disclaimer {
	font-size: 20px;
	font-weight: 400;
	color: palevioletred;
	background: cornsilk;
	padding: 20px;
	margin-bottom: 50px;
}

/* home -- https://www.w3schools.com/css/tryit.asp?filename=trycss3_var */

.home a:hover {
	font-weight: bold;
	color: gold;
}

a:hover {
	text-decoration: none;
}

.blog-roll {
	margin-top: 50px;
	margin-bottom: 50px;
}

.sandy-bg h3 {
	background-color: sandybrown;
}
.sandy-wrap p {
	background: sandybrown;
	color: mediumslateblue;
	padding: 20px;
}

.turquoise-bg h3 {
	background: turquoise;
}
.turquoise-wrap p {
	background: turquoise;
	color: white;
	padding: 20px;
	font-weight: 400;
}

.skyblue-bg h3 {
	background-color: skyblue;
}
.skyblue-wrap p {
	background: skyblue;
	color: mediumslateblue;
	padding: 20px;
}


.green-bg h3 {
	background-color: #009380;
}
.green-wrap p {
	background: #009380;
	color: white;
	padding: 20px;
}

.batch-title {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 20px;
}


/* tag der befreiung */

.lightskyblue h3, .anlass h3 {
	color: lightskyblue;
}
.lightskyblue-wrap #anlass p {
	background: lightskyblue;
	color: white;
	padding: 20px;
}

.turquoise h3, .danach h3 {
	color: turquoise;
}
.turquoise-wrap p, #danach p {
	background: turquoise;;
	color: white;
	padding: 20px;
	font-weight: 400;
}

.pink h3, .verstehen h3 {
	color: pink;
}
.pink-wrap p, #verstehen p {
	background: pink;
	color: white;
	padding: 20px;
	font-weight: 400;
}

.aquamarine h3, .neue-welt h3 {
	color: aquamarine;
}
.aquamarine p, #neue-welt p {
	background: aquamarine;
	color: mediumslateblue;
	padding: 20px;
}

@media (min-width: 768px) {
	h1 {
		font-size: 6vw;
	}
	h2 {
		font-size: 5vw;
	}
	h3, .h3 {
		font-size: 4vw;
	}
	p, body {
		font-size: 3vw;
	}
	.small {
		font-size: 2vw;
	}
	.content {
	}
	.disclaimer {
		font-size: 30px;
		width: 80%;
		margin-top: 50px;
	}
	#info p {
		font-size: 2vw;
		width: 50%;
		margin-right: 0;
	}
}


@media (max-width: 767px) {
	p {
		font-weight: 400;
		text-align: left;
		line-height: 1.6;
	}
	img {
		/*display: none;*/
	}
	.box {
		width: 75%;
		margin: 50px auto;
	}
	.box p {
		color: gold;
		text-shadow: black 3px 2px;
		font-size: 20px;
		text-align: left;
	}
	.box p strong {
		border-bottom: 2px solid;
	}
}