@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins');


h1 {font-size: 4.2rem; /* 67.36px */}
h2 {font-size: 3.1rem; /* 50.56px */}
h3 {font-size: 2.3rem; /* 37.92px */}
h4 {font-size: 1.5rem; /* 28.48px */}
h5 {font-size: 1.2rem; /* 21.28px */}
p {font-size: 1rem; /* 16px */}
small {font-size: 0.750rem; /* 12px */}

@media only screen and (max-width: 768px) {
    h1 {font-size: 2.105rem; }
    h2 {font-size: 1.8rem; }
    h3 {font-size: 1.4rem; }                
    h4 {font-size: 1.2rem; }       
    h5 {font-size: 1rem; }
    p {font-size: 0.8rem; /* 16px */}
    small {font-size: 0.375rem; }

    .content-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    }

    .content-card img {
    width: 100%;
    max-width: 500px;
    }
}

html {
    scroll-behavior: auto;  
    overflow-x: hidden;   
    cursor: none;
}

/* Optional: auch auf Links/Buttons */
a, button, input, textarea, select, label {
  cursor: none;
}


*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
}
*, *::before, *::after { box-sizing: border-box; }

:root[data-theme="light"] {
--text: rgb(1, 5, 9);
--background: rgb(238, 240, 247);
--background2: rgb(218, 220, 227);
--primary: rgb(21, 171, 197);
--secondary: rgb(238, 50, 143);
--accent: rgb(255, 106, 15); 
}

:root[data-theme="dark"] {
--text: rgb(246, 250, 254);
--background: rgb(23, 27, 46);
--background2: rgb(7, 7, 17);
--primary: rgb(25, 177, 247);
--secondary: rgb(230, 34, 135);
--accent: rgb(238, 10, 2);
}

body {
    color: var(--text);
    background-color: var(--background);
}

.loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--background, #111);
  z-index: 9999;
}

/* loading screen */

  .spinner {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: rgba(255,255,255,0.9);
    animation: spin 0.9s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* Ausblend-Animation */
  .loader.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }