/* Roboto Condensed, served locally so manuals render correctly offline
   (opened via file://, where the previous Google Fonts @import can't be
   reached and the page silently fell back to the system sans-serif). */
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-ThinItalic.ttf") format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/RobotoCondensed-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

    	body {
    		font-family: "Roboto Condensed", sans-serif;
    		margin:auto;
    		line-height:150%;
    		display:flex;
    	}

      /* Abstände */
        h1, h2, h3, h4 {
            margin-top: 30px;
            margin-bottom:5px;
            line-height:150%;
        }

        /* Kapitelzähler einmal für die ganze Seite anlegen. Ohne diesen Reset startet die
           Nummerierung in jedem Container neu (z. B. nach den .version-content-Blöcken im
           Transforce-Manual), und die Überschrift stimmt nicht mehr mit dem IHV überein. */
        body {
            counter-reset: h1counter;
        }

        /* Zähler für die verschiedenen Überschriften-Ebenen definieren */
        h1 {
            counter-reset: h2counter; /* Setzt den Zähler für h2 zurück */
            counter-increment: h1counter; /* Zählt h1 hoch */
            display: block;
            border-bottom:2px solid #000;
            font-weight:500;
            text-transform: uppercase;
            margin-top:60px;
        }

        h2 {
            counter-reset: h3counter; /* Setzt den Zähler für h3 zurück */
            counter-increment: h2counter; /* Zählt h2 hoch */
            font-weight:400;
            border-bottom: 1px solid #4d4d4d;
			margin-bottom: 20px;
        }

        h3 {
            counter-reset: h4counter; /* Setzt den Zähler für h4 zurück */
            counter-increment: h3counter; /* Zählt h3 hoch */
            font-weight:400;
        }

        h4 {
            counter-increment: h4counter; /* Zählt h4 hoch */
            font-weight:400;
            margin-bottom:5px;
        }

        /* --- from Sonuscore: h5 subheading and heading-look classes (not numbered, not in TOC) --- */
        h5 {
            font-size: 15px;
            font-weight:600;
            margin-bottom:5px;
            text-transform: uppercase;
        }


        h1 + p,h2 + p,h3 + p,h4 + p,h5 + p,h6 + p {
        	margin-top:5px;
        }

        .h1, .h2{
        	display: block;
            font-weight:500;
            text-transform: uppercase;
            font-size:2em;
            line-height:1em;
            margin-bottom:10px;
        }

        .h2{
        	font-weight:400;
        	font-size:1.5em;
        }




        /* Formatierung und Nummerierung */
        h1::before {
            content: counter(h1counter) ". ";
            font-weight: 500;
        }

        h2::before {
            content: counter(h1counter) "." counter(h2counter) " ";
            font-weight:400;
        }

        h3::before {
            content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) " ";
            font-weight:400;
        }

        h4::before {
            content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) " ";
            font-weight:400;
        }

        /* --- from Sonuscore --- */
        ol > li{
        	margin-bottom:10px;
        }

        :root {
  			--color-control: #0070C0;
  			--color-mod-source: #2eb77a;
  			--color-device: #FFC000;
  			--color-macro: #CC0099;
  			--color-markers:#fd921d;
		}

		.marker-stroke{
			stroke: var(--color-markers);
		}

		.marker-fill{
			fill: var(--color-markers);
		}

		/* Table Container for Responsiveness */
		.table-container {
		    width: 100%;
		    overflow-x: auto; /* Enables horizontal scroll on small screens */
		    margin: 20px 0;
		    border-radius: 8px;
		    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		}

		/* Base Table Styling */
		table {
		    width: 100%;
		    border-collapse: collapse;
		    background-color: #fff;
		    font-family: "Roboto Condensed", sans-serif;
		    font-size: 0.95rem;
		    color: #333;
		    text-align: left;
		}

		/* All table content is left-aligned, whatever the table class */
		th, td {
		    text-align: left;
		}

		/* Header Styling */
		table th {
		    background-color: #1a1a1a; /* Matches your dark header theme */
		    color: #ffffff;
		    font-weight: 500;
		    text-transform: uppercase;
		    padding: 12px 15px;
		    letter-spacing: 0.5px;
		    border: 1px solid #333;
		}

		/* Cell Styling */
		table td {
		    padding: 10px 15px;
		    border: 1px solid #e0e0e0;
		    line-height: 1.4;
		}

		/* Zebra Striping */
		table tr:nth-child(even) {
		    background-color: #f8f9fa;
		}

		/* Hover Effect */
		table tr:hover {
		    background-color: #f1f1f1;
		    transition: background-color 0.2s ease;
		}

		/* Bold the first column or specific labels if needed */
		table td strong {
		    color: #000;
		}

		/* Code Pill Styling for Table Functions */
		.code-pill {
		    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
		    background-color: #f0f0f0; /* Light grey background */
		    color: var(--color-mod-source); /* A slight tint often used for code string highlights */
		    padding: 2px 6px;
		    border-radius: 4px;
		    border: 1px solid #e1e1e1;
		    font-size: 0.9em;
		    white-space: nowrap;
		}

		/* Optional: change color on hover if the row is hovered */
		tr:hover .code-pill {
		    background-color: #e8e8e8;
		    border-color: #d1d1d1;
		}

		/* Mobile Specific Tweaks */
		@media screen and (max-width: 600px) {
		    table {
		        font-size: 0.85rem;
		    }
		    table th, table td {
		        padding: 8px 10px;
		    }
		}

		.svg-wrap{
			width:100%;
			max-width: 1400px;
			margin:0 auto;
		}

		.bg-svg{
			width:100%;
			height:auto;
			display: block;
		}

		.overlay-rect{
			rx:10px;
			stroke: rgb(0,255,196);
			stroke-width: 10px;
		}

		.overlay-rect.control{
			stroke:var(--color-control);
		}

		.overlay-rect.mod-source{
			stroke:var(--color-mod-source);
		}

		.overlay-rect.macro{
			stroke:var(--color-macro);
		}

		.overlay-rect.device{
			stroke:var(--color-device);
		}

		.macro{
			color:var(--color-macro);
			font-weight:bold;
		}

		.device{
			color:var(--color-device);
			font-weight:bold;
		}

		.mod-source{
			color:var(--color-mod-source);
			font-weight:bold;
		}

		.control{
			color:var(--color-control);
			font-weight:bold;
		}

        .header {
		    position: fixed;
		    top: 0;
		    left: 0;
		    width: 100%;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    background-color: #f9f9f9;
		    padding: 0px 20px;
		    box-sizing: border-box;
		    color: #fff;
		    z-index: 1000;
		    border-bottom:1px solid #ccc;
		}

		.logo {
		    height: 40px;
		    margin-right:auto;
		}

		.title {
		    font-size: 24px;
		    color: #666;
		    padding-right: 0;
		    font-weight: 300;
		}

		/* Fixed bar directly below .header, holding the version switcher.
		   Only present on manuals that opt in (body.has-version-bar); other
		   manuals never render this element, so it never affects them. */
		.version-bar {
		    position: fixed;
		    top: 61px; /* height of .header, matches the offset already used elsewhere */
		    left: 0;
		    width: 100%;
		    height: 44px;
		    box-sizing: border-box;
		    display: flex;
		    justify-content: flex-end;
		    align-items: center;
		    padding: 0px 20px; /* same horizontal padding as .header */
		    background-color: #f9f9f9;
		    border-bottom: 1px solid #ccc;
		    z-index: 999;
		}

		.version-switcher {
		    display: flex;
		    align-items: center;
		    gap: 8px;
		}

		.version-switcher-label {
		    font-size: 13px;
		    color: #888;
		    text-transform: uppercase;
		    letter-spacing: 0.5px;
		}

		.version-switcher select {
		    font-family: "Roboto Condensed", sans-serif;
		    font-size: 14px;
		    font-weight: 500;
		    padding: 6px 10px;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    background-color: #fff;
		    color: #333;
		    cursor: pointer;
		}

		.version-switcher select:hover {
		    border-color: #999;
		}

		/* Version-specific manual content: only the block matching the
		   selected version is shown. Manuals without versioning simply
		   don't use this class, so this rule never applies to them. */
		.version-content {
		    display: none;
		}

		.version-content.active {
		    display: block;
		}

		/* --- from Sonuscore --- */
		.horizontal-list{
			display: flex;
			flex-wrap:wrap;
		}

		.horizontal-list li{
			min-width:280px;
		}

        .help-box{
        	margin: 30px 0;
        }

        .help-box-heading{
        	background-color: #00445c;
			color: #fff;
			font-weight: bold;
			text-transform: uppercase;
			padding: 20px;
			display: inline-block;
			margin-bottom: -20px;
			z-index: 1;
        }

        .help-box-content{
        	display: block;
        	color:#00445c;
        	background-color: rgba(57, 118, 148, 0.1);
        	border:2px solid #00445c;;
        	padding:20px 20px;
        	margin-left:20px;
        	z-index:2;
        	position: relative;
        }

        .help-box-content li{
        	margin:10px 0;
        }

        .hero{
        	text-align: center;
        	margin:5% auto 15% auto;

        }

        .hero img{
        	margin: 30px auto;
        	width:80%;
        }

        .main-title{
        	font-size:30px;
        }

        /* Large product name only in the hero; elsewhere (header, running text)
           .product-name just marks the name and keeps the surrounding size. */
        .main-title .product-name{
        	font-size:40px;
        	margin-bottom:10px;
        	line-height:120%;
        }

        .img{
        	border-radius:10px;
        	max-width:100%; /* fixed-height SVG crops never get wider than the page */
        }

        .icon{
        	max-width:50px;
        }

        .inline-icon{
        	height:1.2em;
        	width:1.2em;
        	vertical-align: middle;
        }

        img{
        	margin:10px 0;
        	border-radius:10px;
        	max-width:100%;
        }

        img.small{
        	transform: scale(0.5);
    		transform-origin: top left; /* Passt die Position des Bilds an */
        }

        img.full-width{
        	width:100%;
        }

        image {
        	border-radius:10px;
        }

        .bottom-logo{
        	width:200px;
        	height:auto;
        }

        .container {
    		display: flex;
    		flex-wrap: wrap;
    		gap:0 20px;
    		margin-bottom:25px; /* from Sonuscore */
		}

		.section-1-6{
			width: calc(16.666% - 10px);
			box-sizing: border-box;
		}

		.section-2-6{
			width: calc(33.333% - 10px);
			box-sizing: border-box;
		}

		.section-3-6 {
    		width: calc(50% - 10px);
    		box-sizing: border-box;
		}

		.section-4-6{
			width: calc(66.666% - 10px);
			box-sizing: border-box;
		}

		.section-5-6{
			width: calc(83.333% - 21px);
			border-left:1px solid #cecece;
			padding-left:10px;
		}

		.section-5-6 .section-5-6 {
    		border: none;
		}

		.section-6-6{
			width: 100%;
		}

		.shadow{
			box-shadow: 0 0 10px 10px rgba(0,0,0,0.1);
		}

		.important{
			border-left: 2px solid #00445C;
			color: #00445c;
			background-color: rgba(57, 118, 148, 0.1);
			padding: 20px 20px;
			border-radius: 0px 10px 10px 0;
			margin-top:15px;
		}

		.important:before{
			content: "";
			position: absolute;
			background-image: url("../images/common/warning.png");
			display: block;
			width: 30px;
			height: 30px;
			margin-left: -60px;
			background-size: 30px;
			margin-top: -20px;
		}

		.section-5-6 .important:before, .section-4-6 .important:before, .section-3-6 .important:before, .help-box-content .important:before{
			content: "";
			position: absolute;
			background-image: url("../images/common/warning.png");
			display: block;
			width: 20px;
			height: 20px;
			margin-left: 0px;
			background-size: 20px;
			margin-top: -10px;
		}

		.button{
			background-color: #000;
			color: #fff;
			padding: 10px;
			border-radius: 4px;
			text-decoration: none;
			font-weight: bold;
		}


		.button:hover{
			background-color: #3e3e3e;
		}


		/* --- from Sonuscore: image hotspots with tooltips --- */

		.figure {
			position: relative;
			display: inline-block;
			max-width: 100%;
			padding: 0;
			margin: 0;
			border: none;
			/* aspect-ratio removed! */
		}

		.figure img {
			display: block;
			width: 100%;
			height: auto;
			vertical-align: top;
		}

		.pin {
			position: absolute;
			transform: translate(-50%, -50%);
			line-height: 0;
			padding: 0;
			margin: 0;
		}

		/* Hotspot marker: cyan dot in a dark-teal ring. The number/label inside
		   the link stays in the HTML for screen readers but is not shown. */
		/* Marker colours, derived from the manual's petrol (#00445c) and its light blue boxes */
		:root {
			--marker-dot: #a9cbd6;
			--marker-ring: rgba(0, 68, 92, 0.8);
		}

		/* The whole marker (outer line, ring, dot) is painted as ONE radial gradient
		   on a single box. Border + separately positioned inner dot used to snap to
		   different pixels on low-resolution screens and looked lopsided. */
		.marker {
			--r-dot: 8px;                /* radius of the light centre dot */
			--r-ring: 11.5px;            /* outer radius of the dark ring  */
			position: relative;
			display: block;
			width: 26px;
			height: 26px;
			border-radius: 50%;
			background: radial-gradient(circle closest-side,
				var(--marker-dot) calc(var(--r-dot) - .5px),
				var(--marker-ring) calc(var(--r-dot) + .5px) calc(var(--r-ring) - .5px),
				var(--marker-dot) calc(var(--r-ring) + .5px));
			box-sizing: border-box;
			box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
			font-size: 0;
			color: transparent;
			text-shadow: none;
			text-decoration: none;
			cursor: pointer;
			z-index: 0;                  /* own stacking context for the beacon ring */
		}

		.marker.small {
			--r-dot: 6px;
			--r-ring: 8.5px;
			width: 20px;
			height: 20px;
		}

		/* Beacon: an extra ring behind the marker that grows and fades out once on hover.
		   The marker itself keeps its look. */
		.marker::before {
			content: "";
			position: absolute;
			inset: 0;                    /* same size as the marker */
			border-radius: 50%;
			border: 2px solid var(--marker-dot);
			box-sizing: border-box;
			opacity: 0;
			z-index: -1;                 /* behind the marker */
			pointer-events: none;
		}

		.pin:hover .marker::before,
		.pin:focus-within .marker::before {
			animation: marker-beacon .9s ease-out 1;
		}

		@keyframes marker-beacon {
			0%   { transform: scale(1);   opacity: .9; }
			100% { transform: scale(2.4); opacity: 0; }
		}

		@media (prefers-reduced-motion: reduce) {
			.pin:hover .marker::before,
			.pin:focus-within .marker::before {
				animation: none;
			}
		}

		.tooltip {
			position: absolute;
			bottom: 100%;
			left: 50%;
			transform: translate(-50%, -8px);
			width: max-content;
			max-width: 220px;
			background: #222;
			color: #fff;
			font-size: 13px;
			font-weight: normal;
			text-align: center;
			padding: 14px 10px;
			border-radius: 4px;
			opacity: 0;
			visibility: hidden;
			/* Hidden tooltips are taken out of the layout entirely, otherwise the
			   ones near the right edge make the page scroll sideways on phones. */
			display: none;
			transition: opacity .15s ease, visibility .15s ease, transform .15s ease, display .15s allow-discrete;
			z-index: 10;
			white-space: normal;
		}

		.tooltip::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border: 5px solid transparent;
			border-top-color: #222;
		}

		.pin:hover .tooltip,
		.pin:focus-within .tooltip {
			display: block;
			opacity: 1;
			visibility: visible;
			transform: translate(-50%, -12px);
		}

		@starting-style {
			.pin:hover .tooltip,
			.pin:focus-within .tooltip {
				opacity: 0;
				transform: translate(-50%, -8px);
			}
		}

		.single-nki {
			color: var(--accent, #000);
			font-weight: bold;
			cursor: help;
		}


		#toc-container {
		    position: sticky; /* Macht die Sidebar sticky */
		    top: 60px; /* Abstand vom oberen Rand */
		    width: 350px; /* Breite des Inhaltsverzeichnisses */
		    max-height: calc(100vh - 40px); /* Maximalhöhe für die Sidebar */
		    overflow-y: auto; /* Scrollbar für Überlauf */
		    background-color: #f9f9f9; /* Hintergrundfarbe */
		    padding: 20px; /* Innenabstand */
		    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für besseren Kontrast */
		    z-index: 10; /* Damit es über anderen Inhalten liegt */
		    box-sizing: border-box; /* Inkludiere Padding und Border in die Breite */
		    padding-bottom:60px;
		    flex-shrink:0; /* from Sonuscore */
			}

		/* Shift the sidebar down below the extra fixed version bar, on manuals that have one. */
		body.has-version-bar #toc-container {
		    top: 105px; /* header (61px) + version bar (44px) */
		    max-height: calc(100vh - 85px);
		}

		#toc {
            background: #f9f9f9;
            margin:0;
        }

		#toc:hover{
			cursor: pointer;
		}

		#toc ul {
		    list-style: none;
		    padding-left: 0;
		    overflow: hidden;
		    transition: max-height 0.4s ease-out;
		    margin:0;
		}
        #toc a {
            text-decoration: none;
            color: #000;
        }
        #toc a:hover {
            text-decoration: underline;
        }

		#toc ul.visible {
		    max-height: none; /* Nichts setzen, wenn es sichtbar ist */
		}

        .toc-h1 {
		    font-weight: bold;
		    text-transform: uppercase;
		    font-size: 1em;
		    margin: 15px 0 0 5px;
		    border-bottom: 1px solid #bfbfbf;
		}

		.toc-h2 {
		    font-weight: 500;
		    margin: 0px 0 0 0;
		    font-size:.9em;
		}

		.toc-h3 {
		    margin: 5px 0 0 0;
		    font-size:.9em;
		}

		.toc-h4 {
		    font-weight: 300;
		    font-size:.8em;
		}

		.main {
		    flex: 1; /* Nimmt den restlichen Platz ein */
		    margin-left: 20px; /* Abstand zwischen Sidebar und Hauptinhalt */
		    padding: 5%;
    		max-width: 1200px;
    		margin:auto;
    		min-width: 0; /* lets wide content (tables, SVGs) shrink/scroll instead of widening the page */
    		overflow-wrap: break-word; /* long paths, codes and URLs wrap instead of widening the page */
		}

		#toc-toggle{
			display: none;
		}

		iframe.video{
			aspect-ratio: 16 / 9;
			width: 100%;
		}

		/* Shown instead of the iframe.video when a manual is opened via
		   file:// and the YouTube embed can't load (see toc.js). */
		.video-fallback{
			border-left: 2px solid #00445C;
			color: #00445c;
			background-color: rgba(57, 118, 148, 0.1);
			padding: 20px 20px;
			border-radius: 0px 10px 10px 0;
			margin-top: 15px;
		}

		.video-fallback p{
			margin: 0 0 8px 0;
		}

		.video-fallback a{
			color: #00445c;
			font-weight: bold;
			word-break: break-all;
		}

		@media (max-width: 976px) {
    		body{
    			flex-direction: column;
    		}

    		/* In the column layout the auto margins of .main stop it from
    		   stretching, so it grew to fit its widest content and the whole
    		   page scrolled sideways on phones. Pin it to the screen width. */
    		.main{
    			width: 100%;
    			max-width: 100%;
    			box-sizing: border-box;
    		}

    		img {
    			border-radius:5px;
    		}

    		.title {
    			font-size: 16px;
    			padding-right: 0;
    		}

    		.version-switcher-label {
    			display: none;
    		}

    		.version-switcher select {
    			font-size: 13px;
    			padding: 5px 6px;
    		}

		    .hero {
		        text-align: center;
		        margin: 15vh auto;
		        /* height: 100vh; */
		        display: flex;
		        flex-direction: column;
		        justify-content: center;
		    }

    		.section-1-6, .section-2-6, .section-3-6, .section-4-6, .section-5-6, .section-6-6{
        		width: 100%;
        		border:none;
        		padding-left:0;
    		}

    		.important{
    			margin-left:35px;
    			border-radius: 0px 5px 5px 0;
    		}

    		.section-1-6 .important:before, .section-2-6 .important:before, .section-3-6 .important:before, .section-4-6 .important:before, .section-5-6 .important:before, .section-6-6 .important:before{
    			margin-left: -60px;
				background-size: 30px;
				width: 30px;
				height: 30px;
    		}

    		 #toc-container {
		        position: sticky; /* Macht die Sidebar sticky */
		        top: 60px; /* Abstand vom oberen Rand, unterhalb des Headers */
		        width: 100%;
		        max-height: calc(100vh - 60px); /* Maximalhöhe für die Sidebar abzüglich Header */
		        overflow-y: auto; /* Scrollbar für Überlauf */
		        background-color: #f9f9f9;
		        z-index: 10;
		        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für besseren Kontrast */
		        padding:0;
		        flex-shrink:0; /* from Sonuscore */
		    }

		    body.has-version-bar #toc-container {
		        top: 105px;
		        max-height: calc(100vh - 105px);
		    }

		    #toc {
		        padding: 0px 10px;
		        max-height: 0;
		        overflow-y: auto;
		        transition: opacity 1s ease, max-height 0.4s ease-out;
		        padding-top:45px;
		    }

		    #toc > ul {
		    	transition: opacity 1s ease;
		    	opacity: 0;
		    	padding-bottom: 60px;
		    }

		    #toc .toc-children {
		    	padding-bottom: 0;
		    }

		    #toc-toggle {
		        position:fixed;
		        top:60px;
		        width:100%;
		        display: block;
		        text-align: center;
		        font-weight: bold;
		        cursor: pointer;
		        padding: 10px;
		        box-sizing: border-box;
		        background: #f1f1f1;
		        color: #333;
		        border-bottom: 1px solid #ccc;
		        font-weight:400;
		        z-index:9;
		    }

		    body.has-version-bar #toc-toggle {
		        top: 105px;
		    }

		    #toc.visible > ul {
		    	opacity: 1;
		    }

		}

		.toc-collapsible {
		    overflow: hidden;
		    max-height: 0;
		    transition: max-height 0.3s ease, opacity 0.3s ease;
		    opacity: 0;
		}

		.toc-collapsible.expanded {
		    max-height: 500px;
		    opacity: 1;
		}

		/* Collapsible TOC: h1 row layout */
		.toc-h1-row {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    gap: 6px;
		}

		.toc-h1-row a {
		    flex: 1;
		}

		/* Expand/collapse icon */
		.toc-expand-icon {
		    flex-shrink: 0;
		    width: 18px;
		    height: 18px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    /*border: 1px solid #bbb;*/
		    border-radius: 3px;
		    cursor: pointer;
		    color: #666;
		    font-size: 14px;
		    line-height: 1;
		    transition: background-color 0.2s ease;
		}

		.toc-expand-icon::before {
		    content: "➕";
		    display: block;
		    transition: transform 0.3s ease;
		}

		.toc-expand-icon.rotated::before {
		    transform: rotate(45deg);
		}

		.toc-expand-icon:hover {
		    background-color: #e8e8e8;
		}

		/* Children list: collapsed by default */
		.toc-children {
		    list-style: none;
		    padding-left: 0;
		    margin: 0;
		    max-height: 0;
		    overflow: hidden;
		    opacity: 0;
		    transition: max-height 0.35s ease, opacity 0.3s ease;
		}

/* ===== from Sonuscore: tabs and data tables ===== */
		.instrument-section {
  max-width: 100%;
}

/* Tabs */
.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tab-buttons button {
  background: #eee;
  border: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s;
}

.tab-buttons button:hover {
  background: #ddd;
}

.tab-buttons button.active {
  background: #333;
  color: white;
}

/* Tabs content */
.tab-content {
  display: none;
  animation: fadeIn 0.2s ease-in-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Table wrapper for scrolling */
.responsive-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table styling */
.standard-table {
  border-collapse: separate; /* angepasst */
  border-spacing: 0;         /* Abstand zwischen Zellen entfernen */
  width: 100%;
  font-size: 0.9rem;
}

.standard-table th,
.standard-table td {
  padding: 0.5rem 0.75rem;
  border: .5px solid #ddd;
  text-align: left;
  white-space: nowrap;
  background-clip: padding-box; /* wichtig für Sticky-Rahmen */
}

/* Sticky header */
.standard-table thead th {
  position: sticky;
  top: 0;
  background: #1a1a1a; /* Header immer dunkel */
  color: #ffffff;
  border-color: #333;
  z-index: 3; /* über Sticky-Spalte */
}

/* Table styling */
.articulation-table {
  border-collapse: separate; /* angepasst */
  border-spacing: 0;         /* Abstand zwischen Zellen entfernen */
  width: 100%;
  font-size: 0.9rem;
}

.articulation-table th,
.articulation-table td {
  padding: 0.5rem 0.75rem;
  border: .5px solid #ddd;
  text-align: left;
  white-space: nowrap;
  background-clip: padding-box; /* wichtig für Sticky-Rahmen */
}

/* Sticky header */
.articulation-table thead th {
  position: sticky;
  top: 0;
  background: #1a1a1a; /* Header immer dunkel */
  color: #ffffff;
  border-color: #333;
  z-index: 3; /* über Sticky-Spalte */
}

/* Sticky erste Spalte */
.articulation-table th:first-child,
.articulation-table td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  border-right: .5px solid #ddd; /* fester rechter Rand */
}

/* Linke obere Zelle (erste Kopfzelle) */
.articulation-table thead th:first-child {
  z-index: 4; /* muss höher sein als andere Kopfzellen */
  background: #1a1a1a;
}

/* Alle Tabellen-Header immer dunkel mit weißer Schrift – auch Zeilen-Header (th im tbody) */
table th,
.articulation-table th:first-child,
.standard-table th:first-child {
  background-color: #1a1a1a;
  color: #ffffff;
}

@media (max-width: 976px) {
  .articulation-table {
    font-size: 0.8rem;
    min-width: 100%;
    width: 100%;
    display: block;
    overflow-x: auto;
    table-layout: auto;
  }

  .articulation-table th,
  .articulation-table td {
    white-space: nowrap;
    word-break: break-word;
  }

  .tab-buttons {
    flex-direction: column;
  }

  .tab-buttons button {
    width: 100%;
    text-align: left;
  }
}

/* ===== from Sonuscore: small phones ===== */
@media (max-width: 480px) {

	h1{
		font-size:1.4em;
		line-height:1em;
	}

	.horizontal-list li{
				min-width:180px;
	}
	 .title{
	 	font-size:16px;
	 }

	 .main-title .product-name{
	 	font-size:26px;
	 }
}

/* ===== Step-by-step tutorials =====
   <ol class="steps">
     <li class="step">
       <div class="step-body"> text </div>
       <div class="step-media"> image (optional) </div>
     </li>
   </ol>
   Text always left with a numbered badge, image always right; stacked on phones. */
.steps {
    list-style: none;
    counter-reset: step;
    margin: 20px 0 30px;
    padding: 0;
}

.steps > .step {
    counter-increment: step;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 20px 40px;
    align-items: start;
    margin: 0;
    padding: 28px 0;
    border-top: 1px solid #e0e0e0;
}

.steps > .step:last-child {
    border-bottom: 1px solid #e0e0e0;
}

/* A step without an image uses the full width */
.steps > .step:not(:has(.step-media)) {
    grid-template-columns: minmax(0, 1fr);
}

.step-body {
    position: relative;
    min-width: 0;
    padding-left: 44px;
}

.step-body::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #00445c;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 30px;
    text-align: center;
}

.step-body > p:first-child {
    margin-top: 3px;
}

.step-body > :last-child {
    margin-bottom: 0;
}

.step-body .important:before {
    /* small warning icon inside the step text column */
    width: 20px;
    height: 20px;
    background-size: 20px;
    margin-left: 0;
    margin-top: -10px;
}

.step-media {
    min-width: 0;
}

/* Screenshots keep their natural size and only shrink to fit the column */
.step-media > img,
.step-media .figure {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
}

@media (max-width: 976px) {
    .steps > .step {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}