/* Fonts */
/* ubuntu-300 - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/ubuntu-v14-latin-300.eot"); /* IE9 Compat Modes */
  src: local("Ubuntu Light"), local("Ubuntu-Light"),
    url("../fonts/ubuntu-v14-latin-300.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/ubuntu-v14-latin-300.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/ubuntu-v14-latin-300.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/ubuntu-v14-latin-300.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/ubuntu-v14-latin-300.svg#Ubuntu")
      format("svg"); /* Legacy iOS */
}

/* ubuntu-300italic - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/ubuntu-v14-latin-300italic.eot"); /* IE9 Compat Modes */
  src: local("Ubuntu Light Italic"), local("Ubuntu-LightItalic"),
    url("../fonts/ubuntu-v14-latin-300italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/ubuntu-v14-latin-300italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/ubuntu-v14-latin-300italic.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/ubuntu-v14-latin-300italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/ubuntu-v14-latin-300italic.svg#Ubuntu") format("svg"); /* Legacy iOS */
}

/* ubuntu-regular - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/ubuntu-v14-latin-regular.eot"); /* IE9 Compat Modes */
  src: local("Ubuntu Regular"), local("Ubuntu-Regular"),
    url("../fonts/ubuntu-v14-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/ubuntu-v14-latin-regular.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/ubuntu-v14-latin-regular.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/ubuntu-v14-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/ubuntu-v14-latin-regular.svg#Ubuntu") format("svg"); /* Legacy iOS */
}

/* ubuntu-italic - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/ubuntu-v14-latin-italic.eot"); /* IE9 Compat Modes */
  src: local("Ubuntu Italic"), local("Ubuntu-Italic"),
    url("../fonts/ubuntu-v14-latin-italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/ubuntu-v14-latin-italic.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/ubuntu-v14-latin-italic.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/ubuntu-v14-latin-italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/ubuntu-v14-latin-italic.svg#Ubuntu") format("svg"); /* Legacy iOS */
}

/* ubuntu-700 - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/ubuntu-v14-latin-700.eot"); /* IE9 Compat Modes */
  src: local("Ubuntu Bold"), local("Ubuntu-Bold"),
    url("../fonts/ubuntu-v14-latin-700.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/ubuntu-v14-latin-700.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/ubuntu-v14-latin-700.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/ubuntu-v14-latin-700.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/ubuntu-v14-latin-700.svg#Ubuntu")
      format("svg"); /* Legacy iOS */
}

/* ubuntu-700italic - latin */
@font-face {
  font-family: "Ubuntu";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/ubuntu-v14-latin-700italic.eot"); /* IE9 Compat Modes */
  src: local("Ubuntu Bold Italic"), local("Ubuntu-BoldItalic"),
    url("../fonts/ubuntu-v14-latin-700italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/ubuntu-v14-latin-700italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/ubuntu-v14-latin-700italic.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/ubuntu-v14-latin-700italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/ubuntu-v14-latin-700italic.svg#Ubuntu") format("svg"); /* Legacy iOS */
}

/* open-sans-300 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/open-sans-v17-latin-300.eot"); /* IE9 Compat Modes */
  src: local("Open Sans Light"), local("OpenSans-Light"),
    url("../fonts/open-sans-v17-latin-300.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v17-latin-300.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/open-sans-v17-latin-300.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/open-sans-v17-latin-300.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/open-sans-v17-latin-300.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-300italic - latin */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/open-sans-v17-latin-300italic.eot"); /* IE9 Compat Modes */
  src: local("Open Sans Light Italic"), local("OpenSans-LightItalic"),
    url("../fonts/open-sans-v17-latin-300italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v17-latin-300italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("../fonts/open-sans-v17-latin-300italic.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/open-sans-v17-latin-300italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/open-sans-v17-latin-300italic.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans-v17-latin-regular.eot"); /* IE9 Compat Modes */
  src: local("Open Sans Regular"), local("OpenSans-Regular"),
    url("../fonts/open-sans-v17-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v17-latin-regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/open-sans-v17-latin-regular.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/open-sans-v17-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/open-sans-v17-latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/open-sans-v17-latin-italic.eot"); /* IE9 Compat Modes */
  src: local("Open Sans Italic"), local("OpenSans-Italic"),
    url("../fonts/open-sans-v17-latin-italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v17-latin-italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/open-sans-v17-latin-italic.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/open-sans-v17-latin-italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/open-sans-v17-latin-italic.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/open-sans-v17-latin-700.eot"); /* IE9 Compat Modes */
  src: local("Open Sans Bold"), local("OpenSans-Bold"),
    url("../fonts/open-sans-v17-latin-700.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v17-latin-700.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/open-sans-v17-latin-700.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/open-sans-v17-latin-700.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/open-sans-v17-latin-700.svg#OpenSans") format("svg"); /* Legacy iOS */
}

/* open-sans-700italic - latin */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/open-sans-v17-latin-700italic.eot"); /* IE9 Compat Modes */
  src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"),
    url("../fonts/open-sans-v17-latin-700italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/open-sans-v17-latin-700italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("../fonts/open-sans-v17-latin-700italic.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/open-sans-v17-latin-700italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/open-sans-v17-latin-700italic.svg#OpenSans") format("svg"); /* Legacy iOS */
}

:root {
  --main-purple: #ad9ccb;
  --main-green: #c5deb1;
  --main-orange: #f7b17f;
  --main-grey: #c3cdd9;

  --dark-grey: #333;
  --light-grey: #f8f9fa;
  --dark-blue: #182733;
  --light-green: #ecffec;
  /* --light-orange: #fef8ef; */
  --light-orange: #fdebcf;
  --light-purple: #f5f3f9;

  --transparent-purple: rgba(173, 156, 203, 0.8);
  --transparent-green: rgba(197, 222, 177, 0.8);
  --transparent-orange: rgba(247, 177, 127, 0.8);
  --transparent-white: rgba(255, 255, 255, 0.7);
  --transparent-grey: rgba(195, 205, 217, 0.8);
  --transparent-light-grey: rgba(248, 249, 250, 0.8);
  --transparent-dark-grey: rgba(51, 51, 51, 0.1);

  --overlay-color: rgba(24, 39, 51, 0.85);
  --menu-speed: 0.75s;

  --max-width: 1280px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Ubuntu", sans-serif;
  line-height: 1.6;
  background: #fff;
  color: var(--dark-grey);
}

a {
  color: var(--dark-grey);
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  width: 100%;
}

h1 {
  font-weight: 300;
  line-height: 1.2;
}
h2 {
  font-weight: 400;
}

p {
  margin: 10px 0;
}

.sticky {
  position: sticky;
}

.py-1 {
  padding: 0 0.5rem;
}
.py-3 {
  padding: 0 3rem;
}

.p-3 {
  padding: 3rem;
}
.m-0 {
  margin: 0;
}

.my-1 {
  margin: 1rem 0 0.5rem 0;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mt-3 {
  margin-top: 3rem;
}
.font-light {
  font-weight: 400;
}
.lead {
  font-size: 1.3rem;
  margin-bottom: 2rem;
}
.bold {
  font-weight: bold;
}

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

.btn {
  display: inline-block;
  border: none;
  padding: 0.5rem 1.5rem;
  /* margin-top: 2rem;
  margin-right: 0.5rem; */
  border-radius: 10px;
}
.btn-dark {
  background: var(--main-purple);
  color: #fff;
}

/* Utility */
.container {
  max-width: var(--max-width);
  /* Pushing everything in the middle */
  margin: auto;
  padding: 0 2rem;
  overflow: hidden;
}

.flex-items {
  display: flex;
  text-align: center;
  justify-content: center;
  height: 100%;
}
.flex-items > div {
  padding: 20px;
}

.p-container {
  padding: 0 2.1rem;
}

.heading {
  font-size: 1.3rem;
}

#logo {
  width: 180px;
}

.section-title {
  font-size: 2rem;
  display: block;
  padding-bottom: 0.5rem;
  text-align: center;
  font-weight: 100;
}
/* Footer */
.section-line {
  height: 1px;
  width: 100%;
  background: var(--main-purple);
  display: block;
  margin: 0 auto 0 auto;
}

.bottom-line {
  height: 2px;
  width: 3rem;
  background: var(--light-purple);
  display: block;
  margin: 0 auto 1rem auto;
}
.bl-green {
  background: var(--light-green);
}
.bl-orange-light {
  background: var(--light-orange);
}
.bl-orange {
  background: var(--main-orange);
}
.bl-grey {
  background: #808080;
}
.bl-dark {
  background: var(--dark-grey);
}

/* Borders */
.purple-border {
  border-top: 2px var(--main-purple) solid;
}
.green-border {
  border-top: 2px var(--main-green) solid;
}
.orange-border {
  border-top: 2px var(--transparent-orange) solid;
}
.grey-border {
  border-top: 2px var(--main-grey) solid;
}
.grey-border-bt {
  border-bottom: 2px var(--main-grey) solid;
}

/* Hamburger Menu */
.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/*  Navigation */

#home-nav {
  display: flex;
  width: 100%;
  height: 5.5rem;
  background: rgba(255, 255, 255, 0);
  position: fixed;
  top: 0;
  z-index: 2;
  padding: 0.5rem;
}
#main-nav {
  display: flex;
  width: 100%;
  height: 5.5rem;
  background: var(--light-grey);
  position: fixed;
  top: 0;
  z-index: 2;
  padding: 0.5rem;
}
#home-nav .container,
#main-nav .container {
  margin-left: 5.5rem;
  display: flex;
  height: 5rem;
  align-items: center;
  justify-content: space-around;
}
#home-nav ul,
#main-nav ul {
  display: flex;
  margin-left: 5rem;
}
#home-nav ul li a,
#main-nav ul li a {
  color: var(--dark-grey);
  border-bottom: 2px transparent solid;
  padding: 0.3rem 0;
  margin: 0 1rem;
  transition: border-color 0.5s;
  font-size: small;
}

/* Hover States - Underlines */
#home-nav a:hover,
#main-nav a:hover {
  border-color: var(--main-purple);
}
#home-nav a.current,
#main-nav a.current {
  border-color: var(--main-purple);
}

/* Showcase-Home */
/* Overlay - Home, Impressum und Datenschutz */
#overlay {
  position: relative;
  background: url(../img/AdobeStock_351642518_50.jpeg) no-repeat center
    center/cover;
  background-attachment: fixed;
  z-index: 1;
}
#overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/Wolke_RGB_hell.jpg) no-repeat 50% 30% / cover;
  background-attachment: fixed;
  opacity: 0.95;
  z-index: -1;
}

/* Info & Icons; Home, Kontakt*/
.icons {
  padding: 1rem;
  background: var(--transparent-light-grey);
  height: 30vh;
  margin-bottom: 8rem;
}
.icons h3 {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.icons a {
  padding: 1rem;
}
.icons i {
  color: var(--main-purple);
  padding: 1rem;
}

/* Home */
#showcase-home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50vh;
  padding-top: 5%;
}
#showcase-home h1 {
  padding-right: 10%;
  font-size: 3rem;
}

/* Showcase-inner */
.showcase {
  margin-top: 3rem;
}
.showcase .showcase-container {
  margin: 3rem 0;
  padding: 2rem 0;
}
.showcase .showcase-container ul {
  list-style: disc;
  padding-left: 1.5rem;
}

/* Workshops */
#workshops {
  background: url(../img/Wolke_RGB_hell.jpg) no-repeat 50% 20% / cover;
  background-attachment: fixed;
  position: relative;
  z-index: 1;
  padding: 5rem 0;
}
#workshops::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/AdobeStock_353576397_50.jpeg) no-repeat center center /
    cover;
  background-attachment: fixed;
  opacity: 0.05;
  z-index: -1;
}

.workshop-a {
  margin-bottom: 1rem;
}

.workshop-a1 {
  display: flex;
  background: var(--transparent-light-grey);
  margin: 3rem 0 2rem 0;
  height: 21vh;
}

.workshop-b,
.workshop-c {
  /* background: var(--transparent-light-grey); */
  margin: 0;
}

.workshop-b .container {
  border-bottom: 1px dotted var(--dark-grey);
}

.workshop-flex {
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
.workshop-flex .item1 {
  flex: 50%;
  text-align: center;
  align-self: center;
  justify-self: center;
}
.workshop-flex .item2 {
  flex: 50%;
  padding: 2rem 0;
}
.workshop-flex ul {
  list-style: disc;
  padding: 0 1.5rem;
}

#itworks {
  width: 80%;
  padding: 2rem;
  border-radius: 100px;
}

/* Beratung und IT-Service */
#beratung {
  padding: 5rem 0;
  background: url(../img/Wolke_RGB_hell.jpg) no-repeat 50% 20% / cover;
  background-attachment: fixed;
  position: relative;
  z-index: 1;
  height: 100vh;
}
#beratung::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/AdobeStock_172016435_50.jpeg) no-repeat center
    center/cover;
  background-attachment: fixed;
  opacity: 0.1;
  z-index: -1;
}
.beratung-b {
  display: flex;
  background: var(--transparent-light-grey);
  margin: 3rem 0 2rem 0;
  height: 21vh;
}

/* Webdesign */
#web {
  padding: 5rem 0;
  background: url(../img/Wolke_RGB_hell.jpg) no-repeat 50% 20% / cover;
  background-attachment: fixed;
  position: relative;
  z-index: 1;
  height: 100vh;
}
#web::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/AdobeStock_162391050_50.jpeg) no-repeat 80%
    center/cover;
  background-attachment: fixed;
  opacity: 0.1;
  z-index: -1;
}
.web-b {
  display: flex;
  background: var(--transparent-light-grey);
  margin: 3rem 0 2rem 0;
  height: 21vh;
}

/* Kontakt */
#kontakt {
  padding: 5rem 0;
  background: url(../img/Wolke_RGB_hell.jpg) no-repeat 50% 20% / cover;
  background-attachment: fixed;
  position: relative;
  z-index: 1;
}
#kontakt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/AdobeStock_217143290_80.jpeg) no-repeat 30% 60% / cover;
  background-attachment: fixed;
  opacity: 0.05;
  z-index: -1;
}

#kontakt-a .flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.kontakt-icons {
  margin: 3rem 0 2rem 0;
}
.kontakt-icons i {
  color: var(--main-orange);
}
#kontakt-logo {
  width: 180px;
}
#osm {
  font-size: 0.7rem;
  color: var(--dark-grey);
  text-align: right;
}

/* Impressum */
#overlay ul li {
  font-size: 0.8rem;
}

/* Footer */
#main-footer {
  background: var(--light-grey);
  color: var(--dark-grey);
}
#home-footer {
  background: rgba(255, 255, 255, 0.1);
  color: var(--dark-grey);
}
#home-footer .footer-content,
#main-footer .footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
#home-footer .footer-content p,
#main-footer .footer-content p {
  font-family: "ubuntu", sans-serif;
  font-size: small;
}
#home-footer .footer-links ul,
#main-footer .footer-links ul {
  display: flex;
  align-items: center;
}
#home-footer .footer-links li,
#main-footer .footer-links li {
  padding: 0 0.5rem;
}
#home-footer .footer-links a,
#main-footer .footer-links a {
  text-decoration: none;
  color: var(--dark-grey);
  font-size: small;
}
#home-footer .footer-links a:hover,
#home-footer .footer-links a.current,
#main-footer .footer-links a:hover,
#main-footer .footer-links a.current {
  color: var(--main-purple);
}
