@font-face {
	font-family: 'Times New Roman';
	src: url('fonts/times_new_roman_bold-webfont.woff2') format('woff2'),
		 url('fonts/times_new_roman_bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Times New Roman';
	src: url('fonts/times_new_roman-webfont.woff2') format('woff2'),
		 url('fonts/times_new_roman-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
} 
@font-face {
	font-family: 'Times New Roman';
	src: url('fonts/times_new_roman_bold_italic-webfont.woff2') format('woff2'),
		url('fonts/times_new_roman_bold_italic-webfont.woff') format('woff');
	font-weight: 700;
	font-style: italic;
}
@font-face {
	font-family: 'Verdana';
	src: url('fonts/verdana_bold-webfont.woff2') format('woff2'),
		 url('fonts/verdana_bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

*{padding:0; margin:0; box-sizing:border-box; }
p{ }
a{color:#000; font-family:"Times New Roman", serif; font-weight:400; text-decoration: none;}
a:hover{ text-decoration: underline;}
em{font-style: normal;}

html, body{height:100%; font-family:"Times New Roman", serif;}
body{background-color: #ddd; font-size:clamp(5px, 3.3vw, 18px); font-weight:700; line-height: 120%; }
#wrapper{max-width:540px; margin:auto; padding:2.5% 0 1%; position:relative;}
main{width:100%; height:100%; padding-left:7.4%; position:relative;}
.bilder{width:100%;}
.bg {width:100%; margin-bottom: 0.4%;}
.bg img{width:100%; height:auto; border:solid 1px #888; border-radius:14px; }

.haben-sie, .text, .bubble, .ja{ position:absolute; padding:0 2px 10px; overflow: visible;}

.haben-sie{width:20.04%; background-color: #F7CD76; top:-1%; left:0px; padding:1px 0 3.5% 1%;}

.text{background-color: #fff; border: solid 1px #666; }

.text-1{width:65.74%; top:3.5%; right:10.56%; padding:0 0 0 0.75%;}
.text-2{width:45.185%; top:13.8%; right:2.222%;}

.ja{width:75.55%; height:12.2%; top:26.7%; right:10.37%; border:solid 0.5em #f30; border-radius:1.1em; background-color: #FFFED1; text-align: center;}
.ja h1{font-size:clamp(20px, 9.2vw, 51px); font-family: 'Verdana', serif; white-space: nowrap; letter-spacing:-0.11em; margin: 1.5% 0 2.5%;line-height:110%; font-weight:700;}
.ja .extr{letter-spacing:-0.32em;}

.text-3{width:61%; rotate: -19deg; top:51.75%; right:22.7%; padding:0 2px 0.75%;}

.bubble{width:37%; height:16%; top:61.6%; right:4%; background-image: url('bilder/bubble.png'); background-size: contain; background-repeat: no-repeat; text-align: center;  padding:6% 2% 0 0;}
.bubble p{line-height: 150%; margin-bottom:3%;}

.text-4{width:64%; height:10.5%; background-color: #F19D70; top:91.75%; right:17%; padding:0 0 2% 0.75%;}
.text-4 p:first-child, .text-4 p:last-child{font-size:clamp(6px, 3.85vw, 21px);text-align: center;line-height: 120%;}
em{font-style:italic;}

footer{margin:5% 0 0; font-size:clamp(5px, 2.93vw, 16px); text-align: right;}

.impr {font-size:clamp(5px, 2.93vw, 16px); font-weight:400;}
.impr h1, .impr h2.h1{ font-size:clamp(6px, 3.85vw, 21px)}
.impr h2{ font-size:clamp(5px, 3.3vw, 18px);}