/* ============= CSS 1: Generelle styles global =============== */
    /* Google Fonts Import */
    @import url('https://fonts.googleapis.com/css2?family=Acme&family=Comic+Neue:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
    
    body {
      font-family: 'Poppins', sans-serif;
    }

    html {
    scroll-behavior: smooth;
    }

    /* Aktiver Nav-Link für ids highlighted */
    .nav-link {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav-link.active {
      color: #EB6227 !important;           /* kita-orange */
      position: relative;
    }
    .nav-link.active::after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      background-color: #EB6227;
    }
    .nav-white-long{
      background-image: url(assets/images/ui/nav-white-long.webp);
      background-size: 100% 100%;
    }
    .nav-white-medium{
      background-image: url(assets/images/ui/nav-white-medium.webp);
      background-size: 100% 100%;
    }
    .nav-white-short{
      background-image: url(assets/images/ui/nav-white-short.webp);
      background-size: 100% 100%;
    }

    .globe-icon{
      color:#342667
    }

    /* Hervorheben der Sektionen durch alternierende Hintergrundfarbe und style */
    .raised {
      background-color: #DADBF0;
      
      /* Mehrere Ebenen für natürlichen Schatten */
      box-shadow: 
       /* 0 5px 20px rgba(0, 0, 0, 0.25), */
       0 -2px 4px 0 rgba(229,229,250,0.6), 
       /*0 -2px 8px -6px rgba(125, 125, 255, 0.1), glow vom papier auf die darunter liegende ebene.*/
       0 1px 3px 1px rgba(0, 0, 0, 0.7),
        
       inset 0 2px 0 rgba(235,235,252,0.7), /* obere kante von section bg ist weiß, als würde licht auf Papier mit Dicke fallen*/
       inset 0 -2px 6px rgba(0,0,0,0.08),
       inset 0 4px 10px rgba(240, 240, 252, 0.6); /* obere kante von section wirft leichten glow auf div 'lowered' darunter*/

      position: relative;
      z-index: 20;
      background-image: url('assets/images/ui/seamless-paper-lp.webp');
      background-size: 30%;      
    }
    /* === Weicher unterer Schatten/Verlauf für alle .raised-Sektionen === */
    .raised::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 130px;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 60%,
        rgba(0, 0, 0, 0.12) 100%
      );
      pointer-events: none;
      z-index: 5;
      border-radius: inherit;
    }
    .hero {
      position:relative;
    }
    
    .lowered {
      background-color: #FCF7F3;
      position:relative;
      z-index: 10;
    }

        /* === Schatten vom Hero auf die folgende Section, nötig weil Hero niedrigeren index haben muss wegen positoin:fixed des hintergrundbildes "hero-bg" === */
    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;                  /* Höhe des Schattens – bei Bedarf anpassen */
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        transparent 100%
      );
      /*box-shadow: 0 -6px 3px 0px rgba(250, 250, 250, 0.1);*/
      pointer-events: none;          /* damit Klicks durchgehen */
      border-radius: inherit;        /* falls die Section abgerundete Ecken hat */
    }
    
    footer {
      position: relative;
    }

    h1, h2 {
      font-family: 'Acme', cursive;
    }
    
    .hero-title {
      font-family: 'Acme', cursive;
    }

    /* Buttons */
    .btn-purple {
      background-color: #342667;
      color: white;
      font-weight: 700;           /* macht die Schrift schön fett */
      padding: 1rem 1.5rem;
      border-radius: 1.5rem;
    }
    .btn-lightpurple {
      background-color: #DADBF0;
      color: #342667;
      border: 2px solid #342667;
    }
    .btn-orange {
      background-color: #EB6227;
      color: white;
    }
    .btn-lime {
      background-color: #D7CC1C;
      color: white;
    }
    .btn-lime:hover {
      background-color: #C7BC17;
      color: white;
    }
    .btn-pink {
      background-color: #EAAFD0;
      color: white;
    }
    .btn-babyblue {
      background-color: #8B9FD2;
      color: white;
    }

    .mailto {
      color:#EB6227;
    }
    .mailto:hover {
      text-decoration: underline;
    }

    /* =========== BUTTON BASE STYLES einheitlich (immer aktiv) ========= */
    .card-hover {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);   /* einheitlich */
    }

    .nav-link .btn-purple, .btn-lightpurple, .btn-orange, .btn-lime, .btn-pink, .btn-babyblue, footer a {
      transition: all 0.2s ease;   /* einheitlich */
    }

    /* Aktiver Zustand beim Tippen (visuelles Feedback bei touch Greräten, die Hover animationen nicht zulassen)*/
    .card-hover:active,
    .btn-purple:active,
    .btn-lightpurple:active,
    .btn-orange:active,
    .btn-lime:active,
    .btn-pink:active,
    .btn-babyblue:active {
      transform: scale(0.97);
      /*transition: transform 0.08s ease !important;*/
    }

    /* ===== CARD und BUTTONS HOVER – NUR DESKTOP ====== */
    /*Dieser Block unterdrückt hover animationen der buttons auf touch devices, damit die links funktionieren (andernfalls triggert
    tappen teilweise die Animation und ein zweites Mal tappen ist notwendig um den Link zu öffnen.*/
    @media (hover: hover) and (pointer: fine) {
      .nav-link:hover{
        color: #EB6227;
      }

      .card-hover:hover {
        transform: translateY(-12px) scale(1.03);
        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
      }
      
      .btn-orange:hover,
      .btn-lime:hover,
      .btn-pink:hover,
      .btn-babyblue:hover,
      .btn-purple:hover,
      .btn-lightpurple:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 15px -5px rgb(0 0 0 / 0.25);
      }

      .btn-lightpurple:hover {
        background-color: #342667;
        color: white;
      }  
      .btn-orange:hover {
        background-color: #C75220;
        color: white;
      }
      .btn-pink:hover {
        background-color: #db99c0;
        color: white;
      }
      .btn-babyblue:hover {
        background-color: #7b8ec0;
        color: white;
      }

      footer a:hover {
        color: #DADBF0;
      }
    }

    .pappkarte {
      position: relative;
      width: 100%;
      background-image: url('assets/images/ui/pappkarte-schatten.webp');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      aspect-ratio: 1 / 1;           /* ← Das ist der Schlüssel */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;              /* optional, aber empfohlen */
    }

    .pappkarte-content {
      margin-top: -5%;
      width: 55%;
      max-width: 55%;
      height: auto;
      border-radius: 24px;
      box-shadow: -2px 2px 3px 0px rgb(0 0 0 / 0.5);
    }

    /* Cookie Banner – Slide in from right */
    #cookie-banner {
      animation: slideInFromRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    @keyframes slideInFromRight {
      from {
        opacity: 0;
        transform: translateX(120px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }