/* =============================================================
   kunststofftechnologe.de — Global responsive stylesheet
   Covers all breakpoints from 320px to 2560px+
   ============================================================= */

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0; padding: 0;
  background: #FBFBFD; color: #1d1d1f;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; }
button { font-family: inherit; }
*:focus-visible { outline: 2px solid #009edb; outline-offset: 2px; border-radius: 4px; }
::selection { background: #d6effa; color: #0b1620; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============ SKIP LINK ============ */
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  padding: 12px 18px; background: #0b1620; color: #fff; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* ============ STICKY MOBILE CTA SPACE ============ */
@media (max-width: 768px) { body { padding-bottom: 88px; } }

/* ============ FLUID CONTAINER ============ */
.container,
nav .nav-inner,
section > div,
footer > div {
  /* width handled inline; ensure nothing overflows */
}

/* ============ NAV — fluid breakpoints ============ */
@media (max-width: 1100px) {
  .nav-inner { gap: 12px !important; }
  .nav-links { gap: 18px !important; }
}
@media (max-width: 960px) {
  .nav-links { gap: 14px !important; }
  .nav-links a { font-size: 13px !important; }
}
@media (max-width: 860px) {
  .nav-links, .nav-sub, .nav-cta { display: none !important; }
  .nav-burger { display: inline-flex !important; }
}
@media (max-width: 480px) {
  .nav-inner { padding: 10px 14px !important; }
}

/* ============ HERO ============ */
@media (max-width: 1100px) {
  .hero-grid { gap: 40px !important; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero-visual { aspect-ratio: 16/11 !important; max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
  .hero-visual { aspect-ratio: 4/3 !important; }
  .hero-stat-card { padding: 8px 12px !important; }
}
@media (max-width: 480px) {
  .hero-cta { width: 100%; }
  .hero-cta > a, .hero-cta > button {
    width: 100% !important; justify-content: center;
  }
}

/* ============ SECTION PADDING — fluid ============ */
section {
  /* Override hard-coded padding via attribute on Section */
}
section[id] > div, section > div {
  padding-left: clamp(16px, 4vw, 32px) !important;
  padding-right: clamp(16px, 4vw, 32px) !important;
}
@media (max-width: 768px) {
  section { padding-top: clamp(56px, 10vw, 80px) !important; padding-bottom: clamp(56px, 10vw, 80px) !important; }
}
@media (max-width: 480px) {
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ============ PILLARS GRID ============ */
@media (max-width: 1100px) {
  .pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  .pillars-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ============ GEHALT TABLE ============ */
@media (max-width: 760px) {
  .gehalt-row { grid-template-columns: 1fr !important; gap: 6px !important; padding: 18px 20px !important; }
  .gehalt-row > span { text-align: left !important; }
}

/* ============ ABLAUF STEPS ============ */
@media (max-width: 1100px) {
  .ablauf-grid { grid-template-columns: repeat(2, 1fr) !important; row-gap: 32px !important; }
  .ablauf-line { display: none !important; }
}
@media (max-width: 560px) {
  .ablauf-grid { grid-template-columns: 1fr !important; }
}

/* ============ ABOUT (DARK SPLIT) ============ */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* ============ TESTIMONIALS ============ */
@media (max-width: 960px) {
  .test-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .test-grid { grid-template-columns: 1fr !important; }
}

/* ============ FINAL CTA ============ */
@media (max-width: 600px) {
  .cta-buttons > a, .cta-buttons > button { width: 100% !important; }
  .cta-contact { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ============ FOOTER ============ */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 32px !important; }
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column-reverse !important; align-items: flex-start !important; }
}

/* ============ ULTRAWIDE ============ */
@media (min-width: 1600px) {
  nav .nav-inner, section > div, footer > div { max-width: 1320px !important; }
}
@media (min-width: 2000px) {
  nav .nav-inner, section > div, footer > div { max-width: 1480px !important; }
}

/* ============ TOUCH TARGETS ============ */
@media (max-width: 600px) {
  a[href], button { min-height: 36px; }
}

/* ============ TYPOGRAPHY GUARDRAILS ============ */
h1, h2, h3 { text-wrap: balance; word-break: break-word; hyphens: auto; }
p { word-break: break-word; }