/*
Theme Name: GeneratePress Child
URI: https://my-blog-shop.de
Description: Ein GeneratePress Child Theme
Author: myblogshop
Author URI: https://my-blog-shop.de
Template: generatepress
Version: 1.0
*/

/*-------------------------------------------------------------
    Variablen
--------------------------------------------------------------*/

:root {
  --body-background: hsl(17deg 100% 97%);
  --footer-background: hsl(200, 100%, 79%);
  --main-font-size: 1.2rem;
  --smaller-font-size: 0.9rem;
  --smallest-font-size: 0.6rem;
  --line-height: 1.6em;
  --border-radius-small: 5px;
  --border-radius: 10px;
  --boxed-width: 1280px;
  --fullwidth-contained-wrapper: 1080px;
  --small-textbox: 700px;
  --main-font-color: #3e3e3e;
  --brand-color: #e24f0d;
  --brand-color-sec: #ffc000;
  --link-color: #e24f0d;
  --link-color-hover: #e24f0d;
  --font-family-prim: "Quicksand", sans-serif;
  --font-familiy-sec: "Quicksand", sans-serif;
  --grey-color: #cac9c9;
  --h1-font-size: 2em;
  --h2-font-size: 1.5em;
  --h3-font-size: 1.2em;
  --error-color: #cf0000;
  --font-weight-light: 300;
  --font-weight-standard: 400;
  --font-weight-semi: 600;
  --font-weight-bold: 700;
  --button-background: #e24f0d;
  --button-color: #ffffff;
  --transition-all: all 0.5s ease-in-out;
  --success-color: #21b01c;
  --top-nav-background: #ddd2e9;
  --full-width-background: hsl(277.73deg 51.32% 37.06% / 14%);
  --box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
}

/*--------------------------------------------------------------
    Allgemein
--------------------------------------------------------------*/

body {
  font-family: var(--font-family-prim);
  font-size: var(--main-font-size);
  color: var(--main-font-color);
  font-weight: var(--font-weight-standard);
  line-height: var(--line-height);
  background-color: var(--body-background);
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

iframe {
  width: 100%;
}

.site-info {
  background-color: var(--brand-color);
  color: #ffffff;
}

.boxed-page {
  max-width: 980px;
  margin: auto;
}

.site-content {
  background: #ffffff;
}

.grid {
  row-gap: 4em;
  column-gap: 2em;
}

.grid :nth-child(3) {
  order: 4;
}

.promo-img:not(:last-child) {
  margin-bottom: 2em;
}

.boxed {
  margin: 2em auto;
  max-width: var(--boxed-width);
  padding: 2em;
}

.full-width-banner {
  text-align: center;
  background-color: var(--full-width-background);
  padding: 2em 1em;
}

.full-width-banner p:last-of-type {
  margin-bottom: 0;
}

.footer-widgets {
  background-color: var(--footer-background);
}

.page-hero {
  background-color: var(--brand-color);
}

.intro {
  font-size: var(--h3-font-size);
  margin: 2em 0 3em 0;
}

.inside-header {
  padding-bottom: 0;
}

input[type="button"] {
  border-radius: var(--border-radius-small);
}

.infobox {
  max-width: var(--small-textbox);
  margin: 4em auto;
  border: 4px solid var(--link-color);
  border-radius: var(--border-radius);
  padding: 2em;
  box-shadow: var(--box-shadow);
}

.infobox p:first-child,
.infobox p:last-child,
.infobox p:first-child + p {
  text-align: center;
}

.infobox p:last-child {
  margin-bottom: 0;
}

.home .page-hero {
  background-image: url("https://sexuelle-entwicklung.de/wp-content/uploads/anne-2.png"), url("img/pattern-4.svg");
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  background-size: contain, 20px;
}

.entry-content img {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.site-header {
  background-color: #ffffff;
}

/*--------------------------------------------------------------
    Links & Buttons
--------------------------------------------------------------*/

a,
a:hover {
  color: var(--main-font-color);
  transition: var(--transition-all);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: var(--brand-color);
  color: var(-button-color);
  border: 1px solid transparent;
  transition: var(--transition-all);
}

input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  opacity: 0.8;
}

.button,
.button:hover {
  border: 1px solid var(--brand-color);
  background-color: var(--brand-color);
  border-radius: var(--border-radius-small);
  padding: 0.5em 1em;
  color: var(--button-color);
  font-weight: var(--font-weight-bold);
  transition: var(--transition-all);
}

.button:hover {
  opacity: 0.8;
}

.footer-widgets a,
.footer-widgets a:hover,
.main-navigation .main-nav ul li a:hover,
.button,
.button:hover,
.site-info a,
.site-info a:hover {
  text-decoration: none;
}

.site-info a,
.site-info a:hover {
  color: #ffffff;
}

.footer-widgets a,
.footer-widgets a:hover {
  color: var(--main-font-color);
}

.home.separate-containers .site-main {
  margin-top: 0;
}

/*--------------------------------------------------------------
    Navigation
--------------------------------------------------------------*/

.main-navigation {
  background-color: #ffffff;
  border-bottom: none;
}

.main-navigation .main-nav ul li a {
  color: var(--main-font-color);
  font-size: var(--smaller-font-size);
  font-weight: var(--font-weight-standard);
  text-transform: uppercase;
  padding-left: 10px;
  padding-right: 10px;
}

.main-navigation .main-nav ul li a:hover {
  color: var(--brand-color);
}

.main-navigation ul ul {
  background-color: var(--white-color);
  border-top: 1px solid var(--brand-color);
  width: 250px;
  white-space: nowrap;
  padding-right: 10px;
  box-shadow: var(--box-shadow);
}

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .menu-bar-item > a {
  font-weight: 600;
}

.main-navigation .menu-bar-item > a:hover {
  text-decoration: none;
  color: var(--brand-color);
}

.icon-home::before {
  content: url("img/icon-home.svg");
  position: relative;
  top: 0;
}

.has-menu-bar-items button.menu-toggle {
  color: var(--main-font-color);
}

/*--------------------------------------------------------------
    Typographie
--------------------------------------------------------------*/

h1 {
  color: var(--brand-color);
  font-size: var(--h1-font-size);
}

h2 {
  color: var(--brand-color);
  font-size: var(--h2-font-size);
}

h3 {
  font-size: var(--h3-font-size);
  color: var(--brand-color);
}

.page-hero h1 {
  color: #ffffff;
  padding: 1.5em 1em;
  text-transform: uppercase;
}

.page-hero p {
  color: #ffffff;
  font-weight: var(--font-weight-bold);
  padding-bottom: 3em;
  margin-top: -2.5em;
}

/*--------------------------------------------------------------
    Contact Form 7
--------------------------------------------------------------*/

.wpcf7 form .wpcf7-response-output {
  margin: 1em 0;
  padding: 1em;
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--smaller-font-size);
}

.wpcf7 form.invalid .wpcf7-response-output {
  color: var(--error-color);
  border: 1px solid var(--error-color);
}

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--grey-color);
  width: 100%;
}

.wpcf7-not-valid {
  border: 1px solid var(--error-color);
}

.wpcf7-not-valid-tip {
  font-weight: var(--font-weight-bold);
  font-size: var(--smaller-font-size);
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
  border: 1px solid var(--error-color);
  color: var(--error-color);
}

div.wpcf7-mail-sent-ok {
  border: 1px solid var(--success-color);
  color: var(--success-color);
}

.site-content div.wpcf7 {
  overflow: inherit;
}

input[type="text"].wpcf7-not-valid,
input[type="email"].wpcf7-not-valid,
textarea.wpcf7-not-valid {
  border-color: var(--error-color);
  border-left: 4px solid var(--error-color);
}

.cf7-privacy {
  font-size: var(--smaller-font-size);
}

.required {
  font-weight: var(--font-weight-bold);
  color: var(--error-color);
}

/*--------------------------------------------------------------
    Newsletter
--------------------------------------------------------------*/

div.tnp-subscription,
div.tnp-profile,
form.tnp-subscription,
form.tnp-profile {
  margin-left: 0;
}

.tnp-subscription input.tnp-submit,
.tnp-profile input.tnp-submit {
  background-color: var(--brand-color);
  border-radius: var(--border-radius);
}

.newsletter-message {
  text-align: center;
  font-weight: var(--font-weight-bold);
  border-radius: var(--border-radius);
  background-color: var(--grey-color);
  padding: 1em;
}

.newsletter-message *:last-of-type {
  margin-bottom: 0;
}

.newsletter-welcome,
.newsletter-restore {
  color: var(--success-color);
  background-color: hsl(117.97deg 72.55% 40% / 17%);
}

.newsletter-unsubscribe {
  color: var(--error-color);
  background-color: hsl(0deg 100% 40.59% / 11%);
}

.newsletter-wrapper {
  margin: 4em auto;
  border: 4px solid var(--link-color);
  border-radius: var(--border-radius);
  padding: 2em;
  box-shadow: var(--box-shadow);
}

.newsletter-wrapper div.tnp-subscription {
  margin: auto;
}

.boxzilla-center-container .boxzilla {
  border-radius: var(--border-radius);
}

/*--------------------------------------------------------------
    Events Calendar
--------------------------------------------------------------*/

.boxed-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px;
}

.event-container h2 {
  text-align: center;
  color: #5b0669;
}

.woo-booking a,
.woo-booking a:visited {
  color: #fff;
  font-weight: bold;
  border: 2px solid #5b0669;
  border-radius: 4px;
  box-shadow: none;
  transition: all 0.21s ease;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #5b0669;
  padding: 0 28px;
  margin-bottom: 20px;
  cursor: pointer;
  line-height: 40px;
  height: 42px;
  display: inline-block;
}

.woo-booking a:hover {
  background: #79088c;
  border-color: #79088c;
  color: #fff;
}

/*--------------------------------------------------------------
    Woocommerce
--------------------------------------------------------------*/

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce button.button.alt {
  color: #ffffff;
  font-weight: bold;
  border: 2px solid var(--brand-color);
  border-radius: 4px;
  box-shadow: none;
  transition: all 0.21s ease;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: var(--brand-color);
  margin-bottom: 20px;
  cursor: pointer;
}

.woocommerce button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--brand-color);
  border-color: var(--brand-color);
  color: #ffffff;
  opacity: 0.8;
}

.site-content .woocommerce-error li::before {
  content: "";
  width: 0;
  margin-left: 0;
  padding-left: 0;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--main-font-color);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--main-font-color);
  cursor: text;
}

.woocommerce div.product .product_title {
  margin-bottom: 1em;
}

#order_review_heading {
  float: left;
}

#order_review .wc-gzd-checkbox-placeholder p.form-row label {
  display: block;
  line-height: 1.5em;
  text-align: center;
  font-size: var(--smaller-font-size);
}

.wc-gzd-checkbox-placeholder-legal a,
.wc-gzd-checkbox-placeholder-legal a:hover {
  text-decoration: none;
  color: var(--main-font-color);
  font-weight: 600;
}

#alg_checkout_files_upload_form_1 label {
  font-weight: var(--font-weight-bold);
  font-size: var(--smaller-font-size);
}

#alg_checkout_files_upload_form_1 table tr:first-of-type td {
  text-align: center;
  line-height: 1.2em;
}

.return-to-shop {
  display: none;
}

.mobile-bar-items.wc-mobile-cart-items:not(.has-items),
.main-navigation .wc-menu-item:not(.has-items) {
  display: none;
}

/*--------------------------------------------------------------
    Irrsinn!!
--------------------------------------------------------------*/

.page-id-3254 .page-hero {
  background-color: #e24f0d;
}

.page-id-3258 .page-hero {
  background-color: #b2087b;
}

.page-id-77 .page-hero {
  background-color: #6b2e8f;
}

.page-id-3256 .page-hero {
  background-color: #00b5ff;
}

.page-id-56 .page-hero {
  background-color: #00b442;
}

.page-id-2858 .page-hero {
  background-color: #ffc000;
}

.page-id-3254 .page-hero h1,
.page-id-3258 .page-hero h1,
.page-id-3256 .page-hero h1,
.page-id-56 .page-hero h1,
.page-id-77 .page-hero h1,
.page-id-3254 .page-hero p,
.page-id-3258 .page-hero p,
.page-id-3256 .page-hero p,
.page-id-56 .page-hero p,
.page-id-77 .page-hero p {
  color: #ffffff;
}

/*--------------------------------------------------------------
    Media Queries
--------------------------------------------------------------*/

@media (min-width: 768px) {
  .home .page-hero {
    background-size: contain, 30px;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 3em 0;
    align-items: center;
  }
}

/*--------------------------------------------------------------
    Fonts
--------------------------------------------------------------*/

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("fonts/quicksand-v22-latin-regular.woff2") format("woff2"), url("fonts/quicksand-v22-latin-regular.woff") format("woff");
}

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 600;
  src: local(""), url("fonts/quicksand-v22-latin-600.woff2") format("woff2"), url("fonts/quicksand-v22-latin-600.woff") format("woff");
}

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("fonts/quicksand-v22-latin-700.woff2") format("woff2"), url("fonts/quicksand-v22-latin-700.woff") format("woff");
}