/* Register: de lijst van series is tekst. Zeer grote titels onder elkaar
   met het aantal foto's ernaast; het beeld verschijnt als je een titel
   aanwijst. Eén schreefloze letter in twee uitersten. */

.thema-register {
  --kop-gewicht: 700;
  --kop-spatiering: -0.05em;
  --gat: 0px;
  --h1: clamp(3rem, 10vw, 9rem);
  --h2: clamp(1.6rem, 3vw, 2.4rem);
  --blok-ruimte: clamp(56px, 8vw, 120px);
}

.thema-register h1 { line-height: 0.9; }

.thema-register .kop { padding-block: 16px; border-bottom: 1px solid var(--lijn); }
.thema-register .merk-naam { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.02em; }
.thema-register .merk-sub, .thema-register .menu a { font-size: 0.8rem; }
.thema-register .menu a[aria-current] { color: var(--accent); border-bottom-color: transparent; }

/* Boven een lijst staat een klein label, geen grote kop. */
.thema-register .series-blok .blok-kop, .thema-register .galerij-blok .blok-kop, .thema-register .nieuws-blok .blok-kop {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 32px; margin-bottom: 14px;
}
.thema-register .series-blok .blok-kop h1, .thema-register .series-blok .blok-kop h2,
.thema-register .galerij-blok .blok-kop h2, .thema-register .nieuws-blok .blok-kop h2 {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4;
}
.thema-register .blok-kop .proza { margin-top: 0; font-size: 0.86rem; }

/* De lijst. */
.thema-register .series { display: block; border-top: 1px solid var(--lijn); }
.thema-register .serie-tegel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 24px; padding: clamp(8px, 1.4vw, 18px) 0; border-bottom: 1px solid var(--lijn);
}
.thema-register .serie-info { display: contents; }
.thema-register .serie-info h3 { font-size: clamp(2.6rem, 9vw, 8.6rem); line-height: 0.94; letter-spacing: -0.055em; transition: color 0.2s; }
.thema-register .serie-tegel:hover h3 { color: var(--accent); }
.thema-register .serie-aantal { margin: 0; font-size: 0.8rem; white-space: nowrap; color: inherit; }
.thema-register .serie-beeld {
  position: absolute; z-index: 3; right: 14%; top: 50%;
  width: clamp(220px, 27vw, 430px); aspect-ratio: 4 / 3;
  transform: translateY(-50%) rotate(-2deg); opacity: 0; pointer-events: none;
  transition: opacity 0.2s; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5);
}
.thema-register .serie-tegel:nth-child(even) .serie-beeld { right: 30%; transform: translateY(-50%) rotate(1.5deg); }
.thema-register .serie-tegel:hover .serie-beeld { opacity: 1; }
.thema-register .serie-tegel:hover .serie-beeld img { transform: none; }

.thema-register .omslag-kop { font-size: clamp(3rem, 10vw, 9rem); line-height: 0.9; max-width: 12ch; }
.thema-register .blok > .galerij-kolom { max-width: 1240px; }
.thema-register .galerij-item:hover img { transform: none; }
.thema-register .serie-kop .proza { font-size: 1.1rem; }

.thema-register .knop { border-radius: 0; background: var(--tekst); color: var(--bg); border-color: var(--tekst); font-weight: 600; }
.thema-register .knop:hover { background: var(--accent); border-color: var(--accent); color: var(--op-accent); opacity: 1; }
.thema-register .knop-lijn { background: transparent; color: var(--tekst); }
.thema-register .tarief { background: transparent; border: 1px solid var(--lijn); }
.thema-register .tarief-prijs { color: var(--tekst); font-weight: 700; }
.thema-register .contact-formulier input, .thema-register .contact-formulier textarea, .thema-register .contact-formulier select { border-color: var(--lijn); }
.thema-register .serie-nav a { font-size: clamp(1.6rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.thema-register .citaat-blok blockquote { text-align: left; margin-inline: 0; }
.thema-register .citaat-blok blockquote p { font-size: clamp(1.8rem, 4.4vw, 3.8rem); line-height: 1; }

/* Zonder muis staat het beeld klein naast de titel. */
@media (hover: none), (max-width: 820px) {
  .thema-register .serie-tegel { grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
  .thema-register .serie-beeld,
  .thema-register .serie-tegel:nth-child(even) .serie-beeld {
    position: static; width: 76px; aspect-ratio: 1; transform: none; opacity: 1; box-shadow: none;
  }
  .thema-register .serie-info h3 { font-size: clamp(1.8rem, 8vw, 3.4rem); }
}