/* ==============================
	 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% }
.c2 { 	width: 16.6667% }
.c3 { 	width: 25% }
.c4 {	width: 33.3334% }
.c5 {	width: 41.6667% }
.c6 {	width: 50% }
.c7 {	width: 58.3334% }
.c8 {	width: 66.6667% }
.c9 {	width: 75% }
.c10 {	width: 83.3334% }
.c11 {	width: 91.6667% }
.c12 {	width: 100% }

/* 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 :is(.gc1, .gc2, .gc3, .gc4, .gc5, .gc6, .gc7, .gc8, .gc9, .gc10, .gc11, .gc12){
		width: 100%;
		grid-column-end: 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 :is(.gc1, .gc2, .gc3, .gc4, .gc5, .gc6) {
		grid-column: span 12;
	}
	.grid :is(.gc7, .gc8, .gc9, .gc10, .gc11, .gc12){
		width: 100%;
		grid-column-end: 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%;
	}

	:is(.c10, .c11, .c12) :is(.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10) {
		padding-left: 0;
		padding-right: 0;
	}	
	.grid :is(.gc1, .gc2, .gc3, .gc4, .gc5, .gc6, .gc7, .gc8, .gc9, .gc10, .gc11, .gc12) {
		grid-column-end: span 12;
	}
}