/*

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
 */

.section[data-anchor="blog"] .triple-h-box.border-layout-half-black-transparent { background: none !important; }

.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg {
  position: relative;
  overflow: hidden;
  min-height: 16rem;
  border-radius: 6px;
}

.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg > .blog-tile-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  filter: grayscale(100%) brightness(0.94) contrast(1.0);
}

.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg > .blog-tile-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.05) 100%);
}

.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg .blog-overview-text,
.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg p {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  margin: 1.25rem 0.0rem;
}

.blog-tile-title { font-weight: 700; }
.blog-tile-sep   { opacity: 0.8; padding: 0 0.25em; }
.blog-tile-teaser{ opacity: 0.98; }

/* Fixed-Portal-Buttons */
#blog-nav-portal .nav-btn,
#blog-nav-portal .nav-btn:link,
#blog-nav-portal .nav-btn:visited,
#blog-nav-portal .nav-btn:hover {
  width: 42px; height: 42px; border-radius: 999px; border: none;
  background: rgba(255,255,255,0.95);
  font-size: 22px; line-height: 42px; text-align: center;
  cursor: pointer; transition: transform .15s ease, background .15s ease;
  display: inline-block; color: rgba(0,0,0,.9); text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  user-select: none;
}
#blog-nav-portal .nav-btn:hover { transform: scale(1.04); background: #fff; }

/* Minimal fix: Abstand unter dem Blog-Headerbild */
.section[data-anchor="blog"] .blog-detail-scroll{
    margin-top: 25vh;
}


/* Blog-Teaser: Overlay wie bei textbox-black-half-transparent */
.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg{
  position: relative;
  overflow: hidden;                 /* saubere runde Ecken */
}

/* Bild unten, Scrim deckt die ganze Kachel */
.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg > .blog-tile-bg{
  z-index: 0;
}
.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg > .blog-tile-scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: rgba(0,0,0,0.55);     /* Angleichen an „textbox-black-half-transparent“ */
}

/* Text immer über dem Scrim */
.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg .blog-overview-text,
.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg h1,
.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg p{
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);   /* besserer Kontrast */
}

/* Auf sehr kleinen Screens etwas stärker abdunkeln */
@media (max-width: 480px){
  .section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg > .blog-tile-scrim{
    background: rgba(0,0,0,0.65);
  }
}

/* Blog-Teaser: Titel immer in Brand-Blau */
.section[data-anchor="blog"] .blog-tile-title{
  color: #3B82F6;          /* Brand-Blau */
  font-weight: 800;
}
.section[data-anchor="blog"] .blog-tile-sep{ opacity:.7; }


/* Mehr Luft unten in der Kachel, dadurch früheres „passt rein“-Signal */
.section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg .blog-overview-text{
  padding-bottom: .9rem;   /* sorgt für Rand unten */
}

/* Sichere, einheitliche Kürzung: Teaser textuell kappen */
.section[data-anchor="blog"] .blog-tile-teaser{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;   /* Desktop: ~6 Zeilen, gerne auf 5/7 anpassen */
  overflow: hidden;
}
@media (max-width: 1280px){
  .section[data-anchor="blog"] .blog-tile-teaser{ -webkit-line-clamp: 5; }
}


/* Blog-Scrim einen Hauch heller als globaler Standard */
.section[data-anchor="blog"]{
  /* war z.B. rgba(10,14,20,0.58) */
  --scrim-gray: rgba(10,14,20,0.52);
}

/* falls du noch eine mobile-Regel hattest, die den Blog dunkler macht: ueberschreiben */
@media (max-width: 480px){
  .section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg > .blog-tile-scrim,
  .section[data-anchor="blog"] .blog-detail-header-text{
    background: var(--scrim-gray) !important;
  }
}

/* === Blog Detail: Page-like body + footer CTA + spacing === */
.section[data-anchor="blog"] .blog-detail-header-text h2{ margin-bottom: .35rem; }
.section[data-anchor="blog"] .blog-detail-header-text .blog-meta{ margin-top: .25rem; font-size: .95em; opacity: .92; }

.section[data-anchor="blog"] .blog-detail-body{
  max-width: 920px;
  margin: 0 auto 1.2rem;
  background: rgba(10,14,20,0.66);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.section[data-anchor="blog"] .blog-detail-footer-cta{
  max-width: 920px;
  margin: 0.25rem auto 0;
  text-align: left;
}
.section[data-anchor="blog"] .blog-detail-footer-cta .link-cta{
  margin-top: .5rem;
  display: inline-block;
}
@media (max-width: 640px){
  .section[data-anchor="blog"] .blog-detail-body{
    border-radius: 10px;
    padding: .85rem 1rem;
    margin: 0 .5rem 1rem;
  }
  .section[data-anchor="blog"] .blog-detail-footer-cta{ margin: 0 .5rem; }
}

/* =========================================================
   blogs.css — v30.2 | Blog Front (Slide 1) → Mobile vertikal
   - funktioniert mit deinem aktuellen DOM (ohne neue Klassen)
   - überstimmt layout-triple-horizontal.css gezielt auf Mobile
   ========================================================= */
@media (max-width: 767.98px){

  /* Container auf volle Slide-Fläche + Safe-Padding */
  .section[data-anchor="blog"]
  .slide.slide-position.slide-default:first-child
  .border-layout-container{
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* Platz für Logo/Arrow/Language oben & Footer unten */
    padding: var(--blog-top, 24vh)
             var(--blog-right, 12vw)
             var(--blog-bottom, 12vh)
             var(--blog-left, 7vw) !important;
    box-sizing: border-box !important;
  }

  /* Wrapper zwingend als Spalte (statt Reihe/Grid) */
  .section[data-anchor="blog"]
  .slide.slide-position.slide-default:first-child
  .triple-h-wrapper{
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: clamp(8px, 1vh, 12px) !important;
    height: 100% !important;
    /* frühere Grid-Werte sicher neutralisieren */
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
  }

  /* Kacheln: 100% Breite, keine Floats, je 1/3 Höhe */
  .section[data-anchor="blog"]
  .slide.slide-position.slide-default:first-child
  .triple-h-wrapper > .triple-h-box{
    float: none !important;
    width: 100% !important;
    max-width: none !important;    /* überschreibt 28% */
    flex: 1 1 0 !important;        /* drei gleich hohe Zeilen */
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    padding: clamp(.6rem, 2.2vw, 1rem) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}

/* === BLOG: Body-Inhalte immer responsiv, kein horizontales Scrollen === */
.section[data-anchor="blog"] .blog-detail-scroll{
  overflow-x: hidden;   /* nie horizontales Scrollen im Lesebereich */
}

/* Medienelemente an Container anpassen */
.section[data-anchor="blog"] .blog-detail-body img,
.section[data-anchor="blog"] .blog-detail-body video,
.section[data-anchor="blog"] .blog-detail-body iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Auch breite Inhalte kontrolliert einpassen */
.section[data-anchor="blog"] .blog-detail-body table{
  width: 100%;
  display: block;
  overflow-x: auto;   /* falls sehr breite Tabellen */
}

.section[data-anchor="blog"] .blog-detail-body pre{
  white-space: pre-wrap;      /* Zeilen umbrechen */
  word-wrap: break-word;
}
/* BLOG: Header-Bild minimal abdunkeln – ohne Layoutänderung */
.section[data-anchor="blog"] .blog-detail-header-wrapper img{
  filter: brightness(.35) saturate(1.05);
}

/* Fix: Symmetrischer Innenabstand im Blog-Header-Overlay,
   damit Titel/Meta rechts nicht am Rand kleben */
.section[data-anchor="blog"] .blog-detail-header-text{
  padding-inline: clamp(12px, 2vw, 24px);
  box-sizing: border-box;
}

/* =========================================================
   PHONE-LANDSCAPE FIX (flacher Screen, z.B. iPhone quer)
   Ziel:
   - Cockpit-Kacheln (3 Stück) nicht quetschen,
     sondern wie auf Mobile-Portrait untereinander stapeln.
   - Saubere Einpassung in die FullPage-Slide-Höhe (100vh).
   ========================================================= */
@media (orientation: landscape) and (max-height: 480px){

  /* 1) Außen-Container: symmetrische Ränder + garantierte Slide-Höhe */
  .section[data-anchor="blog"]
  .slide.slide-position.slide-default:first-child
  .border-layout-container{
    left: 6vw !important;           /* symmetrischer Rand links/rechts */
    width: 88vw !important;         /* Platz für FP-Dots etc. */
    top: 12vh !important;           /* gleicher Top-Rand wie im Portrait-Fall */
    height: calc(100vh - 24vh) !important; /* gleicher Bottom-Rand */
    padding: 0 !important;          /* Innen-Polsterung steuern die Kacheln */
    box-sizing: border-box !important;
  }

  /* 2) Wrapper: von (Grid/)Reihe auf Spalte umschalten – 3 gleich hohe Reihen */
  .section[data-anchor="blog"]
  .slide.slide-position.slide-default:first-child
  .triple-h-wrapper{
    display: flex !important;                 /* zuverlässiger als Grid */
    flex-direction: column !important;        /* übereinander stapeln */
    justify-content: space-between !important;/* gleichmäßig verteilen */
    align-items: stretch !important;          /* volle Breite */
    height: 100% !important;                  /* ganze Slide nutzen */
    gap: clamp(6px, 1.2vh, 12px) !important;  /* kleine Abstände */
    grid-template-columns: none !important;   /* alte Grid-Werte neutralisieren */
    grid-auto-flow: row !important;
  }

  /* 3) Kacheln: je 1/3 der Höhe, volle Breite, sauber beschnitten */
  .section[data-anchor="blog"]
  .slide.slide-position.slide-default:first-child
  .triple-h-wrapper > .triple-h-box{
    width: 100% !important;         /* volle Breite */
    flex: 1 1 0 !important;         /* 3 gleich hohe Reihen */
    min-height: 0 !important;       /* Schrumpfen erlauben */
    overflow: hidden !important;    /* keine Scrollbars in der Kachel */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(8px, 1.2vh, 12px) !important;
    max-width: none !important;     /* überschreibt evtl. starre 28%-Breiten */
  }

  /* 4) Bild-Layer in Kachel: immer vollflächig abdecken */
  .section[data-anchor="blog"] .triple-h-box.blog-tile-with-bg > .blog-tile-bg{
    background-size: cover !important;
    background-position: center !important;
  }
}

/* Blog-Portal-Buttons sicher über #fp-nav (und über Scrims) */
#blog-nav-portal .nav-btn {
  z-index: 10002; /* #fp-nav liegt bei 10000 */
}