/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local(''),
       url('../fonts/roboto-v30-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
}
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
}

body { color: #ffffff; font-family: "Roboto", sans-serif; font-size: 15px; font-weight: 300; line-height: 26px; }
.schriftGross { font-size: 18px; }
body, div, ul, li { margin: 0; padding: 0; border: 0; outline: 0; }
strong, em { font-weight: 300; }
p { margin-top: 0; }
a { text-decoration: none; color: #ffffff; }
a:visited { color: #ffffff; }
ul { list-style-type: none; }
em { font-style: normal; }
h1 { position: absolute; top: -1000px; }
noscript { font-size: 18px; line-height: 58px; text-align: center; position: absolute; bottom: 35px; width: 100%; color: #ffffff; background-color: rgba(0, 0, 0, 0.88); display: block; }

#raum { position: absolute; overflow: hidden; width: 100%; min-width: 1280px; height: 100%; min-height: 800px; }
#logo, #teaser { position: absolute; left: 52px; top: 84px; width: 258px; height: 138px; background-repeat: no-repeat; }
#logo { background-image: url(../img/logo_hell_bildmarke.png); }
.dunkleZeiten #logo { background-image: url(../img/logo_dunkel_bildmarke.png); }
#teaser { background-image: url(../img/logo_hell_wortmarke.png); transition: opacity 2s linear; -webkit-transition: opacity 2s linear; }
#menu { position: absolute; left: 0; top: 0; width: 100%; height: 50px; background-color: rgba(0, 0, 0, 0.46); z-index: 9; opacity: 0; text-align: center; transition: opacity 0.7s ease-in, transform 0s, -webkit-transform 0s; -webkit-transition: opacity 0.7s ease-in, transform 0s, -webkit-transform 0s; }
#menu ul { display: inline-block; }
#menu li { float: left; margin-left: 122px; border-top: 2px solid transparent; }
#menu li:first-child { margin-left: 0; }
#menu li:hover, #menu li.actual { border-top-color: #ffffff; }
#menu a { font-size: 15px; line-height: 46px; padding: 1px 4px; display: inline-block; }
#menu .actual a { outline: 0 none; }
#menu .schriftgroesse { font-size: 13px; }
.schriftgroesse span { font-size: 18px; }

/* Hintergrundbilder: */
.background { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1s linear; -webkit-transition: opacity 1s linear; }
.bg_startseite_2 { background: url(../img/bg_startseite_2.jpg) center no-repeat; background-size: cover; }
.bg_weg { background: url(../img/bg_media.jpg) 0 0 repeat; }
.bg_galerieHistorisch { background: url(../img/bg_galerie_historisch.jpg) center no-repeat; background-size: cover; }
.bg_galerieWerkstatt { background: url(../img/bg_galerie_werkstatt.jpg) 0 0 repeat; }
.bg_galerieHeute { background: url(../img/bg_galerie_heute.jpg) 0 0 repeat; }
.bg_presse { background: url(../img/bg_presse.jpg) center no-repeat; background-size: cover; }
.bg_impressum { background: url(../img/bg_impressum.jpg) 0 0 repeat; }

/* Hauptseite: Struktur */
.page { position: relative; float: left; height: 100%; }
#startseite { width: 100%; background: url(../img/bg_startseite_1.jpg) no-repeat center; background-size: cover; }
#scrollbereich { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#unterseiten { position: relative; width: 7000px; height: 100%; margin-left: 100%; }
#projekt { width: 1400px; }
#weg { width: 1600px; height: 100%; overflow: hidden; }
#galerie { width: 1400px; }
#presse { width: 1200px; }
#impressum { width: 1400px; }
#zeitstrahl { position: absolute; left: 350px; bottom: 25px; width: 4900px; height: 1px; padding-left: 500px; background-color: #ffffff; transition: padding-left 1s ease-out; -webkit-transition: padding-left 1s ease-out; }
.zeitgeschichte { float: left; position: relative; top: -15px; width: 24px; height: 24px; margin-right: 410px; padding: 2px; border: 2px solid #ffffff; border-radius: 20px; }
.zeitgeschichte a { display: inline-block; font-size: 15px; line-height: 24px; font-weight: 700; text-align: center; color: #000000; background-color: #ffffff; border-radius: 20px; position: absolute; width: 24px; height: 24px; }
.zeitgeschichte:hover { width: 30px; height: 30px; top: -19px; margin-left: -6px; }
.dunkleZeiten #zeitstrahl { background-color: #69676a; }
.zeitgeschichte:hover a { width: 30px; height: 30px; line-height: 30px; }
.dunkleZeiten .zeitgeschichte { border-color: #69676A; }
.dunkleZeiten .zeitgeschichte a { color: #ffffff; background-color: #69676A; }

/* Inhalte */
#wappen { position: absolute; top: 4%; padding: 0; opacity: 0; transition: opacity 1s linear; -webkit-transition: opacity 1s linear; }
#wappen p { font-size: 12px; line-height: 19px; margin-top: 24px; padding: 15px 12px 13px 118px; background-color: #69676a; }
#wappen img { position: absolute; left: 25px; top: 0; }
#wappen em { font-weight: bold; }
#startseite .content { position: absolute; left: 50%; margin-left: -346px; height: 100%; opacity: 0; transform: translateX(-30px); -webkit-transform: translateX(-30px); transition: opacity 1.36s linear, transform 2s, -webkit-transform 2s; -webkit-transition: opacity 1.36s linear, transform 2s, -webkit-transform 2s; }
#startseite .content div { position: relative; top: 50%; margin-top: -142px; text-align: center; }
#startseite h2 { color: #5a575a; background-color: rgba(255, 255, 255, 0.8); font-size: 91px; line-height: 104px; font-weight: 100; min-width:624px; margin: 0 0 3px; padding: 0 28px; }
#startseite h3 { color: #ffffff; background-color: rgba(105, 103, 106, 0.9); font-size: 27px; line-height: 45px; font-weight: 300; margin: 7px 0; }
#zumProjekt { color: #000000; background-color: #e0e0e0; width: 233px; position: absolute; left: 50%; margin-left: 100px; top: 50%; margin-top: 150px; padding-left: 12px; font-size: 12px; line-height: 40px; font-weight: 400; opacity: 0; transition: opacity 1s linear 2s; -webkit-transition: opacity 1s linear 2s; cursor: pointer; }
#sprachwahl { color: #ffffff; background-color: rgba(0, 0, 0, 0.3); padding: 0 11px; position: absolute; right: 56px; top: 69px; font-size: 18px; line-height: 40px; font-weight: 400; opacity: 0; transition: opacity 1s linear 2s; -webkit-transition: opacity 1s linear 2s; }
#sprachwahl a { color: #ffffff; padding: 4px; }
.en #zumProjekt { width: 202px; margin-left: 120px; }
#zumImpressum { color: #000000; font-size: 12px; position: absolute; left: 20px; bottom: 5px; cursor: pointer; }

#projekt .schatten { position: absolute; height: 100%; }
#projekt .schatten-links { width: 200px;  background: url(../img/shadow.png) 0 0 no-repeat; background-size: 200px 100%; opacity: 0.8; }
#projekt .schatten-rechts { left: 200px; width: 1200px; background: rgba(0, 0, 0, 0.8); }
#projekt .content { position: absolute; left: 279px; top: 242px; width: 960px; height: 500px; overflow: hidden; opacity: 0; transition: opacity 2s linear; -webkit-transition: opacity 2s linear; }
#projekt .spalten { color: #ffffff; width: 1960px; height: 100%; transition: transform 2s, -webkit-transform 2s; -webkit-transition: transform 2s, -webkit-transform 2s; }
#projekt .spalten > div { width: 440px; height: 100%; padding-right: 50px; float: left; }
#projekt .control { position: absolute; left: 207px; top: 440px; width: 1060px; opacity: 0; transition: opacity 2s linear; -webkit-transition: opacity 2s linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
#projekt .control li { width: 24px; height: 36px; display: inline-block; overflow: hidden; background-image: url(../img/pfeile.png); background-repeat: no-repeat; cursor: pointer; }
#projekt .projekt-control-prev { background-position: 2px -286px; float: left; opacity: 0; transition: opacity 0.5s linear; -webkit-transition: opacity 0.5s linear; }
#projekt .projekt-control-next { background-position: 2px -318px; float: right; transition: opacity 0.5s linear; -webkit-transition: opacity 0.5s linear; }
#projekt h2 { font-size: 18px; font-weight: 300; margin: 0 0 25px; }
#projekt p { line-height: 27px; }
.schriftGross #projekt { line-height: 30px; }
.schriftGross #projekt h2 { font-size: 24px; margin-bottom: 22px; }
.schriftGross #projekt .content { width: 880px; }
.schriftGross #projekt .spalten { width: 3920px; }
.schriftGross #projekt .spalten > div { width: 720px; padding: 0 180px 0 80px; }

#weg > h2 { color: #ffffff; font-size: 91px; line-height: 103px; font-weight: 100; position: absolute; left: 52px; top: 33.3%; margin: 0; transition: opacity 0.5s linear; -webkit-transition: opacity 0.5s linear; }
#karte { position: absolute; left: 50%; width: 1400px; margin-left: -700px; top: 50%; height: 900px; margin-top: -450px; background: url(../img/karte.png) no-repeat center center; background-size: 100%; transition: width 0.5s ease-out, height 0.5s, margin-left 0.5s, margin-top 0.5s; -webkit-transition: width 0.5s ease-out, height 0.5s, margin-left 0.5s, margin-top 0.5s; transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; }
#karte .background { width: 200%; height: 200%; background-color: #000000; opacity: 0; transition: opacity 0.5s linear; -webkit-transition: opacity 0.5s linear; }
#karte .stele { position: absolute; height: 100%; transition: left 1s, top 1s; -webkit-transition: left 1s, top 1s; }
#karte .button { position: absolute; border: 4px solid rgba(255, 255, 255, 0); border-radius: 40px; padding: 3px; transition: border-color 1.5s ease-out; -webkit-transition: border-color 1.5s ease-out; }
#karte .button .content { width: 48px; height: 48px; background: url(../img/punkte.png) no-repeat; border: 4px solid #ffffff; border-radius: 40px; transition: background-color 0.75s ease-out; -webkit-transition: background-color 0.75s ease-out; }
#karte .button:hover { border-color: rgba(255, 255, 255, 1); cursor: pointer; transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; }
#karte .button:hover .content { background-color: #ffffff; transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; }
#karte .actual { border-color: rgba(255, 255, 255, 1); }
#karte .actual .content { background-color: #ffffff; width: 48px; height: 48px; }
#karte .popup { position: absolute; width:520px; margin-left: 35px; padding: 40px 130px 0 70px; line-height: 22px; }
#karte .popup h2 { font-size: 18px; margin: 18px 0 22px; text-transform: uppercase; }
#karte .band { height: 200%; top: -50%; background-color: #999282; }
#karte .text img { position: absolute; right: 33px; top: 20px; }
#karte .close { position: absolute; right: 33px; bottom: 0; width: 40px; height: 40px; background-image: url(../img/button_kreuz.png); border-radius: 30px; cursor: pointer; transition: transform 0.3s linear, -webkit-transform 0.3s linear; -webkit-transition: transform 0.3s linear, -webkit-transform 0.3s linear; }
#karte .close:hover { transform: rotate(45deg); -webkit-transform: rotate(45deg); }
#karte .close div { position: absolute; top: 14px; left: 6px; width: 22px; height: 6px; border-radius: 2px; background-color: #ffffff; transition: transform 1s ease-out, -webkit-transform 1s ease-out; -webkit-transition: transform 1s ease-out, -webkit-transform 1s ease-out; }
#karte .close div:first-child { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#karte .close div:last-child { transform: rotate(45deg); -webkit-transform: rotate(45deg); }
#karte .close:hover div:first-child { transform: rotate(45deg); -webkit-transform: rotate(45deg); }
#karte .close:hover div:last-child { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
#legende { position: absolute; right: 200px; bottom: 140px; }

#stele_1 .button .content { background-position: -2px -2px; }
#stele_2 .button .content { background-position: -2px -54px; }
#stele_3 .button .content { background-position: -2px -106px; }
#stele_4 .button .content { background-position: -2px -157px; }
#stele_5 .button .content { background-position: -2px -209px; }
#stele_6 .button .content { background-position: -2px -261px; }
#stele_7 .button .content { background-position: -2px -313px; }
#stele_8 .button .content { background-position: -2px -366px; }
#stele_9 .button .content { background-position: -2px -418px; }
#stele_10 .button .content { background-position: -2px -471px; }

#galerie .content { position: absolute; right: 54px; top: 50%; margin-top: -325px; width: 824px; height: 100%; }
#galerieInterface { position: absolute; left: 100px; top: 33.3%; }
#galerie h2 { color: #ffffff; font-size: 91px; line-height: 103px; font-weight: 100; margin: 0 0 64px 0; padding: 0 32px 0 29px; background-color: rgba(24, 16, 11, 0.7); display: inline-block; }
#galerieMenu { width: 0; }
#galerieMenu li { color: #18100b; background-color: rgba(255, 255, 255, 0.5); font-size: 24px; line-height: 36px; font-weight: 300; padding: 2px 16px; transition: font-size 0.5s linear, margin 0.5s; -webkit-transition: font-size 0.5s linear, margin 0.5s; cursor: pointer; margin: 0 0 6px 0; display: inline-block; white-space: nowrap; }
#galerieMenu .actual { font-size: 27px; margin: 0 0 44px 0; }
#galerieMenu li:last-child.actual { margin: 38px 0 0 0; }
#galerieControl {position: absolute; right: 10px; top: 320px; width: 610px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
#galerieControl li { width: 32px; height: 52px; display: inline-block; overflow: hidden; background-image: url(../img/pfeile.png); background-repeat: no-repeat; cursor: pointer; }
#galerieText { font-size: 13px; line-height: 20px; position: absolute; left: 0; top: 6%; width: 245px; text-align: right; }
#galerieText h3 { font-size: 13px; font-weight: 400; }
#galerieText p { margin-bottom: 4px; }
.jcarousel { position: absolute; width: 480px; right: 76px; overflow: hidden; }
.jcarousel ul { position: relative; width: 50000px; height: 100%; }
.jcarousel li { float: left; text-align: center; width: 480px; }
.jcarousel img { padding: 0 8px 8px; }
.jcarousel li div { display: none; }
.jcarousel-control-prev { background-position: 3px 2px; float: left; opacity: 0; transition: opacity 0.5s linear; -webkit-transition: opacity 0.5s linear; }
.jcarousel-control-next { background-position: 3px -46px; float: right; transition: opacity 0.5s linear; -webkit-transition: opacity 0.5s linear; }
.schriftGross #galerieText h3, .schriftGross #galerieText p { font-size: 18px; line-height: 24px; }

#presse .content { position: absolute; left: 200px; top: 33.3%; }
#presse h2 { color: #ffffff; font-size: 91px; line-height: 103px; font-weight: 100; margin: 0 0 25px; padding: 0 32px 0 29px; background-color: rgba(160, 157, 158, 0.5); display: inline-block; }
#presse h2 span { position: absolute; font-size: 32px; line-height: 32px; font-weight: 300; margin: 56px 0 0 64px; white-space: nowrap; color: #2f262c;}
#presse li { margin-bottom: 9px; }
#presse li a { font-size: 27px; line-height: 36px; font-weight: 100; background-color: #2f262c; padding: 4px 15px; }
#presse li:last-child a { font-size: 14px; line-height: 36px; font-weight: 300; color: #2f262c; background-color: #ffffff; }

#impressum .content { position: absolute; left: 200px; top: 33.3%; }
#impressum h2 { font-size: 91px; line-height: 103px; font-weight: 100; margin: 0 0 25px -13px; }
#impressum h3 { font-size: 20px; line-height: 20px; font-weight: 300; margin: 18px 0 6px; }
#impressum p { font-size: 15px; line-height: 25px; margin: 0; }
#impressum p:first-of-type { font-size: 16px; margin-bottom: 2px; }
#impressum p:last-of-type { margin-top: 12px; }
#stelenImpressum { position: absolute; right: 123px; top: 0; width: auto; height: 100%; opacity: 0.5; }

/* für die Zukunft: */
#zeitstrahl { display: none; }