* {
		    box-sizing: border-box !important;
			margin: 0;
			padding: 0;
		}

		:root {
			--primary-blue: #0086dd;
			--primary-blue-hover: #006bb3;
			--primary-orange: #ff9900;
			--accent-blue: #00b4ff;
			--text-dark: #1f2937;
			--text-predark: #3d4f69;
			--text-gray: #6b7280;
			--text-light: #9ca3af;
			--bg-gray: #f9fafb;
			--white: #ffffff;
			--chart-solar: #e0c152;         /* dezentes Gelb f?r PV-Ertrag */
			--chart-netzbezug: #c0392b;     /* gedecktes Rot f?r Netzbezug */
			--chart-klima: #2980b9;         /* gedecktes Blau f?r Klimager?te */
			--chart-heizung: #e59866;       /* warmes Hellrot f?r Heizung */
			--chart-wallbox: #5c5c5c;       /* neutrales Dunkelgrau f?r Wallbox */
			--chart-grundlast: #7f8c8d;     /* Grau f?r Grundlast */
			--chart-einspeisung: #27ae60;   /* Gr?n f?r Einspeisung */
			--shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
			--shadow-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
			--border-radius: 16px;
			--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}

		body {
				font-family: 'Open Sans';
				line-height: 1.6;
				padding-top: 0;
				color: var(--text-dark);
				background-color: #fff;
			 	font-size: 16px;
			-webkit-font-smoothing: antialiased;
    		text-rendering: optimizeLegibility;
		}


        
		/* Typography */
		h1 {     font-size: clamp(32px, 3.2vw, 48px); font-weight: 600;    letter-spacing: -0.035em;line-height: 1.08;}
		h2 {     font-size: clamp(32px, 3.2vw, 48px); font-weight: 600; line-height: 1.1; color: var(--text-dark); }
		h3 { font-size: 1.25rem; font-weight: 600; }
		p { font-size: 16px; line-height: 1.5; color: #5a6072; }

		h1.bg {
			font-size: clamp(32px, 3.2vw, 48px);font-weight: 600;    letter-spacing: 1px;line-height: 1.18; margin-bottom: 28px;
		}

.hero-gradient {
    background: radial-gradient(at 80% 20%, oklch(78% .17 60 / .18), transparent 55%), radial-gradient(at 20% 80%, oklch(62% .17 245 / .22), transparent 55%) !important;
	background: radial-gradient(at 90% 10%, oklch(0.78 0.17 60 / 0.1), transparent 55%), radial-gradient(at 20% 80%, oklch(0.62 0.17 245 / 0.06), transparent 55%) !important;
}

.bg-surface {
    background: oklch(98.5% 0.005 240);
}

.bg-orange {
	background: #ff992b14;
}

 .content-header {
		
		padding: 150px 0 80px;
		background: oklch(0.985 0.005 240);
	}
    

.link-primary {
	color: #008ce4 !important;
	font-weight: 600;
}

		.text-color-gradient {
			background: linear-gradient(135deg, var(--primary-blue), #0099ff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		
		.text-color-gradient-orange {
			background: linear-gradient(180deg, #ff7a00, #ff9900);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		
		.row::after {
				content: unset;
		}
		
		.headerfeature {
			position: relative;
			padding-left: 24px;
			text-align: left;
			<!-- text-shadow: 2px 2px 3px #000000; -->
		}
		
		.headerfeature::before {
			content: "\2713"; /* Unicode f?r ? (&#10003;) */
			position: absolute;
			left: 0;
			top: 0;
			color: #ff7a00;
			font-size: 1.2em;
		}
		
		.splide__slide {
		    overflow: hidden;
		}
		
		/* listen */
		
			.liste ul {
			  list-style: none;
			  padding-left: 0;
				padding: 0;
				margin: 0;
			  
			}

			.liste li {
			  margin-bottom: 15px;
			  position: relative;
				align-items: center !important;
			}

			ul.functions_list li {
				
			}

			/*.liste li::before {
			  content: "\2713"; /* Unicode f?r ? (&#10003;) */
			  /*position: absolute;
			  left: 0;
			  top: 0;
			  color: #007bff;
			  font-size: 1.2em;
			}*/


        .button {
            background: linear-gradient(135deg, var(--primary-blue), #0099ff);
            color: var(--white);
            padding: 0.6rem 1.5rem;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            box-shadow: 0 4px 8px rgba(0, 134, 221, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .button:hover {
            background: linear-gradient(135deg, var(--primary-blue-hover), #0077cc);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 134, 221, 0.4);
        }
		
        .cta-button {
            background: linear-gradient(135deg, var(--primary-blue), #0099ff);
            color: var(--white);
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(0, 134, 221, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .cta-button:hover {
            background: linear-gradient(135deg, var(--primary-blue-hover), #0077cc);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 134, 221, 0.4);
        }
		
		.cta-button-orange {
			background: linear-gradient(135deg, #ff7a00, #ff9900); /* satten Orangeton */
			color: var(--white);
			padding: 0.75rem 1.5rem;
			border-radius: 8px;
			text-decoration: none;
			font-weight: 600;
			transition: var(--transition);
			box-shadow: 0 4px 15px rgba(255, 136, 0, 0.4); /* oranger Shadow */
			border: 1px solid rgba(255, 255, 255, 0.2);
		}

		.cta-button-orange:hover {
			background: linear-gradient(135deg, #e66a00, #ff8800); /* dunkler f?r Hover-Effekt */
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(255, 136, 0, 0.5); /* intensiverer Shadow beim Hover */
		}
		
		.cta-button-gray {
		    background: #3d4f69;
		    box-shadow: 0 4px 15px rgba(61, 77, 99, 0.4); /* oranger Shadow */
		}

        .cta-button-gray:hover {
			background: #374557;
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(48, 58, 71, 0.5); /* intensiverer Shadow beim Hover */
		}
        
        .cta-button-light-grey{
          background: #f9fafb !important;
          background-color: #f9fafb !important;
          color: #111827;
        }
        

		
		#funktionsweise .row {
				gap: 40px;
		}

		/* Content Section */		
        .content {
			padding-top: 60px;
			padding-bottom: 10px;
            max-width: 1200px;
            margin: 0 auto;
        }
		
       /* Hero Section */
        .hero {
            padding: 4rem 2rem 4rem;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
						<!-- height: 65vh; -->
						height: auto;
						width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
						overflow: hidden;
        }

        .hero-container {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            width: 100%;
        }

        .hero-graphic {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-graphic video {
            width: 100%;
            max-width: 500px;
            height: auto;
        }

        .hero-content {
            position: relative;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		padding: 48px;
    		/*box-shadow: 0px 0px 2px black;*/
            text-align: left;
			/*background: rgba(0,0,0,.6);*/
			border-radius: 8px;
			/*backdrop-filter: blur(4px);*/
        }

        .hero h1 {
            margin-bottom: 1.5rem;
						padding: 0;
            background-clip: text;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
			    letter-spacing: -0.035em;
    line-height: 1.08;
        }

        .hero p {
            font-size: 1.25rem;
            color: var(--text-predark);
            margin-bottom: 2.5rem;
            font-weight: 500;
            line-height: 1.6;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
						justify-content: center;
						align-items: center;
        }

        .hero-buttons .cta-button {
            padding: 1rem 2rem;
            font-size: 1.1rem;
        }
		
        .hero-buttons .cta-button-orange {
            padding: 1rem 2rem;
            font-size: 1.1rem;
        }
		
		/*hero header */

		.hero-header {
		  position: relative;
		  height: 400px; /* anpassbar nach Bedarf */
		  background-size: cover;
		  background-position: center;
		}
		.hero-header .overlay {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  color: #fff;
		  text-align: center;
		  background: rgba(0, 0, 0, 0.4); /* Kontrast f?r Lesbarkeit */
		  padding: 20px 40px;
		}
		.hero-header h1 {
		  margin: 0;
		  font-size: 2.5em;
			font-weight: 600 !important;
			letter-spacing: -0.035em !important;
			line-height: 1.08 !important;
			font-size: clamp(32px, 3.2vw, 48px) !important;
		}
		.hero-header p {
		  margin: 0.5em 0 0;
		  font-size: 1.2em;
		}
		
		
		/*split Hero*/
		
		.split-hero {
		  display: flex;
		  flex-wrap: wrap;
		  align-items: stretch;
		  width: 100%;
		  min-height: 500px; /* anpassen */
		}

		.split-hero__content, .split-hero__image {
		  flex: 1 1 50%;
		  box-sizing: border-box;
		 max-width: 950px;
		}

		.split-hero__content {
		  padding: 40px;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		}

		.split-hero__content h1 {
		  font-size: 2.5em;
		  margin-bottom: 20px;
		}

		.split-hero__content p {
		  font-size: 1.2em;
		}

		.split-hero__image {
			position: absolute;
			right: 0;
			top: 150px;
		  overflow: hidden; /* wichtig f?r den Mask-Effekt */
		}

		.split-hero__image img {
		  width: 100%;
		  height: 100%;
		  object-fit: cover;

		  /* Hier passiert der weiche ?bergang: */
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-composite: source-in;
			-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%), linear-gradient(to right, transparent 5%, black 30%), linear-gradient(to top, transparent 0%, black 20%);
			-webkit-mask-image: linear-gradient(to bottom, transparent -1%, black 40%), linear-gradient(to right, transparent 5%, black 50%), linear-gradient(to top, transparent 4%, black 40%);
		}

		/* Responsives Verhalten */

        @media (min-width: 451px) { 
            
    	    .headerfeature-small {
			    display: none;
			}
        }

        @media (max-width: 450px) {
            
            .animate-fade-in {
                height: 100%;
            }
            
            .hero {
                height: calc(100vh - 135px) !important;
            }
            
            .hero-content {
                padding: 24px;
                height: 100%;
            }
            
            .tricoma_energy_header {
                display: none;
            }
            
            .splide {
                font-size: 28px !important;
                height: 3.5em !important;
            }
            
			.splide__slide {
			    font-size: 28px !important;
			}
			
			.headerfeature-normal {
			    display: none;
			}
			
			.headerfeature-small {
			    display: block;
			}
        }

		@media (max-width: 540px) {
				.splide {
						height: 3.5em !important;
				}
				
				.splide__slide {
						display: flex;
						flex-direction: column;
						justify-content: center;
						height: 3.5em !important;
						text-align: center;
						align-items: center;
						font-size: 32px;
						letter-spacing: -1px;
				}
		}

		@media (max-width: 900px) {
		
			.headerfeature-row {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		
			.headerfeature {
				width: fit-content;
			}
		
			.headerfeatures {
				flex-direction: column !important;
				gap: unset !important;
			}
			
			.headerfeatures ul {
				padding: 0;
			}
			
			.headerfeatures ul li {
				padding: 0;
			}
		
			.headervideo {
				<!-- width: unset !important; -->
			}
		
		  .split-hero {
			flex-direction: column;
		  }
		  .split-hero__content, .split-hero__image {
			flex: 1 1 100%;
		  }
		  .split-hero__content {
			order: 1;
		  }
		  .split-hero__image {
			order: 2;
		  }
		}

        /* Section Styling */
        .section {
            padding: 5rem 0;
            /*max-width: 1200px;*/
            margin: 0 auto;
        }

        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-footer {
            text-align: center;
			margin-top: 3rem;
        }
		
        .section-header h2 {
            margin-bottom: 1rem;
            font-size: 28px;
            font-weight: 700;
        }

        .section-header p {
            font-size: 1.1rem;
            color: var(--text-gray);
            max-width: 600px;
            margin: 0 auto;
        }

        /* Card Grid */
        .card-grid {
            display: grid;
            gap: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

        .card {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
        }

        .card-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            display: block;
			text-align: center;
        }
		
        .card-icon-img {
           	height: 105px;
        }

        .card h3 {
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .card p {
            color: var(--text-gray);
        }
		
        .card-image {
            position: relative;
            z-index: 2;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
			width: 200px;
        }

        .card .btn.btn-primary {
            background: none;
            color: var(--primary-blue);
            text-decoration: underline;
        }
        
        .card .btn.btn-primary:hover {
            background: none;
            color: var(--primary-blue);
        }

        /* Target Groups */
        .target-group-card {
            background: var(--white);
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
			max-width: 600px;
        }

        .target-group-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
        }

        .target-group-image {
            width: 100%;
            height: 300px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            position: relative;
            overflow: hidden;
			/* filter: grayscale(100%); */
        }

        .target-group-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
			background: linear-gradient(
				to bottom,
				rgba(255, 255, 255, 0.5),  /* oben: halbtransparentes */
				rgba(0, 0, 0, 0)     /* unten: komplett transparent */
			  );
        }

        .target-group-image span {
            position: relative;
            z-index: 2;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .target-group-content {
            padding: 1.5rem;
        }

        .target-group-content h3 {
            margin-bottom: 0.5rem;
        }

        .target-group-content p {
            color: var(--text-gray);
            margin-bottom: 1rem;
        }

        .target-group-content ul {
            list-style: none;
            space-y: 0.5rem;
        }

        .target-group-content li {
            color: var(--text-gray);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
		
        .target-group-content .button {
            margin-top: 30px; 
        }

      /* Pricing */
        .pricing-grid {
            display: grid;
            gap: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            margin-top: 2rem;
        }
        
        .pricing-card {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2.5rem 2rem;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            height: 100%;
            border-top: 4px solid var(--card-accent, var(--primary-blue));
            display: flex;
            flex-direction: column;
        }
        
        .pricing-card[data-tier="private"] { --card-accent: var(--primary-blue); }
        .pricing-card[data-tier="business"] { --card-accent: var(--primary-orange); }
        
        .pricing-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 0.85rem auto;
            background-color: var(--card-accent, var(--primary-blue));
            opacity: 0.95;
        
            -webkit-mask-position: center;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-position: center;
            mask-repeat: no-repeat;
            mask-size: contain;

            flex: 0 0 auto;
        }
        
        .pricing-icon--private {
            -webkit-mask-image: url('/templates/tricoma_energy/Labels/icons/privat.svg');
            mask-image: url('/templates/tricoma_energy/Labels/icons/privat.svg');
        }
        
        .pricing-icon--business {
            -webkit-mask-image: url('/templates/tricoma_energy/Labels/icons/gewerblich.svg');
            mask-image: url('/templates/tricoma_energy/Labels/icons/gewerblich.svg');
        }
        
        /* Hover wie zuvor (dezent) */
        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }
        
        .pricing-card.is-featured,
        .pricing-card.featured {
            transform: translateY(-6px);
            box-shadow: var(--shadow-hover);
        }
        
        .pricing-card.is-featured:hover,
        .pricing-card.featured:hover {
            transform: translateY(-10px);
        }
        
        .pricing-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary-blue);
            margin-bottom: 0.5rem;
            min-height: 3.2em;            
            display: flex;
            align-items: center;
            justify-content: center;
            text-wrap: balance;            
            flex: 0 0 auto;
        }
        
        .pricing-price {
            font-size: 2.5rem;
            font-weight: 900;
            color: var(--text-dark);
            //margin-bottom: 1rem;
            min-height: 1.2em;
            flex: 0 0 auto;
        }
		
		.pricing-tax{
			font-size: 0.8rem; 
			font-weight: normal; 
			margin-bottom: 1rem;
			flex: 0 0 auto;
		}
        
        .pricing-description {
            color: var(--text-gray);
            margin-bottom: 2rem;
            font-size: 0.92rem;
            min-height: 4.2em;       
            flex: 0 0 auto;
        }
        
        .pricing-features {
            list-style: none;
            text-align: left;
            margin: 0;
            padding-left: 0;
            flex: 1 1 auto;
        }
        
        .pricing-features li {
            color: var(--text-dark);
            margin-bottom: 0.85rem;
            font-size: 0.92rem;
            display: flex;
            gap: 0.65rem;
            align-items: flex-start;
        }
        
        .pricing-features li::before {
            content: "\2713";
            color: var(--card-accent, var(--primary-blue));
            font-weight: 900;
            line-height: 1.2;
            margin-top: 2px;
        }
        
        @media (max-width: 991.98px) {
            .pricing-card.is-featured,
            .pricing-card.featured {
                transform: none;
            }
        
            .pricing-card:hover,
            .pricing-card.is-featured:hover,
            .pricing-card.featured:hover {
                transform: translateY(-6px);
            }
        }
        
        /* --- Mobile Pricing--- */
        
        .pricing-mobile-head,
        .pricing-mobile-body {
            display: none;        
        }
        
        .pricing-desktop {
            display: block;       
        }

        @media (max-width: 576px) {
        
            .pricing-desktop { display: none; }
            .pricing-mobile-head { display: grid; }
            .pricing-mobile-body { display: block; }
        
            .pricing-card {
                padding: 0;
                text-align: left;
            }
        
            .pricing-mobile-head{
                width: 100%;
                border: 0;
                background: transparent;
                cursor: pointer;
                padding: 1.05rem 1.1rem;
            
                display: grid;
                grid-template-columns: 52px 1fr 26px; 
                grid-template-rows: auto auto;      
                column-gap: 0.85rem;
                row-gap: 0.25rem;
                align-items: center;
            
                appearance: none;
                -webkit-appearance: none;
                text-align: left;
                box-shadow: none;
                outline: none;
                -webkit-tap-highlight-color: transparent;
            }
            
            .pricing-mobile-head:focus,
            .pricing-mobile-head:active,
            .pricing-mobile-head:hover{
                background: transparent;
                color: inherit;
                box-shadow: none;
                outline: none;
            }
            
            .pricing-mobile-icon{
                grid-column: 1 / 2;
                grid-row: 1 / 3;
                width: 44px;
                height: 44px;
                margin: 0;
                opacity: 0.95;
            }
            
            .pricing-mobile-title{
                grid-column: 2 / 3;
                grid-row: 1 / 2;
            
                font-weight: 700;
                color: var(--text-dark);
                font-size: 0.96rem;  
                line-height: 1.2;
            
                hyphens: none;
                -webkit-hyphens: none;
                word-break: normal;
                overflow-wrap: break-word;
            
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                min-width: 0;
                margin-bottom: 0.05rem;
            }
            
            .pricing-mobile-title--nowrap{
                white-space: nowrap;
            }
            
            .pricing-mobile-price{
                grid-column: 2 / 3;
                grid-row: 2 / 3;

                font-weight: 900;
                color: var(--text-dark);
                font-size: 2.05rem;
                line-height: 1.05;
                white-space: nowrap;
            }
            
            .pricing-mobile-price-suffix{
                font-size: 0.95rem;
                font-weight: 700;
                color: var(--text-gray);
                margin-left: 0.45rem;
            }

            .pricing-tax-mobile{
                margin: .85rem 0 .35rem 0;
                font-size: .85rem;
                color: var(--text-gray);
            }
            
            .pricing-mobile-chevron{
                grid-column: 3 / 4;
                grid-row: 2 / 3;      
                width: 22px;
                height: 22px;
                position: relative;
                justify-self: end;
                align-self: end;   
                margin-top: 0.15rem;
            }
        
            .pricing-mobile-chevron::before {
                content: "";
                position: absolute;
                inset: 0;
                margin: auto;
                width: 10px;
                height: 10px;
                border-right: 2px solid rgba(31,41,55,0.6);
                border-bottom: 2px solid rgba(31,41,55,0.6);
                transform: rotate(45deg);
                transition: transform 180ms ease;
            }
        
            .pricing-mobile-body {
                padding: 0 1rem 1rem 1rem;
                border-top: 1px solid rgba(31, 41, 55, 0.06);
                background: transparent;
            }
        
            .pricing-card.is-open .pricing-mobile-chevron::before {
                transform: rotate(-135deg);
            }
        
            .pricing-tax {
				font-size: 9pt;
				margin: 0px;
            }
		
            .pricing-mobile-body .pricing-description {
                margin: 0.85rem 0 1rem 0;
                min-height: 0;
            }
        
            .pricing-mobile-body .pricing-features li {
                margin-bottom: 0.65rem;
            }

            @media (max-width: 390px) {
                .pricing-mobile-head { grid-template-columns: 44px 1fr 104px 22px; }
                .pricing-mobile-price { font-size: 1rem; }
            }
        }

        /* Billing Toggle */
        .pricing-billing-toggle{
          display:flex;
          justify-content:center;
          margin: 1.25rem 0 1.75rem 0;
        }
        
        /* Pill */
		.billing-pill{
		  width: min(380px, 92vw);
		  height: 58px;
		  border-radius: 999px;

		  border: 0;
		  cursor: pointer;
		  padding: 8px 10px;

		  background: #ffffff;          
		  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
		  backdrop-filter: none;            

		  position: relative;
		  display:flex;
		  align-items:center;

		  -webkit-tap-highlight-color: transparent;
		  appearance: none;
		  -webkit-appearance: none;
		  outline: none;
		}

		.billing-pill:hover{
		  background: #f9fafb;              
		}

		.billing-pill:active,
		.billing-pill:focus{
		  background: #ffffff;
		  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
		  outline: none;
		}

		.billing-pill:focus-visible{
		  outline: 3px solid rgba(0, 134, 221, 0.25);
		  outline-offset: 4px;
		}

        
        /* Labels inside pill */
        .billing-pill-track{
          width: 100%;
          height: 100%;
          border-radius: 999px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          align-items: center;
          padding: 0 14px;
          position: relative;
        }
        
        /* Middle divider */
        .billing-pill-track::after{
          content:"";
          position:absolute;
          left: 50%;
          top: 10px;           /* nicht ganz oben */
          bottom: 10px;        /* nicht ganz unten */
          width: 1px;
          transform: translateX(-0.5px);
          background: rgba(17,24,39,0.12);
          border-radius: 1px;
        }
        
        /* Labels */
        .billing-pill-label{
          font-weight: 800;
          font-size: 1rem;
          text-align: center;
          color: rgba(17,24,39,0.55);
          transition: color 180ms ease;
          user-select:none;
        }
        
        .billing-pill.is-monthly .billing-pill-label--monthly{ color: var(--primary-blue); }
        .billing-pill.is-yearly  .billing-pill-label--yearly { color: var(--primary-blue); }
        
        @media (max-width: 576px){
          .billing-pill-track{
            padding: 0 34px;  
          }
        
          .billing-pill-label{
            font-size: 0.95rem; 
          }
        }
        
        /* Moving knob */
        .billing-pill-knob{
          position: absolute;
          top: 50%;
          left: 10px; 
          transform: translateY(-50%);
          width: 44px;
          height: 44px;
          border-radius: 999px;
        
          /* heller Kreis */
          background: rgba(255,255,255,0.58);
          box-shadow:
            0 10px 22px rgba(0,0,0,0.16),
            inset 0 0 0 1px rgba(255,255,255,0.35);
        
          transition: left 260ms ease;
          z-index: 3;
        }
        
        /* Blitz */
        .billing-pill-knob::after{
          content:"";
          position:absolute;
          inset:0;
          border-radius:999px;
        
          background-image: linear-gradient(180deg, #f8990d 0%, #fcd91f 100%);
          -webkit-mask-image: url('/templates/tricoma_energy/Labels/icons/tricoma_energy_blitz.svg');
          mask-image: url('/templates/tricoma_energy/Labels/icons/tricoma_energy_blitz.svg');
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-position: center;
        
          -webkit-mask-size: 38px 38px;
          mask-size: 38px 38px;
        }
        
        /* Yearly state: knob wandert nach rechts */
        .billing-pill.is-yearly .billing-pill-knob{
          left: calc(100% - 10px - 44px);
        }

        
        /* Price roll + short color flash  */
        .price-amount {
          display: inline-flex;
          align-items: baseline;
          gap: 0.15em;
        }
        
        .price-currency {
          font: inherit;
        }
        
        .price-number {
          font: inherit;
          transition: color 180ms ease;
        }

        .price-pulse-blue .price-number   { color: var(--primary-blue); }
        .price-pulse-orange .price-number { color: var(--primary-orange); }
        

        /* Benefits */
        .benefits-grid {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        /* Features Grid */
        .features-grid{
            display: grid;
            gap: 1.75rem;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            margin-top: 2rem;
        }

        @media (min-width: 1200px){
            .features-grid{
                grid-template-columns: repeat(5, 1fr);
            }
        }

        .feature-card{
            position: relative;
            border-radius: 16px; /* NEU */
            background: var(--white);
            overflow: hidden;
            min-height: 260px;
            box-shadow: 0 10px 28px rgba(0,0,0,.10);
            border: 1px solid rgba(0,0,0,.06);
            cursor: pointer;
            outline: none;
            font: inherit; 
        }

        .feature-card *{
            font: inherit; 
        }

        .feature-card:focus-visible{
            box-shadow: 0 0 0 3px rgba(0,134,221,.25), 0 10px 28px rgba(0,0,0,.10);
        }

        /* Icon-Zone oben */
        .feature-card__icon{
            height: 190px;
            display: grid;
            place-items: center;
            padding: 1.5rem;
        }

        .feature-card__icon img{
            width: 120px;
            height: auto;
            display: block;
        }

        /* Overlay unten */
        .feature-card__overlay{
          position: absolute;
          left: 0; right: 0; bottom: 0;
        
          background: #0086dd;
          padding: 16px 18px 14px;
        
          border-top-left-radius: 16px;
          border-top-right-radius: 16px;
        
          display: flex;
          flex-direction: column;
          align-items: center;     
          text-align: center;    
        
          transform: translateY(calc(100% - 70px));
          transition: transform 260ms ease;
        }

       .feature-card__title{
          margin: 0;
          width: 100%;
          text-align: center;
          color: white;
        
          font-size: 14px;
          font-weight: 900;
          line-height: 1.25;
        
          margin-bottom: 14px;  
        }

        /* Beschreibung */
        .feature-card__desc{
          margin: 0; 
          color: rgba(255,255,255,.85);
          font-size: .9rem;
          line-height: 1.45;
        
          width: 100%;
          max-width: 30ch;     
        
          opacity: 0;
          transform: translateY(6px);
          transition: opacity 180ms ease, transform 180ms ease;
        }

        /* "Mehr erfahren"  */
        .feature-card__more{
          margin-top: 16px;    
          align-self: center;
        
          text-decoration: none;
          color: white;
        
          font-weight: 700;
          font-size: .78rem;
          letter-spacing: .01em;
        
          position: relative;
          padding-bottom: 2px;
        
          opacity: 0;
          transform: translateY(6px);
          transition: opacity 180ms ease, transform 180ms ease;
        }

        /* Underline l?dt NUR bei Hover auf dem Link */
        .feature-card__more::after{
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-orange, #ff9900);
            transition: width 0.3s ease;
        }
        
        /* Mobile: Underline bei "Mehr erfahren" standardm??ig sichtbar */
        @media (max-width: 640px){
          #funktionen .feature-card__more::after{
            width: 100%;
          }
        }

        .feature-card__more:hover::after,
        .feature-card__more:focus-visible::after{
            width: 100%;
        }

        /* Hover: Overlay f?hrt hoch + Desc/Link erscheinen */
        @media (hover: hover){
            .feature-card:hover .feature-card__overlay{
                transform: translateY(0);
            }
            .feature-card:hover .feature-card__desc,
            .feature-card:hover .feature-card__more{
                opacity: 1;
                transform: translateY(0);
                transition-delay: 90ms;
            }
        }


        .more-features {
            text-align: center;
            margin-top: 3rem;
            padding: 2rem;
            background: var(--bg-gray);
            border: 2px dashed rgba(0, 134, 221, 0.3);
            border-radius: var(--border-radius);
            color: var(--text-gray);
        }

        .more-features h4 {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
            color: var(--primary-blue);
        }

        .more-features h4 {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }

        .benefit-card {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 2rem;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .benefit-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        .benefit-icon {
            font-size: 1rem;
            margin-bottom: 1rem;
            display: block;
        }
		
        .benefit-icon-img {
           	height: 70px;

        }

        /* Contact */
        .contact {
            background: var(--white);
            border-radius: var(--border-radius);
            padding: 3rem;
            text-align: center;
            box-shadow: var(--shadow);
            margin: 2rem auto;
            max-width: 600px;
        }

        /* Footer */
        .footer {
            background: var(--text-dark);
            color: var(--white);
            padding: 3rem 2rem 2rem;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            gap: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        .footer-section h4 {
            margin-bottom: 1rem;
            color: var(--white);
        }

        .footer-section p,
        .footer-section a {
            color: var(--text-light);
            text-decoration: none;
            line-height: 1.8;
        }

        .footer-section a:hover {
            color: var(--accent-blue);
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 0.5rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
				
			.hero-container {
				grid-template-columns: 1fr; /* Statt 1fr 1fr */
				gap: 2rem;
				text-align: center;
			}

			.hero-content {
				text-align: center; /* Text in die Mitte, wirkt auf kleineren Screens besser */
			}
			

				


            .hero {
								padding: 0;
								height: auto;
            }
						
						.hero-content {
								border-radius: 0;
            }

						.hero .animate-fade-in {
								width: 100%;
						}

            .section {
                padding: 3rem 1rem;
            }

            .tplus_container .section {
                padding: 3rem 2rem;
            }

            .card-grid {
                grid-template-columns: 1fr;
            }

            .pricing-card.featured {
                transform: none;
            }

            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
						
						.hero-buttons .cta-button, .hero-buttons .cta-button-orange {
								width: 40%;
								min-width: 250px;
						}
        }


        @media (max-width: 1061px) {
            .hero-container {
				grid-template-columns: 1fr; /* Statt 1fr 1fr */
				gap: 2rem;
				text-align: center;
			}

			.hero-content {
				text-align: center; /* Text in die Mitte, wirkt auf kleineren Screens besser */
			}
			

				


        }

        /* Smooth Scrolling */
        html {
            scroll-behavior: smooth;
        }
		
		/* Globale Styles f?r alle Textfelder, Selects und Textareas */
		input[type="text"],
		input[type="email"],
		input[type="number"],
		input[type="tel"],
		input[type="password"],
		input[type="url"],
		input[type="search"],
		textarea,
		select {
		  width: 100%;
		  padding: 12px 16px;
		  border: 1px solid #ccc;
		  border-radius: 8px;
		  font-size: 16px;
		  font-family: inherit;
		  transition: border-color 0.3s, box-shadow 0.3s;
		  box-sizing: border-box;
		  background-color: #fff;
		}

		input[type="text"]:focus,
		input[type="email"]:focus,
		input[type="number"]:focus,
		input[type="tel"]:focus,
		input[type="password"]:focus,
		input[type="url"]:focus,
		input[type="search"]:focus,
		textarea:focus,
		select:focus {
		  border-color: #0077ff;
		  box-shadow: 0 0 8px rgba(0, 119, 255, 0.2);
		  outline: none;
		}

        input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      width: 38px;
      height: 38px;
      border: 2px solid #0077ff;
      border-radius: 8px;
      cursor: pointer;
      position: relative;
      background: #fff;
      transition: background 0.25s ease, border-color 0.25s ease;
      overflow: hidden;
    }
    
    /* The SVG-like tick via clip-path */
    input[type="checkbox"]::after {
      content: "";
      position: absolute;
      inset: 0;
      background: white;
    
      /* Draw a tick shape with clip-path polygon */
      clip-path: polygon(30% 50%, 45% 65%, 75% 35%, 85% 45%, 45% 85%, 20% 60%);
      
      /* Initially hidden */
      transform: scale(0);
      transition: transform 0.25s ease;
    }
    
    /* Checked state */
    input[type="checkbox"]:checked {
      background: #0077ff;
      border-color: #0077ff;
    }
    
    input[type="checkbox"]:checked::after {
      transform: scale(1) translate(0, -2px);
    } 
    
    /* Hover effect */
    input[type="checkbox"]:hover {
      box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.2);
    }


        select {
            padding: 0 16px;
        }

		/* Einheitliches Styling f?r Labels */
		label {
		    display: block;
		    margin-bottom: 6px;
		    font-weight: 500;
		}

		/* Globale Styles f?r Buttons */
		button,
		input[type="submit"] {
		    display: inline-block;
		    padding: 12px 24px;
		    font-size: 16px;
		    font-weight: 600;
		    color: #fff;
		    background-color: #0077ff;
		    border: none;
		    border-radius: 8px;
		    cursor: pointer;
		    transition: background-color 0.3s, transform 0.1s;
		}

		button:hover,
		input[type="submit"]:hover {
		  background-color: #005ec2;
		}

		button:active,
		input[type="submit"]:active {
		    transform: scale(0.98);
		}

		/* Optional: Deaktivierte Buttons */
		button:disabled,
		input[type="submit"]:disabled {
		    background-color: #cccccc;
		    cursor: not-allowed;
		}
		
        /* Loading Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in {
            animation: fadeInUp 0.6s ease-out;
        }

		/* tplus */
		
.tplus_actions {
	margin-top: 20px;
	margin-bottom: 20px;
	
}

.tplus_actions > a {
	margin-right: 20px;
}

		.tplus_bildtext .tplus_column {
			position: relative;
		}

        .tplus_container {
            color: inherit;
            width: 100%;
        }
        
        .tplus_container .section {
            padding: 3rem 1.5rem;
        }

		.section .tplus_container {
			width: 100%;
			max-width: 1500px !important;
			margin: 0 auto;
		}
		
		.tplus_bildtext {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: center;
			align-items: center;
			gap: 2px;
		}

        .tplus_bildtext h2 {
            font-size: 28px;
        }

        .tplus_image.detailbild {
            text-align: center;
        }
		
		.tplus_bildtext > .tplus_column > .tplus_image.detailbild {
            text-align: center;
            
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .tplus_container div.section {
            padding-bottom: 0;
            padding-top: 0;
        }
        
        .tplus_bildtext {
            /*max-width: 85%;*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
        }
        
        .tplus_bildtext_ueberschrift h2 {
            font-size: 28px;
            font-weight: 700;
        }
        
        .tplus_bildtext img:not(.big_img.h_500) {
            object-fit: cover;
        }

		/* Tabellen */

		.table_layout {
			border-radius: 12px;
			border: 1px solid #ECEFF1;
			background: #FAFAFA;
		}

		.table_layout .table_header, .table_layout .table_row {
			display: flex;
			width: 100%;
		}
		.table_layout .table_header .table_th, .table_layout .table_body .table_td {
			flex-basis: 16.66%;
			max-width: 16.66%;
			min-width: 10.66%;
			padding: 20px;
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
		}
		 .table_layout .table_body .table_row {
			border-top: 1px solid #ECEFF1;
		}
		.table_layout .table_header .table_th.first, .table_layout .table_body .table_td.first {
			flex-basis: 50%;
			max-width: 50%;
			padding-right: 40px;
			justify-content: flex-start;
			position: relative;
		}

		.table_layout .img {
			height: 28px;
			min-width: 28px;
			max-width: 28px;
			display: block;
			width: auto;
			-webkit-mask-size: cover;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center center;

			margin-top: 0px;


		}

		.table_td.first > h3 {
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding-right: 40px;
			font-weight: 700;
			font-size: 20px;
			user-select: none;
		}

		.table_td.first.no_cursor > h3 {
			cursor: unset;
			user-select: unset;
		}
		
		.mask_check {
			-webkit-mask-image: url(/templates/tricoma_energy/Labels/feather_black/check.svg);
			background-image: linear-gradient(147deg, var(--accent-blue) 10%, var(--primary-blue) 25%, var(--primary-blue) 85%);
		}

		.mask_close {
			-webkit-mask-image: url(/templates/tricoma_energy/Labels/feather_black/minus.svg);
			background-image: linear-gradient(128deg, #BDBDBD 25%, #757575 85%);
		}

		.mask_blitz {
			-webkit-mask-image: url('/templates/tricoma_energy/Labels/icons/tricoma_energy_blitz.svg');
			background-image: linear-gradient(180deg, #f8990d 0%, #fcd91f 100%);
		}

.mask_check.blau {
	background-image: linear-gradient(147deg, var(--accent-blue) 10%, var(--primary-blue) 25%, var(--primary-blue) 85%) !important;
}

.mask_check.orange {
	background-image: linear-gradient(180deg, #f8990d 0%, #fcd91f 100%) !important;
}

.mask_blitz.blau {
	background-image: linear-gradient(147deg, var(--accent-blue) 10%, var(--primary-blue) 25%, var(--primary-blue) 85%) !important;
}

.mask_blitz.orange {
	background-image: linear-gradient(180deg, #f8990d 0%, #fcd91f 100%) !important;
}
		
		
		/* einfuehrung */

		.einfuehrung-container {
		  display: flex;
		  flex-wrap: wrap;
		  gap: 40px;
		}

		.einfuehrung {
		  flex: 1 1 220px;
		  min-width: 220px;
		}


		.einfuehrung-number {
		  font-size: 20px;
		  font-weight: 700;
		  color: var(--primary-blue); /* Orange */
		  margin-bottom: 10px;
		  position: relative;
		  display: inline-block;
		}

		.einfuehrung-number::after {
		  content: "";
		  display: block;
		  width: 150px;
		  height: 2px;
		  background: var(--primary-blue);
		  margin-top: 10px;
		}

		.einfuehrung-title {
		  font-size: 22px;
		  font-weight: 700;
		  margin: 20px 0 10px;
		}

		.einfuehrung-text {
		  font-size: 16px;
		  line-height: 1.5;
		  color: #333;
		}
		
		/* Start Bereich */
		
        .start-image {
            width: 100%;
            height: 150px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            position: relative;
            overflow: hidden;
        }
		
		.start-image img{
			width:128px;
		}

        .start-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            
            z-index: 1;
        }
		
		.start-container {
		  display: grid;
		  grid-template-columns: 1fr 1fr;
		  max-width: 1200px;
		  margin: 0 auto;
		  padding: 40px 20px;
		  gap: 20px;
		}
		.start-box {
		  background: #ffffff;
		  border-radius: 12px;
		  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		  padding: 40px 30px;
		  transition: transform 0.3s;
		  cursor: pointer;
		  text-align: left;
		}
		.start-box:hover {
		  transform: translateY(-5px);
		}
		.start-box h2 {
		  margin-bottom: 20px;
		  font-size: 28px;
		  color: #1d1d1f;
		  text-align: center;
		}
		.start-box p {
		  font-size: 18px;
		  color: #555;
		  line-height: 1.4;
		  margin-bottom: 15px;
		}

		
		/* Kontaktformular */
		
		.kontaktformular-ueberschrift {
		  text-align: center;
		  font-size: 2.5em;
		  color: #007bff;
		  text-transform: uppercase;
		  margin: 40px auto;
		  max-width: 900px;
		}

		.kontaktformular-container-all {
		  max-width: 1200px;
		  margin: 0 auto 40px auto;
		  padding: 30px;
		  background: white;
		  border-radius: 8px;
		  box-shadow: 0 0 15px rgba(0,0,0,0.1);
		  display: flex;
		  flex-wrap: wrap;
		  gap: 40px;
		}

		.kontaktformular-vorteile {
		  flex: 1;
		  min-width: 280px;
		}

		.kontaktformular-vorteile h2 {
		  margin-top: 0;
		}

		.kontaktformular-form-container {
		  flex: 2;
		  min-width: 320px;
		}

		.kontaktformular {
		  display: grid;
		  grid-template-columns: 1fr 1fr;
		  gap: 20px;
		}

		.kontaktformular-group {
		  display: flex;
		  flex-direction: column;
		}

		.kontaktformular-group-full {
		  grid-column: 1/3;
		  display: flex;
		  flex-direction: column;
		}

		.kontaktformular label {
		  font-weight: bold;
		  margin-bottom: 5px;
		}

		.kontaktformular-checkbox-group {
		  display: flex;
		  align-items: flex-start;
		  gap: 10px;
		}

		.kontaktformular-checkbox-group input[type="checkbox"] {
		  margin-top: 5px;
		}

		.kontaktformular-checkbox-group label {
		  font-weight: normal;
		}
		
		
		/* Standards, Funktionsweise */
		
			section.standards {
			  padding: 4rem 0;
			  position: relative;
			}
			.standards h2 {
			  text-align: center;
			  /*font-size: 2.5rem;*/
			  font-size: 28px;
			  font-weight: 700;
			  margin-bottom: 2rem;
			}
			.standards .container {
			  max-width: 1400px;
			  margin: 0 auto;
			  text-align: center;
			  padding: 0 2rem;
			  position: relative;
			}
			.standards .row {
			  display: flex;
			  flex-wrap: wrap;
			  justify-content: center;
			  align-items: stretch;
			  gap: 1.5rem;
			  position: relative;
			}
			.standards .box, .standards .result-box {
			  flex: 1 1 160px;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  position: relative;
			}
			.standards .box {
			  background: white;
			  padding: 1.5rem;
			  border-radius: 12px;
			  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			}
			.standards .box::before {
			  content: "";
			  position: absolute;
			  top: -40px;
			  left: 50%;
			  transform: translateX(-50%);
			  width: 0;
			  height: 40px;
			  border-left: 3px dashed #00A1E0;
			}
			.standards .box h3 {
			  font-size: 1.3rem;
			  margin-bottom: 1rem;
			}
			.standards .result-box {
			  background: #00A1E0;
			  color: white;
			  padding: 2rem;
			  border-radius: 12px;
			  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
			  margin: 2rem 0;
			}
			.standards .result-box h3 {
			  font-size: 1.6rem;
			  margin-bottom: 1rem;
			}

			.konfigurator {
			  max-width: 900px;
			  margin: auto;
			  background: #fff;
			  border-radius: 12px;
			  padding: 2rem;
			  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
			}
		
			.konfigurator_anfrage_preisausgabe{
				text-align: left;
				margin-top: 3rem;
				padding: 2rem;
				background: var(--bg-gray);
				border: 2px dashed rgba(0, 134, 221, 0.3);
				border-radius: var(--border-radius);
			}

			.konfigurator h1 {
			  font-size: 2rem;
			  font-weight: bold;
			  margin-bottom: 0.5rem;
			}

			.konfigurator .subtitle {
			  color: #555;
			  margin-bottom: 2rem;
			}

			.konfigurator-step h2 {
			  font-size: 1.5rem;
			  margin-bottom: 0.2rem;
			}

			.konfigurator-step .step-desc {
			  color: #777;
			  margin-bottom: 1.5rem;
			}

			/* === Preisbox Styles === */
			#konfigurator_preisbox {
			  position: fixed;
			  top: 20px;
			  right: 20px;
			  background-color: #ffffff;
			  color: #000000;
			  border: 2px solid #007bff;
			  border-radius: 10px;
			  padding: 12px 20px;
			  font-size: 1.0em;
			  font-weight: bold;
			  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			  z-index: 9999;
			  max-width: 300px;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  gap: 10px;
			}
		
			.konfigurator_chart-container {
			  max-width: 1100px;
			  margin: 0 auto;
			  padding: 20px;
			}

			.konfigurator_chart-title {
			  text-align: center;
			  font-size: 36px;
			  font-weight: 700;
			  color: #2c3e50;
			  margin-bottom: 40px;
			  letter-spacing: 0.5px;
			  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
			}

			.konfigurator_chart {
			  display: grid;
			  grid-template-columns: repeat(12, 1fr);
			  gap: 10px;
			  height: 300px;
			  border-left: 2px solid #BDC3C7;
			  border-bottom: 2px solid #BDC3C7;
			  background: #fff;
			  padding: 10px;
			}

			.konfigurator_bar-pair {
			  display: flex;
			  flex-direction: column;
			  justify-content: flex-end;
			  align-items: center;
			  height: 100%;
			}

			.konfigurator_bar {
			  display: flex;
			  width: 100%;
			  gap: 4px;
			  align-items: flex-end;
			  height: 100%;
			}

			.konfigurator_bar-inner {
			  flex: 1;
			  display: flex;
			  flex-direction: column;
			  justify-content: flex-end;
			  align-items: center;
			  height: 100%;
			}

			.konfigurator_bar-rect {
			  width: 100%;
			  height: 80%;
			  display: flex;
			  flex-direction: column;
			  border-radius: 8px 8px 0 0;
			  overflow: hidden;
			}

			.konfigurator_bar-netzbezug {
			  height: 40%;
			  background: var(--chart-netzbezug);
			  border-radius: 8px 8px 0 0;
			}

			.konfigurator_bar-solar {
			  height: 60%;
			  background: var(--chart-solar);
			}

			.konfigurator_stackbar {
			  width: 100%;
			  height: 80%;
			  display: flex;
			  flex-direction: column;
			  border-radius: 8px 8px 0 0;
			  overflow: hidden;
			}

			.konfigurator_stack-segment {
			  width: 100%;
			}
		
			.konfigurator_tabelle_zeile{
				padding: 8px; 
				border: 1px solid #ccc;
			}
		
			.konfigurator_tabelle_ergebnis{
				padding: 8px; 
				border: 1px solid #ccc;
				font-weight: 700;
			}
		

			.konfigurator_stack-einspeisung { background: var(--chart-einspeisung); height: 20%; }
			.konfigurator_stack-heizung { background: var(--chart-heizung); height: 25%; }
			.konfigurator_stack-klima { background: var(--chart-klima); height: 15%; }
			.konfigurator_stack-wallbox { background: var(--chart-wallbox); height: 20%; }
			.konfigurator_stack-grundlast { background: var(--chart-grundlast); height: 20%; }

			.konfigurator_bar-label {
			  margin-top: 5px;
			  font-size: 12px;
			  color: #7F8C8D;
			  text-align: center;
			}

			.konfigurator_legend {
			  margin-top: 30px;
			  display: flex;
			  justify-content: center;
			  gap: 20px;
			  flex-wrap: wrap;
			  font-size: 14px;
			}

			.konfigurator_legend-item {
			  display: flex;
			  align-items: center;
			  gap: 8px;
			}

			.konfigurator_legend-color {
			  width: 20px;
			  height: 20px;
			  border-radius: 4px;
			}
		
		
		.konfigurator_legend-separator {
			width: 100%;
			height: 1px;
			background: #ccc;
			margin: 10px 0;
		}
		.konfigurator_legend {
			margin-top: 30px;
			display: flex;
			justify-content: center;
			gap: 30px;
			flex-wrap: nowrap;
			font-size: 14px;
			align-items: flex-start;
		}

		.konfigurator_legend-block {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.konfigurator_legend-separator-vertical {
			width: 1px;
			background: #ccc;
			margin: 0 20px;
			display: block;
			align-self: stretch;
		}

		.konfigurator_legend-separator-vertical {
			display: block;
			width: 1px;
			background: #ccc;
			margin: 0 20px;
		}
		
			.konfigurator_toggle-container {
			display: flex;
			justify-content: center;
			gap: 12px;
			margin-bottom: 20px;
		  }

		  .konfigurator_toggle-button {
			padding: 10px 18px;
			font-size: 14px;
			border: 1px solid #ccc;
			background-color: #f9f9f9;
			border-radius: 6px;
			cursor: pointer;
			transition: background-color 0.2s, border-color 0.2s;
		  }

		  .konfigurator_toggle-button:hover {
			background-color: #eaeaea;
		  }

		  .konfigurator_toggle-active {
			background-color: #2c3e50;
			color: #fff;
			border-color: #2c3e50;
		  }

		  .konfigurator_bar-value {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 9px;
			color: #fff;
			font-weight: 300;
			white-space: nowrap;
			pointer-events: none;
		  }
		
		  .konfigurator_bar-netzbezug,
		  .konfigurator_bar-solar,
		  .konfigurator_stack-einspeisung,
		  .konfigurator_stack-heizung,
		  .konfigurator_stack-klima,
		  .konfigurator_stack-wallbox,
		  .konfigurator_stack-grundlast {
			position: relative;
		  }
		
			@media (max-width: 600px) {
			  #konfigurator_preisbox {
				left: 10px;
				right: 10px;
				top: 100px;
				height: 100px;
				font-size: 1em;
				padding: 10px 16px;
				flex-direction: column;
				align-items: flex-start;
				gap: 6px;
			  }
			}

			.options {
			  display: flex;
			  gap: 1rem;
			  flex-wrap: wrap;
			  justify-content: space-between;
			}

			.option-card {
			  flex: 1 1 calc(20% - 1rem);
			  min-width: 220px;
			  background: #fff;
			  border: 2px solid #ddd;
			  border-radius: 12px;
			  text-align: center;
			  padding: 1rem 0.5rem;
			  cursor: pointer;
			  transition: all 0.3s ease;
			}

			.option-card:hover {
			  border-color: #ff9900;
			  transform: translateY(-4px);
			  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
			}

			.option-card.active {
			  border-color: #ff9900;
			  background: #fff7e6;
			}

			.option-card img {
			  max-height: 60px;
			  margin-bottom: 0.5rem;
			}

			.option-title {
			  font-size: 0.9rem;
			  font-weight: 600;
			}

			.option-text {
			  font-size: 0.8rem;
			  font-weight: 400;
			}
		
			.navigation {
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  margin-top: 2rem;
			}

			.btn {
				padding: 0.8rem 1.5rem;
				font-size: 1rem;
				border: none;
				border-radius: 8px;
				background: linear-gradient(135deg, var(--primary-blue), #0099ff);
				color: var(--white);
				cursor: pointer;
				transition: background 0.3s ease;
			}

            .btn:hover {
                color: white;
            }

			.btn:hover:not(.btn-disabled) {
			  color: white;
			  background: linear-gradient(1deg, var(--primary-blue), #0099ff);
			}

			.btn-disabled {
			  background: #ccc;
			  cursor: not-allowed !important;
			}
			
			.btn-disabled:hover {
			    color: white;
			    background: #ccc;
			}

			.progress {
			  flex: 1;
			  height: 8px;
			  margin: 0 1rem;
			  background: #eee;
			  border-radius: 4px;
			  overflow: hidden;
			}

			.progress-bar {
			  height: 100%;
			  background: linear-gradient(135deg, var(--primary-blue), #0099ff);
			  width: 0;
			  transition: width 0.3s ease;
			}
		
		  .monatschart_container {
			max-width: 900px;

			padding: 5px;
		  }

		  .monatschart {
			display: flex;
			flex-direction: column;
			gap: 16px;
			padding: 4px;
			background: #fff;
		  }

		  .monatschart_row {
			display: flex;
			align-items: center;
			gap: 8px;
			height: 20px;
		  }

		  .monatschart_label {
			width: 120px;
			font-size: 13px;
			color: #2c3e50;
		  }

		  .monatschart_bar {
			height: 100%;
			border-radius: 8px;
			align-items: center;
			text-align: center;
			valign: middle;
			color: #fff;
			height: 25px;
			font-size: 11px;
			font-weight: 300;
			white-space: nowrap;
		  }
		
		  .bar_solar { background: var(--chart-solar); width: 60%; }
		  .bar_netz { background: var(--chart-netzbezug); width: 40%; }
		  .bar_einspeisung { background: var(--chart-einspeisung); width: 20%; }
		  .bar_heizung { background: var(--chart-heizung); width: 25%; }
		  .bar_klima { background: var(--chart-klima); width: 15%; }
		  .bar_wallbox { background: var(--chart-wallbox); width: 20%; }
		  .bar_grundlast { background: var(--chart-grundlast); width: 20%; }
			
		  .monatschart_bars {
			display: flex;
		  }
		
			@media screen and (max-width: 989px) {

            	.heribert_hilfe img {
            		height: auto !important;
            		max-height: 200px;
            	}
            	
            	ul.rechts.tutorials, ul.rechts.filter {
            		display: grid;
            		justify-content: start;
            		margin-top: 40px;
            	}
            	
            	ul.rechts.tutorials li, ul.rechts.filter li {
            		line-height: 30px;
            	}
            	
            	ul.rechts.tutorials li .arrow span, ul.rechts.filter li .arrow span {
            		top: 5px;
            	}
            	
            	.tutorialeintrag .card {
            		display: grid;
            	}
            	
            	.tutorialeintrag div.bild {
            		width: calc(100% - 40px);
            		padding-top: 20px;
            		padding-bottom: 0;
            		padding-right: 20px;
            	}
            	
            	.tutorialeintrag div.text {
            		width: 100%;
            	}
            	
            	.tplus_bildtext {
            		display: flex;
            		flex-direction: row;
            		flex-wrap: wrap;
            		justify-content: flex-start;
            		align-content: center;
            		align-items: center;
            	}
            	.tplus_column.columns {
            		padding-left: 0 !important;
            		padding-right: 0 !important;
            		    padding-top: 20px;
            	}
            
            	.tplus_bildtext.text-left > .tplus_column:not(.line0):first-child {
            		order:2;
            		margin-top: 30px;
            	}
            
            	.tplus_bildtext.text-left > .tplus_column:not(.line0):nth-child(2) {
            		order:1;
            	}
            
            	.tplus_bildtext.text-left > .tplus_column.line0 {
            		order:1;
            	}
            
            	.tplus_bildtext.text-left > .tplus_column.line0 ~ .tplus_column {
            		order:2;
            		margin-top: 30px;
            	}
            
            	h2.faq_ueberschrift {
            		font-size: 30px !important;
            	}
            
            	ul.faq > li > a {
            		font-size: 18px !important;
            
            	}
            
            	ul.faq .faqcontent {
            		font-size: 14px !important;
            		line-height: 20px !important;
            
            	}
            
            	.tplus_element.tplus_elemente_abstand {
            		max-height: 80px;
            	}
            }

		/* Schriftart Open Sans */

		@font-face {
		  font-family: 'Open Sans';
		  font-style: normal;
		  font-weight: 300;
		  src: url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300.eot);
		  src: local(''),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300.eot?#iefix) format('embedded-opentype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300.woff2) format('woff2'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300.woff) format('woff'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300.ttf) format('truetype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300.svg#OpenSans) format('svg');
		  font-display: swap;
		}

		@font-face {
		  font-family: 'Open Sans';
		  font-style: italic;
		  font-weight: 300;
		  src: url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300italic.eot);
		  src: local(''),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300italic.eot?#iefix) format('embedded-opentype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300italic.woff2) format('woff2'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300italic.woff) format('woff'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300italic.ttf) format('truetype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-300italic.svg#OpenSans) format('svg');
		  font-display: swap;
		}

		@font-face {
		  font-family: 'Open Sans';
		  font-style: normal;
		  font-weight: 400;
		  src: url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-regular.eot);
		  src: local(''),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-regular.eot?#iefix) format('embedded-opentype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-regular.woff2) format('woff2'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-regular.woff) format('woff'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-regular.ttf) format('truetype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-regular.svg#OpenSans) format('svg');
		  font-display: swap;
		}

		@font-face {
		  font-family: 'Open Sans';
		  font-style: italic;
		  font-weight: 400;
		  src: url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-italic.eot);
		  src: local(''),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-italic.eot?#iefix) format('embedded-opentype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-italic.woff2) format('woff2'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-italic.woff) format('woff'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-italic.ttf) format('truetype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-italic.svg#OpenSans) format('svg');
		  font-display: swap;
		}

		@font-face {
		  font-family: 'Open Sans';
		  font-style: normal;
		  font-weight: 600;
		  src: url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600.eot);
		  src: local(''),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600.eot?#iefix) format('embedded-opentype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600.woff2) format('woff2'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600.woff) format('woff'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600.ttf) format('truetype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600.svg#OpenSans) format('svg');
		  font-display: swap;
		}

		@font-face {
		  font-family: 'Open Sans';
		  font-style: italic;
		  font-weight: 600;
		  src: url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600italic.eot);
		  src: local(''),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600italic.eot?#iefix) format('embedded-opentype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600italic.woff2) format('woff2'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600italic.woff) format('woff'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600italic.ttf) format('truetype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-600italic.svg#OpenSans) format('svg');
		  font-display: swap;
		}

		@font-face {
		  font-family: 'Open Sans';
		  font-style: normal;
		  font-weight: 700;
		  src: url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700.eot);
		  src: local(''),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700.eot?#iefix) format('embedded-opentype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700.woff2) format('woff2'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700.woff) format('woff'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700.ttf) format('truetype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700.svg#OpenSans) format('svg');
		  font-display: swap;
		}

		@font-face {
		  font-family: 'Open Sans';
		  font-style: italic;
		  font-weight: 700;
		  src: url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700italic.eot);
		  src: local(''),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700italic.eot?#iefix) format('embedded-opentype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700italic.woff2) format('woff2'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700italic.woff) format('woff'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700italic.ttf) format('truetype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-700italic.svg#OpenSans) format('svg');
		  font-display: swap;
		}

		@font-face {
		  font-family: 'Open Sans';
		  font-style: normal;
		  font-weight: 800;
		  src: url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800.eot);
		  src: local(''),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800.eot?#iefix) format('embedded-opentype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800.woff2) format('woff2'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800.woff) format('woff'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800.ttf) format('truetype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800.svg#OpenSans) format('svg');
		  font-display: swap;
		}

		@font-face {
		  font-family: 'Open Sans';
		  font-style: italic;
		  font-weight: 800;
		  src: url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800italic.eot);
		  src: local(''),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800italic.eot?#iefix) format('embedded-opentype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800italic.woff2) format('woff2'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800italic.woff) format('woff'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800italic.ttf) format('truetype'),
			   url(/templates/tricoma_energy/css/fonts/open-sans-v18-latin-800italic.svg#OpenSans) format('svg');
		  font-display: swap;
		}
		
		
		/* Mobile + Touch (Funktionsumfang) */
        @media (max-width: 640px){
        
          #funktionen .features-grid{
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
          }
        
          #funktionen .feature-card{
            min-height: 220px;
            border-radius: 16px;
          }
        
          #funktionen .feature-card__icon{
            height: 140px;
            padding: 12px;
          }
        
          #funktionen .feature-card__icon img{
            width: 86px;
          }
        
          #funktionen .feature-card__overlay{
            padding: 12px 14px 12px;
            transform: translateY(calc(100% - 66px));
            transition: transform 260ms ease;
          }
        
          #funktionen .feature-card__title{
            font-size: 13px;
            line-height: 1.2;
            margin-bottom: 10px;
            overflow-wrap: anywhere;
            word-break: break-word;
            hyphens: auto;
          }
        
          #funktionen .feature-card__desc{
              text-align: center;
              max-width: 30ch;
            
              white-space: normal;
              overflow-wrap: anywhere;
              word-break: break-word;
              hyphens: auto;
            
              line-height: 1.45;
              font-size: 12px;
            
              opacity: 0;
              transform: translateY(6px);
              transition: opacity 180ms ease, transform 180ms ease;
            }
        
          #funktionen .feature-card__more{
            align-self: flex-start;
            align-self: center;
            margin-top: 14px;
            font-size: .78rem;
          }
        
          #funktionen .feature-card.is-open .feature-card__overlay{
            transform: translateY(0);
          }
        
          #funktionen .feature-card.is-open .feature-card__desc,
          #funktionen .feature-card.is-open .feature-card__more{
            opacity: 1;
            transform: none;
          }
        
          #funktionen .feature-card:not(.is-open) .feature-card__desc,
          #funktionen .feature-card:not(.is-open) .feature-card__more{
            opacity: 0;
            transform: translateY(6px);
          }
          
          #funktionen .feature-card{
            position: relative;
          }
        
    
          #funktionen .feature-card::after{
            content: "";
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 15px;
            height: 15px;
        
            background-color: rgba(255,255,255,.65);
   
            -webkit-mask: url("/templates/tricoma_energy/Labels/icons/finger_touch.svg") no-repeat center / contain;
                    mask: url("/templates/tricoma_energy/Labels/icons/finger_touch.svg") no-repeat center / contain;
        
            pointer-events: none;
            z-index: 5; 
          }
        

          #funktionen .feature-card.is-open::after{
            content: none;
          }
        
        

          #funktionen .feature-card.is-open .feature-card__overlay::after{
            content: "";
            position: absolute;
            right: 8px;
            top: 12px;
        
            width: 05px;
            height: 05px;
        
            border-right: 2px solid rgba(255,255,255,.65);
            border-bottom: 2px solid rgba(255,255,255,.65);
        
  
            transform: rotate(45deg);
        
            pointer-events: none;
            z-index: 2;
          }
        }

		/* ============================
   Desktop: Collapsed Title Center + Indicator
   ============================ */
    @media (hover: hover){
    
      /* Eingeklappt (nicht hover): Title-Bar */
      #funktionen .feature-card:not(:hover) .feature-card__overlay{
        height: 76px;                 
        padding: 0 18px;
        display: flex;
        align-items: center;          
        justify-content: center;      
        text-align: center;
        position: absolute;
        left: 0; right: 0; bottom: 0;
    
        transform: translateY(calc(100% - 76px)) !important;
      }
    
      /* Titel IM eingeklappten Zustand: immer sichtbar + ohne Abst?nde */
      #funktionen .feature-card:not(:hover) .feature-card__title{
        opacity: 1 !important;
        display: block !important;
        margin: 0 !important;
        width: 100%;
        text-align: center;
        line-height: 1.15;
      }
    
      /* Im eingeklappten Zustand: Beschreibung/Link wirklich weg */
      #funktionen .feature-card:not(:hover) .feature-card__desc,
      #funktionen .feature-card:not(:hover) .feature-card__more{
        display: none !important;
      }
    
      /* Indicator unten (nur eingeklappt) */
      #funktionen .feature-card:not(:hover) .feature-card__overlay::after{
        content: "";
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        width: 56px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,.55);
        pointer-events: none;
      }
    
      /* Aufgeklappt (hover): normaler Content */
      #funktionen .feature-card:hover .feature-card__overlay{
        height: auto;
        padding: 16px 18px 14px;
        display: flex;
        flex-direction: column;
        align-items: center; 
        text-align: center;
    
        transform: translateY(0) !important;
      }
    
      #funktionen .feature-card:hover .feature-card__title{
        margin: 0 0 14px 0 !important;
      }
    
      #funktionen .feature-card:hover .feature-card__desc{
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
      }
    
      #funktionen .feature-card:hover .feature-card__more{
        display: inline-block !important;
        opacity: 1 !important;
        transform: none !important;
      }
    
      /* Indicator weg wenn offen */
      #funktionen .feature-card:hover .feature-card__overlay::after{
        content: none;
      }
    }
    
    :root {
  --te-primary: #0086dd;
  --te-primary-soft: #e6f3fc;
  --te-primary-glow: #2aa5f0;
  --te-accent: #ff9900;
  --te-accent-dark: #ff7a00;
  --te-ink: #1a1d2b;
  --te-ink-soft: #5a6072;
  --te-background: #ffffff;
  --te-surface: #f7f8fa;
  --te-card: #ffffff;
  --te-border: #e5e8ee;
  --te-dark: #112128;
  --te-radius-xl: 20px;
  --te-radius-2xl: 24px;
  --te-shadow-soft: 0 1px 2px rgba(20, 25, 50, 0.04), 0 8px 24px rgba(20, 25, 50, 0.06);
  --te-shadow-float: 0 20px 50px -12px rgba(20, 25, 50, 0.18), 0 8px 16px -8px rgba(20, 25, 50, 0.08);
  --te-transition: 400ms cubic-bezier(0.22, 1, 0.36, 1);
	--bs-body-bg: #fdf9fa;
}

/* ---------- Globaler TPLUS Scope ---------- */
body {
  
  color: var(--te-ink);
	
	-webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
		


.tplus_container {
  width: 100% !important;
}

.tplus_container > [id^="tplus_"] > .section,
.tplus_container .section {
  padding: clamp(48px, 7vw, 96px) 20px !important;
  margin: 0 !important;
}

.section > .tplus_container,
.tplus_container > [id^="tplus_"] > .section > .tplus_container {
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Bootstrap/alte Float-Spalten neutralisieren */
.tplus_column.columns,
.tplus_column.six,
.tplus_column.four {

}



.columns.six:nth-child(1) {
	margin-left: 10px;
}

.clearfix {  }

/* ---------- Bild/Text-Blöcke = neues Split Layout ---------- */


.tplus_bildtext.text-left {
  text-align: left !important;
}

.tplus_bildtext .tplus_column[style] {
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.tplus_bildtext_text {
  max-width: 640px !important;
  text-align: left !important;
}

/* Vorüberschrift / Eyebrow */
.tplus_bildtext_vorueberschrift {
	display: inline-flex;
  margin-bottom: 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
  background-color: #d9f2ff;
  padding: 6px 12px;
	color: #008ce4 !important;
	border-radius: 12px;
	text-transform: uppercase;
	
    letter-spacing: 0.14em;
}
	
.tplus_bildtext_vorueberschrift.blau {
  
  background-color: #d9f2ff !important;
  
color: #008ce4 !important;
	
}
	
.tplus_bildtext_vorueberschrift.orange {
 
  background-color: #ffeecd !important;
  
	color: #ff992b !important;
	
}

.bg_dark .tplus_bildtext_vorueberschrift {
	background-color: #0f304a !important;
}

.bg_dark .tplus_bildtext_vorueberschrift.orange {
	background-color: #4b2a02 !important;
  
	color: #ff992b !important;
}
	
	p.lead-text {
		line-height: 1.6;
		color: #292c2f;
		font-size: 18px;
		margin-bottom: 32px !important;
		
	}

/* Hauptüberschrift */
.tplus_bildtext_ueberschrift h1,
.tplus_bildtext_ueberschrift h2,
.tplus_bildtext h2 {
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  color: var(--te-ink) !important;
  font-size: clamp(32px, 3.2vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.18 !important;
}

.tplus_bildtext_textcontent {
  color: var(--te-ink-soft) !important;
  font-size: 16px !important;
  line-height: 1.68 !important;
}

.tplus_bildtext_textcontent p {
  margin: 0 0 22px 0 !important;
  
}

.tplus_bildtext_textcontent strong {
  color: var(--te-ink) !important;
  font-weight: 600 !important;
}

/* Bilder im neuen Look */
.tplus_bildtext .tplus_image.detailbild,
.tplus_bildtext > .tplus_column > .tplus_image.detailbild {

}

.tplus_bildtext .tplus_image.detailbild.rounded-circle {
  border-radius: 14px !important;
}

.tplus_bildtext .tplus_image.detailbild img {
  display: block !important;
  width: 100% !important;
  
  border-radius: 14px !important;
}

.tplus_bildtext .tplus_image.detailbild .tplus.titel,
.tplus_image.detailbild > div {
  display: none !important;
}

	
	
	


/* ---------- Dunkle Abschnitte wie im neuen Design ---------- */
.bg_dark,
.section.bg_dark,
.tplus_container > [id^="tplus_"] > .section.bg_dark {
  position: relative !important;
  background: var(--te-dark) !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.bg_dark::before,
.section.bg_dark::before {
  /*content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 78% 22%, rgba(0, 134, 221, 0.28), transparent 34%),
    radial-gradient(circle at 20% 80%, rgba(255, 153, 0, 0.16), transparent 36%) !important;
  opacity: 0.85 !important;*/
}

.bg_dark > *,
.section.bg_dark > * {
  position: relative !important;
  z-index: 1 !important;
}

.bg_dark .tplus_bildtext_ueberschrift h1,
.bg_dark .tplus_bildtext_ueberschrift h2,
.bg_dark .tplus_bildtext h2,
.bg_dark .text-white,
.bg_dark h1,
.bg_dark h2,
.bg_dark h3,
.bg_dark strong {
  color: #ffffff !important;
}

.bg_dark .tplus_bildtext_textcontent,
.bg_dark .tplus_bildtext_textcontent p,
.bg_dark ul.functions_list li,
.bg_dark ul.functions_list .textblock div {
  color: rgba(255, 255, 255, 0.76) !important;
}

.bg_dark ul.functions_list strong {
  color: #ffffff !important;
}

.bg_dark .tplus_image.detailbild {
  box-shadow: 0 24px 60px rgba(0,0,0,.38) !important;
}

/* ---------- tplus Boxen / Cards ---------- */
.tplus_column.four {
  display: block !important;
}

.tplus_container.p-5,
.tplus_container .p-5 {
  padding: 0 !important;
}



.tplus_box.card,
.tplus_box {
  height: 100% !important;
  background: var(--te-card) !important;
  border: 1px solid var(--te-border) !important;
  border-radius: var(--te-radius-2xl) !important;
  overflow: hidden !important;
  box-shadow: var(--te-shadow-soft) !important;
  transition: transform var(--te-transition), box-shadow var(--te-transition), border-color var(--te-transition) !important;
}

.tplus_box.card:hover,
.tplus_box:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--te-shadow-float) !important;
  border-color: rgba(0, 134, 221, .28) !important;
}

.tplus_box_image .tplus_image,
.tplus_box_image .detailbild {
  height: 210px !important;
  overflow: hidden !important;
  /*background: var(--te-primary-soft) !important;*/
}

.tplus_box_image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.tplus_box_text {
  padding: 28px !important;
  text-align: left !important;
}

.tplus_box_vorueberschrift {
  display: inline-flex !important;
  margin-bottom: 12px !important;
  color: var(--te-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.tplus_box_ueberschrift h2,
.tplus_box h2 {
  margin: 0 0 12px 0 !important;
  color: var(--te-ink) !important;
  font-size: 24px !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.tplus_box_textcontent {
  color: var(--te-ink-soft) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

/* ---------- große Zwischenüberschrift ---------- */
.tplus_elemente_text .tplus_text_text,
.tplus_text_text {
  
  margin: 0 auto !important;
  color: var(--te-ink) !important;
  font-size: clamp(30px, 4vw, 54px) !important;
  line-height: 1.08 !important;
  
  text-align: center !important;
}

.tplus_elemente_text .tplus_text_text strong,
.tplus_text_text strong {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: none !important;
}

/* ---------- Buttons, falls in TPLUS genutzt ---------- */
.cta-button,
.cta-button-orange,
.cta-button-light-grey,
.button,
.tplus_container a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 0 !important;
margin-bottom: 16px;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: transform var(--te-header-transition), box-shadow var(--te-header-transition), filter var(--te-header-transition) !important;
}


.nav-container .cta-button-orange {
  margin-bottom: 0 !important;
	font-size: 14px !important;
}

.cta-button-orange,
.tplus_container a.button.cta-button-orange {
  background: #ff992b !important;
  color: #fff !important;
  box-shadow: none !important;
}

.cta-button,
.button,
.tplus_container a.button {
  background: #008ce4;
	color: #fff;
  box-shadow: none !important;
}

.cta-button:hover,
.cta-button-orange:hover,
.button:hover {
  transform: translateY(-2px) !important;
}

	
					
.gridtwo {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 2px;
	column-gap: calc(0.25rem * 6);
		display: grid !important;
		margin-top: calc(0.25rem  * 8);
	align-items: start !important;

}
.gridtwo .img {
	display: grid !important;
	height: calc(0.25rem * 10) !important;
	width: calc(0.25rem * 10) !important;
	place-items: center !important;
	border-radius: 50% !important;
	background-color: #d9f2ff !important;
	min-width: unset !important;
	max-width: unset !important;

	-webkit-mask-size: unset !important;
	-webkit-mask-repeat: unset !important;
	-webkit-mask-position: unset !important;
	background-image: unset !important;
	margin-top: unset !important;
	margin-right: unset !important;
	margin-bottom: 14px;
	color: #008ce4;
}

.gridtwo .img > svg {
	width: calc(0.25rem * 5);
	height: calc(0.25rem * 5);
	display: block;
	vertical-align: middle;

}

.bg_dark .gridtwo .img {
	background-color: #0f304a !important;
}

.tplus_bildtext_textcontent ul.functions_list.gridtwo li::before,
ul.functions_list.gridtwo li::before {
	display: none !important;
}

ul.functions_list.gridtwo li {
	display: block !important;
}


ul.functions_list.gridtwo h3 {
	color: #0b121a;
	font-weight: 600;
	font-size: 17px;
}
ul.functions_list.gridtwo p {
	 font-size: 15px !important;
	margin-top: 6px !important;
	margin-bottom: 10px !important;
	color: #454e58 !important;
}

.bg_dark ul.functions_list.gridtwo p {
	 font-size: 15px !important;
	margin-top: 6px !important;
	margin-bottom: 10px !important;
	color: #a7afb7 !important;
}

.cta-button-orange svg, .cta-button svg {
	width: 18px;
	height: 18px;
	margin-left: 10px;
}


.cta-button-light-grey {
	border:1px solid #dfe6eb !important;
	display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; border-radius:999px; background:#ffffff !important; color:#111827; text-decoration:none; font-weight:600; 
}

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .tplus_bildtext{
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .tplus_bildtext_text,
  .tplus_bildtext_text[style] {
    max-width: none !important;
    text-align: left !important;
  }

}

@media (max-width: 640px) {
  .tplus_container > [id^="tplus_"] > .section,
  .tplus_container .section {
    padding: 44px 0 !important;
  }

  .section > .tplus_container,
  .tplus_container > [id^="tplus_"] > .section > .tplus_container {
    padding: 0 18px !important;
  }

  .tplus_bildtext {
    gap: 28px !important;
  }

  .tplus_bildtext_ueberschrift h1,
  .tplus_bildtext_ueberschrift h2,
  .tplus_bildtext h2 {
    font-size: clamp(28px, 9vw, 38px) !important;
    margin-bottom: 22px !important;
  }

  .tplus_bildtext_textcontent {
    font-size: 15px !important;
  }

  .tplus_bildtext_textcontent ul.functions_list li,
  ul.functions_list li {
    grid-template-columns: 22px 1fr !important;
    font-size: 14.5px !important;
  }

  .tplus_bildtext .tplus_image.detailbild img {
    aspect-ratio: 4 / 3 !important;
  }

  .tplus_box_text {
    padding: 24px !important;
  }
}


/* =========================================================
   tricoma.energy ? Header final
   Einziger Header-Block in dieser Datei.
   Alte Header-Regeln wurden entfernt.
   ========================================================= */
:root {
  --te-header-height: 72px;
  --te-header-container: 1400px;
  --te-header-bg: rgba(255, 255, 255, 0.88);
  --te-header-bg-open: rgba(255, 255, 255, 0.96);
  --te-header-border: rgba(229, 232, 238, 0.78);
  --te-header-text: #1a1d2b;
  --te-header-muted: #5a6072;
  --te-header-surface: #f7f8fa;
  --te-header-primary: #0086dd;
  --te-header-primary-soft: #e6f3fc;
  --te-header-accent: #ff9900;
  --te-header-accent-2: #ffb347;
  --te-header-shadow: 0 8px 28px rgba(20, 25, 50, 0.06);
  --te-header-shadow-open: 0 20px 50px -12px rgba(20, 25, 50, 0.18), 0 8px 16px -8px rgba(20, 25, 50, 0.08);
  --te-header-transition: 400ms cubic-bezier(0.22, 1, 0.36, 1);
}



.header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--te-header-height) !important;
  min-height: var(--te-header-height) !important;
  max-height: var(--te-header-height) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: 0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color var(--te-header-transition), border-color var(--te-header-transition), box-shadow var(--te-header-transition), backdrop-filter var(--te-header-transition) !important;
}

.header.is-scrolled{
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: rgba(229, 232, 238, 0.96) !important;
  box-shadow: 0 10px 34px rgba(20, 25, 50, 0.10) !important;
}

.header .nav-container,
.nav-container {
  width: 100% !important;
  max-width: var(--te-header-container) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.header .nav-container > div:first-child,
.nav-container > div:first-child {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

.header .logo,
.header img.logo,
.header .nav-container img,
.nav-container img.logo {
  display: block !important;
  width: auto !important;
  height: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
}

.header .nav-menu,
.nav-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.header .nav-menu li,
.nav-menu li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.header .nav-link,
.nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  color: var(--te-header-muted) !important;
  background: transparent !important;
  text-decoration: none !important;
  text-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  transition: background-color var(--te-header-transition), color var(--te-header-transition), transform var(--te-header-transition) !important;
}

.header .nav-link::after,
.nav-link::after {
  content: none !important;
}

.header .nav-link:hover,
.header .nav-link:focus-visible,
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--te-header-text) !important;
  background: var(--te-header-surface) !important;
  outline: none !important;
}

.header .nav-link.active,
.header .nav-link[aria-current="page"],
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--te-header-primary) !important;
  background: var(--te-header-primary-soft) !important;
}



.header .cta-button-orange:hover,
.header .cta-button-orange:focus-visible,
.header .button.cta-button-orange:hover,
.nav-container .cta-button-orange:hover {
  color: #1a1d2b !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.02) !important;
  box-shadow: 0 20px 60px -12px rgba(255, 153, 0, 0.45) !important;
  outline: none !important;
}

.header .mobile-menu-btn,
.mobile-menu-btn {
  display: none !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--te-header-border) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--te-header-text) !important;
  box-shadow: 0 1px 2px rgba(20, 25, 50, 0.04), 0 8px 24px rgba(20, 25, 50, 0.06) !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

@media (max-width: 1061px) {
  .header .nav-container,
  .nav-container {
    padding: 0 16px !important;
  }

  .header .mobile-menu-btn,
  .mobile-menu-btn {
    display: inline-flex !important;
  }

  .header .nav-menu,
  .nav-menu {
    display: none !important;
    position: absolute !important;
    top: calc(var(--te-header-height) + 12px) !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 12px !important;
    background: var(--te-header-bg-open) !important;
    border: 1px solid rgba(229, 232, 238, 0.96) !important;
    border-radius: 20px !important;
    box-shadow: var(--te-header-shadow-open) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    z-index: 1001 !important;
  }

  .header .nav-menu.active,
  .nav-menu.active {
    display: flex !important;
  }

  .header .nav-menu li,
  .nav-menu li {
    width: 100% !important;
  }

  .header .nav-link,
  .nav-link {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
  }

  .header .cta-button-orange,
  .header .button.cta-button-orange,
  .nav-container .cta-button-orange {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 520px) {
  :root {
    --te-header-height: 64px;
  }

  body {
    padding-top: 0;
  }

  .header .logo,
  .header img.logo,
  .header .nav-container img,
  .nav-container img.logo {
    height: 36px !important;
    max-height: 36px !important;
  }

  .header .mobile-menu-btn,
  .mobile-menu-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .header .nav-menu,
  .nav-menu {
    top: calc(var(--te-header-height) + 10px) !important;
    left: 12px !important;
    right: 12px !important;
  }
}