/* The Grid */
header {position: absolute;width: 100%;margin: 0;padding: 0;height:90px;background-color:#952511}
.headercontainer {position: relative;width: 95%;max-width: 960px;margin: 0 auto;padding: 0;box-sizing: border-box}
.logo {position:relative;margin:0;height:90px;background:url(schrift-logo.png) left top no-repeat}
.logo h3 a {position:relative;top:0;left:0;float:left;display:block;width:340px;height:90px} 
.logo h3 {margin:0}
.logo span{position:relative;top:-200px}
.login {position:relative;top:-90px;float:right;margin:10px 0 0 0;color:#fff}
.login a,
.login a:visited {text-decoration:none;color:#fff}
.menue {position:relative;top:10px;left:0;color:#fff;font-size:1em;text-transform:uppercase}
.menue ul{list-style:none;margin:0;padding:0}
.menue li{list-style:none;margin:0 0 10px 0}
.menue li a{display:block;width:95%;text-decoration:none;color:#fff;background-color:#952511;padding:0 0 0 20px;border-top-left-radius: 6px;border-top-right-radius: 6px;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px}
@media (min-width: 750px) {
  .menue {position:relative;top:-40px;left:250px;float:left;color:#fff;font-size:1em;text-transform:uppercase}
  .menue ul{list-style:none;margin:0;padding:0}
  .menue li{list-style:none;margin:0;padding:0 0 0 10px;display:inline}
  .menue li a{width:100%;text-decoration:none;color:#fff;display:inline;border:none}
}
main {position: relative;top:280px;width: 95%;max-width: 960px;margin: 0 auto;padding: 0;box-sizing: border-box /* border:1px solid #aaa; */}
@media (min-width: 750px) {
  main {position: relative;top:100px;width: 100%;max-width: 960px;margin: 0 auto;padding: 0;box-sizing: border-box;/* border:1px solid #aaa; */}
}  
.column,
.columns {width: 100%;float: left;box-sizing: border-box}
footer {position: relative;top: 280px;width: 100%;margin: 0;padding: 20px 0 40px 0;background-color:#fafafa;font-size: .9em}
@media (min-width: 750px) {
  footer {top: 100px}
}  
.footercontainer {position: relative;width: 95%;max-width: 960px;margin: 0 auto;padding: 0;box-sizing: border-box;}
footer ul{list-style:none;margin:0 0 30px 0;padding:0}
footer li{list-style:none;margin:0;padding:0;line-height:24px}
footer li a,
footer li a:visited {color: #969696;text-decoration: none;text-decoration-style: solid}
footer li a:hover, 
footer li a:focus {color: #969696;text-decoration: underline;text-decoration-style: solid}
footer h5 {color:#282828;text-transform:uppercase;font-weight: 600}
footer copy {font-size: 1em}
/* Für Geräte über 400px */
@media (min-width: 400px) {
  .headercontainer,
  .footercontainer,
  main {width: 95%;padding: 0}
}
/* Für Geräte über 550px */
@media (min-width: 550px) {
  .headercontainer,
  .footercontainer,
  main {width: 90%}
  .column,
  .columns {margin-left: 4%}
  .column:first-child,
  .columns:first-child {margin-left: 0}
  .one.column,
  .one.columns       {width: 4.66666666667%; }
  .two.columns       {width: 13.3333333333%; }
  .three.columns     {width: 22%;            }
  .four.columns      {width: 30.6666666667%; }
  .five.columns      {width: 39.3333333333%; }
  .six.columns       {width: 48%;            }
  .seven.columns     {width: 56.6666666667%; }
  .eight.columns     {width: 65.3333333333%; }
  .nine.columns      {width: 74.0%;          }
  .ten.columns       {width: 82.6666666667%; }
  .eleven.columns    {width: 91.3333333333%; }
  .twelve.columns    {width: 100%; margin-left: 0; }
  .one-third.column  {width: 30.6666666667%; }
  .two-thirds.column {width: 65.3333333333%; }
  .one-half.column   {width: 48%; }
/* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns       {margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns       {margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns     {margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns      {margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns      {margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns       {margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns     {margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns     {margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns      {margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns       {margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns    {margin-left: 95.3333333333%; }
  .offset-by-one-third.column,
  .offset-by-one-third.columns {margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns {margin-left: 69.3333333333%; }
  .offset-by-one-half.column,
  .offset-by-one-half.columns  {margin-left: 52%; }
}
/* Base Styles
/* html ist auf 62.5% gesetzt, so basiert die EM Skala auf 10px. Also sind 1.5rem = 15px */
html {font-size: 62.5%}
body {font-size: 1.5em;line-height: 1.6;font-weight: 400;font-family: "Proxima N W01 Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;color: #002c42 }
/* Typography */
h1, h2, h3, h4, h5, h6 {margin-top: 0;margin-bottom: 2rem;font-weight: 300}
h1 {font-size: 2.5rem;line-height: 1.2;letter-spacing: -.1rem}
h2 {font-size: 2.2rem;line-height: 1.25;letter-spacing: -.1rem}
h3 {font-size: 1.8rem;line-height: 1.3;letter-spacing: -.1rem}
h4 {font-size: 1.5rem;line-height: 1.35;letter-spacing: -.08rem}
h5 {font-size: 1.3rem;line-height: 1.5;letter-spacing: -.05rem}
h6 {font-size: 1rem;line-height: 1.6;letter-spacing: 0}
/* Larger than phablet */
@media (min-width: 550px) {
  h1 {font-size: 3.5rem}
  h2 {font-size: 2.8rem}
  h3 {font-size: 2.3rem}
  h4 {font-size: 1.8rem}
  h5 {font-size: 1.5rem}
  h6 {font-size: 1rem}
}
p {margin-top: 0}
a {color: #8abed5}
a:visited,
a:focus,
a:hover {color: #34485e}
/* Buttons */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;padding: 0 30px;color: #555;text-align: center;font-size: 11px;font-weight: 600;
  line-height: 34px;letter-spacing: .1rem;text-transform: uppercase;text-decoration: none;white-space: nowrap;
  background-color: #f0f0f0;border-top-left-radius: 16px;border-top-right-radius: 16px;border-bottom-right-radius: 16px;border-bottom-left-radius: 16px;
  height: 34px;border: 1px solid #f0f0f0;cursor: pointer;box-sizing: border-box}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {color: #333;background-color: #f0f0f0;border-color: #f0f0f0;outline: 0}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {color: #FFF;background-color: #89bed4;border-color: #89bed4}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {color: #FFF;background-color: #34485e;border-color: #34485e}  
/* Formulare */
/* Removes awkward default styles on some inputs for iOS */
textarea,
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"] {-webkit-appearance: none;-moz-appearance: none}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {border-top-left-radius: 16px;border-top-right-radius: 16px;border-bottom-right-radius: 16px;border-bottom-left-radius: 16px;height: 34px;
  padding: 6px 10px;background-color: #f0f0f0;border: 1px solid #f0f0f0;box-shadow: none;box-sizing: border-box}
textarea {min-height: 65px;padding-top: 6px;padding-bottom: 6px}
input[type="checkbox"],
input[type="radio"] {position: relative;top:3px;border-top-left-radius: 3px;border-top-right-radius: 3px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;height: 20px;width: 20px;
  padding: 3px;background-color: #f0f0f0;border: 1px solid #e0e0e0;box-shadow: none;box-sizing: border-box}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {border: 1px solid #89bed4;outline: 0}  
label,
legend {display: block;margin-bottom: .5rem;font-weight: 600}
fieldset {padding: 0;border-width: 0}
input[type="checkbox"],
input[type="radio"] {display: inline;min-width: 16px;height: 16px}
label > .label-body {display: inline-block;margin-left: .5rem;font-weight: normal}
/* Listen */
ul {list-style: circle inside}
ol {list-style: decimal inside}
ol, ul {padding-left: 0;margin-top: 0}
ul ul,
ul ol,
ol ol,
ol ul {margin: 1.5rem 0 1.5rem 3rem;font-size: 90%}
li {margin-bottom: 1rem}
/* Tabellen */
th,
td {padding: 12px 15px;text-align: left;border-bottom: 1px solid #E1E1E1}
th:first-child,
td:first-child {padding-left: 0}
th:last-child,
td:last-child {padding-right: 0}
/* Abstände */
button,
.button {margin-bottom: 1rem}
input,
textarea,
select,
fieldset {margin-bottom: 1.5rem}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {margin-bottom: 2.5rem}
/* Ausrichtung */
.u-full-width {width: 95%;box-sizing: border-box}
.u-max-full-width {max-width: 95%;box-sizing: border-box}
@media (min-width: 400px) {
  .u-full-width {width: 100%}
  .u-max-full-width {max-width: 100%}
}
.right {float:right;text-align:right}
.left {float:left}
.center {margin-left:auto;margin-right:auto;text-align:center}
.clear {height:1px;font-size:1px;clear:both}
/* Sonstiges */
hr {margin-top: 3rem;margin-bottom: 3.5rem;border-width: 0;border-top: 1px solid #E1E1E1}
code {padding: .2rem .5rem;margin: 0 .2rem;font-size: 90%;white-space: nowrap;background: #F1F1F1;border: 1px solid #E1E1E1;border-radius: 4px}
pre > code {display: block;padding: 1rem 1.5rem;white-space: pre}
/* Self Clearing */
header:after,
footer:after,
main:after,
.row:after,
.clear {content:"";display:table;clear:both}
/* Media Anpassungen // Vorlagen */
/* Größer als mobile */
@media (min-width: 400px) {}
/* größer als phablet */
@media (min-width: 550px) {}
/* größer als tablet */
@media (min-width: 750px) {}
/* größer als desktop */
@media (min-width: 1024px) {}
/* größer als Desktop HD */
@media (min-width: 1200px) {}