/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

.single .inside-article {
  margin-top: 15rem !important;
}


#page.site {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
}

.header-wrap {
  z-index: 9999 !important;
}

#site-navigation.toggled,
.main-navigation.toggled {
  z-index: 9999 !important;
  background-color: var(--base-3, #F3EDE6) !important;
}


/* Navigation nur auf Startseite weiß */
.home .main-navigation a,
.home .menu-toggle {
    color: #F3EDE6 !important;
}
.home .main-navigation a:hover {
    color: #C29595 !important;
}

.home #site-navigation.toggled a,
.home #site-navigation.toggled .menu-toggle,
.home .main-navigation.toggled a,
.home .main-navigation.toggled .menu-toggle {
    color: #4A3A32 !important;
}
.home #site-navigation.toggled a:hover,
.home .main-navigation.toggled a:hover {
    color: #C29595 !important;
}


.moving-image {
    animation-duration: 3s;
    animation-name: slidein;
}

@keyframes slidein {
    from { margin-left: 100%; width: 100%; }
    to   { margin-left: 0;    width: 100%; }
}

.slide-from-left {
    margin-left: -100%;
    width: 100%;
    opacity: 0;
}

.slide-from-left.animate {
    animation-duration: 3s;
    animation-name: slideFromLeft;
    animation-fill-mode: forwards;
}

@keyframes slideFromLeft {
    from { margin-left: -100%; opacity: 0; }
    to   { margin-left: 0;     opacity: 1; }
}


.handwritten {
  font-family: 'Dancing Script', cursive;
  font-size: 3rem;
  transform: rotate(-7deg);
  display: inline-block;
  color: #C6A75E;
}

@media (max-width: 600px) {
  .handwritten { font-size: 2rem; }
}


@media (max-width: 1024px) {
  .bild-klein { display: none !important; }
}


.sticky-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.sticky-left {
    position: sticky;
    top: 120px;
    align-self: center;
}

@media (max-width: 1024px) {
    .sticky-grid-container {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .sticky-left {
        position: relative;
        top: 0;
        align-self: start;
    }
}