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

html { height: 101%; }

body { background-color: #fffbf4; font-family: "segoe ui", helvetica, arial, tahoma; }

@font-face {
  font-family: 'Pompiere'; /* Eigener Schriftname */
  src: url('fonts/Pompiere-Regular.woff') format('woff'), /* Pfad zur Datei */
       url('fonts/Pompiere-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LemonTuesday'; /* Eigener Schriftname */
  src: url('fonts/LemonTuesday.woff') format('woff'), /* Pfad zur Datei */
       url('fonts/LemonTuesday.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

#mitte, #impressum, #datenschutz { margin: 0px auto; max-width: 1600px; }

#r1 { background-color: #d2bec2; font-family: Pompiere; font-size: 200%; margin: 0 0 0.2% 0; }
#r2 { background-color: #d4ccc4; font-family: Pompiere; font-size: 150%; }
#r3 { font-family: Pompiere; font-size: 150%; text-align: right; padding: 2%; }

#r1-c1 { float: left; width: 49%; }
#r1-c1 img { width: 90%; margin: 5%; }
#r1-c2 { float: left; width: 49%; }
#r1-c2-o { margin: 5% 0; }
#r1-c2-o p { line-height: 1.5em; top: -0.2em; position: relative; }
#r1-c2-u { padding: 20% 10%; }
#r1-c2-u img { float: right; }
.juliFormat { font-family: LemonTuesday; font-size: 200%; }

#r2-c1-l { float: left; width: 60%; }
#r2-c1-o { width: 90%; }
#r2-c1-o img { max-width: 90%; margin: 5%; }
#r2-c1-u p { line-height: 2em; padding: 0 0 3% 5%; }
#r2-c1-r { float: right; text-align: center; padding-top: 20%; width: 39%; }
#r2-c2 { max-width: 100%; text-align: center; min-height: 1.2em; font-size: 160%; line-height: 1.3em; padding: 2%; }

#impressum #r1, #datenschutz #r1 { font-size: 150%; margin: 0px auto; }
#impressum #r1-c1, #impressum #r1-c2, #datenschutz #r1-c1, #datenschutz #r1-c2 { float: none; width: 80%; margin-left: 10%; padding: 5% 0 0 0; }
#impressum #r1-c2, #datenschutz #r1-c2 { padding-bottom: 5%; }

#datenschutz #r1 { background-color: #d4ccc4; }

a { color: #000000; text-decoration: none; } 
a:hover { font-weight: bold; }

.clear { clear: both; }


@media screen and (max-width: 600px) {
#r1-c1, #r1-c2, #r1-c2-u img, #r2-c1-l, #r2-c1-r { float:none; width: 100%; }
#r1-c2-o p, #r2-c1-u p { padding: 3% 5%; }
#r2-c2 {padding-top: 10%;}
}