@charset 'utf-8';
@import url(reset.css);

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/sourcesanspro-regular.eot');
    src: url('../fonts/sourcesanspro-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcesanspro-regular.woff') format('woff'),
         url('../fonts/sourcesanspro-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/sourcesanspro-bold.eot');
    src: url('../fonts/sourcesanspro-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcesanspro-bold.woff') format('woff'),
         url('../fonts/sourcesanspro-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/sourcesanspro-italic.eot');
    src: url('../fonts/sourcesanspro-italic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sourcesanspro-italic.woff') format('woff'),
         url('../fonts/sourcesanspro-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

a,
span.dok:before,
article div.klein * {
-webkit-transition-property: all;
-webkit-transition-duration: 250ms;
-webkit-transition-timing-function: ease-in;
-moz-transition-property: all;
-moz-transition-duration: 250ms;
-moz-transition-timing-function: ease-in;
transition-property: all;
transition-duration: 250ms;
transition-timing-function: ease-in;
}

::selection {
background: rgb(125,164,226);
color: white;
}

::-webkit-input-placeholder {color: rgb(190,210,240);}
:-moz-placeholder {color: rgb(190,210,240);}
::-moz-placeholder {color: rgb(190,210,240);}
:-ms-input-placeholder {color: rgb(190,210,240);}

img {
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
-moz-user-drag: none;
-webkit-user-drag: none;
user-drag: none;
}

.klar {
clear: both;
}


body {
position: relative;
background-color: rgb(125,164,226);
font-family: 'Source Sans Pro', Calibri, Arial, sans;
font-size: 14px;
line-height: 20px;
color: white;
}

body:before {
content: '';
display: block;
position: absolute;
top: -36px;
left: 0;
width: 100%;
height: 32px;
background: white;
z-index: 9999;
border-radius: 50%/50%;
-webkit-box-shadow: 0 0 32px 0 rgba(0,0,0,0.5);
box-shadow: 0 0 32px 0 rgba(0,0,0,0.5);
}

form label input,
input.submit,
textarea,
form label#anrede select {
font-family: 'Source Sans Pro';
-webkit-transition-property: background-color;
-webkit-transition-duration: 450ms;
-webkit-transition-timing-function: ease-in;
-moz-transition-property: background-color;
-moz-transition-duration: 450ms;
-moz-transition-timing-function: ease-in;
transition-property: background-color;
transition-duration: 450ms;
transition-timing-function: ease-in;
}

header {
position: relative;
width: 928px;
padding: 0 16px;
margin: 0 auto;
height: 168px;
}

article {
width: 928px;
margin: 0 auto;
padding: 0 0 32px 0;
}

article.jobs {
clear: both;
}

article.jobs section {
border-bottom: 1px solid rgb(164,191,235);
padding-bottom: 32px;
margin-bottom: 16px;
}

article.jobs:last-of-type section {
border-bottom: none;
}

article.jobs aside {
padding-top: 13px;
}

article section {
font-size: 18px;
line-height: 24px;
display: inline-block;
width: 520px;
margin: 0 32px 0 104px;
vertical-align: top;
}

article.halbhalb section,
article.halbhalb aside {
width: 352px;
}

article.halbhalb section {
margin-right: 40px;
}

header h1,
header nav {
display: inline-block;
vertical-align: top;
}

header h1 a {
display: block;
font-size: 0;
line-height: 0;
color: transparent;
width: 149px;
height: 48px;
margin: 40px 124px 64px 0;
background-image: url('../img/ritz-hr.svg');
background-repeat: no-repeat;
}

.no-svg header h1 a {
background-image: url('../img/ritz-hr.png');
}

header nav ul,
header nav ul li {
display: inline-block;
}

header nav ul.main {
margin: 48px 0 0 0;
}

header nav ul.lang {
position: absolute;
top: 50px;
right: 8px;
}

header nav ul.sub {
min-width: 256px;
margin: 12px 0 0 10px;
display: block;
}

header nav ul.sub li {
padding: 0 16px 0 0;
}

header nav ul.main li {
margin: 0 8px 0 0;
}

header nav ul.main li a {
display: table-cell;
vertical-align: bottom;
padding: 5px 10px 8px 10px;
font-size: 18px;
/* font-weight: bold; */
color: white;
background-color: rgb(138,173,229);
}

header nav ul.main li a:hover {
background-color: transparent;
color: rgb(255,210,100);
}

header nav ul.main li.aktiv a {
background-color: rgb(255,210,100);
color: rgb(110,150,210);
/* border: 1px solid white; */
}

header nav ul.sub li a {
color: white;
border-bottom: 1px solid rgb(164,191,235);
padding: 0 0 4px 0;
font-size: 16px;
line-height: 20px;
}

header nav ul.sub li a:hover,
header nav ul.sub li.aktiv a {
color: rgb(255,210,100);
border-bottom-color: rgb(125,164,226);
}

header nav ul.lang li a {
display: block;
text-align: center;
text-transform: uppercase;
line-height: 24px;
background: white;
color: rgb(125,164,226);
width: 25px;
height: 25px;
margin: 0 4px 0 0;
-webkit-border-radius: 13px;
border-radius: 13px;
}

header nav ul.lang li a:hover,
header nav ul.lang li.aktiv a {
background: rgb(255,210,100);
}

article h2 {
font-size: 32px;
line-height: 40px;
color: rgb(255,210,100);
margin: 0 0 32px 0;
}

article section h2 a {
color: rgb(255,210,100);
border-bottom: none;
}

article section h2 a:hover {
color: white;
}

article h3 {
font-size: 24px;
line-height: 32px;
margin: 32px 0 8px 0;
}

article h4 {
font-weight: bold;
margin: 16px 0 0 0;
color: rgb(255,210,100);
}

article h5 {
font-weight: bold;
}

article h2 + h4 {
margin: 0;
}

article aside h3 {
font-size: 18px;
line-height: 24px;
color: rgb(255,210,100);
margin: 0 0 8px 0;
}

article p {
margin: 0 0 12px 0;
}

article div.klein * {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
color: rgb(190,210,240);
}

article div.klein:hover * {
color: white;
}

article div.klein p a {
border-color: rgb(190,210,240);
}

article div.klein p,
article div.klein h5 {
font-size: 14px;
line-height: 20px;
margin: 0 0 7px 0;
}

article div.klein h5 {
margin: 0;
}

article section a,
footer a {
color: white;
border-bottom: 1px solid rgb(255,210,100);
}

article section a:hover,
footer a:hover {
color: rgb(255,210,100);
border-bottom-color: transparent;
}

article section a.button,
article section h4.einklapp {
border-bottom: none;
padding: 3px 8px 5px 8px;
background-color: rgb(138,173,229);
font-size: 16px;
line-height: 20px;
font-weight: normal;
color: white;
}

article section h4.einklapp {
display: inline-block;
}

article section h4.einklapp:before {
content: '▸ ';
}

article section h4.einklapp.offen:before {
content: '▾ ';
}

article section a.button:hover,
article section h4.einklapp:hover {
background-color: rgb(255,210,100);
color: rgb(110,150,210);
cursor: pointer;
}

.js article section div.mehr {
display: none;
padding-top: 28px;
}

/* 
.js article.jobs aside {
display: none;
}
 */

article section p img {
float: left;
margin: 4px 32px 32px 0;
}

article section p {
clear: both;
}

article section p.note {
color: rgb(223,232,248);
}

article section ul {
margin: 0 0 16px 0;
}

article section ul li {
margin: 0 0 8px 0;
padding-left: 12px;
text-indent: -12px;
/* 
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
 */
}

article section ul li:before {
content: '• ';
display: block;
float: left;
width: 12px;
color: rgb(255,210,100);
}

article aside {
display: inline-block;
width: 200px;
padding: 0;
vertical-align: top;
}

article aside ul.downloads a {
display: block;
padding: 3px 6px 4px 8px;
margin: 0 0 8px 0;
color: white;
background-color: rgb(138,173,229);
}

article aside ul.downloads a:hover {
color: rgb(125,164,226);
background-color: rgb(255,210,100);
}

article aside ul.galerie {
margin: 0 0 36px 0;
width: 208px;
}

article aside ul.galerie li {
display: inline-block;
line-height: 0;
margin: 0 8px 8px 0;
}

article aside ul.galerie li a img {
opacity: 0.8;
}

article aside ul.galerie li a img:hover {
opacity: 1;
}

article aside ul.downloads li a span {
display: inline-block;
vertical-align: top;
width: 128px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

article aside ul.downloads li a span span {
white-space: nowrap;
}

article aside ul.downloads li a span.dok {
position: relative;
width: 40px;
height: 50px;
margin: 6px 8px 8px 0;
font-size: 10px;
line-height: 82px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
background: rgb(255,210,100);
}

article aside ul.downloads li a:hover span.dok {
background: white;
}

article aside ul.downloads li a span.dok:before {
content: '';
position: absolute;
top: 0; right: 0;
border-top: 12px solid rgb(138,173,229);
border-left: 12px solid rgb(235,203,83);
width: 0;
}

article aside ul.downloads li a:hover span.dok:before {
border-top-color: rgb(255,210,100);
border-left-color: rgb(240,240,240);
}

/* KONTAKTFORMULAR */

form {
margin: 2px 0 32px 0;
}

form label {
display: inline-block;
vertical-align: top;
font-size: 0px;
line-height: 0px;
margin: 6px 0;
width: 272px;
width: 100%;
}

.no-placeholder form label {
font-size: 14px;
line-height: 20px;
color: white;
margin: 8px 0;
}

form label input {
display: block;
font-size: 16px;
line-height: 24px;
width: 98%;
width: 100%;
padding: 1px 0 2px 0;
color: white;
background: rgb(125,164,226);
border-width: 0 0 1px 0;
border-color: white;
border-style: solid;
border-radius: 0;
}

form label input:focus {
color: rgb(125,164,226);
background-color: white;
border-color: rgb(125,164,226);
padding: 1px 6px 2px 6px;
width: -webkit-calc(100% - 12px);
width: calc(100% - 12px);
}

input.fehlt,
form label#anrede select.fehlt {
background-color: rgb(255,210,100);
color: rgb(105,144,206);
padding: 1px 6px 2px 6px;
width: -webkit-calc(100% - 12px);
width: calc(100% - 12px);
border: none;
}

form label textarea {
margin: 16px 0 0 0;
padding: 6px 8px;
border: none;
width: -webkit-calc(100% - 18px);
width: calc(100% - 18px);
font-size: 14px;
background: rgb(138,173,229);
color: white;
border: 1px solid white;
}

form label#anrede select {
display: block;
width: 100%;
font-size: 16px;
line-height: 24px;
padding: 1px 0 2px 0;
color: white;
background: rgb(125,164,226);
border-width: 0 0 1px 0;
border-color: white;
border-style: solid;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
/* FF-Häck */
text-indent: 0.01px;
text-overflow: "";
}

form label#vorname,
form label#nachname,
form label#anrede,
form label#titel {
width: -webkit-calc(50% - 4px);
width: calc(50% - 4px);
}

form label#vorname,
form label#strasse,
form label#plz {
margin: 6px 8px 0 0;
}

form label#anrede {
margin: 6px 8px 0 0;
}

/* firefox */
@-moz-document url-prefix() { 
  form label#anrede {
  margin: 4px 8px 0 0;
  }
}

form label#strasse,
form label#ort {
width: -webkit-calc(75% - 4px);
width: calc(75% - 4px);
}

form label#hausnummer,
form label#plz {
width: -webkit-calc(25% - 4px);
width: calc(25% - 4px);
}

input.submit,
a.knopf {
display: inline;
font-size: 14px;
line-height: 24px;
padding: 2px 6px;
margin: 16px 0 0 0;
color: rgb(105,144,206);
background-color: rgb(255,210,100);
border: none;
}

input.submit:hover,
a.knopf:hover {
background-color: white;
}

ul.notify {
display: block;
position: relative;
font-size: 14px;
line-height: 20px;
padding: 8px 12px 10px 12px;
margin: 10px 0 16px 0;
background: rgb(255,210,100);
color: rgb(105,144,206);
}

ul.notify:after {
top: 100%;
left: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0,0,0,0);
border-top-color: rgb(255,210,100);
border-width: 8px;
margin-left: -8px;
}

/* Branchen-Icons */

ul.icons {
display: inline-block;
overflow: hidden;
float: left;
width: 200px;
height: 200px;
margin: 12px 32px 24px 0;
}

.no-svg ul.icons {
display: none;
}

ul.icons li {
width: 200px;
height: 200px;
}


article section ul.icons li:before {
content: '';
}

ul.icons + ul {
margin: 16px 0 40px 0;
display: inline-block;
vertical-align: top;
width: 280px;
}

ul.icons + ul + p {
clear: both;
}

footer {
position: fixed;
bottom: 0;
right: 0;
padding: 8px;
}

footer nav ul li {
display: inline-block;
vertical-align: top;
margin: 0 4px;
}


/* ############# Screens bis 976px ############# */
@media only screen and (max-width: 976px) {

  header {
  width: auto;
  width: -webkit-calc(100% - 64px);
  width: calc(100% - 64px);
  height: auto;
  margin: 0 32px;
  padding: 0;
  display: inline-block;
  }
  
  header h1 {
  display: inline;
  clear: both;
  }
  
  header h1 a {
  margin: 32px 32px 32px 0;
  }
  
  header nav ul.main {
  margin: 0;
  }
  
  header nav {
  display: block;
  margin: 0 0 32px 0;
  }
  
  header nav ul.main li a {
  background-color: rgb(138,173,229);
  }
  
  header nav ul.sub li {
  margin: 0 0 8px 0;
  }
  
  header nav ul.lang {
  right: 0;
  }
  
  article {
  width: auto;
  margin: 0 32px;
  }
  
  article section {
  margin: 0 32px 0 0;
  }

}

/* ############# Screens bis 808px ############# */
@media only screen and (max-width: 808px) {
  
  article aside {
  padding: 32px 0 0 0;
  width: auto;
  }
  
  article section,
  article.halbhalb section,
  article.halbhalb aside,
  article aside ul.galerie,
  article aside ul.downloads li a span {
  width: auto;
  margin: 0;
  }
  
  ul.icons {
  float: none;
  margin: 16px 32px 24px 0;
  }
  
  ul.icons + ul {
  width: auto;
  }

}

/* ############# Screens bis 400px ############# */
@media only screen and (max-width: 400px) {
  
  header {
  width: auto;
  width: -webkit-calc(100% - 32px);
  width: calc(100% - 32px);
  }
  
  header,
  article {
  margin: 0 16px;
  }
  
  header h1 a {
  margin: 24px 24px 24px 0;
  }
  
  header nav ul.lang {
  top: 40px;
  }

}