/* BRERO – Unterseite «Individuelle Lösungen bei Druckknöpfen» (Präfix ild-) – baut auf individuelle-loesungen.css auf */
.ild-hero .il-hero-media { width: 58%; }
.ild-hero .il-hero-media img { object-position: 78% center; }
.ild-hero .il-hero-media::after { background: linear-gradient(90deg, var(--bg-soft) 0%, rgba(245, 249, 251,.85) 8%, rgba(245, 249, 251,0) 30%); }
.ild-hero h1 { white-space: normal !important; }
.ild-hero .il-hero-inner { max-width: 540px; }
.ild-hero .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.ild-soft { background: var(--bg-soft); }
.ild-eyebrow { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.ild-eyebrow.light { color: rgba(255, 255, 255,.8); }
.il-prods-sub { margin-top: 6px; font-size: 1rem; color: var(--text); }

/* Sprungmenü */
.ild-nav-sec { padding-bottom: 40px !important; }
.ild-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ild-nav-item { display: grid; grid-template-columns: 64px 1fr 20px; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; background: #fff; border: 1.5px solid #e1ecf3; border-radius: 10px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ild-nav-item:hover { border-color: var(--blue); box-shadow: 0 12px 28px rgba(0, 110, 206,.12); transform: translateY(-2px); }
.ild-nav-img { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--line); display: block; }
.ild-nav-img img { width: 100%; height: 100%; object-fit: cover; }
.ild-nav-rgb { background: conic-gradient(#e53935, #fdd835, #43a047, #16a1bd, #8e24aa, #e53935); border: 0; }
.ild-nav-txt strong { display: block; font-size: .9375rem; line-height: 1.25; color: #1a4480; }
.ild-nav-txt span { display: block; font-size: .75rem; line-height: 1.3; margin-top: 2px; color: var(--text); }
.ild-nav-item > .icon { width: 20px; height: 20px; color: var(--blue); transition: transform .2s; }
.ild-nav-item:hover > .icon { transform: translateX(4px); }
#standardfarben, #fashion, #reflex, #sonderfarben { scroll-margin-top: 100px; }

/* Farbkarten */
.il-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.il-color { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: box-shadow .25s, transform .25s; }
.il-color:hover { box-shadow: 0 14px 34px rgba(15, 31, 42,.10); transform: translateY(-2px); }
.il-color img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; padding: 10px; background: #fff; }
.il-color span { padding: 12px 16px; border-top: 1px solid var(--line); font-size: .875rem; font-weight: 600; color: var(--navy); }

/* Bildbänder */
.ild-banner { padding: 40px 0; }
.ild-banner-fig { position: relative; margin: 0; border-radius: 14px; overflow: hidden; }
.ild-banner-fig img { width: 100%; aspect-ratio: 2.7 / 1; object-fit: cover; display: block; }
.ild-banner-fig figcaption { position: absolute; right: 28px; bottom: 28px; max-width: 380px; background: #fff; border-radius: 12px; padding: 20px 22px; box-shadow: 0 16px 40px rgba(0, 0, 0,.25); }
.ild-banner-fig h3 { font-size: 1.25rem; color: #1a4480; margin-bottom: 6px; }
.ild-banner-fig p { font-size: .875rem; color: var(--text); }

/* Zweispaltig */
.ild-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ild-two.rev > :first-child { order: 0; }
.ild-fashion-img img { aspect-ratio: auto; max-height: 480px; }
.ild-text h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.02em; color: #1a4480; margin-bottom: 12px; }
.ild-text > p { color: var(--text); margin-bottom: 16px; }
.ild-lead { font-size: 1.125rem; font-weight: 600; color: var(--navy) !important; }
.ild-checks { margin-bottom: 22px; }
.ild-specs { list-style: none; padding: 0; margin: 4px 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ild-specs li { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.ild-specs span { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8aa1b8; margin-bottom: 4px; }
.ild-specs strong { font-size: .9375rem; color: #1a4480; line-height: 1.3; }
.ild-note { font-size: .8125rem !important; color: #6b89a8 !important; }
.ild-reflex-img { position: relative; background: #fff; border-radius: 14px; border: 1px solid var(--line); padding: 30px; }
.ild-reflex-img img { width: 100%; display: block; }
.ild-new { position: absolute; top: 18px; left: 18px; padding: 5px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* Sonderfarben CTA */
.ild-cta { position: relative; overflow: hidden; border-radius: 12px; padding: 32px 30px; color: #fff; background: linear-gradient(150deg, #008af3 0%, var(--blue) 55%, #084f92 100%); }
.ild-cta::after { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: conic-gradient(#ff5a5a, #ffd23f, #3ccf6e, #0fd9ff, #b25cff, #ff5a5a); opacity: .22; }
.ild-cta h2 { color: #fff; font-size: 1.625rem; margin-bottom: 12px; position: relative; }
.ild-cta p { color: rgba(255, 255, 255,.9); margin-bottom: 16px; position: relative; }
.ild-cta-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.ild-cta-list li { position: relative; padding-left: 20px; font-size: .9375rem; }
.ild-cta-list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #fff; }
.ild-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ild-btn-white { background: #fff; color: var(--blue); }
.ild-btn-ghost { border: 1.5px solid rgba(255, 255, 255,.7); color: #fff; }
.ild-btn-ghost:hover { background: rgba(255, 255, 255,.12); }

@media (max-width: 1100px) { .ild-nav { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .ild-two { grid-template-columns: 1fr; gap: 28px; }
  .il-color-grid { grid-template-columns: 1fr 1fr; }
  .ild-banner-fig img { aspect-ratio: 16 / 9; object-position: left center; }
  .ild-banner-fig figcaption { position: static; max-width: none; border-radius: 0; box-shadow: none; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; }
}
@media (max-width: 560px) { .ild-nav, .il-color-grid { grid-template-columns: 1fr; } .ild-specs { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .ild-hero .il-hero-media { width: 100% !important; height: 240px; }
  .ild-hero .il-hero-media img { object-position: 70% center; }
  .ild-hero .il-hero-media::after { background: linear-gradient(180deg, var(--bg-soft) 0%, rgba(245, 249, 251,0) 22%); }
}

/* Outdoor & Uniform */
.ild-nav { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ild-nav-item { grid-template-columns: 56px 1fr 18px; gap: 12px; }
.ild-nav-img { width: 56px; height: 56px; }
.ild-nav-uf img { object-fit: contain; }
#uniform { scroll-margin-top: 100px; }
.ild-uf { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 28px 20px; }
.ild-uf-row { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ild-uf-row:last-of-type { border-bottom: 0; }
.ild-uf-head h3 { font-size: 1.125rem; color: #1a4480; margin-bottom: 4px; }
.ild-uf-head span { font-size: .8125rem; color: var(--text); }
.ild-uf-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.ild-uf-list li { text-align: center; }
.ild-uf-list img { width: 100%; max-width: 92px; aspect-ratio: 1; display: block; margin: 0 auto 8px; transition: transform .2s; }
.ild-uf-list li:hover img { transform: scale(1.08); }
.ild-uf-list strong { display: block; font-size: .8125rem; color: #1a4480; line-height: 1.2; }
.ild-uf-list span { display: block; font-size: .6875rem; color: #6b89a8; margin-top: 2px; }
@media (max-width: 1200px) { .ild-nav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .ild-uf-row { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 700px) { .ild-uf { padding: 4px 16px 14px; } .ild-uf-list { grid-template-columns: repeat(4, 1fr); row-gap: 16px; } .ild-nav { grid-template-columns: 1fr; } }
.ild-intro { max-width: 900px; margin-top: 10px; }
.ild-intro p { font-size: 1rem; line-height: 1.6; color: var(--text); margin-bottom: 10px; }
.ild-nav-sec .section-head { margin-bottom: 22px; }

/* Elegant – Kunststoffkappen + Perlmutt */
.ild-nav { grid-template-columns: repeat(3, 1fr); }
#elegant, #perlmutt { scroll-margin-top: 100px; }
.ild-el-head { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center; margin-bottom: 24px; }
.ild-el-head h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.02em; color: #1a4480; }
.ild-el-head .il-prods-sub strong { color: var(--navy); }
.ild-el-badge { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; background: #fff; border: 2px solid var(--blue); border-radius: 12px; padding: 12px 16px 12px 12px; }
.ild-el-badge img { width: 110px; height: 110px; object-fit: contain; }
.ild-el-badge span { font-size: 1.125rem; font-weight: 700; color: #1a4480; line-height: 1.25; }
.ild-el-badge strong { display: block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.ild-el-list { grid-template-columns: repeat(7, 1fr); row-gap: 18px; }
.ild-el-list img { max-width: 78px; }
.ild-perl-img img { aspect-ratio: auto; padding: 20px; }
.ild-perl-list { list-style: none; padding: 0; margin: 4px 0 24px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.ild-perl-list li { text-align: center; }
.ild-perl-list img { width: 100%; max-width: 64px; aspect-ratio: 1; display: block; margin: 0 auto 6px; transition: transform .2s; }
.ild-perl-list li:hover img { transform: scale(1.1); }
.ild-perl-list span { font-size: .75rem; font-weight: 700; color: #1a4480; }
@media (max-width: 1000px) { .ild-el-head { grid-template-columns: 1fr; gap: 18px; } .ild-el-badge { max-width: 340px; } }
@media (max-width: 700px) { .ild-el-list { grid-template-columns: repeat(4, 1fr); } .ild-perl-list { grid-template-columns: repeat(4, 1fr); } .ild-nav { grid-template-columns: 1fr; } }

/* «Passend zu» – Druckknopf-Linien */
.ild-head-fits { display: grid !important; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.ild-fits { display: flex; flex-direction: column; gap: 8px; }
.ild-fits-label { font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.ild-fits-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ild-fit { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--blue); border-radius: 10px; padding: 6px 14px 6px 6px; }
.ild-fit img { width: 64px; height: 64px; object-fit: contain; }
.ild-fit span { font-size: .75rem; color: var(--text); line-height: 1.2; }
.ild-fit strong { display: block; font-size: 1rem; color: #1a4480; }
.ild-text .ild-fits, .ild-reflex-fits { margin: 4px 0 22px; }
.ild-el-head { grid-template-columns: 1fr auto; }
.ild-hero .il-hero-inner p { font-size: .9375rem; }
@media (max-width: 1100px) { .ild-head-fits { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 560px) { .ild-fit img { width: 48px; height: 48px; } .ild-fit { padding-right: 10px; } }

/* Bedruckt */
#bedruckt { scroll-margin-top: 100px; }
.ild-print { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.ild-print img { width: 100%; display: block; }
.ild-print-checks { flex-direction: row !important; flex-wrap: wrap; gap: 10px 32px !important; margin-top: 20px; }
.ild-reflex-img { background: #fff; }

/* Unterabschnitte (Zierkappen, lackierte Zackenringe) */
.ild-sub { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }
.ild-sub-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: 20px; }
.ild-sub-head h3 { font-size: clamp(1.25rem, 1.8vw, 1.625rem); color: #1a4480; margin-bottom: 8px; letter-spacing: -0.01em; }
.ild-sub-head p { color: var(--text); max-width: 760px; }
@media (max-width: 1100px) { .ild-sub-head { grid-template-columns: 1fr; gap: 16px; } }

/* Veredelung: 3 kompakte Karten */
.ild-decos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ild-deco { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: box-shadow .25s, transform .25s; }
.ild-deco:hover { box-shadow: 0 14px 34px rgba(15, 31, 42,.10); transform: translateY(-2px); }
.ild-deco-img { display: block; aspect-ratio: 16 / 9; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.ild-deco-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .4s; }
.ild-deco:hover .ild-deco-img img { transform: scale(1.04); }
.ild-deco-body { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 18px; }
.ild-deco-body h3 { font-size: 1.125rem; color: #1a4480; margin-bottom: 6px; }
.ild-deco-body p { font-size: .875rem; line-height: 1.5; color: var(--text); margin-bottom: 14px; }
.ild-chips { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.ild-chips > span { font-size: .625rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-right: 4px; }
.ild-chips em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1.5px solid var(--blue); border-radius: 999px; font-size: .8125rem; font-weight: 700; color: #1a4480; background: #fff; }
.ild-chips em img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; background: #fff; }
@media (max-width: 1000px) { .ild-decos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ild-decos { grid-template-columns: 1fr; } }
#kunststoff .ild-reflex-img { display: flex; align-items: center; justify-content: center; } #kunststoff .ild-reflex-img img { max-width: 360px; }
.ild-vintage { display: block; } .ild-decos:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
.ild-vintage img { max-width: 860px; margin: 0 auto; }

/* Vorteile-Leiste im Hero sauber unter dem Bild */
.ild-hero .il-strengths { position: relative; z-index: 2; border-top: 1px solid var(--line); }
.ild-hero .il-strengths::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: var(--bg-soft); z-index: -1; }
.ild-hero .il-strengths .strength span { max-width: none; white-space: nowrap; }
@media (max-width: 860px) { .ild-hero .il-strengths .strength span { white-space: normal; } }
.ild-oe-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ild-oe-two .il-color img { aspect-ratio: auto; }
#farben, #logo, #outdoor, #moeglichkeiten { scroll-margin-top: 100px; }
@media (max-width: 800px) { .ild-oe-two { grid-template-columns: 1fr; } }
#logo .il-color img { aspect-ratio: auto; } #logo .ild-two { align-items: center; }
.ild-oe-sub { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 12px; }
.ild-oe-sub h3 { font-size: 1.25rem; color: #1a4480; }
.ild-oe-sub span { font-size: .875rem; color: var(--text); }
.ild-oe-big { display: block; margin-bottom: 32px; }
.ild-oe-big img { max-width: 980px; margin: 0 auto; }
.ild-oe-ban { margin: 8px 0 40px; }
#outdoor .ild-vintage img { max-width: 760px; }
#standardfarben .ild-oe-big img { max-width: 720px; }
#strass .ild-two { align-items: start; }
.ild-stein-h { margin: 6px 0 10px; } .ild-stein-h h3 { font-size: 1.0625rem; }
.ild-stein { display: block; padding: 12px; }
/* Grosse Varianten-Karten (Bild links, Text rechts) */
.ild-decos-lg { grid-template-columns: 1fr !important; gap: 24px; }
.ild-decos-lg .ild-deco { flex-direction: row; align-items: stretch; }
.ild-decos-lg .ild-deco-img { flex: 0 0 66%; aspect-ratio: 3 / 2; border-bottom: 0; border-right: 1px solid var(--line); }
.ild-decos-lg .ild-deco-img img { padding: 18px; }
.ild-decos-lg .ild-deco-body { justify-content: center; padding: 28px 32px; }
.ild-decos-lg .ild-deco-body h3 { font-size: 1.5rem; margin-bottom: 10px; }
.ild-decos-lg .ild-deco-body p { font-size: 1rem; }
.ild-decos-lg .ild-deco:nth-child(even) { flex-direction: row-reverse; }
.ild-decos-lg .ild-deco:nth-child(even) .ild-deco-img { border-right: 0; border-left: 1px solid var(--line); }
@media (max-width: 860px) { .ild-decos-lg .ild-deco, .ild-decos-lg .ild-deco:nth-child(even) { flex-direction: column; } .ild-decos-lg .ild-deco-img { flex: none; border: 0; border-bottom: 1px solid var(--line) !important; } }
.ild-in-sec { margin: 36px 0 0; }
.ild-mag-img { display: flex; align-items: center; justify-content: center; padding: 56px 30px 30px; }
.ild-mag-img .ild-new { letter-spacing: .1em; }
#magnet { scroll-margin-top: 100px; }
/* Lackierte Zackenringe: Einzelfarben mit Hover wie Kunststoffkappen */
.ild-zr-list { grid-template-columns: repeat(9, 1fr); row-gap: 18px; margin-top: 18px; }
.ild-zr-list img { max-width: 80px; border-radius: 50%; }
.ild-zr-list li:hover img { transform: scale(1.12); }
@media (max-width: 1000px) { .ild-zr-list { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 700px) { .ild-zr-list { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 420px) { .ild-fits-row { flex-wrap: wrap; } }
@media (max-width: 600px) { .ild-el-head { grid-template-columns: 1fr !important; } .ild-el-head > * { min-width: 0; } }
/* Ösen-Farbkarten als Einzelmuster mit Hover */
.ild-oe-list { grid-template-columns: repeat(8, 1fr); row-gap: 18px; margin-top: 16px; }
.ild-oe-list img { max-width: 88px; border-radius: 50%; }
.ild-oe-list li:hover img { transform: scale(1.12); }
@media (max-width: 1000px) { .ild-oe-list { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 700px) { .ild-oe-list { grid-template-columns: repeat(4, 1fr); } }
.ild-oe-list img, .ild-zr-list img { mix-blend-mode: multiply; }
/* Ösen & Scheiben Outdoor: Grössen, Galvanik, Lack matt/glänzend */
.ild-od { margin-top: 8px; }
.ild-od-row { align-items: start; }
.ild-od-sizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 14px; }
.ild-od-sizes li { text-align: center; }
.ild-od-sizes img { width: 100%; max-width: 120px; aspect-ratio: 1; display: block; margin: 0 auto 6px; mix-blend-mode: multiply; transition: transform .2s; }
.ild-od-sizes li:hover img { transform: scale(1.08); }
.ild-od-sizes strong { display: block; font-size: .9375rem; color: #1a4480; }
.ild-od-art { display: block; font-size: .6875rem; color: #6b8091; margin-top: 2px; }
.ild-od-dim { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: #f1f6fb; font-size: .6875rem; font-weight: 600; color: var(--navy); }
.ild-od-gal { grid-template-columns: repeat(6, 1fr) !important; }
.ild-od-gal strong { font-size: .75rem !important; line-height: 1.25; }
.ild-od-lac { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 70px repeat(8, 1fr); gap: 8px 10px; align-items: center; }
.ild-od-lac li { text-align: center; }
.ild-od-lac img { width: 100%; max-width: 74px; aspect-ratio: 1; display: block; margin: 0 auto; mix-blend-mode: multiply; transition: transform .2s; }
.ild-od-lac li:hover img { transform: scale(1.12); }
.ild-od-col strong { display: block; font-size: .75rem; color: #1a4480; line-height: 1.2; }
.ild-od-col span { display: block; font-size: .625rem; color: #6b8091; min-height: 1em; }
.ild-od-lab { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b8091; text-align: left !important; }
@media (max-width: 1000px) { .ild-od-gal { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 700px) { .ild-od-sizes { grid-template-columns: repeat(2, 1fr); } .ild-od-lac { grid-template-columns: 48px repeat(4, 1fr); } .ild-od-lac .ild-od-col:nth-child(n+6), .ild-od-lac li:nth-child(n+15):nth-child(-n+18), .ild-od-lac li:nth-child(n+24) { } }
@media (max-width: 700px) { .ild-od-lac { grid-template-columns: 58px repeat(8, 64px) !important; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; } .ild-od-lac .ild-od-lab { position: sticky; left: 0; background: #fff; z-index: 1; } }
/* Ösen-/Nieten-Farbmuster grösser */
.ild-oe-list { grid-template-columns: repeat(6, 1fr) !important; row-gap: 22px !important; }
.ild-oe-list img { max-width: 132px !important; }
.ild-oe-list strong { font-size: .9375rem !important; }
.ild-oe-list span { font-size: .75rem !important; }
@media (max-width: 1000px) { .ild-oe-list { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 700px) { .ild-oe-list { grid-template-columns: repeat(3, 1fr) !important; } .ild-oe-list img { max-width: 96px !important; } }
/* Farbkarte Druckknopf-/Jeansknopf-Kappen: Einzelfarben mit Hover, weiss */
.ild-fk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ild-fk-grp { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 20px; }
.ild-fk-grp h3 { font-size: .875rem !important; font-weight: 700; color: #1a4480; margin: 0 0 14px; }
.ild-fk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 12px 8px; }
.ild-fk-list li { text-align: center; }
.ild-fk-list img { width: 100%; max-width: 64px; aspect-ratio: 1; display: block; margin: 0 auto 4px; mix-blend-mode: multiply; transition: transform .2s; }
.ild-fk-list li:hover img { transform: scale(1.18); }
.ild-fk-list strong { display: block; font-size: .75rem; color: #1a4480; }
@media (max-width: 1000px) { .ild-fk { grid-template-columns: 1fr; } }
/* Ösen/Nieten-Farbmuster auf weissem Hintergrund, grösser */
.ild-oe-list { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 18px; }
.ild-oe-list img { max-width: 150px !important; }
/* Ösen/Nieten-Farbmuster: Karte höher, Farben grösser */
.ild-oe-list { padding: 36px 24px 32px !important; row-gap: 36px !important; }
.ild-oe-list img { max-width: 176px !important; margin-bottom: 10px; }
.ild-oe-list strong { font-size: 1rem !important; }
.ild-oe-list span { font-size: .8125rem !important; }
@media (max-width: 1000px) { .ild-oe-list img { max-width: 150px !important; } }
@media (max-width: 700px) { .ild-oe-list { padding: 22px 12px !important; row-gap: 22px !important; } .ild-oe-list img { max-width: 100px !important; } }
/* Mehr Luft auf den Individuelle-Lösungen-Seiten + gut sichtbarer Anfrage-Knopf */
.il .section-head { margin-bottom: 34px !important; }
.il .section-head h2, .ild-text h2 { margin-bottom: 14px; }
.il .il-prods-sub { line-height: 1.7; }
.ild-text > p { margin-bottom: 20px; }
.ild-text > .ild-specs, .ild-text > ul, .ild-text > .ild-fits { margin-top: 6px; margin-bottom: 24px; }
.ild-two { gap: clamp(32px, 5vw, 72px) !important; }
.il-af { margin: 22px 0 6px !important; }
.il-af .oe-grp-af { background: #0070C0; border-color: #0070C0; color: #fff; padding: 11px 20px; font-size: .9375rem; box-shadow: 0 6px 16px rgba(0,112,192,.22); }
.il-af .oe-grp-af:hover { background: #005a9c; border-color: #005a9c; }
.il-af .oe-grp-af .icon { width: 15px; height: 15px; }
.ild-uf, .ild-fk, .ild-oe-sub { margin-top: 8px; }
.il-af { margin: 24px 0 30px !important; }
.il-af + * { margin-top: 0; }