/* Partner von solar-ma.de auf der Startseite, zwischen den Leistungen und der Energie-Section.
   Markup views/partials/partner.ejs, Daten data/site.js partners.
   Jede Zeile ist ein einziger Link auf die Site des Partners (Mechanik wie der Partner-Block von baustra,
   ohne Parallax, AOS, Lift und schwarze Karten). Schriftgrössen nur aus dem Bestand: H2 (style.css), 1.1rem, 0.95rem.
   Order: 2026-10-24_meh_merzig-seite-und-partner-wolf-venturama */

.partner__raster {
  display: grid;
  gap: 28px 48px;
}

/* Grösse wie jede H2 der Site, Farbe coffee: green (#98bb49) hat auf Creme nur 2,0:1 */
.partner h2 {
  margin: 0;
  max-width: 16ch;
  color: var(--coffee);
  text-wrap: balance;
}

.partner__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(88 45 26 / 0.2);
}

.partner__liste li {
  border-bottom: 1px solid rgb(88 45 26 / 0.2);
}

/* Die ganze Zeile ist das Tap-Ziel. Der Grund beim Hover ragt 16px über die Linien hinaus, der Inhalt bleibt bündig. */
.partner__link {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-inline: -16px;
  padding: 22px 16px;
  border-radius: 4px;
  color: var(--ink);
  transition: background-color 0.2s ease;
}

.partner__logo {
  height: auto;
}

.partner__name {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.partner__satz {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 82%, var(--cream));
  text-wrap: pretty;
}

/* nur für Screenreader */
.partner__hinweis {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.partner__link:active {
  background-color: color-mix(in srgb, var(--coffee) 7%, var(--cream));
}

@media (hover: hover) and (pointer: fine) {
  .partner__link:hover {
    background-color: color-mix(in srgb, var(--coffee) 7%, var(--cream));
  }
}

.partner__link:focus-visible {
  outline: 3px solid var(--coffee);
  outline-offset: -3px;
}

@media (min-width: 561px) {
  .partner__link {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    column-gap: 32px;
  }
}

@media (min-width: 961px) {
  .partner__raster {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner__link {
    transition: none;
  }
}