/* ==========================================================================
   Kernholz – Leistungen (Übersicht und einheitliches Leistungs-Template)
   Seitenkopf mit Bild · Leistungsblöcke · Merkmale · Materialien · Galerie · Holzarten-Tabelle
   ========================================================================== */

/* --- Leistungsblöcke der Übersicht (abwechselnd links/rechts) ----------- */
.leistung {
  row-gap: var(--s-6);
  align-items: center;
  padding-block: var(--s-8);
  border-top: var(--linie) solid var(--farbe-linie);
}

.leistung:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.leistung__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.leistung__text {
  display: grid;
  gap: var(--s-5);
  align-content: start;
}

.leistung__kopf {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.leistung__kopf h2 {
  font-size: var(--fs-xl);
}

@media (min-width: 64rem) {
  .leistung__bild {
    grid-column: 1 / span 6;
  }

  .leistung__text {
    grid-column: 8 / span 5;
  }

  .leistung:nth-of-type(even) .leistung__bild {
    grid-column: 7 / span 6;
    grid-row: 1;
  }

  .leistung:nth-of-type(even) .leistung__text {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
}

/* --- Materialien mit Holzmuster ------------------------------------------ */
.materialien {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--s-6) var(--rinne);
  list-style: none;
}

.material {
  container-type: inline-size;
  display: grid;
  align-content: start;
  gap: var(--s-3);
}

.material__muster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: url("../../img/muster/maserung.svg") center / cover, var(--holz, var(--holz-eiche));
  border: var(--linie) solid color-mix(in srgb, var(--c-nacht-900) 25%, transparent);
}

/* Maßkette unter dem Muster: 1 : 1-Anmutung */
.material__muster::after {
  content: attr(data-mass);
  position: absolute;
  right: var(--s-2);
  bottom: var(--s-2);
  padding: 0.125rem 0.375rem;
  background: color-mix(in srgb, var(--c-papier) 90%, transparent);
  color: var(--c-nacht-900);
  font-family: var(--schrift-label);
  font-size: var(--fs-2xs);
  font-weight: var(--gewicht-kraeftig);
  letter-spacing: 0.08em;
}

.material h3 {
  font-size: var(--fs-l);
}

.material__daten {
  color: var(--farbe-text-leise);
  font-family: var(--schrift-label);
  font-size: var(--fs-xs);
  font-weight: var(--gewicht-kraeftig);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-holz="eiche"] { --holz: var(--holz-eiche); }
[data-holz="eiche-geraeuchert"] { --holz: var(--holz-eiche-geraeuchert); }
[data-holz="nussbaum"] { --holz: var(--holz-nussbaum); }
[data-holz="esche"] { --holz: var(--holz-esche); }
[data-holz="ahorn"] { --holz: var(--holz-ahorn); }
[data-holz="kirsche"] { --holz: var(--holz-kirsche); }
[data-holz="buche"] { --holz: var(--holz-buche); }
[data-holz="birke-multiplex"] { --holz: var(--holz-birke-multiplex); }
[data-holz="lack"] { --holz: var(--holz-lack); }
[data-holz="filz"] { --holz: var(--holz-filz); }

/* --- Galerie ---------------------------------------------------------------- */
.galerie {
  row-gap: var(--s-6);
}

.galerie figure {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-grau-100);
}

.galerie figcaption {
  color: var(--farbe-text-leise);
  font-size: var(--fs-s);
}

.galerie__text {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

@media (min-width: 48rem) {
  .galerie__a {
    grid-column: 1 / span 7;
  }

  .galerie__b {
    grid-column: 8 / span 5;
  }

  .galerie__a img,
  .galerie__b img {
    aspect-ratio: auto;
    height: clamp(18rem, 36vw, 34rem);
  }

  .galerie__c {
    grid-column: 1 / span 5;
  }

  .galerie__text {
    grid-column: 7 / span 6;
    align-self: center;
  }
}

/* --- Holzarten-Tabelle ------------------------------------------------------ */
.tabelle__muster {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: var(--s-2);
  vertical-align: -0.1em;
  background: url("../../img/muster/maserung.svg") center / cover, var(--holz);
  border: var(--linie) solid color-mix(in srgb, var(--c-nacht-900) 30%, transparent);
}

.holzarten {
  row-gap: var(--s-6);
}

.holzarten__bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .holzarten__bild {
    grid-column: 1 / span 4;
  }

  .holzarten__tabelle {
    grid-column: 6 / span 7;
  }
}