/*
 * ═══════════════════════════════════════════════════════════
 * Grundke IT-Service · CI 2026.01 · Dark Mode
 * Shared Stylesheet
 * Version: 1.0.0
 * Autor: Andreas Grundke / Grundke IT-Service
 * Datum: 2026-04-05
 * ═══════════════════════════════════════════════════════════
 */

/* ── Google Fonts: per <link> im HTML eingebunden (kein @import – blockiert Rendering) ── */

/* ── CI 2026.01 Variablen ── */
:root {
  --bg:        #0f1117;
  --bg2:       #1a1f2e;
  --bg3:       #1e2538;
  --bg4:       #242b3d;
  --accent:    #0c4da2;
  --cyan:      #26bdef;
  --cyan-dim:  rgba(38,189,239,0.12);
  --text:      #f1f5f9;
  --text2:     #94a3b8;
  --text3:     #64748b;
  --border:    #2d3748;
  --success:   #22c55e;
  --danger:    #ef4444;
  --warning:   #f59e0b;
  --fh:        'Space Grotesk', sans-serif;
  --fb:        'Manrope',       sans-serif;
  --fm:        'JetBrains Mono',monospace;
  --nav-h:     70px;
  --r:         12px;
  --inner:     1280px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--fb); background: var(--bg); color: var(--text); line-height: 1.65; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--fb); cursor: pointer; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Layout Utilities ── */
.inner { max-width: var(--inner); margin: 0 auto; padding: 0 clamp(1rem,5vw,2.5rem); }
.section-pad { padding: clamp(3.5rem,8vw,6.5rem) 0; }

/* ── Typography Utilities ── */
.s-label {
  font-family: var(--fm);
  font-size: 0.7rem; font-weight: 500;
  color: var(--cyan); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 0.8rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.s-label::after { content:''; flex:1; max-width:40px; height:1px; background:var(--cyan); opacity:.45; }

.s-title {
  font-family: var(--fh);
  font-size: clamp(1.6rem,3.5vw,2.6rem);
  font-weight: 800; color: var(--text);
  letter-spacing: -0.04em; line-height: 1.15;
  margin-bottom: 1rem;
}

.s-sub { font-size: clamp(.9rem,1.5vw,1.05rem); color: var(--text2); max-width: 560px; line-height: 1.7; }

/* ── Navigation ── */
nav {
  position: fixed; top:0; left:0; right:0;
  z-index: 300; height: var(--nav-h);
  background: rgba(15,17,23,.93);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { height:100%; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; flex-shrink:0; }
.logo-bar {
  display:flex; align-items:center;
  background:#0000FE;
  padding:.55rem clamp(1.2rem,3vw,2rem);
  border-radius:8px;
}
.logo-inner {
  display:flex; flex-direction:column; line-height:1; position:relative;
  padding:3px;
}
/* Eckklammer unten-links */
.logo-inner::before {
  content:''; position:absolute; bottom:0; left:0;
  width:9px; height:11px;
  border-left:2px solid rgba(255,255,255,.55); border-bottom:2px solid rgba(255,255,255,.55);
}
/* Eckklammer oben-rechts */
.logo-inner::after {
  content:''; position:absolute; top:0; right:0;
  width:9px; height:11px;
  border-right:2px solid rgba(255,255,255,.55); border-top:2px solid rgba(255,255,255,.55);
}
.logo-name {
  font-family:var(--fh); font-weight:700; font-size:clamp(1.3rem,3vw,1.65rem);
  color:#fff; letter-spacing:-.08em; line-height:1.05;
}
.logo-service {
  font-family:var(--fb); font-weight:400; font-size:clamp(.55rem,1vw,.65rem);
  color:rgba(255,255,255,.65); letter-spacing:.01em; line-height:1; margin-top:.12rem;
  align-self:flex-end; margin-right:1px;
}
.nav-links { display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); list-style:none; }
.nav-links a { font-size:.875rem; font-weight:500; color:var(--text2); transition:color .2s; white-space:nowrap; }
.nav-links a:hover { color:var(--cyan); }
.nav-cta { background:var(--cyan); color:#0f1117 !important; padding:.5rem 1.3rem; border-radius:8px; font-weight:700 !important; font-size:.85rem !important; transition:opacity .2s,transform .15s !important; }
.nav-cta:hover { opacity:.88; transform:translateY(-1px); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.4rem; cursor:pointer; }
.hamburger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s,opacity .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:var(--bg2); border-bottom:1px solid var(--border); padding:1.5rem; z-index:299; flex-direction:column; gap:.5rem; }
.mobile-menu.open { display:flex; }
.mobile-menu a { padding:.85rem 1rem; border-radius:8px; font-weight:600; font-size:.95rem; color:var(--text2); transition:background .2s,color .2s; }
.mobile-menu a:hover { background:var(--bg3); color:var(--cyan); }
.mobile-menu .m-cta { background:var(--cyan); color:#0f1117 !important; text-align:center; margin-top:.5rem; font-weight:700 !important; }

/* ── Buttons ── */
.btn-p {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:clamp(.7rem,.9rem,1rem) clamp(1.2rem,1.8rem,2rem);
  border-radius:8px; border:none;
  background:var(--cyan); color:#0f1117;
  font-family:var(--fb); font-weight:700; font-size:clamp(.82rem,.9rem,1rem);
  cursor:pointer; transition:background .2s,transform .15s,box-shadow .2s; white-space:nowrap;
}
.btn-p:hover { background:#3dd5ff; transform:translateY(-2px); box-shadow:0 8px 24px rgba(38,189,239,.3); }

.btn-g {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:clamp(.7rem,.9rem,1rem) clamp(1.2rem,1.8rem,2rem);
  border-radius:8px; background:transparent; color:var(--text);
  font-family:var(--fb); font-weight:600; font-size:clamp(.82rem,.9rem,1rem);
  border:1px solid var(--border); cursor:pointer;
  transition:border-color .2s,color .2s,background .2s; white-space:nowrap;
}
.btn-g:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim); }

/* ── Footer ── */
.site-footer { background:#080b11; border-top:1px solid var(--border); padding:clamp(2.5rem,6vw,4rem) 0 1.5rem; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); margin-bottom:2.5rem; }
.foot-brand { font-family:var(--fh); font-size:.98rem; font-weight:700; color:var(--text); margin-bottom:.4rem; }
.foot-desc  { font-size:.82rem; color:var(--text3); line-height:1.7; margin-bottom:1.2rem; }
.foot-contact a { font-size:.82rem; color:var(--text2); display:block; margin-bottom:.3rem; transition:color .2s; }
.foot-contact a:hover { color:var(--cyan); }
.foot-h { font-family:var(--fm); font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-bottom:.9rem; }
.foot-links { list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.foot-links a { font-size:.84rem; color:var(--text2); transition:color .2s; }
.foot-links a:hover { color:var(--cyan); }
.foot-bottom { border-top:1px solid var(--border); padding-top:1.2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.76rem; color:var(--text3); }
.foot-ci { font-family:var(--fm); font-size:.67rem; color:#2d3748; }

/* ── Responsive ── */
@media (max-width:1023px) {
  :root { --nav-h:64px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .foot-grid > div:first-child { grid-column:1/-1; }
}
@media (max-width:767px) {
  :root { --nav-h:60px; }
  .foot-grid { grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:480px) { :root { --nav-h:58px; } }
@media (min-width:1920px) { :root { --nav-h:76px; } html { font-size:16px; } .inner { max-width:1440px; } }