/* ==========================================================================
   Falk Präzisionstechnik — Stylesheet
   Blueprint-/Messprotokoll-Optik: helles Aluminiumgrau, Rasterlinien,
   ein orchestrierter CSS-Animationsmoment im Hero (Werkzeugweg + Status-LED).
   ========================================================================== */

:root {
  --color-bg: #E9EBE9;
  --color-surface: #F4F5F4;
  --color-surface-alt: #FFFFFF;
  --color-text: #1A1D1F;
  --color-text-soft: #5C6266;
  --color-line: #C7CBC8;
  --color-line-strong: #9CA3A0;

  --color-steel: #3E5C6B;
  --color-accent: #D6401E;
  --color-accent-dark: #b02f13;

  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --wrap-width: 1120px;
  --radius: 3px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--color-steel); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.45em;
  color: var(--color-text);
}

h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.1rem; margin-bottom: 0.4em; }

p { margin: 0 0 1em; }

.wrap {
  max-width: var(--wrap-width);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
}

/* ------------------------- Buttons ------------------------- */

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.btn-primary:hover { background: var(--color-accent-dark); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-line-strong);
}

.btn-ghost:hover {
  border-color: var(--color-steel);
  background: var(--color-surface);
}

/* ------------------------- Header ------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--color-text);
}

.logo span { color: var(--color-steel); font-weight: 600; }
.logo:hover { text-decoration: none; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav a {
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 500;
}

.main-nav a:hover { color: var(--color-accent); text-decoration: none; }

.nav-cta {
  padding: 9px 18px;
  background: var(--color-steel);
  color: #fff !important;
  border-radius: var(--radius);
}

.nav-cta:hover { background: #2f4a57; }

@media (max-width: 760px) {
  .main-nav { gap: 14px; }
  .main-nav a:not(.nav-cta) { display: none; }
}

/* ------------------------- Hero ------------------------- */

.hero { padding: 72px 0 44px; }

.hero-inner {
  display: grid;
  gap: 44px;
  justify-items: start;
}

.hero-text { max-width: 620px; }

.spec-tag {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-accent);
  letter-spacing: 0.3px;
  margin-bottom: 0.9em;
}

.hero-lead {
  font-size: 1.1rem;
  color: var(--color-text-soft);
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.15fr 1fr; align-items: center; justify-items: stretch; }
}

/* ---- Machine panel: the one deliberate animated moment ---- */

.machine-panel {
  position: relative;
  width: 280px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  padding: 14px 14px 16px;
}

.panel-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-soft);
  margin-bottom: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse-status 2.2s ease-in-out infinite;
}

@keyframes pulse-status {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(214, 64, 30, 0.35); }
  50% { opacity: 0.45; box-shadow: 0 0 0 4px rgba(214, 64, 30, 0); }
}

.tool-wrap {
  position: relative;
}

.panel-grid {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
}

/* The dot's left/top are set in % of the wrapper (= the svg's own rendered
   box), matching the viewBox coordinates of the dashed rect (x20 y20 w240
   h150 in a 280x190 viewBox). Using % here instead of fixed px keeps the
   dot locked to the drawn path no matter how the panel gets scaled, since
   both the svg and this element read percentages against the same box. */
.tool-head {
  position: absolute;
  left: 7.142857%;
  top: 10.526316%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(214, 64, 30, 0.18);
  transform: translate(-50%, -50%);
  animation: trace-path 9s linear infinite;
}

@keyframes trace-path {
  0%   { left: 7.142857%;  top: 10.526316%; }
  22%  { left: 92.857143%; top: 10.526316%; }
  25%  { left: 92.857143%; top: 10.526316%; }
  47%  { left: 92.857143%; top: 89.473684%; }
  50%  { left: 92.857143%; top: 89.473684%; }
  72%  { left: 7.142857%;  top: 89.473684%; }
  75%  { left: 7.142857%;  top: 89.473684%; }
  97%  { left: 7.142857%;  top: 10.526316%; }
  100% { left: 7.142857%;  top: 10.526316%; }
}

.panel-readout {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-soft);
}

@media (prefers-reduced-motion: reduce) {
  .status-dot,
  .tool-head {
    animation: none;
  }
}

/* ------------------------- Services ------------------------- */

.services {
  padding: 64px 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.section-head { max-width: 60ch; }
.section-lead { color: var(--color-text-soft); margin-bottom: 0; }
.services h2 { margin-bottom: 0.3em; }
.section-head { margin-bottom: 2.2em; }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px 28px;
}

.spec-card { max-width: 320px; }

.axis-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-steel);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  padding: 2px 8px;
  margin-bottom: 14px;
}

.spec-card p { color: var(--color-text-soft); font-size: 0.95rem; }

/* ------------------------- Process ------------------------- */

.process { padding: 68px 0; }

.process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 30px;
}

.process-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--color-line);
}

.process-list li:last-child { border-bottom: none; }

.rev-index {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-accent);
  padding-top: 4px;
}

.process-list h3 { margin-bottom: 0.25em; }
.process-list p { color: var(--color-text-soft); margin-bottom: 0; }

/* ------------------------- References ------------------------- */

.references {
  padding: 64px 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.reference-card {
  margin: 0;
  padding: 26px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.tolerance-stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-steel);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  padding: 3px 8px;
  margin-bottom: 14px;
}

.reference-card blockquote {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.45;
}

.reference-card figcaption {
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

/* ------------------------- About ------------------------- */

.about { padding: 68px 0; }

.about-inner {
  display: grid;
  gap: 40px;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  align-content: start;
}

.about-stats div {
  padding: 18px 0;
  border-top: 1px solid var(--color-line);
}

.about-stats dt {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--color-accent);
}

.about-stats dd {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

@media (min-width: 860px) {
  .about-inner { grid-template-columns: 1.3fr 1fr; }
}

@media (max-width: 500px) {
  .about-stats { grid-template-columns: 1fr; }
}

/* ------------------------- Contact ------------------------- */

.contact {
  padding: 68px 0 84px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}

.contact-inner {
  display: grid;
  gap: 44px;
}

.contact-info address {
  font-style: normal;
  color: var(--color-text-soft);
  line-height: 1.7;
}

.contact-form {
  display: grid;
  gap: 6px;
  background: var(--color-surface-alt);
  padding: 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.contact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 10px;
}

.contact-form input,
.contact-form textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-steel);
}

.contact-form button {
  margin-top: 14px;
  justify-self: start;
  cursor: pointer;
}

@media (min-width: 860px) {
  .contact-inner { grid-template-columns: 1fr 1.1fr; }
}

/* ------------------------- Footer ------------------------- */

.site-footer {
  padding: 26px 0;
  border-top: 1px solid var(--color-line);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.footer-inner nav a {
  color: var(--color-text-soft);
  margin-left: 18px;
}

/* ------------------------- Reduced motion (global) ------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}