/* Home section «industries» (owner 16.10): the design-system entry tiles (css/layout.css «.btile»: label top left,
   ↗ top right, big title anchored to the bottom, the whole tile is the link), every industry in its own colour.
   «Other industry» is the dark wide tile with the ball, it opens Kaia. Motion: js/branchen.js */
.br { max-width: var(--page-max); margin: var(--section-y) var(--edge) 0; }
.br__head { margin: 0 0 var(--head-gap); }
.br__eyebrow { margin: 0 0 12px; font: 500 13px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.br h2 { margin: 0; max-width: 18ch; font: 600 clamp(32px, 4.6vw, 64px)/1.04 var(--font); letter-spacing: -0.035em; text-wrap: balance; color: var(--ink); }

.br__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); }

.br-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 172px; padding: 22px;
  border: 0; border-radius: var(--r-l); overflow: hidden; color: var(--ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer;
  transition: transform .25s var(--e-out); touch-action: manipulation; }
.br-tile:hover { transform: translateY(-3px); }
.br-tile:active { transform: scale(.98); }
.br-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* the colour wave (js/branchen.js): a grey veil over the tile's colour and the ball, under its text */
.br-tile__veil { position: absolute; inset: 0; z-index: 1; background: var(--grey-2); pointer-events: none; }
.br-tile--ink .br-tile__veil { background: #3a3a40; }
.br-tile__top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.br-tile__eyebrow { min-width: 0; overflow-wrap: anywhere; hyphens: auto; font: 600 11.5px/1.25 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.br-tile__go .icon, .br-tile__ic .icon { display: grid; width: 20px; height: 20px; }
.br-tile__go svg, .br-tile__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.br-tile__go { transition: transform .25s var(--e-out); }
.br-tile:hover .br-tile__go { transform: translate(2px, -2px); }
.br-tile__body { position: relative; z-index: 2; display: grid; gap: 6px; }
.br-tile__lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.br-tile__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.br-tile__name { min-width: 0; font: 500 clamp(22px, 2vw, 28px)/1.06 var(--font); letter-spacing: -0.03em; text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; }   /* long words (Liegenschaftsverwaltung) break with a hyphen, never cut (QA 20.10) */
.br-tile__pain { font-size: 14.5px; line-height: 1.35; color: var(--text-2); }

/* every industry its own colour: the steps of the five-colour system (warm, sky, neutral); ink text on all of them
   (ink on sky 5.9:1, on warm 5.6:1), the dark tile only for «other industry» */
.br-tile--warm-grad { background: linear-gradient(150deg, var(--warm-tint), var(--peach)); }
.br-tile--peach { background: var(--peach); }
.br-tile--peach-grad { background: linear-gradient(150deg, var(--peach), var(--warm-tint)); }
.br-tile--warm-tint { background: var(--warm-tint); }
.br-tile--warm { background: linear-gradient(150deg, #f08a52, var(--warm)); }
.br-tile--sky { background: linear-gradient(150deg, #86aee0, var(--sky)); }
.br-tile--sky-soft { background: var(--sky-soft); }
.br-tile--sky-tint { background: var(--sky-tint); }
.br-tile--grey { background: var(--grey-1); }
.br-tile--white { background: #fff; box-shadow: 0 1px 2px rgba(33, 33, 33, .04), 0 24px 44px -32px rgba(var(--shade), .6); }
.br-tile--warm .br-tile__eyebrow, .br-tile--sky .br-tile__eyebrow, .br-tile--warm .br-tile__pain, .br-tile--sky .br-tile__pain { color: var(--ink); opacity: .78; }
.br-tile--warm .br-tile__ic, .br-tile--sky .br-tile__ic { background: rgba(255, 255, 255, .85); }
.br-tile--ink { background: radial-gradient(120% 90% at 80% 100%, #3a3a40, #212121 60%); color: #fff; }
.br-tile--ink .br-tile__eyebrow, .br-tile--ink .br-tile__pain { color: rgba(255, 255, 255, .7); }
.br-other { grid-column: span 2; }
.br-other__art { position: absolute; z-index: 0; right: -6%; bottom: -24%; width: 42%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #6b6b74, #2b2b30 55%, #18181b); box-shadow: inset -12px -18px 30px rgba(0,0,0,.45), 0 30px 60px -20px rgba(0,0,0,.6); }
.br-other .br-tile__body { max-width: 60%; }

@media (max-width: 1023px) { .br__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .br-other { grid-column: span 3; } }

/* phones: two columns; the name at the bottom, the group label and the pain stay on the industry page */
@media (max-width: 599px) {
  .br__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .br-tile { min-height: 96px; padding: 12px 12px 14px; gap: 8px; border-radius: var(--r-m); }
  .br-tile__eyebrow, .br-tile__pain { display: none; }
  .br-tile__ic { width: 34px; height: 34px; }
  .br-tile__ic .icon { width: 17px; height: 17px; }
  .br-tile__go .icon { width: 18px; height: 18px; }
  .br-tile__name { font-size: clamp(15px, 4.6vw, 18px); line-height: 1.12; }
  .br-other { grid-column: span 2; min-height: 104px; }
  .br-other .br-tile__eyebrow { display: block; }
  .br-other .br-tile__pain { display: block; font-size: 13.5px; }
  .br-other .br-tile__body { max-width: 70%; }
}
@media (prefers-reduced-motion: reduce) { .br-tile, .br-tile__go { transition: none; } }