/* -webkit-touch-callout ist ein iOS-Safari-Spezialfall

Existiert nur in WebKit auf iOS

Dient ursprünglich dazu, das „Callout“-Menü (Copy / Save Image etc.) zu steuern

Wird bis heute von iOS Safari unterstützt

Wird nicht von:

Chrome Android

Desktop Chrome

Firefox

Edge

Desktop Safari (teilweise!) zuverlässig unterstützt

- In der Praxis: starker iOS-Indikator
- Seit wann gibt es @supports?

@supports (CSS Feature Queries) gibt es seit:

iOS Safari 9.3 (2016)

Alles davor ist:

- steinalt
- sicher nicht mehr relevant
- sowieso inkompatibel mit modernem CSS (clamp, flex, etc.) 



Fazit (klar & endgültig)

Ja, @supports (-webkit-touch-callout: none) erwischt alle iOS-Safari-Versionen,
seit @supports existiert.

In deinem Setup ist das genau richtig eingesetzt.

Du hast damit einen stabilen, zukunftsfesten iOS-Zweig
*/



/* ======================================================
   Mobile Background – Default (Android, iOS 15+, Desktop Mobile)
   ====================================================== */

@media (max-width: 767px) {

    html, body {
        background-color: rgb(16, 121, 165);
    }


  body.fullimg-transpanels.Seite {
    background: none !important;
    background-image: none !important;
    position: relative;
  }

  /* body.fullimg-transpanels.Seite::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
      179deg,
      rgb(0, 80, 135) 0%,
      rgb(16, 121, 165) 100%
    ) !important;

    min-height: 120vh;

    will-change: transform;
    transform: translateZ(0);
  } */

  html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
      179deg,
      rgb(0, 80, 135) 0%,
      rgb(16, 121, 165) 100%
    );

    /* kein vh-Hack nötig */
    pointer-events: none;
  }

  /* body.fullimg-transpanels.Seite.band2-2::before,
  body.fullimg-transpanels.Seite.kontakt2::before {
    background-image: url(/wp-content/uploads/gaudihexen-background-2.jpg) !important;
    background-size: cover !important;
    background-position: center center !important;
  } */

 html.band2-2::before,
  html.kontakt2::before {
    background-image: url(/wp-content/uploads/gaudihexen-background-2.jpg);
    background-size: cover;
    background-position: center center;
  }
}


/* ======================================================
   iOS Safari Fallback (iPhone 12 / iOS 14.x)
   ====================================================== */

@supports (-webkit-touch-callout: none) {

  @media (max-width: 767px) {

    body.fullimg-transpanels.Seite::before {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;

      /* statt inset */
      height: 140vh;

      /* GPU-Layer explizit deaktivieren */
      transform: none;
      will-change: auto;
    }

  }
}







@media (max-width: 767px) {

    .fl-row[data-node] .fl-row-content-wrap 
    {
        padding-left: clamp(0.75rem, 3vw, 1.5rem) !important;
        padding-right: clamp(0.75rem, 3vw, 1.5rem) !important;
    }
    
  
    body .fl-page-content .fl-col.sat-col-panel .fl-col-content > .fl-module.sat-grid .fl-module.sat-flex 
    {
        padding-left: clamp(1rem, 4vw, 2.5rem) !important;
        padding-right: clamp(1rem, 4vw, 2.5rem) !important;
        padding-top: clamp(1.5rem, 5vw, 3rem) !important;
        padding-bottom: clamp(1.5rem, 5vw, 3rem) !important;
    }
  
    body .fl-page-content .fl-col.sat-col-panel .fl-col-content > .fl-module.sat-grid .fl-module.sat-flex .fl-module-rich-text
    {
        padding-left: clamp(1.2rem, 4.5vw, 2.6rem) !important;
        padding-right: clamp(1.2rem, 4.5vw, 2.6rem) !important;
    }


    body .fl-col.sat-col-panel:first-child
    {
        margin-top: 0px !important;
    }

    /* Start Kleine Korrekturen */
    
    body.media25 .fl-page-content .fl-col.sat-col-panel .fl-col-content > .fl-module.sat-grid .fl-module.sat-flex .fl-module-rich-text,
    body.veranstalter .fl-page-content .fl-col.sat-col-panel .fl-col-content > .fl-module.sat-grid .fl-module.sat-flex .fl-module-rich-text
    {
        padding-left: 0 !important;
    }

    /* Ende Kleine Korrekturen */


    h1,
    body .fl-module-heading.start-title h1.fl-heading,
    body .fl-page-content h1, 
    body .fl-page-content .fl-module-heading h1.fl-heading
    {
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
        line-height: 1.15 !important;
    }

    h2,
    body .fl-page-content h2, 
    body .fl-page-content .fl-module-heading h2.fl-heading
    {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    }

    body.Start p,
    body.Start .fl-page-content p, 
    body.Start .fl-page-content a
    {
        font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
        line-height: 1.55 !important;
    }

    h1, h2, h3, h4 
    {
        hyphens: auto;
        overflow-wrap: break-word;

    }
}



/* SOCIAL ICONS AUF MOBILE INS MENU   */


/* 
Dieses Beaver CSS ist hier zu neutralisieren / zu überschreiben:
@media (min-width: 993px) {
    .fl-node-3evndk9rm276 .fl-menu .menu > li {
        display: inline-block;
    }
} */

.mobile-social-list-item
{
    display: none !important;
}

.fl-menu-mobile-flyout .mobile-social-list-item {
  display: inline-block !important;
  animation: fadeIn 0.15s ease;
}

.fl-menu-mobile-flyout .mobile-social-div
{
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.mobile-social-link {
  font-size: 32px;
  color: #065f92;
  line-height: 1;
}

.mobile-social-link:hover {
  opacity: 0.85;
}

.mobile-social-link i {
  pointer-events: none;
}



@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}