.sw-h10 { position: relative; min-height: 100vh; background: #101418; color: #ECF1F6; font-family: 'Inter', sans-serif; display: grid; grid-template-columns: 1.06fr 0.94fr; grid-template-rows: 1fr auto; overflow: hidden; }
.sw-h10-circuit { position: absolute; pointer-events: none; }
.sw-h10-circuit-a { left: 50%; top: 0; width: 220px; height: 34%; border-left: 1px solid rgba(245,217,10,0.22); border-bottom: 1px solid rgba(245,217,10,0.22); }
.sw-h10-circuit-a::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 6px; height: 6px; border-radius: 50%; background: #F5D90A; box-shadow: 0 0 8px rgba(245,217,10,0.8); }
.sw-h10-circuit-b { left: 0; bottom: 28%; width: 26%; height: 120px; border-right: 1px solid rgba(245,217,10,0.16); border-top: 1px solid rgba(245,217,10,0.16); }
.sw-h10-circuit-b::before { content: ""; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: rgba(245,217,10,0.7); }
.sw-h10-content { position: relative; z-index: 1; grid-column: 1; grid-row: 1; padding: 3.8rem clamp(2.2rem, 4vw, 4.2rem) 1.8rem; }
.sw-h10-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.7rem; letter-spacing: 4px; text-transform: uppercase; font-weight: 500; color: #ECF1F6; margin-bottom: 1.7rem; }
.sw-h10-dot { width: 8px; height: 8px; border-radius: 50%; background: #F5D90A; box-shadow: 0 0 10px rgba(245,217,10,0.9); }
.sw-h10-eyebrow em { font-style: normal; color: #97A1AE; }
.sw-h10-title { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 64px; line-height: 0.94; letter-spacing: -2.6px; color: #ECF1F6; margin: 0 0 1.3rem; max-width: 15ch; text-transform: uppercase; }
.sw-h10-italic { font-style: normal; color: #F5D90A; }
.sw-h10-sub { font-size: 16px; line-height: 1.6; color: #97A1AE; max-width: 48ch; margin: 0 0 0.8rem; }
.sw-h10-emphasis { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,217,10,0.75); margin: 0 0 1.7rem; }
.sw-h10-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sw-h10-cta-primary { display: inline-flex; align-items: center; gap: 10px; background: #F5D90A; color: #101418; font-size: 0.9rem; font-weight: 800; padding: 15px 30px; border-radius: 8px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sw-h10-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(245,217,10,0.5); }
.sw-h10-cta-secondary { display: inline-flex; align-items: center; border: 1px solid rgba(236,241,246,0.3); color: #ECF1F6; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; padding: 14px 26px; border-radius: 8px; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
.sw-h10-cta-secondary:hover { border-color: rgba(245,217,10,0.6); background: rgba(245,217,10,0.06); }
.sw-h10-tile { display: inline-flex; align-items: center; gap: 14px; margin-top: 1.8rem; max-width: 520px; border: 1px solid rgba(245,217,10,0.45); border-radius: 16px; background: rgba(245,217,10,0.05); padding: 12px 20px; }
.sw-h10-tile-blink { width: 10px; height: 10px; border-radius: 50%; background: #F5D90A; flex: none; animation: sw-h10-blink 1.6s steps(2, start) infinite; }
.sw-h10-tile-body { display: grid; gap: 2px; }
.sw-h10-tile-kicker { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: #F5D90A; }
.sw-h10-tile-title { font-size: 0.92rem; font-weight: 800; color: #ECF1F6; }
.sw-h10-tile-meta { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.66rem; line-height: 1.5; color: #97A1AE; }
.sw-h10-visual { position: relative; grid-column: 2; grid-row: 1; }
.sw-h10-panel { position: absolute; inset: 3.4rem 2.8rem 2.2rem 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); background-image: linear-gradient(160deg, rgba(16,20,24,0.05), rgba(16,20,24,0.55)), url('/studio/components/images/handwerk-3-elektriker.jpg'); background-size: cover; background-position: center; }
.sw-h10-panel::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, rgba(0,0,0,0) 1px 4px); pointer-events: none; }
.sw-h10-panel::before { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 3px; background: #F5D90A; z-index: 1; }
.sw-h10-photo-credit { position: absolute; bottom: 14px; right: 16px; z-index: 2; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(236,241,246,0.85); background: rgba(16,20,24,0.65); padding: 4px 10px; border-radius: 4px; }
.sw-h10-services { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 150px repeat(4, 1fr); border-top: 1px solid rgba(236,241,246,0.14); position: relative; z-index: 1; background: rgba(10,13,16,0.55); }
.sw-h10-svc-label { display: flex; align-items: center; padding: 1rem 1.3rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: #F5D90A; }
.sw-h10-svc { padding: 0.95rem 1.3rem 1.1rem; border-left: 1px solid rgba(236,241,246,0.1); }
.sw-h10-svc-num { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.18em; color: #F5D90A; margin-bottom: 4px; }
.sw-h10-svc-name { display: block; font-size: 0.88rem; font-weight: 700; color: #ECF1F6; margin-bottom: 7px; }
.sw-h10-svc-row { display: flex; justify-content: space-between; gap: 10px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.64rem; padding: 2.5px 0; }
.sw-h10-svc-meta-label { color: #97A1AE; text-transform: uppercase; letter-spacing: 0.08em; }
.sw-h10-svc-val { color: rgba(236,241,246,0.88); text-align: right; }
@keyframes sw-h10-blink { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } }
@media (max-width: 960px) { .sw-h10 { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .sw-h10-content { grid-column: 1; padding: 2.4rem 1.5rem 1.6rem; } .sw-h10-title { font-size: 44px; letter-spacing: -1.4px; } .sw-h10-visual { grid-column: 1; grid-row: 2; min-height: 38vh; } .sw-h10-panel { inset: 0 1.5rem 1.6rem; clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); } .sw-h10-services { grid-row: 3; grid-template-columns: 1fr; } .sw-h10-svc { border-left: 0; border-top: 1px solid rgba(236,241,246,0.1); } .sw-h10-circuit { display: none; } }