/* ═══ MSIT One – Design "Cyan Drive" (dunkles Marineblau, Cyan-Akzent, modern) ═══ */
:root{
  --bg:#060D16; --surface:#0B1624; --elev:#102033; --border:#17304A;
  --primary:#1ED8F4; --primary-glow:#1ED8F4; --primary-deep:#0FB6D2; --glow:#1ED8F4;
  --cyan:#1ED8F4; --accent:#1ED8F4;
  --text:#FFFFFF; --text2:#A5B6C8; --text3:#62788E;
  --radius:12px;
  --cd-line:rgba(30,216,244,.35);
}
a:hover{color:#7fecfb}
body{background:var(--bg)}
::selection{background:#1ED8F4;color:#06121c}
.cd-hl{color:var(--primary);-webkit-text-fill-color:var(--primary)}

/* Car-Logo (statt Initialen-Kästchen) */
.nav-brand .logo-box,.brand .logo{
  font-size:0!important;color:transparent!important;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231ED8F4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 15.5l1.2-3.6 3.3-1.9 3.6-2.3h4.4l3.6 3.4 2.9.9v3.5h-1.6M2.5 15.5H4.5M8.5 15.5h7'/%3E%3Ccircle cx='6.5' cy='15.8' r='2'/%3E%3Ccircle cx='17.5' cy='15.8' r='2'/%3E%3C/svg%3E") center/78% no-repeat!important;
  border:1px solid var(--cd-line)!important;border-radius:50%!important;box-shadow:0 0 16px -4px rgba(30,216,244,.6)
}

/* ── Website ───────────────────────────────── */
.site-nav{background:rgba(6,13,22,.88)!important;backdrop-filter:blur(10px);border-bottom:1px solid rgba(30,216,244,.14)!important}
.nav-links a{border-radius:6px!important;font-weight:500}
.nav-links a:hover{background:transparent!important;color:var(--primary)!important}
.nav-links a.active{background:transparent!important;color:#fff!important;box-shadow:inset 0 -2px 0 var(--primary);border-radius:0!important}
.nav-links .btn-cta,.btn-cta{background:transparent!important;color:#fff!important;border:1px solid var(--primary)!important;border-radius:6px!important;box-shadow:none!important}
.nav-links .btn-cta:hover{background:rgba(30,216,244,.14)!important;filter:none}

.hero{background:
  radial-gradient(ellipse 900px 520px at 80% 45%,rgba(30,216,244,.17) 0%,transparent 62%),
  radial-gradient(ellipse 500px 300px at 10% 100%,rgba(30,216,244,.07) 0%,transparent 70%),
  linear-gradient(180deg,#050B13,#08121d)!important}
.hero::before{background-image:radial-gradient(rgba(30,216,244,.22) 1px,transparent 1.4px)!important;background-size:34px 34px!important;opacity:.45!important;-webkit-mask-image:radial-gradient(ellipse at 75% 45%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 75% 45%,#000,transparent 70%)}
.hero-badge,.section-tag{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;color:var(--primary)!important;text-transform:uppercase;letter-spacing:4px!important;font-size:11.5px!important;font-weight:600}
.hero-badge .dot{background:var(--primary)!important;box-shadow:0 0 10px var(--primary)}
.hero h1{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#fff!important;font-weight:800!important;line-height:1.08!important;letter-spacing:-.8px}
.section-headline{font-weight:800;letter-spacing:-.5px}
.hero p,.section-sub{color:var(--text2)}

.btn-primary{background:var(--primary)!important;color:#05121b!important;border-radius:6px!important;font-weight:700!important;box-shadow:0 0 26px -6px rgba(30,216,244,.6)!important}
.btn-primary:hover{color:#05121b!important;filter:brightness(1.1);transform:none;box-shadow:0 0 34px -4px rgba(30,216,244,.85)!important}
.btn-outline{border:1px solid var(--primary)!important;color:#fff!important;border-radius:6px!important;font-weight:600!important}
.btn-outline:hover{background:rgba(30,216,244,.12)!important;color:#fff!important}

/* Karten: dünner Cyan-Rahmen, abgeschrägte Ecke unten rechts, Nummerierung */
.services-grid{counter-reset:cd}
.service-card,.proj-card,.price-card,.contact-card,.faq-item,.stat-card,.testimonial,.team-card{
  border-radius:0!important;background:linear-gradient(165deg,rgba(14,30,46,.85),rgba(7,15,24,.9))!important;
  border:1px solid var(--cd-line)!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.hcard{border-radius:10px!important;background:rgba(11,22,36,.9)!important;border:1px solid var(--cd-line)!important;box-shadow:0 0 30px -12px rgba(30,216,244,.45)!important}
.service-card::before{counter-increment:cd;content:counter(cd,decimal-leading-zero)!important;position:static!important;display:block;width:auto!important;height:auto!important;border-radius:0!important;background:none!important;
  font-size:46px;font-weight:300;line-height:1;margin-bottom:14px;color:transparent;-webkit-text-stroke:1px rgba(30,216,244,.75);transform:none!important}
.service-card:hover{border-color:var(--primary)!important;box-shadow:0 0 34px -12px rgba(30,216,244,.55)!important}
.service-card:hover::before{transform:none!important}
.proj-card:hover{border-color:var(--primary)!important;box-shadow:0 0 34px -12px rgba(30,216,244,.55)!important}
.svc-icon{border-radius:8px!important;background:rgba(30,216,244,.08)!important;border:1px solid var(--cd-line);width:44px!important;height:44px!important;font-size:21px!important}
.proj-card-cat,.proj-read-more{color:var(--primary)!important;text-transform:uppercase;letter-spacing:1.6px;font-size:11.5px!important}
.proj-tag{border-radius:6px!important;background:rgba(30,216,244,.05)!important;border-color:var(--border)!important}
.proj-filter a{border-radius:6px!important}
.proj-filter a:hover,.proj-filter a.active{border-color:var(--primary)!important;color:var(--primary)!important;background:rgba(30,216,244,.08)!important}
.proj-card-img,.proj-card-img img,.proj-gallery a,.proj-detail-hero{border-radius:0!important}
input,textarea,select{border-radius:6px!important}
.site-footer,footer{background:#040910!important;border-top:1px solid rgba(30,216,244,.14)!important}
.footer-col h4{color:var(--primary)!important;letter-spacing:2.5px}
.prose h2{color:var(--primary)}

.ai-widget-btn{background:#06111b!important;border:1px solid var(--primary)!important;box-shadow:0 0 24px -2px rgba(30,216,244,.6)!important}
.ai-widget-panel{border:1px solid var(--cd-line)!important}

/* ── Admin ─────────────────────────────────── */
.sidebar{background:linear-gradient(180deg,#081320,#060E18)!important;border-right:1px solid rgba(30,216,244,.12)!important}
.brand{font-size:16px!important;letter-spacing:.4px}
.nav a{border-radius:8px!important;color:#b3c2d2;font-size:13.5px}
.nav a:hover{background:rgba(30,216,244,.07)!important;color:#fff!important}
.nav a.active{background:linear-gradient(90deg,rgba(30,216,244,.2),rgba(30,216,244,.06))!important;color:#fff!important;box-shadow:inset 3px 0 0 var(--primary)!important}
.nav a.active svg{color:var(--primary)}
.nav .sep{color:var(--primary)!important;opacity:.75;letter-spacing:2.5px!important}
.card,.kpi-card,.login-card,.stat-pill{background:linear-gradient(165deg,#0C1827,#09121E)!important;border:1px solid #15304a!important;border-radius:12px!important}
.card h2{color:#fff}
.kpi-card .value{color:#fff}
.kpi-card .label{color:var(--text2)}
.kpi-card:hover{border-color:var(--primary)!important;box-shadow:0 0 28px -12px rgba(30,216,244,.55)!important}
.kpi-card .glow{background:radial-gradient(circle,rgba(30,216,244,.22),transparent 70%)!important}
.btn{border-radius:8px!important;font-weight:600}
.btn.primary{background:var(--primary)!important;color:#05121b!important;box-shadow:0 0 22px -8px rgba(30,216,244,.7)!important}
.btn.primary:hover{color:#05121b!important}
.btn.ghost{background:transparent!important;border:1px solid #1d3a56!important;color:#fff!important}
.btn.ghost:hover{border-color:var(--primary)!important;color:var(--primary)!important}
.btn.sm{border-radius:6px!important}
.badge.info{background:rgba(30,216,244,.13)!important;color:var(--primary)!important}
.login-wrap{background:radial-gradient(ellipse 800px 520px at 50% 0%,rgba(30,216,244,.18),transparent 70%),#060D16!important}
.login-card{border-color:var(--cd-line)!important;box-shadow:0 0 60px -18px rgba(30,216,244,.5)}
table th{text-transform:uppercase;letter-spacing:1.1px;font-size:11.5px}
input,textarea,select{background:#091522!important;border-color:#1a3550!important}
input:focus,textarea:focus,select:focus{border-color:var(--primary)!important;box-shadow:0 0 0 2px rgba(30,216,244,.18)!important;outline:none}
.topbar h1{font-weight:800;letter-spacing:-.3px}
@media(min-width:769px){.nav-links{gap:2px}}

/* ── Startseite im Stil der Vorlage ───────── */
.hero{min-height:600px;display:flex;align-items:center;padding:90px 0 80px!important}
.hero>.wrap{width:100%}
.hero:not([style*="background-image"]){background:
  linear-gradient(90deg,#060D16 0%,rgba(6,13,22,.9) 26%,rgba(6,13,22,.3) 55%,rgba(6,13,22,0) 100%),
  linear-gradient(180deg,rgba(6,13,22,0) 72%,#060D16 100%),
  url(theme/cyan/hero.jpg) right bottom/auto 100% no-repeat,#060D16!important}
.hero::before{display:none!important}
.hero-visual .hero-card-stack{display:none}
.hero h1{font-size:clamp(34px,4.8vw,58px)!important;max-width:700px}
.hero p{font-size:17px!important;max-width:420px!important}
.hero-text{position:relative;z-index:1}
.hero-visual{flex:0 0 auto}
.cd-band{padding:26px 0 8px;background:#060D16}
.cd-band-inner{position:relative;text-align:center;border:1px solid var(--cd-line);padding:13px 20px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));background:rgba(30,216,244,.03)}
.cd-band-inner span{font-size:13px;letter-spacing:11px;text-transform:uppercase;color:#d6e6f3;font-weight:500}
.cd-band-inner::before,.cd-band-inner::after{content:'';position:absolute;top:50%;height:1px;width:22%;background:linear-gradient(90deg,transparent,var(--primary))}
.cd-band-inner::before{left:4%}.cd-band-inner::after{right:4%;transform:scaleX(-1)}
.cd-areas{padding:56px 0 70px;background:#060D16}
.cd-areas-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:34px}
.cd-areas-head .section-headline{margin:0;font-size:clamp(28px,3.8vw,42px);line-height:1.1}
.cd-areas-head p{color:var(--text2);font-size:14.5px;line-height:1.7;max-width:260px;padding-bottom:6px;border-bottom:1px solid var(--cd-line)}
.cd-areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cd-area{display:flex;flex-direction:column;padding:24px 24px 0;color:var(--text);overflow:hidden;min-height:470px;
  background:linear-gradient(165deg,rgba(14,30,46,.85),rgba(7,15,24,.95));border:1px solid var(--cd-line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);transition:.25s}
.cd-area:hover{border-color:var(--primary);color:#fff;transform:translateY(-3px)}
.cd-area .num{font-size:50px;font-weight:300;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(30,216,244,.8);margin-bottom:10px}
.cd-area h3{font-size:22px;font-weight:700;margin-bottom:6px}
.cd-area p{color:var(--text2);font-size:14.5px}
.cd-area img{display:block;margin:auto -24px 0;width:calc(100% + 48px);max-width:none;height:270px;object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
.cta-section{background:linear-gradient(90deg,#060D16 0%,rgba(6,13,22,.88) 32%,rgba(6,13,22,.1) 100%),url(theme/cyan/road.jpg) right center/cover no-repeat,#060D16!important}
.cta-inner{text-align:left!important;padding:100px 0!important}
.cta-inner h2{font-size:clamp(30px,4.4vw,54px)!important;font-weight:800!important;max-width:520px;line-height:1.08;letter-spacing:-.5px}
.cta-inner p{margin:0 0 30px!important;max-width:460px!important}
.cta-btns{justify-content:flex-start!important}
@media(max-width:900px){.cd-areas-grid{grid-template-columns:1fr}.cd-area{min-height:0}.cd-band-inner span{letter-spacing:5px;font-size:11.5px}.cd-band-inner::before,.cd-band-inner::after{display:none}}
@media(max-width:768px){.hero{min-height:0}.hero:not([style*="background-image"]){background:linear-gradient(180deg,rgba(6,13,22,.88) 0%,rgba(6,13,22,.6) 60%,#060D16 100%),url(theme/cyan/hero.jpg) 70% center/cover no-repeat,#060D16!important}}