/* Frühere Würfe — „Ils ont grandi"
   Zweiter Teil der Section #chiots: die Jahrgänge und die Welpen von damals,
   wie sie heute aussehen.

   Alles unter #chiots gescoped, wie die übrigen Regeln dieser Section: die
   Farbregel .split-text p:not(...) → ink-soft würde sonst hineinfärben.

   Die Klapp-Mechanik macht der Browser (<details>/<summary>), hier steht nur
   das Aussehen. Kein JavaScript, keine Höhen-Animation — ein aufgeklappter
   Jahrgang darf nicht ruckeln, wenn die Bilder nachladen. */

#chiots .portees { margin-top: 92px; }

#chiots .portees .section-head { margin-bottom: 34px; }
#chiots .pt-titel {
  font-family: var(--font-display); font-weight: 460;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; color: var(--ink);
}
#chiots .portees .section-head p {
  margin-top: 12px; color: var(--ink-soft); font-size: 17px; max-width: 60ch;
}

/* ---------------- Ein Jahrgang ---------------- */
#chiots .portee {
  border-top: 1px solid rgba(128,116,100,0.30);
}
#chiots .portee:last-of-type { border-bottom: 1px solid rgba(128,116,100,0.30); }

/* `center` statt `baseline`: Sobald Gesichter in der Zeile stehen, ist die
   Schriftlinie nicht mehr die richtige Achse. */
#chiots .pt-kopf {
  display: flex; align-items: center; gap: 22px;
  padding: 18px 4px; cursor: pointer;
  list-style: none;                 /* Standard-Dreieck weg … */
}
#chiots .pt-kopf::-webkit-details-marker { display: none; }   /* … auch in Safari */

/* Eigener Pfeil ganz rechts: dreht sich beim Aufklappen. Das `margin-left: auto`
   sitzt jetzt an .pt-zahl — der Pfeil folgt ihr im festen Abstand. */
#chiots .pt-kopf::after {
  content: ""; flex: none;
  width: 10px; height: 10px; align-self: center;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform 0.25s ease;
}
#chiots .portee[open] > .pt-kopf::after { transform: rotate(-135deg); }

#chiots .pt-kopf:hover .pt-jahr,
#chiots .portee[open] > .pt-kopf .pt-jahr { color: var(--accent); }

#chiots .pt-jahr {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 3vw, 34px); line-height: 1;
  color: var(--ink); transition: color 0.25s ease;
  font-variant-numeric: tabular-nums;
}
/* ---------------- Das Elternpaar ----------------
   Mutter links, Vater rechts, die Namen rahmen das ×, die Gesichter rahmen die
   Namen. Ein fehlendes Foto lässt den Namen einfach nachrücken — die Zeile darf
   nicht verrutschen, nur weil der Deckrüde keins hat. */
#chiots .pt-paar { display: flex; align-items: center; gap: 12px; min-width: 0; }
#chiots .pt-elter { display: flex; align-items: center; gap: 12px; min-width: 0; }

#chiots .pt-name {
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; color: var(--ink-soft);
}
#chiots .pt-x {
  color: var(--accent-2-text); font-style: normal;
  font-size: 17px; flex: none;
}

#chiots .pt-portrait { display: block; flex: none; }
#chiots .pt-portrait img {
  display: block; width: 56px; height: 56px;
  border-radius: 50%; object-fit: cover;
  /* Der Ring liegt innen (box-shadow statt border): So bleibt der Kreis exakt
     56px und die Zeilenhöhe unabhängig davon, ob er gerade Farbe hat. */
  box-shadow: 0 0 0 2px rgba(78,116,115,0.28), 0 4px 12px rgba(35,28,20,0.14);
  transition: box-shadow 0.25s ease;
}
#chiots .pt-kopf:hover .pt-portrait img,
#chiots .portee[open] > .pt-kopf .pt-portrait img {
  box-shadow: 0 0 0 2px var(--accent), 0 6px 16px rgba(35,28,20,0.20);
}
/* Rechtsbündig, damit die Anzahlen aller Jahrgänge untereinander fluchten —
   sonst wandert sie mit der Länge der Elternnamen und die Zeilen wirken
   ausgefranst. */
#chiots .pt-zahl {
  margin-left: auto; flex: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-2-text); white-space: nowrap;
}

#chiots .pt-inhalt { padding: 2px 4px 34px; }
#chiots .pt-notiz {
  font-family: var(--font-display); font-style: italic;
  color: var(--ink-soft); font-size: 16px; margin-bottom: 22px; max-width: 60ch;
}

/* ---------------- Die Welpen ----------------
   Runde Portraets mit dem Namen darunter — dieselbe Form wie die Eltern eine
   Zeile darueber, und der Wurf liest sich als das, was er ist: eine Reihe
   Gesichter.

   Grosse Karten waren hier der falsche Griff: Der letzte Wurf hatte ZEHN
   Welpen; als Karten waren das rund 1100 px Abschnitt und zwei leere Plaetze in
   der letzten Reihe. Als Kreise sind es rund 350 px, und die letzte Reihe faellt
   nicht auf.

   Die Spaltenzahl steht in `data-spalten` und wird SERVERSEITIG gerechnet
   (portee_spalten() in app/vorlagen/chiots.php): zehn Welpen werden zweimal
   fuenf, acht zweimal vier, zwoelf zweimal sechs. „So viele wie passen" waere
   hier falsch — zehn ergaeben sieben und drei, und die zweite Reihe stuende
   verloren da.

   Warum ein Attribut und keine Angabe am Element: Die Content-Security-Policy
   erlaubt kein `style="…"`. Also acht kurze Regeln statt einer Rechnung im
   Markup; mehr als sechs Gesichter je Reihe gibt es ohnehin nicht.

   LINKSBUENDIG: Die Reihe beginnt an derselben Kante wie die Jahreszahl und der
   Text darueber. Zentriert waere sie eine zweite Achse im selben Block — dann
   muesste auch alles darueber mittig stehen, und der Abschnitt haette zwei
   Ausrichtungen statt einer.

   Das Kreisbild ist der Index, nicht die Ansicht: Ein Klick oeffnet die
   Grossansicht mit dem vollstaendigen Foto im Originalformat. */
#chiots .pup-cards {
  /* Breite eines Gesichts und Abstand stehen als Variablen da, weil die
     Containerbreite daraus gerechnet wird. Nur diese beiden Werte aendern sich
     auf kleinen Geraeten — die Rechnung bleibt dieselbe. */
  --breit: 132px;
  --luecke: 18px;
  --spalten: 4;

  /* Der Kniff: Statt Rasterspalten wird der Container genau so breit gemacht,
     dass GENAU `--spalten` Gesichter hineinpassen. Der Umbruch faellt damit an
     der gewollten Stelle — zehn Welpen werden zweimal fuenf und nicht sieben
     und drei. */
  max-width: calc(var(--spalten) * var(--breit) + (var(--spalten) - 1) * var(--luecke));

  display: flex; flex-wrap: wrap;
  gap: 30px var(--luecke);
}
#chiots .pup-cards[data-spalten="1"] { --spalten: 1; }
#chiots .pup-cards[data-spalten="2"] { --spalten: 2; }
#chiots .pup-cards[data-spalten="3"] { --spalten: 3; }
#chiots .pup-cards[data-spalten="4"] { --spalten: 4; }
#chiots .pup-cards[data-spalten="5"] { --spalten: 5; }
#chiots .pup-cards[data-spalten="6"] { --spalten: 6; }

/* Kein gemeinsames `gap`: Der Abstand vom Gesicht zum Namen ist ein anderer als
   der vom Namen zum Zusatz. Ein einziger Wert fuer beide riss den Zusatz vom
   Namen los, zu dem er gehoert. */
#chiots .pup-card {
  flex: 0 0 var(--breit);
  display: flex; flex-direction: column; align-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  text-align: center; font: inherit; color: inherit;
}
#chiots .pup-rund { display: block; }
#chiots .pup-rund img {
  display: block; width: 116px; height: 116px;
  border-radius: 50%; object-fit: cover;
  /* Ring innen (box-shadow statt border), damit der Kreis exakt 116px bleibt
     und die Zeilenhöhe nicht springt, sobald er Farbe annimmt. */
  box-shadow: 0 0 0 2px rgba(78,116,115,0.28), 0 6px 16px rgba(35,28,20,0.16);
  transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
#chiots .pup-card:hover .pup-rund img {
  box-shadow: 0 0 0 2px var(--accent), 0 10px 22px rgba(35,28,20,0.24);
  transform: scale(1.04);
}
/* `max-width` ist hier keine Kosmetik: Ohne sie schiebt sich ein Zusatz wie
   „vit en Normandie" aus seiner Spalte heraus und steht neben dem falschen
   Gesicht. Mit ihr bricht er sauber um. */
#chiots .pup-name {
  display: block; max-width: 100%; overflow-wrap: break-word;
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 480;
  font-size: 20px; line-height: 1.15; color: var(--ink);
}
#chiots .pup-note {
  display: block; max-width: 100%; overflow-wrap: break-word;
  margin-top: 1px; font-size: 13px;
  line-height: 1.25; font-style: italic;
  font-family: var(--font-display); color: var(--ink-soft);
}
#chiots .pup-card:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  #chiots .pt-kopf::after,
  #chiots .pt-portrait img,
  #chiots .pup-rund img { transition: none; }
  #chiots .pup-card:hover .pup-rund img { transform: none; }
}