/* Icons by Lucide under MIT License.*/
	 /* Full text: <a href="/public/custom_css/LICENSE-LUCIDE.txt" download>LICENSE-LUCIDE.txt</a>*/
	/*Technische Daten NTS1*/
	#NTS1_Kraft_tabelle {
	  border-radius: 25px !important;
	  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1)!important;
	}
	/* Textweite beschrenken*/
	.panel-body p, .nts1-konf1-tech-col-primary p { max-width: 110ch; } 
	/* ------- Kraft und Geschw. ------- */
	  /* 2) Radios aus dem Accessibility-Tree behalten, aber visuell verstecken */
	  .nts1-konf1-content-KraftGeschw input[type="radio"] {
		position: absolute;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip: rect(0,0,0,0);
		border: 0;
	  }
	 input[type=radio]{
	  accent-color:#005B9F;   /* ersetzt das Grün global */
	} 

	  /* 3) Tab-Labels */
	  .nts1-tab-KraftGeschw {
		display: inline-block;
		padding: 0.5em 1em;
		cursor: pointer;
		border: 2px solid #ccc;
		border-bottom: none;
		background: #f5f5f5;
		margin-right: -1px;
		user-select: none;       
	  }
	  
	@media (max-width:900px){
		.nts1-tab-KraftGeschw {
		box-sizing:border-box;  
		width:20%;           
		text-align:center;       
		margin-right:0;  
		padding: 0.5em 0em !important;
	}
	}
	  /* 4) Aktives Tab hervorheben (Input + Label) */
	  #nts1-12v-KraftGeschw:checked + label[for="nts1-12v-KraftGeschw"],
	  #nts1-24v-KraftGeschw:checked + label[for="nts1-24v-KraftGeschw"],
	  #nts1-230v-KraftGeschw:checked + label[for="nts1-230v-KraftGeschw"] {
		background: white;
		border-bottom: 1px solid white;
		font-weight: bold;
	  }

	  /* 5) Alle Tabellen standardmäßig ausblenden */
	  .nts1-table-KraftGeschw {
		display: none;
		width: 100%;
		border-collapse: collapse;
	  }

	  /* 6) Die jeweils ausgewählte Tabelle anzeigen */
	  #nts1-12v-KraftGeschw:checked ~ #nts1-tbl-12v-KraftGeschw,
	  #nts1-24v-KraftGeschw:checked ~ #nts1-tbl-24v-KraftGeschw,
	  #nts1-230v-KraftGeschw:checked ~ #nts1-tbl-230v-KraftGeschw {
		display: table;
	  }

	  /* 7) Tabellen-Zellen-Styling */

	  .nts1-table-KraftGeschw caption {
		caption-side: top;
		text-align: left;
		font-weight: bold;
	  }
	  .nts1-konfi-bold {
	  font-size: 17px;
	  font-weight: bold;
	  }
	.nts1-tab-KraftGeschw {
	  font-size: 20px;
	  background-color: #fff;
	  border-radius: 4px;
	}

	/* Hover: gelber Rand */
	.nts1-tab-KraftGeschw:hover {
	  border-color: #FFCC01;
	}
	/* Tabelle spannung-nts1-konfi1 dritte Spalte ausblenden handy*/
	@media (max-width: 900px) {
		 #spannung-nts1-konfi1 th:nth-child(3),
		#spannung-nts1-konfi1 td:nth-child(3) {
		display: none;
	}
		  }

	/* Aktives Tab: blauer Hintergrund und fett */
	#nts1-12v-KraftGeschw:checked + label[for="nts1-12v-KraftGeschw"],
	#nts1-24v-KraftGeschw:checked + label[for="nts1-24v-KraftGeschw"],
	#nts1-230v-KraftGeschw:checked + label[for="nts1-230v-KraftGeschw"] {
	  background-color: #005B9F;
	  font-weight: bold;
	  color: #FFFFFF;
	}
	  /* Generisches 65/35 Zweispalten-Layout – mobile first */
		 /* Box-Sizing für alle Elemente */
		*, *::before, *::after {
		  box-sizing: border-box;
		}

		/* Generisches 65/35 Zweispalten-Layout – mobile first */
		.nts1-konf1-tech-2col {
		  display: flex;
		  flex-direction: column;
		  gap: 1rem;
		}
		.nts1-konf1-tech-2col > .nts1-konf1-tech-col-primary,
		.nts1-konf1-tech-2col > .nts1-konf1-tech-col-secondary {
		  width: 100%;
		  max-width: 100%;
		}

		@media (min-width: 900px) {
		  .nts1-konf1-tech-2col {
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			gap: 1.5rem;
		  }
		  /* Basisbreiten angepasst, um Gap auszugleichen */
		  .nts1-konf1-tech-col-primary {
			flex: 1 1 calc(65% - 0.75rem);
			width: auto;
		  }
		  .nts1-konf1-tech-col-secondary {
			flex: 0 0 calc(35% - 0.75rem);
			width: auto;
		  }
		   /* Bilder flexibel skalieren */
		}
	.nts1-konf1-tech-2col img {
		  max-width: 100% !important
		}
		.nts1-konf1-tech-1col img {
		  max-width: 100% !important;
		}	
		
		/* .gallery-nts1 für 50% Bild (zwei nebeneinander) */
		
	@media (min-width: 900px) {
	.gallery-nts1 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		}
		
	 .gallery-nts1 figure {
		flex: 1 1 40%;
		margin: 0;
	  }
	.gallery-nts1 img {
		width: 100%;
		height: auto;
		display: block;
		padding: 38px;
	  }
	  }

	/* Optionen*/
	/*Farben*/
	/* Basis-Layout */
	.nts1-color-grid{
	  display:grid;
	  gap:1rem;
	  grid-template-columns:repeat(auto-fit,minmax(60px,1fr));
	  margin-inline:auto;
	}

	@media (min-width:680px){
	  .nts1-color-grid{
		grid-template-columns:repeat(7,minmax(0,1fr));
	  }
	}
	.nts1-color{
	  width:100%;           
	  aspect-ratio:1/1;
	  border:2px solid #ddd;
	  border-radius:4px;
	  box-sizing:border-box;
	}

	/* Farbklassen – nur Hintergrund setzen */
	.nts1-konf1-tech-RAL-EV1  {background:#A5A8A6;} /* Standard Silbereloxiert */
	.nts1-konf1-tech-RAL-9016{background:#F1F0EA;}
	.nts1-konf1-tech-RAL-1013{background:#E3D9C6;}
	.nts1-konf1-tech-RAL-1015{background:#E6D2B5;}
	.nts1-konf1-tech-RAL-1001{background:#D0B084;}
	.nts1-konf1-tech-RAL-7006{background:#766A5E;}
	.nts1-konf1-tech-RAL-7030{background:#928E85;}
	.nts1-konf1-tech-RAL-7016{background:#383E42;}
	.nts1-konf1-tech-RAL-8001{background:#9D622B;}
	.nts1-konf1-tech-RAL-9005{background:#0E0E10;}
	.nts1-konf1-tech-RAL-1021{background:#F6B600;} /* Rapsgelb  */
	.nts1-konf1-tech-RAL-2004{background:#E25303;} /* Reinorange*/
	.nts1-konf1-tech-RAL-3003{background:#861A22;} /* Rubinrot  */
	.nts1-konf1-tech-RAL-5015{background:#007CB0;} /* Himmelblau*/
	.nts1-konf1-tech-RAL-6018{background:#61993B;} /* Gelbgrün  */

	/* =====================================================
	   DESIGN‑TOKENS
	   =====================================================*/
	:root{
	  --blue:#005B9F;        /* CD‑Blau */
	  --blue-dark:#003662;   /* Hover‑Dunkelblau */
	  --yellow:#FFCC01;      /* Fokus‑/Hover‑Gelb */
	  --grey:#C8CDD2;        /* Rahmen Hellgrau */
	  --radius:8px;          /* Einheitliche Rundung */
	}
	.grey-bg{
	  background:#F8F8F8;      /* CD-Grauton */
	  padding:48px;          /* großzügiger Weißraum */
	}

	/* =====================================================
	   GLOBAL BASICS
	   =====================================================*/

	@media (min-width: 900px) {
	  .separator-widget-big {
		margin-bottom: 6% !important;
			margin-top: 6% !important;
	  }
	}

	.boldn{
		font-weight: bold;
	}

	/*### Download-Links */
	/* Download-Links als kompakte Linkleiste mit Trennern */
	.nts1-doclinks {
	  display: flex;
	  flex-wrap: wrap;
	  align-items: center;
	  font-size: 14px;
	  margin: 16px 0;
	}


	.nts1-doclinks a + a {
	  margin-left: 8px;
	  padding-left: 8px;
	  border-left: 1px solid #ccc;
	}

	/* Auf sehr schmalen Screens links untereinander */
	@media (max-width: 699px) {
	  .nts1-doclinks {
		flex-direction: column;
		align-items: flex-start;
	  }
	  .nts1-doclinks a + a {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
	  }
	}
	/*Anwendungen*/
	/* =========================================================
	   Einsatzbereiche – 4×2 Kachel-Grid  (nts1-anwendung-grid-*)
	   ========================================================= */

	/* ---------- Wrapper (enthält Grid + vertikale Labels) --- */
	.nts1-anwendung-grid-wrapper{
	  position:relative;          /* Anker für .nts1-anwendung-grid-label */
	  margin-top:32px;
	}

	/* ---------- Bereichs-Labels ------------------- */

	.label-industry{
	  top:0;
	  color:var(--yellow);
	   font-size:32px;
	  font-weight:600;
	}
	.label-building{
	  top:50%;
	  transform:translate(-100%,-50%);
	  color:var(--blue);
	   font-size:32px;
	  font-weight:600;
	}
	.label-blocker{
	 font-size:32px;
	 font-weight:600;
	 color:#2B2F33;
	}
	/* ---------- Grid-Wrapper -------------------------------- */
	.nts1-anwendung-grid{
	  display:grid;
	  gap:24px;
	  grid-template-columns:repeat(2,1fr);      /* Mobile / Tablet */
	}
		.nts1-anwendung-grid-card-back{
	  font-size: 16px;
	}
	 .nts1-anwendung-grid-card-back ul {
		margin: 0 0 0 1.2em;       
		text-align: left;          
	  }
	/* Standard: Beide ausblenden */
	.nts1-anwendung-grid-mobile,
	.nts1-anwendung-grid-desktop {
	  display: none;
	}

	/* Mobile Ansicht: Nur Mobile sichtbar */
	@media (max-width: 767px) {
	  .nts1-anwendung-grid-mobile {
		display: block;
		font-size: 12px !important;
	  }
	}

	/* Desktop Ansicht: Nur Desktop sichtbar */
	@media (min-width: 768px) {
	  .nts1-anwendung-grid-desktop {
		display: block;
	  }
	}

	@media(min-width:1000px){
	  .nts1-anwendung-grid{
		grid-template-columns:repeat(4,1fr);    /* Desktop */
	  }
	  .nts1-anwendung-grid-card-back{
	  font-size: 16px !important;
	}
	}
	@media(max-width:800px){
	.nts1-anwendung-grid-card-back-title{
	display: none;
	}
	}

	/* ---------- Card-Grundgerüst ---------------------------- */
	.nts1-anwendung-grid-card{
	  position:relative;
	  padding-bottom:66%;                       /* 3:2 Ratio */
	  perspective:1000px;
	  transform-style:preserve-3d;
	  transition:transform .5s cubic-bezier(.4,.1,.2,1);
	  cursor:pointer;
	  border-radius:var(--radius);
	  outline:none;
	}

	/* Front & Back */
	.nts1-anwendung-grid-card-front,
	.nts1-anwendung-grid-card-back{
	  position:absolute;inset:0;
	  width:100%;height:100%;
	  backface-visibility:hidden;
	  border-radius:inherit;
	  overflow:hidden;
	}

	/* Bildseite */
	.nts1-anwendung-grid-card-front img{
	  width:100%;height:100%;object-fit:cover;
	}

	/* H5-Titel auf Bild */
	.nts1-anwendung-grid-card-front p{
	  position:absolute;bottom:8px;left:8px;
	  margin:0;padding:4px 8px;
	  background:rgba(0,0,0,.55);   /* dunkler Overlay-Balken */
	  color:#fff;                   /* weiße Schrift für max. Kontrast */
	  border-radius:4px;
	  font-size:16px;font-weight:600;
	}

	/* Rückseite */
	.nts1-anwendung-grid-card-back{
	  display:flex;flex-direction:column;
	  align-items:center;justify-content:center;
	  text-align:center;padding:16px;
	  background:#fff;
	  transform:rotateY(180deg);
	}

	/* ---------- Flip-Trigger -------------------------------- */
	/* Hover / Fokus: temporäres Umdrehen                        */
	.nts1-anwendung-grid-card:hover,
	.nts1-anwendung-grid-card:focus{
	  transform:rotateY(180deg);
	}

	/* Klick-basierte Fixierung (.is-flipped kommt per JS)      */
	.nts1-anwendung-grid-card.is-flipped{
	  transform:rotateY(180deg);
	}

	/* Touch-Tap (kurzzeitiger Flip)                            */
	.nts1-anwendung-grid-card:active{
	  transform:rotateY(180deg);
	}

	/* ---------- Farbakzent am Unterrand --------------------- */
	.nts1-anwendung-grid-card::after{
	  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
	}
	.nts1-anwendung-grid-card.is-industry::after{background:var(--yellow);}
	.nts1-anwendung-grid-card.is-building::after{background:var(--blue);}

	/* ---------- Barrierearm & Motion-Reduce ----------------- */
	@media(prefers-reduced-motion:reduce){
	  .nts1-anwendung-grid-card{transform:none!important;}
	  .nts1-anwendung-grid-card-back{display:none;}
	  .nts1-anwendung-grid-card.is-flipped .nts1-anwendung-grid-card-back,
	  .nts1-anwendung-grid-card:focus .nts1-anwendung-grid-card-back{
		display:flex;
	  }
	}
	/* ========== Grund-Layout Grid ========== */

	/* ===== Updated Grid Layout (27 May 2025) ===== */
	.usp-NTS1-Konf1-grid {
	  display: grid;
	  grid-template-columns: 1fr;
	  grid-template-rows: repeat(8, auto);
	  gap: clamp(10px, 4vw, 15px);   
	  max-width: 1400px;
	  margin: 2rem auto;
	  padding: clamp(10px, 5vw, 15px);
	}

	/* großes handy ≥ 600 px – 2 Spalten | 4 Zeilen */
	@media (min-width: 361px) {
	  .usp-NTS1-Konf1-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, auto);
	  }
	}

	/* Tablet ≥ 600 px – 2 Spalten | 4 Zeilen */
	@media (min-width: 700px) {
	  .usp-NTS1-Konf1-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, auto);
	  }
	}

	/* Desktop ≥ 992 px – 4 Spalten | 2 Zeilen */
	@media (min-width: 1025px) {
	  .usp-NTS1-Konf1-grid {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, auto);
	  }
	}
		/* ========== Kachel / Tile-Styling ========== */
		.usp-NTS1-Konf1-tile {
		  position: relative;
		  background: #f8f8f8;
		  border-radius: 6px;
		  text-align: center;
		  padding: 1.5rem 1rem;
		  transition: transform 0.3s ease, box-shadow 0.3s ease;
		  cursor: pointer;
		}
		.usp-NTS1-Konf1-tile:hover {
		  transform: scale(1.02);
		  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
		}
		/* ========== Icon ========== */
		.usp-NTS1-Konf1-icon {
		  width: 120px;  /* Doppelt so groß wie zuvor (60px -> 120px) */
		  height: 120px;
		  margin-bottom: 1rem;
		  transition: transform 0.3s ease;
		}
		/* - Leichte Rotation oder Schaukeln beim Hover - */
		.usp-NTS1-Konf1-tile:hover .usp-NTS1-Konf1-icon {
		  transform: rotate(2deg);
		}
		/* ========== Titel & Beschreibung ========== */
		/* =========================================================================
	   1) Titel – Desktop & Mobile: Höhere Spezifität + !important 
	   (überschreibt globale h3 { font-size: 20px })
	   ========================================================================= */
	@media (min-width: 769px) {
	  .usp-NTS1-Konf1-title {
		font-size: clamp(
		  /* Bei sehr schmalen Screens (≤300px)  → 16px */
		  16px,
		  /* Linearer Übergang von 16px bis 24px über Viewport 300px → 1800px */
		  calc(16px + ((100vw - 300px) * 0.0053333)),
		  /* Bei sehr breiten Screens (≥1800px) → 24px */
		  20px
		) !important;
		/* alle anderen Eigenschaften (font-weight, margin, color, …) bleiben in der bisherigen Definition */
	  }
	}

	@media (max-width: 768px) {
	  .usp-NTS1-Konf1-title {
		/* Auch auf Mobilgeräten (≤768px), 
		   damit der globale h3 { font-size: 20px; } 
		   aus „Akutalisierung Q1 2025“ keine Wirkung hat. */
		font-size: clamp(
		  16px,
		  calc(16px + ((100vw - 300px) * 0.0053333)),
		  20px
		) !important;
	  }
	}
		.usp-NTS1-Konf1-title {
		  font-weight: 600;
		  margin: 0.5rem 0;
		  color: #000000; 
		}
		.usp-NTS1-Konf1-description {
		 font-size: clamp(
		12px,
		calc(12px + ((100vw - 300px) * 0.0053333)),
		17px
	  ) !important;     /* deutlich größer als vorher (0.95->1.2) */
		  line-height: 1.2;
		  margin: 0;
		  color: #333;            /* dunkles Grau für gute Lesbarkeit */
		}
		/* ========== Hover-Dropdown ("Mehr erfahren") ========== */
		.usp-NTS1-Konf1-more-info {
		  display: none;
		  font-size: clamp(
		10px,
		calc(10px + ((100vw - 300px) * 0.004)),
		16px
	  ) !important;     /* ebenfalls größer als vorher */
		  line-height: 1.2;
		  color: #666;
		  margin-top: 1rem;
		}
		/* Beim Hover wird das Zusatz-Element eingeblendet */
		.usp-NTS1-Konf1-tile:hover .usp-NTS1-Konf1-more-info,
	.usp-NTS1-Konf1-tile:focus-visible .usp-NTS1-Konf1-more-info,
	.usp-NTS1-Konf1-tile:focus .usp-NTS1-Konf1-more-info {
	  display: block;
	}
		.usp-NTS1-Konf1-icon {
		  color: #005B9F;
		}
		/*Animation Icon Konfigurieren*/
		/* Animationen nur aktivieren, wenn Benutzerbewegung erlaubt + Desktop */
		@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
		  .usp-NTS1-Konf1-tile:hover .icon-anim circle:nth-of-type(1) {
			animation: moveSlider1 2s ease-in-out infinite alternate;
		  }
		  .usp-NTS1-Konf1-tile:hover .icon-anim circle:nth-of-type(2) {
			animation: moveSlider2 2.2s ease-in-out infinite alternate;
		  }
		  .usp-NTS1-Konf1-tile:hover .icon-anim circle:nth-of-type(3) {
			animation: moveSlider3 2.4s ease-in-out infinite alternate;
		  }
		  .usp-NTS1-Konf1-tile:hover .icon-anim circle:nth-of-type(4) {
			animation: moveSlider4 2.6s ease-in-out infinite alternate;
		  }
		  .usp-NTS1-Konf1-tile:hover .icon-anim circle:nth-of-type(5) {
			animation: moveSlider5 2.8s ease-in-out infinite alternate;
		  }
		}
		/* Keyframes – Bewegung entlang der X-Achse (Slidergefühl) */
		@keyframes moveSlider1 { 0% { cx: 24; } 100% { cx: 36; } }
		@keyframes moveSlider2 { 0% { cx: 38; } 100% { cx: 28; } }
		@keyframes moveSlider3 { 0% { cx: 30; } 100% { cx: 42; } }
		@keyframes moveSlider4 { 0% { cx: 46; } 100% { cx: 34; } }
		@keyframes moveSlider5 { 0% { cx: 18; } 100% { cx: 30; } }
		/*Lastabschaltung*/
		/* 
		   Animation / Hover-Effekt:
		   - Stoppschild erst ausblenden 
		   - bei Hover (nur Desktop + motion nicht deaktiviert) einblenden
		*/
		.stop-sign {
		  opacity: 0;
		  transition: opacity 0.3s ease;
		}
		@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
		  .usp-NTS1-Konf1-tile:hover .stop-sign {
			opacity: 1;
		  }
		}
		/*Wartungsfrei*/
	@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	  .usp-NTS1-Konf1-tile:hover .icon-wartungsfrei .infinity-path {
		animation: drawInfinity 1.4s ease-out;
	  }
	}
	@keyframes drawInfinity {
	  0% {
		stroke-dashoffset: 120;
	  }
	  100% {
		stroke-dashoffset: 0;
	  }
	}
	/*Zertifkikat*/
	@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	  .usp-NTS1-Konf1-tile:hover .icon-zertifikat .checkmark {
		animation: drawCheck 2.5s ease-out;
	  }
	}

	@keyframes drawCheck {
	  0% {
		stroke-dashoffset: 24;
	  }
	  100% {
		stroke-dashoffset: 0;
	  }
	}
	/* Hubeinstellung*/
	.icon-hubeinstellung .slider-point {
	  opacity: 0; /* Anfangs unsichtbar */
	}

	@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	  .usp-NTS1-Konf1-tile:hover .icon-hubeinstellung .slider-point {
		opacity: 1; /* Sichtbar beim Hover */
		animation: slideLoop 2.8s ease-in-out infinite alternate;
	  }
	}

	@keyframes slideLoop {
	  from { transform: translateX(0); }
	  to { transform: translateX(60px); }
	}
	/* Leistungsstark*/
	/* 1) Grundzustand: SVG-Pfeile sind immer sichtbar (opacity:1), KEINE Transformation */
	.icon-dreifachpfeil-01 .arrow {
	  opacity: 1;
	}

	/* 2) Hover-Trigger: Desktop ≥ 992px + prefers-reduced-motion: no-preference */
	@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	  /* Pfeil 1: Animation startet sofort bei Hover (t₀ = 0s) */
	  .usp-NTS1-Konf1-tile:hover .icon-dreifachpfeil-01 .arrow:nth-child(1) {
		animation: fadeArrow1 2s ease-out infinite;
	  }
	  /* Pfeil 2: Einblendphase 0,4s – 0,9s → Keyframe verschiebt das intern */
	  .usp-NTS1-Konf1-tile:hover .icon-dreifachpfeil-01 .arrow:nth-child(2) {
		animation: fadeArrow2 2s ease-out infinite;
	  }
	  /* Pfeil 3: Einblendphase 0,7s – 1,2s → Keyframe verschiebt das intern */
	  .usp-NTS1-Konf1-tile:hover .icon-dreifachpfeil-01 .arrow:nth-child(3) {
		animation: fadeArrow3 2s ease-out infinite;
	  }
	}

	/* 3) Keyframes für „Line Sweep / Wellenvorlauf” */
	/*    → Jeder Keyframe regelt für einen Pfeil: 
			 • 0s–Startzeitpunkt: opacity=0 
			 • dann Fade-in über 0,5 s 
			 • danach bis Ende Zyklus (2 s): opacity=1 
		   Prozentwerte beziehen sich immer auf 2 s gesamt (0% = 0 s, 100% = 2 s). */

	/* Pfeil 1:  Einblenden 0,1 s → 0,6 s  (entspricht 5% → 30% von 2 s), danach stehenbleiben */
	@keyframes fadeArrow1 {
	  /* 0% (t = 0 s) bis 5% (t = 0,1 s) →  unsichtbar */
	  0%   { opacity: 0; }
	  5%   { opacity: 0; }
	  /* 30% (t = 0,6 s) → spätestens vollständig sichtbar */
	  30%  { opacity: 1; }
	  /* 100% (t = 2,0 s) → durchgehend sichtbar */
	  100% { opacity: 1; }
	}

	/* Pfeil 2:  Einblenden 0,4 s → 0,9 s  (entspricht 20% → 45% von 2 s), danach stehenbleiben */
	@keyframes fadeArrow2 {
	  /* 0% (0 s) bis 20% (0,4 s) → unsichtbar */
	  0%    { opacity: 0; }
	  20%   { opacity: 0; }
	  /* 45% (0,9 s) → spätestens vollständig sichtbar */
	  45%   { opacity: 1; }
	  /* 100% (2 s) → durchgehend sichtbar */
	  100%  { opacity: 1; }
	}

	/* Pfeil 3:  Einblenden 0,7 s → 1,2 s  (entspricht 35% → 60% von 2 s), danach stehenbleiben */
	@keyframes fadeArrow3 {
	  /* 0% (0 s) bis 35% (0,7 s) → unsichtbar */
	  0%    { opacity: 0; }
	  35%   { opacity: 0; }
	  /* 60% (1,2 s) → spätestens vollständig sichtbar */
	  60%   { opacity: 1; }
	  /* 100% (2 s) → durchgehend sichtbar */
	  100%  { opacity: 1; }
	}
		  /* Direkt vom hersteller*/

	@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	  .usp-NTS1-Konf1-tile:hover .icon-direkt .arrow {
		animation: arrowMove 0.8s ease-out forwards;
	  }
	}

	@keyframes arrowMove {
	  from { transform: translateX(0); }
	  to   { transform: translateX(6px); }
	}
	  /*flagge*/
	 /* --- Basis: jedem Streifen seine eigene Transform-Box + Ursprung --- */
	.icon-flagge rect {
	  transform-box: fill-box;    /* Bezug = eigene Bounding-Box      */
	  transform-origin: 50% 0%;   /* Anker oben mittig                */
	  transform: scaleY(1);       /* Ruhezustand = sichtbar           */
	}

	/* --- Keyframes: von scaleY(0) → scaleY(1) -------------------------- */
	@keyframes flagStripeGrow {
	  0%   { transform: scaleY(0); }
	  100% { transform: scaleY(1); }
	}

	/* --- Hover / Tastatur-Fokus: Animation nur auf Desktop & Motion-OK -- */
	@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	  /* Kachel-Hover oder -Fokus löst den Falteffekt aus */
	  .usp-NTS1-Konf1-tile:hover   .icon-flagge rect,
	  .usp-NTS1-Konf1-tile:focus   .icon-flagge rect,
	  .usp-NTS1-Konf1-tile:focus-visible .icon-flagge rect {
		transform: scaleY(0);          /* sofort einklappen … */
	  }
	  .usp-NTS1-Konf1-tile:hover   .icon-flagge rect:nth-child(1),
	  .usp-NTS1-Konf1-tile:focus   .icon-flagge rect:nth-child(1),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-flagge rect:nth-child(1) {
		animation: flagStripeGrow 0.5s ease-out   forwards;
		animation-delay: 0s;
	  }	
	  .usp-NTS1-Konf1-tile:hover   .icon-flagge rect:nth-child(2),
	  .usp-NTS1-Konf1-tile:focus   .icon-flagge rect:nth-child(2),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-flagge rect:nth-child(2) {
		animation: flagStripeGrow 0.5s ease-out   forwards;
		animation-delay: 0.4s;
	  }
	  .usp-NTS1-Konf1-tile:hover   .icon-flagge rect:nth-child(3),
	  .usp-NTS1-Konf1-tile:focus   .icon-flagge rect:nth-child(3),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-flagge rect:nth-child(3) {
		animation: flagStripeGrow 0.5s ease-out   forwards;
		animation-delay: 0.8s;
	  }
	}
	  /*Einfache Installation*/
	  @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {

	.usp-NTS1-Konf1-tile:hover .icon-stoppuhr .hand {
	   animation: spinHandOnce 2s linear forwards;
	  }
	}

	@keyframes spinHandOnce {
	from { transform: rotate(-60deg); }
	to   { transform: rotate(0deg); }
	}
	/* Komplexe Steuerung*/
	/* ============================================================
	   Icon „Signalkontakte & Synchronausführung“  – 1,2-s-Hover-Animation
	   ============================================================ */

	/* ───────── Grundzustand (sichtbar, ausgefahren) ───────────── */
	.usp-NTS1-Konf1-spindle{
	  transform-box: fill-box;   /* Bezug = eigene Box          */
	  transform-origin: 0% 50%;  /* linke Kante = Gehäusewand   */
	  transform: scaleX(1);      /* voll ausgefahren            */
	  fill: currentColor;
	}

	/* Lampe AN */
	.usp-NTS1-Konf1-signal-lamp circle{ fill:#FFD700; stroke:currentColor; stroke-width:2; }
	.usp-NTS1-Konf1-lamp-rays line    { stroke:currentColor; stroke-width:2; opacity:1; }

	/* ───────── Keyframes ───────────────────────────────────────── */
	/* Spindel fährt gleichmäßig von 0 → 1 in 1,2 s */
	@keyframes spindleExtend{
	  0%   { transform: scaleX(0); }
	  100% { transform: scaleX(1); }
	}

	/* Lampe aus (0–90 %) → an (100 %) */
	@keyframes lampBody{
	  0%,90% { fill-opacity:0; }
	  100%   { fill-opacity:1; }
	}
	@keyframes lampRays{
	  0%,90% { opacity:0; }
	  100%   { opacity:1; }
	}

	/* ───────── Hover-Trigger – nur Desktop + Motion-OK ────────── */
	@media (min-width:992px) and (prefers-reduced-motion:no-preference){
	  /* Spindeln synchron ausfahren */
	  .usp-NTS1-Konf1-tile:hover .usp-NTS1-Konf1-spindle{
		animation: spindleExtend 1.2s ease-out forwards;
	  }
	  /* Lampe blitzt nach Ende wieder auf */
	  .usp-NTS1-Konf1-tile:hover .usp-NTS1-Konf1-signal-lamp circle{
		animation: lampBody 1.2s linear forwards;
	  }
	  .usp-NTS1-Konf1-tile:hover .usp-NTS1-Konf1-lamp-rays line{
		animation: lampRays 1.2s linear forwards;
	  }
	}
	/* Kacheln für Tastennavigation*/
	/* 1) Kachel im Fokus: gelber Ring, Offset 2px */
	.usp-NTS1-Konf1-tile:focus-visible {
	  outline: 3px solid #FFCC01;
	  outline-offset: 2px;
	}

	/* 2) Fallback, falls :focus-visible nicht unterstützt wird:
	   zeigt den Ring auch bei normalem :focus */
	.usp-NTS1-Konf1-tile:focus {
	  outline: 3px solid #FFCC01;
	  outline-offset: 2px;
	}
	/* ================================
	   Grundzustand: Lampe komplett weg
	   ================================ */
	.usp-NTS1-Konf1-signal-lamp circle {
	  fill-opacity: 0;
	  stroke-opacity: 0;
	}
	.usp-NTS1-Konf1-lamp-lamp line {
	  opacity: 0;
	}

	/* ================================
	   Hover/Fokus: Lampe & X animieren
	   ================================ */
	@media (min-width:992px) and (prefers-reduced-motion:no-preference) {
	  /* Kreis aus-/einblenden */
	  .usp-NTS1-Konf1-tile:hover   .usp-NTS1-Konf1-signal-lamp circle,
	  .usp-NTS1-Konf1-tile:focus   .usp-NTS1-Konf1-signal-lamp circle,
	  .usp-NTS1-Konf1-tile:focus-visible .usp-NTS1-Konf1-signal-lamp circle {
		animation: lampBody     1.2s linear forwards;
		stroke-opacity: 1; /* neu: Umriss gleichzeitig einblenden */
	  }

	  /* X‐Linien (Diagonalen) aus-/einblenden */
	  .usp-NTS1-Konf1-tile:hover   .usp-NTS1-Konf1-lamp-lamp line,
	  .usp-NTS1-Konf1-tile:focus   .usp-NTS1-Konf1-lamp-lamp line,
	  .usp-NTS1-Konf1-tile:focus-visible .usp-NTS1-Konf1-lamp-lamp line {
		animation: lampRays 0s linear forwards;
	  }
	}
	/* Mobile Animation*/
	/* ================================================================
	   Mobile-Trigger  (360-991 px)   –   Animation startet bei :focus
	   ================================================================ */
	@media (min-width: 360px) and (max-width: 991px)
		   and (prefers-reduced-motion: no-preference) {

	  /* 1) FLAGGE – Falteffekt (drei Streifen) */
	  .usp-NTS1-Konf1-tile:focus .icon-flagge rect,
	  .usp-NTS1-Konf1-tile:focus-visible .icon-flagge rect { transform: scaleY(0); }
	  .usp-NTS1-Konf1-tile:focus .icon-flagge rect:nth-child(1),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-flagge rect:nth-child(1){
		animation: flagStripeGrow .5s ease-out forwards; animation-delay:0s;
	  }
	  .usp-NTS1-Konf1-tile:focus .icon-flagge rect:nth-child(2),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-flagge rect:nth-child(2){
		animation: flagStripeGrow .5s ease-out forwards; animation-delay:.4s;
	  }
	  .usp-NTS1-Konf1-tile:focus .icon-flagge rect:nth-child(3),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-flagge rect:nth-child(3){
		animation: flagStripeGrow .5s ease-out forwards; animation-delay:.8s;
	  }

	  /* 2) REGLER-SLIDER – fünf Punkte (icon-konfigurieren-anim) */
	  .usp-NTS1-Konf1-tile:focus .icon-anim circle:nth-of-type(1),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-anim circle:nth-of-type(1){
		animation: moveSlider1 2s   ease-in-out infinite alternate;
	  }
	  .usp-NTS1-Konf1-tile:focus .icon-anim circle:nth-of-type(2),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-anim circle:nth-of-type(2){
		animation: moveSlider2 2.2s ease-in-out infinite alternate;
	  }
	  .usp-NTS1-Konf1-tile:focus .icon-anim circle:nth-of-type(3),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-anim circle:nth-of-type(3){
		animation: moveSlider3 2.4s ease-in-out infinite alternate;
	  }
	  .usp-NTS1-Konf1-tile:focus .icon-anim circle:nth-of-type(4),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-anim circle:nth-of-type(4){
		animation: moveSlider4 2.6s ease-in-out infinite alternate;
	  }
	  .usp-NTS1-Konf1-tile:focus .icon-anim circle:nth-of-type(5),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-anim circle:nth-of-type(5){
		animation: moveSlider5 2.8s ease-in-out infinite alternate;
	  }

	  /* 3) LEISTUNGSSTARK – Dreifachpfeil (Line-Sweep) */
	  .usp-NTS1-Konf1-tile:focus .icon-dreifachpfeil-01 .arrow:nth-child(1),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-dreifachpfeil-01 .arrow:nth-child(1){
		animation: fadeArrow1 2s ease-out infinite;
	  }
	  .usp-NTS1-Konf1-tile:focus .icon-dreifachpfeil-01 .arrow:nth-child(2),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-dreifachpfeil-01 .arrow:nth-child(2){
		animation: fadeArrow2 2s ease-out infinite;
	  }
	  .usp-NTS1-Konf1-tile:focus .icon-dreifachpfeil-01 .arrow:nth-child(3),
	  .usp-NTS1-Konf1-tile:focus-visible .icon-dreifachpfeil-01 .arrow:nth-child(3){
		animation: fadeArrow3 2s ease-out infinite;
	  }

	  /* 4) STOPPSCHILD – Lastabschaltung */
	  .usp-NTS1-Konf1-tile:focus .stop-sign,
	  .usp-NTS1-Konf1-tile:focus-visible .stop-sign {
		opacity: 1;               /* nutzt vorhandenen transition 0.3s */
	  }

	  /* 5) SPINDEL + LAMPE – Signalkontakte */
	  .usp-NTS1-Konf1-tile:focus .usp-NTS1-Konf1-spindle,
	  .usp-NTS1-Konf1-tile:focus-visible .usp-NTS1-Konf1-spindle {
		animation: spindleExtend 1.2s ease-out forwards;
	  }
	  .usp-NTS1-Konf1-tile:focus .usp-NTS1-Konf1-signal-lamp circle,
	  .usp-NTS1-Konf1-tile:focus-visible .usp-NTS1-Konf1-signal-lamp circle {
		animation: lampBody 1.2s linear forwards; stroke-opacity:1;
	  }
	  .usp-NTS1-Konf1-tile:focus .usp-NTS1-Konf1-lamp-lamp line,
	  .usp-NTS1-Konf1-tile:focus-visible .usp-NTS1-Konf1-lamp-lamp line {
		animation: lampRays 1.2s linear forwards;
	  }

	  /* 6) SLIDER-PUNKT – Hubeinstellung */
	  .usp-NTS1-Konf1-tile:focus .icon-hubeinstellung .slider-point,
	  .usp-NTS1-Konf1-tile:focus-visible .icon-hubeinstellung .slider-point{
		opacity: 1;
		animation: slideLoop 2.8s ease-in-out infinite alternate;
	  }

	  /* 7) STOPPUHR – Zeiger */
	  .usp-NTS1-Konf1-tile:focus .icon-stoppuhr .hand,
	  .usp-NTS1-Konf1-tile:focus-visible .icon-stoppuhr .hand{
		animation: spinHandOnce 2s linear forwards;
	  }

	  /* 8) INFINITY – Wartungsfrei */
	  .usp-NTS1-Konf1-tile:focus .icon-wartungsfrei .infinity-path,
	  .usp-NTS1-Konf1-tile:focus-visible .icon-wartungsfrei .infinity-path{
		animation: drawInfinity 1.4s ease-out;
	  }
	}

	/* Systemintegration */
		/* Grundstil: Haken ist immer komplett sichtbar */
		.icon-checkmark .check{
		  stroke: currentColor;
		  fill: none;
		  stroke-width: 3;
		  stroke-linecap: round;
		  stroke-linejoin: round;
		  stroke-dasharray: 50;   /* Länge beibehalten */
		  stroke-dashoffset: 0;   /* vollständig gezeichnet */
		}

		/* Keyframe: erst zurückspringen, dann wieder zeichnen */
		@keyframes reDraw {
		  0%   { stroke-dashoffset: 50; }   /* Unsichtbar */
		  100% { stroke-dashoffset: 0;  }   /* Komplett sichtbar */
		}

		/* ───────── Desktop-Hover (≥ 992 px) ───────── */
	   
		  .usp-NTS1-Konf1-tile:hover .icon-checkmark .check{
			animation: reDraw 1.6s ease-out forwards;
		  }
		

		/* ───────── Mobile/Tablet (360–991 px) – :focus Trigger ───────── */
		@media (min-width:360px) and (max-width:991px)
			   and (prefers-reduced-motion:no-preference){
		  .usp-NTS1-Konf1-tile:focus .icon-checkmark .check,
		  .usp-NTS1-Konf1-tile:focus-visible .icon-checkmark .check{
			animation: reDraw 1.6s ease-out forwards;
		  }
		}





	/*****************************************
	 *  NTS1 Hub‑Viewer – Scoped Styles      *
	 *****************************************/
	:root{
	  /* Bindet sich an globale CD‑Variablen; fällt auf Default zurück, falls nicht vorhanden */
	  --nts1-accent: var(--blue,#005B9F);
	  --nts1-accent-dark: var(--blue-dark,#003662);
	  --nts1-accent-light: #0072C3; /* etwas helleres Marken‑Blau */
	  --nts1-text: var(--text,#000);
	  --nts1-bg: var(--bg,#fff);
	  --nts1-grey: var(--grey,#C8CDD2);
	  --nts1-radius: var(--radius,8px);
	}
	.gross {
	  font-size: 18px;
	  font-weight: bold;
	}
	/********** Layout Wrapper **********/
	.nts1-hub{font-family:'Roboto',sans-serif;background:var(--nts1-bg);color:var(--nts1-text);max-width:1000px;margin:40px auto;padding:24px 32px;border-radius:var(--nts1-radius);box-shadow:0 2px 8px rgba(0,0,0,.1);text-align:center;user-select:none;}

	/********** Balken **********/
	.nts1-hub__bar{position:relative;width:100%;height:16px;margin:12px 0 36px;border-radius:var(--nts1-radius);background:var(--nts1-grey);cursor:pointer;}
	.nts1-hub__fill{height:100%;border-radius:inherit;pointer-events:none;transition:width .25s ease;transform-origin:left center;background:linear-gradient(90deg,var(--nts1-accent-light) 0%,var(--nts1-accent) 60%,var(--nts1-accent-dark) 100%);}  
	@keyframes nts1-bounce{0%{transform:scaleX(1)}80%{transform:scaleX(1.04)}100%{transform:scaleX(1)}}
	.nts1-hub__fill--animate{animation:nts1-bounce .18s ease-out;}

	/********** Unsichtbarer Range zum Draggen **********/
	.nts1-hub__range{position:absolute;top:-2px;left:0;width:100%;height:20px;opacity:0;cursor:pointer;-webkit-appearance:none;border:none;}
	.nts1-hub__range::-webkit-slider-thumb{width:0;height:0;-webkit-appearance:none;}
	.nts1-hub__range::-moz-range-thumb{width:0;height:0;border:none;}

	/********** Werte‑Labels **********/
	.nts1-hub__labels{position:relative;height:18px;margin-top:-28px;margin-bottom:12px;pointer-events:none;}
	.nts1-hub__label{position:absolute;top:0;transform:translateX(-50%);font-size:14px;color:var(--nts1-accent);white-space:nowrap;background:none;border:0;cursor:pointer;pointer-events:auto;}
	.nts1-hub__label::after{content:"";display:block;height:2px;background:var(--nts1-accent);width:0;transition:width .2s;margin-top:2px;}
	.nts1-hub__label:hover::after,.nts1-hub__label:focus::after{width:100%;}
	.nts1-hub__label:focus-visible{outline:2px solid var(--nts1-accent);outline-offset:2px;border-radius:4px;}

	/********** Details **********/
	.nts1-hub__details{display:none;margin-top:16px;border:1px solid var(--nts1-grey);border-radius:var(--nts1-radius);padding:12px;background:var(--nts1-bg);text-align:left;}
	.nts1-hub__details strong{color:var(--nts1-accent);}
	.nts1-hub__details-img{display:block;width:100%;height:auto;margin-top:8px;border-radius:var(--nts1-radius);}  
	.nts1-hub__cta{margin-top:18px;padding:11px 20px;border:0;border-radius:var(--nts1-radius);color:#fff;background:var(--nts1-accent);cursor:pointer;font-weight:500;transition:background .2s;}
	.nts1-hub__cta:hover{background:var(--nts1-accent-dark);}  

	/********** Mobile **********/
	@media(max-width:480px){
	  .nts1-hub__label{font-size:13px;}
	  .nts1-hub h3{font-size:18px;}
	}
	@media (max-width: 420px) {
	  .nts1-hub__labels .nts1-hub__label:nth-child(2) {
		display: none;
	  }
	  }
	  


	/*Optionen Montage Felx*/
	/* Container: macht aus der UL ein flexibles 2‑Spalten‑Grid */
	.nts1-optlist{
	  display:flex;
	  flex-wrap:wrap;
	  gap:1.5rem;      
	  list-style:none;
	  margin:0;
	  padding:0;
	}

	/* Jeder Kategorie‑Block (LI) nimmt ~50 % Breite ein */
	.nts1-optcat{
	  flex:1 1 50%;
	}

	/* Ab Desktop (≈ 750 px) vier Spalten */
	@media (min-width:1024px){
	  .nts1-optcat{ flex:1 1 23%; }
	}
 /* ===== Container & Layout ===== */
  .feature-card {
    position: relative;
    background: #F8F8F8;
    color: #000000;
    border: 1px solid #dddddd;
    border-radius: 12px;
    padding: 20px;
    overflow: hidden;
    container-type: inline-size; /* erlaubt Container-Queries */
  }

  /* Blaue Verlaufsspur links (dezent) */
  .feature-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #003662 0%, #003662 100%);
  }

  .feature-card__header { display: grid; row-gap: 8px; margin-bottom: 12px; }

  .feature-card__title {
    margin: 0;
    color: #2B2F33;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.2px;
  }

  .spec-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .spec-badges li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #dddddd;
    border-radius: 9999px;
    background: #FFFFFF;
    color: #000000;
    font-weight: 700;
  }

  /* Kleiner Gradient-Chip zur Markenanmutung */
  .spec-badges li::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(180deg, #003662 0%, #003662 100%);
    flex: none;
  }

  .divider {
    border: 0;
    border-top: 1px solid #E0E0E0);
    margin: 12px 0 16px 0;
  }

  .feature-list { display: grid; row-gap: 14px; }

  .feature { display: grid; row-gap: 6px; }

  .feature__term {
    margin: 0;
    color: #2B2F33;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* Gelber USP-Indikator (nicht als Textfarbe genutzt) */
  .usp-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #FFCC01;
    box-shadow: 0 0 0 2px #FFFFFF inset;
    flex: none;
  }

  .feature__desc {
    margin: 0;
    color: #000000;
    font-weight: 500;
  }

  abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted #dddddd;
    cursor: help;
  }

  /* Zweispaltiges Layout ab bestimmter Kartenbreite */
  @container (min-width: 640px) {
    .feature-list { grid-template-columns: 1fr 1.4fr; column-gap: 24px; }
    .feature { grid-template-columns: subgrid; grid-column: 1 / -1; }
    .feature__term { grid-column: 1; }
    .feature__desc { grid-column: 2; }
  }

  /* ===== Fokus-/Interaktionsfarben (Buttons optional, falls später benötigt) ===== */
  .feature-card a:focus-visible,
  .feature-card button:focus-visible {
    outline: 3px solid #003662;
    outline-offset: 2px;
  }