/****************************************************************************
 * customize.css – Projekt: igzl.ch
 * Basis: Premium Contao Theme
 * Hinweis: Reihenfolge & Struktur beachten
 ****************************************************************************/

/****************************************************************************
 * 0. Lokale Fonts (Google Fonts Download z. B. über google-webfonts-helper)
 ****************************************************************************/

/* vollkorn-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Vollkorn';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/vollkorn-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* vollkorn-italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Vollkorn';
   font-style: italic;
   font-weight: 400;
   src: url('../fonts/vollkorn-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
/* vollkorn-900 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Vollkorn';
   font-style: normal;
   font-weight: 900;
   src: url('../fonts/vollkorn-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }


/* =========================================================
	 1. Reset / Fixes
   ========================================================= */
html, body {
	scroll-behavior: smooth;
}
button {
	-webkit-appearance: none;
}


/* =========================================================
	 2. Farbdefinitionen (Projektfarben)
   ========================================================= */
:root {
	--bodyColor: #636363;
	--secondColor: #b9b9b9;
	--accentColor: #e2001a;
	--bgColor1: #d9eaf2;
	--bgColor2: #2e3d45;
	--white: #fff;
}


/* =========================================================
	 3. Typografie
   ========================================================= */
html {
	font-size: 18px;
}

body {
	font-size: 1rem;
	font-family: 'Vollkorn';
	line-height: 1.6;
	color: var(--bodyColor);
}

h1, h2 {
	font-family: 'Vollkorn';
	font-weight: 900;
	color: var(--secondColor);
}

h1 {
	line-height: 1.1;
	letter-spacing: -0.05rem;
}

h2 {
	line-height: 1.2;
	letter-spacing: -0.025rem;
}

p + h2, ul + h2 {
	margin-top: 2rem;
}

h3:not(.home h3, #footer h3), h4, h5, h6 {
	font-family: 'Vollkorn';
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.05rem;
	color: var(--bodyColor);
}

h1, .h1, .home h2 { font-size: 4rem; }
h2, .h2, .home h3 { font-size: 2rem; }
h3, .h3 { font-size: 1.333rem; margin-bottom: 0.666rem; }

.home h3 {
	color: var(--secondColor);
}

h3:not(.home h3, #footer h3) {
	margin-top: 27px;
}


/* =========================================================
	 4. Top Bar, Header, Navigation
   ========================================================= */
.inside.topbar {
	text-align: right;
}

.inside.topbar .mod_customnav, .inside.topbar .mod_customnav ul, .inside.topbar .mod_socials {
	display: inline;
}

.inside.topbar .mod_customnav ul li a {
	font-size: 0.833rem;
	letter-spacing: 0.02rem;
	padding-left: 15px;
}

#top .mod_socials {
	overflow: hidden;
	margin-left: 20px;
	margin-right: 5px;
}

#top .mod_socials a {
	display: inline;
	float: none;
	text-align: center;
}

#top .mod_socials a i.fa:before {
	position: relative;
	top: 2px;
}

.logo {
	padding: 40px 20px 20px;
}

.logo a {
	background-image: url("../img/igzl.svg");
}

.mainmenu ul li a {
	color: var(--white);
	font-size: 1rem;
}

.header.cloned {
	background: #fff;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 100%);
	backdrop-filter: blur(10px);
	box-shadow: none;
	border-bottom: 1px solid rgba(200,200,200,0.5);
}

.header.cloned .mainmenu ul li a.a-level_1.trail:not(.highlight) span, .header.cloned .mainmenu ul li a.a-level_1.active:not(.highlight) span {
	border-bottom: 1px solid #393939;
}


/* =========================================================
	 5. Buttons & Links
   ========================================================= */

#main .ce_text a, #main .ce_text p a {
	color: var(--accentColor);
	text-decoration: none;
}

#main .ce_hyperlink a, button.submit {
	font-size: 0.833rem;
	font-weight: 900;
	padding: 0.4rem 2.75rem;
	border-radius: 7px;
	text-transform: none;
	color: #fff;
	background: var(--accentColor);
}

.back {
	margin-top: 30px;
}


/* =========================================================
	 6. Content-Elemente (Contao spezifisch)
   ========================================================= */
#top-wrapper #top {
	border-bottom: none;
}

#header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255,255,255,0.2);
	z-index: 0; /* liegt hinter dem Logo */
}

#slider .slotholder:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 400px;
	background: #000000;
	background: linear-gradient(180deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
	content: '';
}

#slider .slotholder:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200px;
	background: #000000;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
	content: '';
}

#slider .slider-headline {
	position: absolute;
	bottom: -3px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999999;
	width: 100%;
	max-width: var(--contentBoxedWidth);
	margin-left: 30px;
}

#slider .slider-headline h1 {
	font-size: 8rem;
	line-height: 1;
	color: var(--white);
	letter-spacing: -0.1rem;
	margin-bottom: -2.0rem;
}

#slider .slider-headline h1 span.full {
	font-size: 2rem;
	line-height: 1;
	position: absolute;
	left: 350px;
	top: 8px;
	letter-spacing: 0.001%;
}

.mod_pageimage .inside > .container {
	height: 450px;
}

#slider.empty {
	height: 250px;
	background: var(--bgColor1);
	background: linear-gradient(180deg,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
}

.mod_pageimage .inside:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
	background: #000000;
	background: linear-gradient(180deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
	content: '';
}

.mod_pageimage .inside.style2 {
	background-position: top center;
}

.mod_pageimage .inside.style3 {
	background-position: bottom center;
}

.ce_headline {
	margin-bottom: 2.2rem;
}

.newslist-v4 .image_container {
	border: none;
	border-radius: 7px 7px 0 0;
}

.newslist-v4-inside {
	height: 100%;
	border: 1px solid #dcdddd;
	border-radius: 7px;
}

.newslist-v4 .content {
	border: none;
}

.newslist-v4 .content a, .mod_eventlist .content a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -3000px;
}

.teaser .h3 {
	color: var(--secondColor);
	text-align: center;
}

.teaser p {
	font-size: 0.833rem;
	text-align: center;
}

.mod_eventlist_v3 .item-inside:hover {
	opacity: 0.9;
}

.mod_eventlist_v3 .item-inside, .mod_eventlist_v3 .item:hover .item-inside {
	padding: 0;
	border-radius: 7px;
	height: 100%;
	border: 1px solid #dcdddd;
}

.mod_eventlist_v3 .image_container {
	margin-bottom: 0;
}

.mod_eventlist_v3 .image_container img {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.mod_eventlist_v3 .item-inside .content {
	padding: 35px;
	text-align: center;
}

.mod_eventlist_v3 .date {
	top: 0;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	padding: 12px;
}

.mod_eventlist_v3 .date .day {
	font-weight: 900;
	font-size: 2rem;
	line-height: 2rem;
	letter-spacing: -0.05rem;
}

.mod_eventlist_v3 .date .month, .mod_eventlist_v3 .date .year {
	font-weight: 900;
	font-size: 0.8rem;
}

span.pipe {
	padding-left: 10px;
	padding-right: 10px;
}

.image_container a {
	display: inline;
	padding-top: 3px;
}

.image_container a img {
	margin-top: 3px;
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
}

.ce_image.notransition .image_container a img {
	margin-top: 0px;
}

.image_container a:hover img {
	margin-top: 0;
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
}

.ce_leadertext.version1 {
	max-width: 800px;
	font-weight: 900;
	line-height: 1.4;
	color: var(--secondColor);
}

.ce_text + div:not(.ce_text, .ce_text + .ce_revolutionslider) {
	margin-top: 30px;
}

.ce_table table th {
	background: none;
	color: var(--bodyColor);
}

.ce_table table th, .ce_table table td {
	font-size: 0.85rem;
	line-height: 1.3;
	padding: 6px 3px 6px 0;
	vertical-align: top;
}

.ce_table + .ce_text.format-p-small * {
	padding-top: 10px;
	font-size: 0.7rem;
}

.keinumbruch {
	white-space: nowrap;
}

.btn-size-large {
	transform: scale(1.5);
}

.ce_downloads li.download-element.ext-pdf .image_container + a {
	padding-top: 10px;
	display: block;
}

.ce_downloads.grid ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 Spalten nebeneinander */
	gap: 2rem; /* Abstand zwischen den Elementen */
	list-style: none; /* Aufzählungszeichen weg */
	padding: 0;
	margin: 0;
}

.ce_downloads.grid li.download-element {
  display: flex;
  flex-direction: column; /* Bild oben, Text unten */
  align-items: center;    /* zentriert */
  text-align: center;
}

.ce_downloads.grid li.download-element figure {
  margin: 0 0 1rem 0; /* Abstand zum Textlink */
}

.ce_downloads.grid li.download-element img {
  max-width: 100%; /* Bilder passen sich an die Spalte an */
  height: auto;
}

.ce_downloads.grid li.download-element a[type="application/pdf"]:hover {
  text-decoration: underline;
}

.ce_downloads.grid span {
	display: block;
}

form .widget-radio span {
	display: inline-flex;
	margin-right: 15px;
}

form fieldset {
	border: none;
	font-size: 0.9rem;
}

form fieldset legend {
	background: none;
	color: var(--bodyColor);
	padding: 0;
}

input:active {
	transform: none;
}

:focus-visible {
	outline: 1px solid var(--bodyColor);
	outline-offset: -1px;
}

input:hover:not([type="submit"]), button:hover:not([type="submit"]), textarea:hover {
	border: 1px solid rgba(0,0,0,0.2);
}

.form-confirmation {
	background: var(--bgColor1);
	padding: 30px 30px 15px;
	margin-top: 65px;
	border-radius: 10px;
	line-height: 1.3;
}

.small {
	font-size: 0.75rem;
}

.ce_text.width-l {
	max-width: 800px;
}

.ce_download_default a {
	background: var(--accentColor);
	color: #fff;
	padding: 15px 90px 15px 15px;
	border-radius: 10px;
	position: relative;
	display: inline-block;
	font-size: 0.9rem;
	line-height: 1.6;
	font-weight: 900;
}

.ce_download a:after {
	font-size: 40px;
	right: 26px;
	color: rgba(255,255,255,0.4)
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	top: 29px;
}

.ce_download_default a:hover:after {
	color: rgba(255,255,255,1);
	right: 23px;
	font-size: 44px;
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	top: 27px;
}

.ce_image_text_box_v2 .ce_headline {
	font-size: 1.33rem;
}

.video_container {
	height: 360px;
}

.ce_youtube iframe {
	position: static;
}

.ce_download a span.size {
	padding-left: 7px;
}

.ce_tabs .tabs.horizontal {
	text-align: left;
}

.ce_text .image_container.float_above {
	margin-bottom: 30px;
}

.ce_text .image_container.float_below {
	margin-top: 30px;
}

.event h1 span {
	font-size: 2rem;
	line-height: 1.3;
	display: block;
}

.mod_eventreader .location:before {
	display: none;
}

.js .cd-h-timeline__dates::before, .js .cd-h-timeline__dates::after {
	display: none;
}

.mod_eventlist_v4 .event {
	background: var(--secondColor);
	opacity: 1;
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
}

.mod_eventlist_v4 .event:hover {
	background: var(--secondColor);
	opacity: 0.8;
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
}


/* Isotope Gallery & Colorbox Styling
_______________________________________________________*/
.ce_gallery .content {
  background: rgba(237,232,224,0.8); /* Thumbnail Hover Overlay */
}

#cboxOverlay {
  background: #171310; /* Hintergrundfarbe Colorbox */
  opacity: 0.85 !important; /* Hintergrundopazität Colorbox */
}

#colorbox, #colorbox * {
  overflow: visible !important;
}

#cboxContent {
  position: relative !important;
  background: transparent;
}

#cboxLoadedContent {
  border: 5px solid rgba(0,0,0,0);
  background: transparent;
}

#cboxCurrent {
  display: none !important;
}

#cboxClose {
  top: -13px;
  background: url(../img/colorbox-controls.png) no-repeat top center;
}

#cboxPrevious {
  background: url(../img/colorbox-controls.png) no-repeat top left;
}

#cboxPrevious:hover {
  background-position: left -66px !important;
}

#cboxNext {
  background: url(../img/colorbox-controls.png) no-repeat top right;
}

#cboxNext:hover {
  background-position: right -66px !important;
}

#cboxPrevious,
#cboxNext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999; /* sicherstellen, dass sie über dem Bild liegen */
}

#cboxPrevious {
  left: -12px; /* Abstand nach links – anpassen je nach Bedarf */
}

#cboxNext {
  right: -12px; /* Abstand nach rechts – anpassen je nach Bedarf */
}

#cboxPrevious, #cboxNext {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#cboxPrevious:focus, #cboxNext:focus {
  outline: none;
}


/* =========================================================
	 7. Footer
   ========================================================= */
#footer p {
	font-size: 0.833rem;
}

#footer .impressumdatenschutz p {
	margin-top: 10px;
}

#footer .impressumdatenschutz p, #footer .impressumdatenschutz p a {
	color: #94948f
}

#footer .impressumdatenschutz p a:hover {
	color: var(--secondColor);
}

.top-link {
	background: rgba(255,255,255,0.8);
	transition: all .3s ease-in-out;
	-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1); 
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
	backdrop-filter: blur(3px);
}

.top-link:hover {
	background: rgba(255,255,255,1);
	transition: all .3s ease-in-out;
}

.top-link a {
	font-size: 18px;
}

.top-link a i {
	color: #000;
}

.top-link .progress-ring circle {
	stroke: var(--bg-customColor1);
}


/* =========================================================
	 8. Utilities / Helferklassen
   ========================================================= */
.text-center { text-align: center !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }


/* =========================================================
	 9. Responsive Anpassungen
   ========================================================= */
/* Bis Satzspiegel (>= 1240px) */
@media screen and (max-width: 1240px) {
	
	#slider .slider-headline {
		width: 90%;
		left: -10px;
		transform: none;
	}
	
}


/* Ab Tablet (>= 768px) */
@media screen and (min-width: 768px) {
	
	.header.original .logo {
		width: 302px;
		height: 175px;
		position: absolute;
		top: -50px;
		z-index: 9999999999999999 !important;
		background: var(--white);
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	
	.mainmenu li.meta, .smartmenu-table li.meta {
		display: none;
	}
	
	.smartmenu-content .subitems_trigger:before {
		content: "\f107";
		font-family: FontAwesome;
		margin-left: 15px;
		transition-duration: 0.3s;
		transition-property: transform;
		display: inline-block;
	}
	
	.smartmenu-content .mod_navigation li.open > .subitems_trigger:before {
		content: "\f107";
		font-family: FontAwesome;
		margin-left: 15px;
		transition-duration: 0.3s;
		transition-property: transform;
		display: inline-block;
		transform: rotate(180deg);
	}
	
	.mod_newslist {
		margin-left: -15px;
		margin-right: -15px;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
	}
	
	.mod_newslist_v4 {
		margin-left: 0;
		margin-right: 0;
	}
	
	.mod_newslist .autogrid, .mod_eventlist .autogrid {
		padding-left: 9px;
		padding-right: 9px;
	}
	
	.autogrid_row.divider .column:not(.autogrid_row.divider .column:last-of-type)  {
		border-right: 1px solid var(--secondColor);
	}
	
	.desktop-mt-s {
		margin-top: 60px;
	}
	
	.desktop-mb-s {
		margin-bottom: 60px;
	}
	
}

/* Bis Tablet (< 768px) */
@media screen and (max-width: 767px) {
	
	body.content_page #fix-wrapper {
		position: absolute;
	}
	
	.mmenu_trigger {
		right: 20px;
	}
	
	#slider .slider-headline {
		width: 90%;
		left: -10px;
		transform: none;
	}
	
	#slider .slider-headline h1 {
		font-size: 19vw;
	}

	h1, .h1, .home h2 { font-size: 2.5rem; }
	h2, .h2, .home h3 { font-size: 1.5rem; }
	h3, .h3 { font-size: 1rem; margin-bottom: 0.333rem; }
	
	h1 br {
		display: none;
	}
	
	.ce_leadertext.version1 p {
		font-size: 1.1rem;
	}
	
	.autogrid {
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.mobile-center {
		text-align: center;
	}
	
	.ce_downloads.grid ul {
		display: block;
	}

	.footer {
	text-align: center;
	}
}

/* Kleine Grössen (< 500px) */
@media screen and (max-width: 499px) {
	
	.ce_table {
		max-width: 100%;
	}
	
	.ce_table table th, .ce_table table td {
		font-size: 3vw;
	}
	
	.ce_table + .ce_text.format-p-small * {
		padding-top: 0.5vw;
		font-size: 3vw;
	}
	
}