/* CSS RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;

  /*color: #333;*/
  text-decoration: none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }
/*
ol, ul {
  list-style: none; }
*/

table {
  border-collapse: collapse;
  border-spacing: 0; }

  /* +++++++ */

  html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
  }

  *,
  *::before,
  *::after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
  }

  @-ms-viewport {
    width: device-width;
  }

  [tabindex="-1"]:focus {
    outline: none !important;
  }

  hr {
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    height: 0;
    overflow: visible;
  }

  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
  }

  p,
  ol,
  ul,
  dl {
    margin-top: 0;
    margin-bottom: 1em;
  }

/* ++++++++ */
html {
  height: 100%;
	overflow-y: scroll;
}

body {
	min-height: 100%;
}


/*html, */body {	font-size:	100%; } /* 	16px */

body {	line-height: 	1.5; }


/* ++++++++ * /
@font-face {
    font-family: 'robotomedium';
    src: url('fonts/roboto/Roboto-Medium-webfont.eot');
    src: url('fonts/roboto/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto/Roboto-Medium-webfont.woff') format('woff'),
         url('fonts/roboto/Roboto-Medium-webfont.ttf') format('truetype'),
         url('fonts/roboto/Roboto-Medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoregular';
    src: url('fonts/roboto/Roboto-Regular-webfont.eot');
    src: url('fonts/roboto/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/roboto/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/roboto/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('fonts/roboto/RobotoCondensed-Regular-webfont.eot');
    src: url('fonts/roboto/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('fonts/roboto/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('fonts/roboto/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/

/*
@font-face {
    font-family: 'robotolight';
    src: url('fonts/roboto/Roboto-Light-webfont.eot');
    src: url('fonts/roboto/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/roboto/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/roboto/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensedlight';
    src: url('fonts/roboto/RobotoCondensed-Light-webfont.eot');
    src: url('fonts/roboto/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto/RobotoCondensed-Light-webfont.woff') format('woff'),
         url('fonts/roboto/RobotoCondensed-Light-webfont.ttf') format('truetype'),
         url('fonts/roboto/RobotoCondensed-Light-webfont.svg#roboto_condensedlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/
html,body,a,p,span {
	font: 1em/1.5  Roboto, 'roboto_condensedlight', Helvetica, Arial, sans-serif;
}

h1 {
	font: 1.7em/1.5  Roboto, 'robotolight', Helvetica, Arial, sans-serif;
}

section,
a {
color: #333;
}

a:hover {
	color: #777;
}

a:active {
	color: #077;
}

section {
  min-height: 100vh;
  position: relative;
}

section.seite {
  padding-top: 5em;
}

.punkt, .GP {
  display: block;
  position: absolute;
  z-index: 4;
}

body {
  background: #111;
}

#eins .farbe1 {
/*
  width:	80vmin;
  height: 80vmin;
  border-radius: 40vmin;
  top: -15vmin;
  left: -80vmin;
*/

  width: 95vmin;
  height: 95vmin;
  border-radius: 47.5vmin;
  right: -10vmin;
  bottom: 10vmin;
  z-index: 5;
}

.farbe1	 { background: #222;
}

.GP {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 0 10% 0;
  z-index: 6;
}

.GP {
  background-image: url("GP.png");
  background-size: contain;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-origin: content-box;
}


#eins h1 {
  font-size: 5vh;
  letter-spacing: 0.3vh;
  position: relative;
  bottom: 20vh;
  text-transform: uppercase;
  color: #FFF;
  transform-origin: top left;
  transform:rotate(-90deg);
  z-index: 20;
}

#eins h1 a {
  color: #CCC;
}

#kontakt {
  background: #234348;
    background: #FFF;
}

#kontakt,
#kontakt a {
color: #222;
}

.stuck {
  position:fixed !important;
  top:0;
  z-index: 10;
  background: #FFF;
  display: block;
  width: 100%;
/*  height: 8em; */
}

ul {
  list-style: none;
}

li {
  margin:0;
  padding: 0;
}

/* ----------------------------------------------------------------------------- ausgewählter Text */

::selection {
	background: #999;
	color: white;
	}

::-moz-selection {
	background: #999;
	color: white;
	}

img::selection {
	background: transparent;
	}

img::-moz-selection {
	background: transparent;
	}

body {
	-webkit-tap-highlight-color: rgba(40,40,40, 0.62);
	}

/* ---------------------- dots */

header p {
  margin-bottom: 0;
}

/* ---------------------- * /
.inhalt {
  margin: 3em 0;
}
*/


/* =============================================================================
Layout
/========================================================================== */
/*
Schriftgröße:	16px
Linenhöhe:	48px /	3em
Rasterweite:	16px /	1em
Spaltenbreite:	4	 =>	64px
Abstand:	2	 =>	32px

Gesamtbreite:	576px, 	6	 Spalten
*/

/* Breite, mittig setzen */
.breite {
	width: 90%;
  max-width: 38em;
	margin: 0 auto;
	position: relative;
	padding: 0 0 0 2em;
  height: calc(100vh - 5em);
	}

/*.dots { min-width: 38em; }*/

header h1::after,header h1::before {
  color: #F22;
  font-weight: bold;
  }

/* =============================================================================
   Media Queries
   ========================================================================== */
/* =================
	- 270
  ============== */
@media only screen and (max-width: 270px) {

  .breite { margin: 0; }
  h1 { line-height: 1; }

/*  header h1::before { content:"0"} */

}

/* =================
	- 500
   ============== */
@media only screen and (max-width: 500px) {

  .breite { max-width: 22em; padding: 0 0 0 1em; }
	body { font-size: 75%; } /*	12px */
  .dots { font-size: 7px; }

/* header h1::after { content:"01"} */
}

/* =================
 501 -  (wenn die Punkte genug Platz geben, können die Blöcke nebeneninander stehen)
   ============== */
@media only screen and (min-width: 501px)  {
/*
  .niedrig main ul,
  .niedrig .contact {
    width: 18em;
    float: right;
  }

  .niedrig .contact {
    float: left;
  }
*/
}

/* =================
 501 - 746
   ============== */
@media only screen and (min-width: 501px) and (max-width: 746px)  {

	body { font-size: 81.25%; } /* 13px */

/* header h1::after { content:"2"} */
}


/* =================
 747 -	1000
   ============== */

@media only screen and (min-width: 747px) and (max-width: 1000px)  {

	body { font-size: 87.5%; } /*	14px */

/* header h1::after, header h1::before { content:"3"} */
}

/* =================
  747 -
   ============== */
@media only screen and (min-width: 747px) {


  /* header h1::after { content:"4"} */
}