/* Automatisch aus style.css herausgeloest (CSS-Diaet, 02.09.2026).
   REGEL: Stile, die nur EINE Seite braucht, wohnen in css/seiten/<seite>.css.
   Gemeinsames wohnt in style.css. Wer hier etwas aendert, prueft mit
   werkzeuge/vor-upload-pruefen.sh und zieht die Cache-Stempel hoch. */

.hk-hero-grid { align-items: center; }

/* ---- Hero: Bildkarten-Collage ------------------------------- */
.hk-collage {
  position: relative;
  aspect-ratio: 1 / 0.96;
  max-width: 560px;
  justify-self: end;
  width: 100%;
}
.hk-card {
  --tilt: 0deg;
  position: absolute;
  margin: 0;
  background: var(--white);
  border-radius: 14px;
  padding: 8px 8px 10px;
  box-shadow: 0 16px 34px rgba(26,35,34,0.18);
  transform: rotate(var(--tilt));
  transition: transform 0.45s var(--ease-marke), box-shadow 0.45s ease;
}
.hk-card img {
  width: 100%; height: auto; display: block;
  border-radius: 8px;
}
.hk-card figcaption { margin-top: 8px; }
.hk-card figcaption strong,
.hk-card--chip strong {
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-dark);
}
.hk-card figcaption span,
.hk-card--chip span {
  display: block; margin-top: 2px;
  font-size: 12px; line-height: 1.45;
  color: var(--ink-soft);
}
.hk-card-result {
  font-size: 16px !important;
  font-weight: 800;
  color: var(--teal-dark) !important;
}
/* Nur Bildflaechen duerfen sich ueberlappen, nie Beschriftungen
   (30.07.: die Ergebnis-Zeile war von der Video-Karte verdeckt). */
.hk-card--main { left: 31%; top: 2%; width: 46%; z-index: 4; --tilt: 0.8deg; }
.hk-card--main img { aspect-ratio: 4 / 5; object-fit: cover; }
.hk-card--main figcaption {
  margin-top: 10px;
  border-top: 3px solid var(--peach);
  padding-top: 8px;
}
.hk-card--m1 { left: 1%; top: 0; width: 27%; z-index: 2; --tilt: -3.5deg; }
.hk-card--m1 img { aspect-ratio: 4 / 5; object-fit: cover; }
.hk-card--chip { right: 0; top: 6%; width: 25%; z-index: 3; --tilt: 2.4deg; padding: 12px 13px 13px; }
.hk-card--shot { left: 0; top: 54%; width: 29%; z-index: 1; --tilt: 2deg; }
@media (hover: hover) {
  .hk-collage:hover .hk-card--m1 { transform: rotate(-5deg) translate(-8px, -5px); }
  .hk-collage:hover .hk-card--chip { transform: rotate(4deg) translate(7px, -4px); }
  .hk-collage:hover .hk-card--shot { transform: rotate(3.5deg) translate(-5px, 6px); }
  .hk-collage:hover .hk-card--main {
    transform: rotate(0.8deg) scale(1.015);
    box-shadow: 0 22px 44px rgba(26,35,34,0.24);
  }}


/* ---- Die Entwicklung: Kennzahlen + Medienwand ---------------- */
.hk-dev { padding: var(--space-md) 0; background: var(--teal-tint); }
.hk-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 26px 0 34px;
}
.hk-kpi { padding: 0 26px; border-left: 1px solid rgba(16,100,102,0.18); }
.hk-kpi:first-child { padding-left: 0; border-left: 0; }
.hk-kpi strong {
  display: block;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: var(--teal-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hk-kpi span { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }

.hk-wall {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}
.hk-shot {
  --tilt: 0deg;
  margin: 0;
  width: calc(20% - 15px);
  background: var(--white);
  border-radius: 14px;
  padding: 8px 8px 10px;
  box-shadow: 0 16px 32px rgba(26,35,34,0.16);
  transform: rotate(var(--tilt));
}
.hk-shot:nth-child(1) { --tilt: -2.2deg; }
.hk-shot:nth-child(2) { --tilt: 1.6deg; margin-top: 26px; }
.hk-shot:nth-child(3) { --tilt: -1deg; margin-top: 8px; }
.hk-shot:nth-child(4) { --tilt: 2.2deg; margin-top: 30px; }
.hk-shot:nth-child(5) { --tilt: -1.8deg; margin-top: 14px; }
.hk-shot img {
  width: 100%; height: auto; display: block;
  border-radius: 8px;
}
.hk-shot figcaption {
  margin-top: 8px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--teal-dark);
}
.hk-wall-note { margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); opacity: 0.85; max-width: 76ch; }

/* ---- Der Aufbau: drei Grafikmodule ---------------------------
   Eigene SVGs im Stil der Kontaktbogen-Illustrationen. Basiszustand
   = Endzustand (auch ohne Animation verstaendlich); beim Hover bzw.
   beim Eintritt in den Viewport (Touch) spielt die Entwicklung ab. */
.hk-etappen { padding: var(--space-sm) 0; background: var(--white); }
.hk-et-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}
.hk-mod {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.hk-mod:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.hk-mod-visual { background: var(--teal-tint); border-bottom: 1px solid var(--border); }
.hk-mod-illu { display: block; width: 100%; height: auto; }
.hk-mod-body { padding: 18px 22px 20px; }
.hk-mod-num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 800; font-style: normal; line-height: 1;
  background: var(--white); color: var(--teal);
  border: 2px solid var(--border);
  margin-bottom: 8px;
}
.hk-mod-body h3 { margin: 0 0 5px; font-size: 16.5px; color: var(--ink); }
.hk-mod-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.hk-et-note {
  margin: 22px 0 0; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  max-width: 76ch;
}

.et1-f, .et1-dot, .et1-chip, .et2-t, .et2-h, .et3-s, .et3-halo, .et3-halo2 {
  transform-box: fill-box;
  transform-origin: center;
}

.et3-l { stroke-dasharray: 70; }

.hk-mod--1:hover .et1-f1, .hk-mod--1:focus-visible .et1-f1 { animation: hk-pop 0.4s var(--ease-marke) 0s both; }
.hk-mod--1:hover .et1-f2, .hk-mod--1:focus-visible .et1-f2 { animation: hk-pop 0.4s var(--ease-marke) 0.14s both; }
.hk-mod--1:hover .et1-f3, .hk-mod--1:focus-visible .et1-f3 { animation: hk-pop 0.4s var(--ease-marke) 0.28s both; }
.hk-mod--1:hover .et1-f4, .hk-mod--1:focus-visible .et1-f4 { animation: hk-pop 0.4s var(--ease-marke) 0.42s both; }
.hk-mod--1:hover .et1-f5, .hk-mod--1:focus-visible .et1-f5 { animation: hk-pop 0.4s var(--ease-marke) 0.56s both; }
.hk-mod--1:hover .et1-dot, .hk-mod--1:focus-visible .et1-dot { animation: hk-run 0.95s cubic-bezier(0.3,0.6,0.2,1) 0.1s both; }
.hk-mod--1:hover .et1-chip, .hk-mod--1:focus-visible .et1-chip { animation: hk-fadein 0.4s ease 0.95s both; }

.hk-mod--2:hover .et2-t1, .hk-mod--2:focus-visible .et2-t1 { animation: hk-sort-a 0.55s var(--ease-marke) 0.05s both; }
.hk-mod--2:hover .et2-t2, .hk-mod--2:focus-visible .et2-t2 { animation: hk-sort-b 0.55s var(--ease-marke) 0.15s both; }
.hk-mod--2:hover .et2-t3, .hk-mod--2:focus-visible .et2-t3 { animation: hk-sort-c 0.55s var(--ease-marke) 0.1s both; }
.hk-mod--2:hover .et2-t4, .hk-mod--2:focus-visible .et2-t4 { animation: hk-sort-d 0.55s var(--ease-marke) 0.2s both; }
.hk-mod--2:hover .et2-t5, .hk-mod--2:focus-visible .et2-t5 { animation: hk-sort-b 0.55s var(--ease-marke) 0.25s both; }
.hk-mod--2:hover .et2-t6, .hk-mod--2:focus-visible .et2-t6 { animation: hk-sort-c 0.55s var(--ease-marke) 0.3s both; }
.hk-mod--2:hover .et2-t7, .hk-mod--2:focus-visible .et2-t7 { animation: hk-sort-a 0.55s var(--ease-marke) 0.35s both; }
.hk-mod--2:hover .et2-t8, .hk-mod--2:focus-visible .et2-t8 { animation: hk-sort-d 0.55s var(--ease-marke) 0.4s both; }
.hk-mod--2:hover .et2-h, .hk-mod--2:focus-visible .et2-h { animation: hk-fadein 0.4s ease 0.6s both; }
.hk-mod--2:hover .et2-hp, .hk-mod--2:focus-visible .et2-hp { animation: hk-pop 0.45s var(--ease-marke) 0.75s both; }

.hk-mod--3:hover .et3-l1, .hk-mod--3:focus-visible .et3-l1 { animation: hk-draw 0.5s ease 0.05s both; }
.hk-mod--3:hover .et3-l2, .hk-mod--3:focus-visible .et3-l2 { animation: hk-draw 0.5s ease 0.2s both; }
.hk-mod--3:hover .et3-l3, .hk-mod--3:focus-visible .et3-l3 { animation: hk-draw 0.5s ease 0.35s both; }
.hk-mod--3:hover .et3-l4, .hk-mod--3:focus-visible .et3-l4 { animation: hk-draw 0.5s ease 0.5s both; }
.hk-mod--3:hover .et3-s1, .hk-mod--3:focus-visible .et3-s1 { animation: hk-pop 0.4s var(--ease-marke) 0.7s both; }
.hk-mod--3:hover .et3-s2, .hk-mod--3:focus-visible .et3-s2 { animation: hk-pop 0.4s var(--ease-marke) 0.82s both; }
.hk-mod--3:hover .et3-s3, .hk-mod--3:focus-visible .et3-s3 { animation: hk-pop 0.4s var(--ease-marke) 0.94s both; }
.hk-mod--3:hover .et3-halo, .hk-mod--3:focus-visible .et3-halo { animation: hk-halo 0.55s var(--ease-marke) 1.05s both; }
.hk-mod--3:hover .et3-halo2, .hk-mod--3:focus-visible .et3-halo2 { animation: hk-halo 0.55s var(--ease-marke) 1.15s both; }

/* ---- Format-Galerie (dunkel) --------------------------------- */

/* ---- Das Ergebnis: vier Proof-Module ------------------------- */
.hk-results { padding: var(--space-sm) 0; background: var(--white); }
.hk-res-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.hk-res {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.hk-res img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.hk-res-body { padding: 13px 15px 15px; }
.hk-res-body h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; color: var(--ink); }
.hk-res-body p { margin: 0; font-size: 14px; line-height: 1.52; color: var(--ink-soft); }

/* ---- Kundenstimme + WhatsApp-Proofs (dunkel) ----------------- */
.hk-voice {
  padding: var(--space-sm) 0;
  background: var(--ink);
  color: rgba(255,255,255,0.82);
}
.hk-voice h2 { color: var(--white); }
.hk-voice-top {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 40px;
  align-items: center;
  margin-top: 22px;
}
.hk-voice-photo {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.hk-voice-quote { margin: 0; }
.hk-voice-quote p {
  margin: 0;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
  color: var(--white);
}
.hk-voice-foot {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 14px;
  margin-top: 14px;
}
.hk-voice-name { font-size: 14.5px; font-weight: 700; color: var(--white); }
.hk-voice-role { font-size: 13px; color: rgba(255,255,255,0.6); }
.hk-voice-ig {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 1px;
}
.hk-voice-ig:hover { color: var(--white); border-color: var(--peach); }

/* Karten-Deck: Chats und Kundenvideos gestaffelt wie ein Kontaktbogen */
.hk-deck {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  margin-top: 30px;
}
.hk-deckcard {
  --tilt: 0deg;
  margin: 0;
  background: var(--white);
  border-radius: 14px;
  padding: 10px 12px 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.4);
  transform: rotate(var(--tilt));
  display: flex; flex-direction: column;
}
/* alle fuenf Karten passen bei 1180px in EINE Reihe */
.hk-deckcard--chat { width: 250px; }
.hk-deckcard--clip { width: 150px; padding: 8px 8px 10px; }
.hk-deckcard--clip img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 10px;
}
.hk-deckcard--clip figcaption {
  margin-top: 8px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--teal-dark);
}
.hk-dc1 { --tilt: -2deg; }
.hk-dc2 { --tilt: 1.8deg; margin-top: 20px; }
.hk-dc3 { --tilt: -1deg; margin-top: 6px; }
.hk-dc4 { --tilt: 1.6deg; margin-top: 24px; }
.hk-dc5 { --tilt: -1.8deg; margin-top: 10px; }

/* Chat-Innenleben (unveraendert genutzt) */
.hk-chathead {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-dark);
}
.hk-chatdot { width: 7px; height: 7px; border-radius: 50%; background: var(--peach); flex-shrink: 0; }
.hk-chat {
  background: var(--wa-beige);
  border-radius: 10px;
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 7px;
  flex: 1 1 auto;
}
.hk-chat-bubble {
  background: var(--white);
  border-radius: 10px;
  border-top-left-radius: 4px;
  padding: 8px 11px 9px;
  max-width: 94%;
  box-shadow: 0 1px 1px rgba(26,35,34,0.12);
}
.hk-chat-bubble--out {
  align-self: flex-end;
  background: #D9FDD3;
  border-top-left-radius: 10px;
  border-top-right-radius: 4px;
}
.hk-chat-bubble p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #303c3b; }
.hk-chat-sender {
  font-size: 11.5px !important;
  font-weight: 800;
  color: var(--teal) !important;
  margin-bottom: 2px !important;
}
.hk-chat-bubble mark {
  background: rgba(237,191,139,0.5);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}
.hk-chat-caption {
  margin: 10px 0 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-soft);
}

/* ---- Übertragbar --------------------------------------------- */
.hk-learn { padding: var(--space-sm) 0; background: var(--teal-tint); }

.hk-learn-note {
  margin: 26px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(16,100,102,0.18);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  max-width: 76ch;
}

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 980px) {
  .hk-collage { max-width: 460px; justify-self: center; }
  .hk-kpis { grid-template-columns: 1fr; }
  .hk-kpi { padding: 12px 0; border-left: 0; border-top: 1px solid rgba(16,100,102,0.18); }
  .hk-kpi:first-child { padding-top: 0; border-top: 0; }
  .hk-shot { width: calc(33.33% - 12px); }
  .hk-et-grid { grid-template-columns: 1fr; }
  .hk-res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hk-voice-top { grid-template-columns: 1fr; gap: 26px; }}

@media (max-width: 560px) {
  /* Karten kontrolliert, keine Miniatur-Collage */
  .hk-collage { aspect-ratio: auto; max-width: 360px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hk-card { position: static; width: auto; }
  .hk-card--main { grid-column: 1 / -1; order: -1; }
  .hk-shot { width: calc(50% - 9px); }
  .hk-shot:nth-child(n) { margin-top: 0; }
  .hk-res-grid { grid-template-columns: 1fr; }
  .hk-deckcard--chat { width: 100%; max-width: 340px; }
  .hk-deckcard--clip { width: 194px; }}

@media (prefers-reduced-motion: reduce) {
  .hk-card, .hk-shot, .hk-deckcard { transition: none; }
  .hk-collage:hover .hk-card--m1, .hk-collage:hover .hk-card--chip,
  .hk-collage:hover .hk-card--shot, .hk-collage:hover .hk-card--main { transform: rotate(var(--tilt)); }}



/* ==========================================================================
   MOBILE-FEINSCHLIFF (Mobile-Audit 31.07.2026)
   Gilt ausschliesslich bis 640px. Desktop und Tablet bleiben unberuehrt.
   ========================================================================== */
@media (max-width: 640px) {
  
  /* Holger-Hero, Karten-Collage: unter 560px ist die Collage ein Raster. Die
     Text-Karte "Monat 12" wurde vom Raster auf die Hoehe der Bildkarte daneben
     gedehnt und hatte darunter rund 130px leere Flaeche. Sie soll nur so hoch
     sein wie ihr Inhalt. */
  .hk-card--chip { align-self: start; }}


/* ==========================================================================
   GRAFIK-FEINSCHLIFF - Phase 1 und 2 des Produktionsdurchlaufs, 03.08.2026
   --------------------------------------------------------------------------
   Sechs Pruefdurchgaenge haben jede beschriftete Grafik aller 16 Routen
   einzeln nachgemessen, bei 320 / 360 / 390 / 430 / 641 / 768 / 900 / 980 /
   1024 und 1280px. Aufgenommen ist hier ausschliesslich Fehlerbehebung:
   Beschnitt, Ueberlauf, Beschriftungen unter 11px, Linien ohne Endpunkt,
   verdeckte Texte, tote Flaeche. Vorschlaege, die Anordnung oder Aufbau einer
   Grafik aendern, sind bewusst NICHT enthalten.
   ========================================================================== */

@media (max-width: 640px) {

  /* --- /projekte/markenaufbau-fahrradhandel/, Ergebnis-Karten ----------- */
  /* Die Karten stehen mobil ueber die volle Breite, die Schriftgrade stammten
     aber noch aus dem vierspaltigen Raster (14.5px / 12.5px) und wirkten neben
     dem 15px-Fliesstext der Seite geschrumpft. */
  .hk-res-body { padding: 15px 18px 17px; }
  .hk-res-body h3 { font-size: 16px; }
  .hk-res-body p { font-size: 14px; line-height: 1.6; }}


/* --- /projekte/markenaufbau-fahrradhandel/, Etappe 01 ------------------ */
/* Die Beschriftung "regelmaessig veroeffentlicht" lief rechts aus ihrer Pille
   heraus (Text endet bei 282.8 Nutzereinheiten, die Pille bei 274) und war mit
   effektiv 10.2 bis 10.8px zu klein. Bei 320 bis 1600px gemessen: der
   Innenabstand rechts war ueberall negativ. Der Text passt jetzt in die Pille,
   die Gruppe wird rechtsbuendig vergroessert, effektiv 11.2 bis 11.9px, die
   Pille bleibt rechts auf der alten Kante. Ohne Media Query, weil der Fehler
   bei allen Breiten auftritt. .et1-chip bringt transform-box: fill-box schon
   mit, die Hover-Animation hk-fadein animiert nur opacity. */
.hk-mod--1 .et1-chip {
  transform-origin: right center;
  transform: scale(1.32);
}
.hk-mod--1 .et1-chip text { font-size: 7.5px; }

/* --- /projekte/markenaufbau-fahrradhandel/, Hero-Collage --------------- */
/* Unter 980px schrumpft die Collage auf 460px, die Prozentwerte blieben. Die
   Monat-12-Karte war dadurch nur noch rund 115px breit (Text in fuenf Fetzen)
   und ihre linke Kante lag unter der Hauptkarte. Jetzt stossen beide Karten
   aneinander statt sich zu ueberlagern; die Ergebniszeile der Hauptkarte
   bleibt unveraendert bei 46% Breite. */
@media (min-width: 561px) and (max-width: 980px) {
  .hk-card--main { left: 27%; }
  .hk-card--chip { width: 27%; }}


@media (max-width: 640px) {

  /* --- /projekte/markenaufbau-fahrradhandel/ --------------------------- */
  /* Unter der kurzen "Monat 12"-Karte blieb die rechte Spalte auf ganzer
     Resthoehe leer - ein grosses Loch direkt vor der Sektionsgrenze. Die
     Karte behaelt ihre Hoehe und wird ueber beide Kartenreihen mittig
     gesetzt: aus einem grossen Loch werden zwei ausgewogene Abstaende. */
  .hk-card--chip { grid-column: 2; grid-row: 2 / span 2; align-self: center; }}


/* /projekte/markenaufbau-fahrradhandel/: die Schriftanhebung der
   Ergebnis-Karten war an 640px gebunden, der Spaltenwechsel des Rasters aber
   an 980px. Dadurch schrumpfte die Typografie bei 641px, obwohl die Karte
   gleich breit blieb. */
@media (min-width: 641px) and (max-width: 980px) {
  .hk-res-body { padding: 15px 18px 17px; }
  .hk-res-body h3 { font-size: 16px; }
  .hk-res-body p { font-size: 14px; line-height: 1.6; }}


/* --- /projekte/markenaufbau-fahrradhandel/, Hero-Collage ---------------- */
/* Im 2-Spalten-Raster blieben zwei halbe Zellen leer: neben der kurzen
   Monat-12-Karte und neben "Ein Video". Neue Leserichtung: Ergebnis gross,
   Meilenstein als volle Bandkarte, darunter die beiden Bildkarten
   nebeneinander. */
@media (max-width: 560px) {
  .hk-collage .hk-card--main { order: 1; grid-column: 1 / -1; }
  .hk-collage .hk-card--chip { order: 2; grid-column: 1 / -1; }
  .hk-collage .hk-card--m1   { order: 3; }
  .hk-collage .hk-card--shot { order: 4; }}