/* ==========================================================================
   40 · Karten und Kartenraster
   Zeile: [row class="demo-card-grid demo-cards-2|3|4|5"], Spalten: class="demo-card"
   Varianten der Spalte:
     – Textkarte:   demo-label / demo-card-no, h3, p
     – Bildkarte:   [ux_image class="demo-card-image"] + <a class="demo-card-copy">…</a>
                    (Zeile zusätzlich demo-card-flat)
     – Kurzkarte:   [ux_image class="demo-compact-image"] + Titelzeile .demo-card-title-line
   Ganze Karte klickbar, wenn sie einen Link enthält (.demo-card-copy, .eso-card-link,
   Link in h3). Ohne Link gibt es keinen Hover-Effekt.
   ========================================================================== */

/* Raster: Trennlinien an den Karten, damit eine unvollständige letzte Reihe leer bleibt */
.eso-demo .demo-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 !important;
  align-items: stretch;
  border-top: 1px solid var(--eso-border);
  border-left: 1px solid var(--eso-border);
  background: transparent;
}
.eso-demo .demo-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eso-demo .demo-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eso-demo .demo-cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.eso-demo .demo-card-grid > .col {
  max-width: none;
  flex-basis: auto;
  align-self: stretch !important;
  padding: 0;
  border-right: 1px solid var(--eso-border);
  border-bottom: 1px solid var(--eso-border);
}
.eso-demo .demo-card-grid > .col > .col-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  background: var(--eso-white);
  transition: background-color var(--eso-transition);
}
.eso-demo .demo-card-grid.demo-card-flat > .col > .col-inner { padding: 0 !important; }
.eso-demo .demo-card-grid .demo-featured-card { grid-column: span 2; }

/* Inhalt der Textkarte */
.eso-demo .demo-card-grid h3 { margin-top: 12px; }
.eso-demo .demo-card-grid h3:first-child { margin-top: 0; }
.eso-demo .demo-card-grid .demo-label { font-size: 11px; line-height: 16.5px; }
.eso-demo .demo-card-grid p:not(.demo-label):not(.demo-card-link):not([class*="number"]):not([class*="unit"]),
.eso-demo .demo-card-grid .demo-body {
  max-width: none;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--eso-text-body);
}
.eso-demo .demo-card-grid .demo-list { margin-top: 16px; }
.eso-demo .demo-card-grid .demo-list li { font-size: 14px; }
.eso-demo .demo-card-no {
  display: block;
  font-family: var(--eso-font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .2em;
  color: var(--eso-green);
}
.eso-demo .demo-card-no + h3 { margin-top: 16px; }
.eso-demo .demo-card.is-highlight > .col-inner { background: var(--eso-green-light); }
/* Button / Link am Kartenende */
.eso-demo .demo-card-grid .col-inner > .button,
.eso-demo .demo-card-grid .demo-card-link { margin-top: auto; }
.eso-demo .demo-card-grid .col-inner > .button { align-self: flex-start; }
.eso-demo .demo-card-grid .col-inner > p + .button { margin-top: 24px; }

/* Bildkarte: Bild oben, Text darunter */
.eso-demo .demo-card-image {
  flex: none;
  height: 200px;
  margin: 0 !important;
  background: var(--eso-white);
}
.eso-demo .demo-card-image .img-inner {
  height: 100%;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eso-demo .demo-card-image img { width: 100%; max-height: 100%; object-fit: contain; }
.eso-demo .demo-featured-card .demo-card-image { height: 224px; }
.eso-demo .demo-cards-transparent .demo-card-image,
.eso-demo .demo-cards-transparent .demo-card-image .img-inner { background: transparent; }
.eso-demo .demo-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-family: var(--eso-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  color: var(--eso-border);
}
.eso-demo .demo-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
  border-top: 1px solid var(--eso-border);
  color: var(--eso-text);
}
.eso-demo .demo-card-copy h3 { margin: 0; font-size: 18px; line-height: 28px; }
.eso-demo .demo-featured-card .demo-card-copy h3 { font-size: 20px; }
.eso-demo .demo-card-copy .demo-body { flex: 1; margin-top: 8px; }
.eso-demo .demo-card-link {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--eso-font-mono);
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--eso-text);
}
.eso-demo .demo-card-link > span { margin: 0; font: inherit; display: inline; }
.eso-demo .demo-card-grid > .col > .col-inner > .text { display: flex; flex: 1; }

/* Kurzkarte mit Titelzeile (Artikelausrüstung) */
.eso-demo .demo-compact-image { height: 160px; margin: 0 !important; background: var(--eso-white); }
.eso-demo .demo-compact-image .img-inner { height: 100%; padding: 16px; display: flex; align-items: center; justify-content: center; }
.eso-demo .demo-compact-image img { width: 100%; height: 100%; object-fit: contain; }
.eso-demo .demo-compact-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  font-family: var(--eso-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--eso-border);
}
.eso-demo .demo-card-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 60px;
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--eso-border);
  font-family: var(--eso-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 19.25px;
  letter-spacing: -.025em;
  color: var(--eso-text);
}
.eso-demo .demo-card-title-line a { color: var(--eso-text); }
.eso-demo .demo-card-title-line .demo-arrow { flex: none; color: var(--eso-green); }

/* Ganze Karte klickbar ---------------------------------------------------- */
.eso-demo .demo-card-copy h3 a::after,
.eso-demo .demo-card-title-line a::after,
.eso-demo .demo-card .eso-card-link::after,
.eso-demo .demo-card h3 > a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.eso-demo .demo-card .eso-card-link { color: var(--eso-text); text-decoration: none; }
.eso-demo .demo-card .eso-card-link::before {
  content: "→";
  order: 2;
  color: var(--eso-green);
  transition: transform var(--eso-transition);
}
.eso-demo .demo-card:hover .eso-card-link::before,
.eso-demo .demo-card .eso-card-link:focus-visible::before { transform: translateX(4px); }
.eso-demo .demo-card:has(a[href]):hover > .col-inner { background: var(--eso-green-light); cursor: pointer; }
.eso-demo .demo-card:has(a[href]:focus-visible) > .col-inner { background: var(--eso-green-light); outline: 2px solid var(--eso-green); outline-offset: -2px; }
.eso-demo .demo-card a:focus-visible { outline: none; }

/* Tablet / Mobil ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .eso-demo .demo-cards-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .eso-demo .demo-cards-3,
  .eso-demo .demo-cards-4,
  .eso-demo .demo-cards-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eso-demo .demo-card-grid > .col > .col-inner { padding: 24px; }
}
@media (max-width: 639px) {
  .eso-demo .demo-card-grid,
  .eso-demo .demo-cards-3,
  .eso-demo .demo-cards-4,
  .eso-demo .demo-cards-5 { grid-template-columns: 1fr; }
  .eso-demo .demo-card-grid .demo-featured-card { grid-column: auto; }
  .eso-demo .demo-featured-card .demo-card-image { height: 192px; }
}

/* Merkmals-Raster (RME, FLS) und statische Raster ohne Hover */
.eso-demo .demo-feature-grid > .col > .col-inner { padding: 24px !important; }
.eso-demo .demo-card-grid--static > .col:hover > .col-inner { background: var(--eso-white); }
/* Vier gleich breite Karten (Prüf- & Messsysteme) */
.eso-demo .demo-grid-even4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eso-demo .demo-grid-even4 > .col { grid-column: auto !important; }
@media (max-width: 1023px) { .eso-demo .demo-grid-even4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .eso-demo .demo-grid-even4 { grid-template-columns: 1fr; } }

/* Bildkarte mit Flatsome-Element „Image Box“ ([ux_image_box] in einer .demo-card)
   – im UX Builder bearbeitbar; Text linksbündig, Button immer unten auf gleicher Höhe */
.eso-demo .demo-card-grid .demo-card > .col-inner { padding: 0; }
.eso-demo .demo-card-grid .demo-card > .col-inner:not(:has(.box, .demo-card-image, .img, .demo-card-placeholder, .demo-card-copy)) { padding: 32px; }
.eso-demo .demo-card .box {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
}
.eso-demo .demo-card .box-image {
  width: 100% !important;
  height: 200px;
  margin: 0;
  padding: 16px;
  border-bottom: 1px solid var(--eso-border);
  background: var(--eso-white);
}
.eso-demo .demo-card .box-image > a,
.eso-demo .demo-card .box-image > a > div { display: block; height: 100%; }
.eso-demo .demo-card .box-image img { width: 100%; height: 100%; object-fit: contain; }
.eso-demo .demo-card .box-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px !important;
  text-align: left !important;
}
.eso-demo .demo-card .box-text-inner { display: flex; flex: 1; flex-direction: column; align-items: flex-start; width: 100% !important; max-width: none !important; margin: 0 !important; }
.eso-demo .demo-card .box-text h3 { margin: 0; font-size: 20px; line-height: 28px; }
.eso-demo .demo-card .box-text p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--eso-text-body); }
.eso-demo .demo-card .box-text .button { margin: auto 0 0 !important; padding-top: 12px; padding-bottom: 12px; }
.eso-demo .demo-card .box-text-inner > p:last-of-type { margin-bottom: 24px; }
.eso-demo .demo-card:has(.box) .box-image a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.eso-demo .demo-card:has(.box) .box-text .button { position: relative; z-index: 1; }
.eso-demo .demo-featured-card .box-image { height: 260px; }
@media (max-width: 639px) {
  .eso-demo .demo-card .box-image { height: 180px; }
}