.sw-h31 { position: relative; min-height: 100vh; background: #173B2E; color: #F5EEDC; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; overflow: hidden; }
.sw-h31::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1100px 540px at 85% -10%, rgba(231, 214, 184, 0.10), transparent 60%); pointer-events: none; }
.sw-h31-top { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1fr 1.02fr; align-items: stretch; }
.sw-h31-content { padding: 7rem clamp(2rem, 4vw, 4.5rem) 3.5rem clamp(2rem, 4.5vw, 5rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.sw-h31-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 0.72rem; letter-spacing: 5px; text-transform: uppercase; font-weight: 600; color: #F5EEDC; margin-bottom: 1.8rem; }
.sw-h31-dot { width: 8px; height: 8px; border-radius: 50%; background: #E7D6B8; flex-shrink: 0; }
.sw-h31-eyebrow em { font-style: normal; color: rgba(245, 238, 220, 0.55); font-weight: 400; }
.sw-h31-title { font-family: 'Fraunces', Georgia, serif; font-weight: 560; font-size: 88px; line-height: 0.98; letter-spacing: -2px; color: #F5EEDC; margin: 0 0 1.4rem; max-width: 13ch; }
.sw-h31-italic { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 480; color: #E7D6B8; -webkit-text-stroke: 0; }
.sw-h31-sub { font-size: 16px; line-height: 1.65; color: rgba(245, 238, 220, 0.85); max-width: 50ch; margin: 0 0 2.2rem; }
.sw-h31-sub strong { color: #E7D6B8; font-weight: 600; }
.sw-h31-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.sw-h31-cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #E7D6B8; color: #173B2E; padding: 15px 30px; border-radius: 0; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: 1px solid #E7D6B8; transition: all 0.2s; }
.sw-h31-cta-primary:hover { background: transparent; color: #E7D6B8; }
.sw-h31-cta-secondary { display: inline-flex; align-items: center; background: transparent; color: #F5EEDC; padding: 14px 26px; border-radius: 0; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(245, 238, 220, 0.3); transition: all 0.2s; }
.sw-h31-cta-secondary:hover { border-color: #E7D6B8; color: #E7D6B8; }
.sw-h31-arrow { display: inline-block; }
.sw-h31-visual { position: relative; padding: clamp(1.6rem, 3.5vh, 2.6rem) clamp(1.6rem, 3vw, 3rem) 0 0; }
.sw-h31-panorama { position: relative; height: min(52vh, 480px); background-image: url('/studio/components/images/dienst-4-immobilien.jpg'); background-size: cover; background-position: center; border: 1px solid rgba(231, 214, 184, 0.55); }
.sw-h31-panorama::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(231, 214, 184, 0.35); pointer-events: none; }
.sw-h31-photo-credit { position: absolute; top: 22px; right: 24px; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: rgba(245, 238, 220, 0.9); background: rgba(13, 31, 24, 0.6); padding: 4px 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sw-h31-feature { position: absolute; left: -3.4rem; bottom: -1.8rem; z-index: 6; display: flex; flex-direction: column; gap: 0.45rem; background: #0F2A20; color: #F5EEDC; padding: 1.4rem 1.6rem; border: 1px solid rgba(231, 214, 184, 0.4); border-left: 4px solid #E7D6B8; box-shadow: 0 28px 60px -22px rgba(0, 0, 0, 0.6); width: 320px; }
.sw-h31-feature-kicker { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 800; color: #E7D6B8; }
.sw-h31-feature-name { font-family: 'Fraunces', Georgia, serif; font-weight: 560; font-size: 1.25rem; line-height: 1.15; color: #F5EEDC; }
.sw-h31-feature-meta { font-size: 0.74rem; font-weight: 400; line-height: 1.55; color: #C3B89C; }
.sw-h31-feature-price { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #E7D6B8; padding-top: 0.65rem; border-top: 1px solid rgba(231, 214, 184, 0.25); margin-top: 0.3rem; }
.sw-h31-marquee { position: relative; z-index: 5; display: flex; align-items: stretch; background: #0F2A20; border-top: 1px solid rgba(231, 214, 184, 0.35); overflow: hidden; margin-top: 3.2rem; }
.sw-h31-marquee-label { flex-shrink: 0; display: flex; align-items: center; padding: 1.1rem clamp(1.4rem, 3vw, 2.4rem); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; color: #173B2E; background: #E7D6B8; white-space: nowrap; }
.sw-h31-marquee-track { flex: 1; display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%); }
.sw-h31-marquee-row { display: inline-flex; align-items: center; gap: 14px; padding: 0.8rem 7px; flex-shrink: 0; animation: sw-h31-scroll 56s linear infinite; }
.sw-h31-listing { display: inline-flex; flex-direction: column; gap: 2px; padding: 0.55rem 1rem 0.6rem; border: 1px solid rgba(231, 214, 184, 0.3); border-radius: 6px; background: rgba(231, 214, 184, 0.06); white-space: nowrap; }
.sw-h31-listing i { font-style: normal; font-size: 0.54rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: #E7D6B8; }
.sw-h31-listing span { font-family: 'Fraunces', Georgia, serif; font-size: 0.88rem; font-weight: 500; color: #F5EEDC; letter-spacing: 0.01em; }
@keyframes sw-h31-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% - 14px)); } }
.sw-h31-foot-meta { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 1.1rem clamp(1.4rem, 3vw, 2.4rem); font-size: 0.68rem; color: #C3B89C; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; border-left: 1px solid rgba(231, 214, 184, 0.25); white-space: nowrap; }
.sw-h31-foot-meta strong { color: #E7D6B8; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.05rem; letter-spacing: 0; }
@media (max-width: 960px) { .sw-h31-top { grid-template-columns: 1fr; } .sw-h31-content { padding: 5.5rem 1.6rem 1.6rem; } .sw-h31-title { font-size: clamp(2.8rem, 12vw, 4.6rem); } .sw-h31-visual { padding: 0.6rem 1.6rem 0 1.6rem; } .sw-h31-panorama { height: 36vh; } .sw-h31-feature { position: static; width: 100%; margin-top: 1rem; } .sw-h31-marquee { margin-top: 1.6rem; flex-wrap: wrap; } .sw-h31-marquee-label { padding: 0.8rem 1.2rem; } .sw-h31-foot-meta { border-left: none; border-top: 1px solid rgba(231, 214, 184, 0.25); width: 100%; } .sw-h31-actions { flex-direction: column; align-items: stretch; } }