/* Suppan IT Shop-Startseite – zusätzlich ans Ende der style.css anhängen */
.shop-home { overflow: hidden; }
.shop-home .shop-hero { position: relative; padding: 100px 0 90px; background: #f7f9fc; overflow: hidden; }
.shop-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 55px; }
.shop-hero-copy { position: relative; z-index: 1; }
.shop-home .eyebrow { color: #1597ff; font-size: 12px; font-weight: 800; letter-spacing: .13em; margin: 0 0 18px; }
.shop-hero h1 { font-size: clamp(42px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -.045em; margin: 0 0 24px; color: #101827; }
.shop-hero h1 .help, .shop-section-heading h2 .help, .shop-why h2 .help, .shop-final-cta h2 .help { color: #1597ff; }
.shop-hero-lead { max-width: 610px; color: #586477; font-size: 18px; line-height: 1.75; margin: 0 0 28px; }
.shop-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.shop-hero-trust { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 30px; color: #566273; font-size: 13px; }
.shop-hero-trust span: first-letter { color: #1597ff; }
.shop-hero-visual { position: relative; min-height: 390px; display: grid; place-items: center; }
.shop-visual-glow { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: #1597ff; filter: blur(95px); opacity: .18; }
.shop-visual-card { position: relative; width: min(100%, 440px); min-height: 360px; padding: 28px; border: 1px solid #e3eaf3; border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 25px 70px rgba(23,43,77,.12); }
.shop-visual-kicker { font-size: 10px; letter-spacing: .16em; font-weight: 800; color: #1597ff; }
.shop-pc-placeholder { position: relative; width: 190px; height: 220px; margin: 18px auto 15px; border: 8px solid #202b3b; border-radius: 17px; background: linear-gradient(145deg,#182334,#34445b); box-shadow: inset 0 0 0 3px #51627a, 0 20px 35px rgba(16,24,39,.2); }
.shop-pc-placeholder span { position: absolute; inset: 15px; border-radius: 9px; border: 2px solid rgba(21,151,255,.65); background: radial-gradient(circle at 35% 35%,rgba(21,151,255,.8),transparent 35%),radial-gradient(circle at 70% 65%,rgba(91,87,255,.7),transparent 38%); }
.shop-pc-placeholder i,.shop-pc-placeholder b { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #1597ff; right: -19px; top: 22px; box-shadow: 0 25px #1597ff,0 50px #1597ff; }
.shop-pc-placeholder b { left: -19px; right: auto; top: 70px; background: #8b5cf6; box-shadow: 0 25px #8b5cf6,0 50px #8b5cf6; }
.shop-visual-caption { text-align: center; display: grid; gap: 6px; color: #172033; }
.shop-visual-caption small { color: #687487; }
.shop-home .section { padding: 90px 0; }
.shop-section-heading { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.shop-section-heading h2,.shop-why h2,.shop-final-cta h2 { font-size: clamp(30px,4vw,46px); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 16px; color: #111b2b; }
.shop-section-heading > p:last-child { color: #657184; line-height: 1.7; margin: 0; }
.shop-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; }
.shop-choice-card { overflow: hidden; border: 1px solid #e5eaf1; border-radius: 20px; background: #fff; box-shadow: 0 12px 38px rgba(23,43,77,.06); }
.shop-choice-art { min-height: 220px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.shop-art-gaming { background: radial-gradient(circle at 50% 50%,rgba(21,151,255,.23),transparent 55%),linear-gradient(135deg,#101b2c,#1d2c42); }
.shop-case { position: relative; width: 115px; height: 155px; border: 5px solid #9eb4cc; border-radius: 12px; background: linear-gradient(145deg,#26364a,#111b2b); box-shadow: 0 22px 35px rgba(0,0,0,.25); }
.shop-case:before { content:""; position:absolute; inset:12px; border:2px solid rgba(21,151,255,.8); border-radius:6px; background: radial-gradient(circle at 50% 35%,rgba(21,151,255,.9),transparent 35%),radial-gradient(circle at 50% 70%,rgba(139,92,246,.75),transparent 38%); }
.shop-case i,.shop-case b { position:absolute; width:7px; height:7px; border-radius:50%; background:#1597ff; right:8px; top:20px; box-shadow:0 18px #1597ff,0 36px #1597ff; }
.shop-case b { top:82px; background:#8b5cf6; box-shadow:0 18px #8b5cf6; }
.shop-art-office { background: linear-gradient(135deg,#edf4fb,#dce9f7); gap:18px; }
.shop-monitor { width:175px; height:112px; border:7px solid #28384d; border-radius:9px; background:linear-gradient(135deg,#fff,#d7e8f9); position:relative; box-shadow:0 16px 25px rgba(23,43,77,.13); }
.shop-monitor:after { content:""; position:absolute; width:48px; height:9px; background:#28384d; bottom:-20px; left:56px; border-radius:0 0 5px 5px; }
.shop-monitor i { position:absolute; width:55px; height:55px; border-radius:50%; background:rgba(21,151,255,.18); top:20px; left:55px; }
.shop-tower { width:48px; height:120px; border-radius:7px; background:linear-gradient(145deg,#34445b,#172337); box-shadow:0 16px 25px rgba(23,43,77,.16); }
.shop-choice-content { padding: 28px 30px 32px; }
.shop-choice-content h3 { font-size: 27px; margin: 0 0 12px; color: #172033; }
.shop-choice-content > p:not(.eyebrow) { color: #657184; line-height: 1.7; min-height: 82px; margin: 0 0 20px; }
.shop-choice-content .text-link,.shop-why .text-link { color: #1597ff; font-weight: 750; text-decoration: none; }
.shop-choice-content .text-link strong,.shop-why .text-link strong { margin-left: 7px; }
.shop-process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.shop-process-step { padding: 25px 22px; border: 1px solid #e5eaf1; border-radius: 15px; background: #fff; }
.shop-process-step > span { color: #1597ff; font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.shop-process-step h3 { margin: 17px 0 9px; color: #172033; font-size: 19px; }
.shop-process-step p { margin: 0; color: #657184; font-size: 14px; line-height: 1.65; }
.shop-why-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.shop-why h2 { margin: 0; }
.shop-why-copy p { color: #657184; line-height: 1.8; margin: 0 0 22px; }
.shop-final-cta { padding: 85px 0; text-align: center; background: #111d2e; }
.shop-final-cta-inner { max-width: 760px; }
.shop-final-cta h2 { color: #fff; }
.shop-final-cta > .container > p:not(.eyebrow) { color: #c3cedb; margin: 0 0 25px; }
@media(max-width:800px){.shop-home .shop-hero{padding:70px 0 60px}.shop-hero-inner,.shop-why-inner{grid-template-columns:1fr;gap:35px}.shop-hero-visual{min-height:330px}.shop-choice-grid{grid-template-columns:1fr}.shop-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-home .section{padding:65px 0}}
@media(max-width:500px){.shop-hero-trust{display:grid;gap:9px}.shop-visual-card{padding:20px;min-height:330px}.shop-pc-placeholder{transform:scale(.88);margin:5px auto}.shop-process-grid{grid-template-columns:1fr}.shop-choice-content{padding:24px 22px}.shop-choice-content > p:not(.eyebrow){min-height:0}}