{"id":177,"date":"2026-03-09T10:54:10","date_gmt":"2026-03-09T09:54:10","guid":{"rendered":"https:\/\/tinywelt.de\/?page_id=177"},"modified":"2026-03-10T10:18:21","modified_gmt":"2026-03-10T09:18:21","slug":"177-2","status":"publish","type":"page","link":"https:\/\/tinywelt.de\/","title":{"rendered":"."},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n \r\n \r\n Hero \u2013 INNOwelt<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n \r\n \/* Elementor Parent-Container Fix *\/\r\n .elementor-section.elementor-top-section,\r\n .elementor-section .elementor-container,\r\n .elementor-column,\r\n .elementor-column-wrap,\r\n .elementor-widget-wrap,\r\n .elementor-widget,\r\n .elementor-widget-container,\r\n .elementor-widget-html {\r\n height: auto !important;\r\n min-height: auto !important;\r\n max-height: none !important;\r\n overflow: visible !important;\r\n padding: 0 !important;\r\n margin: 0 !important;\r\n }\r\n\r\n :root {\r\n --color-primary: #6B8F6B;\r\n --color-primary-dark: #4A6F4A;\r\n --color-white: #FFFFFF;\r\n --color-bg: #FAFCFA;\r\n --color-text: #2D3B2D;\r\n --color-accent: #A8C97A; \r\n --space-sm: 1rem;\r\n --space-md: 1.5rem;\r\n --space-lg: 2.5rem;\r\n --radius-full: 9999px;\r\n --transition-base: 0.35s ease;\r\n }\r\n\r\n *, *::before, *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n color: var(--color-text);\r\n background-color: var(--color-bg);\r\n line-height: 1.6;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 var(--space-md);\r\n }\r\n\r\n .hero {\r\n position: relative;\r\n width: 100vw !important;\r\n min-height: 100vh !important;\r\n margin-left: calc(-50vw + 50%) !important;\r\n display: flex;\r\n align-items: center;\r\n overflow: hidden;\r\n background: \r\n linear-gradient(135deg, rgba(20, 20, 20, 0.8) 0%, rgba(40, 40, 40, 0.6) 100%),\r\n url('https:\/\/tinywelt.de\/wp-content\/uploads\/2026\/03\/hero.png') center \/ cover no-repeat;\r\n }\r\n\r\n .hero-content {\r\n max-width: 800px;\r\n color: var(--color-white);\r\n animation: heroFadeIn 1s ease-out;\r\n }\r\n\r\n .hero h1 {\r\n font-size: clamp(2.4rem, 6vw, 3.8rem);\r\n font-weight: 800;\r\n line-height: 1.15;\r\n margin-bottom: 0.75rem;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .hero h1 span {\r\n color: var(--color-accent);\r\n }\r\n\r\n \/* Unter-\u00dcberschrift (Modern & Clean) *\/\r\n .hero-subtitle {\r\n font-size: clamp(1.1rem, 2.5vw, 1.5rem);\r\n font-weight: 500;\r\n color: var(--color-accent);\r\n margin-bottom: 2rem;\r\n line-height: 1.4;\r\n }\r\n\r\n \/* Textbereich *\/\r\n .hero-desc {\r\n max-width: 700px;\r\n margin-bottom: var(--space-lg);\r\n }\r\n\r\n .hero-desc p {\r\n font-size: 1.15rem;\r\n color: rgba(255, 255, 255, 0.95);\r\n margin-bottom: 1.5rem;\r\n line-height: 1.7;\r\n }\r\n\r\n \/* Fokus auf den 2% Wert ohne Balken *\/\r\n .hero-desc p strong {\r\n color: var(--color-accent);\r\n font-weight: 600;\r\n }\r\n\r\n .hero-buttons {\r\n display: flex;\r\n gap: var(--space-sm);\r\n flex-wrap: wrap;\r\n margin-top: 1rem;\r\n }\r\n\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 16px 36px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n border-radius: var(--radius-full);\r\n transition: all var(--transition-base);\r\n text-decoration: none;\r\n }\r\n\r\n .btn-primary {\r\n background: var(--color-primary);\r\n color: var(--color-white);\r\n }\r\n\r\n .btn-primary:hover {\r\n background: var(--color-primary-dark);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-outline {\r\n background: transparent;\r\n color: var(--color-white);\r\n border: 2px solid rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .btn-outline:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-color: var(--color-white);\r\n transform: translateY(-2px);\r\n }\r\n\r\n @keyframes heroFadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero-buttons { flex-direction: column; }\r\n .btn { justify-content: center; }\r\n .hero-content { text-align: left; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"hero\" id=\"hero\">\r\n <div class=\"container\">\r\n <div class=\"hero-content\">\r\n <h1>Nachhaltiger Luxus \u2013<br><span>Ihr Zuhause der Zukunft<\/span><\/h1>\r\n \r\n <div class=\"hero-subtitle\">\r\n Wohnprojekte im Einklang mit Natur, Design und modernster Technik\r\n <\/div>\r\n\r\n <div class=\"hero-desc\">\r\n <p>\r\n Nur etwa <strong>2 % der H\u00e4user<\/strong> in Deutschland erreichen die Energieeffizienzklasse A+ und geh\u00f6ren damit zu den effizientesten und begehrtesten Immobilien.\r\n <\/p>\r\n <p>\r\n Wir bieten au\u00dfergew\u00f6hnliche und nachhaltige Wohnprojekte mit optimaler Raumaufteilung, h\u00f6chster Energieeffizienz und zukunftsweisender Technologie, auf Wunsch auch mit ma\u00dfgefertigten Einbaum\u00f6beln.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"hero-buttons\">\r\n <a href=\"#projekte\" class=\"btn btn-primary\">Projekt entdecken \u2192<\/a>\r\n <a href=\"#contact\" class=\"btn btn-outline\">Kontakt aufnehmen<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ee4015 elementor-widget elementor-widget-html\" data-id=\"7ee4015\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Navigation \u2013 INNOwelt<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n :root {\r\n --color-primary: #6B8F6B;\r\n --color-primary-dark: #4A6F4A;\r\n --color-primary-light: #8FB08F;\r\n --color-primary-lighter: #B5D1B5;\r\n --color-primary-subtle: #E8F0E8;\r\n --color-white: #FFFFFF;\r\n --color-bg: #FAFCFA;\r\n --color-bg-alt: #F2F6F2;\r\n --color-bg-card: #FFFFFF;\r\n --color-text: #2D3B2D;\r\n --color-text-light: #5A6B5A;\r\n --color-text-muted: #8A9A8A;\r\n --color-border: #DDE5DD;\r\n --color-accent: #A8C97A;\r\n --shadow-sm: 0 1px 3px rgba(45, 59, 45, 0.06);\r\n --shadow-md: 0 4px 16px rgba(45, 59, 45, 0.08);\r\n --shadow-lg: 0 8px 32px rgba(45, 59, 45, 0.1);\r\n --space-xs: 0.5rem;\r\n --space-sm: 1rem;\r\n --space-md: 1.5rem;\r\n --space-lg: 2.5rem;\r\n --space-xl: 4rem;\r\n --radius-sm: 8px;\r\n --radius-md: 12px;\r\n --radius-lg: 20px;\r\n --radius-full: 9999px;\r\n --transition-fast: 0.2s ease;\r\n --transition-base: 0.35s ease;\r\n }\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n html {\r\n scroll-behavior: smooth;\r\n scroll-padding-top: 80px;\r\n font-size: 16px;\r\n }\r\n body {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n color: var(--color-text);\r\n background-color: var(--color-bg);\r\n line-height: 1.7;\r\n overflow-x: hidden;\r\n }\r\n img {\r\n max-width: 100%;\r\n height: auto;\r\n display: block;\r\n }\r\n a {\r\n color: var(--color-primary);\r\n text-decoration: none;\r\n transition: color var(--transition-fast);\r\n }\r\n a:hover {\r\n color: var(--color-primary-dark);\r\n }\r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 var(--space-md);\r\n }\r\n .navbar {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n z-index: 1000;\r\n height: 100px;\r\n padding: 0;\r\n transition: all var(--transition-base);\r\n background: transparent;\r\n backdrop-filter: none;\r\n overflow: visible;\r\n }\r\n .navbar.scrolled {\r\n background: rgba(45, 59, 45, 0.9); \/* Hintergrund hinzugef\u00fcgt, damit wei\u00dfes Logo\/Text sichtbar bleiben *\/\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n height: 80px;\r\n box-shadow: var(--shadow-sm);\r\n }\r\n .navbar.hidden {\r\n transform: translateY(-100%);\r\n pointer-events: none;\r\n }\r\n .navbar .container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 100%;\r\n }\r\n .nav-logo {\r\n margin-left: -30px;\r\n }\r\n .nav-logo img {\r\n height: 300px !important;\r\n max-width: none;\r\n transition: height var(--transition-fast);\r\n filter: brightness(0) invert(1); \/* MACHT DAS LOGO WEISS *\/\r\n }\r\n .navbar.scrolled .nav-logo img {\r\n height: 220px;\r\n }\r\n .nav-links {\r\n display: flex;\r\n align-items: center;\r\n list-style: none;\r\n gap: 8px;\r\n margin-right: -20px;\r\n }\r\n .nav-links a {\r\n padding: 8px 18px;\r\n font-size: 0.95rem;\r\n font-weight: 500;\r\n color: var(--color-white);\r\n border-radius: var(--radius-full);\r\n transition: all var(--transition-fast);\r\n text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\r\n }\r\n .navbar.scrolled .nav-links a {\r\n color: var(--color-white); \/* Hier ebenfalls wei\u00df gelassen f\u00fcr den Kontrast zum dunklen Scroll-BG *\/\r\n text-shadow: none;\r\n }\r\n .nav-links a:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n color: var(--color-white);\r\n }\r\n .navbar.scrolled .nav-links a:hover {\r\n background: rgba(255, 255, 255, 0.2);\r\n color: var(--color-white);\r\n }\r\n .nav-links .nav-cta {\r\n background: var(--color-primary);\r\n color: var(--color-white) !important;\r\n font-weight: 600;\r\n text-shadow: none;\r\n }\r\n .nav-links .nav-cta:hover {\r\n background: var(--color-primary-dark) !important;\r\n color: var(--color-white) !important;\r\n }\r\n .nav-toggle {\r\n display: none;\r\n flex-direction: column;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 4px;\r\n }\r\n .nav-toggle span {\r\n display: block;\r\n width: 26px;\r\n height: 2.5px;\r\n background: var(--color-white);\r\n border-radius: 2px;\r\n transition: all var(--transition-fast);\r\n }\r\n @media (max-width: 768px) {\r\n .nav-links {\r\n display: none;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n flex-direction: column;\r\n background: var(--color-text); \/* Dunkel f\u00fcr mobile *\/\r\n padding: var(--space-sm);\r\n box-shadow: var(--shadow-lg);\r\n border-radius: 0 0 var(--radius-md) var(--radius-md);\r\n gap: 4px;\r\n }\r\n .nav-links.active {\r\n display: flex;\r\n }\r\n .nav-links a {\r\n color: var(--color-white) !important;\r\n padding: 12px 18px;\r\n border-radius: var(--radius-sm);\r\n text-align: center;\r\n }\r\n .nav-toggle {\r\n display: flex;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <nav class=\"navbar\" id=\"navbar\">\r\n <div class=\"container\">\r\n <a href=\"#\" class=\"nav-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/tinywelt.de\/wp-content\/uploads\/2026\/03\/logo_transparent.png\"\r\n alt=\"INNOwelt Wohnbauprojekte eG Logo\">\r\n <\/a>\r\n <ul class=\"nav-links\" id=\"navLinks\">\r\n <li><a href=\"#projekte\">Projekte<\/a><\/li>\r\n <li><a href=\"#ueberuns\">\u00dcber uns<\/a><\/li>\r\n <li><a href=\"#partner\">Partner<\/a><\/li>\r\n <li><a href=\"#kontakt\" class=\"nav-cta\">Kontakt<\/a><\/li>\r\n <\/ul>\r\n <button class=\"nav-toggle\" id=\"navToggle\" aria-label=\"Men\u00fc \u00f6ffnen\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n <script>\r\n const navbar = document.getElementById('navbar');\r\n let lastScrollY = window.scrollY;\r\n window.addEventListener('scroll', () => {\r\n const currentScrollY = window.scrollY;\r\n navbar.classList.toggle('scrolled', currentScrollY > 60);\r\n if (currentScrollY > lastScrollY && currentScrollY > 100) {\r\n navbar.classList.add('hidden');\r\n } else {\r\n navbar.classList.remove('hidden');\r\n }\r\n lastScrollY = currentScrollY;\r\n });\r\n const navToggle = document.getElementById('navToggle');\r\n const navLinks = document.getElementById('navLinks');\r\n navToggle.addEventListener('click', () => { navLinks.classList.toggle('active'); });\r\n navLinks.querySelectorAll('a').forEach(link => {\r\n link.addEventListener('click', () => { navLinks.classList.remove('active'); });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4007422 e-con-full e-flex e-con e-parent\" data-id=\"4007422\" data-element_type=\"container\" data-e-type=\"container\" id=\"projekte\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e0d475 elementor-widget elementor-widget-html\" data-id=\"3e0d475\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n :root {\r\n --color-primary: #6B8F6B;\r\n --color-primary-dark: #4A6F4A;\r\n --color-primary-subtle: #E8F0E8;\r\n --color-white: #FFFFFF;\r\n --color-bg: #FAFCFA;\r\n --color-text: #2D3B2D;\r\n --color-text-light: #5A6D5A;\r\n --color-accent: #A8C97A;\r\n --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);\r\n --shadow-md: 0 10px 30px rgba(107, 143, 107, 0.15);\r\n --radius-md: 12px;\r\n --radius-lg: 20px;\r\n --radius-full: 9999px;\r\n --transition-base: 0.35s ease;\r\n --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n --space-md: 1.5rem;\r\n --space-xl: 5rem;\r\n }\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n color: var(--color-text);\r\n background-color: var(--color-bg);\r\n line-height: 1.7;\r\n }\r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 var(--space-md);\r\n }\r\n \/* Card Section Only *\/\r\n .cards-section {\r\n padding: var(--space-xl) 0;\r\n background-color: var(--color-bg);\r\n }\r\n .cards-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 40px;\r\n }\r\n .flip-card {\r\n background-color: transparent;\r\n width: 100%;\r\n height: 480px;\r\n perspective: 2000px;\r\n }\r\n .flip-card-inner {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n text-align: left;\r\n transition: transform var(--transition-slow);\r\n transform-style: preserve-3d;\r\n box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);\r\n border-radius: 12px;\r\n }\r\n .flip-card:hover .flip-card-inner {\r\n transform: rotateY(180deg);\r\n box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);\r\n }\r\n .flip-card-front,\r\n .flip-card-back {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n -webkit-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n padding: 50px 48px;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n border: 1px solid rgba(107, 143, 107, 0.1);\r\n transform-style: preserve-3d;\r\n }\r\n .flip-card-front {\r\n background: var(--color-white);\r\n color: var(--color-primary-dark);\r\n border-top: 6px solid var(--color-primary);\r\n z-index: 2;\r\n transform: translateZ(0);\r\n }\r\n .flip-card-front::before {\r\n content: '';\r\n position: absolute;\r\n top: -40px;\r\n right: -40px;\r\n width: 140px;\r\n height: 140px;\r\n background: linear-gradient(135deg, var(--color-primary-subtle) 0%, rgba(255, 255, 255, 0) 100%);\r\n border-radius: 50%;\r\n z-index: 0;\r\n transition: all var(--transition-slow);\r\n }\r\n .flip-card:hover .flip-card-front::before {\r\n transform: scale(2) translate(-20px, 20px);\r\n background: var(--color-primary-subtle);\r\n opacity: 0.4;\r\n }\r\n .card-icon {\r\n width: 64px;\r\n height: 64px;\r\n margin-bottom: 40px;\r\n color: var(--color-primary);\r\n position: relative;\r\n z-index: 2;\r\n transition: transform var(--transition-base);\r\n }\r\n .flip-card:hover .card-icon {\r\n transform: scale(1.1) translateY(-5px);\r\n }\r\n .flip-card-front h3 {\r\n font-size: 1.85rem;\r\n font-weight: 700;\r\n line-height: 1.3;\r\n margin-top: auto;\r\n margin-bottom: 0;\r\n position: relative;\r\n z-index: 2;\r\n letter-spacing: -0.01em;\r\n }\r\n .flip-card-back {\r\n background: var(--color-primary);\r\n color: var(--color-white);\r\n transform: rotateY(180deg) translateZ(1px);\r\n justify-content: space-between;\r\n z-index: 1;\r\n }\r\n .flip-card-back p {\r\n font-size: 1.1rem;\r\n margin-bottom: 30px;\r\n color: rgba(255, 255, 255, 0.95);\r\n line-height: 1.7;\r\n }\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 14px 32px;\r\n font-weight: 600;\r\n text-decoration: none;\r\n border-radius: var(--radius-full);\r\n transition: all var(--transition-base);\r\n background: var(--color-white);\r\n color: var(--color-primary);\r\n border: 1px solid var(--color-white);\r\n position: relative;\r\n z-index: 10;\r\n }\r\n .btn:hover {\r\n background: transparent;\r\n color: var(--color-white);\r\n }\r\n @media (max-width: 991px) {\r\n .cards-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n @media (max-width: 768px) {\r\n .flip-card {\r\n height: 400px;\r\n }\r\n .flip-card-front h3 {\r\n font-size: 1.5rem;\r\n }\r\n .flip-card-front,\r\n .flip-card-back {\r\n padding: 30px 20px;\r\n }\r\n .flip-card-back p {\r\n font-size: 0.95rem;\r\n }\r\n }\r\n<\/style>\r\n<section class=\"cards-section\" id=\"themen\">\r\n <div class=\"container\">\r\n <div class=\"cards-grid\">\r\n <!-- Card 1: Nachhaltigkeit -->\r\n <div class=\"flip-card\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <div class=\"card-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"><\/path>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"><\/polyline>\r\n <\/svg>\r\n <\/div>\r\n <h3>Nachhaltiger Luxus<br>auf h\u00f6chstem Niveau \u2013<br>Aktivhaus der Zukunft<\/h3>\r\n <\/div>\r\n <div class=\"flip-card-back\">\r\n <p>Ein Wohnprojekt, das Ma\u00dfst\u00e4be setzt! Dieses au\u00dfergew\u00f6hnliche Wohnprojekt, vereint architektonische Klarheit, \u00f6kologische Verantwortung und modernste Geb\u00e4udetechnologie zu einem ganzheitlichen Lebenskonzept. Hier entsteht ein Zuhause, das mehr Energie erzeugt, als es verbraucht \u2013 kompromisslos nachhaltig, ressourcenschonend und luxuri\u00f6s in jeder Dimension. <\/p>\r\n <a href=\"#nachhaltiger-luxus\" class=\"btn\">Mehr erfahren<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Card 2: Wohnkomfort -->\r\n <div class=\"flip-card\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <div class=\"card-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect>\r\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"21\"><\/line>\r\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line>\r\n <\/svg>\r\n <\/div>\r\n <h3>Raumgef\u00fchl und<br>einmaliger Wohnkomfort \u2013<br>Licht, Weite, Nat\u00fcrlichkeit<\/h3>\r\n <\/div>\r\n <div class=\"flip-card-back\">\r\n <p>Die luxuri\u00f6sen Wohnungen gewinnen durch die Raumh\u00f6he von 2,70m und den 1 Meter breiten rahmenlosen Schiebet\u00fcren, ein au\u00dfergew\u00f6hnliches Gef\u00fchl von Gro\u00dfz\u00fcgigkeit. Barrierefreie \u00dcberg\u00e4nge und nahezu rahmenlose Aussichten werden durch die Sch\u00fcco High End Schiebet\u00fcren erreicht. Der Fl\u00fcgelrahmen verschwindet beim Schlie\u00dfen im unteren Blendrahmen \u2013 ein architektonisches Statement von Leichtigkeit und Transparenz. <\/p>\r\n <a href=\"#raumgefuehl\" class=\"btn\">Mehr erfahren<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Card 3: Energie -->\r\n <div class=\"flip-card\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <div class=\"card-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3>Energie und Technik \u2013<br>autark, intelligent,<br>zukunftsweisend<\/h3>\r\n <\/div>\r\n <div class=\"flip-card-back\">\r\n <p>Dieses Projekt ist als Aktivhaus konzipiert \u2013 es produziert mehr Energie als es verbraucht.\r\n Strom und W\u00e4rme aus Sonne, intelligente Automation und ein perfektes Raumklima durch\r\n modernste Steuerung.<\/p>\r\n <a href=\"#energie-technik\" class=\"btn\">Mehr erfahren<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Card 4: F\u00f6rderung -->\r\n <div class=\"flip-card\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <div class=\"card-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"><\/path>\r\n <path d=\"M2 17l10 5 10-5\"><\/path>\r\n <path d=\"M2 12l10 5 10-5\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <h3>Biodiversit\u00e4t, Zertifikate<br>und seit 02\/2026 neue<br>KfW134 F\u00f6rderung<\/h3>\r\n <\/div>\r\n <div class=\"flip-card-back\">\r\n <p>Klimasteine im Einfahrts- und Parkplatzbereich, ein Carport mit Solardach, hitzebest\u00e4ndige Pflanzen, Str\u00e4ucher und B\u00e4ume auf dem wundersch\u00f6n angelegten Grundst\u00fcck, das angestrebte DGNB-Zertifikat (Deutsche Gesellschaft f\u00fcr Nachhaltiges Bauen) und QNG (Qualit\u00e4tssiegel Nachhaltiges Geb\u00e4ude) sowie das KfW-Programm 134 f\u00fcr K\u00e4ufer sind weitere Highlights.<\/p>\r\n <a href=\"#biodiversitaet\" class=\"btn\">Mehr erfahren<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bcd6ae5 e-con-full e-flex e-con e-parent\" data-id=\"bcd6ae5\" data-element_type=\"container\" data-e-type=\"container\" id=\"nachhaltiger-luxus\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79bb4bf elementor-widget elementor-widget-html\" data-id=\"79bb4bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n :root {\r\n --color-primary: #6B8F6B;\r\n --color-primary-dark: #4A6F4A;\r\n --color-primary-subtle: #E8F0E8;\r\n --color-teal: #6B8F6B;\r\n --color-white: #FFFFFF;\r\n --color-bg: #FAFCFA;\r\n --color-text: #2D3B2D;\r\n --color-text-light: #5A6D5A;\r\n \r\n --shadow-md: 0 10px 30px rgba(107, 143, 107, 0.15);\r\n \r\n --space-md: 1.5rem;\r\n --space-lg: 2.5rem;\r\n --space-xl: 5rem;\r\n --radius-lg: 20px;\r\n }\r\n\r\n *, *::before, *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n color: var(--color-text);\r\n background-color: var(--color-bg);\r\n line-height: 1.7;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 var(--space-md);\r\n }\r\n\r\n h2 {\r\n font-size: clamp(2rem, 3.5vw, 2.5rem);\r\n font-weight: 700;\r\n margin-bottom: var(--space-md);\r\n color: var(--color-primary-dark);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n p {\r\n font-size: 1.05rem;\r\n margin-bottom: var(--space-md);\r\n color: var(--color-text-light);\r\n }\r\n\r\n \/* Content Section & Split Layout *\/\r\n .content-section {\r\n padding: var(--space-xl) 0;\r\n }\r\n\r\n .split-layout {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: var(--space-xl);\r\n align-items: center;\r\n }\r\n\r\n .split-text {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: var(--space-lg);\r\n }\r\n\r\n .split-image img {\r\n width: 100%;\r\n height: auto;\r\n min-height: 400px;\r\n object-fit: cover;\r\n border-radius: var(--radius-lg);\r\n box-shadow: var(--shadow-md);\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .split-layout {\r\n grid-template-columns: 1fr;\r\n gap: var(--space-lg);\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"content-section\" id=\"nachhaltiger-luxus\">\r\n <div class=\"container split-layout\">\r\n <div class=\"split-text\">\r\n <div class=\"section-header\">\r\n <h2>Nachhaltiger Luxus auf h\u00f6chstem Niveau - Aktivhaus der Zukunft<\/h2>\r\n <\/div>\r\n <p>Die Konstruktion in hochwertiger Holzrahmenbauweise mit ISO-STROH Einblasd\u00e4mmung steht f\u00fcr \u00f6kologisches Bauen auf h\u00f6chstem Niveau. Das w\u00e4rmebr\u00fcckenfreie Geb\u00e4udekonzept erreicht exzellente W\u00e4rmed\u00e4mmwerte von bis zu 0,13 W\/m\u00b2\u00b7K und schafft damit die Grundlage f\u00fcr ein echtes Aktivhaus.<\/p>\r\n <p>Die Kombination aus moderner Thermoholz-Fassade und stilvollem Klinker verleiht dem Geb\u00e4ude eine puristische, zeitlose Eleganz. Verdeckte Dachrinnen unterstreichen die klare Architektursprache.<\/p>\r\n <p>Das Flachdach erstreckt sich \u00fcber die gesamte Fl\u00e4che von ca. 395 m\u00b2. Das Staffelgeschoss mit gro\u00dfz\u00fcgigem \u00dcberstand setzt architektonische Akzente. Eine extensive Dachbegr\u00fcnung mit PV- und PVT-Modulen verbindet \u00f6kologische Funktion und modernste Technologie mit \u00e4sthetischem Anspruch.<\/p>\r\n <\/div>\r\n <div class=\"split-image\">\r\n <img decoding=\"async\" src=\"https:\/\/tinywelt.de\/wp-content\/uploads\/2026\/03\/hero.png\" alt=\"Au\u00dfenansicht Aktivhaus mit Holzfassade\">\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-30fe6b4 e-con-full e-flex e-con e-parent\" data-id=\"30fe6b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eafa9a1 elementor-widget elementor-widget-html\" data-id=\"eafa9a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n :root {\r\n --color-primary: #6B8F6B;\r\n --color-primary-dark: #4A6F4A;\r\n --color-primary-subtle: #E8F0E8;\r\n --color-teal: #6B8F6B;\r\n --color-white: #FFFFFF;\r\n --color-bg: #FAFCFA;\r\n --color-text: #2D3B2D;\r\n --color-text-light: #5A6D5A;\r\n \r\n --shadow-md: 0 10px 30px rgba(107, 143, 107, 0.15);\r\n \r\n --space-md: 1.5rem;\r\n --space-lg: 2.5rem;\r\n --space-xl: 5rem;\r\n --radius-lg: 20px;\r\n }\r\n\r\n *, *::before, *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n color: var(--color-text);\r\n background-color: var(--color-bg);\r\n line-height: 1.7;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 var(--space-md);\r\n }\r\n\r\n h2 {\r\n font-size: clamp(2rem, 3.5vw, 2.5rem);\r\n font-weight: 700;\r\n margin-bottom: var(--space-md);\r\n color: var(--color-primary-dark);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n p {\r\n font-size: 1.05rem;\r\n margin-bottom: var(--space-md);\r\n color: var(--color-text-light);\r\n }\r\n\r\n \/* Content Section & Split Layout *\/\r\n .content-section {\r\n padding: var(--space-xl) 0;\r\n }\r\n\r\n .split-layout {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: var(--space-xl);\r\n align-items: center;\r\n }\r\n\r\n .split-text {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: var(--space-lg);\r\n }\r\n\r\n .split-image img {\r\n width: 100%;\r\n height: auto;\r\n min-height: 400px;\r\n object-fit: cover;\r\n border-radius: var(--radius-lg);\r\n box-shadow: var(--shadow-md);\r\n }\r\n\r\n \/* Reverse layout for image on the left *\/\r\n @media (min-width: 992px) {\r\n .split-layout.reverse .split-image {\r\n order: -1;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .split-layout {\r\n grid-template-columns: 1fr;\r\n gap: var(--space-lg);\r\n }\r\n .split-layout.reverse .split-image {\r\n order: -1; \/* Image stays on top on mobile *\/\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"content-section\" id=\"raumgefuehl\">\r\n <div class=\"container split-layout reverse\">\r\n <div class=\"split-image\">\r\n <img decoding=\"async\" src=\"https:\/\/tinywelt.de\/wp-content\/uploads\/2026\/03\/interior.png\" alt=\"Innenansicht Wohnkomfort\">\r\n <\/div>\r\n <div class=\"split-text\">\r\n <div class=\"section-header\">\r\n <h2>Raumgef\u00fchl und einmaliger Wohnkomfort - Licht, Weite, Nat\u00fcrlichkeit<\/h2>\r\n <p><\/p>\r\n <\/div>\r\n <p>Wohngesunde Materialien wie Lehmplatten und Lehmputz sorgen f\u00fcr ein nat\u00fcrlich reguliertes Raumklima. Hervorragende D\u00e4mmwerte und optimaler Brand- und Schallschutz sind in diesem Segment eine Selbstverst\u00e4ndlichkeit.<\/p>\r\n <p>Fl\u00e4chenb\u00fcndige Sockelleisten, fugenlose Bodenl\u00f6sungen mit VOC-freiem Biopolymer aus pflanzlichen Rohstoffen, beleuchtete Balkon-Gel\u00e4nder und weitere feinste Ausf\u00fchrungsdetails unterstreichen den kompromisslosen Qualit\u00e4tsanspruch.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-34e0d40 e-con-full e-flex e-con e-parent\" data-id=\"34e0d40\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fcdfe84 elementor-widget elementor-widget-html\" data-id=\"fcdfe84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n .aktivhaus-wrap,\r\n .aktivhaus-wrap * {\r\n box-sizing: border-box;\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n .aktivhaus-wrap {\r\n --color-primary: #6B8F6B;\r\n --color-primary-dark: #4A6F4A;\r\n --color-primary-subtle: #E8F0E8;\r\n --color-teal: #6B8F6B;\r\n --color-teal-dark: #4A6F4A;\r\n --color-white: #FFFFFF;\r\n --color-bg: #FAFCFA;\r\n --color-text: #2D3B2D;\r\n --color-text-light: #5A6D5A;\r\n\r\n --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);\r\n --shadow-md: 0 10px 30px rgba(107, 143, 107, 0.15);\r\n\r\n --space-md: 1.5rem;\r\n --space-lg: 2.5rem;\r\n --space-xl: 5rem;\r\n\r\n --radius-lg: 20px;\r\n }\r\n\r\n .aktivhaus-wrap .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 var(--space-md);\r\n }\r\n\r\n .aktivhaus-wrap .content-section {\r\n padding: var(--space-xl) 0;\r\n background: var(--color-bg);\r\n }\r\n\r\n .aktivhaus-wrap .split-layout {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: var(--space-xl);\r\n align-items: center;\r\n }\r\n\r\n .aktivhaus-wrap h2 {\r\n font-size: clamp(2rem, 3.5vw, 2.5rem);\r\n font-weight: 700;\r\n margin: 0 0 1rem 0;\r\n color: var(--color-primary-dark);\r\n line-height: 1.2;\r\n }\r\n\r\n .aktivhaus-wrap p {\r\n font-size: 1.05rem;\r\n margin: 0 0 1.2rem 0;\r\n color: var(--color-text-light);\r\n line-height: 1.8;\r\n }\r\n\r\n .aktivhaus-wrap .section-header {\r\n margin-bottom: var(--space-lg);\r\n }\r\n\r\n .aktivhaus-wrap .split-image img {\r\n width: 100%;\r\n min-height: 400px;\r\n object-fit: cover;\r\n border-radius: var(--radius-lg);\r\n box-shadow: var(--shadow-md);\r\n display: block;\r\n }\r\n\r\n \/* Accordion *\/\r\n .aktivhaus-wrap .accordion {\r\n background: #fff;\r\n border: 1px solid rgba(0,0,0,0.05);\r\n border-radius: var(--radius-lg);\r\n overflow: hidden;\r\n box-shadow: var(--shadow-sm);\r\n }\r\n\r\n .aktivhaus-wrap .accordion-item {\r\n border-bottom: 1px solid rgba(0,0,0,0.05);\r\n }\r\n\r\n .aktivhaus-wrap .accordion-item:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-toggle {\r\n display: none;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 20px;\r\n width: 100%;\r\n padding: 24px 30px;\r\n cursor: pointer;\r\n font-size: 1.15rem;\r\n font-weight: 600;\r\n color: var(--color-text);\r\n background: #fff;\r\n transition: background 0.25s ease, color 0.25s ease;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-label:hover {\r\n background: rgba(107, 143, 107, 0.04);\r\n color: var(--color-teal-dark);\r\n }\r\n\r\n .aktivhaus-wrap .accordion-label::after {\r\n content: \"+\";\r\n font-size: 1.6rem;\r\n line-height: 1;\r\n color: var(--color-teal);\r\n flex-shrink: 0;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-toggle:checked + .accordion-label {\r\n color: var(--color-teal);\r\n }\r\n\r\n .aktivhaus-wrap .accordion-toggle:checked + .accordion-label::after {\r\n content: \"\u2212\";\r\n }\r\n\r\n .aktivhaus-wrap .accordion-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.45s ease;\r\n background: #fff;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-content-inner {\r\n padding: 0 30px 30px;\r\n opacity: 0;\r\n transform: translateY(-8px);\r\n transition: opacity 0.3s ease, transform 0.3s ease;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-toggle:checked + .accordion-label + .accordion-content {\r\n max-height: 600px;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-toggle:checked + .accordion-label + .accordion-content .accordion-content-inner {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .aktivhaus-wrap .accordion-content-inner ul {\r\n padding-left: 20px;\r\n margin: 0;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-content-inner li {\r\n margin-bottom: 10px;\r\n color: var(--color-text-light);\r\n line-height: 1.7;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-content-inner strong {\r\n color: var(--color-text);\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .aktivhaus-wrap .split-layout {\r\n grid-template-columns: 1fr;\r\n gap: var(--space-lg);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .aktivhaus-wrap .content-section {\r\n padding: 3rem 0;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-label {\r\n padding: 20px;\r\n font-size: 1rem;\r\n }\r\n\r\n .aktivhaus-wrap .accordion-content-inner {\r\n padding: 0 20px 20px;\r\n }\r\n\r\n .aktivhaus-wrap .split-image img {\r\n min-height: 280px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"aktivhaus-wrap\">\r\n <section class=\"content-section\" id=\"energie-technik\">\r\n <div class=\"container split-layout\">\r\n <div>\r\n <div class=\"section-header\">\r\n <h2>Energie und Technik - Autark, intelligent, zukunftsweisend<\/h2>\r\n <p> Erkunden Sie die intelligenten Technologien.<\/p>\r\n <\/div>\r\n\r\n <div class=\"accordion\">\r\n <div class=\"accordion-item\">\r\n <input class=\"accordion-toggle\" type=\"checkbox\" id=\"acc-1\">\r\n <label class=\"accordion-label\" for=\"acc-1\">Energieerzeugung & Speicherung<\/label>\r\n <div class=\"accordion-content\">\r\n <div class=\"accordion-content-inner\">\r\n <ul>\r\n <li><strong>PV-Module:<\/strong> Mit innovativen Sandwich-Solarzellen (Silizium + Perowskit)<\/li>\r\n <li><strong>PVT-Module:<\/strong> Hybridmodul PX-1 (Made in Germany) zur gleichzeitigen Strom- und W\u00e4rmeerzeugung<\/li>\r\n <li><strong>PVT-W\u00e4rmepumpe:<\/strong> Nutzt die Abw\u00e4rme der Photovoltaikmodule, um die Effizienz zu steigern<\/li>\r\n <li><strong>Salzspeicher:<\/strong> 110 kWh Speicherkapazit\u00e4t (Natrium-Technologie statt Lithium) inkl. Notstromfunktion<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"accordion-item\">\r\n <input class=\"accordion-toggle\" type=\"checkbox\" id=\"acc-2\">\r\n <label class=\"accordion-label\" for=\"acc-2\">Klima & Raumkomfort<\/label>\r\n <div class=\"accordion-content\">\r\n <div class=\"accordion-content-inner\">\r\n <ul>\r\n <li>Be- und Entl\u00fcftung mit W\u00e4rmer\u00fcckgewinnung und Enthalpiew\u00e4rmetauscher<\/li>\r\n <li>Fu\u00dfbodenheizung (auf Wunsch auch Deckenheizung)<\/li>\r\n <li>Deckenk\u00fchlung \u00fcber ein patentiertes Natur-Klimasystem (passive K\u00fchlung)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"accordion-item\">\r\n <input class=\"accordion-toggle\" type=\"checkbox\" id=\"acc-3\">\r\n <label class=\"accordion-label\" for=\"acc-3\">Intelligente Geb\u00e4udeautomation (LCN)<\/label>\r\n <div class=\"accordion-content\">\r\n <div class=\"accordion-content-inner\">\r\n <ul>\r\n <li><strong>Energieeffizienz:<\/strong> Durch die automatisierte Steuerung von Heizung, L\u00fcftung, Klima und Beleuchtung werden Energiekosten gesenkt.<\/li>\r\n <li><strong>Komfort:<\/strong> Raumtemperaturen k\u00f6nnen individuell angepasst und Beleuchtungsszenarien automatisiert werden.<\/li>\r\n <li><strong>Sicherheit:<\/strong> Integration von Sicherheitssystemen wie Zugangskontrolle, Brandmeldeanlagen und Video\u00fcberwachung.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"accordion-item\">\r\n <input class=\"accordion-toggle\" type=\"checkbox\" id=\"acc-4\">\r\n <label class=\"accordion-label\" for=\"acc-4\">Wellness & Badkultur \u2013 Luxus f\u00fcr alle Sinne<\/label>\r\n <div class=\"accordion-content\">\r\n <div class=\"accordion-content-inner\">\r\n <p>Im Badezimmer verschmelzen Wasser, Klang, Licht und Duft zu einem multisensorischen Erlebnis.<\/p>\r\n <ul>\r\n <li>W\u00e4rmer\u00fcckgewinnung beim Duschen<\/li>\r\n <li>Grauwasseraufbereitung<\/li>\r\n <li>Durchflussoptimiertes Trinkwassersystem<\/li>\r\n <li>Unsichtbares Lautsprechersystem<\/li>\r\n <li>Optional: integrierte Dampfdusche<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"accordion-item\">\r\n <input class=\"accordion-toggle\" type=\"checkbox\" id=\"acc-5\">\r\n <label class=\"accordion-label\" for=\"acc-5\">Komfort & Service \u2013 Digitale Lebensqualit\u00e4t<\/label>\r\n <div class=\"accordion-content\">\r\n <div class=\"accordion-content-inner\">\r\n <p>Der luxuri\u00f6se Personenaufzug KONE MonoSpace 500 DX mit Holzschacht verbindet Design mit modernster Technik.<\/p>\r\n <ul>\r\n <li>T\u00fcrsprechanlage mit Kamera und Gesichtserkennung<\/li>\r\n <li>Digitale Paketbox<\/li>\r\n <li>Digitaler Concierge-Service<\/li>\r\n <li>Strom-Flatrate<\/li>\r\n <li>Digitales schwarzes Brett<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"split-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558002038-1055907df827?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80\" alt=\"Smart Home Technologie\">\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fdc3944 e-con-full e-flex e-con e-parent\" data-id=\"fdc3944\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0006804 elementor-widget elementor-widget-html\" data-id=\"0006804\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n :root {\r\n --color-primary: #6B8F6B;\r\n --color-primary-dark: #4A6F4A;\r\n --color-primary-subtle: #E8F0E8;\r\n --color-teal: #6B8F6B;\r\n --color-teal-dark: #4A6F4A;\r\n --color-white: #FFFFFF;\r\n --color-bg: #FAFCFA;\r\n --color-text: #2D3B2D;\r\n --color-text-light: #5A6D5A;\r\n \r\n --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);\r\n --shadow-md: 0 10px 30px rgba(107, 143, 107, 0.15);\r\n \r\n --space-md: 1.5rem;\r\n --space-lg: 2.5rem;\r\n --space-xl: 5rem;\r\n \r\n --radius-lg: 20px;\r\n --transition-base: 0.35s ease;\r\n --transition-fast: 0.2s ease;\r\n }\r\n\r\n *, *::before, *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n color: var(--color-text);\r\n background-color: var(--color-bg);\r\n line-height: 1.7;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 var(--space-md);\r\n }\r\n\r\n h2 {\r\n font-size: clamp(2rem, 3.5vw, 2.5rem);\r\n font-weight: 700;\r\n margin-bottom: var(--space-md);\r\n color: var(--color-primary-dark);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n p {\r\n font-size: 1.05rem;\r\n margin-bottom: var(--space-md);\r\n color: var(--color-text-light);\r\n }\r\n\r\n \/* Content Section & Split Layout *\/\r\n .content-section {\r\n padding: var(--space-xl) 0;\r\n }\r\n\r\n .split-layout {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: var(--space-xl);\r\n align-items: center;\r\n }\r\n\r\n .split-text {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: var(--space-lg);\r\n }\r\n\r\n .split-image img {\r\n width: 100%;\r\n height: auto;\r\n min-height: 400px;\r\n object-fit: cover;\r\n border-radius: var(--radius-lg);\r\n box-shadow: var(--shadow-md);\r\n }\r\n\r\n \/* Accordion - CSS Only *\/\r\n .accordion {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n border-radius: var(--radius-lg);\r\n overflow: hidden;\r\n box-shadow: var(--shadow-sm);\r\n background: var(--color-white);\r\n border: 1px solid rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n .accordion-item {\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n .accordion-item:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .accordion-toggle {\r\n display: none;\r\n }\r\n\r\n .accordion-label {\r\n width: 100%;\r\n padding: 24px 30px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 16px;\r\n cursor: pointer;\r\n font-size: 1.15rem;\r\n font-weight: 600;\r\n color: var(--color-text);\r\n transition: all var(--transition-fast);\r\n }\r\n\r\n .accordion-label:hover {\r\n background: rgba(107, 143, 107, 0.04);\r\n color: var(--color-teal-dark);\r\n }\r\n\r\n .accordion-label::after {\r\n content: '+';\r\n color: var(--color-teal);\r\n font-size: 1.4rem;\r\n transition: transform var(--transition-base);\r\n }\r\n\r\n .accordion-toggle:checked + .accordion-label {\r\n color: var(--color-teal);\r\n }\r\n\r\n .accordion-toggle:checked + .accordion-label::after {\r\n content: '\u2212';\r\n transform: rotate(180deg);\r\n }\r\n\r\n .accordion-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: var(--color-white);\r\n }\r\n\r\n .accordion-toggle:checked + .accordion-label + .accordion-content {\r\n max-height: 900px;\r\n }\r\n\r\n .accordion-content-inner {\r\n padding: 0 30px 30px;\r\n color: var(--color-text-light);\r\n }\r\n\r\n \/* Button Group & Style f\u00fcr KfW *\/\r\n .button-group {\r\n display: flex;\r\n gap: 15px;\r\n flex-wrap: wrap;\r\n margin-top: 20px;\r\n }\r\n\r\n .btn-kfw {\r\n display: inline-block;\r\n padding: 12px 28px;\r\n background-color: var(--color-primary);\r\n color: #fff;\r\n text-decoration: none;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n cursor: pointer;\r\n transition: all var(--transition-base);\r\n border: none;\r\n box-shadow: 0 4px 12px rgba(107, 143, 107, 0.2);\r\n }\r\n\r\n .btn-kfw:hover {\r\n background-color: var(--color-primary-dark);\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 15px rgba(107, 143, 107, 0.3);\r\n color: #fff;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (min-width: 992px) {\r\n .split-layout.reverse .split-image {\r\n order: -1;\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n .split-layout {\r\n grid-template-columns: 1fr;\r\n gap: var(--space-lg);\r\n }\r\n .split-layout.reverse .split-image {\r\n order: -1;\r\n }\r\n .accordion-label {\r\n padding: 20px;\r\n font-size: 1rem;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"content-section\" id=\"biodiversitaet\">\r\n <div class=\"container split-layout reverse\">\r\n <div class=\"split-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518531933037-91b2f5f229cc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80\"\r\n alt=\"Natur und Biodiversit\u00e4t\">\r\n <\/div>\r\n\r\n <div class=\"split-text\">\r\n <div class=\"section-header\">\r\n <h2>Biodiversit\u00e4t, Zertifikate und KfW134 F\u00f6rderung - seit 02\/2026 gelten neu F\u00f6rderrichtlien.\r\n <p<\/p>\r\n <\/div>\r\n\r\n <div class=\"accordion\">\r\n <!-- Item 1 -->\r\n <div class=\"accordion-item\">\r\n <input class=\"accordion-toggle\" type=\"checkbox\" id=\"bio-acc-1\">\r\n <label class=\"accordion-label\" for=\"bio-acc-1\">DGNB-Zertifikat<\/label>\r\n <div class=\"accordion-content\">\r\n <div class=\"accordion-content-inner\">\r\n <p>Das DGNB-Zertifikat der Deutschen Gesellschaft f\u00fcr Nachhaltiges Bauen ist ein f\u00fchrendes G\u00fctesiegel f\u00fcr nachhaltige Geb\u00e4ude und Quartiere. Es bewertet Immobilien ganzheitlich \u00fcber den gesamten Lebenszyklus anhand \u00f6kologischer, \u00f6konomischer, soziokultureller und technischer Kriterien. Zertifizierungen erfolgen in Bronze, Silber, Gold oder Platin.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Item 2 -->\r\n <div class=\"accordion-item\">\r\n <input class=\"accordion-toggle\" type=\"checkbox\" id=\"bio-acc-2\">\r\n <label class=\"accordion-label\" for=\"bio-acc-2\">QNG-Zertifikat<\/label>\r\n <div class=\"accordion-content\">\r\n <div class=\"accordion-content-inner\">\r\n <p>Die QNG-Zertifizierung (\u201eQualit\u00e4tssiegel Nachhaltiges Geb\u00e4ude\u201c) ist ein staatliches G\u00fctesiegel des Bundesministeriums f\u00fcr Wohnen, Stadtentwicklung und Bauwesen (BMWSB). Es bewertet die \u00f6kologische, soziale und \u00f6konomische Qualit\u00e4t von Geb\u00e4uden.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Item 3 -->\r\n <div class=\"accordion-item\">\r\n <input class=\"accordion-toggle\" type=\"checkbox\" id=\"bio-acc-3\">\r\n <label class=\"accordion-label\" for=\"bio-acc-3\">KfW134 F\u00f6rderung<\/label>\r\n <div class=\"accordion-content\">\r\n <div class=\"accordion-content-inner\">\r\n <p><strong>F\u00f6rderziel:<\/strong> Die KfW und das Bundesministerium f\u00fcr Wohnen, Stadtentwicklung und Bauwesen f\u00f6rdern mit zinsg\u00fcnstigen langfristigen Krediten den Erwerb von Genossenschaftsanteilen in Deutschland.<\/p>\r\n <p>Die F\u00f6rderung erfolgt sowohl bei Neugr\u00fcndung als auch bei der Beteiligung an einer bestehenden Wohnungsgenossenschaft. Voraussetzung f\u00fcr die F\u00f6rderung ist, dass die erworbenen Genossenschaftsanteile f\u00fcr die Selbstnutzung der Genossenschaftswohnung erforderlich sind und die Wohnung selbst genutzt wird.<\/p>\r\n <p>Der Zinssatz f\u00fcr den Kredit wird w\u00e4hrend der ersten Zinsbindungsfrist aus Bundesmitteln verbilligt. Zus\u00e4tzlich wird ein Teil der Darlehensschuld erlassen (Tilgungszuschuss).<\/p>\r\n \r\n <!-- Buttons f\u00fcr KfW Links -->\r\n <div class=\"button-group\">\r\n <a href=\"https:\/\/www.kfw.de\/PDF\/Download-Center\/F%C3%B6rderprogramme-(Inlandsf%C3%B6rderung)\/PDF-Dokumente\/6000004835_M_134.pdf\" target=\"_blank\" class=\"btn-kfw\">Merkblatt<\/a>\r\n <a href=\"https:\/\/www.kfw-formularsammlung.de\/KonditionenanzeigerINet\/KonditionenAnzeiger?ProgrammNameNr=134\" target=\"_blank\" class=\"btn-kfw\">Konditionen<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b4cd515 e-con-full e-flex e-con e-parent\" data-id=\"b4cd515\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f863ed4 elementor-widget elementor-widget-html\" data-id=\"f863ed4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n :root {\r\n --color-primary-dark: #4A6F4A;\r\n --color-teal: #6B8F6B;\r\n --color-bg: #FAFCFA;\r\n --color-text: #2D3B2D;\r\n --color-text-light: #5A6D5A;\r\n \r\n --space-md: 1.5rem;\r\n --space-lg: 2.5rem;\r\n --space-xl: 5rem;\r\n }\r\n\r\n *, *::before, *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n color: var(--color-text);\r\n background-color: var(--color-bg);\r\n line-height: 1.7;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 var(--space-md);\r\n }\r\n\r\n h2 {\r\n font-size: clamp(2rem, 3.5vw, 2.5rem);\r\n font-weight: 700;\r\n margin-bottom: var(--space-md);\r\n color: var(--color-primary-dark);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n h3 {\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n margin-top: var(--space-lg);\r\n margin-bottom: 1rem;\r\n color: var(--color-primary-dark);\r\n position: relative;\r\n padding-bottom: 12px;\r\n }\r\n\r\n \/* Akzentlinie unter H3 *\/\r\n h3::after {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n width: 40px;\r\n height: 3px;\r\n background: var(--color-teal);\r\n border-radius: 2px;\r\n }\r\n\r\n p {\r\n font-size: 1.05rem;\r\n margin-bottom: var(--space-md);\r\n color: var(--color-text-light);\r\n }\r\n\r\n .content-section {\r\n padding: var(--space-xl) 0;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: var(--space-lg);\r\n }\r\n\r\n .text-block {\r\n max-width: 850px;\r\n margin: 0 auto;\r\n }\r\n<\/style>\r\n\r\n<section class=\"content-section\" id=\"vision\">\r\n <div class=\"container text-block\">\r\n <div class=\"section-header\">\r\n <h2>Die Vision \u2013 Ein Haus, das mehr gibt, als es nimmt<\/h2>\r\n <\/div>\r\n <p>Stellen Sie sich ein Zuhause vor, das nicht nur Raum bietet, sondern Sinn. <br>\r\n Ein Geb\u00e4ude, das mehr Energie erzeugt, als es verbraucht. <br>\r\n Ein Ort, an dem Technologie und Natur nicht im Widerspruch stehen, sondern im Einklang wirken.<\/p>\r\n \r\n <p>Die Kombination aus Thermoholz-Fassade und modernem Klinker schafft eine klare, puristische Architektur \u2013 zeitlos, reduziert, kraftvoll. Das extensive Gr\u00fcndach verbindet \u00f6kologische Funktion mit \u00e4sthetischer Eleganz.<\/p>\r\n \r\n <p><strong>Dieses Haus denkt weiter. F\u00fcr Sie. F\u00fcr kommende Generationen.<\/strong><\/p>\r\n\r\n <h3>Raum \u2013 Licht. Weite. Nat\u00fcrlichkeit.<\/h3>\r\n <p>Raumh\u00f6hen von 2,70 Meter schenken Gro\u00dfz\u00fcgigkeit. <br>\r\n Raumhohe Schiebet\u00fcren von Sch\u00fcco \u00f6ffnen den Blick \u2013 nahezu rahmenlos, barrierefrei, flie\u00dfend.<\/p>\r\n \r\n <p>Lehmplatten und Lehmputz schaffen ein sp\u00fcrbar angenehmes Raumklima. <br>\r\n Die Materialien atmen. Das Licht flie\u00dft. <br>\r\n Hier entsteht ein Wohngef\u00fchl, dass man nicht nur sieht \u2013 sondern f\u00fchlt.<\/p>\r\n\r\n <h3>Energie \u2013 Unabh\u00e4ngigkeit als neuer Luxus<\/h3>\r\n <p>PV- und PVT-Module erzeugen Strom und W\u00e4rme zugleich. <br>\r\n Eine innovative W\u00e4rmepumpe nutzt selbst die Abw\u00e4rme der PV-Module. <br>\r\n Ein 110 kWh Salzspeicher sorgt f\u00fcr Autarkie \u2013 selbst bei Netzausfall.<\/p>\r\n \r\n <p>Gesteuert wird alles intelligent \u00fcber die Geb\u00e4udeautomation von LCN.<\/p>\r\n \r\n <p>Das Ergebnis: <br>\r\n Ein Zuhause, das Verantwortung \u00fcbernimmt. <br>\r\n Und Ihnen gleichzeitig maximale Sicherheit schenkt.<\/p>\r\n\r\n <h3>Sinnlichkeit \u2013 Luxus f\u00fcr alle Sinne<\/h3>\r\n <p>Mit dem Duschsystem von Hansgrohe RainTunes verschmelzen Wasser, Licht, Sound und Duft zu einem Erlebnis.<\/p>\r\n \r\n <p>Fu\u00dfbodenheizung und sanfte Deckenk\u00fchlung schaffen ein nat\u00fcrlich temperiertes Raumgef\u00fchl \u2013 Sommer wie Winter.<\/p>\r\n \r\n <p>Luxus ist hier kein lautes Statement. <br>\r\n Sondern eine leise Selbstverst\u00e4ndlichkeit.<\/p>\r\n\r\n <h3>Komfort \u2013 Die Zukunft ist integriert<\/h3>\r\n <p>Der Personenaufzug KONE MonoSpace 500 DX verbindet Design mit Pr\u00e4zision.<\/p>\r\n \r\n <p>Digitale Zutrittssysteme, Paketboxen, Concierge-Service \u2013 alles integriert, alles durchdacht.<\/p>\r\n \r\n <p>Und dank Nebenkosten-Flatrate f\u00fcr Strom, Wasser und Service bleibt eines planbar: Ihre Freiheit.<\/p>\r\n\r\n <h3>Haltung wird Zuhause<\/h3>\r\n <p>Diese Residenz ist kein gew\u00f6hnliches Wohnprojekt. Sie ist ein Statement.<\/p>\r\n \r\n <p>F\u00fcr Nachhaltigkeit ohne Verzicht. <br>\r\n F\u00fcr Technologie mit Sinn. <br>\r\n F\u00fcr Luxus mit Verantwortung.<\/p>\r\n <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2d880a3 e-con-full e-flex e-con e-parent\" data-id=\"2d880a3\" data-element_type=\"container\" data-e-type=\"container\" id=\"ueberuns\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f071bd elementor-widget elementor-widget-html\" data-id=\"0f071bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n :root {\r\n --color-primary: #6B8F6B;\r\n --color-primary-dark: #4A6F4A;\r\n --color-teal: #6B8F6B;\r\n --color-white: #FFFFFF;\r\n --color-bg: #FAFCFA;\r\n --color-text: #2D3B2D;\r\n --color-text-light: #5A6D5A;\r\n \r\n --space-md: 1.5rem;\r\n --space-lg: 2.5rem;\r\n --space-xl: 5rem;\r\n --radius-lg: 20px;\r\n --transition-fast: 0.2s ease;\r\n }\r\n\r\n *, *::before, *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n color: var(--color-text);\r\n background-color: var(--color-bg);\r\n line-height: 1.7;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 var(--space-md);\r\n }\r\n\r\n h2 {\r\n font-size: clamp(2rem, 3.5vw, 2.5rem);\r\n font-weight: 700;\r\n margin-bottom: var(--space-md);\r\n color: var(--color-primary-dark);\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n h3 {\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n margin-top: var(--space-lg);\r\n margin-bottom: 1rem;\r\n color: var(--color-primary-dark);\r\n position: relative;\r\n padding-bottom: 12px;\r\n }\r\n\r\n \/* Green line under h3 *\/\r\n h3::after {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n width: 40px;\r\n height: 3px;\r\n background: var(--color-teal);\r\n border-radius: 2px;\r\n }\r\n\r\n p {\r\n font-size: 1.05rem;\r\n margin-bottom: var(--space-md);\r\n color: var(--color-text-light);\r\n }\r\n\r\n .content-section {\r\n padding: var(--space-xl) 0;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: var(--space-lg);\r\n }\r\n\r\n .text-block {\r\n max-width: 850px;\r\n margin: 0 auto;\r\n }\r\n<\/style>\r\n\r\n<section class=\"content-section\" id=\"ueber-uns\">\r\n <div class=\"container text-block\">\r\n <div class=\"section-header\">\r\n <h2>\u00dcber uns<\/h2>\r\n <\/div>\r\n <p>Wir sind ein gut vernetztes kreatives Team und m\u00f6chten dazu beitragen, den n\u00e4chsten Generationen eine unbedenkliche, sozialvertr\u00e4gliche Umgebung zu hinterlassen. Wir werden nur wohngesunde, nachhaltige und naturvertr\u00e4gliche Baustoffe verarbeiten, die in einem Kreislaufprozess am Ende der Lebensspanne eines Geb\u00e4udes r\u00fcckgebaut und wiederverwendet werden k\u00f6nnen (Urban Mining).<\/p>\r\n\r\n <h3>Unsere Vision<\/h3>\r\n <p><strong>Architektur. Autarkie. Achtsamkeit. Drei Werte. Eine Vision.<\/strong><\/p>\r\n <p>Wir schaffen mehr als Wohnraum \u2013 wir gestalten Lebensr\u00e4ume mit Sinn. Durch intelligente Schnittstellen, digitale Vernetzung und kooperativen Austausch verbinden wir Hersteller, Handwerker, Lieferanten und Bewohner zu einem ganzheitlichen System.<\/p>\r\n\r\n <h3>Unsere Mission<\/h3>\r\n <p>Nicht \u00dcberfluss, sondern Bewusstsein. Nicht Energieverbrauch, sondern Energiegewinn. Unsere Mission ist es die Welt von morgen durch intelligente L\u00f6sungen in Bau und Technik \u2013 schon heute nachhaltig, wirtschaftlich und praxisnah zu gestalten.<\/p>\r\n <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1cc4b51 e-con-full e-flex e-con e-parent\" data-id=\"1cc4b51\" data-element_type=\"container\" data-e-type=\"container\" id=\"kontakt\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56ed08e elementor-widget elementor-widget-html\" data-id=\"56ed08e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- INNOwelt \u2013 Kontaktformular -->\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap');\r\n .inn-kontakt {\r\n font-family: 'Inter', sans-serif;\r\n padding: 80px 0;\r\n background: #F2F6F2;\r\n }\r\n .inn-kontakt .inn-container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n .inn-section-label {\r\n display: inline-block;\r\n background: #E8F0E8;\r\n color: #4A6F4A;\r\n font-size: .8rem;\r\n font-weight: 700;\r\n letter-spacing: .08em;\r\n text-transform: uppercase;\r\n padding: 6px 16px;\r\n border-radius: 9999px;\r\n margin-bottom: 16px;\r\n }\r\n .inn-section-title {\r\n font-size: clamp(1.7rem, 3.5vw, 2.5rem);\r\n color: #2D3B2D;\r\n font-weight: 800;\r\n letter-spacing: -.015em;\r\n margin-bottom: 12px;\r\n }\r\n .inn-section-subtitle {\r\n font-size: 1rem;\r\n color: #8A9A8A;\r\n max-width: 600px;\r\n line-height: 1.7;\r\n }\r\n .inn-text-center {\r\n text-align: center;\r\n margin-bottom: 48px;\r\n }\r\n .inn-text-center .inn-section-subtitle {\r\n margin: 0 auto;\r\n }\r\n .inn-contact-wrap {\r\n background: #fff;\r\n border-radius: 28px;\r\n overflow: hidden;\r\n box-shadow: 0 8px 32px rgba(45, 59, 45, .1);\r\n border: 1px solid #DDE5DD;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n .inn-contact-info {\r\n padding: 48px 40px;\r\n background: linear-gradient(135deg, #4A6F4A, #6B8F6B);\r\n color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n .inn-contact-info h2 {\r\n color: #fff;\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n margin-bottom: 12px;\r\n }\r\n .inn-contact-info>p {\r\n color: rgba(255, 255, 255, .85);\r\n margin-bottom: 32px;\r\n line-height: 1.7;\r\n }\r\n .inn-contact-detail {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n margin-bottom: 20px;\r\n font-size: 1rem;\r\n }\r\n .inn-contact-detail-icon {\r\n width: 44px;\r\n height: 44px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: rgba(255, 255, 255, .15);\r\n border-radius: 8px;\r\n color: rgba(255, 255, 255, .9);\r\n flex-shrink: 0;\r\n }\r\n .inn-contact-detail span {\r\n font-weight: 500;\r\n color: #fff;\r\n }\r\n .inn-contact-form-wrap {\r\n padding: 48px 40px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n .inn-contact-form-wrap h3 {\r\n font-size: 1.4rem;\r\n color: #2D3B2D;\r\n margin-bottom: 24px;\r\n }\r\n .inn-form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 14px;\r\n }\r\n .inn-form-group {\r\n margin-bottom: 14px;\r\n }\r\n .inn-form-group label {\r\n display: block;\r\n font-size: .875rem;\r\n font-weight: 600;\r\n color: #2D3B2D;\r\n margin-bottom: 6px;\r\n }\r\n .inn-form-group input,\r\n .inn-form-group select,\r\n .inn-form-group textarea {\r\n width: 100%;\r\n padding: 12px 16px;\r\n font-family: inherit;\r\n font-size: 1rem;\r\n border: 1.5px solid #DDE5DD;\r\n border-radius: 8px;\r\n background: #FAFCFA;\r\n color: #2D3B2D;\r\n transition: all .2s;\r\n }\r\n .inn-form-group input:focus,\r\n .inn-form-group select:focus,\r\n .inn-form-group textarea:focus {\r\n outline: none;\r\n border-color: #6B8F6B;\r\n box-shadow: 0 0 0 3px #E8F0E8;\r\n }\r\n .inn-form-group textarea {\r\n resize: vertical;\r\n min-height: 100px;\r\n }\r\n .inn-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n width: 100%;\r\n padding: 16px 32px;\r\n font-family: inherit;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n border: none;\r\n border-radius: 9999px;\r\n cursor: pointer;\r\n transition: all .35s;\r\n background: linear-gradient(135deg, #4A6F4A, #6B8F6B);\r\n color: #fff;\r\n margin-top: 8px;\r\n }\r\n .inn-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 24px rgba(74, 111, 74, .3);\r\n }\r\n .inn-success-msg {\r\n display: none;\r\n background: #E8F0E8;\r\n border: 1px solid #6B8F6B;\r\n border-radius: 12px;\r\n padding: 20px 24px;\r\n color: #4A6F4A;\r\n font-weight: 600;\r\n text-align: center;\r\n margin-top: 16px;\r\n }\r\n @media(max-width:768px) {\r\n .inn-contact-wrap {\r\n grid-template-columns: 1fr;\r\n }\r\n .inn-form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n<\/style>\r\n<div class=\"inn-kontakt\">\r\n <div class=\"inn-container\">\r\n <div class=\"inn-text-center\">\r\n <span class=\"inn-section-label\">Kontakt<\/span>\r\n <h2 class=\"inn-section-title\">Lassen Sie uns ins Gespr\u00e4ch kommen<\/h2>\r\n <p class=\"inn-section-subtitle\">Interesse an einer Zusammenarbeit oder an einer Mitgliedschaft in unserer Gennossenschaft? Wir freuen uns auf\r\n Ihren Kontakt.<\/p>\r\n <\/div>\r\n <div class=\"inn-contact-wrap\">\r\n <div class=\"inn-contact-info\">\r\n <h2>Ihr Ansprechpartner<\/h2>\r\n <p>Gerne beraten wir Sie pers\u00f6nlich zu den Investitionsm\u00f6glichkeiten, dem Genossenschaftsmodell und dem\r\n KfW134-F\u00f6rderprogramm.<\/p>\r\n <div class=\"inn-contact-detail\">\r\n <div class=\"inn-contact-detail-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" \/>\r\n <circle cx=\"12\" cy=\"10\" r=\"3\" \/>\r\n <\/svg>\r\n <\/div>\r\n <span>Aphovener Stra\u00dfe 89\/91, 52525 Heinsberg-Lieck<\/span>\r\n <\/div>\r\n <div class=\"inn-contact-detail\">\r\n <div class=\"inn-contact-detail-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\" \/>\r\n <polyline points=\"22,6 12,13 2,6\" \/>\r\n <\/svg>\r\n <\/div>\r\n <span>info@innowelt-wohnbau.de<\/span>\r\n <\/div>\r\n <div class=\"inn-contact-detail\">\r\n <div class=\"inn-contact-detail-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.95 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.87 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <span>+49 160 92572398<\/span>\r\n <\/div>\r\n <div class=\"inn-contact-detail\">\r\n <div class=\"inn-contact-detail-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\" \/>\r\n <polyline points=\"12 6 12 12 16 14\" \/>\r\n <\/svg>\r\n <\/div>\r\n <span>Mo \u2013 Fr: 9:00 \u2013 17:00 Uhr<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"inn-contact-form-wrap\">\r\n <h3>Anfrage senden<\/h3>\r\n <form id=\"inn-contactForm\" onsubmit=\"innHandleSubmit(event)\">\r\n <div class=\"inn-form-row\">\r\n <div class=\"inn-form-group\"><label for=\"inn-fname\">Vorname<\/label><input type=\"text\"\r\n id=\"inn-fname\" placeholder=\"Max\" required><\/div>\r\n <div class=\"inn-form-group\"><label for=\"inn-lname\">Nachname<\/label><input type=\"text\"\r\n id=\"inn-lname\" placeholder=\"Mustermann\" required><\/div>\r\n <\/div>\r\n <div class=\"inn-form-group\"><label for=\"inn-company\">Unternehmen \/ Institut<\/label><input\r\n type=\"text\" id=\"inn-company\" placeholder=\"Bankname \/ Unternehmen\"><\/div>\r\n <div class=\"inn-form-group\"><label for=\"inn-email\">E-Mail<\/label><input type=\"email\" id=\"inn-email\"\r\n placeholder=\"name@unternehmen.de\" required><\/div>\r\n <div class=\"inn-form-group\">\r\n <label for=\"inn-interest\">Interesse an<\/label>\r\n <select id=\"inn-interest\">\r\n <option value=\"\">Bitte w\u00e4hlen...<\/option>\r\n <option value=\"finanzierung\">Projektfinanzierung<\/option>\r\n <option value=\"investment\">Investmentm\u00f6glichkeiten<\/option>\r\n <option value=\"genossenschaft\">Genossenschaftsmodell<\/option>\r\n <option value=\"foerderung\">KfW134 F\u00f6rderung<\/option>\r\n <option value=\"sonstiges\">Sonstiges<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"inn-form-group\"><label for=\"inn-msg\">Ihre Nachricht<\/label><textarea id=\"inn-msg\"\r\n placeholder=\"Beschreiben Sie Ihr Anliegen...\" required><\/textarea><\/div>\r\n <button type=\"submit\" class=\"inn-btn\">Anfrage absenden \u2192<\/button>\r\n <\/form>\r\n <div class=\"inn-success-msg\" id=\"inn-successMsg\">\u2713 Vielen Dank! Wir melden uns in K\u00fcrze bei Ihnen.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<script>\r\n function innHandleSubmit(e) {\r\n e.preventDefault();\r\n document.getElementById('inn-contactForm').style.display = 'none';\r\n document.getElementById('inn-successMsg').style.display = 'block';\r\n }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5a7e488 e-con-full e-flex e-con e-parent\" data-id=\"5a7e488\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-de5e332 elementor-widget elementor-widget-html\" data-id=\"de5e332\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n :root {\r\n --color-white: #FFFFFF;\r\n --color-text: #2D3B2D;\r\n --color-accent: #A8C97A;\r\n --space-md: 1.5rem;\r\n --space-lg: 2.5rem;\r\n --space-xl: 5rem;\r\n --space-xs: 0.5rem;\r\n --transition-fast: 0.2s ease;\r\n }\r\n\r\n \/* Reset & Basis *\/\r\n *, *::before, *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n line-height: 1.7;\r\n }\r\n\r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 var(--space-md);\r\n }\r\n\r\n \/* Footer Styles *\/\r\n .footer {\r\n background: var(--color-text);\r\n color: rgba(255, 255, 255, 0.7);\r\n padding: var(--space-xl) 0 var(--space-md);\r\n margin-top: var(--space-xl);\r\n }\r\n\r\n .footer-grid {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 1fr;\r\n gap: var(--space-xl);\r\n margin-bottom: var(--space-xl);\r\n }\r\n\r\n .footer-brand p {\r\n color: rgba(255, 255, 255, 0.6);\r\n font-size: 0.95rem;\r\n margin-top: var(--space-md);\r\n max-width: 320px;\r\n }\r\n\r\n .footer-brand img {\r\n width: 200px; \/* Wie im Code angegeben *\/\r\n height: auto;\r\n margin-bottom: var(--space-xs);\r\n }\r\n\r\n .footer h4 {\r\n color: var(--color-white);\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n line-height: 1.25;\r\n margin-bottom: var(--space-md);\r\n }\r\n\r\n .footer-links {\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n\r\n .footer-links a {\r\n color: rgba(255, 255, 255, 0.6);\r\n font-size: 0.95rem;\r\n text-decoration: none;\r\n transition: color var(--transition-fast);\r\n }\r\n\r\n .footer-links a:hover {\r\n color: var(--color-accent);\r\n }\r\n\r\n .footer-bottom {\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n padding-top: var(--space-md);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .footer-bottom-links {\r\n display: flex;\r\n gap: var(--space-md);\r\n }\r\n\r\n .footer-bottom-links a {\r\n color: rgba(255, 255, 255, 0.5);\r\n text-decoration: none;\r\n }\r\n\r\n .footer-bottom-links a:hover {\r\n color: var(--color-accent);\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 991px) {\r\n .footer-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: var(--space-lg);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .footer-grid {\r\n grid-template-columns: 1fr;\r\n gap: var(--space-md);\r\n }\r\n\r\n .footer-bottom {\r\n flex-direction: column;\r\n gap: var(--space-sm);\r\n text-align: center;\r\n }\r\n }\r\n<\/style>\r\n\r\n<footer class=\"footer\" id=\"contact\">\r\n <div class=\"container\">\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-brand\">\r\n <img decoding=\"async\" src=\"https:\/\/tinywelt.de\/wp-content\/uploads\/2026\/03\/logo_transparent.png\" alt=\"INNOwelt Logo\">\r\n <p>INNOwelt Wohnbauprojekte eG entwickelt zukunftsf\u00e4hige, energieeffiziente Wohn- und Lebensr\u00e4ume f\u00fcr Menschen mit Weitblick.<\/p>\r\n <\/div>\r\n <div>\r\n <h4>Navigation<\/h4>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#vision\">Die Vision<\/a><\/li>\r\n <li><a href=\"#themen\">Wohnprojekt<\/a><\/li>\r\n <li><a href=\"#energie-technik\">Ausstattung<\/a><\/li>\r\n <li><a href=\"#ueber-uns\">\u00dcber uns<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4>Projekt<\/h4>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#energie-technik\">KfW40+ Standard<\/a><\/li>\r\n <li><a href=\"#nachhaltiger-luxus\">Holzrahmenbau<\/a><\/li>\r\n <li><a href=\"#biodiversitaet\">DGNB-Zertifikat<\/a><\/li>\r\n <li><a href=\"#energie-technik\">Smart Home<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4>Kontakt<\/h4>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#\">Heinsberg-Lieck<\/a><\/li>\r\n <li><a href=\"mailto:info@innowelt-wohnbau.de\">E-Mail schreiben<\/a><\/li>\r\n <li><a href=\"#\">Anfrage senden<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-bottom\">\r\n <span>\u00a9 2026 INNOwelt Wohnbauprojekte eG. Alle Rechte vorbehalten.<\/span>\r\n <div class=\"footer-bottom-links\">\r\n <a href=\"#\">Impressum<\/a>\r\n <a href=\"#\">Datenschutz<\/a>\r\n <a href=\"#\">Partner<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/footer>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hero \u2013 INNOwelt Nachhaltiger Luxus \u2013Ihr Zuhause der Zukunft Wohnprojekte im Einklang mit Natur, Design und modernster Technik Nur etwa 2 % der H\u00e4user in Deutschland erreichen die Energieeffizienzklasse A+ und geh\u00f6ren damit zu den effizientesten und begehrtesten Immobilien. Wir bieten au\u00dfergew\u00f6hnliche und nachhaltige Wohnprojekte mit optimaler Raumaufteilung, h\u00f6chster Energieeffizienz und zukunftsweisender Technologie, auf Wunsch […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-177","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tinywelt.de\/index.php?rest_route=\/wp\/v2\/pages\/177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tinywelt.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tinywelt.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tinywelt.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tinywelt.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=177"}],"version-history":[{"count":71,"href":"https:\/\/tinywelt.de\/index.php?rest_route=\/wp\/v2\/pages\/177\/revisions"}],"predecessor-version":[{"id":267,"href":"https:\/\/tinywelt.de\/index.php?rest_route=\/wp\/v2\/pages\/177\/revisions\/267"}],"wp:attachment":[{"href":"https:\/\/tinywelt.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}