/* ──────────────────────────────────────────────────────────
   KIEHN GRUPPE – Shared Design System
   ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Sora:wght@400;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Brand color tokens ─────────────────────────────────── */
:root {
  --font-sans: 'DM Sans', sans-serif;
  --font-head: 'Sora', sans-serif;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Neutral */
  --gray-50:  #F4F4F2;
  --gray-100: #E2E1DA;
  --gray-400: #9A9992;
  --gray-600: #62615C;
  --gray-800: #2C2C2A;
  --gray-900: #18181A;

  /* Kiehn Dienstleistungen – Blue */
  --kd-50:  #E6F1FB; --kd-100: #B5D4F4; --kd-400: #378ADD; --kd-600: #185FA5; --kd-800: #0C447C;

  /* Kiehn Network – Teal/Cyan */
  --kn-50:  #E0F7F4; --kn-100: #9BE8DE; --kn-400: #14B8A6; --kn-600: #0D8C7C; --kn-800: #065F55;

  /* Kiehn Systeme – Slate/Indigo */
  --ks-50:  #EEF0FB; --ks-100: #C7CDF5; --ks-400: #6470D8; --ks-600: #424DC4; --ks-800: #2A3199;

  /* Varisoft – Violet/Purple */
  --vs-50:  #F3EFFE; --vs-100: #D9C8FA; --vs-400: #9B5CF6; --vs-600: #7C3AED; --vs-800: #5B21B6;

  /* AlarmDesk – Amber/Red */
  --ad-50:  #FEF3E2; --ad-100: #FDDBA0; --ad-400: #F59E0B; --ad-600: #D97706; --ad-800: #92400E;

  /* UI */
  --text-dark:  #111827;
  --text-mid:   #374151;
  --text-light: #6B7280;
  --bg:         #FFFFFF;
  --bg-soft:    #F9FAFB;
  --border-soft: rgba(0,0,0,0.08);
}

/* ── Base ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.7;
  color: var(--text-dark); background: var(--bg);
}

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p  { line-height: 1.75; }

/* ── Nav ────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 68px;
}
.nav-logo {
  font-family: var(--font-head);
  font-size: 1.1rem; font-weight: 700;
  text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.nav-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.nav-links { display: flex; gap: 1.75rem; list-style: none; }
.nav-links a { text-decoration: none; color: var(--text-mid); font-size: .93rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--accent, #378ADD); }
.nav-back {
  font-size: .85rem; color: var(--text-light);
  text-decoration: none; display: flex; align-items: center; gap: 5px;
  transition: color .2s;
}
.nav-back:hover { color: var(--text-dark); }
.nav-cta {
  padding: .5rem 1.3rem; border-radius: 50px;
  font-weight: 600; font-size: .88rem;
  text-decoration: none; transition: all .2s;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block; border-radius: 50px;
  font-weight: 600; text-decoration: none;
  padding: .85rem 2rem; font-size: 1rem;
  transition: all .2s;
}
.btn-ghost {
  border: 2px solid var(--border-soft);
  color: var(--text-mid); background: transparent;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── Section helpers ────────────────────────────────────── */
section { padding: 5rem 5%; }
.wrap { max-width: 1100px; margin: 0 auto; }
.section-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: .6rem;
  color: var(--accent, #378ADD);
}
.section-sub { color: var(--text-mid); font-size: 1.05rem; max-width: 540px; margin-top: .75rem; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);
}

/* ── Grid helpers ───────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }

/* ── Footer ─────────────────────────────────────────────── */
footer {
  background: var(--gray-900); color: rgba(255,255,255,0.45);
  padding: 2.5rem 5%; font-size: .88rem;
}
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.footer-logo { font-family: var(--font-head); color: rgba(255,255,255,0.85); font-weight: 700; }
footer a { color: rgba(255,255,255,0.55); text-decoration: none; }
footer a:hover { color: #fff; }
.footer-brands { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 780px) {
  .nav-links { display: none; }
}