.sw-h8 { position: relative; min-height: 100vh; background: #2E2218; color: #F1E8D8; font-family: 'Inter', sans-serif; display: grid; grid-template-columns: 40% 60%; overflow: hidden; }
.sw-h8-visual { position: relative; min-height: 100%; background-image: linear-gradient(rgba(46,34,24,0.08), rgba(46,34,24,0.34)), url('/studio/components/images/handwerk-1-tischlerei.jpg'); background-size: cover; background-position: center; }
.sw-h8-photo-credit { position: absolute; bottom: 16px; left: 18px; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241,232,216,0.85); background: rgba(46,34,24,0.55); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sw-h8-joint { position: absolute; left: 40%; top: 0; bottom: 0; width: 26px; margin-left: -26px; z-index: 2; background: conic-gradient(from 135deg at 100% 50%, #2E2218 90deg, rgba(0,0,0,0) 0) 0 0 / 100% 34px repeat-y; }
.sw-h8-joint::before { content: ""; position: absolute; top: 0; bottom: 0; left: -6px; right: 6px; background: conic-gradient(from 135deg at 100% 50%, rgba(201,162,39,0.85) 90deg, rgba(0,0,0,0) 0) 0 0 / 100% 34px repeat-y; z-index: -1; }
.sw-h8-trust { position: absolute; left: 40%; bottom: 8%; transform: translateX(-62%) rotate(-2deg); z-index: 3; display: flex; flex-direction: column; gap: 4px; max-width: 240px; background: #241A11; border: 1px solid rgba(201,162,39,0.55); box-shadow: 0 24px 48px -22px rgba(0,0,0,0.7); padding: 16px 20px; color: #C9A227; }
.sw-h8-trust-num { font-family: 'Fraunces', Georgia, serif; font-size: 2.3rem; font-weight: 500; line-height: 1; }
.sw-h8-trust-label { font-size: 0.7rem; line-height: 1.45; color: rgba(241,232,216,0.78); }
.sw-h8-content { position: relative; display: flex; flex-direction: column; padding: 4rem clamp(2.4rem, 4.5vw, 4.8rem) 0; }
.sw-h8-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.72rem; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 600; color: #F1E8D8; margin-bottom: 1.8rem; }
.sw-h8-dot { width: 8px; height: 8px; background: #C9A227; transform: rotate(45deg); }
.sw-h8-eyebrow em { font-style: normal; font-weight: 500; color: rgba(241,232,216,0.55); }
.sw-h8-title { font-family: 'Fraunces', Georgia, serif; font-weight: 350; font-size: 78px; line-height: 1.0; letter-spacing: -1.2px; color: #F1E8D8; margin: 0 0 1.3rem; max-width: 14ch; }
.sw-h8-italic { font-style: italic; font-weight: 400; color: #C9A227; }
.sw-h8-sub { font-size: 16px; line-height: 1.65; color: #C2B49A; max-width: 46ch; margin: 0 0 0.9rem; }
.sw-h8-emphasis { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: rgba(201,162,39,0.9); margin: 0 0 1.8rem; }
.sw-h8-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sw-h8-cta-primary { display: inline-flex; align-items: center; gap: 10px; background: #C9A227; color: #2E2218; font-size: 0.92rem; font-weight: 700; padding: 15px 30px; border-radius: 4px; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sw-h8-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(201,162,39,0.55); }
.sw-h8-cta-secondary { display: inline-flex; align-items: center; border: 1px solid rgba(241,232,216,0.4); color: #F1E8D8; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; padding: 14px 26px; border-radius: 4px; text-decoration: none; transition: border-color 0.25s ease, background 0.25s ease; }
.sw-h8-cta-secondary:hover { border-color: rgba(201,162,39,0.7); background: rgba(201,162,39,0.08); }
.sw-h8-live { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.7rem; font-size: 0.78rem; color: #C9A227; }
.sw-h8-live strong { font-weight: 700; letter-spacing: 0.04em; }
.sw-h8-live-meta { color: rgba(241,232,216,0.6); }
.sw-h8-pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #C9A227; animation: sw-h8-pulse 2.2s ease-out infinite; }
.sw-h8-footer { margin-top: auto; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid rgba(201,162,39,0.35); padding: 1.15rem 0 1.3rem; }
.sw-h8-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: repeating-linear-gradient(90deg, rgba(241,232,216,0.28) 0 1px, rgba(0,0,0,0) 1px 14px); }
.sw-h8-procs { list-style: none; display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 0; padding: 0; }
.sw-h8-procs li { display: inline-flex; align-items: center; gap: 8px; }
.sw-h8-procs i { width: 5px; height: 5px; background: #C9A227; transform: rotate(45deg); }
.sw-h8-foot-label { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: #C2B49A; }
.sw-h8-foot-stat { display: inline-flex; align-items: baseline; gap: 10px; }
.sw-h8-foot-stat strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 500; color: #C9A227; }
.sw-h8-foot-meta { font-size: 0.72rem; color: #C2B49A; }
@keyframes sw-h8-pulse { 0% { box-shadow: 0 0 0 0 rgba(201,162,39,0.45); } 70% { box-shadow: 0 0 0 9px rgba(201,162,39,0); } 100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); } }
@media (max-width: 960px) { .sw-h8 { grid-template-columns: 1fr; } .sw-h8-visual { min-height: 38vh; } .sw-h8-joint { display: none; } .sw-h8-trust { position: static; transform: rotate(-1deg); margin: -2.4rem 1.6rem 0 auto; max-width: 260px; } .sw-h8-content { padding: 2rem 1.6rem 0; } .sw-h8-title { font-size: 46px; } .sw-h8-footer { margin-top: 2rem; } }