/**
 * Contao 5 Compatibility CSS
 *
 * Maps Contao 5 Twig template class names to the existing Contao 4 theme CSS styling.
 * Contao 5 uses: content-text, content-table, content-image, media--left, media--right
 * Old theme uses: ce_text, ce_table, ce_image, image_container.float_left, .caption
 */

/* =============================================================================
 * content-text: lists (mirrors .ce_text ul/li rules from framework.css)
 * ========================================================================== */

.content-text ul, .content-text ol {
	margin-bottom: 15px;
	padding-left: 26px;
}

.content-text li, .content-text ol {
	line-height: 1.5em;
}

.content-text ul li {
	list-style-type: disc;
	list-style-position: outside;
}

.content-text ol {
	list-style: decimal;
	padding-left: 26px;
}

.content-text ol ol {
	list-style: upper-alpha;
}

/* =============================================================================
 * content-list: standalone list element (Contao 5 list.html.twig)
 * In Contao 5, .content-list is on the wrapper <div>; the <ul>/<ol> is inside.
 * ========================================================================== */

.content-list {
	margin-bottom: 15px;
}

.content-list li {
	line-height: 1.5em;
}

.content-list ul {
	padding-left: 26px;
}

.content-list ul li {
	list-style-type: disc;
	list-style-position: outside;
}

.content-list ol {
	padding-left: 26px;
	list-style-type: decimal;
}

.content-list ol li {
	list-style-type: decimal;
}

/* =============================================================================
 * content-text media: image + text side-by-side (mirrors image_container.float_*)
 * ========================================================================== */

.content-text.media figure {
	position: relative;
	padding: 0;
	line-height: 0;
}

.content-text.media--left figure,
.content-text.media--right figure {
	float: right;
	width: auto;
	padding: 0;
	margin-bottom: 3%;
}

.content-text.media--left figure {
	margin-right: 5%;
	float: left;
}

.content-text.media--right figure {
	margin-left: 5%;
	float: right;
}

.content-text.media figure img {
	display: block;
	height: auto;
	max-width: 100%;
	width: auto;
}

.content-text.media figcaption {
	background: rgba(0,0,0,0.7);
	color: #fff;
	padding: 8px 12px;
	font-size: 0.8667rem;
	border-radius: 3px;
	line-height: 1.3;
	display: inline-block;
	margin-top: 5px;
}

.content-text.media figcaption h1,
.content-text.media figcaption h2,
.content-text.media figcaption h3,
.content-text.media figcaption h4,
.content-text.media figcaption h5,
.content-text.media figcaption h6 {
	color: rgb(255,255,255);
	margin: 0;
}

/* Text flows naturally around the floated figure (no BFC — text wraps below image) */
/* .content-text.media .rte { overflow: hidden } was removed: it created a BFC that
   kept text pinned beside the image. Without it, text flows beside the image then
   continues below it once the image ends, matching the Contao 4 behaviour. */

/* Clearfix for media content */
.content-text.media::after {
	content: '';
	display: table;
	clear: both;
}

/* Mobile: stack image above text */
@media only screen and (max-width: 767px) {
	.content-text.media--left figure,
	.content-text.media--right figure {
		float: none;
		width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* =============================================================================
 * content-table (mirrors .ce_table rules from framework.css)
 * ========================================================================== */

.content-table {
	position: relative;
	overflow: hidden;
	max-width: 100%;
}

.content-table table {
	margin-bottom: 10px;
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	text-align: center;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	position: relative;
}

.content-table table td {
	border-top: solid 1px #E3E3E3;
	padding: 12px;
	text-align: left;
}

.content-table table td p {
	margin: 0;
}

.content-table table th {
	text-align: left;
	padding: 12px;
	color: rgb(255,255,255);
	font-weight: bold;
	background: rgb(152,152,152);
}

.content-table table tfoot td {
	color: rgb(152,152,152);
	font-weight: bold;
}

/* NOTE: .col_last right-align rule intentionally NOT added here.
   In Contao 4 framework.css, only cells with class .col_last were right-aligned.
   Contao 5 Twig templates do not add .col_last, and a :last-child rule would
   incorrectly right-align the value column in Technische Spezifikation tables. */

/* =============================================================================
 * content-image (mirrors .ce_image rules from framework.css)
 * ========================================================================== */

.content-image figure img {
	display: block;
	height: auto;
	max-width: 100%;
	width: auto;
}

/* =============================================================================
 * Navigation submenu font fix
 * Source Sans Pro is not loaded locally; use Roboto Condensed (same as main nav)
 * ========================================================================== */

.mainmenu ul li ul li a {
	font-family: 'Roboto Condensed', sans-serif !important;
}

/* =============================================================================
 * 3-column layout fix for body.sidebar.both (left + main + right)
 *
 * framework.css uses a float + negative-margin hack that breaks in modern
 * browsers. Replace with flexbox so #left / #main / #right appear side-by-side
 * regardless of their DOM order (#main comes first in Contao 5 HTML).
 * ========================================================================== */

body.sidebar.both #container {
	display: flex;
	align-items: flex-start;
}

body.sidebar.both #left {
	order: 1;
	flex: 0 0 20%;
	max-width: 20%;
	float: none !important;
}

body.sidebar.both #main {
	order: 2;
	flex: 0 0 54%;
	max-width: 54%;
	float: none !important;
	margin-right: 0 !important;
}

body.sidebar.both #right {
	order: 3;
	flex: 1 1 auto;
	float: none !important;
	position: static !important;
	left: auto !important;
	margin-right: 0 !important;
}

/* Mobile: stack columns vertically (same as framework.css intent) */
@media only screen and (max-width: 767px) {
	body.sidebar.both #container {
		display: block;
	}
	body.sidebar.both #left,
	body.sidebar.both #main,
	body.sidebar.both #right {
		flex: none;
		max-width: 100%;
	}
}

/* =============================================================================
 * Revolution Slider caption visibility fix
 * RS v4.6.4 GreenSock animations may fail with jQuery 3.7 — ensure captions show
 * ========================================================================== */

.tp-caption.ce_revolutionslider_hyperlink {
	visibility: visible !important;
	opacity: 1 !important;
	display: inline-block !important;
}

/* =============================================================================
 * Revolution Slider text caption visibility fix
 * Same issue as hyperlinks: GreenSock animations fail with jQuery 3.7
 * ========================================================================== */

.tp-caption.ce_revolutionslider_text {
	visibility: visible !important;
	opacity: 1 !important;
}

/* =============================================================================
 * Header layout fix: language selector + mobile contact icons
 *
 * In Contao 4, the language switcher article was inside .mainmenu (floated).
 * In Contao 5, it's a sibling div with .block class (overflow:hidden BFC).
 * Also, .mod_top_phone.meta-nav in the header is mobile-only (class navi-mobil)
 * but has no desktop display:none — it takes full width and breaks float flow.
 * ========================================================================== */

/* Header layout: flexbox reorder so visual order is:
   Logo | LangSwitcher | [gap] | Nav items | Search
   DOM order is: logo, smartmenu, mod_search, nav, mod_top_phone, mod_article(langswitcher)
   order property remaps this without any DOM manipulation. */
.header .inside {
	display: flex;
	align-items: center;
}

.header .inside .logo          { order: 1; flex: 0 0 auto; float: none; }
.header .inside > .mod_article { order: 2; flex: 0 0 auto; float: none; overflow: visible; margin-left: 15px; }
.header .inside nav.mainmenu   { order: 3; flex: 0 0 auto; float: none !important; overflow: visible !important; margin-left: auto; }
.header .inside .mod_search    { order: 4; flex: 0 0 auto; float: none !important; margin-left: 20px; }
.header .inside .smartmenu     { order: 5; }
.header .inside #nav-open-btn  { order: 6; }
.header .inside #offcanvas-top { order: 7; }
.header .inside .clear         { display: none; }

/* Kill clearfix on the lang switcher article (was forcing a new line) */
.header .inside > .mod_article::before,
.header .inside > .mod_article::after {
	content: none !important;
	display: none !important;
}

/* Lang switcher inside the article: remove float, it's positioned by flex */
.header .inside > .mod_article .mod_langswitcher {
	float: none;
	margin: 0;
	position: relative;
}

/* Hide mobile contact icons on desktop */
.header .mod_top_phone.meta-nav {
	display: none;
}

/* Tablet/small desktop (768–1170px): mainmenu is hidden, smartmenu shown.
   Transfer margin-left:auto to .mod_search so search+hamburger stay right. */
@media only screen and (min-width: 768px) and (max-width: 1170px) {
	.header .inside nav.mainmenu {
		margin-left: 0;
	}
	.header .inside .mod_search {
		margin-left: auto !important;
	}
}

/* Mobile: keep flex layout, show contact icons inline with logo + hamburger */
@media only screen and (max-width: 767px) {
	.header .inside {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center !important;
		min-height: 60px;
	}
	/* Logo: fixed size, push contact icons + hamburger right */
	.header .inside .logo {
		flex: 0 0 auto;
		width: 100px !important;
		height: 45px !important;
		max-width: 100px !important;
		max-height: 45px !important;
		margin-right: 0;
		overflow: hidden;
		padding: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	.header .inside .logo a {
		width: 100px !important;
		height: 45px !important;
		max-width: 100px !important;
		display: block;
		background-size: contain !important;
		background-repeat: no-repeat !important;
	}
	/* Contact icons: show inline, vertically centered */
	.header .mod_top_phone.meta-nav {
		display: flex !important;
		align-items: center;
		align-self: center !important;
		order: 2;
		flex: 0 0 auto;
		padding: 0 !important;
		margin: 0 10px !important;
	}
	/* Reset <p> margin inside contact icons */
	.header .mod_top_phone.meta-nav p.navi-mobil {
		display: flex !important;
		align-items: center;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Hamburger: pull out of absolute positioning into flex flow */
	.header .inside #nav-open-btn {
		display: block !important;
		position: static !important;
		align-self: center !important;
		flex: 0 0 auto;
		margin: 0 0 0 10px !important;
		top: auto !important;
		right: auto !important;
		margin-top: 0 !important;
	}
	.header .inside .smartmenu {
		align-self: center !important;
		flex: 0 0 auto;
		margin: 0 !important;
	}
	/* Hamburger pushed to far right */
	.header .inside #nav-open-btn {
		margin-left: auto !important;
	}
	/* Hide elements not needed on mobile */
	.header .inside nav.mainmenu,
	.header .inside .mod_search,
	.header .inside > .mod_article,
	.header .inside .smartmenu,
	.header .inside #offcanvas-top {
		display: none !important;
	}
}

/* =============================================================================
 * content-image: center logos/images with imagemargin (Contao 5 drops the
 * inline margin style that Contao 4 rendered on <figure class="image_container">)
 * ========================================================================== */

.content-image figure {
	text-align: center;
}

.content-image figure img {
	margin: 0 auto;
}

/* =============================================================================
 * tabelle-spezial: wide comparison table — enable horizontal scroll
 * framework.css .block { overflow: hidden } clips the 11-column table.
 * overflow-x:auto creates a new BFC here so scrolling works within this div.
 * ========================================================================== */

.tabelle-spezial {
	overflow-x: auto;
}

.tabelle-spezial table {
	width: auto;
	min-width: 100%;
}

/* =============================================================================
 * German hyphenation for long compound words in narrow column layouts
 * styles.css sets word-wrap:break-word on h1-h6, causing hard mid-character
 * breaks in narrow columns (e.g. sidebar-left 50%-wide ce_text_image_bar).
 * hyphens:auto uses the browser's German dictionary (requires lang="de") to
 * insert soft hyphens at proper syllable boundaries instead.
 * ========================================================================== */

.ce_text_image_bar h2,
.ce_text_image_bar h3,
.ce_text_image_bar h4 {
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* =============================================================================
 * Neutralize imagebox "oversize" class.
 * scripts.js imageboxHeight() adds .oversize when .inside text > tile height.
 * customelements.css then makes .inside position:static and image height:auto,
 * which breaks the overlay layout and collapses background-image divs to 0px.
 * These tiles use background-image (no intrinsic height) with absolute-positioned
 * text overlay — the oversize mode is incompatible. Neutralize it entirely.
 * "body" prefix gives higher specificity than customelements.css rules.
 * ========================================================================== */

body .ce_text_imagebox.oversize .inside {
	position: absolute !important;
	-webkit-transform: none !important;
	-ms-transform: none !important;
	transform: none !important;
}
body .ce_text_imagebox.oversize .ce_text_imagebox_image {
	height: 300px !important;
}

/* =============================================================================
 * Download page tables: horizontal scroll on mobile
 * .content-table has overflow:visible for desktop (tooltip positioning).
 * On mobile, tables overflow the viewport — add horizontal scroll.
 * ========================================================================== */

@media only screen and (max-width: 767px) {
	.content-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* =============================================================================
 * Product page: show text_image_bar images on mobile
 * customelements.css hides .image-left/.image-right on mobile (expects separate
 * .mobile_image_top containers that our renderer doesn't output).
 * Override: show the image and stack it above/below text instead.
 * ========================================================================== */

@media only screen and (max-width: 767px) {
	.ce_text_image_bar .image-right,
	.ce_text_image_bar .image-left {
		display: block !important;
		position: static !important;
		width: 100% !important;
		height: 250px !important;
		overflow: hidden;
	}
	.ce_text_image_bar .image-right img,
	.ce_text_image_bar .image-left img {
		width: 100%;
		height: 250px !important;
		object-fit: cover;
	}
	.ce_text_image_bar .text-left,
	.ce_text_image_bar .text-right {
		width: 100% !important;
		margin-left: 0 !important;
		padding: 30px !important;
		height: auto !important;
	}
	/* Flex column-reverse: image (2nd in DOM) appears above text (1st in DOM) */
	.ce_text_image_bar .inside {
		min-height: 0 !important;
		display: flex !important;
		flex-direction: column-reverse !important;
	}
}

/* =============================================================================
 * Revolution Slider: hide green hyperlink buttons on mobile
 * Buttons are too small to read/tap on narrow screens — remove entirely.
 * ========================================================================== */

@media only screen and (max-width: 767px) {
	.tp-caption.ce_revolutionslider_hyperlink {
		display: none !important;
	}
}