body {
            font-family: Fira Sans, sans-serif;
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
			letter-spacing: 2px;
			padding-top: 110px;
        }
        
        header {
			background-color: rgba(240, 240, 240, 0.8);
			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);
			background-color: rgba(240, 240, 240, 0.8);
			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);
			-moz-backdrop-filter: blur(8px);
			-o-backdrop-filter: blur(8px);
			-ms-backdrop-filter: blur(8px);
			padding: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed; 
			top: 0;
			left: 0;
			right: 0;
			z-index: 1000;
			transition: transform 0.3s ease-in-out;
		}

		.header-hidden {
			transform: translateY(-100%);
		}
        
        #menuToggle {
			display: none;
			position: absolute;
			z-index: 1000;
		}
        
        .logo {
            width: 210px;
            height: 70px;
            border-radius: 20px;
			cursor: pointer;
        }

        .logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .menu {
            display: none !important;
            width: 30px;
            height: 30px;
            background-color: #ccc;
            border-radius: 20px;
        }
		
		.content-box {
            margin: 20px;
            padding: 20px;
            border-radius: 20px;
            background-color: #f0f0f0;
        }

        .content-title {
            font-size: 20px;
        }

        .content-text {
            font-size: 12px;
        }
		
		.menu-main {
			display: block;
		}
        
        .menulink {
            width: 100%;
            height: 100%;
        }
        
        .buttons {
            display: flex;
            align-items: center;
            font-size: 16px;
        }
		
		.portal-buttons {
			display: none; 
		}
        
        .button {
            background-color: transparent;
            color: #666666;
            border: none;
            padding: 10px 20px;
            font-size: 12px;
            cursor: pointer;
            transition: color 0.3s ease;
            text-decoration: none;
        }
        
        .button:hover {
            color: #7BA840;
            transition: color 0.3s ease;
        }
        .button:nth-last-child(2) {
            background-color: #E43692;
            padding: 10px;
            color: #fff;
            border-radius: 20px;
        }
        
        .button:last-child {
            background-color: #7BA840;
            padding: 10px;
            color: #fff;
            border-radius: 20px;
            margin: 10px;
        }
        
        .banner-box {
			width: 100%;
			padding-top: 20px;
		}
		
		.banner-background {
			width: 100%;
			background-color: #f0f0f0;
		}
        
        .banner {
			position: relative;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 400px;
			max-width: 1200px;
			z-index: 0;
			padding: 0 20px;
		}

		.banner-content {
			display: flex;           
			flex-direction: column;  
			justify-content: center; 
			height: 100%;           
			padding-top: 20px;
			max-width: 800px;
			align-items: left;
		}
		
		.banner-title {
			font-size: 28px;
			margin-bottom: 20px;
			z-index: 2;
			color: #666666;
		}
		
		.banner-text {
			font-size: 16px;
			margin-bottom: 20px;
			z-index: 2;
			color: #666666;
		}
		
		.banner-image {
			height: 300px;
			margin-left: 20px;
			z-index: 1;
			aspect-ratio: 2 / 3;
			background-image: url("../images/sabine_hohmann.png");
			background-size: cover;
			background-position: bottom;
			align-self: flex-end;
			-webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%);
			mask-image: linear-gradient(to right, transparent 0%, black 5%);
		}
		
		.name-plate {
			position: absolute;
			right: 80px;
			bottom: 20px;
			background-color: #666666;
			padding: 8px 20px;
			border-radius: 20px;
			font-size: 14px;
			color: #FFFFFF;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			z-index: 2;
		}
        
        .section {
			margin: auto;
			padding-left: 20px;
			padding-right: 20px;
			background-color: transparent;
			border-radius: 20px;
			width: 100%;
			max-width: 1000px;
			text-align: center;
			box-sizing: border-box;
		}
        
        .section-points {
            margin: auto;
            padding: 20px;
            background-color: transparent;
            border-radius: 20px;
            min-width: 760px;
            text-align: center;
        }
        
        .section-title {
            font-size: 26px;
            font-weight: bold;
            color: #7BA840;
			padding-top: 60px;
			padding-bottom: 20px;
        }
        
        .section-subtitle {
            font-size: 20px;
            margin-bottom: 20px;
			color: #666666;
			padding-bottom: 20px;
        }
		
		.section-full-width {
			width: 100%;
			margin: 0;
			padding: 0;
		}
        
        .images {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }
        
        .image {
            width: 100px;
            height: 100px;
            border-radius: 20px;
            aspect-ratio: 1 / 1;
            min-width: 50px;
        }
        .services {
            display: flex;
            gap: 20px;
            flex-direction: column;
            width: 200px;
            height: 200px;
            align-items: center;
            border-radius: 20px;
            justify-content: center;
        }
        
        .service-text {
            margin-top: -10px;
			font-size: 16px;
            color: #687A7B;
        }
        
        .lists {
            display: flex;
            justify-content: space-between;
            align-items: left;
            list-style: none;
        }
        
        .list {
            margin: 0;
            width: 320px;
            margin-right: 20px;
        }
        
        .list:last-child {
            margin-right: 0;
        }
        
        .list-points::before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            background-image: url("images/haken.svg");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 10px;
            vertical-align: middle;
        }
        
        .list-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #666666;
        }
        
        .list-line {
            width: 90%;
            border-bottom: 5px solid #95BA48;
            margin-bottom: 10px;
            border-radius: 5px;
            margin: auto;
        }
        
        .list-points {
            font-size: 14px;
            text-align: left;
            margin-bottom: 10px;
            list-style: none;
            text-indent: -2.5rem;
			color: #666666;
        }
        
        .list-sub {
            font-size: 12px;
            text-align: left;
            margin-bottom: 10px;
            list-style: none;
			color: #666666;
            margin-left: -10px;
        }
        
        .contact {
            display: flex;
            font-size: 12px;
            flex-direction: column;
            align-items: center;
            padding: 20px;
			padding-top: 0px;
            border-radius: 20px;
            padding-bottom: 40px;
        }
        
        .contact-logo {
            width: 300px;
            height: 100px;
            background-color: #ccc;
            border-radius: 20px;
        }
        
        .contact-text {
            font-size: 16px;
            margin-bottom: -5px;
        }
        
        footer {
            background-color: #f0f0f0;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-button {
            background-color: transparent;
            color: #333;
            border: none;
            margin: auto;
			padding: 5px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 20px;
            text-decoration: none;
        }
        
        .footer-div {
            max-width: 800px;
            margin: auto;
        }
        
        .table-sub {
			font-size: 12px;
			margin: 5px 0 0 0;
		}
        
        .plans-div {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			gap: 10px;
			flex: 0 1 auto;
			min-width: 0;
			max-width: 650px;
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
		}
		
		.plans-div * {
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
		}
		
		.plans-container {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: stretch;
			min-width: 0px;
		}

		.plans-content {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
			width: 100%;
			box-sizing: border-box;
			min-width: 0;
			gap: 20px;
		}

		.plans-extension {
			background-color: #EDEDED;
			min-width: 10px;
			flex-grow: 1;
		}

		.plans-extension.left {
			border-radius: 0 20px 20px 0;
			margin-right: 20px;
		}

		.plans-extension.right {
			border-radius: 20px 0 0 20px;
			margin-left: 20px;
		}
        
        .points-table {
			background-color: #EDEDED;
			padding: 10px;
			border-radius: 20px;
			border: none;
			width: 100%;
			max-width: 600px;
			height: 713px;
			text-align: left;
			margin-right: 0;
			min-width: 330px;
			flex: 0 1 auto;
            font-size: 14px;
		}
		
		.plan-wrapper {
			flex: 1 1 180px;
			min-width: 100px;
			max-width: 200px;
			width: 100%;
			margin-right: 0;
			height: auto; 
		}

		.plan-wrapper:last-child {
			margin-right: 0;
		}

		.premium-header-table, .komfort-header-table, .basis-header-table {
			width: 100%;
			border-collapse: separate;
			border-spacing: 0;
			border-radius: 20px;
			overflow: hidden;
			text-align: center;
			margin-bottom: 10px;
            border-radius: 20px 20px 20px 20px;
            -webkit-border-radius: 20px 20px 20px 20px;
            -moz-border-radius: 20px 20px 20px 20px;
		}

		.premium-header-table {
			background-color: #FBEBF2;
		}

		.komfort-header-table {
			background-color: #F2F6EA;
		}

		.basis-header-table {
			background-color: #ccc;
		}

		.premium-content-table, .komfort-content-table, .basis-content-table {
			width: 100%;
			border-collapse: separate;
			border-spacing: 0;
			background-color: #EDEDED;
			border-radius: 20px;
			overflow: hidden;
			table-layout: fixed;
			height: auto; 
		}

		.premium-content-table td, .komfort-content-table td, .basis-content-table td {
			text-align: center;
			font-size: 10px;
			padding: 10px;
		}
        
        .table {
            border-collapse: collapse;
            width: 100%;
            border-radius: 20px;
			min-width: 0px;
        }
        
        .tr, td {
            height: 100px;
        }
		
		.tablesign {
			width: 20px;
			height: 20px;
		}
		
	@media only screen and (min-width: 1131px) {
		#menuToggle {
			display: none !important;
			visibility: hidden;
		}
	}
		
	@media only screen and (min-width: 801px) and (max-width: 1130px) {
		.buttons a:not(:nth-last-child(-n+2)) {
			display: none;
		}
		
		.portal-buttons {
			display: none; 
		}
		
		#menuToggle {
			display: block !important;
			position: absolute !important;
			top: 52% !important;
			right: 320px !important;
			transform: translateY(-50%);
			z-index: 1000;
		}
		
		.logo {
			width: 210px;
			height: 70px;
		}
		
		#menu {
			margin: -180px 0 0 155px !important;
		}
		
		#menu li {
			font-size: 14px;
		}
	}
		
  @media only screen and (max-width: 800px) {
            header {
                flex-direction: column;
                align-items: start;
            }
            
            .logo {
                width: 150px;
                height: 30px;
            }
            
            .menulink {
                display: initial;
            }
			
			.menu-main, #menu li {
				display: block;
			}
            
            .buttons {
				display: none;
			}
			
			.portal-buttons {
				display: block; 
			}
            
            .banner-box {
                margin-top: -40px;
            }
            
            .banner {
				flex-direction: column;
				height: 150px;
				padding: 20px;
				justify-content: center; 
			}
			
			.banner-content {
				justify-content: center;
				padding-top: 0; 
				height: auto; 
			}
            
            .banner-image {
				position: absolute;
				bottom: 0;
				right: 0;
				height: 90%;
				aspect-ratio: 2 / 3;
				z-index: -1;
				-webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%);
				mask-image: linear-gradient(to right, transparent 0%, black 5%);
			}
			
			.name-plate {
				position: absolute;
				right: 20px;
				bottom: 10px;
				padding: 8px 10px;
				font-size: 8px;
				z-index: 0;
			}
            
            .banner-title {
				font-size: 14px;
				margin-bottom: 5px;
				margin-top: 0; 
				width: 70%;
				display: -webkit-box;
				-webkit-line-clamp: 2; 
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
            
            .banner-text {
				font-size: 10px;
				width: 70%;
				display: -webkit-box;
				-webkit-line-clamp: 8; 
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-bottom: 0; 
			}
            
            .service-text {
                font-size: 12px;
            }
            
            .images {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                justify-content: center;
                align-items: center;
                justify-items: center;
            }
			
			.services {
				height: 120px;
			}
            
            .image {
				width: 80px;
            }
            
            .section {
                min-width: 0;
                width: 100%;
                box-sizing: border-box;
				padding: 10px;
            }
            
            .section-points {
                min-width: 0;
                width: 100%;
                box-sizing: border-box;
            }
            
            .section-title {
                font-size: 14px;
            }
            
            .section-subtitle {
                font-size: 12px;
				padding-bottom: 10px;
            }
            
            .lists {
                flex-direction: column;
                align-items: center;
            }
            
            .list {
                width: 70%;
                margin-right: 0;
                margin-bottom: 20px;
            }
            
            .list:last-child {
                margin-bottom: 0;
            }
            
            .list-line {
                border-bottom: 3px solid #95BA48;
				width: 70%;
            }
            
            .list-title {
                font-size: 14px;
            }
            
            .list-points {
                font-size: 12px;
            }
            
            .list-sub {
                font-size: 10px;
            }
            
            .points-table {
				min-width: 220px;
				height: 610px;
			}
            
            .points-table, .premium-table, .komfort-table, .basis-table {
				height: 613px;
				font-size: 10px;
			}
			
			.premium-content-table td, .komfort-content-table td, .basis-content-table td {
				height: 80px; 
				padding: 5px; 
			}
			
			.points-table td {
				height: 80px;
			}
            
            .plans-div::-webkit-scrollbar {
				display: none;
			}
			
			.plans-extension {
				display: none;
			}

			.plans-content {
				padding: 10px;
				overflow-x: hidden;
			}
			
            .plans-div {
				overflow-x: auto;
				overflow-y: hidden;
				border-radius: 20px;
				-ms-overflow-style: none;
				scrollbar-width: none;
				-webkit-overflow-scrolling: touch; 
				cursor: grab; 
				scroll-snap-type: x mandatory;
				scroll-behavior: smooth;
				transition: scroll-left 0.3s ease;
			}
			
			.premium-content-table, .komfort-content-table, .basis-content-table {
				height: calc(600px - 100px);
                border-radius: 20px !important;
			}

			.plans-div:active {
				cursor: grabbing; 
			}
			
			.plan-wrapper {
                scroll-snap-align: start;
				min-width: 145px;
				flex: 0 0 auto;
				width: 145px;
				height: auto;
			}
			
			.premium-header-table, .komfort-header-table, .basis-header-table,
			.premium-content-table, .komfort-content-table, .basis-content-table {
				font-size: 12px;
				width: 100%;
				table-layout: fixed;
			}
            
            .table-sub {
                font-size: 10px;
            }
            
            .contact {
                padding: 20px;
            }
            
            .contact-logo {
                width: 150px;
                height: 50px;
                margin-bottom: 10px;
            }
            
            .contact-text {
                font-size: 10px;
            }
            
            .footer-div {
                display: flex;
                width: 100%;
                flex-direction: column;
                align-items: center;
            }
            
            .footer-button {
                font-size: 10px;
                width: fit-content;
            }
        }
        #menuToggle {
			display: block !important;
			position: absolute;
			top: 24px;
			right: 24px;
		}

        #menuToggle a {
            text-decoration: none;
            color: black;
            transition: color 0.3s ease;
        }

        #menuToggle a:hover {
            color: #7BA840;
        }

        #menuToggle input {
            display: block;
            text-align: right;
            width: 40px;
            height: 32px;
            position: absolute;
            top: -7px;
            left: -5px;
            cursor: pointer;
            opacity: 0;
            z-index: 2;
            -webkit-touch-callout: none;
        }

        #menuToggle span {
            display: block;
            width: 34px;
            height: 5px;
            margin-bottom: 5px;
            position: relative;
            background: #cdcdcd;
            border-radius: 5px;
            z-index: 1;
            transform-origin: 4px 0px;
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                        opacity 0.55s ease;
        }

        #menuToggle span:first-child {
            transform-origin: 0% 0%;
        }

        #menuToggle span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }

        #menuToggle input:checked ~ span {
            opacity: 1;
            transform: rotate(45deg) translate(-2px, -1px);
            background: #232323;
        }

        #menuToggle input:checked ~ span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }

        #menuToggle input:checked ~ span:nth-last-child(2) {
            transform: rotate(-45deg) translate(0, -1px);
        }

        #menu {
            position: absolute;
            max-width: 400px;
            width: 200px;
            max-height: 100vh;
            margin: -120px 0 0 -140px;
            padding: 20px;
			padding-bottom: 10px;
            padding-top: 125px;
            box-sizing: border-box;
            overflow-y: auto;
            background: #ededed;
            list-style-type: none;
			text-align: right;
            box-shadow: -5px 5px 10px black;
            border-radius: 0px 0px 0px 20px;
            -webkit-font-smoothing: antialiased;
            transform-origin: 0% 0%;
            transform: translate(0%, -100%);
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        }

        #menu li {
            padding: 5px 0;
            font-size: 14px;
			align-items: right;
        }
		
		#menu li.portal-buttons {
			display: block; 
		}

        #menu li label {
            cursor: pointer;
        }

        #menuToggle input:checked ~ ul {
            transform: none;
        }