/* ============================================
   Zebra Lösungen Grid — block-specific styles
   Loaded only on pages that contain a zebra/loesungen-grid block.
   ============================================ */

.loesungen-grid{
  padding:var(--section-pad) 0;
  background:var(--c-soft-bg); /* fallback; overridden by inline style */
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
}

/* ---- Header ---------------------------------------------------------- */
.lg-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--xxl);
  align-items:end;
  margin-bottom:var(--xxl);
}
.lg-head__main .eyebrow{display:block;margin-bottom:var(--md)}
.lg-head__main .h2{max-width:14ch}
.lg-head .pitch{
  color:#222;
  font-size:var(--fs-body-lg);
  margin:0;
}

/* ---- Rows (two bordered containers of 5, matching HTML template) ------ */
.lg-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1px;
  background:var(--c-line);
  border:1px solid var(--c-line);
}
.lg-row+.lg-row{margin-top:1px}

/* ---- Item ------------------------------------------------------------ */
.lg-item{
  background:#fff;
  padding:var(--lg) var(--md);
  display:block;
  text-decoration:none;
  transition:background .2s ease;
}
a.lg-item{cursor:pointer}
a.lg-item:hover,
a.lg-item:focus-visible{
  background:var(--c-primary);
  outline:none;
}
a.lg-item:hover .lg-kicker,
a.lg-item:focus-visible .lg-kicker { color: #000; }
a.lg-item:hover .lg-title,
a.lg-item:focus-visible .lg-title  { color: #000; }
a.lg-item:hover .lg-body,
a.lg-item:focus-visible .lg-body   { color: #000; }

.lg-item--dark{background:#1a1a1a}
a.lg-item--dark:hover,
a.lg-item--dark:focus-visible{background:var(--c-primary)}
a.lg-item--dark:hover .lg-kicker,
a.lg-item--dark:focus-visible .lg-kicker { color: #000; }

/* ---- Kicker ---------------------------------------------------------- */
.lg-kicker{
  font-family:var(--ff-display);
  font-size:11px;
  color:var(--c-primary);
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:6px;
}

/* ---- Title ----------------------------------------------------------- */
.lg-title{
  font-family:var(--ff-display);
  font-size:16px;
  color:#000;
  text-transform:uppercase;
  line-height:1.15;
  margin-bottom:8px;
}
.lg-item--dark .lg-title{color:#fff}
a.lg-item:hover .lg-title,
a.lg-item:focus-visible .lg-title{color:#000}

/* ---- Body ------------------------------------------------------------ */
.lg-body{
  font-size:12px;
  color:#555;
  margin:0;
  line-height:1.5;
}
.lg-item--dark .lg-body{color:#aaa}
a.lg-item:hover .lg-body,
a.lg-item:focus-visible .lg-body{color:#000}

/* ---- CTA ------------------------------------------------------------- */
.lg-cta{
  text-align:center;
  margin-top:var(--xl);
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 980px){
  .lg-head{
    grid-template-columns:1fr;
    gap:var(--xl);
  }
  .lg-row{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width: 640px){
  .lg-row{grid-template-columns:1fr}
}

/* ---- Background colour variants -------------------------------------- */

/* WHITE */
.lg--bg-white { border-top-color: var(--c-line); border-bottom-color: var(--c-line); }
.lg--bg-white .lg-item { background: var(--c-soft-bg); }

/* BLACK */
.lg--bg-black { border-top-color: #333; border-bottom-color: #333; }
.lg--bg-black .lg-head .pitch { color: #aaa; }
.lg--bg-black .lg-head__main h2 { color: #fff; }
.lg--bg-black .lg-row { background: #444; border-color: #444; }
.lg--bg-black .lg-item { background: #2a2a2a; }
.lg--bg-black .lg-item .lg-kicker { color: var(--c-primary); }
.lg--bg-black .lg-item .lg-title { color: #fff; }
.lg--bg-black .lg-item .lg-body  { color: #888; }
.lg--bg-black a.lg-item:hover { background: var(--c-primary); }
.lg--bg-black a.lg-item:hover .lg-kicker { color: #000; }
.lg--bg-black a.lg-item:hover .lg-title,
.lg--bg-black a.lg-item:hover .lg-body  { color: #000; }

/* YELLOW */
.lg--bg-yellow { border-top-color: rgba(0,0,0,.15); border-bottom-color: rgba(0,0,0,.15); }
.lg--bg-yellow .lg-head .pitch { color: #333; }
.lg--bg-yellow .lg-row { background: rgba(0,0,0,.15); border-color: rgba(0,0,0,.15); }
.lg--bg-yellow .lg-item { background: #fff; }
.lg--bg-yellow .lg-item--dark { background: #000; }
.lg--bg-yellow a.lg-item:hover { background: #000; }
.lg--bg-yellow a.lg-item:hover .lg-kicker { color: var(--c-primary); }
.lg--bg-yellow a.lg-item:hover .lg-title,
.lg--bg-yellow a.lg-item:hover .lg-body  { color: #fff; }
.lg--bg-yellow .lg-cta .btn-zebra,
.lg--bg-yellow .lg-cta .btn-zebra.inverse {
  background: #000;
  color: var(--c-primary);
  border-color: #000;
}
.lg--bg-yellow .lg-cta .btn-zebra:hover,
.lg--bg-yellow .lg-cta .btn-zebra.inverse:hover {
  background: #333;
  color: #fff;
  border-color: #333;
}