/* Anleitungsübersicht (2026-09-28).
 *
 * DER AUFTRAG, in zwei Schritten: erst „die anleitung seite sieht aus wie
 * scheiße“, dann „soll mehr nach HEPRO aussehen weißt du? schon agentur
 * like wow“.
 *
 * DER ZWEITE SATZ IST DER WICHTIGE, und er hat einen konkreten Befund hinter
 * sich: Die erste Fassung war ein sauberes Kachelraster — aber ein
 * allgemeines. Weiße Flächen, linksbündig, Systemschrift. Diese Website
 * arbeitet anders, und zwar überall sonst schon:
 *
 *   Produktkachel (styles.css, .productItem)   Fläche #f4f4f4, zentriert,
 *                                              20px 30px Innenabstand
 *   Überschriften (h3, h4, strong)             ZapfHumanist601BT-Demi/-Bold
 *   Sektionsüberschrift (h2)                   zentriert, gesperrt 0.025em
 *   Hausfarbe                                  #cd1619, sparsam
 *
 * Genau daraus ist diese Datei gebaut. Kein Token hier ist erfunden; jeder
 * steht so im Bestand der Website. „Nach HEPRO aussehen“ heißt nicht, etwas
 * Neues zu erfinden, das nach HEPRO AUSSIEHT — es heißt, das zu benutzen,
 * was HEPRO IST.
 *
 * DAS 16:9-FENSTER IST NICHT NUR GESTALTUNG: Die Vorschaubilder von YouTube
 * kommen als `hqdefault.jpg` — 480 × 360, also 4:3 mit eingebrannten
 * SCHWARZEN BALKEN oben und unten. `object-fit: cover` schneidet sie weg,
 * ohne dass ein Bild neu geholt werden muss.
 *
 * Liegt NUR auf den beiden Übersichten (/de/anleitungen, /en/instructions),
 * eingebunden über den `css`-Schlüssel in EIGENE_SEITEN_INHALT (build.py).
 * Zur Einschränkung, dass die Einzelseiten es über die Vorlage mit erben,
 * siehe den Kommentar bei blog_stilblatt — hier gilt dasselbe.
 */

/* ---- Farben und Maße aus dem Bestand ----------------------------------- */

.hepro-anleitungen {
  --an-flaeche: #f4f4f4;        /* .productItem */
  --an-flaeche-an: #efedec;     /* dieselbe Fläche, eine Spur tiefer */
  --an-rot: #cd1619;            /* Hausfarbe */
  --an-text: #3c3c3b;           /* Fließtext der Website */
  --an-leise: #5a5a59;          /* Sekundärtext */
  --an-linie: #b3b3b3;          /* Linien, wie in blog.css */
  --an-lauf: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Zwischenüberschrift je Maschinenfamilie ---------------------------
 * Die Website setzt Sektionsüberschriften zentriert und gesperrt (h2). Das
 * wird hier fortgeführt, mit einem kurzen roten Strich darunter — dieselbe
 * Marke, die unter dem Logo und über dem Fußzeilenblock steht. Sie ist das
 * eine Element, das diese Seite unverwechselbar zu HEPRO macht; deshalb
 * genau dieses und kein zweites. */
.anleitung-gruppe {
  margin: 64px 0 28px;
  font-family: 'ZapfHumanist601BT-Demi', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--an-text);
}

.anleitung-gruppe::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 14px auto 0;
  background: var(--an-rot);
}

.anleitung-gruppe:first-child {
  margin-top: 8px;
}

/* ---- Das Raster --------------------------------------------------------
 * Drei Kacheln nebeneinander, zwei auf dem Tablet, eine auf dem Handy.
 * Der Abstand 30px ist der der Produktkacheln (margin-bottom: 30px).
 *
 * FLEXBOX UND NICHT GRID, und das ist am 2026-09-28 zweimal schiefgegangen,
 * bevor es stand:
 *
 *   1. `grid-template-columns: repeat(auto-fill, minmax(290px, 1fr))` füllt
 *      die Breite immer ganz — eine Gruppe mit ZWEI Anleitungen klebte links
 *      und ließ ein Drittel leer. Drei der vier Familien haben keine durch
 *      drei teilbare Zahl (2, 5, 3, 2), die schiefe Reihe war also der
 *      Regelfall, nicht die Ausnahme.
 *   2. Der Versuch `minmax(280px, 360px)` mit `justify-content: center` war
 *      schlimmer: `auto-fill` zählt die Spuren nach der OBERGRENZE, wenn die
 *      eine feste Länge ist. In der rund 1.030 px breiten Inhaltsspalte
 *      passten damit nur noch ZWEI Kacheln je Reihe. Gemessen, nicht
 *      überlegt — der Screenshot zeigte 2+2+1 statt 3+2.
 *
 * Grid kann eine unvollständige LETZTE Reihe nicht zentrieren; Flexbox tut
 * es von sich aus. `flex: 0 1 ...` ist dabei entscheidend: Mit `flex-grow`
 * zöge eine Zweierreihe ihre Kacheln auf halbe Seitenbreite auf. */
.anleitungsliste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.anleitungsliste > .anleitung-kachel {
  flex: 0 1 calc((100% - 60px) / 3);
  min-width: 280px;
}

@media (max-width: 991px) {
  .anleitungsliste > .anleitung-kachel {
    flex-basis: calc((100% - 30px) / 2);
  }
}

@media (max-width: 767px) {
  .anleitungsliste > .anleitung-kachel {
    flex-basis: 100%;
    min-width: 0;
  }
}

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

.anleitung-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--an-flaeche);
  text-align: center;
  transition: background-color var(--an-lauf), box-shadow var(--an-lauf),
    transform var(--an-lauf);
}

.anleitung-kachel:hover {
  background: var(--an-flaeche-an);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -6px rgba(28, 28, 28, 0.22);
}

/* ---- Bild --------------------------------------------------------------
 * Randlos oben in der Fläche: Die Produktkacheln der Website haben ihr Bild
 * im Innenabstand, weil dort freigestellte Maschinen auf Grau stehen. Ein
 * Videostandbild ist rechteckig und randvoll — es im Innenabstand zu zeigen
 * ergäbe einen grauen Rahmen um ein Foto, und das sieht nach Platzhalter
 * aus. */
.anleitung-bild {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1c1c1c;
}

.anleitung-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--an-lauf);
}

.anleitung-kachel:hover .anleitung-bild img {
  transform: scale(1.04);
}

/* Das Abspielzeichen. Es steht da, weil hinter jeder Kachel ein VIDEO liegt
   und das Vorschaubild allein das nicht verrät — bei den Anleitungen, deren
   Standbild eine HEPRO-Titelkarte ist, schon gar nicht.
   Zwei Formen statt eines Bildes: ::before ist die Scheibe, ::after das
   Dreieck aus Rahmenlinien. Damit lädt die Seite nichts nach. */
.anleitung-bild::before,
.anleitung-bild::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  transition: background-color var(--an-lauf), transform var(--an-lauf);
}

.anleitung-bild::before {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.62);
}

.anleitung-bild::after {
  margin: -10px 0 0 -5px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 17px solid #fff;
}

.anleitung-kachel:hover .anleitung-bild::before {
  background: var(--an-rot);
  transform: scale(1.08);
}

/* ---- Text --------------------------------------------------------------
 * Innenabstand wie bei den Produktkacheln (20px 30px), unten etwas mehr,
 * damit die Kachel nicht auf dem letzten Wort endet. */
.anleitung-text {
  padding: 20px 24px 26px;
}

.anleitung-titel {
  margin: 0;
  font-family: 'ZapfHumanist601BT-Demi', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: normal;
  line-height: 1.35;
  color: #1c1c1c;
  transition: color var(--an-lauf);
}

.anleitung-kachel:hover .anleitung-titel {
  color: var(--an-rot);
}

/* Der Verweis trägt die Farbe der Überschrift, nicht die Linkfarbe — die
   ganze Kachel ist der Knopf, ein zweites blaues Wort darin wäre ein
   zweites Angebot. */
.anleitung-titel a,
.anleitung-titel a:hover,
.anleitung-titel a:focus {
  color: inherit;
  text-decoration: none;
}

/* Der Verweis bedeckt die Kachel — ein Verweis je Kachel, benannt durch den
   Titel. Dasselbe Muster wie .hepro-kachel-link bei den Produktkacheln,
   hier ohne zweites Element, weil die Überschrift den Namen schon trägt. */
.anleitung-titel a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.anleitung-titel a:focus-visible::after {
  outline: 3px solid var(--an-rot);
  outline-offset: -3px;
}

/* Die Maschine unter dem Titel: gesperrt und klein, wie die Angabenzeilen
   der Website. Sie sagt, welches Gerät gemeint ist, wenn die Gruppe nur die
   Familie nennt. */
.anleitung-maschine {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--an-leise);
}

.anleitung-kachel .anleitung-anriss {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--an-leise);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Was der Browser mitbringt -----------------------------------------
 * Markierung und Fokusring gehören zum Entwurf wie alles andere. Ohne diese
 * fünf Zeilen trägt die Seite an zwei Stellen die Vorgabe des Browsers, die
 * zu keinem Gestaltungssystem gehört. */
.hepro-anleitungen ::selection {
  background: var(--an-rot);
  color: #fff;
}

/* ---- Handy ------------------------------------------------------------- */

@media (max-width: 767px) {
  .anleitungsliste {
    gap: 20px;
  }
  .anleitung-gruppe {
    margin: 44px 0 22px;
  }
  .anleitung-bild::before {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
  }
  .anleitung-text {
    padding: 16px 18px 20px;
  }
}

/* Bewegung ist ein Angebot, keine Vorschrift. */
@media (prefers-reduced-motion: reduce) {
  .anleitung-kachel,
  .anleitung-bild img,
  .anleitung-bild::before,
  .anleitung-bild::after,
  .anleitung-titel {
    transition: none;
  }
  .anleitung-kachel:hover {
    transform: none;
  }
  .anleitung-kachel:hover .anleitung-bild img {
    transform: none;
  }
}