/*

This js file is created by:

	ITConsulting24 AG
	Oerlikonerstrasse 50
	CH-8057 Zürich
	SWITZERLAND

	Phone: +41 44 382 88 88
	info(at)itconsulting24.com
	www.itconsulting24.com
 */

 /* === Splash Screen ====================================================== */
/* Splash: 2s Fade, Visibility erst NACH dem Fade (Delay = Fade-Dauer) */
#splash{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000; color:#fff; z-index:9999;
  transition: opacity 2s ease, visibility 0s linear 2s;
}
#splash.fade-out{
  opacity:0;
  visibility:hidden;
}

#splash h1{
    font-size:clamp(2rem,4vw,3rem);
    margin:0; font-weight:600; text-align:center;
}

/* --- Fix A: Header-Gradient soll Klicks auf #fp-nav nicht blockieren --- */
header{ pointer-events: none; }

/* Interaktive Header-Kinder wieder aktivieren */
header .logo,
header .languages,
header .section-controlArrow{ pointer-events: auto; }

/* FullPage Dots sicher über Overlays legen */
#fp-nav{ z-index: 10000 !important; }

/* === Splash aktiv: alle UI-Elemente ausblenden ======================== */
/* Gilt solange #splash existiert und NICHT .fade-out hat. */
body:has(#splash:not(.fade-out)) #fp-nav,
body:has(#splash:not(.fade-out)) .fp-slidesNav,
body:has(#splash:not(.fade-out)) header .logo,
body:has(#splash:not(.fade-out)) header .languages,
body:has(#splash:not(.fade-out)) #top-claim{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* --- Fix C: Dezentes Dim-Overlay während Navigation --- */
#nav-dim{
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
  z-index: 1000001;        /* über allem, ohne Klicks zu blockieren */
  pointer-events: none;
}
#nav-dim.on{
  opacity: .22;           /* Helligkeit nach Geschmack (0.18–0.28) */
  visibility: visible;
  transition: opacity .18s ease, visibility 0s linear 0s;
}

/* === Navigation Dimmer (Fix C) =============================================
   Blendet während einer FullPage-Navigation die Seite leicht ab.
   Technisch: Pseudo-Overlay am Body, per Klasse .fp-dim-active ein/aus.
   - blockiert KEINE Interaktionen (pointer-events:none)
   - liegt über allem (noch unter #splash / Modals sofern höher)
============================================================================= */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.18);      /* Intensität: 0.18 = sanft */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2147483646;              /* über Header/Logo/Navigation */
  transition: opacity .18s ease, visibility 0s linear .18s; /* fades */
}
body.fp-dim-active::after{
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease;
}

/* =======================================================================
   BLOG: Fremde (runde) Pfeile im Blog-Abschnitt deaktivieren,
   fullPage.js Bullets & Pfeile bleiben sichtbar und klickbar.
   ======================================================================= */

/* 1) Störende Pfeile/Navigations-Buttons typischer Slider-Bibliotheken
      NUR im Blog-Abschnitt ausblenden. Die Selektoren decken Swiper/Slick/
      Splide/Glide sowie generische "nav/arrow"-Klassen ab. */
.section[data-anchor="blog"] .swiper-button-prev,
.section[data-anchor="blog"] .swiper-button-next,
.section[data-anchor="blog"] .slick-prev,
.section[data-anchor="blog"] .slick-next,
.section[data-anchor="blog"] .splide__arrow,
.section[data-anchor="blog"] .glide__arrow,
.section[data-anchor="blog"] [class*="blog-nav"],
.section[data-anchor="blog"] [class*="post-nav"],
.section[data-anchor="blog"] [class*="nav-"][class*="arrow"],
.section[data-anchor="blog"] [class*="arrow-"][class*="nav"],
.section[data-anchor="blog"] [class*="btn"][class*="arrow"],
.section[data-anchor="blog"] [class*="arrow"][class*="btn"]{
  display: none !important;
  pointer-events: none !important;
}

/* 2) fullPage.js Navigations-UI IMMER sichtbar & on top halten.
      (Pfeile der horizontalen Slides + Bullets + globales #fp-nav) */
#fp-nav,
.section[data-anchor="blog"] .fp-slidesNav,
.section[data-anchor="blog"] .fp-controlArrow{
  z-index: 10000 !important;     /* über evtl. Blog-Overlays */
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* === BLOG (iOS-Fix & Pfeil-Klickbarkeit) =============================== */

/* 1) iOS: Browser-Hinweis, dass horizontale Gesten erwünscht sind.
   Wir setzen das bewusst nur im Blog-Abschnitt. */
.section[data-anchor="blog"] .fp-slides,
.section[data-anchor="blog"] .fp-slidesContainer,
.section[data-anchor="blog"] .fp-slide {
  -ms-touch-action: pan-x;     /* IE/Edge alt */
  touch-action: pan-x;         /* iOS Safari & moderne Browser */
}

/* 2) Rechte FullPage-Pfeiltaste sicher „oberhalb“ und klickbar. */
.section[data-anchor="blog"] .fp-controlArrow {
  pointer-events: auto !important;
  z-index: 101 !important;     /* über #fp-nav (typ. 100), aber weit unter Header */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}






/* === FullPage: Pfeil-Buttons stets über Content (aber unter Modals) ===
   Hintergrund:
   - #top-claim & Header liegen mit z-index:999999 über dem Content.
   - Kontakt-Modal (.fixed-size-modal) nutzt z-index:10000000.
   Ziel:
   - Vertikale (.section-controlArrow) und horizontale (.fp-controlArrow) Pfeile
     liegen konsequent darüber, bleiben klickbar und erhalten eine etwas
     grössere Klickfläche, ohne visuell zu wachsen.
*/
.section-controlArrow,
.fp-controlArrow{
  z-index: 1000002 !important;   /* > header (999999), < modal (10000000) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  pointer-events: auto;
}

/* Klickfläche unauffällig vergrössern */
.section-controlArrow::after,
.fp-controlArrow::after{
  content: "";
  position: absolute;
  /* rund um den Pfeil ~14–18px mehr Klickfläche */
  top: -0.9rem; right: -0.9rem; bottom: -0.9rem; left: -0.9rem;
  /* nichts sichtbar ändern */
  background: transparent;
}

/* Sicherheitsnetz: falls ein Parent eine neue Stacking-Context erzeugt,
   verhindern wir, dass er unter den Header fällt */
.section-controlArrow{ position: absolute; }
.fp-controlArrow{ position: absolute; }


/* Splash aktiv: Pfeile ebenfalls ausblenden */
body:has(#splash:not(.fade-out)) .section-controlArrow,
body:has(#splash:not(.fade-out)) .fp-controlArrow{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === Standort-Slide: vereinfachtes Scoping === */
.standort{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.standort .loc-col,
.standort .contact-col{
  color: #fff;
}

.standort .loc-title,
.standort .contact-title{
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  letter-spacing: .03em;
  font-weight: 700;
  margin: .25rem 0 .35rem 0;
  text-transform: uppercase;
}

.standort .loc-block{
  padding: .5rem 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.standort .loc-block:first-of-type{
  border-top: 0;
}

.standort .loc-address{
  font-style: normal;
  line-height: 1.5;
  opacity: .95;
  margin: .15rem 0 0 0;
}

/* Rechte Spalte: Beratung + Social */
.standort .contact-col{
  display: grid;
  gap: 1rem;
  align-content: start;
}
.standort .contact-block{
  padding: .75rem .9rem;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.standort .contact-cta{
  margin: .25rem 0 0 0;
  line-height: 1.6;
  font-weight: 600;
}
.standort .contact-link{
  color: #fff !important;
  text-decoration: underline;
}

/* Social-Liste (Font Awesome) */
.standort .social-list{
  list-style: none;
  padding: 0; margin: .25rem 0 0 0;
  display: grid; gap: .4rem;
}
.standort .social-list li a{
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none !important;
  color: #e5e7eb !important;
  border-bottom: 0 !important;
}
.standort .social-list li a i{
  font-size: 1.05rem;
  width: 1.25rem; text-align: center;
  opacity: .95;
}
.standort .social-list li a:hover{
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Desktop: 2 Spalten */
@media (min-width: 980px){
  .standort{
    grid-template-columns: 1.2fr .8fr;
    column-gap: 2rem;
  }
}

/* Sehr breite Screens: etwas luftiger */
@media (min-width: 1400px){
  .standort{
    column-gap: 2.5rem;
  }
}

/* Letzter Block in den rechten Spalten: immer etwas Luft nach unten */
.standort .contact-col .contact-block:last-child,
.pricing-side .price-block:last-child{
  margin-bottom: .75rem;
}

/* Dezent Innenabstand am Grid – verhindert Ankleben am Containerboden */
.standort,
.pricing-grid{
  padding-bottom: .25rem;
}

/* Desktop: rechte Pricing-Spalte bündig am unteren Ende der linken Spalte */
@media (min-width: 980px){
  .pricing-side{
    align-self: end;  /* setzt die gesamte rechte Spalte unten an */
  }
}

/* Kunden: Logo oben rechts */
.kunden-logo {
  position: absolute;
  top: 18px;
  right: 24px;
  width: 96px;
  height: auto;
  border-radius: 6px;
  opacity: 0.9;
  object-fit: contain;
  pointer-events: none;
}

/* Kunden: kleiner, etwas „schwächerer“ Untertitel */
.kunden-subtitle {
  opacity: 0.85;           /* „schwächer“ */
  font-weight: 500;         /* etwas feiner als H2 */
  margin-top: 0.2rem;
  margin-bottom: 0.6rem;
}

/* Kunden: Trennstrich zwischen Titel und Untertitel – angelehnt an eure Overlays */
.kunden-header-sep {
  border: 0;
  height: 1px;
  margin: 0.4rem 0 0.6rem 0;
  background: rgba(255,255,255,0.45);
}

/* ==========================================================================
   NeWo iPhone Auto-Align CSS (v1.3i) -- Appended 2025-10-30 04:08:27
   Positioniert den Launcher relativ zur horizontalen Slides-Navigation.
   Werte kommen dynamisch aus CSS-Variablen (--chat-right / --chat-bottom).
   Splash/Logik werden nicht verändert.
   ========================================================================== */
@supports (-webkit-touch-callout: none) and (not (hover: hover)) {
  @media (max-width: 430px) {
    /* NUR nach dem Splash (falls :has unterstützt ist) */
    body:not(:has(#splash:not(.fade-out))) .newo-chat-toggler,
    /* Fallback, wenn :has nicht greift (WKWebView/ältere Safari): */
    .newo-chat-toggler {
      position: fixed !important;
      right: var(--chat-right, 12px) !important;
      bottom: var(--chat-bottom, 48px) !important;

      /* Stabilität */
      left: auto !important;
      top: auto !important;
      margin: 0 !important;
      transform: none !important;
      -webkit-transform: none !important;
      z-index: 2147483000 !important;
    }
  }
}

/* iPhone-only, Landscape: Chat unten halten, Text-Overlay nach vorn */
@supports (-webkit-touch-callout: none) and (not (hover: hover)) {
  @media (orientation: landscape) and (max-height: 450px) {
    /* Chat nach unten (ohne Logik zu ändern) */
    .newo-chat-toggler,
    iframe[src*="newo.ai"],
    [name="web-chat"]{
      z-index: 1 !important;                 /* weit hinten */
      opacity: 0 !important;                 /* visuell weg */
      visibility: hidden !important;
      pointer-events: none !important;       /* klicks blocken */
    }

    /* Schwarze Text-Box (deine Klasse) nach ganz vorn */
    .textbox-black-half-transparent{
      position: relative !important;
      z-index: 2147483600 !important;        /* vor dem Chat */
      pointer-events: auto !important;
    }

    /* Hilfreich: FullPage-UI darüber, aber unter der Textbox */
    .fp-slidesNav,
    .fp-controlArrow{
      position: relative;
      z-index: 2147483500;                   /* unter Textbox, über Chat */
    }
  }
}