/*
 * equipment-mieten.at – Template eqm
 * Optik nach dem frueheren Helix-Template lt_winery (Werte aus dem Live-CSS: Helix-Cache,
 * Preset 5, templates/lt_winery/css/custom.css, Template-custom_css), ohne Bootstrap und jQuery.
 * Farben: Akzent #eb4947 (Hover #e61c19), Baender #555, Topbar #f5f5f5.
 */

/* ---------- Schrift (lokal, variabel 300–800) ---------- */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url(../fonts/opensans-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url(../fonts/opensans-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--eqm-accent: #eb4947;
	--eqm-accent-hover: #e61c19;
	--eqm-band: #555;
	--eqm-topbar: #f5f5f5;
	--eqm-text: #333;
	--eqm-header-h: 90px;
	--eqm-header-sticky-h: 70px;
	--eqm-chat: #0c8fc4;
	--eqm-chat-hover: #3ca5d0;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
	margin: 0;
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 24px;
	color: var(--eqm-text);
	background: #fff;
	overflow-x: clip;
}
img, video { max-width: 100%; height: auto; vertical-align: middle; }
iframe { max-width: 100%; border: 0; }
a { color: var(--eqm-accent); text-decoration: none; transition: color 400ms, background-color 400ms; }
a:hover, a:focus { color: var(--eqm-accent-hover); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--eqm-accent); outline-offset: 2px; }
/* auf den grauen Baendern reicht Rot nicht fuer 3:1 */
#sp-footer :focus-visible, .sp-page-title :focus-visible { outline-color: #fff; }
h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", sans-serif; line-height: 1.1; margin: 20px 0 10px; color: inherit; }
h1 { font-size: 36px; font-weight: 800; }
h2 { font-size: 30px; font-weight: 600; }
h3 { font-size: 24px; font-weight: 400; }
h4 { font-size: 18px; font-weight: 400; }
h5 { font-size: 14px; font-weight: 600; }
h6 { font-size: 12px; font-weight: 600; }
p { margin: 0 0 10px; }
ul, ol { margin: 0 0 10px; }
hr { border: 0; border-top: 1px solid #eee; margin: 20px 0; }
b, strong { font-weight: 700; }
table { border-collapse: collapse; max-width: 100%; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; padding: 10px 15px; }
.skip-link:focus { left: 10px; }
.icon { width: 1em; height: 1em; vertical-align: -.125em; fill: currentColor; }

.container { width: 100%; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { width: 750px; padding: 0 15px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* ---------- Topbar ---------- */
#sp-top-bar { background: var(--eqm-topbar); color: #999; padding: 8px 0; }
.sp-contact-info { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 0 20px; font-size: 90%; }
.sp-contact-info a { color: var(--eqm-accent); display: inline-flex; align-items: center; gap: 6px; }
.sp-contact-info a:hover { color: var(--eqm-accent-hover); }
.sp-contact-info .icon { color: #999; }
.sp-contact-info .sp-contact-whatsapp a { line-height: 0; }
@media (min-width: 768px) {
	.sp-contact-info { height: 25px; }
	.sp-contact-info li, .sp-contact-info a { line-height: 25px; }
}
.sp-contact-info .sp-contact-whatsapp img { height: 20px; width: auto; }
.sp-contact-info .sp-contact-facebook { margin-left: -6px; }
.sp-contact-info .sp-contact-facebook a { color: #999; font-size: 14px; padding: 0; }
.sp-contact-info .sp-contact-facebook a:hover { color: var(--eqm-accent); }
.sp-contact-info .sp-contact-facebook .icon { color: inherit; width: 8px; height: 16px; }

/* ---------- Header ---------- */
#sp-header-sentinel { height: 0; }
#sp-header {
	position: sticky; top: 0; z-index: 999;
	height: var(--eqm-header-h);
	background: rgba(255, 255, 255, .2);
	box-shadow: 0 3px 3px rgba(0, 0, 0, .05);
	transition: height .6s ease-in-out, background-color .6s ease-in-out;
}
#sp-header > .container { display: flex; align-items: center; height: 100%; }
#sp-logo { flex: 0 0 auto; }
#sp-logo .logo { display: block; padding: 2px 0; }
#sp-logo img { display: block; height: 78px; width: auto; margin-top: 4px; transition: all .4s ease-in-out; }
#sp-menu { flex: 1 1 auto; display: flex; justify-content: flex-end; height: 100%; }
#sp-header.is-sticky { height: var(--eqm-header-sticky-h); background: #fff; }
#sp-header.is-sticky #sp-logo img { height: 62px; margin-top: 0; }

/* Startseite: Header als weisse 20-%-Flaeche ueber dem Slider, Menue weiss (wie live) */
body.home #sp-header:not(.is-sticky) .sp-megamenu-parent > li > a,
body.home #sp-header:not(.is-sticky) .sp-megamenu-parent > li > .sp-menu-heading,
body.home #sp-header:not(.is-sticky) #offcanvas-toggler { color: #fff; }
body.home #sp-header:not(.is-sticky) .sp-megamenu-parent > li.active > a,
body.home #sp-header:not(.is-sticky) .sp-megamenu-parent > li:hover > a,
body.home #sp-header:not(.is-sticky) .sp-megamenu-parent > li:hover > .sp-menu-heading { color: var(--eqm-accent); }

/* ---------- Menue Desktop (Helix-Megamenue) ---------- */
.sp-megamenu-parent { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.sp-megamenu-parent > li { position: relative; display: flex; align-items: center; white-space: nowrap; }
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > .sp-menu-heading {
	display: flex; align-items: center; height: 100%;
	padding: 0 15px;
	font-size: 12px; font-weight: 300; text-transform: uppercase; letter-spacing: 1px;
	color: #111; cursor: pointer; white-space: nowrap;
	transition: color .6s ease-in-out;
}
/* Pfeile wie Font Awesome f107 (unten) und f105 (rechts) */
.sp-megamenu-parent > li.sp-has-child > a::after,
.sp-megamenu-parent > li.sp-has-child > .sp-menu-heading::after {
	content: ""; display: inline-block; width: 5px; height: 5px; margin: -4px 3px 0 5px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li:hover > .sp-menu-heading,
.sp-megamenu-parent > li.active > .sp-menu-heading { color: var(--eqm-accent); }

.sp-megamenu-parent .sp-dropdown { position: absolute; z-index: 10; display: none; width: 240px; white-space: normal; }
.sp-megamenu-parent .sp-dropdown-main { top: 100%; left: 0; }
.sp-megamenu-parent .sp-dropdown-sub { top: 0; left: 100%; }
.sp-megamenu-parent .sp-dropdown.flip { left: auto; right: 0; }
.sp-megamenu-parent .sp-dropdown-sub.flip { right: 100%; }
.sp-megamenu-parent .sp-dropdown-inner { background: #fff; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .2); padding: 20px; }
.sp-megamenu-parent .sp-dropdown-sub .sp-dropdown-inner { box-shadow: 0 0 5px rgba(0, 0, 0, .2); }
.sp-megamenu-parent .sp-dropdown-items { list-style: none; margin: 0; padding: 0; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item { position: relative; display: block; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > .sp-menu-heading { display: block; padding: 10px; color: #141414; cursor: pointer; line-height: 24px; }
.sp-megamenu-parent .sp-dropdown li.sp-has-child > a::after,
.sp-megamenu-parent .sp-dropdown li.sp-has-child > .sp-menu-heading::after {
	content: ""; float: right; width: 5px; height: 5px; margin-top: 9px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > .sp-menu-heading,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:focus-within > a { background: var(--eqm-accent); color: #fff; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a { color: var(--eqm-accent); }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a:hover { color: #fff; }

.sp-megamenu-parent li:hover > .sp-dropdown,
.sp-megamenu-parent li:focus-within > .sp-dropdown,
.sp-megamenu-parent li.open > .sp-dropdown { display: block; }

/* Einblenden wie Helix "menu-fade" (400 ms) */
@keyframes sp-menu-fade-in { from { opacity: 0; } to { opacity: 1; } }
.sp-megamenu-parent li:hover > .sp-dropdown,
.sp-megamenu-parent li.open > .sp-dropdown { animation: sp-menu-fade-in 400ms both; }
@media (prefers-reduced-motion: reduce) {
	.sp-megamenu-parent li:hover > .sp-dropdown,
	.sp-megamenu-parent li.open > .sp-dropdown { animation: none; }
	#sp-header, #sp-logo img { transition: none; }
}

/* Burger: am Desktop unsichtbar, belegt aber wie live 35 px (Menue endet an derselben Stelle) */
#offcanvas-toggler {
	flex: 0 0 auto; width: 30px; height: 44px; margin-left: 0; padding: 0 0 0 10px;
	border: 0; background: none; cursor: pointer; visibility: hidden;
	color: #000; font-size: 20px; line-height: 1;
}
#offcanvas-toggler:hover { color: var(--eqm-accent); }

/* Menue zwischen 980 und 1199 px enger (wie live) */
@media (min-width: 1025px) and (max-width: 1199px) {
	.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > .sp-menu-heading { padding: 0 10px; letter-spacing: 0; }
}

/* Bis 1024 px: Burger statt Desktop-Menue (live war das Menue hier unsichtbar) */
@media (max-width: 1024px) {
	#sp-menu { display: none; }
	#offcanvas-toggler { visibility: visible; margin-left: auto; width: 48px; height: 48px; padding: 0; font-size: 26px; }
	/* Tablet/Handy: weisser Header, Slider darunter (live war der Burger hier weiss auf weiss) */
	#sp-header { background: #fff; }
	body.home #sp-header:not(.is-sticky) #offcanvas-toggler { color: #000; }
	#sp-slider { margin-top: 0; }
}

/* ---------- Offcanvas ---------- */
.offcanvas-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, .5); }
.offcanvas-menu {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999;
	width: 320px; max-width: 88vw; overflow-y: auto; overscroll-behavior: contain;
	background: #333; color: #fff;
	transform: translateX(100%); transition: transform .3s ease;
}
.offcanvas-menu.is-open { transform: none; }
.offcanvas-menu .close-offcanvas {
	position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none;
	color: #fff; font-size: 24px; cursor: pointer;
}
.offcanvas-inner { padding: 60px 0 30px; }
.offcanvas-nav, .offcanvas-nav ul { list-style: none; margin: 0; padding: 0; }
.offcanvas-nav li { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.offcanvas-nav li li { border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.offcanvas-nav a, .offcanvas-nav .sp-menu-heading {
	display: block; padding: 12px 56px 12px 20px; min-height: 48px;
	font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 24px; color: #fff;
}
.offcanvas-nav ul { background: rgba(0, 0, 0, .2); }
.offcanvas-nav ul a, .offcanvas-nav ul .sp-menu-heading { padding-left: 32px; text-transform: none; }
.offcanvas-nav ul ul a, .offcanvas-nav ul ul .sp-menu-heading { padding-left: 44px; }
.offcanvas-nav ul ul ul a { padding-left: 56px; }
.offcanvas-nav a:hover, .offcanvas-nav a:focus { background: rgba(0, 0, 0, .15); color: #fff; }
.offcanvas-nav li.active > a, .offcanvas-nav li.active > .sp-menu-heading { color: #ff8a88; }
.offcanvas-nav li > a[aria-current="page"], .offcanvas-nav li.active > a[aria-current="page"] { color: #fff; background: #c9302c; }
.offcanvas-menu-toggler {
	position: absolute; top: 0; right: 0; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; color: #fff;
}
.offcanvas-menu-toggler::before {
	content: ""; display: block; width: 8px; height: 8px; margin: -4px auto 0;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s;
}
.offcanvas-menu-toggler[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: 4px; }
.offcanvas-contact { list-style: none; margin: 25px 20px 0; padding: 0; display: grid; gap: 10px; }
.offcanvas-contact a {
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
	border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-weight: 400;
}
body.offcanvas-open { overflow: hidden; }

/* ---------- Slider (Startseite): volle Breite, 700 px hoch ab 1170 px, darunter proportional ---------- */
#sp-slider { background: #000; margin-top: calc(-1 * var(--eqm-header-h)); }
.eqm-slider { position: relative; width: 100%; height: min(700px, calc(100vw * 700 / 1170)); overflow: hidden; }
.eqm-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; visibility: hidden; }
.eqm-slider .slide.is-active { opacity: 1; visibility: visible; }
.eqm-slider .slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eqm-slider .slide .caption {
	position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 6%;
	font-size: clamp(28px, 5vw, 58px); line-height: 1.05; font-weight: 800; color: #fff;
	text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
.eqm-slider .slide .caption.center { text-align: center; }
.eqm-slider .slide .caption a { color: #fff; }
/* Pfeile wie RevSlider "solo" (erscheinen beim Ueberfahren) */
.eqm-slider .arrow {
	position: absolute; top: 50%; z-index: 5; width: 40px; height: 40px; margin-top: -20px; padding: 0;
	border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; cursor: pointer; opacity: 0; transition: opacity .3s, background-color .3s;
}
.eqm-slider .arrow:hover { background: #000; }
.eqm-slider .arrow::before {
	content: ""; display: block; width: 12px; height: 12px; margin: 0 auto;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.eqm-slider .arrow.prev { left: 20px; }
.eqm-slider .arrow.prev::before { transform: translateX(2px) rotate(135deg); }
.eqm-slider .arrow.next { right: 20px; }
.eqm-slider .arrow.next::before { transform: translateX(-2px) rotate(-45deg); }
.eqm-slider:hover .arrow, .eqm-slider .arrow:focus-visible { opacity: 1; }
.eqm-slider .dots { display: none; }
@media (hover: none) {
	.eqm-slider .arrow { display: none; }
}

/* ---------- Titelbalken + Breadcrumb ---------- */
.sp-page-title { background: var(--eqm-band); padding: 30px 0; color: #fff; }
.sp-page-title h1 { margin: 0; padding: 0; font-size: 24px; font-weight: 600; line-height: 1; color: #fff; overflow-wrap: anywhere; }
.breadcrumb-wrapper { margin: 10px 0 0; }
.breadcrumb-here { color: #fff; margin-right: 5px; }
.breadcrumb { list-style: none; margin: 0; padding: 0; display: inline; }
.breadcrumb > li { display: inline; color: #fff; }
/* Trenner haengt am vorigen Eintrag: kein "/" am Zeilenanfang */
.breadcrumb > li:not(:last-child)::after { content: "/\00a0"; padding: 0 5px; color: #fff; }
.breadcrumb a { color: #fff; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb > .active { color: rgba(255, 255, 255, .8); }

/* ---------- Inhalt ---------- */
/* Abstand zum Footer wie live: nach dem Text eine Zeile (frueher der JoomSEF-Hinweis), Floats werden umschlossen */
#sp-main-body { padding: 30px 0 0; outline: none; }
#sp-main-body > .container { display: flow-root; }
.com-content-article__body::after { content: ""; display: block; height: 70px; }

/* Bausteine aus den Beitragstexten (Regeln aus templates/lt_winery/css/custom.css) */
.verleihcontent::before, .catoverview p span::before { content: ""; width: 250px; display: block; overflow: hidden; }
.verleihimage { float: right; padding-left: 20px; padding-bottom: 20px; }
.verleiheader { padding-bottom: 10px; }
.verleihcontent { line-height: 2em; }
.verleihhr { clear: both; margin-top: 10px; margin-bottom: 10px; }
.halloween img { float: left; }
.halloween img.wdsmall { width: 200px; }
.halloween img.wdbig { height: 450px; }
.catoverview p { padding-bottom: 20px; clear: both; }
.catoverview img { float: right; max-width: 300px; max-height: 200px; padding: 0 20px 20px 20px; }
.catoverview p span a:last-of-type { display: inline-block; padding-top: 10px; }
a.videolink { display: inline-block; padding-bottom: 10px; }
.underl { text-decoration: underline; }
.heliumtab { margin-bottom: 20px; }
.heliumtab th { text-align: center; padding: 5px; border: 1px solid #000; }
.heliumtab td { text-align: right; padding-right: 50px; border-style: solid; border-color: #000; border-width: 0 1px; }
.heliumtab td:first-child { padding-right: 20px; }
.heliumtab tbody tr.last { border-style: solid; border-color: #000; border-width: 0 0 1px; }
.img-responsive { display: block; max-width: 100%; height: auto; }

/* Startseite: Shop-Ueberschrift (Link, rot, zentriert) */
.starttotalbg h2 { margin-top: 0; }
.starttotalbg h2 a { color: var(--eqm-accent); }

/* Laufband: Text faehrt von rechts nach links, Dauer per JS aus der Textbreite (ca. 20 px/s) */
.marquee { overflow: hidden; padding: 20px 10px 0; white-space: nowrap; cursor: pointer; }
.marquee .marquee-track { display: inline-block; padding-left: 100%; animation: eqm-marquee var(--marquee-duration, 120s) linear infinite; }
.marquee:hover .marquee-track, .marquee.is-paused .marquee-track { animation-play-state: paused; }
@keyframes eqm-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.marquee { white-space: normal; }
	.marquee .marquee-track { animation: none; padding-left: 0; }
}

/* frueher als <style> in den Beitraegen (Datenschutz, AGB) */
.agbrow { padding-bottom: 20px; }

/* YouTube responsiv */
.com-content-article__body iframe[src*="youtube"] { aspect-ratio: 16 / 9; height: auto; }

/* ---------- Mobil: Floats aufheben, nichts darf ueberstehen ---------- */
@media (max-width: 767px) {
	body { font-size: 15px; }
	.com-content-article__body img,
	.com-content-article__body iframe,
	.com-content-article__body [style*="float"],
	.catoverview img,
	.verleihimage,
	.halloween img {
		float: none !important;
		display: block;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto 15px;
		padding: 0 !important;
	}
	.verleihimage img { display: block; margin: 0 auto 10px; }
	.verleihimage br { display: none; }
	.com-content-article__body iframe { width: 100% !important; }
	.verleihcontent::before, .catoverview p span::before { width: auto; }
	.catoverview p span { display: block; }
	.com-content-article__body p[style*="padding-top"] { padding-top: 0 !important; }
	.com-content-article__body table { display: block; overflow-x: auto; }
	.heliumtab td { padding-right: 10px; }
	.com-content-article__body { overflow-wrap: anywhere; }
	.marquee { padding: 15px 0 0; }
	.marquee .marquee-track { padding-left: 30%; }
	.sp-page-title { padding: 20px 0; }
	.sp-page-title h1 { line-height: 1.2; }
	.breadcrumb-wrapper { line-height: 32px; }
	.com-content-article__body li a, .error-page li a { display: inline-block; padding: 6px 0; }
	#sp-main-body { padding: 25px 0 40px; }

	/* Topbar kompakt: Tipp-Buttons, Facebook steht im Offcanvas */
	#sp-top-bar { padding: 0; }
	.sp-contact-info { justify-content: space-around; gap: 0; font-size: 13px; }
	.sp-contact-info li { flex: 1 1 0; display: flex; justify-content: center; }
	.sp-contact-info a { min-height: 44px; min-width: 44px; justify-content: center; }
	.sp-contact-info .sp-contact-facebook { display: none; }
}
@media (max-width: 480px) {
	.sp-contact-info .sp-contact-phone span, .sp-contact-info .sp-contact-email span { display: none; }
	.sp-contact-info .sp-contact-phone a::after { content: "Anrufen"; }
	.sp-contact-info .sp-contact-email a::after { content: "E-Mail"; }
	.sp-contact-info .icon { color: var(--eqm-accent); font-size: 16px; }
}

/* ---------- Galerie (plg_content_eqmgallery, Optik wie SIGPro Classic) ---------- */
ul.eqm-gallery { list-style: none; margin: 8px 0 15px; padding: 8px 0; display: flex; flex-wrap: wrap; gap: 10px; clear: both; }
ul.eqm-gallery li { margin: 0; padding: 0; }
ul.eqm-gallery a {
	display: block; padding: 4px; background: #fff; border: 1px solid #ccc; box-shadow: 3px 3px 5px #888; line-height: 0;
}
ul.eqm-gallery img { display: block; object-fit: cover; }
ul.eqm-gallery a:hover { border-color: var(--eqm-accent); }
@media (max-width: 767px) {
	ul.eqm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
	/* kleine Vorschaubilder (60 px) behalten ihre Groesse und ihr Raster */
	ul.eqm-gallery.small { display: flex; gap: 8px; }
	ul.eqm-gallery a { box-shadow: 2px 2px 3px #aaa; }
	ul.eqm-gallery img { margin: 0 !important; }
	ul.eqm-gallery:not(.small) img { width: 100%; height: auto; aspect-ratio: 1; }
}

/* ---------- Formulare (Convert Forms) ---------- */
/* Convert Forms setzt seine Werte als Variablen per #cf_N; !important gewinnt gegen die ID */
.convertforms.eqm-form { max-width: none; padding: 0 !important; --font: inherit !important; --label-weight: 700 !important; }
.convertforms, .convertforms .cf-label, .convertforms .cf-input, .convertforms .cf-btn { font-family: inherit !important; }
.convertforms.eqm-form .cf-form-wrap { padding: 0 !important; }
.convertforms .cf-fields { margin: 0 !important; }
.convertforms .cf-control-group { margin-bottom: 14px; padding: 0 !important; }
.convertforms .cf-label { font-weight: 700; color: #333; }
.convertforms .cf-required-label { color: #db2828; }
.convertforms .eqm-privacy, .convertforms .eqm-hint { font-size: 14px; line-height: 1.5; color: #666; }
.convertforms input.cf-input, .convertforms select.cf-input, .convertforms textarea.cf-input {
	width: 100%; max-width: 100%; font: inherit; font-size: 16px; font-weight: 400; border-radius: 4px;
}
.convertforms .cf-input::placeholder { color: #767676; opacity: 1; }
.convertforms .cf-btn { background: #e0e1e2 !important; border-color: #e0e1e2 !important; color: rgba(0, 0, 0, .6) !important; font-weight: 700; border-radius: 4px; }
.convertforms .cf-btn:hover, .convertforms .cf-btn:focus-visible { background: #cacbcd !important; border-color: #cacbcd !important; color: rgba(0, 0, 0, .8) !important; }
/* Desktop wie das fruehere Formular (Semantic UI): kleine fette Labels, 38 px hohe Felder, kleiner Button links;
   darunter 16 px Schrift (sonst zoomt iOS beim Antippen) */
@media (min-width: 1025px) {
	.convertforms .cf-label { font-size: 13px !important; line-height: 24px !important; margin-bottom: 4px !important; color: rgba(0, 0, 0, .87) !important; }
	.convertforms .cf-control-group { margin-bottom: 14px !important; }
	.convertforms input.cf-input, .convertforms select.cf-input {
		font-size: 14px; font-weight: 300; line-height: 17px; padding: 9.5px 14px !important; border: 1px solid rgba(34, 36, 38, .15) !important; color: rgba(0, 0, 0, .87) !important;
	}
	.convertforms select.cf-input { height: 38px; padding-top: 0 !important; padding-bottom: 0 !important; }
	.convertforms textarea.cf-input { font-size: 14px; font-weight: 300; line-height: 18px; padding: 11px 14px !important; border: 1px solid rgba(34, 36, 38, .15) !important; color: rgba(0, 0, 0, .87) !important; }
	.convertforms .cf-btn { width: auto !important; font-size: 14px !important; line-height: 14px; padding: 11px 21px !important; border-radius: 4px !important; }
	.convertforms .eqm-privacy, .convertforms .eqm-hint { font-size: 13px; }
}

/* ---------- Footer ---------- */
#sp-footer { background: var(--eqm-band); color: #fff; padding: 20px 0; }
#sp-footer > .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
#sp-footer1 { order: 2; min-width: 345px; }
#sp-footer2 { order: 1; }
#sp-footer a { color: rgba(255, 255, 255, .9); }
#sp-footer a:hover { color: #fff; }
.inlinemenu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.inlinemenu li + li { border-left: 1px solid #fff; }
.inlinemenu li a { display: block; padding: 0 10px; line-height: 24px; }
@media (max-width: 767px) {
	#sp-footer > .container { justify-content: center; text-align: center; }
	#sp-footer1 { order: 1; min-width: 0; }
	#sp-footer2 { order: 2; }
	.inlinemenu ul { justify-content: center; row-gap: 0; }
	.inlinemenu li a { line-height: 44px; padding: 0 10px; }
	#sp-footer { padding-bottom: 80px; }
}

/* ---------- Hinweis-Popup (Modul "Popup") ---------- */
.eqm-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .6); }
.eqm-popup[hidden] { display: none; }
.eqm-popup-box { position: relative; max-width: 550px; width: 100%; max-height: 90vh; overflow: auto; background: #fff; color: #333; box-shadow: 0 0 40px rgba(0, 0, 0, .5); text-align: center; padding: 30px 20px; }
.eqm-popup-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; background: none; color: #333; font-size: 28px; cursor: pointer; }

/* ---------- Live-Chat: Platzhalter im Look des Live Helper Chats ---------- */
.eqm-chat[hidden] { display: none; }
.eqm-chat-btn {
	position: fixed; right: 15px; bottom: 15px; z-index: 1000; width: 65px; height: 65px; padding: 0;
	border: 2px solid #fff; border-radius: 50%; cursor: pointer;
	background: var(--eqm-chat) url(../images/chat-online.svg) no-repeat center / 41px 41px;
	box-shadow: 0 0 17px rgba(50, 50, 50, .5);
}
.eqm-chat-btn:disabled { opacity: .7; cursor: progress; }
.eqm-chat-help {
	position: fixed; right: 23px; bottom: 96px; z-index: 1000; width: 257px; min-height: 72px; padding: 10px;
	border: 1px solid var(--eqm-chat-hover); border-radius: 30px; background: var(--eqm-chat); color: #fff;
	font-family: arial, sans-serif; font-size: 12px; line-height: 1.5; cursor: pointer;
}
.eqm-chat-help:hover { background: var(--eqm-chat-hover); }
.eqm-chat-help::after {
	content: ""; position: absolute; right: 26px; bottom: -17px; width: 0; height: 0;
	border-left: 20px solid transparent; border-right: 10px solid transparent; border-top: 16px solid var(--eqm-chat-hover);
}
.eqm-chat-help img { float: left; margin-right: 10px; border: 1px solid #d0d0d0; border-radius: 30px; }
.eqm-chat-help-title { display: block; font-size: 16px; font-weight: bold; }
.eqm-chat-help-close {
	float: right; margin-top: -5px; padding: 1px 7px 0 6px; border: 0; border-radius: 16px; background: #000; color: #fff;
	font-size: 16px; font-weight: bold; line-height: 21px; cursor: pointer;
}
.eqm-chat-help-close:hover { background: #444; }
body.offcanvas-open .eqm-chat,
body.glightbox-open .eqm-chat,
body.offcanvas-open #lhc_status_container,
body.glightbox-open #lhc_status_container { display: none !important; }
@media (max-width: 1024px) {
	.eqm-chat-help, #lhc_need_help_container { display: none !important; }
	#sp-footer { padding-bottom: 85px; }
}
@media (max-width: 767px) {
	.eqm-chat-btn { right: 10px; bottom: 10px; width: 52px; height: 52px; background-size: 32px 32px; }
	/* das geladene Chat-Symbol nicht mitten im Text (live top:350px), sondern unten rechts */
	#lhc_status_container { top: auto !important; bottom: 10px !important; right: 10px !important; }
}

/* ---------- Lightbox: groessere Schliessen-Flaeche ---------- */
.glightbox-clean .gclose { width: 44px; height: 44px; }

/* ---------- Fehlerseite ---------- */
.error-page .error-code { font-size: 14px; color: #999; }

/* ---------- Druck ---------- */
@media print {
	#sp-top-bar, #sp-header, #sp-footer, .offcanvas-menu, .offcanvas-overlay, #sp-slider, .eqm-chat, #lhc_status_container, #lhc_container, .skip-link { display: none !important; }
	h1.visually-hidden { position: static !important; width: auto !important; height: auto !important; margin: 0 0 10px !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; }
	.sp-page-title { background: none; color: #000; padding: 0; }
	.sp-page-title h1, .breadcrumb, .breadcrumb a, .breadcrumb-here { color: #000; }
}

/* =====================================================================
 * Handy und Tablet (Burger-Bereich bis 1024 px). Bewusst am Dateiende: die Regeln
 * muessen die Basisregeln oben ueberschreiben; der Desktop (> 1024 px) bleibt unberuehrt.
 * Convert Forms, ALTCHA und GLightbox laden ihr CSS nach dieser Datei, daher dort hoehere Spezifitaet.
 * ===================================================================== */

/* Terminliste statt Laufband (von eqm.js erzeugt, nur bis 1024 px sichtbar) */
.marquee-static { display: none; }

@media (max-width: 1024px) {
	:root { --eqm-header-h: 64px; --eqm-header-sticky-h: 64px; }
	/* Open Sans Light ist auf Handy/Tablet zu blass */
	body { font-weight: 400; }
	html { scroll-padding-top: 104px; }

	/* Header kompakt und in beiden Zustaenden gleich hoch (kein Springen beim Scrollen) */
	#sp-header { transition: background-color .3s ease-in-out; }
	#sp-header #sp-logo img,
	#sp-header.is-sticky #sp-logo img { height: 54px; margin-top: 0; }
	#sp-slider { margin-top: 0; }

	/* Topbar: Tipp-Flaechen auch auf Tablets */
	#sp-top-bar { padding: 0; }
	.sp-contact-info { height: auto; }
	.sp-contact-info a { min-height: 44px; min-width: 44px; justify-content: center; }

	/* Footer auf kurzen Seiten am Bildschirmende */
	.body-innerwrapper { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
	#sp-main-body { flex: 1 0 auto; }

	/* Slider: Punkte als Hinweis auf weitere Bilder (Pfeile gibt es ohne Hover nicht) */
	.eqm-slider .dots { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; justify-content: center; }
	.eqm-slider .dots button { width: 36px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
	/* Ueberblenden ohne schwarzen Zwischenzustand: die alte Slide bleibt sichtbar, bis die neue deckt */
	.eqm-slider .slide { transition: opacity 0s linear 1s, visibility 0s linear 1s; }
	.eqm-slider .slide.is-active { z-index: 1; transition: opacity 1s ease; }
	.eqm-slider .dots button::before {
		content: ""; display: block; width: 9px; height: 9px; margin: 0 auto; border-radius: 50%;
		background: rgba(255, 255, 255, .5); box-shadow: 0 0 2px rgba(0, 0, 0, .6);
	}
	.eqm-slider .dots button[aria-current]::before { background: #fff; transform: scale(1.25); }

	/* Anfrage-Links in den Beitraegen als Button */
	.com-content-article__body h3 > a[href^="/buchungsanfrage-"],
	.com-content-article__body h3 > a[href^="/bestellanfrage-"] {
		display: block; padding: 12px 16px; border-radius: 4px; background: #c9302c; color: #fff;
		font-size: 17px; font-weight: 600; line-height: 1.3; text-align: center;
	}
	.com-content-article__body h3 > a[href^="/buchungsanfrage-"]:hover,
	.com-content-article__body h3 > a[href^="/buchungsanfrage-"]:focus,
	.com-content-article__body h3 > a[href^="/bestellanfrage-"]:hover,
	.com-content-article__body h3 > a[href^="/bestellanfrage-"]:focus { background: #a52824; color: #fff; }
	/* auf Tablets floatet das Produktbild noch: Button darunter, sonst ueberlappt er es */
	.com-content-article__body h3:has(> a[href^="/buchungsanfrage-"], > a[href^="/bestellanfrage-"]) { clear: both; }
	/* Halloween: Raster statt unterschiedlich hoher Floats (Handy: 2 Spalten, s. u.) */
	.halloween { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: center; }
	.halloween > :not(img) { grid-column: 1 / -1; }
	.halloween img { float: none !important; width: 100% !important; height: auto !important; max-height: 260px !important; object-fit: contain; margin: 0 !important; padding: 0 !important; }
	.com-content-article__body a[href*="multistore.at/Verleih"],
	.com-content-article__body a[href^="https://www.trockeneis-onlineshop.at"] {
		display: block; margin: 8px 0 14px; padding: 12px 16px; border-radius: 4px; background: #c9302c; color: #fff;
		font-weight: 600; line-height: 1.3; text-align: center;
	}
	.com-content-article__body a[href*="multistore.at/Verleih"]:hover,
	.com-content-article__body a[href*="multistore.at/Verleih"]:focus,
	.com-content-article__body a[href^="https://www.trockeneis-onlineshop.at"]:hover,
	.com-content-article__body a[href^="https://www.trockeneis-onlineshop.at"]:focus { background: #a52824; color: #fff; }
	.com-content-article__body div:has(> a[href*="multistore.at/Verleih"]) { display: block !important; padding: 0 !important; }

	/* Laufband als Terminliste */
	.marquee.has-static { padding: 20px 0 0; white-space: normal; cursor: auto; }
	.marquee.has-static .marquee-track { display: none; }
	.marquee-static { display: block; }
	.marquee-static p { margin: 0 0 6px; font-weight: 600; }
	.marquee-static ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e5e5e5; }
	.marquee-static li { padding: 8px 0; border-bottom: 1px solid #e5e5e5; line-height: 1.45; }
	.marquee-static li b { font-weight: 600; }
	.marquee-static li.is-more { display: none; }
	.marquee-static.is-expanded li.is-more { display: block; }
	.marquee-static { margin-bottom: 20px; }
	.marquee-static button {
		margin-top: 10px; min-height: 44px; padding: 0 16px; border: 1px solid #ccc; border-radius: 4px;
		background: #fff; color: var(--eqm-text); font: inherit; font-weight: 600; cursor: pointer;
	}

	/* Formulare: Button in Akzentfarbe ueber die volle Breite, Spamschutz mit Abstand und grosser Tipp-Flaeche */
	.convertforms .cf-btn { width: 100% !important; min-height: 48px; font-size: 16px !important; background: #c9302c !important; border-color: #c9302c !important; color: #fff !important; opacity: 1 !important; }
	.convertforms .cf-btn:hover, .convertforms .cf-btn:focus-visible { background: #a52824 !important; border-color: #a52824 !important; color: #fff !important; }
	.convertforms .cf-control-group[data-type="altcha"] { margin: 0 0 22px !important; min-inline-size: 0; }
	.convertforms .cf-control-group[data-type="altcha"] > legend { padding-left: 0; padding-right: 0; }
	.convertforms .altcha .altcha-checkbox-wrap { min-height: 44px; display: flex; align-items: center; }
	.convertforms .altcha .altcha-checkbox-wrap label { flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; padding-left: 8px; cursor: pointer; }
	.convertforms.eqm-form select.cf-input:has(option:disabled:checked) { color: #767676 !important; }
	.convertforms input.cf-input[type="date"], .convertforms input.cf-input[type="time"] { height: 48px; }
	.convertforms input.cf-input::-webkit-date-and-time-value { text-align: left; }

	/* Lightbox: groessere Schliessen-Flaeche (GLightbox-CSS laedt spaeter) */
	body .glightbox-clean .gclose { width: 44px; height: 44px; }

	/* Offcanvas: Aufklapp-Pfeil sichtbar vom Link getrennt */
	.offcanvas-menu-toggler { border-left: 1px solid rgba(255, 255, 255, .12); }
}

@media (max-width: 767px) {

	/* Titelbalken kompakt */
	.sp-page-title { padding: 14px 0; }
	.sp-page-title h1 { font-size: 24px; line-height: 1.2; }
	.breadcrumb-here { display: none; }
	.breadcrumb-wrapper { margin-top: 4px; font-size: 13px; line-height: 22px; }
	.breadcrumb a { display: inline-block; padding: 6px 0; }
	.breadcrumb > li:not(:last-child) { white-space: nowrap; }
	.breadcrumb > li:last-child:not(:first-child) { display: none; }
	.breadcrumb > li:nth-last-child(2)::after { content: none; }

	/* Inhalt */
	#sp-main-body { padding: 20px 0; }
	.com-content-article__body::after { height: 20px; }
	.verleihcontent { line-height: 1.6; }
	.com-content-article__body h2 { font-size: 21px; line-height: 1.2; }
	.com-content-article__body h3 { font-size: 19px; line-height: 1.25; }
	.starttotalbg h2 { font-size: 23px; line-height: 1.2; }
	.com-content-article__body a[href^="mailto:"] { display: inline-block; padding: 6px 0; overflow-wrap: normal; }

	/* Tabellen: keine Woerter zerreissen, Helium-Tabelle kompakt */
	.com-content-article__body table { overflow-wrap: normal; }
	.heliumtab th, .heliumtab td, .heliumtab td:first-child { padding: 3px 4px; font-size: 12px; line-height: 20px; }
	.heliumtab td { white-space: nowrap; }
	/* leere Zeilen aus fehlerhaftem Markup (<tr> statt </tr>) */
	.heliumtab tr:not(:has(td, th)) { display: none; }

	/* Bilder: einheitlichere Groessen */
	.catoverview img { max-height: 260px !important; width: auto !important; }
	img.verleihimage, .verleihimage img { max-height: min(60vh, 360px) !important; width: auto !important; }
	.halloween { grid-template-columns: 1fr 1fr; }
	.halloween img { max-height: 240px !important; }

	/* Referenzen: Jahres-Links als Tipp-Flaechen, Galerien ueber die volle Breite */
	.com-content-article__body > a[href^="/referenzen"] {
		display: inline-block; margin: 0 6px 8px 0; padding: 9px 12px; border: 1px solid #ddd; border-radius: 4px; line-height: 1.2;
	}
	.com-content-article__body > a[href^="/referenzen"] + br { display: none; }
	.com-content-article__body > ul { padding-left: 20px; }
	ul.eqm-gallery.small { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
	ul.eqm-gallery.small img { width: 100%; height: auto; aspect-ratio: 1; }

	/* Footer: Platz fuer den Chat-Button, nicht mehr */
	#sp-footer { padding-bottom: 72px; }

	/* Formulare */
	.convertforms textarea.cf-input[rows="10"] { height: 160px; }
}

/* sehr schmale Handys (bis 379 px): Tabelle und Footer-Menue passen sonst nicht in die Breite */
@media (max-width: 379px) {
	.heliumtab th, .heliumtab td, .heliumtab td:first-child { padding: 3px 2px; }
	.inlinemenu li a { padding: 0 7px; font-size: 14px; }
}

/* Handy quer: Kopfbereich darf den kleinen Bildschirm nicht fuellen */
@media (max-width: 1024px) and (max-height: 500px) {
	#sp-top-bar { display: none; }
	.eqm-slider { max-height: 70vh; max-height: 70svh; }
	.sp-page-title { padding: 12px 0; }
	.breadcrumb-here { display: none; }
}