/* Branche „Kommunal & Bauhof“ (31.10.2026): Einsatzbereiche als vier große Fotokarten mit Text auf dem Bild
   (Bild, dunkler Verlauf, Vorzeile in Lime, Überschrift, Satz, Geräte-Links) – Aufbau wie die Problemkarten der Branchenseiten. */
.kb-bereiche .kb-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: clamp(28px, 3.4vw, 46px) 0 0; padding: 0; list-style: none; }
.kb-karte { position: relative; isolation: isolate; overflow: hidden; border-radius: 10px; aspect-ratio: 4 / 3; background: var(--moss-1, #1f261c);
  box-shadow: 0 1px 2px rgba(30, 30, 20, .05), 0 22px 44px -32px rgba(30, 35, 20, .55); }
.kb-bild { position: absolute; inset: 0; margin: 0; }
.kb-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1s cubic-bezier(.22, 1, .36, 1); }
.kb-karte:hover .kb-bild img { scale: 1.05; }
.kb-bild::after { content: ''; position: absolute; inset: 28% 0 0; background: linear-gradient(180deg, rgba(15, 19, 13, 0), rgba(15, 19, 13, .9)); pointer-events: none; }
.kb-in { position: absolute; z-index: 2; left: clamp(18px, 2vw, 30px); right: clamp(18px, 2vw, 30px); bottom: clamp(16px, 1.8vw, 28px); display: grid; gap: 9px; color: #fff; }
.kb-in em { font: 700 13px/1 var(--text); font-style: normal; letter-spacing: .14em; color: var(--lime); }
.kb-in h3 { margin: 0; font: 700 clamp(25px, 2.3vw, 36px)/1.04 var(--display); text-transform: uppercase; color: #fff; text-wrap: balance; }
.kb-in p { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--on-dark, #eeeadf); }
.kb-geraete { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.kb-geraete a { display: inline-block; padding: 8px 13px; border-radius: 4px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font: 600 13px/1 var(--text); letter-spacing: .02em; text-decoration: none; transition: background .25s, color .25s, translate .25s; }
.kb-geraete a:hover, .kb-geraete a:focus-visible { background: var(--lime); color: var(--lime-ink); translate: 0 -1px; }
@media (max-width: 760px) {
  .kb-bereiche .kb-karten { grid-template-columns: minmax(0, 1fr); }
  .kb-karte { aspect-ratio: 4 / 4.2; }
  .kb-in p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .kb-bild img, .kb-geraete a { transition: none; } .kb-karte:hover .kb-bild img { scale: 1; } }