/* ===========================================================
   home.css — sections introduced with the 2026-08 redesign.
   Kept separate from main.css so the redesign stays revertible.
   Relies on the tokens defined in main.css :root
   =========================================================== */

/* ---------- No-JS / observer-failure safety net ----------
   main.css hides .animate-fade-up and .stagger-children children at
   opacity:0 and relies on an IntersectionObserver to reveal them. If the
   script never runs, the whole page below the hero stays blank. Only apply
   the hidden start state once we know JS is alive. Same for users who ask
   for reduced motion — they get the content, not the animation. */
html:not(.js) .animate-fade-up,
html:not(.js) .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Hero figure (replaces the old placeholder) ---------- */
.hero-figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-figure figcaption {
  padding: 1rem 1.25rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  border-top: 1px solid var(--bg-border);
}

.hero-figure figcaption strong {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: .15rem;
}

/* ---------- Shared section rhythm ----------
   Backgrounds alternate by POSITION, not by section name. Naming them
   individually broke the moment a section was hidden (parking the case
   studies left two bg-secondary sections touching). nth-of-type counts every
   <section> in <main>, so the stripes stay correct whatever is shown. */
.alt-section {
  padding: 4.5rem 2rem;
}

main > .alt-section:nth-of-type(even) {
  background: var(--bg-secondary);
}

/* Short sections read as empty when the header eats 4rem before the content */
.alt-section .section-header {
  margin-bottom: 2.75rem;
}

/* ---------- Two doors ---------- */
.duo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: var(--container-max);
  margin: 0 auto;
}

.duo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.25rem;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 16px;
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.duo-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
}

/* the high-value path gets the gradient edge */
.duo-card-accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: var(--gradient-warm);
}

.duo-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
  color: var(--orange);
}

.duo-icon svg {
  width: 100%;
  height: 100%;
}

.duo-card h3 {
  font-size: 1.5rem;
  margin-bottom: .5rem;
}

.duo-lead {
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.duo-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  flex: 1;
}

.duo-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.duo-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient-warm);
}

.duo-link {
  align-self: flex-start;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  transition: gap var(--transition-fast), opacity var(--transition-fast);
}

.duo-link:hover {
  opacity: .75;
}

/* ---------- Case studies ---------- */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  max-width: var(--container-max);
  margin: 0 auto;
}

.case-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 16px;
  overflow: hidden;
}

.case-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-secondary);
}

.case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-media-empty {
  display: grid;
  place-items: center;
  border-bottom: 1px dashed var(--bg-border);
}

.case-media-label {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.case-body {
  padding: 1.75rem;
}

.case-kicker {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .5rem;
}

.case-body h3 {
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}

.case-facts {
  margin: 0;
}

.case-facts dt {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .3rem;
}

.case-facts dd {
  margin: 0 0 1.1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.case-note {
  font-size: .85rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* Visible marker for content that still needs real data.
   Deliberately obvious — remove the element once filled in. */
.needs-input {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--orange);
  background: rgba(255, 140, 66, .07);
  border: 1px dashed rgba(255, 140, 66, .45);
  border-radius: 8px;
}

/* ---------- Process ---------- */
.process-steps {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 0 auto;
  max-width: var(--container-max);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
}

.process-step {
  padding-top: 1.25rem;
  border-top: 2px solid var(--bg-border);
}

.process-num {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .75rem;
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.process-step h3 {
  font-size: 1.15rem;
  margin-bottom: .5rem;
}

.process-step p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Methods / network ---------- */
.methods-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  /* the chip groups are much taller than the text — centring stops the left
     column leaving a tall empty gap under itself */
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
}

.methods-text h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  margin-bottom: 1.25rem;
}

.methods-text p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.methods-groups {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.method-group {
  padding: 1.5rem;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--bg-border);
  border-radius: 14px;
}

.method-group-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.method-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* filled = we own the machine, outlined = it runs through a partner */
.method-dot-in {
  background: var(--gradient-warm);
}

.method-dot-net {
  background: transparent;
  border: 2px solid var(--purple);
}

.method-group-note {
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
  line-height: 1.5;
}

.method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.method-chip {
  padding: .55rem 1rem;
  font-size: .875rem;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 999px;
}

/* ---------- Workshop / LakeLab ---------- */
.workshop-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
}

.workshop-media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--bg-border);
  display: block;
}

.workshop-text h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  margin-bottom: 1.25rem;
}

.workshop-text p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* ===========================================================
   Subpage components (fertigungsservice / produktentwicklung / ersatzteile)
   =========================================================== */

/* Compact hero — no image, so it must not take a full screen like the home one */
.sub-hero {
  padding: 5.5rem 2rem 4rem;
  border-bottom: 1px solid var(--bg-border);
}

.sub-hero-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.sub-hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  margin: 1rem 0 1.25rem;
}

.sub-hero-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.sub-hero .hero-buttons {
  justify-content: center;
}

/* "What to send" cards */
.need-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: var(--container-max);
  margin: 0 auto;
}

.need-card {
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 14px;
}

.need-num {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .6rem;
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.need-card h3 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

.need-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-size: .95rem;
}

/* Numbered phase list (product development) */
.phase-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 820px;
}

.phase {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--bg-border);
}

.phase:last-child {
  border-bottom: none;
}

.phase-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.phase-body h3 {
  font-size: 1.2rem;
  margin-bottom: .4rem;
}

.phase-body p {
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* Pull-quote style box used beside body copy */
.highlight-box {
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-left: 3px solid var(--orange);
  border-radius: 0 14px 14px 0;
}

.highlight-quote {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: .9rem;
}

.highlight-note {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* The "we don't do this" column — muted, not alarming */
.duo-card-warn {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .015);
}

.duo-card-warn .duo-list li::before {
  background: var(--text-muted);
}

.methods-groups-wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  max-width: var(--container-max);
  margin: 0 auto;
}

.needs-input-wide {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .methods-inner,
  .workshop-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .workshop-media {
    order: -1;
  }
}

@media (max-width: 640px) {
  .alt-section {
    padding: 3.25rem 1.25rem;
  }

  .sub-hero {
    padding: 3.5rem 1.25rem 2.75rem;
  }

  .phase {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .duo-card,
  .case-body {
    padding: 1.5rem;
  }
}