/* =========================================================
   Shortcode [schaltungswissen]
   ========================================================= */

.ems-sw,
.ems-sw-modal {
	--ems-sw-blue: #245dae;
	--ems-sw-blue-dark: #1b4886;
	--ems-sw-blue-light: #7fa8e5;
	--ems-sw-blue-pale: #eaf1fb;
	--ems-sw-line: #d6dde8;
	--ems-sw-text: #1d2330;
	--ems-sw-muted: #5b6577;
}

.ems-sw {
	/* Abstand der fixierten Kapitelleiste vom oberen Fensterrand.
	   Falls der Website-Header beim Scrollen fixiert bleibt, hier dessen Höhe eintragen, z. B. 80px. */
	--ems-sw-top: 0px;
	--ems-sw-scroll-offset: 80px;
	color: var(--ems-sw-text);
}

/* ---------- Titelbereich ---------- */
.ems-sw-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(160px, 22vw, 300px);
	padding: 2rem 1rem;
	background-color: #f3f5f8;
	background-size: cover;
	background-position: center;
	border-radius: .5rem .5rem 0 0;
}

.ems-sw-hero-title {
	margin: 0;
	color: var(--ems-sw-blue);
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}

/* ---------- Kapitel-Navigation ---------- */
.ems-sw-nav {
	position: sticky;
	top: var(--ems-sw-top);
	z-index: 1010;
	display: flex;
	align-items: stretch;
	background: var(--ems-sw-blue);
	box-shadow: 0 4px 12px rgba(20, 40, 80, .12);
}

.ems-sw-nav-list {
	display: flex;
	flex: 1 1 auto;
	gap: .25rem;
	margin: 0;
	padding: 0 .5rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.ems-sw-nav-list::-webkit-scrollbar { display: none; }

.ems-sw-nav-list li { flex: 0 0 auto; }

.ems-sw-nav-link {
	position: relative;
	display: block;
	padding: .9rem .9rem;
	color: rgba(255, 255, 255, .82);
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s;
}

.ems-sw-nav-link::after {
	content: "";
	position: absolute;
	left: .9rem;
	right: .9rem;
	bottom: .45rem;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transition: transform .2s;
}

.ems-sw-nav-link:hover,
.ems-sw-nav-link:focus-visible { color: #fff; }

.ems-sw-nav-link.is-active {
	color: #fff;
	font-weight: 700;
}

.ems-sw-nav-link.is-active::after { transform: scaleX(1); }

.ems-sw-home {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 1rem;
	color: #fff;
	border-left: 1px solid rgba(255, 255, 255, .25);
}

.ems-sw-home:hover { color: var(--ems-sw-blue-pale); }

/* ---------- Kapitel und Blöcke ---------- */
.ems-sw-kapitel,
.ems-sw [id],
.ems-sw-detail,
.ems-sw-produkt-detail {
	scroll-margin-top: var(--ems-sw-scroll-offset);
}

.ems-sw-kapitel {
	padding-top: 3rem;
}

.ems-sw-kapitel + .ems-sw-kapitel {
	border-top: 1px solid var(--ems-sw-line);
}

.ems-sw-block { padding-bottom: 3rem; }

.ems-sw-title {
	margin-bottom: 1.5rem;
	color: var(--ems-sw-blue);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.ems-sw-subtitle {
	margin-bottom: .6rem;
	color: var(--ems-sw-text);
	font-weight: 700;
	font-size: 1.1rem;
}

.ems-sw-intro {
	max-width: 70rem;
	margin-bottom: 2rem;
	font-size: 1.05rem;
}

.ems-sw-hinweis {
	color: var(--ems-sw-muted);
	font-style: italic;
}

.ems-sw-fussnote {
	margin-top: .75rem;
	color: var(--ems-sw-muted);
	font-size: .875rem;
}

.ems-sw-grafik {
	display: block;
	width: 100%;
	height: auto;
}

.ems-sw-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .6rem;
}

/* ---------- Info-Button „i“ ---------- */
.ems-sw-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ems-sw-blue-light);
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, transform .2s;
}

.ems-sw-info:hover,
.ems-sw-info:focus-visible {
	background: var(--ems-sw-blue);
	transform: scale(1.08);
}

/* ---------- Button ---------- */
.ems-sw-btn {
	display: inline-block;
	padding: .7rem 1.4rem;
	border: 0;
	border-radius: .35rem;
	background: var(--ems-sw-blue);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s;
}

.ems-sw-btn:hover,
.ems-sw-btn:focus-visible {
	background: var(--ems-sw-blue-dark);
	color: #fff;
}

/* ---------- Tabellen ---------- */
.ems-sw-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ems-sw-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.ems-sw-table thead th {
	padding: .6rem .8rem;
	background: var(--ems-sw-blue);
	color: #fff;
	font-weight: 700;
	text-align: left;
	vertical-align: bottom;
}

.ems-sw-table td,
.ems-sw-table tbody th {
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--ems-sw-line);
	text-align: left;
	vertical-align: top;
}

.ems-sw-table tbody th { font-weight: 700; }

.ems-sw-table tbody tr:nth-child(even) { background: #f7f9fc; }

.ems-sw-table-sm { font-size: .9rem; }

.ems-sw-table-sm td,
.ems-sw-table-sm tbody th { padding: .4rem .6rem; }

#sw-positionen .ems-sw-table-sm { table-layout: fixed; }
#sw-positionen .ems-sw-table-sm th { width: 3.5rem; }
#sw-positionen .ems-sw-table-sm td:nth-child(2) { width: 46%; }

.ems-sw-table em { color: var(--ems-sw-muted); }

.ems-sw-cell-img {
	width: 32%;
	min-width: 170px;
}

.ems-sw-cell-img img {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
}

/* ---------- Bauteile MS007 (Hotspots) ---------- */
.ems-sw-bauteile {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 480 / 310;
}

.ems-sw-bauteile-img {
	position: absolute;
	left: 0;
	top: .97%;
	width: 70.83%;
	height: auto;
}

.ems-sw-bt {
	position: absolute;
	left: calc(var(--x) * 1%);
	top: calc(var(--y) * 1%);
	width: calc((100 - var(--x)) * 1%);
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ems-sw-text);
	font-size: clamp(.62rem, 2.7cqi, .95rem);
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transform: translateY(-50%);
}

.ems-sw-bt-ln {
	flex: 0 0 auto;
	width: calc((73.33 - var(--x)) / (100 - var(--x)) * 100%);
	height: 1px;
	background: #444;
	transition: background .2s, height .2s;
}

.ems-sw-bt-lb {
	padding: .2em .45em;
	margin-left: .25em;
	border-radius: .25em;
	white-space: nowrap;
	transition: background .2s, color .2s;
}

.ems-sw-bt:hover .ems-sw-bt-lb,
.ems-sw-bt:focus-visible .ems-sw-bt-lb {
	background: var(--ems-sw-blue-pale);
	color: var(--ems-sw-blue);
}

.ems-sw-bt:focus-visible { outline: none; }

.ems-sw-bt:focus-visible .ems-sw-bt-lb { outline: 2px solid var(--ems-sw-blue); }

.ems-sw-bt.is-active .ems-sw-bt-lb {
	background: var(--ems-sw-blue);
	color: #fff;
	font-weight: 700;
}

.ems-sw-bt:hover .ems-sw-bt-ln,
.ems-sw-bt.is-active .ems-sw-bt-ln {
	height: 2px;
	background: var(--ems-sw-blue);
}

.ems-sw-detail {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--ems-sw-blue);
	border-radius: .35rem;
	background: var(--ems-sw-blue-pale);
	animation: ems-sw-ein .25s ease-out;
}

.ems-sw-detail strong { color: var(--ems-sw-blue); }

@keyframes ems-sw-ein {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Werkstoffe ---------- */
.ems-sw-werkstoff {
	height: 100%;
	padding: .8rem 1rem;
	border: 1px solid var(--ems-sw-line);
	border-left: 4px solid var(--ems-sw-blue);
	border-radius: .35rem;
}

.ems-sw-werkstoff strong { color: var(--ems-sw-blue); }

.ems-sw-werkstoff span {
	display: block;
	margin-top: .25rem;
	color: var(--ems-sw-muted);
	font-size: .9rem;
	font-style: italic;
}

/* ---------- Text-Boxen ---------- */
.ems-sw-box {
	height: 100%;
	padding: 1.25rem;
	border: 1px solid var(--ems-sw-line);
	border-radius: .5rem;
	background: #fff;
}

.ems-sw-box p:last-child { margin-bottom: 0; }

.ems-sw-box-img {
	display: flex;
	flex-direction: column;
}

.ems-sw-box-img img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin: auto auto 0;
	padding-top: 1rem;
}

/* ---------- Balkendiagramme Lebensdauer ---------- */
.ems-sw-chart {
	margin-bottom: 2rem;
	padding: 1.25rem 1.25rem .5rem;
	border: 1px solid var(--ems-sw-line);
	border-radius: .5rem;
	--label-w: 4.5rem;
}

.ems-sw-chart-title {
	display: inline-block;
	margin-bottom: 1rem;
	padding: .3rem .8rem;
	border-radius: .25rem;
	background: var(--ems-sw-blue);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
}

.ems-sw-chart-title small { font-weight: 400; }

.ems-sw-bar-row {
	display: flex;
	align-items: center;
	margin-bottom: .5rem;
}

.ems-sw-bar-label {
	flex: 0 0 var(--label-w);
	font-weight: 700;
	font-size: .9rem;
}

.ems-sw-bar-track {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-height: 1.9rem;
	border-radius: .25rem;
	background: #f1f4f8;
}

.ems-sw-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: calc(var(--w) * 1%);
	padding: 0 .6rem;
	background: var(--ems-sw-blue-light);
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transform-origin: left;
	animation: ems-sw-bar 1s ease-out both;
}

.ems-sw-bar:first-child { border-radius: .25rem 0 0 .25rem; }
.ems-sw-bar:last-child { border-radius: 0 .25rem .25rem 0; }
.ems-sw-bar:only-child { border-radius: .25rem; }

.ems-sw-bar:not(.ems-sw-bar-opt):not(.ems-sw-bar-open) { background: var(--ems-sw-blue); }

.ems-sw-bar-opt {
	justify-content: center;
	background: var(--ems-sw-blue-light);
	animation-delay: .4s;
}

.ems-sw-bar-open {
	background: linear-gradient(90deg, var(--ems-sw-blue) 70%, var(--ems-sw-blue-light));
}

.ems-sw-bar-text {
	align-self: center;
	padding: 0 .6rem;
	color: var(--ems-sw-muted);
	font-size: .85rem;
	font-style: italic;
}

@keyframes ems-sw-bar {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.ems-sw-axis {
	position: relative;
	height: 1.6rem;
	margin-left: var(--label-w);
	border-top: 1px solid #9aa4b4;
	color: var(--ems-sw-muted);
	font-size: .75rem;
}

.ems-sw-axis span {
	position: absolute;
	top: .3rem;
	left: calc(var(--p) * 1%);
	transform: translateX(-50%);
	white-space: nowrap;
}

.ems-sw-axis span:first-child { transform: none; }
.ems-sw-axis span:last-child { transform: translateX(-100%); }

/* ---------- Schaltsysteme ---------- */
.ems-sw-system {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem;
	border-radius: .5rem;
	background: var(--ems-sw-blue);
	color: #fff;
}

.ems-sw-system-title {
	margin-bottom: .75rem;
	padding: .4rem .6rem;
	border-radius: .25rem;
	background: #fff;
	color: var(--ems-sw-blue);
	font-weight: 700;
	font-size: 1.05rem;
	text-align: center;
	hyphens: auto;
}

.ems-sw-system p { font-size: .95rem; }

.ems-sw-system-btns {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin: .5rem 0 1rem;
}

.ems-sw-produkt {
	flex: 0 1 8rem;
	padding: .45rem .8rem;
	border: 2px solid #fff;
	border-radius: .25rem;
	background: #fff;
	color: var(--ems-sw-blue);
	font-weight: 700;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.ems-sw-produkt:hover,
.ems-sw-produkt:focus-visible {
	background: var(--ems-sw-blue-pale);
}

.ems-sw-produkt.is-active {
	background: transparent;
	color: #fff;
}

.ems-sw-system img {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
	margin: auto auto 0;
}

.ems-sw-produkt-detail {
	margin-top: 2rem;
	padding: 1.5rem;
	border: 1px solid var(--ems-sw-line);
	border-radius: .5rem;
	text-align: center;
	animation: ems-sw-ein .25s ease-out;
}

.ems-sw-produkt-detail img {
	display: block;
	width: 100%;
	max-width: 760px;
	height: auto;
	margin: 0 auto 1.25rem;
}

/* ---------- Modals ---------- */
.ems-sw-modal .modal-header {
	background: var(--ems-sw-blue);
	color: #fff;
}

.ems-sw-modal .modal-title {
	margin: 0;
	font-weight: 700;
	font-size: 1.35rem;
}

.ems-sw-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.ems-sw-diag-title {
	padding: .5rem .75rem;
	margin-bottom: 1rem;
	border-radius: .25rem;
	background: var(--ems-sw-blue);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
}

.ems-sw-diag-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.ems-sw-diag-grid-1 { grid-template-columns: 1fr; }

.ems-sw-diag-grid img {
	display: block;
	width: 100%;
	height: auto;
	padding: .25rem;
	border: 1px solid var(--ems-sw-line);
	border-radius: .35rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
	.ems-sw-nav-link { padding: .8rem .7rem; font-size: .9rem; }
	.ems-sw-nav-link::after { left: .7rem; right: .7rem; }
	.ems-sw-kapitel { padding-top: 2rem; }
	.ems-sw-chart { padding: 1rem .75rem .25rem; --label-w: 3.6rem; }
	.ems-sw-bar { font-size: .7rem; padding: 0 .35rem; }
	.ems-sw-axis span:nth-child(even) { display: none; }
	.ems-sw-cell-img { min-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
	.ems-sw *,
	.ems-sw-modal * { animation: none !important; transition: none !important; }
}