.sw-h9 { position: relative; min-height: 100vh; background: #FAFAF7; color: #16130F; font-family: 'Space Grotesk', 'Inter', sans-serif; display: flex; flex-direction: column; align-items: flex-start; padding: 3.6rem clamp(2rem, 4.5vw, 4.5rem) 2.2rem; overflow: hidden; }
.sw-h9-band { position: absolute; top: 26%; left: -12%; width: 130%; height: 150px; background: #B5532E; background-image: linear-gradient(100deg, rgba(255,255,255,0.12) 0 10%, rgba(0,0,0,0) 10% 32%, rgba(0,0,0,0.07) 32% 46%, rgba(0,0,0,0) 46%); transform: rotate(-7deg); clip-path: polygon(0 7%, 100% 0, 100% 91%, 0 100%); z-index: 0; }
.sw-h9-band::after { content: ""; position: absolute; left: 4%; right: 2%; bottom: -24px; height: 9px; background: rgba(181,83,46,0.35); }
.sw-h9-eyebrow { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; font-size: 0.72rem; letter-spacing: 4px; text-transform: uppercase; font-weight: 700; color: #16130F; margin-bottom: 1.6rem; }
.sw-h9-dot { width: 9px; height: 9px; border-radius: 50%; background: #B5532E; }
.sw-h9-eyebrow em { font-style: normal; font-weight: 500; color: #6E6258; }
.sw-h9-title { position: relative; z-index: 1; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 88px; line-height: 0.94; letter-spacing: -3px; color: #16130F; margin: 0 0 1.2rem; max-width: 13ch; text-transform: uppercase; }
.sw-h9-italic { display: inline-block; font-style: normal; color: #B5532E; background: #FAFAF7; padding: 0.02em 0.14em; box-shadow: 10px 10px 0 rgba(22,19,15,0.14); transform: rotate(-1.5deg); }
.sw-h9-sub { position: relative; z-index: 1; font-size: 15px; line-height: 1.6; color: #6E6258; max-width: 52ch; margin: 0 0 0.7rem; }
.sw-h9-emphasis { position: relative; z-index: 1; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: #B5532E; margin: 0 0 1.5rem; }
.sw-h9-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sw-h9-cta-primary { display: inline-flex; align-items: center; gap: 10px; background: #16130F; color: #FAFAF7; font-size: 0.9rem; font-weight: 700; padding: 15px 30px; border-radius: 0; text-decoration: none; box-shadow: 6px 6px 0 rgba(181,83,46,0.9); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sw-h9-cta-primary:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 rgba(181,83,46,0.9); }
.sw-h9-cta-secondary { display: inline-flex; align-items: center; border: 2px solid #16130F; color: #16130F; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; padding: 13px 24px; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.sw-h9-cta-secondary:hover { background: #16130F; color: #FAFAF7; }
.sw-h9-cols { position: relative; z-index: 1; display: flex; gap: 3.4rem; margin-top: 2.4rem; max-width: 660px; }
.sw-h9-col-num { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.66rem; letter-spacing: 0.18em; color: #B5532E; margin-bottom: 6px; }
.sw-h9-col-title { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: #16130F; margin: 0 0 0.7rem; }
.sw-h9-method-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sw-h9-method-list li { font-size: 0.84rem; line-height: 1.45; color: #6E6258; padding-left: 16px; position: relative; }
.sw-h9-method-list li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 8px; height: 2px; background: #B5532E; }
.sw-h9-swatches { display: flex; gap: 14px; }
.sw-h9-swatch-1, .sw-h9-swatch-2, .sw-h9-swatch-3, .sw-h9-swatch-4 { display: flex; flex-direction: column; gap: 7px; width: 76px; }
.sw-h9-swatch-chip { display: block; width: 100%; height: 38px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(22,19,15,0.1), 0 8px 14px -8px rgba(22,19,15,0.4); }
.sw-h9-swatch-1 .sw-h9-swatch-chip { background: #B5532E; }
.sw-h9-swatch-2 .sw-h9-swatch-chip { background: #2F4C3B; }
.sw-h9-swatch-3 .sw-h9-swatch-chip { background: #D9B23B; }
.sw-h9-swatch-4 .sw-h9-swatch-chip { background: #16130F; }
.sw-h9-swatch-text { font-size: 0.64rem; line-height: 1.35; letter-spacing: 0.04em; text-transform: uppercase; color: #6E6258; }
.sw-h9-foot { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(22,19,15,0.16); padding-top: 0.95rem; width: min(58%, 560px); }
.sw-h9-foot strong { font-size: 1.45rem; font-weight: 700; color: #B5532E; letter-spacing: -0.5px; }
.sw-h9-foot-meta { font-size: 0.78rem; line-height: 1.45; color: #6E6258; }
.sw-h9-polaroid { position: absolute; right: clamp(1.6rem, 3.5vw, 3.4rem); bottom: 2.4rem; width: 290px; margin: 0; background: #FFFFFF; padding: 12px 12px 14px; border: 1px solid #E8E3D9; box-shadow: 0 26px 50px -24px rgba(22,19,15,0.4); transform: rotate(4deg); z-index: 2; }
.sw-h9-tape { position: absolute; top: -13px; left: 50%; width: 110px; height: 26px; background: rgba(217,200,160,0.7); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 4px 8px -4px rgba(22,19,15,0.25); }
.sw-h9-polaroid-img { display: block; height: 205px; background-image: url('/studio/components/images/handwerk-2-maler.jpg'); background-size: cover; background-position: center; }
.sw-h9-polaroid-caption { font-family: 'Caveat', cursive; font-size: 1.15rem; color: #3A332B; text-align: center; padding-top: 9px; }
@media (max-width: 960px) { .sw-h9 { padding: 2.6rem 1.4rem 2rem; } .sw-h9-title { font-size: 52px; letter-spacing: -1.5px; } .sw-h9-band { top: 22%; height: 100px; } .sw-h9-cols { flex-direction: column; gap: 1.6rem; margin-top: 2rem; } .sw-h9-foot { width: 100%; margin-top: 2rem; } .sw-h9-polaroid { position: static; transform: rotate(2deg); width: min(320px, 92%); margin: 2.2rem auto 0; } }