/* --- HERO --- */
.hero-stage { min-height: 85vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: radial-gradient(circle at 30% 30%, #235635 0%, #111 70%); }
.hero-stage::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; }
.hero-content { max-width: 1400px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 2; padding: 40px 20px; }
.hero-text-col { z-index: 2; }
.hero-badge { display: inline-block; color: #fff; background: rgba(121, 156, 75, 0.2); border: 1px solid var(--hf-accent); padding: 6px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 25px; }
.hero-h1 { font-size: 4rem; line-height: 1.1; font-weight: 900; color: #fff; margin-bottom: 25px; text-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.hero-p { font-size: 1.25rem; color: #e0e0e0; line-height: 1.6; margin-bottom: 40px; max-width: 550px; font-weight: 300; }
.hero-actions { display: flex; gap: 15px; }
.hero-visual-col { position: relative; display: flex; justify-content: center; perspective: 1500px; }
.wall-art-mockup { position: relative; width: 100%; max-width: 700px; aspect-ratio: 3/2; background-color: #fff; padding: 15px; transform: perspective(1500px) rotateY(-12deg); transition: transform 1.2s cubic-bezier(0.1, 0.9, 0.2, 1); backface-visibility: hidden; box-shadow: 25px 25px 50px rgba(0,0,0,0.5); }
.wall-art-mockup:hover { transform: perspective(1500px) rotateY(0deg) scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.wall-art-image { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: inset 0 0 40px rgba(0,0,0,0.1); }
.mockup-label { position: absolute; bottom: -20px; right: 20px; background: var(--hf-black); color: #fff; border: 1px solid #333; padding: 6px 12px; font-size: 0.75rem; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }

/* --- COMMON SECTIONS --- */
.home-section { padding: 100px 20px; max-width: 1300px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 60px; }
.section-head h2 { font-size: 2.5rem; color: #fff; font-weight: 300; margin: 0 0 15px 0; }
.section-head h2 span { font-weight: 700; color: var(--hf-accent); }
.section-head p { color: #999; font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

/* --- USP --- */
.usp-wrapper { background: var(--hf-panel); border-top: 1px solid var(--hf-border); border-bottom: 1px solid var(--hf-border); padding: 60px 0; }
.usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.usp-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.usp-icon-circle { width: 70px; height: 70px; border-radius: 50%; background: rgba(121, 156, 75, 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--hf-accent); }
.usp-h { color: #fff; font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; }
.usp-p { color: #aaa; font-size: 0.95rem; line-height: 1.5; }

/* --- REGIONS & THEMES --- */
.region-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 80px; }
.region-item { text-align: center; cursor: pointer; width: 150px; }
.region-circle { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 2px solid var(--hf-border); margin: 0 auto 15px; position: relative; transition: all 0.3s ease; }
.region-item:hover .region-circle { border-color: var(--hf-accent); transform: scale(1.05); box-shadow: 0 0 25px rgba(121, 156, 75, 0.3); }
.region-circle img { width: 100%; height: 100%; object-fit: cover; }
.region-name { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.theme-card { position: relative; height: 300px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid var(--hf-border); }
.theme-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; opacity: 0.85; }
.theme-card:hover img { transform: scale(1.05); opacity: 1; }
.theme-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); font-size: 1.6rem; font-weight: 700; color: #fff; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 5px 15px rgba(0,0,0,0.8); }

/* --- PANO STAGE --- */
.pano-stage { padding: 120px 20px; background: radial-gradient(circle at center, #3d3d3d 0%, #000 80%); text-align: center; overflow: hidden; cursor: pointer; }
.pano-mockup-wrap { max-width: 1400px; margin: 0 auto; position: relative; perspective: 2000px; }
.pano-image-card { width: 100%; max-width: 1200px; aspect-ratio: 3.5/1; background: #fff; padding: 15px; margin: 0 auto; box-shadow: 0 30px 70px rgba(0,0,0,0.7); transition: transform 0.4s ease; position: relative; }
.pano-image-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pano-overlay-inner { position: absolute; inset: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); }
.pano-icon-rect { width: 70px; height: 24px; border: 3px solid #fff; margin-bottom: 20px; }
.pano-h3 { font-size: 2.5rem; font-weight: 300; text-transform: uppercase; letter-spacing: 4px; color: #fff; }
.pano-sub { color: #fff; font-weight: 700; letter-spacing: 1px; font-size: 0.9rem; text-transform: uppercase; background: var(--hf-accent); padding: 5px 10px; }

/* --- B2B SECTION --- */
.b2b-section { margin: 60px 20px; max-width: 1400px; margin-left: auto; margin-right: auto; border-radius: 12px; overflow: hidden; position: relative; background: url('https://heimatfotos.de/wp-content/uploads/2022/01/DRK_Tagespflege_Buehl_Bilder_BildFlur-1024x683-1.jpg') center/cover; border: 1px solid var(--hf-border); }
.b2b-overlay { background: linear-gradient(90deg, rgba(29,29,27,0.98) 0%, rgba(29,29,27,0.85) 50%, transparent 100%); padding: 100px 80px; display: flex; flex-direction: column; justify-content: center; min-height: 500px; }
.b2b-content h2 { color: #fff; font-size: 3rem; font-weight: 900; margin: 10px 0 20px; }
.b2b-content p { color: #ddd; font-size: 1.2rem; line-height: 1.6; margin-bottom: 30px; max-width: 500px; }

/* --- INSPO GRID --- */
.inspo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.inspo-item { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--hf-border); height: 350px; }
.inspo-item.large { grid-row: span 2; height: 720px; }
.inspo-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; opacity: 0.9;}
.inspo-item:hover img { transform: scale(1.03); opacity: 1; }
.inspo-tag { position: absolute; bottom: 25px; left: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); backdrop-filter: blur(5px); }

/* --- LOCALS SCROLLER --- */
.locals-wrapper { position: relative; margin-bottom: 60px; }
.locals-mask { overflow: hidden; position: relative; }
.locals-mask::before, .locals-mask::after { content: ""; position: absolute; top: 0; bottom: 0; width: 150px; z-index: 2; pointer-events: none; }
.locals-mask::before { left: 0; background: linear-gradient(to right, var(--hf-black), transparent); }
.locals-mask::after { right: 0; background: linear-gradient(to left, var(--hf-black), transparent); }
.locals-scroller { display: flex; gap: 20px; overflow-x: auto; padding: 20px 40px 20px 40px; scroll-behavior: smooth; scrollbar-width: none; }
.local-card { min-width: 200px; background: var(--hf-panel); border: 1px solid var(--hf-border); border-radius: 8px; padding: 25px 15px; text-align: center; transition: transform 0.3s; flex-shrink: 0; }
.local-card:hover { transform: translateY(-5px); border-color: var(--hf-accent); }
.local-face { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin: 0 auto 15px; border: 2px solid var(--hf-accent); padding: 3px; background-clip: content-box; background-color: #000; }
.local-name { display: block; color: #fff; font-weight: 700; margin-bottom: 5px; font-size: 1rem; }
.local-area { display: block; color: #888; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
.custom-scroll-control { display: flex; align-items: center; justify-content: center; max-width: 300px; margin: 0 auto; padding-top: 20px; }
.scroll-track { flex: 1; height: 4px; background: #333; border-radius: 2px; position: relative; }
.scroll-thumb { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; background: var(--hf-accent); border-radius: 2px; cursor: grab; }