/* ============================================================
   download.css — Die Mappe

   Ein Dokument ist ein Blatt Papier. Also ist jedes Dokument hier
   auch eines: mit umgeschlagenem Falz an der oberen rechten Ecke,
   mit Lochung am linken Rand — und mit einem Stempel.

   DER STEMPEL ist die eigentliche Auskunft dieser Seite. Vorher
   sahen alle Einträge gleich aus, und keiner war herunterladbar.
   Jetzt sagt Blau „liegt hier", Rot „schicken wir zu", und man
   sieht es aus drei Metern Entfernung.

   Hero, Krume und Abschnittsrhythmus kommen aus leistung.css.
   ============================================================ */

/* ---------- Abschnittskopf, zweispaltig --------------------- */
.dl-zone .sec-head.dl-kopf {
  display: grid;
  grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
  column-gap: clamp(24px, 3vw, 52px);
  align-items: start;
  margin-bottom: clamp(24px, 3.4vh, 36px);
}
.dl-kopf .mono { grid-column: 1; grid-row: 1; }
.dl-kopf h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.dl-kopf .lead {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding-top: 0.42em;
  max-width: 46ch;
}

/* ---------- Die Zählzeile ----------------------------------- */
.dl-stand-gesamt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 18px;
  margin: 0 0 clamp(26px, 3.6vh, 40px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--grey-line-2);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dl-stand-gesamt .mono { color: var(--tinte); }
/* Punkt und Beschriftung gehören zusammen und brechen zusammen um. */
.dl-marke { display: inline-flex; align-items: center; gap: 8px; }
.dl-punkt {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.dl-punkt--frei { background: var(--blue); }

/* ---------- Gruppenüberschrift ------------------------------
   Eine Zeile mit durchlaufender Haarlinie: der Name steht darin,
   nicht darüber. Spart eine Zeile und ordnet trotzdem. */
.dl-gruppe {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(30px, 4vh, 46px) 0 clamp(14px, 2vh, 20px);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.dl-gruppe:first-of-type { margin-top: 0; }
.dl-gruppe::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--grey-line-2);
}

/* ---------- Die Lage --------------------------------------- */
.dl-lage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(298px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

/* ---------- Das Blatt --------------------------------------
   Der Falz entsteht aus zwei Ecken: `clip-path` schneidet die
   Ecke ab, ein ::before legt das umgeschlagene Dreieck darüber.
   Ein Bild wäre dafür Verschwendung. */
.dl-blatt {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 21px 18px 34px;
  background: var(--grund);
  border: 1px solid var(--grey-line-2);
  border-radius: 2px 0 2px 2px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s,
              border-color .3s;
}
/* Der umgeschlagene Falz. z-index nötig, seit das Cover darunter
   liegt: ein positioniertes Kind malt sonst über das ::before
   des Elternteils. */
.dl-blatt::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  z-index: 2;
  width: 26px; height: 26px;
  background: linear-gradient(225deg,
    var(--grey-line-2) 0 50%, transparent 50%);
  pointer-events: none;
}

/* ---------- Das Titelcover --------------------------------
   Die erste Seite des Dokuments. Angeschnitten auf den KOPF der
   Seite (`object-position: top`) — dort stehen Logo und Titel,
   und genau die soll man erkennen. Ein auf die Mitte
   angeschnittenes Blatt zeigt Tabellenzeilen und sagt nichts.

   Nach rechts und oben aus dem Innenabstand herausgezogen, links
   nicht: der Streifen mit der Lochung bleibt Papierrand, wie bei
   einem abgehefteten Blatt. */
.dl-cover {
  height: 164px;
  margin: -20px -21px 16px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--grey-line-2);
  background: var(--grund);
}
.dl-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Ohne Datei gibt es keine erste Seite. Millimeterpapier statt
   eines erfundenen Blattes. */
.dl-cover--leer {
  background-image:
    linear-gradient(rgba(11, 82, 196, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 82, 196, 0.06) 1px, transparent 1px);
  background-size: 18px 18px, 18px 18px;
}
/* Die Lochung am linken Rand — das Zeichen für „abgeheftet" */
.dl-blatt::after {
  content: '';
  position: absolute;
  left: 13px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -32px;
  border-radius: 50%;
  background: var(--grey-line-2);
  box-shadow: 0 58px 0 var(--grey-line-2);
  pointer-events: none;
}
.dl-blatt:hover {
  transform: translateY(-4px);
  border-color: var(--grey-line);
  box-shadow: 0 14px 32px rgba(10, 14, 24, 0.09);
}

.dl-nr {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

/* ---------- Der Stempel ------------------------------------
   Schräg, doppelt gerahmt, leicht durchscheinend — wie ein
   Gummistempel, der nicht ganz sauber aufgesetzt wurde. Beim
   Anfahren richtet er sich auf: die einzige Bewegung, die das
   Blatt selbst macht. */
/* Nummer links, Stempel rechts — auf einer Zeile UNTER dem Cover.

   Zwei Anläufe lagen auf dem Cover selbst: bei 20 px sass der
   Stempel auf dem BAURBETON-Logo der Preislisten, bei 112 px auf
   dem Titel des Betonblocksteine-Prospekts. Bei sieben
   verschiedenen Dokumentlayouts gibt es keine Stelle, die überall
   frei ist — jede feste Position trifft irgendwo etwas.

   In der Karte trifft er nie etwas, behält seine Schräglage und
   braucht weder Stapelwert noch deckende Fläche. */
.dl-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dl-stempel {
  flex: none;
  padding: 4px 9px;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--grund);
  opacity: 0.72;
  transform: rotate(-7deg);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s;
}
.dl-blatt.ist-frei .dl-stempel { color: var(--blue); border-color: var(--blue); }
.dl-blatt:hover .dl-stempel { transform: rotate(-2deg) scale(1.04); opacity: 0.92; }

.dl-blatt h3 {
  margin: 10px 0 4px;
  /* Kein Freiraum rechts mehr nötig: der Stempel liegt auf dem
     Cover, nicht mehr neben der Überschrift. */
  font-family: var(--f-display);
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  hyphens: manual;
  overflow-wrap: break-word;
}
.dl-stand {
  margin: 0 0 11px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dl-text {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-mute);
}

/* Der Fuss klebt unten, damit die Blätter einer Reihe ihre
   Aktionszeile auf derselben Höhe haben — auch wenn die Texte
   verschieden lang sind. */
.dl-fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: auto 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--grey-line-2);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dl-tat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  transition: color .2s, gap .2s;
}
.dl-blatt.ist-frei .dl-tat { color: var(--blue-text); }
.dl-tat i { font-style: normal; transition: transform .25s; }
.dl-blatt:hover .dl-tat { gap: 10px; }
.dl-blatt.ist-frei:hover .dl-tat i { transform: translateY(2px); }
.dl-blatt:not(.ist-frei):hover .dl-tat i { transform: translateX(2px); }
.dl-tat:focus-visible { outline: 2px solid var(--blue-lift); outline-offset: 3px; }

@media (max-width: 900px) {
  .dl-zone .sec-head.dl-kopf { grid-template-columns: minmax(0, 1fr); }
  .dl-kopf h2 { margin-bottom: 18px; }
  .dl-kopf .lead { grid-column: 1; grid-row: 3; padding-top: 0; max-width: 62ch; }
}
@media (max-width: 560px) {
  .dl-lage { grid-template-columns: minmax(0, 1fr); }
}