/* Industry Page CSS — dropsa-schmiertechnik.de
   Visual language: homepage redesign palette, scoped to .ind-* */

:root {
  --ind-navy:      #1A2540;
  --ind-dark:      #0D1520;
  --ind-mid:       #243050;
  --ind-border:    #334266;
  --ind-orange:    #E8521A;
  --ind-orange-dk: #C94410;
  --ind-white:     #FFFFFF;
  --ind-grey-lt:   #F5F6F8;
  --ind-max-w:     1200px;
  --ind-pad-x:     clamp(20px, 4vw, 64px);
  --ind-dim:       rgba(255,255,255,0.72);
  --ind-muted:     rgba(255,255,255,0.48);
}

body.ind-page { background: var(--ind-dark); color: #1a1a2e; }

/* ── Breadcrumb ── */
.ind-bc { background: var(--ind-dark); padding: 10px var(--ind-pad-x); font-size: .82rem; border-bottom: 1px solid var(--ind-border); }
.ind-bc ol { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ind-max-w); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; color: var(--ind-muted); }
.ind-bc a { color: rgba(232,82,26,.8); text-decoration: none; }
.ind-bc a:hover { color: var(--ind-orange); }
.ind-bc [aria-current] { color: var(--ind-white); }

/* ── Hero ── */
.ind-hero { background: var(--ind-navy); display: grid; grid-template-columns: 55fr 45fr; min-height: 480px; }
.ind-hero__body { padding: 64px var(--ind-pad-x) 64px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.ind-hero__eye { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ind-orange); border: 1px solid rgba(232,82,26,.35); padding: 4px 12px; border-radius: 2px; width: fit-content; }
.ind-hero h1 { margin: 0; color: var(--ind-white); font-size: clamp(1.55rem,3.2vw,2.55rem); font-weight: 800; line-height: 1.18; max-width: 22ch; }
.ind-hero h1 em { font-style: normal; color: var(--ind-orange); }
.ind-hero__lead { color: var(--ind-dim); font-size: clamp(.92rem,1.5vw,1.03rem); line-height: 1.7; max-width: 46ch; margin: 0; }
.ind-hero__stats { display: flex; gap: 32px; flex-wrap: wrap; }
.ind-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.ind-hero__stat-n { font-size: 1.75rem; font-weight: 800; color: var(--ind-orange); line-height: 1; }
.ind-hero__stat-l { font-size: .75rem; color: var(--ind-muted); text-transform: uppercase; letter-spacing: .06em; }
.ind-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ind-hero__img-side { position: relative; overflow: hidden; }
.ind-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(.82) brightness(.72); }
.ind-hero__img-side::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--ind-navy) 0%, rgba(26,37,64,0) 44%), linear-gradient(to top, var(--ind-dark) 0%, rgba(13,21,32,0) 32%); }

/* ── Section shell ── */
.ind-s { padding: 72px var(--ind-pad-x); }
.ind-s__in { max-width: var(--ind-max-w); margin: 0 auto; }
.ind-s__hd { margin-bottom: 40px; }
.ind-s__eye { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; color: var(--ind-orange); }
.ind-s__h2 { margin: 0 0 12px; font-size: clamp(1.35rem,2.6vw,2rem); font-weight: 800; line-height: 1.2; }
.ind-s__p { font-size: clamp(.93rem,1.5vw,1.03rem); line-height: 1.7; max-width: 60ch; margin: 0; }

/* ── S2 Challenges (dark) ── */
.ind-chal { background: var(--ind-dark); }
.ind-chal .ind-s__h2 { color: var(--ind-white); }
.ind-chal .ind-s__p  { color: var(--ind-dim); }
.ind-chal__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--ind-border); border: 1px solid var(--ind-border); }
.ind-chal__card { background: var(--ind-mid); padding: 32px 28px; }
.ind-chal__ico { width: 44px; height: 44px; border: 1px solid rgba(232,82,26,.3); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ind-chal__ico svg { stroke: var(--ind-orange); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ind-chal__card h3 { margin: 0 0 10px; color: var(--ind-white); font-size: 1rem; font-weight: 700; }
.ind-chal__card p  { margin: 0; color: var(--ind-dim); font-size: .9rem; line-height: 1.65; }

/* ── S3 Lubrication Points (light) ── */
.ind-pts { background: var(--ind-grey-lt); }
.ind-pts .ind-s__h2 { color: var(--ind-navy); }
.ind-pts .ind-s__p  { color: #444; }
.ind-pts__lay { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.ind-pts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ind-pts__item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid var(--ind-orange); border-radius: 4px; }
.ind-pts__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ind-orange); margin-top: 6px; }
.ind-pts__txt strong { display: block; color: var(--ind-navy); font-size: .92rem; font-weight: 700; margin-bottom: 2px; }
.ind-pts__txt span   { color: #555; font-size: .87rem; line-height: 1.55; }
.ind-pts__img-wrap { aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; }
.ind-pts__img { width: 100%; height: 100%; object-fit: cover; }

/* ── S4 Systems (navy) ── */
.ind-sys { background: var(--ind-navy); }
.ind-sys .ind-s__h2 { color: var(--ind-white); }
.ind-sys .ind-s__p  { color: var(--ind-dim); }
.ind-sys__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ind-sys__card { background: var(--ind-mid); border: 1px solid var(--ind-border); border-radius: 4px; padding: 28px 24px; transition: border-color .18s, transform .18s; }
.ind-sys__card:hover { border-color: var(--ind-orange); transform: translateY(-2px); }
.ind-sys__tag { display: inline-block; background: rgba(232,82,26,.15); color: var(--ind-orange); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; margin-bottom: 14px; }
.ind-sys__card h3 { margin: 0 0 10px; color: var(--ind-white); font-size: 1rem; font-weight: 700; }
.ind-sys__card p  { margin: 0 0 18px; color: var(--ind-dim); font-size: .9rem; line-height: 1.6; }
.ind-sys__link { color: var(--ind-orange); font-size: .87rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ind-sys__link:hover { text-decoration: underline; }

/* ── S5 Products (mid-dark) ── */
.ind-prod { background: var(--ind-mid); }
.ind-prod .ind-s__h2 { color: var(--ind-white); }
.ind-prod .ind-s__p  { color: var(--ind-dim); }
.ind-prod__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--ind-border); border: 1px solid var(--ind-border); }
.ind-prod__card { background: var(--ind-dark); display: flex; flex-direction: column; text-decoration: none; transition: background .18s; }
.ind-prod__card:hover { background: #121f3a; }
.ind-prod__img-w { aspect-ratio: 4/3; overflow: hidden; }
.ind-prod__img   { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ind-prod__card:hover .ind-prod__img { transform: scale(1.04); }
.ind-prod__body  { padding: 16px 16px 20px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ind-prod__name  { color: var(--ind-white); font-size: .9rem; font-weight: 700; margin: 0; }
.ind-prod__desc  { color: var(--ind-dim); font-size: .82rem; line-height: 1.55; margin: 0; flex: 1; }
.ind-prod__cta   { color: var(--ind-orange); font-size: .8rem; font-weight: 700; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }

/* ── S6 Benefits (dark + orange metrics) ── */
.ind-ben { background: var(--ind-dark); }
.ind-ben__in { max-width: var(--ind-max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; }
.ind-ben__left { padding: 72px var(--ind-pad-x) 72px 0; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-left: var(--ind-pad-x); }
.ind-ben__eye { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ind-orange); }
.ind-ben h2  { margin: 0; color: var(--ind-white); font-size: clamp(1.3rem,2.4vw,1.85rem); font-weight: 800; line-height: 1.22; }
.ind-ben__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ind-ben__item { display: flex; align-items: flex-start; gap: 10px; color: var(--ind-dim); font-size: .9rem; line-height: 1.5; }
.ind-ben__item::before { content: '✓'; color: var(--ind-orange); font-weight: 800; flex-shrink: 0; }
.ind-ben__right { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ind-orange); }
.ind-metric { background: var(--ind-orange-dk); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 36px 20px; text-align: center; gap: 6px; }
.ind-metric:nth-child(odd) { background: var(--ind-orange); }
.ind-metric__n  { font-size: clamp(1.8rem,3.2vw,2.6rem); font-weight: 800; color: var(--ind-white); line-height: 1; }
.ind-metric__l  { font-size: .74rem; color: rgba(255,255,255,.82); text-transform: uppercase; letter-spacing: .06em; line-height: 1.3; text-align: center; }

/* ── S7 FAQ (white) ── */
.ind-faq { background: var(--ind-white); border-top: 1px solid #e8ecf2; }
.ind-faq .ind-s__h2 { color: var(--ind-navy); }
.ind-faq__list { margin-top: 32px; border: 1px solid #e0e6ef; border-radius: 4px; overflow: hidden; }
.ind-faq__item { border-bottom: 1px solid #e0e6ef; }
.ind-faq__item:last-child { border-bottom: none; }
.ind-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; font-size: .97rem; font-weight: 700; color: var(--ind-navy); gap: 16px; }
.ind-faq__item summary::-webkit-details-marker { display: none; }
.ind-faq__item summary::after { content: '+'; font-size: 1.4rem; font-weight: 300; color: var(--ind-orange); flex-shrink: 0; transition: transform .2s ease; }
.ind-faq__item[open] summary::after { transform: rotate(45deg); }
.ind-faq__a { padding: 0 24px 20px; color: #444; font-size: .94rem; line-height: 1.7; margin: 0; }

/* ── S8 CTA (navy, orange top border) ── */
.ind-cta { background: var(--ind-navy); border-top: 3px solid var(--ind-orange); }
.ind-cta .ind-s__in { display: grid; grid-template-columns: 55fr 45fr; gap: 48px; align-items: center; }
.ind-cta .ind-s__h2  { color: var(--ind-white); }
.ind-cta__lead { color: var(--ind-dim); font-size: clamp(.9rem,1.4vw,1rem); line-height: 1.65; margin: 0 0 28px; }
.ind-cta__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ind-cta__item { display: flex; align-items: center; gap: 8px; color: var(--ind-dim); font-size: .88rem; }
.ind-cta__item::before { content: '✓'; color: var(--ind-orange); font-weight: 800; flex-shrink: 0; }
.ind-cta__box { background: var(--ind-mid); border: 1px solid var(--ind-border); padding: 36px 32px; border-radius: 4px; }
.ind-cta__box h3 { margin: 0 0 10px; color: var(--ind-white); font-size: 1.1rem; font-weight: 700; }
.ind-cta__box p  { color: var(--ind-dim); font-size: .88rem; line-height: 1.6; margin: 0 0 20px; }
.ind-cta__btns   { display: flex; flex-direction: column; gap: 10px; }

/* ── S9 Related (dark) ── */
.ind-rel { background: var(--ind-dark); border-top: 1px solid var(--ind-border); }
.ind-rel .ind-s__h2 { color: var(--ind-white); font-size: 1.25rem; }
.ind-rel__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--ind-border); border: 1px solid var(--ind-border); margin-top: 28px; }
.ind-rel__link { background: var(--ind-mid); padding: 20px 18px; text-decoration: none; display: flex; flex-direction: column; gap: 5px; transition: background .18s; }
.ind-rel__link:hover { background: #2a3660; }
.ind-rel__link strong { color: var(--ind-white); font-size: .9rem; }
.ind-rel__link span   { color: var(--ind-muted); font-size: .78rem; }

/* ── Buttons ── */
.ind-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-family: inherit; font-size: .9rem; font-weight: 700; border-radius: 2px; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background .18s, color .18s, border-color .18s, transform .18s; }
.ind-btn--primary { background: var(--ind-orange); color: var(--ind-white); border-color: var(--ind-orange); }
.ind-btn--primary:hover { background: var(--ind-orange-dk); border-color: var(--ind-orange-dk); transform: translateY(-1px); }
.ind-btn--outline { background: transparent; color: var(--ind-white); border-color: rgba(255,255,255,.4); }
.ind-btn--outline:hover { border-color: var(--ind-white); transform: translateY(-1px); }
.ind-btn--full { width: 100%; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ind-sys__grid    { grid-template-columns: repeat(2,1fr); }
  .ind-prod__grid   { grid-template-columns: repeat(2,1fr); }
  .ind-rel__grid    { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .ind-hero { grid-template-columns: 1fr; min-height: auto; }
  .ind-hero__img-side { height: 240px; order: -1; }
  .ind-hero__body { padding: 40px var(--ind-pad-x); }
  .ind-hero h1 { max-width: 100%; }
  .ind-chal__grid { grid-template-columns: 1fr; }
  .ind-pts__lay { grid-template-columns: 1fr; }
  .ind-pts__img-wrap { order: -1; }
  .ind-sys__grid { grid-template-columns: 1fr; }
  .ind-ben__in { grid-template-columns: 1fr; }
  .ind-ben__left { padding: 48px var(--ind-pad-x); }
  .ind-cta .ind-s__in { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .ind-prod__grid { grid-template-columns: 1fr; }
  .ind-hero__stats { gap: 20px; }
  .ind-rel__grid { grid-template-columns: 1fr 1fr; }
}