:root{--red:#e51c23;--white:#f7f8fa}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0a1118;color:var(--white);font-family:Arial,Helvetica,sans-serif}
.page-shell{min-height:100vh;background:linear-gradient(90deg,rgba(7,15,23,.78) 0%,rgba(10,18,28,.36) 49%,rgba(7,14,22,.72) 100%),url('assets/pc-tastatur.jpeg') center/cover fixed no-repeat}
.topbar{height:112px;display:grid;grid-template-columns:250px 1fr auto;align-items:center;padding:0 clamp(28px,6vw,110px);background:rgba(13,22,31,.9);box-shadow:0 10px 35px rgba(0,0,0,.25);position:relative;z-index:2}
.logo{align-self:start;width:162px;height:145px;padding:7px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.28)}
.logo img{width:100%;height:100%;object-fit:cover;object-position:left center}
.topbar nav{display:flex;align-self:stretch;align-items:center;gap:48px}
.topbar nav a,.top-contact a{color:#fff;text-decoration:none;font-weight:600}
.topbar nav a{height:100%;display:flex;align-items:center;position:relative}
.topbar nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red)}
.top-contact{display:flex;gap:54px;align-items:center}
.top-contact span{margin-right:13px;font-size:1.55rem}
.hero{min-height:640px;display:grid;grid-template-columns:1fr 390px;gap:50px;align-items:center;padding:110px clamp(60px,7vw,120px) 120px}
.intro{max-width:680px}
h1{margin:0 0 8px;font-size:clamp(3rem,4.5vw,4.3rem);line-height:1.05}
.subtitle{margin:0;color:#d9dde1;font-size:clamp(1.55rem,2.45vw,2.25rem);line-height:1.25}
.redline{display:block;width:120px;height:3px;margin:26px 0;background:var(--red)}
.claim{margin:0 0 34px;color:#eff1f3;font-size:1.28rem;line-height:1.55}
.quick-actions{display:flex;gap:24px;flex-wrap:wrap}
.quick{min-width:295px;min-height:80px;border:0;border-radius:14px;padding:12px 24px;display:flex;align-items:center;gap:16px;text-align:left;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer}
.quick strong,.quick small{display:block}
.quick strong{font-size:1.22rem}
.quick small{margin-top:3px;font-size:.95rem}
.quick-icon{font-size:3rem;line-height:1}
.ip{color:#fff;background:linear-gradient(135deg,#1191ed,#0670cf)}
.teamviewer{color:#131920;background:#fff}
.tv-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:#1474c8;color:#fff;font-size:2rem;font-weight:700}
.visual-notes{position:relative;min-height:505px}
.hand{position:absolute;margin:0;color:rgba(255,255,255,.7);font-family:"Segoe Print","Comic Sans MS",cursive;font-style:italic;transform:rotate(-6deg);line-height:1.08}
.hand.big{right:55px;top:0;font-size:3rem}
.hand.small{right:0;bottom:50px;font-size:1.65rem}
.photo{position:absolute;display:block;object-fit:cover;border:2px solid rgba(255,255,255,.72);border-radius:9px;box-shadow:0 13px 32px rgba(0,0,0,.3)}
.phone{right:0;top:140px;width:288px;height:184px}
.keyboard{left:0;bottom:20px;width:190px;height:150px}
.service-strip{margin:-75px clamp(40px,5vw,82px) 38px;padding:26px 15px 22px;display:grid;grid-template-columns:repeat(6,1fr);background:rgba(17,28,39,.85);border:1px solid rgba(255,255,255,.22);border-radius:18px;box-shadow:0 15px 30px rgba(0,0,0,.28);backdrop-filter:blur(8px)}
.service-strip article{text-align:center;border-right:1px solid rgba(255,255,255,.22)}
.service-strip article:last-child{border:0}
.service-strip span{font-size:2.65rem;line-height:1}
.service-strip p{margin:8px 0 0;font-weight:700;font-size:1.05rem;line-height:1.25}
footer{min-height:92px;display:grid;grid-template-columns:1.1fr .8fr 1fr auto;gap:35px;align-items:center;padding:16px clamp(40px,5vw,88px);background:rgba(5,12,18,.94);border-top:1px solid rgba(255,255,255,.15);color:#e8ebed}
footer div,footer a{display:flex;align-items:center;gap:15px;color:inherit;text-decoration:none}
footer p{margin:0}
.foot-icon{font-size:1.7rem}
.copyright{font-size:.8rem;color:#c4c9ce}
@media(max-width:1100px){.topbar{grid-template-columns:190px 1fr}
.top-contact{display:none}
.topbar nav{justify-content:flex-end}
.hero{grid-template-columns:1fr 310px;padding-left:55px;padding-right:55px}
.service-strip{grid-template-columns:repeat(3,1fr);margin-top:-55px}
.service-strip article{padding:18px;border-bottom:1px solid rgba(255,255,255,.18)}
footer{grid-template-columns:1fr 1fr}
.copyright{text-align:right}
}
@media(max-width:760px){.page-shell{background-attachment:scroll}
.topbar{height:92px;grid-template-columns:115px 1fr;padding:0 16px}
.logo{width:108px;height:104px;padding:4px}
.topbar nav{gap:18px}
.topbar nav a{font-size:.82rem}
.topbar nav a:nth-child(2),.topbar nav a:nth-child(3){display:none}
.hero{display:block;min-height:auto;padding:80px 22px 120px}
.subtitle{font-size:1.45rem}
.claim{font-size:1.05rem}
.claim br{display:none}
.quick{width:100%;min-width:0}
.visual-notes{display:none}
.service-strip{grid-template-columns:repeat(2,1fr);margin:-75px 14px 24px}
.service-strip article:nth-child(even){border-right:0}
.service-strip p{font-size:.9rem}
footer{grid-template-columns:1fr;padding:25px 24px}
.copyright{text-align:left}
}

/* Navigation entfernt, vollständiges Logo frei über dem Hintergrund */
.page-shell{position:relative;padding-top:1px}
.logo{position:absolute;z-index:3;top:30px;left:clamp(24px,6vw,110px);width:290px;height:auto;padding:5px;background:#fff;box-shadow:0 8px 25px rgba(0,0,0,.38)}
.logo img{display:block;width:100%;height:auto;object-fit:contain}
.hero{min-height:720px;padding-top:215px}
.ip{text-decoration:none}
@media(max-width:760px){
  .logo{top:20px;left:20px;width:220px;height:auto;padding:4px}
  .hero{padding-top:185px}
}