/* =========================================================
   BRERO – Seite «Konfektion und Textilbekleidung»
   Baut auf outdoor.css, mobilitaet.css, marine.css und verpackung.css auf (Präfix ko-)
   ========================================================= */
.ko-hero .vh-hero-media img { object-position: 55% center; }
.ko-systems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ko-sys { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ko-sys-img { height: 260px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px; background: #fff; border-bottom: 1px solid var(--line); }
.ko-sys-img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ko-sys-img.ko-duo img { max-width: 50%; }
.ko-sys-body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 24px; }
.ko-sys-body .vp-art { align-self: flex-start; margin-bottom: 10px; }
.ko-sys h3 { font-size: 1.25rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.ko-sys p { font-size: .9375rem; line-height: 1.55; color: var(--text); margin-bottom: 16px; }
.ko-sys .od-label { margin-top: auto; }
.ma-sets .vp-kits.ko-kits { grid-template-columns: repeat(3, 1fr); }
.vh-prods.ko-prods { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .ko-systems { grid-template-columns: 1fr; } .ko-sys { flex-direction: row; } .ko-sys-img { flex: 0 0 40%; height: auto; min-height: 240px; border-bottom: 0; border-right: 1px solid var(--line); } .vh-prods.ko-prods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ko-sys { flex-direction: column; } .ko-sys-img { flex: none; height: 220px; border-right: 0; border-bottom: 1px solid var(--line); } .ma-sets .vp-kits.ko-kits, .vh-prods.ko-prods { grid-template-columns: 1fr; } }
.mo-case.ko-r1 .mo-case-img { aspect-ratio: 1414 / 1112; }

/* Im Einsatz: grosses Foto + Produkt und Text daneben, abwechselnd */
.ko-rows { display: grid; gap: 28px; margin-bottom: 28px; }
.ko-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-height: 460px; }
.ko-row.rev .ko-row-photo { order: 2; }
.ko-row-photo { position: relative; background: #fff; }
.ko-row-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ko-row-side { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.ko-row.rev .ko-row-side { border-left: 0; border-right: 1px solid var(--line); }
.ko-row-prod { height: 190px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.ko-row-prod img { max-height: 100%; max-width: 48%; object-fit: contain; mix-blend-mode: multiply; }
.ko-row-prod img:only-child { max-width: 70%; }
.ko-row-body { padding: 24px 28px 28px; }
.ko-row-body h3 { font-size: 1.375rem; font-weight: 700; color: var(--navy); margin: 2px 0 8px; display: inline; margin-right: 10px; }
.ko-row-body .vp-art { display: inline-block; vertical-align: 3px; }
.ko-row-body p { font-size: .9375rem; line-height: 1.6; color: var(--text); margin: 12px 0 16px; }
.ko-serie .mo-case-img { aspect-ratio: 3 / 2; }
@media (max-width: 900px) {
  .ko-row, .ko-row.rev { grid-template-columns: 1fr; min-height: 0; }
  .ko-row.rev .ko-row-photo { order: 0; }
  .ko-row-photo { aspect-ratio: 4 / 3; }
  .ko-row-side, .ko-row.rev .ko-row-side { border: 0; border-top: 1px solid var(--line); }
  .ko-row-prod { height: 150px; }
}
.ko-row-body .od-eyebrow { display: block; margin-bottom: 6px; }
.ko-row-body .vp-art { display: inline-block; margin-bottom: 8px; vertical-align: 0; }
.ko-row-body h3 { display: block; margin: 0 0 4px; }
.ko-row-body p { margin: 8px 0 16px; }
.ko-row-photo.ko-contain img { object-fit: contain; padding: 20px; }

/* Im Einsatz: Karten mit Foto + Produkt nebeneinander, darunter Aufzählung */
.ko-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.ko-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ko-card-media { display: grid; grid-template-columns: 1.55fr 1fr; height: 340px; border-bottom: 1px solid var(--line); }
.ko-card-photo { position: relative; background: #fff; }
.ko-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ko-card-photo.ko-contain img { object-fit: contain; padding: 14px; }
.ko-card-prod { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; background: var(--bg-soft); border-left: 1px solid var(--line); }
.ko-card-prod img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; }
.ko-card-prod img + img { max-height: 46%; }
.ko-card-prod img:first-child:not(:only-child) { max-height: 46%; }
.ko-card-body { padding: 22px 26px 26px; }
.ko-card-body .od-eyebrow { display: block; margin-bottom: 6px; }
.ko-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ko-card-title h3 { font-size: 1.3125rem; font-weight: 700; color: var(--navy); }
.ko-card .vh-checks li { font-size: .9375rem; }
@media (max-width: 900px) { .ko-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ko-card-media { height: 260px; } }

/* Produkt als runde Einblendung über dem Foto */
.ko-card-media { position: relative; display: block; height: auto; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); overflow: visible; }
.ko-card-photo { position: absolute; inset: 0; overflow: hidden; }
.ko-card-prod { position: absolute; right: 22px; bottom: -48px; z-index: 2; width: 150px; height: 150px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(11, 45, 75,.16); padding: 22px; flex-direction: row; gap: 4px; }
.ko-card-prod img { max-height: 100%; max-width: 100%; }
.ko-card-prod img:first-child:not(:only-child), .ko-card-prod img + img { max-width: 50%; max-height: 80%; }
.ko-card-body { padding-right: 190px; min-height: 120px; }
.ko-card-body .vh-checks { margin-right: -164px; }
.ko-card { overflow: hidden; }
.ko-card-title { padding-right: 0; }
@media (max-width: 520px) { .ko-card-prod { width: 110px; height: 110px; padding: 16px; bottom: -36px; right: 14px; } .ko-card-body { padding-right: 140px; } .ko-card-body .vh-checks { margin-right: -120px; } }
.ko-card-prod { width: 180px; height: 180px; bottom: -60px; padding: 30px; }
.ko-card-prod img:first-child:not(:only-child), .ko-card-prod img + img { max-width: 48%; max-height: 90%; }
.ko-card-body { padding-right: 220px; }
.ko-card-body .vh-checks { margin-right: -194px; margin-top: 4px; }
/* Empfohlene Produkte: eine Reihe wie auf den übrigen Seiten */
.vh-prods.ko-prods { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ko-prods .vh-prod { padding: 16px 16px 18px; }
@media (max-width: 1200px) { .vh-prods.ko-prods { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .vh-prods.ko-prods { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .vh-prods.ko-prods { grid-template-columns: 1fr; } }
.vh-prods.ko-prods { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.vh-prod-img.ko-pair { gap: 10px; }
.vh-prod-img.ko-pair img { max-width: 46%; }

/* Lifestyle: grosses Foto, Produkt im Kreis auf der Naht, Text daneben */
.ko-life { display: grid; gap: 56px; margin-bottom: 48px; }
.ko-life-item { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 0 96px; }
.ko-life-item.rev { grid-template-columns: 1fr 1.15fr; }
.ko-life-item.rev .ko-life-photo { order: 2; }
.ko-life-photo { position: relative; height: 520px; border-radius: 14px; overflow: hidden; background: var(--bg-soft); }
.ko-life-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ko-life-photo.ko-contain img { object-fit: contain; padding: 24px; mix-blend-mode: multiply; }
.ko-life-prod { position: absolute; top: 50%; left: calc(53.5% - 3px); transform: translate(-50%, -50%); z-index: 2; width: 190px; height: 190px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(11, 45, 75,.16); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 30px; }
.ko-life-item.rev .ko-life-prod { left: calc(46.5% + 3px); }
.ko-life-prod img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ko-life-prod img:first-child:not(:only-child), .ko-life-prod img + img { max-width: 48%; }
.ko-life-text { padding: 10px 0; }
.ko-life-item:not(.rev) .ko-life-text { padding-left: 24px; }
.ko-life-item.rev .ko-life-text { padding-right: 24px; }
.ko-life-no { display: block; font-size: 2.75rem; font-weight: 800; line-height: 1; color: #e1ecf3; letter-spacing: -0.03em; margin-bottom: 10px; }
.ko-life-text .od-eyebrow { display: block; margin-bottom: 6px; }
.ko-life-text h3 { font-size: 1.625rem; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.ko-life-lead { font-size: 1.0625rem; line-height: 1.5; color: var(--text); margin: 0 0 16px; }
.ko-life-text .vh-checks li { font-size: .9375rem; padding: 4px 0; }
@media (max-width: 1000px) {
  .ko-life-item, .ko-life-item.rev { grid-template-columns: 1fr; gap: 0; }
  .ko-life-item.rev .ko-life-photo { order: 0; }
  .ko-life-photo { height: 420px; }
  .ko-life-prod, .ko-life-item.rev .ko-life-prod { position: relative; top: auto; left: auto; transform: none; margin: -80px 0 0 24px; width: 150px; height: 150px; padding: 24px; }
  .ko-life-item:not(.rev) .ko-life-text, .ko-life-item.rev .ko-life-text { padding: 12px 4px 0; }
}
@media (max-width: 520px) { .ko-life-photo { height: 320px; } }
@media (min-width: 1001px) {
  .ko-life-item, .ko-life-item.rev { column-gap: 120px; }
  .ko-life-prod { left: calc((100% - 120px) * 0.5349); }
  .ko-life-item.rev .ko-life-prod { left: calc((100% - 120px) * 0.4651 + 120px); }
  .ko-life-item:not(.rev) .ko-life-text { padding-left: 0; }
  .ko-life-item.rev .ko-life-text { padding-right: 0; }
}
.ko-life-lead { font-size: .9375rem; line-height: 1.55; color: var(--text); margin: 4px 0 16px; padding: 10px 14px; background: var(--bg-soft); border-left: 3px solid var(--blue); border-radius: 0 6px 6px 0; }
.ko-life-pic { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 2px; }
.ko-life-text .vh-checks li { font-size: .875rem; padding: 3px 0; }
.ko-life-photo { height: 560px; }
/* Mobile: Produktkarten untereinander statt 3 Spalten (kein seitliches Verschieben) */
.vh-prods.ko-prods > * { min-width: 0; }
@media (max-width: 900px) { .vh-prods.ko-prods { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vh-prods.ko-prods { grid-template-columns: 1fr; } }