/* ===================================================================================== */
/* ===================================================================================== */
/* ===================================================================================== */
/*   A L L E   M O N I T O R G R Ö S S E N   B Z W .   D E S K T O P   */

/* NAVBAR REPARIEREN 

   Am wichtigsten: Logo soll die Höhe der Menubar nicht hochdrücken. Daher die height des img clampen
*/

.fl-page #navbar-row 
{
    height: inherit;
    min-height: var(--ot-desktop-navbar-hoehe-px);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fl-page #navbar-row > .fl-row-content-wrap
{
    width: 100%;
}

.navbar-row-logo-photo .fl-photo-content, .navbar-row-logo-photo .fl-photo-img {
    width: inherit !important;
    height: inherit !important;
}
.navbar-row-logo-photo .fl-photo-img 
{
    height: clamp(64px, 7vw, 72px) !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: 4px;
}



/* BACKGROUNDS */

body.fullimg-transpanels 
{
    background-color: transparent !important; 
}


body.Band26,
body.Kontakt26
{
    background-image: url(/wp-content/uploads/ags-background-scaled.jpg) !important;
    background-position: center center !important;
}



/* ===================================================================================== */
/* ===================================================================================== */
/* ===================================================================================== */
/*   M O B I L E   E  B E N E    */


/* 
=====================================================================================
IOS SAFARI INDIKATOR -webkit-touch-callout

-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


=====================================================================================

SUPPORT FÜR @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.) 




=====================================================================================

WORTRENNUNGEN

Erprobt und für gut befunden:

h1, h2, h3, h4  {
  
  overflow-wrap: normal;
  text-wrap: balance;

  hyphens: manual; 
}

- overflow-wrap: normal
keine Notfall-Zerstückelung
Wörter dürfen nur an natürlichen Grenzen umbrechen
keine „Mis / sion“-Effekte

- text-wrap: balance
Browser versucht, die Zeilen gleichmäßig zu füllen
vermeidet: extrem kurze zweite Zeilen
Ein-Wort-Zeilen
dadurch weniger Druck, überhaupt trennen zu müssen

- hyphens: manual
keine automatische Trennung
aber: Browser dürfte trennen, wenn Designer es per ­ anbietet 


*/



/* ======================================================
   Mobile Background
   ====================================================== */

  /* html
  {
      background-color: rgb(236 160 126) !important;
  } */

  /* body.Kontakt26,
  body.Band26,
  body.Start26   
  {
      background-color: #da9385 !important;
  }   */

@media (max-width: 767px) {

  html
  {
      background-color: #da9385 !important;
  }

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

  html::before {
    content: "";
    position: fixed;
    top:0;left:0;
    width: 100%;
    height: 100vh;
    height: 100lvh;  /* Override für Safari 15.4+ */
    z-index: -1;

    background: linear-gradient(179deg, rgb(174 116 152) 0%, rgb(236 160 126) 100%);

    pointer-events: none;
  }

  /* body.Band26,
  body.Kontakt26,
  body.fullimg-transpanels.band, 
  body.fullimg-transpanels.band2
  {
      background-image: none !important;
  } */


html[data-page="band"]::before,
html[data-page="kontakt"]::before {
    background-image: url(/wp-content/uploads/ags-background-scaled.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::before 
    {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;

      height: 140vh;

      transform: none;
      will-change: auto;
    }
  }
} */







@media (max-width: 767px) {

      .sat-grid.fl-module-box {
        margin-top: 20px;
    }

    .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;
    }

    .fl-page-content .fl-module-heading > .fl-module-content,
    .fl-page-content .fl-module-rich-text > .fl-module-content 
    {
      text-align: center;
    }
    body.Veranstalter26 .fl-page-content .fl-module-heading > .fl-module-content,
    body.Veranstalter26 .fl-page-content .fl-module-rich-text > .fl-module-content, 
    body.Media26 .fl-page-content .fl-module-heading > .fl-module-content,
    body.Media26 .fl-page-content .fl-module-rich-text > .fl-module-content 
    {
      text-align: left;
    }

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




    /* Fließtext */
    .fl-page-content p,
    .fl-page-content a {
        font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
        line-height: 1.55 !important;
    }

    /* h1 */
    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 */
    h2,
    body .fl-page-content h2,
    body .fl-page-content .fl-module-heading h2.fl-heading {
        font-size: clamp(1.35rem, 5vw, 1.7rem) !important;
        line-height: 1.25;
    }

    /* h3 */
    h3,
    body .fl-page-content h3,
    body .fl-page-content .fl-module-heading h3.fl-heading {
        font-size: clamp(1.15rem, 4.2vw, 1.45rem) !important;
        line-height: 1.3;
    }

    /* h4 */
    h4,
    body .fl-page-content h4,
    body .fl-page-content .fl-module-heading h4.fl-heading {
        font-size: clamp(1.05rem, 3.8vw, 1.25rem) !important;
        line-height: 1.35;
    }


    h1, h2, h3, h4  {
      
      overflow-wrap: normal;
      text-wrap: balance;

      hyphens: manual; /* Designer können Browser per ­ (z.B. „Mis­sion“) anbieten, bei Bedarf an der Stelle Wort zu trennen */
    }
}



/* SOCIAL ICONS AUF MOBILE INS MENU   */


.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);
  }
}


/* Dazu Social Icons in Desktop Menubar ab hier abschalten, da sie sonst die Height der Menubar hochdrückt */

@media (max-width: 768px) 
{
  .navbar-row_inner-social-flexbox
  {
    display: none !important;
  }
}