/* Generic Resets
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

main, article, aside, figure, footer, header, nav, section, details, summary {
  display: block;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
} /* we'll restore bullets as needed for content */
blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

th {
  font-weight: bold;
  vertical-align: bottom;
}

td {
  font-weight: normal;
  vertical-align: top;
}

td img {
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #999;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

pre {
  white-space: pre-line;
}

input[type=radio] {
  vertical-align: text-bottom;
}

input[type=checkbox] {
  vertical-align: bottom;
}

small {
  font-size: 0.8em;
}

strong {
  font-weight: bold;
}

sub, sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

pre, code, kbd, samp {
  font-family: monospace, sans-serif;
}

label, input[type=button], input[type=submit], input[type=file], button {
  cursor: pointer;
}

button, input, select, textarea {
  margin: 0;
}

ins {
  background-color: var(--highlight-color);
  color: #000;
  text-decoration: none;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
} /* https://css-tricks.com/snippets/css/clear-fix/ */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  hyphens: auto;
}

p {
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
  }
}
/* Variables
-------------------------------------------------------------------------------*/
html, body {
  font-size: 1.157vw;
  font-family: "Roboto";
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 300;
  font-variation-settings: "wdth" 100;
  color: #494948;
}

body {
  overflow-x: hidden;
}

/* Grid
-------------------------------------------------------------------------------*/
.grid-inner {
  max-width: 53.333vw;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
  width: 100%;
  float: none;
  margin-right: 0;
}
.col1.with-margin-right, .col2.with-margin-right, .col3.with-margin-right, .col4.with-margin-right, .col5.with-margin-right, .col6.with-margin-right, .col7.with-margin-right, .col8.with-margin-right, .col9.with-margin-right, .col10.with-margin-right, .col11.with-margin-right, .col12.with-margin-right {
  margin-right: 1.28%;
}

.col1 {
  flex: 0 0 7.16333333%;
  max-width: 7.16333333%;
}

.col2 {
  flex: 0 0 15.5966667%;
  max-width: 15.5966667%;
}

.col3 {
  flex: 0 0 24.03%;
  max-width: 24.03%;
}

.col4 {
  flex: 0 0 32.4833334%;
  max-width: 32.4833334%;
}

.col5 {
  flex: 0 0 40.926667%;
  max-width: 40.926667%;
}

.col6 {
  flex: 0 0 49.36%;
  max-width: 49.36%;
}

.col7 {
  flex: 0 0 57.79333%;
  max-width: 57.79333%;
}

.col8 {
  flex: 0 0 66.21666667%;
  max-width: 66.21666667%;
}

.col9 {
  flex: 0 0 74.6666667%;
  max-width: 74.6666667%;
}

.col10 {
  flex: 0 0 83.1111112%;
  max-width: 83.1111112%;
}

.col11 {
  flex: 0 0 91.56%;
  max-width: 91.56%;
}

.col12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.text-align-left {
  text-align: left;
}

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

.text-padding-right {
  padding-right: 2.315vw;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-flex-start {
  justify-content: flex-start;
}

.justify-content-flex-end {
  justify-content: flex-end;
}

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

.align-items-flex-start {
  align-items: flex-start;
}

.align-items-flex-end {
  align-items: flex-end;
}

.flex-direction-columns {
  flex-direction: column;
}

.text-padding-left {
  padding-left: 4.63vw;
}

.margin-bottom {
  margin-bottom: 3.125vw;
}

/* General
-------------------------------------------------------------------------------*/
h1, h2, p {
  font-weight: 300;
}

h1, h2 {
  font-size: 3em;
  margin-bottom: 2.083vw;
}

p {
  line-height: 1.6667;
  margin-bottom: 1.563vw;
}
p.bigger {
  font-size: 1.25em;
  font-weight: 600;
}

ul {
  list-style-position: outside;
  list-style-type: disc;
  margin-bottom: 1.563vw;
}
ul li {
  margin-left: 1em;
  margin-bottom: 0.7815vw;
  font-weight: 300;
}

section {
  margin-bottom: 2.083vw;
}

.background-logo {
  width: 29.635vw;
  height: 30.573vw;
  background-image: url("../img/b.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
}
.background-logo.header-left {
  top: 3.125vw;
  left: 0;
  transform: translate(-50%, 0);
}
.background-logo.header-right {
  right: 0;
  top: 0;
  transform: translate(60%, -33%) rotate(45deg);
}
.background-logo.footer {
  transform: translate(-75%, -75%) rotate(45deg);
}

.wrapper {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

/* Header
-------------------------------------------------------------------------------*/
header {
  padding: 2.083vw 0 3.125vw;
  position: relative;
  flex: 0 0 100%;
  max-width: 100%;
  align-self: flex-start;
}

.logo-container .logo {
  width: 10.417vw;
}

/* Circles
-------------------------------------------------------------------------------*/
.circles {
  margin: 0 auto 4.167vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.563vw;
}
.circles .circle {
  flex: 0 0 13.229vw;
  max-width: 13.229vw;
  height: 13.229vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.521vw;
  border: 0.313vw solid #000;
}
.circles .circle.purple {
  border-color: #c3008e;
  color: #c3008e;
}
.circles .circle.blue {
  border-color: #6202c3;
  color: #6202c3;
}
.circles .circle.orange {
  border-color: #e34f00;
  color: #e34f00;
}
.circles .circle.red {
  border-color: #b90000;
  color: #b90000;
}
.circles .circle.pink {
  border-color: #db01b9;
  color: #db01b9;
}

.impressum h2 {
  font-size: 2.1em;
}
.impressum h3 {
  font-size: 1.68em;
  margin-bottom: 1.042em;
}

/* Footer
-------------------------------------------------------------------------------*/
footer {
  padding: 2.083vw 0;
  background: #565656;
  color: #fff;
  position: relative;
  flex: 0 0 100%;
  max-width: 100%;
  align-self: flex-end;
}
footer p {
  font-weight: 300;
  font-size: 0.94em;
  line-height: 1.42;
}
footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
footer a.margin-right {
  margin-right: 2.083vw;
}
footer .margin-bottom-half {
  margin-bottom: 1.042vw;
}

/* Responsive
-------------------------------------------------------------------------------*/
@media (max-width: 1280px) {
  body {
    font-size: 1.757vw;
  }
  header .logo-container .logo {
    width: 160px;
  }
  .grid-inner {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
  }
  .col10 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .circles .circle {
    flex: 0 0 27.5vw;
    max-width: 27.5vw;
    height: 27.5vw;
  }
  footer .col10 {
    margin-bottom: 1.563vw;
  }
}
@media (max-width: 820px) {
  body {
    font-size: 14pt;
  }
  h1, h2, p {
    margin-bottom: 30px;
  }
  header, footer {
    padding: 30px 0;
  }
  section {
    margin-bottom: 40px;
  }
}
@media (max-width: 600px) {
  h1, h2 {
    font-size: 2.1em;
  }
  .circles .circle {
    flex: 0 0 42.5vw;
    max-width: 42.5vw;
    height: 42.5vw;
    font-size: 0.84em;
  }
  footer .col10 {
    flex-wrap: wrap;
  }
  footer .col4, footer .col3, footer .col5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  footer a.margin-right {
    margin-right: 12px;
  }
}

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