@charset "UTF-8";
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion    Import


*****************************************************************************/
/*
base.scss

Includes aller nötigen SCSS-Dateien

Styleguide 100
*/
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************/
/* colors */
/* fonts */
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      media queries bem module

*****************************************************************************/
/*
.media queries

Styleguide classes.media queries
*/
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-v12-latin-300.woff2") format("woff2"), url("/assets/fonts/inter/inter-v12-latin-300.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-v12-latin-700.woff2") format("woff2"), url("/assets/fonts/inter/inter-v12-latin-700.woff") format("woff");
}
/****************************************************************************
 *	MEDIA MOTION AG															*
 ****************************************************************************

	Funktion	css reset
	Authors		contao

*****************************************************************************/
body,
div,
h1,
h2,
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

header,
footer,
nav,
section,
aside,
article,
figure,
figcaption {
  display: block;
}

/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion    main css. HTML elements and basic structure
    Authors
    Datum

*****************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: auto;
  width: 100%;
  font-size: 18px;
  font-family: "Inter";
  background: #ffffff;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: 0.5s;
}

p {
  color: #161616;
}

ul li {
  font-size: 18px;
  font-family: "Inter";
  font-weight: 400;
}

/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      home bem module

*****************************************************************************/
/*
.home

Styleguide classes.home
*/
.home {
  position: relative;
  background-image: url("/files/template/doc/img/home.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 800px;
}

.container-h1-home {
  background: rgba(22, 22, 22, 0.5960784314);
  position: absolute;
  bottom: 100px;
  right: 0;
  text-transform: uppercase;
  padding: 20px;
  color: #ffffff;
}

.memo-logo {
  position: absolute;
  background: rgba(22, 22, 22, 0.5960784314);
  top: 40px;
  left: 0;
  padding: 20px;
}
.memo-logo img {
  height: 60px;
}

@media screen and (max-width: 800px) {
  .home {
    min-height: 70vh;
  }
  .container-h1-home {
    width: 100%;
    bottom: 0;
    font-size: 20px;
  }
}
@media screen and (max-width: 600px) {
  .home {
    min-height: 80vh;
    background-position: center;
  }
  .container-h1-home {
    font-size: 16px;
  }
}
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      button bem module

*****************************************************************************/
/*
.button

Styleguide classes.button
*/
.button {
  padding: 15px 40px;
  background: #96c500;
  font-size: 20px;
  color: #ffffff;
  margin-top: 10px;
  border: 1px solid transparent;
  transition: 0.5s;
}
.button:hover {
  border: 1px solid #96c500;
  background: #ffffff;
  color: #96c500;
}
.button--inline {
  display: inline-block;
}

.button-home {
  margin-right: 20px;
  display: inline-block;
  margin-bottom: 20px;
}
.button-home:hover {
  border: 1px solid transparent;
}

.button-green {
  background: #96c500;
}
.button-green:hover {
  border: 1px solid #96c500;
  color: #96c500;
}

.fun-cube-button {
  margin-top: 100px;
}

@media screen and (max-width: 800px) {
  .button {
    padding: 10px 20px;
    font-size: 18px;
  }
  .fun-cube-button {
    font-size: 16px;
  }
}
@media screen and (max-width: 600px) {
  .button-home {
    text-align: center;
    width: 80%;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .button {
    display: block;
    text-align: center;
  }
  .fun-cube-button .button {
    display: block;
    margin: 0;
  }
}
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      responsive bem module

*****************************************************************************/
/*
.responsive

Styleguide classes.responsive
*/
.container-responsive {
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-content: center;
  align-items: center;
  color: #161616;
  padding: 100px;
}

.img-resposive {
  display: flex;
  justify-content: center;
  padding-bottom: 50px;
}

.img-resposive img {
  max-width: 750px;
  height: auto;
}

.text-responsive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  text-align: left;
  max-width: 950px;
  margin-bottom: 100px;
}

@media screen and (max-width: 800px) {
  .container-responsive {
    padding: 100px 40px;
  }
  .img-resposive img {
    width: 80%;
  }
}
@media screen and (max-width: 600px) {
  .text-responsive {
    grid-template-columns: 1fr;
  }
  .container-responsive {
    padding: 100px 40px;
  }
}
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      teilnehmer bem module

*****************************************************************************/
/*
.teilnehmer

Styleguide classes.teilnehmer
*/
.container-teilnehmer {
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
  padding: 100px;
  text-align: center;
  color: #161616;
}

.teilnehmer-h1 {
  font-weight: 300;
  max-width: 950px;
  line-height: 40px;
  margin-bottom: 50px;
}

@media screen and (max-width: 800px) {
  .container-teilnehmer {
    padding: 100px 40px;
  }
}
@media screen and (max-width: 600px) {
  .container-teilnehmer {
    font-size: 18px;
    padding: 100px 20px;
  }
}
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      article bem module

*****************************************************************************/
/*
.article

Styleguide classes.article
*/
.article-container {
  background: #f6f6f6;
  padding: 50px 40px;
}

.article {
  display: grid;
  align-items: center;
  align-content: center;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
  height: auto;
  padding: 100px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.article-h2 {
  text-align: center;
  padding: 50px 40px;
}

.article-inhalt {
  display: flex;
  flex-flow: wrap column;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  margin: 40px;
}
.article-inhalt h2 {
  margin-bottom: 10px;
}

.article-img {
  margin-top: 0;
  border-radius: 50%;
  margin-bottom: 50px;
}

@media screen and (max-width: 1100px) {
  .article-container {
    padding: 100px 40px;
  }
  .article {
    grid-template-columns: 1fr 1fr;
    padding: 50px 40px;
  }
}
@media screen and (max-width: 700px) {
  .article-container {
    padding: 100px 20px;
  }
  .article {
    grid-template-columns: 1fr;
    padding: 50px 20px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
}
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      pakette bem module

*****************************************************************************/
/*
.pakette

Styleguide classes.pakette
*/
.pakette {
  position: relative;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-content: center;
  align-items: center;
  background: #f6f6f6;
  padding: 100px 0;
}

.pakette-header {
  text-align: center;
  padding: 50px 0 100px 0;
}
.pakette-header .pakette-header-h3 {
  font-weight: 400;
}
.pakette-header .pakette-header-h2 {
  font-size: 36px;
}

.pakette-container {
  display: flex;
  flex-flow: wrap row;
  justify-content: center;
}

.button-pakett-container {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  width: 40%;
  margin-top: 100px;
}

.pakette-container-inhalt {
  position: relative;
  background: #ffffff;
  margin: 20px;
  padding-bottom: 100px;
}
.pakette-container-inhalt h2 {
  padding: 40px;
  text-transform: uppercase;
  background: #96c500;
  color: #ffffff;
}
.pakette-container-inhalt ul {
  margin: 40px;
}

.pakette-preis {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  padding: 20px 40px;
  background: #7d796e;
}

.pakette-preis-inhalt {
  display: flex;
  flex-flow: wrap row;
  justify-content: space-between;
}
.pakette-preis-inhalt p {
  font-weight: 700;
  color: #ffffff;
}

@media screen and (max-width: 700px) {
  .pakette-preis {
    padding: 20px;
  }
  .pakette-container-inhalt h2 {
    padding: 40px 20px;
  }
  .pakette-container-inhalt ul {
    margin: 40px 20px;
  }
}
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      angebot bem module

*****************************************************************************/
/*
.angebot

Styleguide classes.angebot
*/
.angebot {
  position: relative;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-content: center;
  background-image: url("/files/template/doc/img/tippspiel_background2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  padding: 100px 40px;
  text-align: center;
}

.angebot-h2 {
  position: relative;
  max-width: 1800px;
  line-height: 40px;
  color: #b51817;
  font-weight: 400;
  margin-bottom: 10px;
}

.angebot-text {
  background: rgba(255, 255, 255, 0.6);
  padding: 40px;
  font-weight: 400;
  color: #161616;
}
.angebot-text h3 {
  margin: 10px 0 5px;
}

.angebot-text-small {
  font-size: 12px;
}

/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      fun-cube bem module

*****************************************************************************/
/*
.fun-cube

Styleguide classes.fun-cube
*/
.fun-cube {
  display: flex;
  flex-flow: wrap column;
  align-items: center;
  padding: 100px 40px;
}

.fun-cube-header {
  text-align: center;
  margin-bottom: 50px;
}

.fun-cube-h3 {
  font-weight: 400;
  text-transform: uppercase;
}

.fun-cube-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: auto;
}

.fun-cube-container-inhalt {
  display: grid;
  grid-template-rows: 1fr 1fr;
  max-width: 420px;
  margin: 40px;
}
@media screen and (max-width: 800px) {
  .fun-cube-container-inhalt {
    display: block;
  }
}
.fun-cube-container-inhalt p {
  margin-top: 20px;
  font-size: 14px;
  color: #f6f6f6;
}

.fun-cube-img-inhalt {
  width: 100%;
  height: 100%;
  max-width: 420px;
  margin: 0;
}

.fun-cube-text {
  margin: 0;
  background: #7d796e;
  color: #ffffff;
  padding: 40px;
}

@media screen and (max-width: 1200px) {
  .fun-cube {
    padding: 100px 20px;
  }
  .fun-cube-container-inhalt {
    max-width: 400px;
    margin: 20px;
    margin-top: 100px;
  }
}
@media screen and (max-width: 900px) {
  .fun-cube-container {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
  .fun-cube-container-inhalt {
    margin-top: 100px;
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 500px) {
  .fun-cube-container {
    margin: 5px;
  }
  .fun-cube-container-inhalt {
    max-width: 80vw;
    margin: 10px;
  }
  .fun-cube-container-inhalt p {
    margin-top: 20px;
    font-size: 14px;
    color: #f6f6f6;
  }
}
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      kunden bem module

*****************************************************************************/
/*
.kunden

Styleguide classes.kunden
*/
.kunden {
  position: relative;
  background-image: url("/files/template/doc/img/kunde.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 100px 40px;
  text-align: center;
}

.kunden-container {
  background: rgba(255, 255, 255, 0.8);
  padding: 100px 40px;
}

.kunden-img {
  margin: 20px;
  width: auto;
  height: 60px;
}
.kunden-img-padding {
  padding: 10px;
}
.kunden-img-padding-8 {
  padding: 8px;
}
.kunden-img-padding-12 {
  padding: 12px;
}

.kunden-h3 {
  font-size: 28px;
  margin-bottom: 50px;
}

@media screen and (max-width: 800px) {
  .kunden-img {
    height: 40px;
  }
}
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      kontakt bem module

*****************************************************************************/
/*
.kontakt

Styleguide classes.kontakt
*/
.kontakt {
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
  padding: 20px 40px 20px 40px;
  line-height: 40px;
}
.kontakt a:hover {
  color: #96c500;
}

.kontakt-mediamotion-logo {
  width: auto;
  height: 50px;
}

.kontakt-link-img {
  align-self: center;
  margin: 0 0 10px;
}

nav {
  font-size: 14px;
}

@media screen and (max-width: 450px) {
  .kontakt {
    text-align: center;
  }
  .kontakt a {
    display: inline-block;
  }
  .display-none-mobile {
    display: none;
  }
}
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      impressum bem module

*****************************************************************************/
/*
.impressum

Styleguide classes.impressum
*/
.impressum {
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
  padding: 100px 40px;
}

.impressum-responsive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 100px;
  max-width: 1200px;
}
.impressum-responsive h2 {
  font-size: 18px;
  margin-top: 40px;
}

@media screen and (max-width: 600px) {
  .impressum-responsive {
    grid-template-columns: 1fr;
    padding: 100px 20px;
  }
}
/****************************************************************************
 *  MEDIA MOTION AG                                                         *
 ****************************************************************************

    Funktion      datenschutz bem module

*****************************************************************************/
/*
.datenschutz

Styleguide classes.datenschutz
*/
.datenschutz {
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
  padding: 100px 40px;
}

.datenschutz-responsive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 100px;
  max-width: 1200px;
}
.datenschutz-responsive h2 {
  font-size: 18px;
  margin-top: 40px;
}
.datenschutz-responsive ul {
  padding-left: 20px;
}

@media screen and (max-width: 600px) {
  .datenschutz-responsive {
    grid-template-columns: 1fr;
    padding: 100px 20px;
  }
}

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