/* Stable viewport height (prevents mobile UI bar jump) */
:root {
    --app-height: 100vh; /* fallback */
    --app-height-large: 100vh; /* fallback for large viewport */
}
  
/* Modern browsers */
@supports (height: 100svh) {
    :root {
        --app-height: 100svh; /* small viewport height – stable, content stays visible */
        --app-height-large: 100lvh; /* large viewport height – covers full area when browser UI hides */
    }
}
  
/* Global typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Blurred background overlay when mobile nav is open */
body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.35); /* dark tint */
    z-index: 9998;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
h1 {
    font-size: 70px;
}
h2 {
    font-size: 50px;
}

/* Header (desktop/default) */
.navbar {
    padding: 25px 0 2px;
    z-index: 1;
}

.navbar .navbar-nav {
    position: relative;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    align-items: center;
    gap: 0.27rem;
    border: 1px solid;
}

/* base */
.navbar .nav-link {
    position: relative;
    z-index: 2;
    color: #000;
    font-weight: 700;
    font-size: .95rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    transition: color .25s ease;
}

/* indicator should not capture pointer */
.navbar .nav-indicator { pointer-events: none; }

/* default: active is white */
.navbar .navbar-nav .nav-link.active{
  color:#fff;
}

/* hovered item link is white */
.navbar .navbar-nav .nav-item.is-hovered > .nav-link{
  color:#fff;
}

/* if hovering any item that is NOT active, force active back to black */
.navbar .navbar-nav:has(.nav-item.is-hovered) .nav-link.active{
  color:#000;
}

/* but if the hovered item IS the active item, keep it white */
.navbar .navbar-nav:has(.nav-item.is-hovered) .nav-item.is-hovered > .nav-link.active{
  color:#fff;
}

/* the moving pill */
.navbar .nav-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(0,0,0,.92);
    border-radius: 999px;
    transition:
        left .45s cubic-bezier(.16,1,.3,1),
        width .45s cubic-bezier(.16,1,.3,1);
    z-index: 1;
    animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.navbar a.nav-link.active:last-child,
.navbar .nav-item .nav-link:last-child {
    margin-right: 2px;
}
.statistics-nav .nav-link, .statistics-pills-wrapper .navbar-nav a.nav-link.active:last-child {
    margin-right: -1px;
}
/* no animation/transition when we set the initial position */
.navbar .nav-indicator.no-anim {
    transition: none !important;
    animation: none !important;
  }
/* Navbar above everything */
.pp-navbar, .navbar {
    position: fixed;
    z-index: 10000 !important;
}
.navbar-brand img {
    height: 90px;
    width: auto;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 1));
}
/* on scroll - smooth transitions */
/* .pp-navbar,
.pp-navbar .navbar-brand img {
    transition: padding .25s ease, background-color .25s ease;
    animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
} */
.pp-navbar.is-scrolled {
    /* padding: 0; */
    background: transparent;
    /* -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px); */
}
/* shrink logo */
/* .pp-navbar.is-scrolled .navbar-brand img {
    height: 40px;
    transform: translateY(-2px);
} */



/* QUOTE  */
section.live .card,
section.quote-section .card {
    background: rgba(0, 0, 0, 0.9);
    border-radius: 25px;
}
section.live .card {
    display: inline-block;
}
section.quote-section .card {
    max-height: 76vh;
}

.experiences-card h3 {
    font-size: 18px;
}
.experiences-card p {
    line-height: 1.2;
}
.experiences-title {
    /* Animation entfernt: Titel direkt sichtbar */
    opacity: 1;
    transform: none;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0;
    color: #000;
    padding-bottom: 5px;
    overflow: hidden;
}
.experiences-section h1.experiences-title:last-child {
    padding-bottom: 40px;
}
/* .experiences-card {
    opacity: 0;
} */
.experiences-button {
    opacity: 0;
    transform: translateY(20px);
    border-radius: 50px;
}






/* ============================================
   PARALLAX SCENE STACK (BOUNDED + STICKY WORKS)
   ============================================ */

.pp-site {
    position: relative;
    min-height: 100vh;
}
  /* .pp-scene-wrap{
    overflow: hidden;
  } */
/* IMPORTANT: no overflow hidden here -> allows sticky to work */
.pp-scene-stack {
    position: absolute;
    inset: 0;                  /* fill ONLY the wrap */
    z-index: 0;
    pointer-events: none;
    transform-style: preserve-3d;
}
  /* sticky viewport that behaves like fixed but ends with wrap */
.pp-scene-fixed {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;          /* move overflow hidden HERE */
    z-index: 0;
}
  /* scenes fill sticky viewport */
.pp-scene,
.pp-scene-projects,
.pp-scene-quote,
.pp-scene-team,
.pp-scene-faq,
.pp-scene-experiences {
    position: absolute;
    inset: 0;
}
.pp-scene-bg,
.pp-bg-quote,
.pp-bg-stat,
.pp-bg-faq,
.pp-bg-experiences {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: center / cover no-repeat;
    opacity: 0;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* hero/live stacking */
/* .pp-scene-hero { z-index: 2; }
.pp-scene-live { z-index: 1; } */
/* team defaults */
.pp-bg-team {
    background: #000;
    background-size: cover !important;
    background-size: 90vh !important;
    background-repeat: no-repeat !important;
    /* background-position: calc(80% - 50px) calc(20% + 70px); */
    background-position: bottom center;
}
.pp-bg-team::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(14, 14, 14, 0) 40%,
        rgba(14, 14, 14, 0.35) 100%
    );
    pointer-events: none;
}
/* everything inside wrap (content) sits ABOVE the background stack */
.pp-scene-wrap > *:not(.pp-scene-stack){
    position: relative;
    z-index: 2;
    overflow: hidden;
}
/* keep your sections above and transparent */
.pp-hero,
.live,
.statistics-section,
.quote-section,
.team-section,
.faq-section,
.experiences-section,
.pp-content{
    position: relative;
    z-index: 2;
    background: transparent;
}
section.content-section#blog-overview-blog {
    background: #fff;
}

  
  




/* FOOTER */

footer.footer .legal-text a,
footer.footer .social-links a {
    margin-right: 5px;
    text-decoration: none;
}
footer.footer .social-links {
    margin: 8px 0 0 0;
}
footer.footer .social-links a i.bi,
.footer-brand__name,
.footer-brand__by {
    font-size: 18px;
}
.footer-inner a {
    color: #fff;
}
footer.footer .newsletter .newsletter-text {
    font-weight: 500;
}
footer .newsletter {
    max-width: 260px;
}
footer.footer {
    position: relative;
    overflow: hidden;
    padding: 40px 0 0;
    color: #fff;
    font-weight: 100;
    background: rgba(0,0,0,0.95);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 45vh;
}
.footer-inner {
    min-height: 500px;
}
.footer-brand {
  margin-bottom: 20px;
  line-height: 1.45;
}
/* footer is outside wrap, always above */
footer.footer {
    position: relative;
    z-index: 5;
}
/* If you want it slightly smaller on mobile */
@media (max-width: 575.98px) {
  .footer-brand__name,
  .footer-brand__by{
    font-size: 22px;
  }
}

.pp-hero--subpage .pp-hero__intro.is-gsap-controlled {
    animation: none !important;
    transition: none !important;
}
  
@media (max-height: 800px) {
    /* .experiences-card .content .text-content {
        height: 18vh !important;
    } */
    /* .footer {
      min-height: 70vh !important;
    } */
}

  /* .footer--has-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0.55);
    z-index: 0;
    pointer-events:none;
  } */

.newsletter-form .form-control{
    background: rgb(255,255,255);
    color: #000;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 8px 44px 8px 18px;
    border: none;
    border-radius: 50px;
    padding: 6px 30px;
}

.newsletter-form .form-control::placeholder{
    color: #000;
}

footer .footer-headline {
    position: relative;
    z-index: 1; /* behind container (z=2) but above background */
    width: 100%;
    margin: 0;
    padding: 0;
    white-space: nowrap;

    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.78;

    /* make it huge + responsive like screenshot */
    font-size: 32vw;
    /* font-size: clamp(96px, 30vw, 500px); */
    font-size: clamp(96px, 32vw, 500px);

    /* anchor to bottom and center */
    position: absolute;
    bottom: -80px;
    bottom: clamp(-100px, -6.5vw, -20px);

    text-align: center;

    color: #fff;
    pointer-events: none;
    user-select: none;
}
.social-links a[aria-label="google"] {
    margin-top: 3px;
}
.social-links a[aria-label="facebook"] {
    font-size: 18px;
}
.pp-email-btn .pp-arrow{
    width: 25px;
    height: 25px;
    display: block;
}

  

   


/* ============================================
   Subpage Hero Styles
============================================ */

/* Subpages: stable small viewport height (no jump when browser UI hides) */
.content-hero,
.pp-hero {
  min-height: var(--app-height);
  height: var(--app-height);
}

/* Home: large viewport height so background covers full screen when browser UI hides */
.pp-hero--home {
  min-height: var(--app-height-large, 100vh);
  height: var(--app-height-large, 100vh);
}

.pp-scene-fixed {
  height: var(--app-height-large, 100vh);
}

/* Entry Animations */
.content-hero__title,
.pp-hero__title {
    animation: fadeRevealRight 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.content-hero__intro,
.pp-hero__intro {
    animation: fadeRevealRight 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

@keyframes fadeRevealRight {
    from {
      opacity: 0;
      clip-path: inset(0 100% 0 0);
    }
    to {
      opacity: 1;
      clip-path: inset(0 0 0 0);
    }
}



/* --------------------------------------------------
   HERO GRADIENT OVERLAY (light → dark)
-------------------------------------------------- */

/* Required so overlay positions correctly */
/* Ensure heroes can host overlay */
.content-hero,
.pp-hero {
  position: relative;
  overflow: hidden;
}

/* Make sure background images sit below overlay */
.content-hero__bg {
  position: relative;
  z-index: 0;
}

/* Gradient overlay */

.content-hero::after,
.pp-hero.pp-hero--subpage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    15deg, 
    rgba(0, 0, 0, 0.65) 0%, 
    rgba(0, 0, 0, 0.45) 10%, 
    rgba(0, 0, 0, 0.15) 60%, 
    rgba(0, 0, 0, 0.0) 100%
    );
}





/* iOS Safari smart links */
a[x-apple-data-detectors],
a[href^="tel"],
a[href^="mailto"] {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit !important;
}