/* =========================================================
   BRERO – Seite «Industrie & Produktion»
   Baut auf vorhang.css, outdoor.css, mobilitaet.css, marine.css, sattlerei.css und konfektion.css auf (Präfix in-)
   ========================================================= */
.in-hero .vh-hero-media img { object-position: 45% center; }
.ko-life-prod img { max-width: 100%; }
/* Skala Einzelstück → Grossserie */
.in-scale { display: flex; align-items: center; gap: 12px; margin: -8px 0 24px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.in-scale i { flex: 1; height: 2px; background: linear-gradient(90deg, #cde2f1, var(--blue)); position: relative; }
.in-scale i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--blue); }
.vh-machines.in-machines { grid-template-columns: repeat(4, 1fr); }
/* Fünf Schritte */
.in-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: s; position: relative; }
.in-steps::before { content: ""; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; background: var(--line); }
.in-steps li { position: relative; text-align: center; padding: 0 14px; }
.in-step-no { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 1.25rem; font-weight: 800; margin-bottom: 16px; box-shadow: 0 0 0 6px #fff; }
.in-steps strong { display: block; font-size: 1.0625rem; color: var(--navy); margin-bottom: 6px; }
.in-steps span:last-child { display: block; font-size: .875rem; line-height: 1.5; color: var(--text); }
@media (max-width: 1100px) { .vh-machines.in-machines { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .in-steps { grid-template-columns: 1fr; gap: 18px; }
  .in-steps::before { top: 0; bottom: 0; left: 27px; right: auto; width: 2px; height: auto; }
  .in-steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: left; padding: 0; }
  .in-step-no { grid-row: span 2; margin: 0; }
  .in-scale { font-size: .625rem; gap: 6px; }
}
@media (max-width: 600px) { .vh-machines.in-machines { grid-template-columns: 1fr; } }
.vh-prods.in-prods { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .vh-prods.in-prods { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .vh-prods.in-prods { grid-template-columns: 1fr; } }
.in-steps { list-style: none; padding: 0; }
@media (min-width: 1101px) {
  .vh-machines.in-machines { display: flex; flex-wrap: wrap; justify-content: center; }
  .vh-machines.in-machines .vh-machine { flex: 0 0 calc((100% - 48px) / 4); }
}

/* Anforderungen: Intro links, Kacheln rechts */
.in-req-grid { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 56px; align-items: center; }
.in-req-intro h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.15; margin-bottom: 16px; }
.in-req-intro p { font-size: 1.0625rem; line-height: 1.6; color: var(--text); margin-bottom: 26px; }
.in-req-intro .btn { border-radius: 4px; }
.in-req-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.in-req-list li { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; background: var(--bg-soft); border-radius: 12px; }
.in-req-list .icon { width: 30px; height: 30px; color: var(--blue); stroke-width: 1.7; margin-bottom: 8px; }
.in-req-list strong { font-size: 1.0625rem; color: var(--navy); line-height: 1.3; }
.in-req-list span { font-size: .875rem; line-height: 1.5; color: var(--text); }
.in-req-list li.big { grid-row: span 2; background: var(--blue); justify-content: flex-end; }
.in-req-list li.big .icon { width: 44px; height: 44px; color: #fff; margin-bottom: auto; }
.in-req-list li.big strong { font-size: 1.5rem; color: #fff; }
.in-req-list li.big span { color: rgba(255, 255, 255,.85); }
.in-req-list li.wide { grid-column: span 2; background: var(--navy); }
.in-req-list li.wide .icon { color: #8fd2ff; }
.in-req-list li.wide strong { color: #fff; }
.in-req-list li.wide span { color: rgba(255, 255, 255,.8); }

/* Im Einsatz: dunkles Band mit drei hohen Karten */
.in-dark { background: var(--navy); }
.in-dark .vh-head h2 { color: #fff; }
.in-dark .vh-head p { color: rgba(255, 255, 255,.75); }
.in-dark .od-eyebrow { color: #8fd2ff; }
.in-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.in-case { position: relative; display: flex; flex-direction: column; background: #133a5e; border-radius: 14px; overflow: hidden; }
.in-case-photo { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.in-case-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.in-case-no { position: absolute; top: 14px; left: 16px; font-size: 2.25rem; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0,.35); letter-spacing: -0.03em; }
.in-case-prod { position: relative; z-index: 2; width: 112px; height: 112px; margin: -56px 20px 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0,.3); display: flex; align-items: center; justify-content: center; padding: 18px; }
.in-case-prod img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.in-case-body { padding: 0 24px 26px; margin-top: -36px; }
.in-case-eb { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fd2ff; margin-bottom: 6px; max-width: 60%; }
.in-case h3 { font-size: 1.25rem; font-weight: 700; color: #fff; line-height: 1.25; margin: 14px 0 10px; }
.in-case p { font-size: .875rem; line-height: 1.55; color: rgba(255, 255, 255,.78); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255,.12); }
.in-case ul li { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.45; color: #fff; padding: 4px 0; }
.in-case ul .icon { width: 17px; height: 17px; flex: none; margin-top: 1px; color: #8fd2ff; stroke: none; }
@media (max-width: 1100px) { .in-req-grid { grid-template-columns: 1fr; gap: 32px; } .in-cases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .in-cases { grid-template-columns: 1fr; } .in-req-list { grid-template-columns: 1fr 1fr; } .in-req-list li.big { grid-row: auto; grid-column: span 2; } }
@media (max-width: 480px) { .in-req-list { grid-template-columns: 1fr; } .in-req-list li.big, .in-req-list li.wide { grid-column: auto; } }
@media (min-width: 761px) { .in-req-list li.wide { grid-column: auto; } }
@media (min-width: 1101px) { .vh-machines.in-machines .vh-machine { flex: 0 0 calc((100% - 32px) / 3); } .in-machines .vh-machine-img { height: 300px; } }
/* Helles BRERO-Blau statt Dunkelblau */
.in-dark { background: var(--blue); }
.in-dark .vh-head p { color: rgba(255, 255, 255,.85); }
.in-dark .od-eyebrow, .in-case-eb, .in-case ul .icon { color: #d4edfa; }
.in-case { background: rgba(255, 255, 255,.12); }
.in-case p { color: rgba(255, 255, 255,.88); border-bottom-color: rgba(255, 255, 255,.2); }
.in-case ul .icon { color: #0b2d4b; }
/* Helles Hintergrundblau, weisse Karten */
.in-dark { background: var(--bg-soft); }
.in-dark .vh-head h2 { color: var(--navy); }
.in-dark .vh-head p { color: var(--text); }
.in-dark .od-eyebrow, .in-case-eb { color: var(--blue); }
.in-case { background: #fff; border: 1px solid var(--line); }
.in-case h3 { color: var(--navy); }
.in-case p { color: var(--text); border-bottom-color: var(--line); }
.in-case ul li { color: var(--navy); }
.in-case ul .icon { color: var(--blue); }
.in-case-prod { box-shadow: 0 10px 28px rgba(11, 45, 75,.18); border: 1px solid var(--line); }
.in-case-body { flex: 1; display: flex; flex-direction: column; }
.in-case-body > .in-case-link { margin-top: auto; align-self: flex-start; }
.in-case-body > ul { margin-bottom: 20px; }