/*
 * @project:   Blinkbox Fullpage Theme
 * @copyright  (C) 2026 www.blink.ch
 * @author     blinkbox 2026-08-28
 * @version    2.0.0
 
----------------------------------------
 Basics Variables Grid-Fonts & Visability
------------------------------------- */

/* ==========================
   Color Variables
========================== */

:root {
    --kw-tondo-color: rgba(4, 111, 177, 0.6); /* background: var(--kw-tondo-color); */
    --kw-design-color-1: rgba(253, 126, 20, 1); /* zw-titel */
    --kw-design-color-2: rgb(4, 111, 177); /* auszeichnung */

    --color-black: #000000;
    --color-white: #ffffff;
    --color-blue: #0d6efd;
    --color-purple: #6f42c1;
    --color-magenta: #ff00ff;
    --color-red: #dc3545;
    --color-orange: #fd7e14;
    --color-yellow: #ffc107;
    --color-green: #198754;
    --color-cyan: #0dcaf0;
    --color-gray: #6c757d;
} 

html,
body {
    background: transparent;
    margin: 0;
    padding:0;
    height:100%;
    overflow:hidden;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--color-white);
    text-align: left;
    /*background-color: var(--color-black);*/
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

*, ::after, ::before {
    box-sizing: border-box;
}

/* ==========================
   Grid
========================== */

/* Shared */
.layout-fluid-2col,
.layout-fluid-3col,
.layout-fluid-4col,
.layout-fluid-3-6-3,
.layout-fluid-content-sidebar {
    display: grid;
    gap: 2rem;
    width: 100%;
    /*padding: 20px 5% 20px 5%;*/
    padding: 20px 5% 20px 5%;
}

/* Fluid Centered Content */
.layout-fluid-centered {
    width: 100%;
    padding-inline: 2rem;
}

/* Fluid Centered Content */
.layout-fluid-centered-80 {
    width: 100%;
    padding-inline: 2rem;
    padding-left: 10%;
    padding-right: 10%;
}

/* Fluid Centered Content */
.layout-fluid-centered-60 {
    width: 100%;
    padding-inline: 2rem;
    padding-left: 20%;
    padding-right: 20%;
}

/* Fluid 3-6-3 */
.layout-fluid-3-6-3 {
    grid-template-columns: 1fr 2fr 1fr;
}

/* Fluid Content + Sidebar (8-4) */
.layout-fluid-content-sidebar {
    grid-template-columns: 2fr 1fr;
}

/* Fluid 2 Equal Columns */
.layout-fluid-2col {
    grid-template-columns: repeat(2, 1fr);
}

/* Fluid 3 Equal Columns */
.layout-fluid-3col {
    grid-template-columns: repeat(3, 1fr);
    padding: 20px 5% 5px 5%;
}

/* Fluid 4 Equal Columns */
.layout-fluid-4col {
    grid-template-columns: repeat(4, 1fr);
}

/* Tablet */
@media (max-width: 992px) {
    .layout-fluid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
    .layout-fluid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .layout-fluid-2col,
    .layout-fluid-3col,
    .layout-fluid-4col,
    .layout-fluid-3-6-3,
    .layout-fluid-content-sidebar {
        grid-template-columns: 1fr;
    }
}

/* ==========================
   Font Import
========================== */

@font-face {
    font-family: 'IBM Plex Sans';
        src: url('../../fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
        }
  @font-face {
      font-family: 'IBM Plex Sans';
          src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff2') format('woff2');
          font-weight: 400;
          font-style: normal;
          font-display: swap;
          }
    @font-face {
      font-family: 'IBM Plex Sans';
          src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff2') format('woff2');
          font-weight: 400;
          font-style: italic;
          font-display: swap;
          }
    @font-face {
      font-family: 'IBM Plex Sans';
          src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-Bold.woff2') format('woff2');
          font-weight: 600;
          font-style: normal;
          font-display: swap;
          }
  /* ---------------------------------------------------------- */
    @font-face {
      font-family: 'IBM Plex Serif';
          src: url('../fonts/IBM_Plex_Serif/IBMPlexSerif-Regular.woff2') format('woff2');
          font-weight: 400;
          font-style: normal;
          font-display: swap;
          }
    @font-face {
      font-family: 'IBM Plex Serif';
          src: url('../fonts/IBM_Plex_Serif/IBMPlexSerif-Italic.woff2') format('woff2');
          font-weight: 400;
          font-style: italic;
          font-display: swap;
          }
  /* ---------------------------------------------------------- */
    @font-face {
      font-family: 'IBM Plex Mono';
          src: url('../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.woff2') format('woff2');
          font-weight: 400;
          font-style: normal;
          font-display: swap;
          }

/* ==================================================
   Visibility Utilities
   SM: 0-767px
   MD: 768-991px
   LG: 992-1339px
   XL: 1340px +
   ================================================== */

/* Hidden by default */
.mobile-only, .tablet-only, .desktop-only {
    display: none;
}

/* Visible by default */
.hide-mobile, .hide-tablet, .hide-desktop {
    display: block;
}

/* Mobile: 0 - 767px */
@media (max-width: 767px) {
    .mobile-only {display: block;}
    .hide-mobile {display: none;}
}

/* Tablet: 768px - 991px */
@media (min-width: 768px) and (max-width: 991px) {
    .tablet-only {display: block;}
    .hide-tablet {display: none;}
}

/* Desktop: 992px+ */
@media (min-width: 992px) {
    .desktop-only {display: block;}
    .hide-desktop {display: none;}
}

/* ==========================
   Column Flow
========================== */

/* Default */
.column-flow-2,
.column-flow-3,
.column-flow-4 {
    column-count: 1;
    margin:0 0 30px 0;
    column-gap:30px;
    column-rule: 1px dotted #000;
        -webkit-column-rule: 1px dotted #000; /* Chrome, Safari, Opera */
}

/* Tablet */
@media (min-width: 768px) {
    .column-flow-2,
    .column-flow-3,
    .column-flow-4 {
        column-count: 2;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .column-flow-3,
    .column-flow-4 {
        column-count: 3;
    }
}

/* Large desktop */
@media (min-width: 1340px) {
    .column-flow-4 {
        column-count: 4;
    }
}

/* ==========================
   Other
========================== */