/* ===========================================================================
   Artikelseiten: News (news-*.php) und Kataloge (kataloge-*.php)
   ===========================================================================

   Bewusst kein Foto-Hero mit Textpanel darüber, wie ihn die Produktseiten
   tragen. Das Material ist hier ein anderes: Die Motive sind Aushänge,
   Herstellerplakate und Magazintitel — Artwork, das seine eigene Typografie
   schon mitbringt. Eine Überschrift darüberzulegen hiesse, Schrift auf
   Schrift zu setzen; beim Betriebsurlaubs-Aushang stünde die Meldung dann
   zweimal im selben Bild.

   Deshalb: erst der Artikelkopf auf weisser Fläche, dann das Motiv als
   eigenständiges Bild darunter. Dieselbe Formensprache wie der Rest der
   Website (roter Kicker, Display-Serife für den Titel, dieselben Abstände),
   aber eine eigene Komposition.

   Die Bilder werden eingepasst und nicht beschnitten — dieselbe Begründung
   wie bei der Katalogleiste auf der Startseite: Bei Plakaten und Titelseiten
   fällt sonst genau das weg, was die Aussage trägt (Kopfzeile, Markenlogo,
   Garantiesiegel).
   =========================================================================== */

/* --- Kopf --- */

/* Der Kopf laeuft ueber die volle Breite des Rasters. Nur der Vorspann
   bekommt eine Lesegrenze — eine Zeile, die ueber 1200 px durchlaeuft,
   verliert am Zeilenende den Anschluss. */
.artikel__head {
  display: grid;
  gap: var(--space-s);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.artikel__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Kategorie und Zeitraum stehen als Paar unter dem Titel. Sie sind
   Metadaten, kein Fliesstext — deshalb kleiner und mit Abstand gesetzt. */
.artikel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
  font-size: var(--fs-small);
  color: var(--color-ink);
  margin: 0;
}

.artikel__meta > * {
  display: inline-flex;
  gap: 0.4rem;
}

.artikel__meta dt {
  font-weight: 500;
  opacity: 0.55;
}

.artikel__meta dd {
  margin: 0;
}

.artikel__lead {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}

/* --- Eine Meldung, ein Motiv: Bild und Text nebeneinander --- */

/* Für Meldungen mit genau einem Motiv, etwa den Betriebsurlaubs-Aushang.
   Das Bild steht links, der Text daneben — beide zusammen füllen die
   Breite des Containers. */
.artikel__layout {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .artikel__layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.artikel__media {
  min-width: 0;
}

/* --- Bilder --- */

.artikel__figure {
  margin: 0;
}

/* Eingepasst statt beschnitten: Das sind Plakate und Titelseiten, bei denen
   sonst genau das wegfällt, was die Aussage trägt — Kopfzeile, Markenlogo,
   Garantiesiegel. Dieselbe Regel wie in der Katalogleiste der Startseite. */
.artikel__figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(76vh, 820px);
  border-radius: var(--radius-s);
}

/* --- Mehrere Motive: Text oben, Galerie darunter --- */

/* Untereinander gestapelt sahen zwei Motive aus wie eine abgebrochene
   Spalte — links zwei Bilder, rechts eine halbe leere Seite. Nebeneinander
   in einer ausgerichteten Reihe füllen sie die Breite und stehen als das
   da, was sie sind: zwei Blätter zur selben Meldung.

   Dasselbe Prinzip wie die Galerien der Produktseiten: `flex-grow: var(--ar)`
   bei `flex-basis: 0` macht die Breite jedes Bildes proportional zu seinem
   Seitenverhältnis. Dadurch sind alle Bilder einer Reihe exakt gleich hoch,
   und keines wird beschnitten — was bei Plakaten und Titelseiten
   entscheidend ist. Die Seitenverhältnisse rechnet $galerieReihen() in
   header.php aus. */
.artikel__galerie {
  /* Zielhöhe einer Reihe. Sie ist die einzige Stellschraube für die Grösse
     der Motive — die Breite ergibt sich daraus von selbst. */
  --galerie-hoehe: clamp(220px, 27vw, 380px);
  --galerie-abstand: clamp(0.9rem, 1.8vw, 1.3rem);

  margin-top: clamp(2rem, 4vw, 3.25rem);
}

/* Ein einzelnes Motiv unter dem Text folgt derselben Galeriehöhe. */
.artikel__galerie--einzelbild .artikel__figure img {
  max-height: var(--galerie-hoehe);
}

/* Die Reihe ist genau so breit, wie sie bei der Zielhöhe sein muss.

   Ohne diese Grenze zog sie sich über die volle Containerbreite, und zwei
   Motive standen 625 px hoch da — für eine Begleitabbildung zu gross. Die
   Rechnung: Bei gleicher Höhe verhält sich die Breite jedes Bildes wie sein
   Seitenverhältnis, also ist die Reihe so breit wie die Summe aller
   Seitenverhältnisse mal der Höhe, plus die Abstände dazwischen. Beide
   Werte liefert das PHP als --ar-summe und --anzahl mit. */
.artikel__galerie-reihe {
  display: flex;
  gap: var(--galerie-abstand);
  align-items: flex-start;
  max-width: calc(
    var(--galerie-hoehe) * var(--ar-summe, 3)
    + (var(--anzahl, 3) - 1) * var(--galerie-abstand)
  );
}

.artikel__galerie-item {
  flex: var(--ar, 1.5) 1 0;
  min-width: 0;
  margin: 0;
}

.artikel__galerie-item img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: var(--radius-s);
}

/* Am Handy stünden zwei Motive nebeneinander briefmarkengross. Dort
   bekommt jedes die volle Breite. */
@media (max-width: 700px) {
  .artikel__galerie-reihe {
    flex-direction: column;
    gap: 1.35rem;
  }
}

/* Verlinkte Titelblätter: Wo mehrere Kataloge zu einem Text gehören (Haas),
   führt jedes Blatt auf sein eigenes PDF. Die Bildunterschrift nennt den
   Katalog — ohne sie wäre am Titelblatt nicht zu erkennen, welches PDF sich
   dahinter öffnet. */
/* Wo mehrere Kataloge zu einem Text gehören (Haas), trägt jedes Titelblatt
   seinen eigenen Knopf. Dieselbe Schaltfläche wie auf den übrigen
   Katalogseiten — vorher war es hier eine verlinkte Bildunterschrift, was
   auf jeder Seite anders aussah.

   Der Knopf bekommt die volle Spaltenbreite, damit die drei nebeneinander
   gleich breit stehen, und bricht seinen Text um, wenn die Spalte schmal
   wird. */
.artikel__galerie-aktion {
  margin-top: var(--space-s);
}

.artikel__galerie-aktion .btn {
  display: flex;
  width: 100%;
  text-align: center;
  white-space: normal;
  height: auto;
  min-height: var(--btn-height);
  padding-block: 0.5rem;
}

/* Verlinktes Titelblatt.

   Das Blatt selbst führt auf den Katalog, nicht nur der Knopf darunter — wer
   ein Cover sieht, klickt es an.

   Bewusst ohne jeden Effekt beim Darüberfahren: kein Anheben, kein Schatten,
   keine Unterstreichung. Das Blatt sieht aus wie ein Blatt und bewegt sich
   nicht. Nur die Tastatur bekommt einen Rahmen — der erscheint beim
   Weiterspringen mit der Tabulatortaste, nicht mit der Maus, und ohne ihn
   wüsste niemand, wo er sich gerade befindet (WCAG 2.4.7).

   `display: block` statt inline: Sonst setzt die Zeilenhöhe des Links unter
   dem Bild einen Streifen an, der die Ecken des Radius abschneidet. */
.artikel__bildlink {
  display: block;
  width: fit-content;
  border-radius: var(--radius-s);
}

/* Die Website unterstreicht jeden Verweis beim Darüberfahren und färbt ihn
   rot (styles.css, „Einheitliches Verhalten aller Verweise"). Für ein Blatt
   gilt das ausdrücklich nicht — hier wird die Regel abbestellt. Zu sehen wäre
   davon ohnehin nichts, weil das Bild ein Blockelement ist und die
   Beschriftung ausgeklammert; die Zeilen stehen als Absicht da, damit ein
   späterer Umbau des Bildes nicht plötzlich einen Strich hervorbringt. */
.artikel__bildlink:hover,
.artikel__bildlink:focus-visible {
  color: inherit;
  text-decoration: none;
}

.artikel__bildlink:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

/* In der Galerie füllt das Blatt seine Spalte — dort darf der Link nicht auf
   die Bildbreite schrumpfen, sonst bricht die Reihenrechnung. */
.artikel__galerie-item .artikel__bildlink {
  width: 100%;
}

.artikel__bildtext {
  font-size: var(--fs-caption);
  color: var(--color-ink);
  opacity: 0.6;
  margin-top: var(--space-xs);
  max-width: 52ch;
}

/* --- Fliesstext --- */

/* Der Text laeuft ueber die volle Breite. In der zweispaltigen Fassung
   (eine Meldung, ein Motiv) ist das die rechte Spalte, sonst der ganze
   Container. */
.artikel__body {
  min-width: 0;
}

.artikel__body p {
  font-size: var(--fs-body-strong);
  line-height: 1.6;
  margin: 0 0 var(--space-m);
}

.artikel__body p:last-child {
  margin-bottom: 0;
}

/* --- Fussbereich --- */

.artikel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Der Rückweg ist ein Textlink, kein zweiter Knopf: Sonst stünden zwei
   gleich schwere Schaltflächen nebeneinander und keine führte erkennbar
   weiter als die andere. */
.artikel__back {
  font-size: var(--fs-small);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding-bottom: 2px;
}

.artikel__back:hover,
.artikel__back:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}