@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

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

:root {
  --g0: #0D3320;
  --g1: #1A5C35;
  --g2: #237A44;
  --g3: #2EA055;
  --g4: #45C471;
  --g5: #7DDEA0;
  --glight: #DFF2E8;
  --gmid:  #A8DDB9;
  --gbg:   #F0FAF3;

  --text:       #111A14;
  --text-muted: #4A6354;
  --bg:         #FAFCFB;
  --bg2:        #EFF7F2;
  --border:     rgba(30,100,55,0.18);
  --radius:     14px;
  --radius-sm:  8px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

/* ═══ NAV ═══ */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 40px;
  background: var(--g1);
  position: sticky; top: 0; z-index: 100;
  border-bottom: 2px solid var(--g3);
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img { height: 44px; border-radius: 6px; object-fit: contain; background: white; padding: 3px; }
.nav-logo-text .brand  { font-size: 17px; font-weight: 600; color: #fff; display: block; }
.nav-logo-text .tagline{ font-size: 10px; color: var(--g5); letter-spacing: 0.06em; text-transform: uppercase; display: block; }

.nav-links { display: flex; gap: 6px; list-style: none; }
.nav-links a {
  font-size: 13px; color: var(--g5); text-decoration: none;
  padding: 6px 12px; border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.nav-links a:hover, .nav-links a.active {
  background: rgba(255,255,255,0.15); color: #fff;
}

.nav-cta {
  background: var(--g4); color: var(--g0);
  border: none; padding: 9px 20px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background 0.2s;
}
.nav-cta:hover { background: #fff; color: var(--g1); }

/* ═══ BUTTONS ═══ */
.btn-primary {
  background: var(--g2); color: #fff; border: none;
  padding: 12px 26px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--g1); }

.btn-light {
  background: var(--glight); color: var(--g1); border: 1px solid var(--gmid);
  padding: 12px 26px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: background 0.2s;
}
.btn-light:hover { background: var(--gmid); }

/* ═══ LABELS & TITLES ═══ */
.section-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--g3); margin-bottom: 10px;
}
.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 30px; font-weight: 400; margin-bottom: 36px; line-height: 1.2;
}

/* ═══ PAGE HEADER ═══ */
.page-header {
  padding: 64px 40px 52px;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
  border-bottom: 3px solid var(--g4);
}
.page-header .section-label { color: var(--g5); margin-bottom: 14px; }
.page-header h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 44px; font-weight: 400; line-height: 1.12;
  margin-bottom: 18px; color: #fff;
}
.page-header h1 span { color: var(--g4); }
.page-header p { font-size: 16px; color: rgba(255,255,255,0.75); max-width: 580px; line-height: 1.75; }

/* ═══ FOOTER ═══ */
footer {
  background: var(--g0);
  padding: 28px 40px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  border-top: 3px solid var(--g2);
}
footer p { font-size: 12px; color: rgba(255,255,255,0.4); }
.foot-links { display: flex; gap: 24px; list-style: none; }
.foot-links a { font-size: 12px; color: rgba(255,255,255,0.4); text-decoration: none; }
.foot-links a:hover { color: var(--g4); }


/* ═══ MOBILE RESPONSIVENESS ═══ */
@media (max-width: 900px) {
  nav {
    padding: 10px 20px;
    position: relative;
    gap: 12px;
  }
  /* Show hamburger, hide extra wrapping */
  .nav-hamburger { display: flex; }
  /* Slide-down mobile menu */
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--g0);
    flex-direction: column; gap: 0;
    padding: 0 16px;
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.23,1,0.32,1),
                padding    0.3s  cubic-bezier(0.23,1,0.32,1);
    z-index: 99;
    border-top: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 10px 32px rgba(0,0,0,0.3);
  }
  nav.is-open .nav-links { max-height: 540px; padding: 10px 16px 20px; }
  .nav-links a { font-size: 15px; padding: 12px 14px; border-radius: 8px; width: 100%; display: block; }
  .nav-cta { font-size: 12px; padding: 7px 12px; white-space: nowrap; }

  .page-header { padding: 44px 20px 36px; }
  .page-header h1 { font-size: 30px; }

  footer { padding: 20px; flex-direction: column; gap: 10px; text-align: center; }
  .foot-links { justify-content: center; }
}

@media (max-width: 680px) {
  /* Hero */
  .hero { grid-template-columns: 1fr; }
  .hero-right { display: none; }
  .hero-left { padding: 44px 20px; }
  .hero-left h1 { font-size: 30px; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .trust-bar { padding: 16px 20px; gap: 16px; }
  .trust-div { display: none; }

  /* Sections */
  .services { padding: 44px 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .why { padding: 44px 20px; }
  .why-grid { grid-template-columns: 1fr; }
  .team-section { grid-template-columns: 1fr; }
  .team-img { height: 220px; }
  .team-text { padding: 32px 20px; }
  .certs-strip { padding: 44px 20px; }
  .certs-grid { grid-template-columns: 1fr; }
  .reviews-strip { padding: 44px 20px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .contact-strip { padding: 44px 20px; }
  .contact-inner { grid-template-columns: 1fr; }
  .anniv { grid-template-columns: 1fr; text-align: center; }

  /* Über uns */
  .story { grid-template-columns: 1fr; padding: 44px 20px; }
  .values-grid { grid-template-columns: 1fr; }
  .values { padding: 44px 20px; }
  .timeline-sec { padding: 44px 20px; }

  /* Partner */
  .partners { padding: 44px 20px; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-intro { padding: 0 20px 44px; }
  .intro-card { grid-template-columns: 1fr; padding: 28px; }

  /* Kontakt */
  .contact-main { grid-template-columns: 1fr; padding: 44px 20px; gap: 28px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: 1; }

  /* Leistungen */
  .leistungen { padding: 44px 20px; }
  .cta-bar { padding: 32px 20px; flex-direction: column; align-items: flex-start; }

  /* General */
  .section-title { font-size: 24px; }
  .page-header h1 { font-size: 26px; }
  .page-header { padding: 36px 20px 28px; }
}


/* ═══════════════════════════════════════════════
   DESIGN ENGINEERING SYSTEM
   Emil Kowalski × Design Taste Frontend
   ═══════════════════════════════════════════════ */

:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.77, 0, 0.175, 1);
}


/* ── BUTTON TACTILE FEEDBACK ──────────────────── */
/* Emil: "buttons must feel responsive to press" */
.btn-primary,
.btn-light,
.nav-cta,
.apply-btn,
.spontan-btn {
  transition:
    background   0.15s var(--ease-out),
    color        0.15s var(--ease-out),
    transform    0.12s var(--ease-out),
    box-shadow   0.18s var(--ease-out) !important;
  will-change: transform;
}

.btn-primary:active,
.btn-light:active,
.nav-cta:active,
.apply-btn:active,
.spontan-btn:active {
  transform: scale(0.97) !important;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(35,122,68,0.28);
  }
  .btn-light:hover { transform: translateY(-1px); }
  .nav-cta:hover   { transform: translateY(-1px); }
}


/* ── NAV: SHADOW ON SCROLL ────────────────────── */
nav {
  transition: box-shadow 0.3s var(--ease-out);
}
nav.nav-scrolled {
  box-shadow: 0 4px 28px rgba(13,51,32,0.4);
}
.nav-links a {
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}


/* ── CARD HOVER LIFT ──────────────────────────── */
.svc-card {
  transition:
    border-color  0.2s var(--ease-out),
    transform     0.25s var(--ease-out),
    box-shadow    0.25s var(--ease-out) !important;
  will-change: transform;
}

.job-card {
  transition:
    border-color  0.2s var(--ease-out),
    box-shadow    0.25s var(--ease-out),
    transform     0.25s var(--ease-out);
  will-change: transform;
}

.why-item {
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.lst-card {
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .svc-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(13,51,32,0.14) !important;
  }
  .job-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(30,100,55,0.16) !important;
  }
  .lst-card:hover {
    box-shadow: 0 4px 20px rgba(13,51,32,0.1);
  }
  .why-item:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.22);
  }
}


/* ── SPOTLIGHT CARD EFFECT ────────────────────── */
/* Design Taste Frontend: "Spotlight Border Card" */
.js-spotlight {
  position: relative;
}
.js-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    480px circle at var(--mx, 50%) var(--my, 50%),
    rgba(46,160,85,0.07),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
  .js-spotlight:hover::before { opacity: 1; }
}
.js-spotlight > * { position: relative; z-index: 1; }


/* ── SCROLL REVEAL ────────────────────────────── */
/* Emil: "nothing in the real world appears from nothing" */
.js-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
}
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── STAGGER GRID CHILDREN ────────────────────── */
/* Emil: stagger 30-80ms between items */
.js-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.js-stagger.is-visible > *:nth-child(1) { transition-delay:   0ms; }
.js-stagger.is-visible > *:nth-child(2) { transition-delay:  65ms; }
.js-stagger.is-visible > *:nth-child(3) { transition-delay: 130ms; }
.js-stagger.is-visible > *:nth-child(4) { transition-delay: 195ms; }
.js-stagger.is-visible > *:nth-child(5) { transition-delay: 260ms; }
.js-stagger.is-visible > *:nth-child(6) { transition-delay: 325ms; }
.js-stagger.is-visible > *:nth-child(7) { transition-delay: 390ms; }
.js-stagger.is-visible > *:nth-child(8) { transition-delay: 455ms; }
.js-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}


/* ── HERO ENTRANCE ANIMATION ──────────────────── */
.hero-left .hero-badge,
.hero-left h1,
.hero-left p,
.hero-left .hero-btns {
  opacity: 0;
  transform: translateY(22px);
  animation: jsFadeUp 0.65s var(--ease-out) forwards;
}
.hero-left .hero-badge { animation-delay: 0.05s; }
.hero-left h1          { animation-delay: 0.15s; }
.hero-left p           { animation-delay: 0.25s; }
.hero-left .hero-btns  { animation-delay: 0.35s; }


/* ── PAGE HEADER ENTRANCE ─────────────────────── */
.page-header .section-label,
.page-header h1,
.page-header p {
  opacity: 0;
  transform: translateY(14px);
  animation: jsFadeUp 0.6s var(--ease-out) forwards;
}
.page-header .section-label { animation-delay: 0.04s; }
.page-header h1              { animation-delay: 0.14s; }
.page-header p               { animation-delay: 0.24s; }


@keyframes jsFadeUp {
  to { opacity: 1; transform: translateY(0); }
}


/* ── PARTNER LOGO HOVER ───────────────────────── */
.partner-logo-box {
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .partner-logo-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(13,51,32,0.12);
  }
}


/* ── TRUST BAR LOGO HOVER ─────────────────────── */
.trust-item img {
  transition: opacity 0.2s var(--ease-out), filter 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .trust-item img:hover {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1.05);
  }
}


/* ── FLOATING PHONE BTN PULSE ─────────────────── */
@keyframes phonePulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(35,122,68,0.45); }
  50%       { box-shadow: 0 4px 32px rgba(35,122,68,0.65); }
}
a[href^="tel"][style*="border-radius:50%"] {
  animation: phonePulse 3s var(--ease-inout) infinite;
}


/* ── CERT CARD HOVER ──────────────────────────── */
.cert-card {
  transition: border-color 0.2s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cert-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(13,51,32,0.1);
  }
}


/* ── FORM INPUT FOCUS ANIMATION ───────────────── */
.form-grid input,
.form-grid select,
.form-grid textarea,
.input-row input,
.input-row select {
  transition:
    border-color 0.18s var(--ease-out),
    box-shadow   0.18s var(--ease-out);
}


/* ── FOOTER LINK HOVER ────────────────────────── */
.foot-links a {
  transition: color 0.15s var(--ease-out);
}


/* ── REDUCED MOTION SAFETY ────────────────────── */
/* Emil: "prefers-reduced-motion: reduce" */
@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-stagger > *,
  .hero-left .hero-badge,
  .hero-left h1,
  .hero-left p,
  .hero-left .hero-btns,
  .page-header .section-label,
  .page-header h1,
  .page-header p {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  a[href^="tel"][style*="border-radius:50%"] {
    animation: none;
  }
}


/* ══════════════════════════════════════════════
   UI/UX PRO MAX + UI-STYLING UPGRADES
   Focus, Accessibility, Hamburger, Form Polish
   ══════════════════════════════════════════════ */


/* ── SKIP TO CONTENT LINK ─────────────────────
   ui-ux-pro-max: CRITICAL accessibility Priority 1
   ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 16px; top: 16px;
  width: auto; height: auto;
  padding: 10px 20px; z-index: 9999;
  background: var(--g1); color: #fff;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  outline: none;
}


/* ── FOCUS-VISIBLE RINGS ──────────────────────
   ui-ux-pro-max Priority 1: Visible focus rings
   2px ring, 2-3px offset, branded green color
   ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--g4);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible {
  outline: 2px solid var(--g4);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible {
  outline: 2px solid var(--g4);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Remove outline for mouse users (keep it for keyboard) */
:focus:not(:focus-visible) { outline: none; }


/* ── TOUCH-ACTION: MANIPULATION ───────────────
   ui-ux-pro-max Priority 2: Eliminates 300ms tap delay
   ─────────────────────────────────────────────── */
a, button,
.btn-primary, .btn-light, .nav-cta,
.nav-links a, .nav-hamburger,
.svc-card, .lst-card, .partner-logo-box, .cert-card,
.foot-links a, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}


/* ── HAMBURGER BUTTON ─────────────────────────
   Hidden on desktop, shown on mobile ≤900px
   ─────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  width: 44px; height: 44px; /* min 44×44 touch target */
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s var(--ease-out);
}
.nav-hamburger:hover {
  background: rgba(255,255,255,0.18);
}
.nav-hamburger span {
  display: block;
  width: 18px; height: 1.5px;
  background: #fff; border-radius: 2px;
  transition: transform 0.24s cubic-bezier(0.23,1,0.32,1),
              opacity   0.18s ease;
}
/* X state when menu is open */
nav.is-open .nav-hamburger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
nav.is-open .nav-hamburger span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
nav.is-open .nav-hamburger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* ── ENHANCED PRIMARY BUTTON ──────────────────
   ui-styling: depth, gradient sheen, refined shadow
   ─────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--g2);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, transparent 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.08),
    0 4px 14px rgba(35,122,68,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover {
  background-color: var(--g1);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.1),
    0 6px 20px rgba(35,122,68,0.30),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Nav CTA button: refined depth */
.nav-cta {
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.2);
}


/* ── FORM INPUT STYLING ───────────────────────
   ui-ux-pro-max Priority 8 + ui-styling
   Visible inputs, clear focus ring, 44px min height
   ─────────────────────────────────────────────── */
.form-grid input,
.form-grid select,
.form-grid textarea,
.input-row input,
.input-row select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 44px; /* touch target minimum */
  padding: 11px 14px;
  background: #fff;
  border: 1.5px solid rgba(30,100,55,0.22);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  line-height: 1.5;
}
.form-grid textarea { min-height: 120px; resize: vertical; }
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.input-row input:focus,
.input-row select:focus {
  border-color: var(--g3);
  box-shadow: 0 0 0 3px rgba(46,160,85,0.14);
  outline: none;
}
.form-grid input::placeholder,
.form-grid textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.65;
}


/* ── SECTION VISUAL RHYTHM ────────────────────
   ui-ux-pro-max Priority 5: Visual hierarchy
   Subtle tinted alt backgrounds for section breaks
   ─────────────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
  margin: 0 40px;
}


/* ── IMPROVED SECTION TITLES ──────────────────
   ui-styling: stronger visual hierarchy
   ─────────────────────────────────────────────── */
.section-title {
  letter-spacing: -0.01em;
}

/* ── NAV ACTIVE INDICATOR ─────────────────────
   ui-ux-pro-max Priority 9: nav-state-active
   Current page gets an underline indicator
   ─────────────────────────────────────────────── */
.nav-links a.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 500;
}
@media (min-width: 901px) {
  .nav-links a.active {
    box-shadow: inset 0 -2px 0 var(--g4);
  }
}


/* ── REDUCED MOTION: HAMBURGER ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-links { transition: none !important; }
  .nav-hamburger span { transition: none !important; }
}