* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  color: #111;
  background: #f68e6d; /* dein roter BG */
  overflow-x: hidden;
}

/* Intro/Loading: liegt über allem und füllt den Viewport */
.loadinganimation-section {
  position: fixed; /* <— wichtig: fixed, damit Landingpage darunter liegt */

  height: 100dvh;
  background: #fff; /* Weißer Intro-Screen */
  z-index: 100;
  will-change: transform;
  transform: translateY(0); /* Start fully covering the page */
  overflow: hidden;
  /* webflow */
  inset: 0;
  will-change: transform;
  transform: translateY(0); /* Start fully covering the page */
}

/* Zentrale Bühne – exakt Viewportmitte */
#stage {
  position: fixed; /* bleibt in der Mitte, unabhängig vom Scroll */
  left: 50%;
  top: 50%;

  width: 0;
  height: 0; /* wir arbeiten relativ zur Mitte */
  z-index: 110;

  /* webflow */
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Logo-Wrapper: nur diese bewegen (per transform) */
#logoL,
#logoR {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  /* webflow */
  transform: translate(-50%, -50%); /* Mittelpunkt = Stage-Mitte */
  will-change: transform, opacity;
}

/* --- Anti-Flicker: initial unsichtbar, bis GSAP übernimmt --- */
#logoL,
#logoR,
#textLayer {
  visibility: hidden;
  opacity: 0;
}

/* Logo-Typo */
.logo-left,
.logo-right {
  font-size: 28px;
  line-height: 1;
  font-weight: 700;

  /* webflow */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.logo-left {
  font-weight: 400;
}

/* Text-Layer: absolut zentriert, Headlines übereinander */
#textLayer {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;

  transform: translate(-50%, -50%);
}
#textLayer .t {
  position: absolute;
  left: 50%;
  top: 50%;

  margin: 0;
  font-size: 174px;
  line-height: 0.8;
  font-weight: 600;
  opacity: 0; /* Start: unsichtbar */
  /* webflow */
  transform: translate(-50%, -50%);
  white-space: nowrap;
  visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Optional: deine Landingpage darunter */
.landing-page {
  min-height: 100vh; /* nur Demo – damit man was darunter sieht */
  display: grid;
  place-items: center;
  color: #000;
  padding: 8rem 2rem;
}