/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

::selection {
  background-color: #C47505 !important;
  color:#fff !important;
}

#molina h2::after {
    content: 'DIE MÜHLE';
    background: #FCB900;
    color: #333;
    position: absolute;
    padding: 6px 6px 6px 8px;
    font-size: 10px;
    line-height: 10px;
    left: 50%;
    margin-left: -88px;
    top: 0;
    margin-top: 57px;
    font-weight: 600;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    -webkit-box-shadow: inset 8px 0px 10px -7px rgba(0,0,0,0.4); 
    box-shadow: inset 8px 0px 10px -7px rgba(0,0,0,0.4);
}

#move-down-link a {
  position: relative;
}

#move-down-link a::after {
  content: "";
    position: absolute;
    left: 50%;
    top: 100%; /* Startposition außerhalb des Buttons */
    margin-top:-16px;
    transform: translateX(-50%);
    
    /* Dreieck-Logik: Breite 22px, Höhe 16px */
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 16px solid #FCB900; /* Farbe des Pfeils */

    opacity: 1;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Kleiner Bounce-Effekt */
}

#move-down-link a:hover::after {
    margin-top:-1px;
}

.confetti {
    position: relative;
    padding-top:30px;
    padding-bottom:30px;
      > .particle {
        opacity:0;
        position: absolute;
        animation: confetti 2s ease-in infinite;
        &.c1 {
          background-color: rgba(255, 198, 45, 0.5);
        }
        &.c2 {
          background-color: rgba(202, 147, 0, 0.5);
        }
      }
    }

.confetti a:hover ~ .particle {
    visibility: visible;
}

@keyframes confetti {
  0% {
    opacity: 0;
    transform: translateY(0%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  35% {
    transform: translateY(-800%) rotate(270deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(2000%) rotate(1440deg);
  }
}


.molina-inline-logo {
  display: inline-block;
  background:#333;
  border-radius:4px;
  color:#fff;
  padding:1px 8px;
  margin-right:3px;
}

p a {
  text-underline-offset:4px;
}

figcaption {
    margin-top: -58px !important;
    position: absolute;
    background: #fff;
    width: 90%;
    margin-left: 5% !important;
    margin-right: 5% !important;
    padding: 7px 0;
    font-size: 16px;
    border-radius: 11px;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}

.gslide-image img {
  border-radius:20px;
}

#inner-footer::before {
  background: url(grunge-border-03-FEFCFA.png) left top repeat-x;
  position: absolute;
  left:0;
  top:0;
  height:153px;
  width:100%;
  content: '  ';
}

/* Der Button im Footer */
#kontakt-button {
    /* Animation: Name, Dauer (3s + 1s = 4s Zyklus), Art, Unendlich */
    animation: heartbeat-cycle 4s ease-in-out infinite;
    transform-origin: center; /* Wichtig, damit er aus der Mitte heraus wächst */
}

@keyframes heartbeat-cycle {
    /* 0% bis 75% (ca. 3 Sekunden): Stillstand */
    /* 0% bis 75% (3 Sekunden): Der Button ruht */
    0%, 75% {
        transform: scale(1);
    }
    
    /* Der eigentliche Doppelschlag (1 Sekunde) */
    80% {
        transform: scale(1.1); /* Erster Schlag */
    }
    85% {
        transform: scale(1);
    }
    90% {
        transform: scale(1.15); /* Zweiter, etwas stärkerer Schlag */
    }
    100% {
        transform: scale(1); /* Zurück zur Ruheposition */
    }
}

/* Optional: Animation stoppen, wenn der User mit der Maus drüberfährt */
#kontakt-button:hover {
    animation-play-state: paused;
    transform: scale(1.05); /* Dezentes Feedback beim Hover */
}


#datenschutz-content {
  padding-left:40px;
  padding-right:40px;
}

#datenschutz-content p {
  text-align: center;
}

#datenschutz-content ul {
  list-style: none;
}

#datenschutz-content ul li {
  padding-bottom:20px;
  text-align: center;
}

#main .ct-container-full {
  padding-top:0;
  padding-bottom:0;
}



/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------  RESPONSIVE STYLES  --------------------------------------- */
/* ------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------ */

@media only screen and ( max-width:998px ) {
  /* Auszublendende Elemente */
  /* Nav-Bar */           .ct-sticky-container { display:none; }
  /* Accordion Arrow */   .wp-block-stackable-accordion .wp-block-stackable-icon {  }

  #molina h2::after {
    /* MOLINA Banner */
    padding: 6px 6px 6px 8px;
    margin-left: -37px;
    top: 0;
    margin-top: -12px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-box-shadow: none; 
    box-shadow: none;
  }

  #portrait-column {
    /* Portrait Zelle (arbeitet mit BG-Image) */
    min-height: 800px;
    margin-bottom: 30px;
    margin-right: 1px !important;
  }

  #datenschutz-content {
    padding-left:20px;
    padding-right:20px;
  }

  #datenschutz-content h2 {
    font-size: 18px;
  }

  #datenschutz-content h3, #datenschutz-content h4 {
    font-size: 16px;
  }

  #datenschutz-content p {
    font-size:16px;
    text-align: center;
  }
}