/* ============================================================================
   GeneratePress Child Theme — cta.css
   Buttons, CTA Buttons (new naming schema), General Stripes, BLOCK CTA Jetzt Anfragen Home, .s5o-cta-half
   ============================================================================ */

/* Buttons
   ========================================================================== */
.s5o-btn-shape,
a.gb-button {
  align-items: center;
  border-radius: 5rem;
  hyphens: none;
}

.s5o-hero .s5o-btn-shape,
.s5o-hero a.gb-button {
  border-radius: 5rem;
  padding: 1rem 2rem;
  font-size: 1.5rem;
}

a.gb-button {
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
}

a.Hero-CTA .gb-shape svg {
  width: 2.5rem;
  height: 2.5rem;
}

a.gb-button.s5o-btn {
  background-color: var(--s5o-cta-primary);
  color: black;
}

a.gb-button.s5o-btn:hover {
  background-color: var(--s5o-brand-secondary);
  color: white;
}

/* CTA Buttons (New naming schema)
   ========================================================================== */
.s5o-wp-cta-btn {
  align-items: center;
  border-radius: 5rem;
  border: 6px solid transparent;
  hyphens: none;
  background-color: var(--s5o-cta-primary);
  color: black;
  padding: 0.5rem 2rem;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
}
.s5o-wp-cta-btn:hover {
  background-color: black;
  color: var(--s5o-cta-primary);
  border: 6px solid var(--s5o-cta-primary);
}
.s5o-wp-cta-btn .gb-shape {
  padding-left: 1rem;
}
.s5o-wp-cta-btn .gb-shape svg {
  height: 2rem;
}

/* General Stripes
   ========================================================================== */
.s5o-stripes-yb1 {
  background: repeating-linear-gradient(
    -45deg,
    var(--s5o-cta-primary),
    var(--s5o-cta-primary) 10px,
    black 10px,
    black 20px /* determines size */
  );
}

.s5o-stripes-options {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--s5o-surface-gold) 50%, transparent),
    /* COLMIG: was s5o-c-yellow-2 (#ffdf8188 Alpha) */
    color-mix(in srgb, var(--s5o-surface-gold) 50%, transparent) 10px,
    var(--s5o-surface-grey-light),
    /* COLMIG: was s5o-c-grey-bright-5 */ var(--s5o-surface-grey-light) 10px,
    /* COLMIG: was s5o-c-grey-bright-5 */ transparent 10px,
    transparent 20px
  );
}

/* BLOCK CTA Jetzt Anfragen / Home
   ========================================================================== */
.s5o-cta-color .cta-block-inner_img,
.tpgb-cta-banner .cta-block-inner {
  height: 250px;
}

.s5o-cta-bottom {
  font-size: 1.4rem;
  color: var(--s5o-dark-purple);
}
.s5o-cta-bottom .s5o-h2 {
  color: black;
}

/* CTA 
   ========================================================================== */
.s5o-cta {
  background-color: var(--s5o-bright-mint);
}

.s5o-cta__headline {
  font-family: var(--s5o-f-text-serif);
  font-weight: bold;
  font-size: 2rem;
  line-height: 3rem;
  margin-bottom: 1.5rem;
  hyphens: none;
}

.s5o-cta__claim {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.s5o-cta__rating {
  font-size: 1.0rem;
  margin-top: 1.5rem;
}

.s5o-cta ul {
  list-style: none;
  margin: 1rem 0 0 0;
  padding: 0;
  font-size: 1rem;
}

.s5o-cta ul li {
  padding-left: 1.25rem;
  position: relative;
  margin-bottom: 0.25rem;
}

.s5o-cta ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* CTA buttons */
.s5o-cta .wp-block-button .wp-block-button__link {
  width: 100%;
  font-size: 1.4rem;
  align-items: center;
  border-radius: 5rem;
  border: 6px solid transparent;
  hyphens: none;
  background-color: var(--s5o-cta-primary);
  color: black;
  padding: 1rem 2rem;
  margin: 0.5rem 0.25rem;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
}

.s5o-cta .wp-block-button .wp-block-button__link:hover {
  background-color: black;
  color: var(--s5o-cta-primary);
  border: 6px solid var(--s5o-cta-primary);
}

/* CTA Half
   ========================================================================== */
.s5o-cta-half {
  background-color: var(--s5o-bright-mint);
  color: black;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/* CTA Wide
   ========================================================================== */
.s5o-cta-wide {
  background-color: var(--s5o-signal-green);
  color: black;
  margin: 5rem auto;
  padding: 2rem 0;
}