/****************************************************************************
  * customize.css – Projekt: theater-maladers.ch
  * Basis: Premium Contao Theme
  * Hinweis: Reihenfolge & Struktur beachten
  ****************************************************************************/
 
/****************************************************************************
  * 0. Lokale Fonts (Google Fonts Download z. B. über google-webfonts-helper)
****************************************************************************/ 
/* source-sans-3-300 - latin */
@font-face {
	font-display: swap;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/source-sans-3-v19-latin-300.woff2') format('woff2');
}
/* source-sans-3-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');
}
/* source-sans-3-700 - latin */
@font-face {
	font-display: swap;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/source-sans-3-v19-latin-700.woff2') format('woff2');
}
/* special-gothic-condensed-one-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Special Gothic Condensed One';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/special-gothic-condensed-one-v2-latin-regular.woff2') format('woff2');
}

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

/* =========================================================
   2. Farbdefinitionen (Projektfarben)
========================================================= */
:root {
	--bodyColor: #333;
	--secondColor: #f2da00;
	--accentColor: #1e4d78;
	--bg-customColor1: #dbe0e5;
	--bg-customColor2: #f0f1f2;
	--white: #fff;

	--h1-fontSize: 6rem;
	--h2-fontSize: 3rem;
	--h3-fontSize: 1.5rem;
	--h4-fontSize: 1.3rem;
	--h5-fontSize: 1.2rem;
	--h6-fontSize: 1.1rem;
}

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

body {
	font-size: 1rem;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	color: var(--bodyColor);
}

h1, .h1 {
	font-family: 'Special Gothic Condensed One';
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	color: var(--accentColor);
	hyphens: none;
	-webkit-hyphens: none;
	margin-bottom: 60px;
}

.ce_leadertext.version1 .headline {
	margin-bottom: 30px;
	font-weight: 900;
	line-height: 1.3;
}

h2, h2.ce_headline, .h2 a {
	font-family: 'Special Gothic Condensed One';
	font-style: normal;
	font-weight: 900;
	line-height: 1 !important;
	color: var(--bodyColor);
	margin-bottom: 40px;
}

.datenschutzerklaerung h2 {
	margin: 40px 0 20px;
}

h3, h4, h5, h6 {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.05rem;
	color: var(--bodyColor);
}

h1 span {
	display: block;
	hyphens: none;
	-webkit-hyphens: none;
}

h1 span.first {
	font-family: 'Special Gothic Condensed One';
	font-style: normal;
	font-size: var(--h2-fontSize);
	font-weight: 900;
	line-height: 1 !important;
	color: var(--bodyColor);
	margin-bottom: 10px;
	text-transform: none;
}

h1 span.second, h1 span.fourth {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--bodyColor);
	padding-left: 3px;
	text-transform: none;
}

h1 span.second { margin-bottom: 20px; }
h1 span.third { letter-spacing: -0.05rem; }
h1 span.fourth { margin-top: 20px; }

/* =========================================================
   4. Navigation
========================================================= */
.mainmenu ul li a {
	color: var(--white);
	font-size: 1.2rem;
}

.content_page .stickyheader { display: none; }

/* =========================================================
   5. Buttons & Links
========================================================= */
#main .ce_text a, #main .ce_text p a {
	color: var(--accentColor);
	text-decoration: none;
}

.btn a, .ce_hyperlink a, .hyperlink_txt, .stoerer a {
	display: inline-block;
	transform-origin: center center;
	transition: transform 0.2s ease-in-out !important;
}

.btn a:hover, .ce_hyperlink a:hover { transform: scale(1.05) !important; opacity: 1; }

.ce_hyperlink { overflow: visible; }

#slider .ce_hyperlink.stoerer {
	display: inline-block;
	position: absolute;
	top: 190px;
	right: 0;
	z-index: 99999999;
	overflow-x: hidden;
	height: 182px;
	width: 360px;
}

.stoerer a {
	background: var(--secondColor);
	font-family: 'Special Gothic Condensed One';
	font-style: normal;
	text-transform: uppercase;
	color: var(--bodyColor);
	font-size: 32px;
	font-weight: 900;
	padding: 25px 20px 25px 0;
	rotate: -10deg;
	margin-left: 45px;
	margin-top: 30px;
	width: 340px;
	position: relative;
	border: none;
}

.stoerer a:hover { opacity: 1 !important; }

.stoerer.cta a {
	rotate: none;
	padding: 65px 20px 60px;
	margin: 0;
	width: 100%;
}

.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);
}


/* =========================================================
   6. Content-Elemente (Contao spezifisch)
========================================================= */


.ce_headline { margin-bottom: 1rem; }
.ce_leadertext.version1 { max-width: 800px; }
.ce_leadertext.version1 p { font-weight: 400; }

table {
	border-collapse: collapse;
	width: 100%;
	max-width: 800px;
}
table th, table td {
	border: 1px solid #ddd;
	padding: 0.6rem;
}
table td:first-of-type { font-weight: 700; width: 30%; }

.ce_table .table-striped td, .ce_table.table-striped td { background: rgba(200,200,200,0.15); }

#colorbox .mod_article:not(.fullwidth) > .container {
	padding: 0;
}

#colorbox .overlay {
	background: transparent;
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 999;
}
#colorbox #map {
	width: 100%;
	height: 650px;
	margin-bottom: -10px;
}
#colorbox #map .leaflet-tile-pane { filter: grayscale(100%); }
#colorbox .leaflet-container a { color: var(--basicColor) !important; }

#colorbox .mod_article > .container {
  max-width: none;
  width: 100%;
}
#colorbox #map {
  width: 100%;
  height: 100%;
  min-height: 650px;
}

.home .mod_newslist > .teaser {
	padding: 70px 0 60px;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--contentPaddingLeftRight);
	padding-right: var(--contentPaddingLeftRight);
}
.home #sonderangebote .mod_newslist .item {
	background: #f0f1f3;
	border: 10px solid var(--secondColor);
}

.newslist-v2 .info { color: var(--bodyColor); }
.newslist-v2 .link {
	font-size: 1.5rem;
	text-transform: none;
}

.ce_tabs .tabs.horizontal { text-align: left; }
.datum { margin-bottom: 20px; }

.newslist-v2 .image_container img, .newslist-v4 .image_container, .newslist-v4 .content { border-radius: 0; }
.newslist-v4-inside h3 { margin-bottom: 0; }

.content_page.auffuehrungen h1 {
	line-height: 0.5;
	margin-top: 30px;
	text-transform: uppercase;
}

.content_page h1 span.jahr { font-size: 3rem; }

.ce_teambox_simple:hover .image_container, .ce_teambox_simple:hover .image_container img {
	transform: none;
}

/* =========================================================
   7. Isotope Gallery & Colorbox Styling
========================================================= */
.ce_gallery .content { background: rgba(237,232,224,0.8); }

#cboxOverlay { background: #171310; opacity: 0.85 !important; }
#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;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
#cboxPrevious { left: -12px; }
#cboxNext { right: -12px; }
#cboxPrevious:focus, #cboxNext:focus { outline: none; }

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

/* =========================================================
   9. Responsive Anpassungen
========================================================= */
/* Ab Tablet (>= 768px) */
@media (min-width: 768px) {
	nav.main-navigation a {
		font-size: 1rem;
		padding: 0.8rem 1.2rem;
	}
	.footer { text-align: left; }

	#slider .ce_bgimage { height: 700px; }
	.smartmenu .smartmenu-trigger .line, 
	.smartmenu .smartmenu-trigger .line:before, 
	.smartmenu .smartmenu-trigger .line:after, 
	.smartmenu-content .smartmenu-close:before, 
	.smartmenu-content .smartmenu-close:after { height: 2px; }
	.smartmenu .smartmenu-trigger .line:before { margin-top: 9px; }
	.smartmenu-content.open { backdrop-filter: blur(10px); border-left: 1px solid #eee; }
	.smartmenu-content .mod_navigation li:not(.floatbox) { text-align: center; }
	.smartmenu-content .mod_navigation a {
		font-family: 'Special Gothic Condensed One';
		font-style: normal;
		font-weight: 900;
	}
	
	.newslist-v4-inside {
		height: 100%;
		background: #fff;
	}
	
	.newslist-v4 .content {
		border: none;
	}
}

/* Bis Tablet (< 768px) */
@media (max-width: 767px) {
	#fix-wrapper { position: absolute; }
	.mmenu_trigger { right: 20px; }
	#mmenu { backdrop-filter: blur(10px); border-top-left-radius: 20px; }
	#mmenu .mod_navigation li a {
		font-family: 'Special Gothic Condensed One';
		font-style: normal;
		font-weight: 900;
	}
	#slider .ce_bgimage { height: 500px; }
	.btn, button, input[type="submit"] { display: block; width: 100%; text-align: center; }
	#slider .ce_hyperlink.stoerer { transform: scale(0.8) !important; top: 340px; right: -37px; }
	.footer { text-align: center; }
	
	h1, h1.h1 span.third {
		font-size: 2.66rem;
		line-height: 1.1;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
	
	h1 span.first {
		font-size: 1.6rem;
	}
	
	table {
		font-size: 1rem;
	}
	
	.ce_table .table-striped td, .ce_table.table-striped td {
		hyphens: none;
		-webkit-hyphens: none;
		white-space: nowrap;
	}
	
	.newslist-v2 {
		flex-direction: column; /* Elemente untereinander */
	}
	
	.newslist-v2 .news-image-v2, .newslist-v2 .news-content-v2 {
		flex: 0 0 100%;
	}
	
	.newslist-v2 .news-content-v2 {
		padding: 0;
	}
	
}