/* ====================================================================
   Die Werkliste · /arbeiten.php
   --------------------------------------------------------------------
   Seit Fassung 8 im Look des Vorhangs: heller Grund, weiße Karten
   mit Bühnenecke, die dunkle Vorführ-Bühne, unten der Absprung.
   Läuft zusätzlich zu style.css (Token, Kopfleiste, Chips, Knöpfe,
   Fussblock kommen von dort).

   Die Fahr-Mechanik der Kacheln ist aus Fassung 7 übernommen: Das
   Standbild zeigt die GANZE Seite und fährt beim Zeigen hindurch ·
   die Dauer bringt jedes Bild als Klasse werk-lauf-<s> mit, die
   Seite rechnet sie aus der gemessenen Bildhöhe.
   ==================================================================== */

/* -- Der Kopf ------------------------------------------------------- */

.werk-kopf-innen { max-width: var(--feld-breit); }

.werk-kopf h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  font-weight: 420;
  letter-spacing: -0.02em;
  line-height: 1.02;
  max-width: 14em;
  text-wrap: balance;
}

.werk-vorspann {
  display: grid;
  gap: 1.25rem 3rem;
  max-width: 60rem;
}

.werk-vorspann p {
  margin: 0;
  color: var(--grau);
  line-height: 1.6;
}

@media (min-width: 48rem) {
  .werk-vorspann { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- Das Gitter ------------------------------------------------------ */

.werke { margin-top: clamp(2.5rem, 5vw, 4rem); }

.werk-gitter {
  list-style: none;
  margin: 0;
  padding-block: 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 56rem) {
  .werk-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.werk { display: grid; }

.werk-kachel {
  display: grid;
  background: var(--karte);
  border: 1px solid rgb(21 21 21 / 0.08);
  border-radius: var(--ecke-buehne);
  overflow: hidden;
  color: var(--tinte);
  text-decoration: none;
  transition: translate 250ms var(--zug), border-color 250ms ease;
}

a.werk-kachel:hover,
a.werk-kachel:focus-visible {
  translate: 0 -4px;
  border-color: rgb(21 21 21 / 0.25);
}

/* Die ruhende Kachel (Fassung ohne Ordner) sieht gleich aus, hebt
   nur nicht. */
.werk-kachel--ruht { cursor: default; }

/* -- Das Fenster mit der Fahrt ---------------------------------------
   container-type: size macht die Kastenhöhe als 100cqh messbar.
   Damit fährt das Bild genau bis zu seinem unteren Ende und keinen
   Punkt weiter. Der Ausschnitt hängt an der Oberkante: Die Mitte
   einer Website sagt nichts. */

.werk-schau {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--hell-2);
  aspect-ratio: 16 / 11;
  container-type: size;
}

.werk-schau img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  /* Zurück geht es schnell und weich, hin langsam und gleichmäßig ·
     die Dauer steht an der Laufklasse. */
  transition: transform .7s var(--zug);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .werk-kachel:hover .werk-lauf,
  .werk-kachel:focus-visible .werk-lauf {
    transform: translateY(calc(100cqh - 100%));
    transition-duration: var(--schaudauer, 8s);
    transition-timing-function: linear;
    /* Eine Viertelsekunde Vorlauf, sonst läuft beim Überfahren des
       Gitters der Reihe nach alles los. */
    transition-delay: .25s;
  }
}

/*
 * Die Laufdauer als Klasse und nicht als style-Attribut: Die Domain
 * schickt style-src 'self' ohne 'unsafe-inline', ein
 * style="--schaudauer: 7s" würde live still verworfen.
 */
.werk-lauf-4  { --schaudauer:  4s; }
.werk-lauf-5  { --schaudauer:  5s; }
.werk-lauf-6  { --schaudauer:  6s; }
.werk-lauf-7  { --schaudauer:  7s; }
.werk-lauf-8  { --schaudauer:  8s; }
.werk-lauf-9  { --schaudauer:  9s; }
.werk-lauf-10 { --schaudauer: 10s; }
.werk-lauf-11 { --schaudauer: 11s; }
.werk-lauf-12 { --schaudauer: 12s; }
.werk-lauf-13 { --schaudauer: 13s; }
.werk-lauf-14 { --schaudauer: 14s; }
.werk-lauf-15 { --schaudauer: 15s; }
.werk-lauf-16 { --schaudauer: 16s; }
.werk-lauf-17 { --schaudauer: 17s; }
.werk-lauf-18 { --schaudauer: 18s; }
.werk-lauf-19 { --schaudauer: 19s; }
.werk-lauf-20 { --schaudauer: 20s; }

/* Kein Standbild da: der Anfangsbuchstabe, groß und ruhig. */
.werk-schau-ersatz {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 480;
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: rgb(21 21 21 / 0.18);
}

/* Die Marke liegt IM Bild, unten links. */
.werk-marke {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  z-index: 2;
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: var(--ecke-pille);
  background: rgb(16 16 16 / 0.82);
  color: var(--hell-schrift);
  font-size: 0.75rem;
  font-weight: 500;
}

.werk-marke--gold {
  background: var(--akzent-flaeche);
  color: var(--auf-akzent);
}

/* -- Der Text unter dem Fenster ------------------------------------- */

.werk-text {
  display: grid;
  gap: 0.45rem;
  padding: 1.3rem 1.5rem 1.5rem;
  justify-items: start;
}

.werk-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* .werk-fach kommt aus style.css (Fragment Mono, grau). */

.werk-pfeil {
  color: var(--grau);
  transition: color 160ms ease, translate 200ms var(--zug);
}

a.werk-kachel:hover .werk-pfeil,
a.werk-kachel:focus-visible .werk-pfeil {
  color: var(--akzent-text-hell);
  translate: 0.2rem 0;
}

.werk-name {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 480;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.werk-satz {
  color: var(--grau);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.werk-koennen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.werk-koennen span {
  display: inline-block;
  padding: 0.28rem 0.75rem;
  border: 1px solid rgb(21 21 21 / 0.16);
  border-radius: var(--ecke-pille);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* -- Die Vorführung: der offene Pflegebereich ------------------------
   Eine dunkle Bühne wie Nachweis und Grenzen auf der Startseite. */

.vorfuehrung {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  background: var(--dunkel);
  color: var(--hell-schrift);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.vorfuehrung-innen {
  display: grid;
  gap: 2.5rem clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 64rem) {
  .vorfuehrung-innen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.vorfuehrung-text h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 420;
  letter-spacing: -0.018em;
  line-height: 1.05;
  text-wrap: balance;
}

.vorfuehrung-text p {
  margin: 0 0 0.9rem;
  color: rgb(245 245 245 / 0.78);
  line-height: 1.6;
  max-width: 38rem;
}

.vorfuehrung-klein {
  font-size: 0.875rem;
  color: var(--hell-grau);
}

.vorfuehrung-tasten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.vorfuehrung-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  align-content: start;
}

.vorfuehrung-liste li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  color: var(--hell-grau);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.vorfuehrung-liste li:first-child { border-top: 1px solid rgb(255 255 255 / 0.12); }

.vorfuehrung-liste strong {
  color: var(--hell-schrift);
  font-weight: 520;
}

/* -- Der Absprung ---------------------------------------------------- */

.werk-schluss { padding-block: clamp(4rem, 9vw, 7rem) 0; }

.werk-schluss-innen {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  max-width: 46rem;
}

.werk-schluss h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 420;
  letter-spacing: -0.018em;
  line-height: 1.05;
  text-wrap: balance;
}

.werk-schluss p {
  margin: 0;
  color: var(--grau);
  line-height: 1.6;
}

.werk-schluss .knopf { margin-top: 0.5rem; }

/* -- Druck ----------------------------------------------------------- */

@media print {
  .werk-marke,
  .werk-pfeil { display: none; }

  .vorfuehrung {
    background: #fff;
    color: #111;
  }
}