/*
  downloads.css — Downloadseite (.dllist, .dlcard).

  KACHEL WIE DIE ANSPRECHPARTNER-KARTE, aber ohne Bild (Vorgabe Atilla,
  10.08.2026): Die Benker-Kontur liegt hier auf der Flaeche der Karte selbst.

  Technisch dasselbe Verfahren wie beim Personenfoto: eine geklippte Flaeche
  (clip-path) und daneben ein un-geklipptes Stroke-Overlay fuer die Linie
  entlang der Kante. Ein CSS-`border` kann dieser Kontur nicht folgen — deshalb
  das SVG, nicht aus Vorliebe fuer SVG.

  Die Flaeche liegt als eigenes Element HINTER dem Inhalt (.dlcard__flaeche),
  nicht als Hintergrund der Karte. Grund: clip-path wuerde sonst auch den Text
  beschneiden, und die untere rechte Ecke ist genau dort, wo der Button sitzt.

  RASTER wie beim Team: bis 3 bzw. 4 Spalten, gleiche Abstaende. Zwei Raster
  mit unterschiedlichen Massen auf derselben Website sehen aus wie ein Versehen.
*/

.dllist {
  padding-block: var(--space-8);
  background-color: var(--color-bg);
}

.dllist__gruppe + .dllist__gruppe {
  margin-top: var(--space-8);
}

.dllist__titel {
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.dllist__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.dllist__leer {
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-text);
  max-width: 60ch;
}

.dllist__leer a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Kachel
   -------------------------------------------------------------------------- */

.dlcard {
  position: relative;
  display: flex;
  min-height: 260px;
}

/* Die farbige Flaeche mit der Kontur. Bewusst aria-hidden und ohne Inhalt:
   Sie ist Dekoration, der Text liegt darueber. */
.dlcard__flaeche {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-subtle, #eef1f5);
  clip-path: url(#card-notch-br);
}

/* Innenabstand unten groesser: Dort laeuft die Diagonale der Kontur durch, und
   Text, der bis an sie heranreicht, sieht aus, als waere er abgeschnitten. */
.dlcard__inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-6) var(--space-6) var(--space-7);
}

.dlcard__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dlcard__titel {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-2xs);
  line-height: var(--lh-heading-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: pretty;
}

.dlcard__body {
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: pretty;
}

.dlcard__fuss {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-right: var(--space-6);
}

.dlcard__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background-color: var(--color-accent);
  color: var(--color-neutral-100);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  letter-spacing: var(--tracking-tight);
  transition: opacity .15s ease;
}

.dlcard__btn:hover {
  opacity: .9;
}

.dlcard__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.dlcard__btn-icon {
  flex-shrink: 0;
}

/* Kein Button, weil noch keine Datei hinterlegt ist. Bewusst ruhig gehalten:
   Es ist ein Hinweis, keine Fehlermeldung. */
.dlcard__offen {
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-muted, #5a6b7d);
}

.dlcard__meta {
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-muted, #5a6b7d);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 600px) {
  .dllist__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .dllist {
    padding-block: var(--space-9);
  }

  .dllist__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .dllist__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}