/* Fonts (Raleway) liegen global in CSS_Allgemein/CSS_Allgemein_Layout.css */

/* === GLOBAL === */

:root {
  --lp-blau: #1f4e8c;
  --lp-rosa: #af8a9e;
  --lp-hellgrau: #f3f4f6;
  --lp-rot: #4f124b;
  --lp-gelb: #fdbc4f;
  --lp-border-style: 2px solid;
  --lp-border-transition: border 0.5s ease-in-out;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: "Raleway", "Lato", "Helvetica Neue", "Arial", sans-serif;
  background-color: var(--lp-hellgrau);
}

* {
  box-sizing: border-box;
}

section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (max-width: 1366px) {
  section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (max-width: 1024px) {
  section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  section {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* === GENERELLES === */

.lp-clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.lp-active {
  background-color: var(--lp-rot) !important;
}

.lp-screenreader {
  display: none;
}

.lp-intro-container {
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.lp-intro-container > h1 {
  font-size: 1.6rem;
  text-transform: uppercase;
}

.lp-intro-container > p {
  font-size: 1.2rem;
}

@media (max-width: 1366px) {
  .lp-intro-container {
    width: 90%;
  }
  .lp-intro-container > p {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 1024px) {
  .lp-intro-container {
    width: 100%;
    margin-bottom: 1rem;
  }
  .lp-intro-container > p {
    margin-bottom: 0;
  }
}

/* === BUTTONS === */
.lp-btn-typ-1 {
  background-color: var(--lp-rot);
  border: var(--lp-border-style) var(--lp-rot);
  color: white;
  padding: 0.4rem 0.6rem;
  transition: var(--lp-border-transition);
}

.lp-btn-typ-1:hover {
  border: var(--lp-border-style) #fff;
  font-weight: normal;
}

.lp-btn-typ-2 {
  background-color: transparent;
  border: var(--lp-border-style) #fff;
  color: #fff;
  padding: 0.4rem 0.6rem;
  transition: color 0.5s ease-in-out, var(--lp-border-transition);
}

.lp-btn-typ-2:hover {
  color: var(--lp-rot);
  border: var(--lp-border-style) var(--lp-rot);
  font-weight: normal;
}

.lp-btn-typ-3 {
  background-color: transparent;
  border: var(--lp-border-style) var(--lp-rosa);
  color: var(--lp-rosa);
  font-size: 1rem;
  transition: var(--lp-border-transition);
}

.lp-btn-typ-3:hover {
  border: var(--lp-border-style) var(--lp-rot);
  font-weight: normal;
}

/* === BANNER (klein, auf Leistungen/Kontakt/Impressum) === */

#header-banner-klein {
  height: 0;
  padding-top: 15.625%;
  width: 100%;
  background: url(/img/Banner-Klein.png) no-repeat;
  background-size: contain;
}

/* === NEWSLETTER (Startseite + Catsitting) === */
#newsletter-sec {
  width: 100%;
  background-color: var(--lp-rosa);
  padding-top: 0;
  padding-bottom: 0;
}

#paragraph {
  color: white;
  font-size: 1.2rem;
}

.lp-newsletter-form {
  margin-top: 1.5rem;
  float: right;
  width: 100%;
  text-align: right;
}

#emailinput {
  width: 75%;
  height: 35px;
  border: var(--lp-border-style) #fff;
  padding: 0.4rem;
}

#newsletter-btn {
  height: 35px;
}

@media (max-width: 1863px) {
  #emailinput {
    width: 70%;
  }
}

@media (max-width: 1403px) {
  #emailinput {
    width: 65%;
  }
}

@media (max-width: 1386px) {
  #emailinput {
    width: 100%;
  }
  #newsletter-btn {
    width: 100%;
    margin-top: 0.5rem;
  }
  .lp-newsletter-form {
    margin-top: 0.3rem;
  }
}

@media (max-width: 1153px) {
  .lp-newsletter-form {
    margin-top: 1rem;
  }
}

@media (max-width: 1006px) {
  .lp-newsletter-form {
    margin-top: 1.5rem;
  }
}

@media (max-width: 768px) {
  #paragraph {
    display: none;
  }
  .lp-newsletter-form {
    margin-top: 0;
  }
  #newsletter-sec .lp-col-4 {
    display: none;
  }
}

@media (max-width: 480px) {
  #emailinput {
    width: 100%;
  }
  #newsletter-btn {
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* === GRID === */
.lp-container {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.lp-row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="lp-col-"] {
  float: left;
  min-height: 1px;
  padding: 0.8rem;
}

.lp-col-1 {
  width: 16.666%;
}

.lp-col-1-5 {
  width: 25%;
}
.lp-col-2 {
  width: 33.333%;
}
.lp-col-3 {
  width: 50%;
}
.lp-col-6 {
  width: 100%;
}
.lp-col-4 {
  width: 66.666%;
}

@media (max-width: 1024px) {
  .lp-col-1 {
    width: 33.333%;
  }
}

@media (max-width: 768px) {
  .lp-col-1 {
    width: 50%;
  }
  .lp-col-1-5 {
    width: 50%;
  }
  .lp-col-2 {
    width: 100%;
  }
  .lp-col-3 {
    width: 100%;
  }
  .lp-col-4 {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .lp-col-1 {
    width: 100%;
  }
  .lp-col-1-5 {
    width: 100%;
  }
  .lp-col-2 {
    width: 100%;
  }
  .lp-col-3 {
    width: 100%;
  }
  .lp-col-4 {
    width: 100%;
  }
}