/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 25, 2018 */
@font-face {
    font-family: 'Raleway';
    src: url('./fonts/raleway-thin-webfont.woff2') format('woff2'),
         url('./fonts/raleway-thin-webfont.woff') format('woff');
    font-weight: 100;
    font-style: normal;

}
@font-face {
    font-family: 'Raleway';
    src: url('./fonts/raleway-extralight-webfont.woff2') format('woff2'),
         url('./fonts/raleway-extralight-webfont.woff') format('woff');
    font-weight: 200;
    font-style: normal;

}
@font-face {
    font-family: 'Raleway';
    src: url('./fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('./fonts/raleway-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

html {
  margin:0;
  padding:0;
}
body {
  margin:0;
  padding:0;
  font-size:125%;
  background-color:#ffffff;
  font-family: 'Raleway', Arial, sans-serif;
  color:#000000;
}
div.container {
  max-width:50em;
  margin-left:auto;
  margin-right:auto;
}
header {
  margin-top:0.6em;
  padding-bottom:0.3em;
  border-bottom:0.4em solid #ee9d00;
  background-color:#ffbb00;
}
div.columns {
  display:table;
/*  max-width: 40em;*/
}
div.columns h2 {
  display:block;
  margin-top:0.3em;
  color:#000000;
}
aside {
  display:table-cell;
  width:25%;
}
div.content {
  background-image:url("Fotolia_86043633_XS_orange.jpg");
  background-repeat:no-repeat;
  background-position:right bottom;
  display:table-cell;
  width:75%;
  vertical-align:top;
}

img {
  width:90%;
}

h1 {
  display:block;
  margin-top:0;
  margin-bottom:0;
  padding-left:0.3em;
  font-size:350%;
  font-weight:100;
  color:#ffffff;
  letter-spacing:-0.095em;
}

h1 span.small {
  margin-left:0.45em;
  font-size:68%;
  font-weight:200;
  letter-spacing:0em;
}

h2 {
  display:inline;
  margin-top:0;
  margin-bottom:0;
  /*margin-left:0.45em;*/
  font-size:240%;
  font-weight:200;
  color:#ffffff;
}
h3 {
  margin-top:1em;
  margin-bottom:0;
  background-color:#e9e9e9;
  padding-left:1em;
  font-size:120%;
  font-weight:400;
}
p {
  /*margin-left:1.2em;*/
}

footer {
  margin-bottom:0.6em;
  background-color:#ffbb00;
  border-bottom:0.3em solid #ee9d00;
  padding-left:1.2em;
  color:#ffffff;
}
footer a {
  color:#ffffff;
}
footer h3 {
  display: inline;
  padding-left:0;
  background-color:transparent;
}
div#impressum {
  padding-bottom:0.2em;
}
a {
  text-decoration:none;
  color:#000000;
}
a:hover {
  text-decoration:underline;
}

a.cta {
  display:inline-block;
  margin-top:2.5em;
  margin-bottom:2em;
}
a.cta,
button.cta {
  background-color: #00acee;
  border-radius: 3px;
  color: #ffffff;
  padding: 0.6em;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.2);
}
a.cta:hover,
button.cta:hover {
  background-color: #1894ca;
  text-decoration:none;
}

h1 a {
  color: #ffffff;
}
h1 a:hover {
  text-decoration:none;
}
ul {
  margin-top:0.2em;
}

span.icon {
  display:inline-block;
  border-radius: 3px;
  background-color:#00acee;
  padding: 0.2em 0.5em;
  font-weight:bold;
  color:#ffffff;
}

form {
  background-color:#e9e9e9;
  padding:1em;
}
div.field {
  margin-bottom:1.2em;
}
label {
  display:inline-block;
  width:10em;
}
input, button {
  width:18em;
  border:none;
  border-radius: 3px;
  /*padding-left:0.1em;*/
  font-size: 100%;
  font-family: 'Raleway', Arial, sans-serif;
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

@media print {
  /* ... Formatdefinitionen zum Drucken ... */
  h1 {
    color:#000000;
  }
  footer {
    color:#000000;
  }
  footer a {
    color:#000000;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  div#impressum {
    padding-bottom:0.2em;
  }
}

/* Nur für Geräte mit viel Platz 
@media (min-height: 50em) {
  header {
    position:fixed;
  }
  div.columns {
    margin-top:5.45em;
  }
  aside {
    position:fixed;
  }
}
*/