/* ==========================================================================
   INFINEX MASTER STYLESHEET (Clean / Luxury)
   --------------------------------------------------------------------------
   Purpose:
   - Single source of truth for typography, colors and layout primitives
   - Sections are grouped and documented for easy reuse (e.g. Interplast site)
   --------------------------------------------------------------------------
   Structure (Base → Sections → Overrides):
   00 Fonts
   01 Base + Design Tokens (:root)
   02 Typography (h1–h5, p, links)
   03 Utilities (scroll-to-top, helpers)
   04 Layout System (990px content rail)
   05 Hero / Titlebar
   06 Sections (Infinex Group, Brands, News, Contact)
   07 Footer
   08 Accessibility + Motion
   09 Responsive (mobile overrides)
   ========================================================================== */

/* ==========================================================================
   00 DINOT Fonts
   Webfont Faces
   ========================================================================== */

@font-face{
  font-family: 'DINOT-regular';
  src: url('../fonts/DINOT-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face{
  font-family: 'DINOT-medium';
  src: url('../fonts/DINOT-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face{
  font-family: 'DINOT-bold';
  src: url('../fonts/DINOT-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/* ==========================================================================
   01 Base
   Global defaults + tokens
   ========================================================================== */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

:root{
  /* Core palette */
  --ix-white: #fff; 
  --ix-black: #000; 

  /* Text */
  --ix-text: #777;
  --ix-text-strong: #333;
  --ix-heading: #424242;
  --ix-h4: #666;
  --ix-gray-600: #6a6a6a;
  --ix-gray-700: #5f6a72;

  /* Brand blues */
  --ix-blue: #0078BF;
  --ix-blue-2: #007AC5;
  --ix-blue-3: #0069a8;
  --ix-blue-mid: #2e6da4;
  --ix-blue-dark: #005f99;
  --ix-blue-dark-2: #005f9e;
  --ix-blue-deep: #1f4f7a;
  --ix-navy: #203b71;
  --ix-blue-hover: #005f99;

  /* UI surfaces / lines */
  --ix-bg: #f5f5f5;
  --ix-bg-soft: #eee;
  --ix-line: #e0e0e0;
  --ix-line-2: #e5e5e5;
  --ix-border-light: #bbb;
  --ix-border: #cfcfcf;
  --ix-border-2: #d0d0d0;
  --ix-border-3: #d7d7d7; 

  /* Accents */
  --ix-whatsapp: #25D366; 

  /* Header / Nav tokens */
  --ix-header-bg: var(--ix-white);
  --ix-header-border: var(--ix-line-2);
  --ix-header-shadow: rgba(0,0,0,0.06);
  --ix-nav-link: var(--ix-gray-600);
  --ix-nav-link-hover: var(--ix-black);
  --ix-lang-color: var(--ix-h4);
  --ix-lang-sep: var(--ix-border-light);
  --ix-toggler-border: var(--ix-border-3);
  --ix-collapse-bg: var(--ix-white);
}

body{
  font-family: "DINOT-regular", sans-serif;
  color: var(--ix-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   02 Headings Basis
   Global typography rules
   ========================================================================== */

h4{
  font-family: "DINOT-bold", sans-serif;
  font-size: 18px;
  color: var(--ix-h4);
}

h1, h2, h3, h5{ color: var(--ix-heading); }

a{ color: var(--ix-blue); }
a:hover{ color: var(--ix-blue-hover); }

.link-blue{
  color: var(--ix-blue);
  text-decoration: none;
}
.link-blue:hover{ text-decoration: underline; }

/* ==========================================================================
   02.1 Buttons
   Global Infinex button standard
   ========================================================================== */

.btn,
.btn-download,
.btn-contact,
.submit_form_new,
.dashboard-periods a,
button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  font-family: "DINOT-medium", sans-serif !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn{
  text-decoration: none !important;
}

.btn-primary{
  background-color: var(--ix-blue);
  border-color: var(--ix-blue);
  color: var(--ix-white) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle{
  background-color: var(--ix-blue-dark);
  border-color: var(--ix-blue-dark);
  color: var(--ix-white) !important;
}

.btn-outline-primary{
  color: var(--ix-blue);
  border-color: var(--ix-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background-color: var(--ix-blue);
  border-color: var(--ix-blue);
  color: var(--ix-white) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle{
  background-color: var(--ix-blue-dark);
  border-color: var(--ix-blue-dark);
  color: var(--ix-white) !important;
}

/* ==========================================================================
   03 Scroll To Top
   UI utility: back-to-top button
   ========================================================================== */

#scrollTopWrapper{
  position: fixed;
  bottom: 50px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.2s ease, bottom .2s ease;
  z-index: 9999;
}

#scrollTopWrapper.stuck-above-footer{
  bottom: 120px; /* Höhe deines Footers + etwas Abstand */
}

#scrollTopWrapper.show{
  opacity: 1;
  visibility: visible;
}

/* Button */
#scrollTopBtn{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--ix-blue); /* dein Infinex-Blau */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scrollTopBtn:hover{
  transform: translateY(-3px);
}

#scrollTopBtn img{
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}


/* Label */
.scroll-label{
  margin-top: 6px;
  font-size: 12px;
  font-family: "DINOT-medium", sans-serif;
  color: var(--ix-blue);
  white-space: nowrap;
}

	

/* ==========================================================================
   04 GLOBAL 990px LAYOUT SYSTEM (Content)
   Content rail and width system
   ========================================================================== */
.content-wrap{
  width: 100%;
  max-width: 990px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Sections */
section{
  width: 100%;
  scroll-margin-top: 120px;
}

/* =========================================
   HEADER / NAV — 990px ist heilig (A)
   ========================================= */

.header-main{
  background: var(--ix-header-bg);
  border-bottom: 1px solid var(--ix-header-border);
  box-shadow: 0 2px 4px var(--ix-header-shadow);
  position:sticky;
  top:0;
  z-index:9999;
  padding-left:10px;
  padding-right:10px;
}

.header-outer{
  position:relative;
  width:100%;
  padding:38px 0;
}

/* Menü exakt 990px */
.header-menu{
  max-width:990px;
  margin:0 auto;
}

/* Navbar-Optik */
.navbar{ padding:0; }
.navbar-nav{ flex-wrap:nowrap; }

.nav-link{
  font-family:"DINOT-medium", sans-serif;
  color: var(--ix-nav-link);
  font-size:16px;
  padding:.35rem .5rem;
}
.nav-link:hover{ color: var(--ix-blue-hover); }

/* Burger */
.navbar-toggler{
  border: 1px solid var(--ix-toggler-border);
  padding:.25rem .5rem;
}
.navbar-toggler:focus{ box-shadow:none; }

/* Logo */
.nav-logo{
  height:70px;
  width:auto;
  display:block;
}

/* Desktop breit: echtes Docking an 990-Kante */
.header-logo{
  position:absolute;
  top:50%;
  left: calc((100% - 990px)/2 - 22px); /* 22px links der 990-Kante */
  right:auto;
  transform: translate(-100%, -50%);   /* rechte Logo-Kante an die 990-Kante */
  z-index:5;
}

/* Language bündig zur rechten 990-Kante */
.header-lang{
  position:absolute;
  top:50%;
  right: calc((100% - 990px)/2);
  transform: translateY(-50%);
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.header-lang a{
  font-family:"DINOT-medium", sans-serif;
  font-size:14px;
  color: var(--ix-lang-color);
  text-decoration:none;
  opacity:.95;
}
.header-lang a:hover{ opacity:1; }
.header-lang .sep{ color: var(--ix-lang-sep); margin:0 2px; }

/* WICHTIG: Mobile-Language IMMER auf Desktop aus! */
.lang-mobile{ display:none; }

/* -----------------------------------------
   Desktop enger: Flow-Modus 992–1390
   - Reihenfolge stabil: Logo | Menü | Language
   ----------------------------------------- */
@media (min-width: 992px) and (max-width: 1390px){

  .header-outer{
    padding:18px 0;
    display:flex;
    align-items:center;
    gap:18px;
  }

  .header-logo{ order:1; }
  .header-menu{ order:2; }
  .header-lang{ order:3; }

  .header-logo{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    flex:0 0 auto;
  }

  .nav-logo{ height:62px; }

  .header-menu{
    max-width:990px;
    margin:0 auto;
    flex:1 1 auto;
    min-width:0;
  }

  .header-lang{
    position:static;
    right:auto;
    top:auto;
    transform:none;
    flex:0 0 auto;
    margin-left:auto;
  }

  .nav-main{ gap:6px; }
  .nav-main .nav-link{
    padding:.28rem .34rem;
    font-size:15px;
  }
}

/* -----------------------------------------
   Mobile <= 991.98px
   ----------------------------------------- */
@media (max-width: 991.98px){

  .header-outer{ padding:15px 0; }

  .header-logo{
    position:static;
    transform:none;
    margin-bottom:6px;
    left:auto;
  }

  .nav-logo{ height:60px; }

  /* Desktop-Language im Mobile aus dem Flow raus */
  .header-lang{
    position:static;
    transform:none;
    right:auto;
    top:auto;
    margin-left:0;
    display:none; /* wichtig: nicht doppelt zeigen */
  }

  .header-menu{ max-width:100%; margin:0; }

  .navbar-collapse{
    background: var(--ix-header-bg);
    padding:10px 0 4px;
  }

  .navbar-collapse-inner{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  /* Mobile-Language nur hier aktiv */
  .lang-mobile{
    display:flex;
    gap:10px;
    align-items:center;
    padding:8px 0 0;
    border-top:1px solid var(--ix-bg-soft);
  }

  .lang-mobile a{
    font-family:"DINOT-medium", sans-serif;
    font-size:14px;
    color: var(--ix-lang-color);
    text-decoration:none;
  }

  .lang-mobile .sep{ color: var(--ix-lang-sep); }
}


/* ==========================================================================
   05 HERO (Splash + Titlebar)  990px System
   Hero + Titlebar alignment
   ========================================================================== */

/* 990px Linie OHNE Padding (fr bndige Kanten im Hero) */
.content-wrap-hero{
  max-width: 990px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* Splash */
.splash{
  background: var(--ix-blue);
  text-align: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.splash img{
  display: block;
  margin: 0 auto;
  opacity: 0;
  animation: splashFade 1.2s ease-out forwards;
}

@keyframes splashFade{
  from{
    opacity: 0;
    transform: scale(1.02);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}

/* Titlebar */
.titlebar{
  position: relative;
  z-index: 5;
}

.titlebar-inner{
  background: var(--ix-blue-3);
  color: var(--ix-white);
  position: relative;
  z-index: 2;
  border-radius: 0 0 8px 8px;
  overflow: visible;
}

/* Schatten als eigenes Element */
.titlebar-inner::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 0px;
  height: 22px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  pointer-events:none;
  z-index: -1;
}

.titlebar-pad{ padding: 22px 34px; }

.titlebar-inner h1{
  font-family: "DINOT-bold", sans-serif;
  font-size: 40px;
  line-height: 1.06;
  margin: 0 0 8px;
  color: var(--ix-white);
  letter-spacing: -0.3px;
}

.titlebar-inner .lead{
  font-family: "DINOT-regular", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  color: var(--ix-white);
  opacity: .92;
}

/* TopJob Badge kleiner */
.topjob{
  max-width: 85px;
  height: auto;
}



.topjob-logo{
  max-width: 180px;
  height: auto;
}

/* ==========================================================================
   06.1 SECTION: Die Infinex Group
   Section styles
   ========================================================================== */
.section-infinex{
  padding: 60px 0;
  background: var(--ix-white);
}

.section-infinex h2{
  font-family: "DINOT-bold", sans-serif;
  font-size: 34px;
  line-height: 1.2;
  color: var(--ix-blue);
  margin: 0 0 10px;
}

.section-infinex h3{
  font-family: "DINOT-bold", sans-serif;
  font-size: 22px;
  color: var(--ix-blue);
  margin-bottom: 20px;
}


.section-divider{
  border: 0;
  border-top: 1px solid var(--ix-line);
  margin: 0 0 30px;
}

.section-infinex p{
  font-family: "DINOT-regular", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 20px;
  color: var(--ix-text-strong);
}

.img-list{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ix-line-2);
}

.section-infinex .row + .row{ margin-top: 30px; }

.group-subsection{ margin-top: 30px; }
.group-divider{ margin: 35px 0; }

/* Download Bereich Infinex Group */
.group-download{ margin-top: 10px; }

.btn-download{
  display: inline-block;
  background: var(--ix-blue-2);
  color: var(--ix-white);
  padding: 10px 18px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s ease;
}

.btn-download:hover{
  background: var(--ix-blue-dark-2);
  color: var(--ix-white);
}

.download-version{
  margin-top: 6px;
  font-size: 13px;
  color: var(--ix-text);
}

/* Zertifikate  Infinex Group */
.group-certificates{ margin-top: 30px; }
.cert-list{ margin-top: 14px; }

.cert-item{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cert-label{
  min-width: 220px;
  color: var(--ix-text-strong);
}

.btn-download--small{
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 3px;
}

.certificate-date{
  font-size: 14px;
  color: var(--ix-text);
  margin-top: 10px;
}



/* ==========================================================================
   06.2 SECTION: Die Marken (zweispaltig)
   Section styles
   ========================================================================== */
.section-brands{
  padding: 60px 0;
  background: var(--ix-bg);
}

.section-brands h2{
  font-family: "DINOT-bold", sans-serif;
  font-size: 34px;
  line-height: 1.2;
  color: var(--ix-blue);
  margin: 0 0 10px;
}

.section-brands .section-divider{
  border: 0;
  border-top: 1px solid var(--ix-line);
  margin: 18px 0 28px;
}

.brand-block{ padding: 0; }

.section-brands .brand-img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ix-line-2);
  background: var(--ix-white);
}

.section-brands .brand-caption{
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}

.section-brands .brand-caption a{
  color: var(--ix-blue);
  text-decoration: none;
}

.section-brands .brand-caption a:hover{
  text-decoration: underline;
}

.section-brands h4{
  font-family: "DINOT-bold", sans-serif;
  font-size: 18px;
  margin: 10px 0 10px;
}

.section-brands .brand-logo{
  max-width: 180px;
  height: auto;
  display: inline-block;
  margin-bottom: 8px;
}

.section-brands .brand-logo-repoly{ max-width: 150px; }

.section-brands .brand-divider{
  border: 0;
  border-top: 1px solid var(--ix-line);
  margin: 32px 0;
}



/* ==========================================================================
   06.3 SECTION: Messen / News
   Section styles
   ========================================================================== */
.section-news{
  padding: 60px 0;
  background: var(--ix-white);
}

.section-news .section-header h2{
  font-family: "DINOT-bold", sans-serif;
  font-size: 34px;
  line-height: 1.2;
  color: var(--ix-blue);
  margin: 0 0 10px;
}

.section-news .section-divider{
  border: 0;
  border-top: 2px solid var(--ix-border-2);
  margin: 18px 0 28px;
}

.section-news .news-divider{ margin: 22px 0; }
.section-news .news-intro{ margin: 0; }
.section-news .news-item{ padding: 0; }

.section-news .news-img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ix-line-2);
  background: var(--ix-white);
}

.section-news .news-title{
  font-family: "DINOT-bold", sans-serif;
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--ix-blue);
}

.section-news .news-meta{ margin-top: 15px; }

.section-news .news-links a{
  color: var(--ix-blue);
  text-decoration: none;
}

.section-news .news-links a:hover{ text-decoration: underline; }

/* News: alle Links einheitlich */
.section-news a,
.section-news a:visited{
  color: var(--ix-blue);
  text-decoration: none;
}

.section-news a:hover,
.section-news a:focus{
  text-decoration: underline;
}



/* ==========================================================================
   06.4 SECTION: Kontakt
   Section styles
   ========================================================================== */
.section-contact{
  padding: 60px 0;
  background: var(--ix-bg);
}

.section-contact .section-header h2{
  font-family: "DINOT-bold", sans-serif;
  font-size: 34px;
  line-height: 1.2;
  color: var(--ix-blue);
  margin: 0 0 10px;
}

.section-contact .section-divider{
  border: 0;
  border-top: 1px solid var(--ix-line);
  margin: 20px 0 35px;
}

.contact-card h4{
  font-family: "DINOT-bold", sans-serif;
  font-size: 18px;
  color: var(--ix-blue);
  margin-bottom: 12px;
}

.contact-card p{
  margin-bottom: 0;
  line-height: 1.6;
  font-size: 15px;
}

.section-contact a{
  color: var(--ix-blue);
  text-decoration: none;
}

.section-contact a:hover{ text-decoration: underline; }

/* Google Maps Box */
.contact-map{
  margin: 50px auto;
  max-width: 850px;
  padding: 30px;
  background: var(--ix-bg);
  border: 1px dashed var(--ix-border);
  border-radius: 8px;
  text-align: center;
}

.contact-map .ext-consent-inner{ font-size: 15px; }

/* CTA Bereich */
.contact-cta{
  margin-top: 60px;
  padding-top: 35px;
  border-top: 1px solid var(--ix-line);
  text-align: center;
}

.contact-cta h3{
  font-family: "DINOT-bold", sans-serif;
  font-size: 22px;
  color: var(--ix-gray-700);
  margin-bottom: 15px;
}

.contact-cta p{
  max-width: 720px;
  margin: 0 auto 22px;
  line-height: 1.6;
  font-size: 15px;
}

.btn-contact{
  display: inline-block;
  background: var(--ix-blue-mid);
  color: var(--ix-white) !important;
  padding: 9px 20px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.btn-contact:hover,
.btn-contact:focus{
  background: var(--ix-blue-deep);
  color: var(--ix-white) !important;
}

@media (max-width: 992px){
  .contact-map{ padding: 25px; }
}



/* berschrift Vacancies (wie bisher vorhanden) */
.section-vacancies .section-header h2{
  font-family: "DINOT-bold", sans-serif;
  font-size: 34px;
  line-height: 1.2;
  color: var(--ix-blue);
  margin: 0 0 10px;
}

/* ==========================================================================
   07 Footer Layout wie Screenshot
   Footer styles
   ========================================================================== */

.site-footer{
  background: var(--ix-blue);
  color: var(--ix-white);
}

.footer-grid{
  display: grid;
  grid-template-columns: 1fr auto auto; /* Links | Socials | Welle */
  grid-template-rows: auto auto;
  align-items: center;
  padding: 26px 0 22px;
  row-gap: 14px;
  column-gap: 18px;
  max-width: 990px;
  margin: 0 auto;
}

/* Links: links in Zeile 1 */
.footer-links{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  text-align: left;
}

.site-footer .footer-links a{
  font-weight: 400 !important;
}

.footer-links a{
  color: var(--ix-white);
  text-decoration: none;
  font-family: "DINOT-regular", sans-serif;
  font-size: 16px !important;
}

.footer-links a:hover{
  text-decoration: underline;
}

.footer-links .sep{
  margin: 0 12px;
  opacity: 0.7;
}

/* Socials: mittig/rechts in Zeile 1 */
.footer-socials{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-self: end;
}

.footer-socials a{
  width: 30px;
  height: 30px;
  display: inline-flex;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-socials a:hover{
  opacity: 1;
  transform: translateY(-2px);
}

.footer-socials img{
  width: 100%;
  height: auto;
  display: block;
}

/* Welle: ganz rechts in Zeile 1 */
.footer-wave{
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  justify-self: end;
}

.footer-wave img{
  width: 170px;
  height: auto;
  display: block;
  opacity: 0.1;
}

/* Copyright: mittig in Zeile 2 ber volle Breite */
.footer-copy{
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  text-align: center;
  font-family: "DINOT-regular", sans-serif;
  font-size: 13px;
  opacity: 0.9;
}

/* Mobile: alles zentriert untereinander */
@media (max-width: 991px){
  .footer-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    text-align: center;
  }

  .footer-links{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-align: center;
  }

  .footer-socials{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    justify-self: center;
  }

  .footer-wave{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    justify-self: center;
  }

  .footer-copy{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }
}

/* ==========================================================================
   08 Accessibility: Reduced Motion
   Respect user motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .splash img{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================
   Responsive (<=576px)
   - merged to avoid duplicates
   ========================================= */


/* ==========================================================================
   09 Responsive (Mobile)
   - Keep ALL mobile overrides here to avoid duplicates
   ========================================================================== */

@media (max-width: 576px){
  /* Titlebar */
  .titlebar{ padding: 0; }
  .titlebar-pad{ padding: 18px 18px; }
  .titlebar-inner h1{ font-size: 32px; }
  .topjob{ max-width: 70px; }

/* Schatten-Pseudo-Block darf nicht eingerückt sein */
  .titlebar-inner::after{ left: 0; right: 0; }

  /* Section: Infinex */
  .section-infinex{ padding: 45px 0; }
  .section-infinex h2{ font-size: 26px; }
  .section-infinex h3{ font-size: 20px; }
  .cert-label{ min-width: 0; width: 100%; }

  /* Section: Brands */
  .section-brands{ padding: 45px 0; }
  .section-brands .section-divider{ margin: 14px 0 22px; }
  .section-brands .brand-divider{ margin: 26px 0; }

  /* Section: News */
  .section-news{ padding: 45px 0; }
  .section-news .section-divider{ margin: 14px 0 22px; }
  .section-news .news-divider{ margin: 18px 0; }

  /* Section: Contact */
  .section-contact{ padding: 45px 0; }
  .contact-map{ margin: 40px auto; padding: 20px; }
  .contact-cta{ margin-top: 45px; }
}

/* News: Buttons dürfen nicht wie normale Links behandelt werden */
.section-news .news-links a.btn-download{
  color: var(--ix-white) !important;
  text-decoration: none !important;
}

.section-news .news-links a.btn-download:hover,
.section-news .news-links a.btn-download:focus{
  color: var(--ix-white) !important;
  text-decoration: none !important;
}

/* =========================================================
   GALLERY MODAL (Bootstrap 5) – Infinex Look
   ========================================================= */

#modalDynamic .modal-content{
  background: #333333;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  max-height: 78vh;       /* Kino: Modal insgesamt kleiner */
}

#modalDynamic .modal-header{
  border: 0;
  background: rgba(44,44,44,0.70);
  color: #fff;
  padding: 12px 16px;
}

#modalDynamic .modal-title{ color: #fff; }

#modalDynamic .btn-close{
  filter: invert(1);
  opacity: 1;
  transform: scale(1.25);
}

#modalDynamic .modal-body{
  padding: 0;
  background: #2C2C2C;
  max-height: calc(78vh - 52px); /* ~ Headerhöhe im Modal */
  overflow: hidden;
}

/* ===== Modal unter dem Sticky-Header nach unten schieben + Breite ===== */
#modalDynamic .modal-dialog{
  max-width: 1100px;
  margin-top: 110px;     /* ggf. 90–130 */
  margin-bottom: 24px;
}

/* Carousel Grundfläche */
#modalDynamic .carousel,
#modalDynamic .carousel-inner,
#modalDynamic .carousel-item{
  background: #272727;
}

/* Kino-Footer unten (grauer Rand) */
#modalDynamic .carousel{
  padding-bottom: 80px;   /* Platz für Counter / später Thumbs */
}

/* Bilder (eine Quelle der Wahrheit) */
#modalDynamic .gallery-img{
  width: 100%;
  max-height: 55vh;       /* Kino: weniger hoch */
  object-fit: contain;
  background: #2C2C2C;
}

/* ===== Kräftigere Carousel-Pfeile ===== */
#modalDynamic .carousel-control-prev,
#modalDynamic .carousel-control-next{
  width: 12%;
  opacity: 1;
}

#modalDynamic .carousel-control-prev-icon,
#modalDynamic .carousel-control-next-icon{
  width: 50px;
  height: 50px;
  background-size: 55% 55%;
  background-color: var(--ix-blue);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: transform .2s ease;
}

#modalDynamic .carousel-control-prev-icon:hover,
#modalDynamic .carousel-control-next-icon:hover{
  transform: scale(1.08);
}

/* Counter (unten rechts im Kino-Footer) */
#modalDynamic .gallery-counter{
  position: absolute;
  right: 22px;
  bottom: 26px;
  z-index: 30;
  background: var(--ix-blue);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* ===== Mobile ===== */
@media (max-width: 576px){
  /* Modal weiter runter unter den Sticky-Header */
  #modalDynamic .modal-dialog{
    margin: 90px 12px 12px;         /* oben runter + seitliche Luft */
    max-width: calc(100% - 24px);
  }

  #modalDynamic .modal-content{
    border-radius: 12px;
    max-height: calc(100vh - 120px); /* verhindert Abschneiden unten */
  }

  #modalDynamic .modal-body{
    max-height: calc(100vh - 170px); /* Header + Footer-Puffer */
    overflow: hidden;
  }

  #modalDynamic .gallery-img{
    max-height: 48vh;                /* damit Footer nicht riesig wirkt */
  }

  #modalDynamic .carousel{
    padding-bottom: 70px;            /* etwas weniger Footer auf Mobile */
  }

  #modalDynamic .gallery-counter{
    bottom: 20px;
    right: 16px;
  }
}

/* ===== Thumbnail Strip (auto-generated) ===== */
#modalDynamic .gallery-thumbs{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;                /* sitzt im grauen Kino-Footer */
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px;
  z-index: 25;
  scrollbar-width: thin;
}

#modalDynamic .gallery-thumbs::-webkit-scrollbar{ height: 8px; }
#modalDynamic .gallery-thumbs::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.25);
  border-radius: 99px;
}

#modalDynamic .gallery-thumbs .thumb{
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0;
  background: transparent;
  flex: 0 0 auto;
  width: 74px;
  height: 52px;
  overflow: hidden;
  opacity: .75;
  transition: opacity .15s ease, transform .15s ease, border-color .15s ease;
}

#modalDynamic .gallery-thumbs .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#modalDynamic .gallery-thumbs .thumb:hover{
  opacity: 1;
  transform: translateY(-1px);
}

#modalDynamic .gallery-thumbs .thumb.active{
  opacity: 1;
  border-color: var(--ix-blue);
}

/* Mobile: Thumbs kleiner */
@media (max-width: 576px){
  #modalDynamic .gallery-thumbs{
    left: 12px;
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }
  #modalDynamic .gallery-thumbs .thumb{
    width: 62px;
    height: 44px;
  }
}

/* ======================================================
   FLOATING STACK (ScrollTop + Express + WhatsApp)
   ====================================================== */

.floating-stack{
  position: fixed;
  right: 30px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 9999;
}

/* Einheitliche Größe */
.floating-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Scroll Top (nur im Floating-Stack überschreiben) */
.floating-stack #scrollTopWrapper{
  position: static;
  opacity: 0;
  visibility: hidden;
}

.floating-stack #scrollTopWrapper.show{
  opacity: 1;
  visibility: visible;
}

/* Express */
.floating-express{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ix-blue);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .2s ease;
}

.floating-express:hover{
  transform: translateY(-3px);
}

/* WhatsApp */
.floating-whatsapp{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ix-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}

.floating-whatsapp img{
  width: 55%;
}

.floating-whatsapp:hover{
  transform: translateY(-3px);
}

/* Labels */
.floating-label{
  margin-top: 6px;
  font-size: 12px;
  font-family: "DINOT-medium", sans-serif;
  color: var(--ix-navy);
}

/* ======================================================
   MOBILE FIX – Express Modal Abstand
   ====================================================== */

@media (max-width: 768px) {

  #modalExpressApply .modal-dialog {
    margin: 90px 16px 16px;
  }

  #modalExpressApply .modal-content {
    border-radius: 12px;
  }

}

@media (max-width: 768px) {
  .floating-stack {
    bottom: 120px;
  }
}