/*==================================================================================================== 
    START ==> INITIAL CSS RESET
==================================================================================================== */
/*  Use a more-intuitive box-sizing model. */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* outline: 2px solid lime; <== to identify all sizes*/
    /* background: hsl(0 100% 50% / 0.1 <== to identify Layering*/
}

/* Remove default margin & padding*/
* {
    margin: 0;
    padding: 0;
}

/* Typographic tweaks (Add accessible line-height)*/
body {
    line-height: 1.5;
}

/* Improve media defaults*/
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Remove built-in form typography styles (Überall Standard font nutzen)*/
input,
button,
textarea,
select {
    font: inherit;
}

/* Avoid text overflows (Zu Lange Wörter werden nun umgebrochen (may change for Headline's to normal, if needed))*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    margin: 0;
}

/*==================================================================================================== 
    END ==> *
==================================================================================================== */

/*==================================================================================================== 
    START ==> GLOBAL
==================================================================================================== */
/*============================================================ 
    GLOBAL ==> BASIC ELEMENTS
============================================================ */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--clrBaseBright);
    color: var(--clrBaseDark);
    font-family: var(--fontFamilyDefault);
    font-size: var(--fsDesktopDefault);
}

h1,
h2,
h3,
h4 {
    font-family: var(--fontFamilyHeadlines);
    text-align: center;
}

h1 {
    font-size: var(--fsDesktopH1);
    font-weight: 900;
}

h2 {
    font-size: var(--fsDesktopH2);
    font-weight: 900;
}

h3 {
    font-size: var(--fsDesktopH3);
}

h4 {
    font-size: var(--fsDesktopH4);
}


@media (max-width: 1260px) {
    h1 {
        font-size: 90px;
        font-weight: 900;
    }
}

@media (max-width: 1023px) {
    body {
        font-size: var(--fsMobileDefault);
    }
    
    h1 {
        font-size: var(--fsMobileH1);
        font-weight: 900;
    }
    
    h2 {
        font-size: var(--fsMobileH2);
        font-weight: 900;
    }
    
    h3 {
        font-size: var(--fsMobileH3);
    }
    
    h4 {
        font-size: var(--fsMobileH4);
    }
}

.slide-top {
	-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-3-24 6:2:19
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
 @-webkit-keyframes slide-top {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
    }
  }
  @keyframes slide-top {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
    }
  }