/* custom.css - Layout */

/* Farbpalette */
:root {
    --wp--preset--color--hellblau: #1463B5;
}

body {
    font-family: 'Barlow', sans-serif;
    font-size: 21px;
    color: var(--white);
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.container-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


.container-small {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}


.full-width {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    padding: 25px 0 10px 0;
}
.full-width .row > * {
    padding-left: 0;
    padding-right: 0;
}


.show-mobile{
    display: none;
}


.has-hellblau-background-color {
    background-color: var(--wp--preset--color--hellblau);
}




.textlinear,
.block-hero h1,
.block-hero h2 {
  background-image: linear-gradient(to right, var(--yellow), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback */
  font-weight: 500 !important;
  font-size: 48px !important;
  line-height: 1.05;
  padding: 15px 0;
  hyphens: auto;
  /*text-align: justify;*/
}

.linearcore {
    background-image: linear-gradient(to right, var(--yellow), var(--red));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
}


/* HEADER */
.header {
    color: var(--blue);
}
.header-donate {
    position: absolute;
    bottom: -150px;
    right: 0;
    width: 140px;
}

/* MAIN */
main {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;

  background-image: url('../img/bg-logo.png'), url('../img/bg-smooth.jpg');
  background-repeat: no-repeat, no-repeat;
  
  background-position: right 500px, top left;
  
  background-size: 50%, auto;
  background-color: var(--darkblue); 

  padding-top: 80px;
}

/* FOOTER */
footer {
    color: var(--blue);
}
  
/* SPACING */
.wp-block-heading.linearcore + p.wp-block-paragraph {
    margin-top: 20px;
}


/* RESPONSIVE */
/* Mobile navigation basic */
@media (max-width: 1200px) {
    .full-width {
        padding: 25px 30px 10px 30px !important;
    }
}

/* Mobile navigation basic */
@media (max-width: 991px) {
    .show-mobile{
        display: block;
    }
    .header-donate {
        display: none;
    }
}



/*------------------------

    SCROLLING

-------------------------*/




/**
 * 1. Kapselung des Viewport-Overflows
 * Verhindert Phantom-Scrollbalken durch translateY-Versätze.
 * 'clip' erhält im Gegensatz zu 'overflow: hidden' natives 'position: sticky'.
 */
.site-main {
    overflow-x: clip;
}

/**
 * 2. Keyframes für den Initial Load der Hero-Section
 * GPU-optimiertes sanftes Aufsteigen und Einblenden
 */
@keyframes heroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * 3. Hero-Block Styling
 * Startet die dezente Animation unmittelbar beim Seitenaufruf
 */
.site-main section.block-hero {
    opacity: 0;
    animation: heroFadeUp 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

/**
 * 4. Scroll-Sektionen (Below-the-Fold)
 * Basis-Zustand vor Intersection
 */
.site-main section:not(.block-hero) {
    opacity: 0;
    transform: translateY(16px);
    transition: 
        opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1),
        transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/**
 * 5. Sichtbarer Zustand für Scroll-Sektionen
 */
.site-main section:not(.block-hero).is-visible {
    opacity: 1;
    transform: translateY(0);
}

/**
 * 6. Accessibility (WCAG / a11y)
 * Deaktivierung bei Bewegungssensibilität des Betriebssystems
 */
@media (prefers-reduced-motion: reduce) {
    .site-main section.block-hero {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .site-main section:not(.block-hero) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}