/* ==============================
   WRAPPER & CLEARFIX

 * @package    OFFO MASTER
 * @author     offo.studio
 * @version    1.0.0
 * @created    2025-11-22
 * @license    Copyright © 2025 offo.studio

============================== */
.wrapper {
  margin: 0 auto;
  clear: both;
  box-sizing: border-box;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.cf::before,
.cf::after {
  content: "";
  display: table;
}
.cf::after {
  clear: both;
}


/* ==============================
   STANDARD COLUMNS (cX)
============================== */
.c1  { width: 8.3334%; margin: 0 auto; }
.c2  { width: 16.6667%; margin: 0 auto; }
.c3  { width: 25%; margin: 0 auto; }
.c4  { width: 33.3334%; margin: 0 auto; }
.c5  { width: 41.6667%; margin: 0 auto; }
.c6  { width: 50%; margin: 0 auto; }
.c7  { width: 58.3334%; margin: 0 auto; }
.c8  { width: 66.6667%; margin: 0 auto; }
.c9  { width: 75%; margin: 0 auto; }
.c10 { width: 83.3334%; margin: 0 auto; }
.c11 { width: 91.6667%; margin: 0 auto; }
.c12 { width: 100%; margin: 0 auto; }

/* Alle cX Box-Sizing sichern */
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {
  box-sizing: border-box;
}

/* ==============================
   GRID SYSTEM
============================== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 0;
  row-gap: 2rem;
}

.grid.gap {
  column-gap: 4.166%;
}

.grid.gap.wide {
  column-gap: 8.3334%;
}

/* Grid Child Span Definition */
.grid .gc1  { grid-column: span 1; }
.grid .gc2  { grid-column: span 2; }
.grid .gc3  { grid-column: span 3; }
.grid .gc4  { grid-column: span 4; }
.grid .gc5  { grid-column: span 5; }
.grid .gc6  { grid-column: span 6; }
.grid .gc7  { grid-column: span 7; }
.grid .gc8  { grid-column: span 8; }
.grid .gc9  { grid-column: span 9; }
.grid .gc10 { grid-column: span 10; }
.grid .gc11 { grid-column: span 11; }
.grid .gc12 { grid-column: span 12; }

/* ==============================
   FULL SECTION / IMAGE HANDLING
============================== */
section.full {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 110;
}

section.full article,
article.full {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

section.full .image {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

section.full .gal .image {
  position: relative;
}

/* ==============================
   RESPONSIVE
============================== */
@media only screen and (max-width: 1024px) {
  .c1, .c2 { width: 25%; }
  .c3, .c4, .c5 { width: 50%; }
  .c6, .c7, .c8, .c9 { width: 80%; }

  .grid .gc1, .grid .gc2, .grid .gc3, .grid .gc4, .grid .gc5, 
  .grid .gc6, .grid .gc7, .grid .gc8, .grid .gc9, .grid .gc10, 
  .grid .gc11, .grid .gc12 {
    grid-column: span 6;
  }
}

@media only screen and (max-width: 768px) {
  .c1, .c2 { width: 25%; }
  .c3 { width: 33.3334%; }
  .c4, .c5, .c6 { width: 50%; }
  .c7, .c8, .c9 { width: 80%; }

  .grid .gc1, .grid .gc2, .grid .gc3, .grid .gc4, .grid .gc5, .grid .gc6 {
    grid-column: span 6;
  }
  .grid .gc7, .grid .gc8, .grid .gc9, .grid .gc10, .grid .gc11, .grid .gc12 {
    grid-column: span 12;
  }
}

@media only screen and (max-width: 600px) {
  main { min-height: auto; }

  .wrapper.grid { padding-left: 0; padding-right: 0; }

  .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9,
  .c10, .c11, .c12 { width: 100%; padding-left: 5%; padding-right: 5%; }

  .grid .gc1, .grid .gc2, .grid .gc3, .grid .gc4, .grid .gc5,
  .grid .gc6, .grid .gc7, .grid .gc8, .grid .gc9,
  .grid .gc10, .grid .gc11, .grid .gc12 { grid-column: span 12; }
}