@charset "UTF-8";
/* SASS Document */
/* ubuntu-300 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url("fonts/ubuntu-v20-latin-300.eot");
  /* IE9 Compat Modes */
  src: local(""), url("fonts/ubuntu-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("fonts/ubuntu-v20-latin-300.woff2") format("woff2"), url("fonts/ubuntu-v20-latin-300.woff") format("woff"), url("fonts/ubuntu-v20-latin-300.ttf") format("truetype"), url("fonts/ubuntu-v20-latin-300.svg#Ubuntu") format("svg");
  /* Legacy iOS */ }
/* ubuntu-500 - latin */
@font-face {
  font-family: 'Ubuntu_bold';
  font-style: normal;
  font-weight: 500;
  src: url("fonts/ubuntu-v20-latin-500.eot");
  /* IE9 Compat Modes */
  src: local(""), url("fonts/ubuntu-v20-latin-500.eot?#iefix") format("embedded-opentype"), url("fonts/ubuntu-v20-latin-500.woff2") format("woff2"), url("fonts/ubuntu-v20-latin-500.woff") format("woff"), url("fonts/ubuntu-v20-latin-500.ttf") format("truetype"), url("fonts/ubuntu-v20-latin-500.svg#Ubuntu") format("svg");
  /* Legacy iOS */ }
.container {
  position: relative;
  max-width: 85%;
  margin: 0 auto;
  display: block;
  padding: 10% 0 0;
  display: grid; }

@media (min-width: 750px) {
  .container {
    padding: 8% 0 0;
    max-width: 80%; } }
@media (min-width: 1000px) {
  .container {
    padding: 6% 0 0; } }
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grid-container {
  position: relative;
  max-width: 85%;
  margin: 0 auto;
  padding: 10% 0 0;
  display: grid; }

/* grids to 3 columns above mobile sizes */
@media (min-width: 750px) {
  .grid-container {
    max-width: 80%;
    display: grid;
    padding: 8% 0 0;
    grid-gap: 5rem;
    gap: 5rem; }

  /* basic grids */
  .grid-container.sixth {
    grid-template-columns: repeat(6, 1fr); }

  .grid-container.fifths {
    grid-template-columns: repeat(5, 1fr); }

  .grid-container.quarters {
    grid-template-columns: repeat(4, 1fr); }

  .grid-container.thirds {
    grid-template-columns: repeat(3, 1fr); }

  .grid-container.halves {
    grid-template-columns: repeat(2, 1fr); }

  .grid-container.full {
    grid-template-columns: 1fr; } }
@media (min-width: 1000px) {
  .grid-container {
    padding: 6% 0 0; } }
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }

body {
  font-size: 1.6em;
  /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: normal;
  font-family: "Ubuntu", Helvetica, Arial, sans-serif;
  color: #645c4d;
  margin: 0;
  letter-spacing: 0rem; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-weight: normal; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: normal; }

h1 {
  font-family: "Ubuntu_bold", Helvetica, Arial, sans-serif;
  font-size: 3.0rem;
  line-height: 1.2;
  letter-spacing: 0.1rem;
  margin-bottom: 0rem; }

h2 {
  font-size: 3.0rem;
  line-height: 1.25;
  letter-spacing: 0.1rem;
  margin-bottom: 1rem; }

h3 {
  font-family: "Ubuntu_bold", Helvetica, Arial, sans-serif;
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: 0rem;
  margin-bottom: 1rem; }

h4 {
  font-family: "Ubuntu_bold", Helvetica, Arial, sans-serif;
  font-size: 2.4rem;
  line-height: 1.35;
  letter-spacing: 0rem;
  margin-bottom: 1rem; }

h5 {
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.1rem; }

h6 {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0; }

p {
  margin-top: 0;
  margin-bottom: 2rem; }

.small {
  font-size: 1.4rem; }

strong {
  font-family: "Ubuntu_bold", Helvetica, Arial, sans-serif;
  font-weight: normal; }

@media (min-width: 750px) {
  body {
    font-size: 1.8em; }

  h1 {
    font-size: 4.0rem; }

  h2 {
    font-size: 3.0rem; }

  h3 {
    font-size: 2.0rem; }

  h4 {
    font-size: 2.0rem; }

  h5 {
    font-size: 2rem; }

  h6 {
    font-size: 1.5rem; }

  .small {
    font-size: 1.5rem; } }
@media (min-width: 1300px) {
  body {
    font-size: 1.8em; }

  h1 {
    font-size: 4.0rem; }

  h2 {
    font-size: 4.0rem; }

  h3 {
    font-size: 3.0rem; }

  h4 {
    font-size: 2.5rem; }

  h5 {
    font-size: 2rem; }

  h6 {
    font-size: 1.5rem; } }
em {
  font-family: "Ubuntu_bold", Helvetica, Arial, sans-serif;
  font-style: normal; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  text-decoration: none;
  color: #f6bdb9; }
  a:hover {
    color: #f0928c; }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button {
  display: inline-block;
  color: #f6bdb9;
  font-family: "Ubuntu_bold", Helvetica, Arial, sans-serif;
  padding: 10px 20px;
  height: 22px;
  line-height: 22px;
  background-color: #fff;
  border-radius: 21px;
  pointer: cursor; }

.button:hover, button:hover {
  color: #645c4d; }

input[type="submit"], input[type="reset"], input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #f6bdb9;
  text-align: center;
  font-size: 11px;
  font-weight: normal;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  box-sizing: border-box; }

.button:hover,
button:hover {
  color: #222;
  border-color: #777777;
  outline: 0; }

.weiss .button {
  color: #fff;
  background-color: #f6bdb9; }

input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
  color: #222;
  border-color: #777777;
  outline: 0; }

.button:focus,
button:focus {
  color: #222;
  border-color: #777777;
  outline: 0; }

input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
  color: #222;
  border-color: #777777;
  outline: 0; }

.button.button-primary,
button.button-primary {
  color: #fff;
  background-color: #645c4d;
  border-color: #645c4d; }

input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
  color: #fff;
  background-color: #645c4d;
  border-color: #645c4d; }

.button.button-primary:hover,
button.button-primary:hover {
  color: #fff;
  background-color: #f6bdb9;
  border-color: #f6bdb9; }

input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover {
  color: #fff;
  background-color: #f6bdb9;
  border-color: #f6bdb9; }

.button.button-primary:focus,
button.button-primary:focus {
  color: #fff;
  background-color: #f6bdb9;
  border-color: #f6bdb9; }

input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
  color: #fff;
  background-color: #f6bdb9;
  border-color: #f6bdb9; }
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"] {
  height: 38px;
  padding: 6px 10px;
  background-color: #fff;
  border: 1px solid #fbfbfb;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
textarea,
select {
  height: 38px;
  padding: 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #fbfbfb;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }

/* Removes awkward default styles on some inputs for iOS */
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;
  appearance: none; }

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }

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 {
  border: 1px solid #645c4d;
  outline: 0; }

textarea:focus,
select:focus {
  border: 1px solid #645c4d;
  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; }

label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: outside;
  list-style-type: "- "; }

ol {
  list-style: decimal inside;
  padding-left: 0;
  margin-top: 0; }

ul {
  padding-left: 0;
  margin-top: 0; }
  ul ul, ul ol {
    margin: 0rem 0 1.5rem 3rem; }
    ul ul li, ul ol li {
      list-style-type: circle; }

ol ol, ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }

li {
  margin-bottom: 1rem;
  margin-left: 1rem; }

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: whitesmoke;
  border: 1px solid #e5e5e5;
  border-radius: 4px; }

pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e5e5e5; }

th:first-child,
td:first-child {
  padding-left: 0; }

th:last-child,
td:last-child {
  padding-right: 0; }

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
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; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  height: auto;
  box-sizing: border-box; }

.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }

.u-pull-right {
  float: right; }

.u-pull-left {
  float: left; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #e5e5e5; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
/* Larger than phablet (also point when grid becomes active) */
/* Larger than tablet */
/* Larger than desktop */
/* Larger than Desktop HD */
/* LESS Document */
body {
  -webkit-font-smoothing: antialiased; }

html {
  scroll-behavior: smooth; }

body, html {
  height: 100%; }

.start {
  background-color: #645c4d;
  height: 100%;
  position: relative;
  min-height: 500px;
  overflow: hidden; }
  .start h1, .start h2 {
    color: #fff;
    margin-bottom: 0; }
  .start h3 {
    color: #f6bdb9;
    font-family: "Ubuntu", Helvetica, Arial, sans-serif;
    font-size: 2.0rem; }
  .start div.grid-container.full {
    display: grid;
    grid-template-rows: 1fr 1fr;
    padding: 0;
    align-items: flex-end;
    gap: 0;
    grid-gap: 0;
    height: 100%; }

.logo {
  display: grid;
  grid-template-columns: 70px 230px;
  grid-gap: 0;
  gap: 0;
  align-items: center;
  z-index: 2; }
  .logo div:first-child {
    grid-column: 1 / 3; }
  .logo div:nth-child(2) {
    grid-column: 2 / 3;
    align-self: center; }
  .logo div:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3; }

.logo-img {
  margin-top: 1rem;
  width: 60px; }

.portrait {
  position: absolute;
  bottom: 0;
  height: auto;
  line-height: 0%;
  margin: 0;
  padding: 0;
  display: block;
  width: 600px;
  right: -180px; }

.navi {
  z-index: 2; }
  .navi ul {
    margin-left: -20px;
    margin-bottom: 40px; }
    .navi ul li {
      display: block;
      margin: 0rem; }
    .navi ul a {
      display: inline-block;
      color: #fff;
      font-family: "Ubuntu_bold", Helvetica, Arial, sans-serif;
      padding: 10px 20px;
      height: 22px;
      line-height: 22px; }
    .navi ul a:hover {
      background-color: #f6bdb9;
      border-radius: 21px;
      color: #645c4d; }

/* Larger than mobile s */
@media (min-width: 350px) {
  .portrait {
    width: 700px;
    right: -200px; } }
/* Larger than mobile */
@media (min-width: 400px) {
  .portrait {
    width: 750px;
    right: -210px; } }
/* Larger than phablet (also point when grid becomes active) */
/* Larger than tablet */
@media (min-width: 750px) {
  .start h3 {
    font-size: 2.2rem; }

  .logo {
    align-self: center;
    grid-template-columns: 280px 120px; }
    .logo div:first-child {
      grid-column: 1 / 2; }
    .logo div:nth-child(3) {
      grid-column: 2 / 3;
      grid-row: 1 / 3; }
    .logo div:nth-child(2) {
      grid-column: 1 / 2;
      align-self: flex-start; }

  .logo-img {
    margin-top: 1rem;
    width: 100px; }

  .portrait {
    width: 1100px;
    right: -20%; }

  .navi {
    z-index: 2; }
    .navi ul {
      margin-bottom: 140px; } }
/* Larger than desktop */
@media (min-width: 1000px) {
  .start {
    min-height: 500px; }
    .start div.grid-container.full {
      grid-template-rows: 2fr 1fr; }

  .logo {
    grid-template-columns: 280px 120px; }
    .logo div:first-child {
      grid-column: span 2; }
    .logo div:nth-child(3) {
      grid-column: 2 / 3;
      grid-row: 2 / 3; }
    .logo div:nth-child(2) {
      grid-column: 1 / 2;
      align-self: inherit; }
    .logo .portrait {
      width: 1100px;
      right: -20%; }

  .navi ul {
    margin-bottom: 40px; }
    .navi ul li {
      display: inline-block; } }
/* Larger than Desktop HD */
@media (min-width: 1300px) {
  .portrait {
    width: 1300px;
    right: -15%; } }
.content {
  padding-bottom: 6%; }
  .content img {
    width: 100%;
    height: auto; }

.pink {
  background-color: #f6bdb9; }
  .pink h4 {
    color: #fff; }

.braun {
  background-color: #645c4d;
  background-image: url("../images/hg-braun.svg");
  background-position: 0px bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  background-blend-mode: multiply; }
  .braun h2, .braun h3, .braun h4, .braun p {
    color: #fff; }

.weiss {
  background-image: url("../images/hg-pink.svg");
  background-position: 0px bottom;
  background-repeat: no-repeat;
  background-size: 100%; }

.center {
  justify-items: center;
  text-align: center; }

img.rund {
  width: 250px;
  height: 250px;
  display: block;
  border-radius: 50%;
  margin-bottom: 2.5rem;
  z-index: 2;
  position: relative; }

#kontakt div.circles {
  position: relative; }
  #kontakt div.circles span {
    width: 260px;
    height: 260px;
    position: absolute;
    background-color: #000;
    display: block;
    top: -15px;
    border-radius: 50%;
    z-index: 1;
    opacity: 0.1; }
  #kontakt div.circles span:nth-child(2) {
    top: -7px; }
  #kontakt div.circles span:nth-child(3) {
    top: 7px;
    right: 7px; }
  #kontakt div.circles span:nth-child(4) {
    top: 2px;
    right: -7px; }

.firma {
  padding-right: 90px;
  position: relative; }

img.logo-footer {
  width: 74px;
  height: 170px;
  position: absolute;
  top: -20px;
  right: 0; }

.neu {
  text-transform: uppercase;
  color: #f6bdb9;
  margin-bottom: 0.5rem;
  font-family: "Ubuntu_bold", Helvetica, Arial, sans-serif;
  transform: rotate(-5deg);
  display: inline-block; }

.footer {
  grid-template-columns: 1fr;
  align-items: flex-end;
  margin-top: 6%;
  border-top: 1px solid #f6bdb9; }
  .footer p {
    font-size: 1.6rem; }
    .footer p strong {
      color: #f6bdb9; }
  .footer a {
    color: #f6bdb9; }

@media (min-width: 750px) {
  .weiss {
    background-position: 200px bottom; }

  .braun {
    background-position: 200px bottom; }

  .firma {
    padding-left: 90px;
    padding-right: 0px;
    grid-column: 1 / 4; }

  img.logo-footer {
    top: -20px;
    right: inherit;
    left: 0; }

  .footer {
    grid-template-columns: 2fr 2fr 1fr; } }
@media (min-width: 1000px) {
  .weiss {
    background-position: 200px bottom; }

  img.rund {
    width: 300px;
    height: 300px;
    display: block;
    border-radius: 50%;
    margin-bottom: 2.5rem;
    z-index: 2;
    position: relative; }

  #kontakt div.circles span {
    width: 310px;
    height: 310px;
    top: -20px; }
  #kontakt div.circles span:nth-child(2) {
    top: -10px; }
  #kontakt div.circles span:nth-child(3) {
    top: 10px;
    right: 10px; }
  #kontakt div.circles span:nth-child(4) {
    top: 5px;
    right: -10px; }

  .firma {
    grid-column: 1 / 4; }

  .footer {
    grid-template-columns: 2fr 2fr 1fr; } }
@media (min-width: 1300px) {
  .firma {
    grid-column: 1 / 2; }

  .footer {
    grid-template-columns: 360px 2fr 2fr 1fr;
    align-items: flex-end;
    margin-top: 6%;
    border-top: 1px solid #f6bdb9; } }

/*# sourceMappingURL=style.css.map */