/* =============================================================================
   Itze Grow e.V. – Bereich „Die Sorten“
   Ein ruhiges Raster statt der früheren seitlich laufenden Leiste: alle Sorten
   auf einen Blick, normales Scrollen nach unten. Karten leicht durchscheinend
   über dem Hintergrundfoto. Nur Name und Züchter, keine Wirkangaben.
   ========================================================================== */

.sorten__lead {
  max-width: 46ch;
  font-size: var(--sc-t-lg); line-height: 1.5;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-7);
}

.sorten__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-4);
}

.strain {
  position: relative;
  padding: var(--sc-5) var(--sc-5) var(--sc-5);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-lg);
  background: color-mix(in oklab, var(--sc-canvas) 78%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 480ms var(--sc-ease-out), transform 480ms var(--sc-ease-out),
              border-color 160ms var(--sc-ease-out);
}
.strain.is-settled { opacity: 1; transform: none; }
.strain::before {
  content: ""; position: absolute; left: var(--sc-5); top: -1px;
  width: 2rem; height: 3px; border-radius: 0 0 2px 2px;
  background: var(--brand-orange);
}
@media (hover: hover) and (pointer: fine) {
  .strain:hover { border-color: var(--sc-hairline-strong); }
}

.strain__n {
  display: block;
  font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--brand-green); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.strain__name {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  font-weight: 600; line-height: 1.12; letter-spacing: -0.02em;
  margin: var(--sc-3) 0 var(--sc-1);
  text-wrap: balance; hyphens: none;
}
.strain__breeder { font-size: var(--sc-t-sm); font-style: italic; color: var(--sc-ink-soft); line-height: 1.4; }

.sorten__hinweis {
  margin-top: var(--sc-6);
  max-width: 60ch;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}

@media (max-width: 900px) { .sorten__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sorten__liste { grid-template-columns: 1fr; gap: var(--sc-3); } }

/* ohne JavaScript oder bei reduzierter Bewegung sofort sichtbar */
html:not(.sc-ready) .strain { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .strain { opacity: 1; transform: none; transition: none; }
}