/* work.css — Konzepte: Vorschau-Schirm, angeheftete Laufstrecke (Startseite),
   Einzelseiten (/konzepte). Von index.html und pages/konzepte.html geteilt.

   Auf der Startseite heftet sich eine Bühne an: links eine Liste der drei
   Konzepte, rechts der Schirm. Der Scroll des Besuchers ist der Scroll der
   gezeigten Seite — er hat das Tempo in der Hand. Weiterscrollen wechselt zum
   nächsten Konzept. Auf Touch wird daraus ein Stapel mit Autoplay, weil Wischen
   mit Schwung zu ungenau fürs Scrubben ist.

   Ausdrücklich KEIN Kopfblock aus Übertitel, Überschrift und zentriertem
   Absatz: genau den trägt die Über-Sektion direkt darunter, und zweimal
   hintereinander liest sich das wie ein Baukasten. Hier nur Titel und eine
   Zeile, linksstehend. */

/* ============================================================
   GRUND
   ============================================================ */

/* Das Raster des Abschnitts, als Variablen — die Über-Sektion in index.html
   baut ihres daraus, damit ihr Markenzeichen exakt dort beginnt, wo hier die
   Beschriftung beginnt. Zwei Stellen, ein Wert; sonst driften sie auseinander,
   sobald hier eine Zahl geändert wird. */
:root {
  --wk-indent: clamp(0rem, 4vw, 6rem);
  --wk-col1: min(calc((100vh - 23rem) * 1.45), 53%);
  --wk-gap: clamp(2rem, 11vw, 13rem);
}

/* Reines Schwarz wie die Über-Sektion darunter: keine Kante, kein neuer Kasten,
   der Schirm taucht einfach aus dem Dunkel auf und ist die einzige Lichtquelle. */
/* Kein overflow: hidden. Ein Vorfahre mit hidden wird zum Scroll-Container, und
   position: sticky bezieht sich dann auf ihn statt auf die Seite — die Bühne
   heftete sich dadurch gar nicht an. Das hidden brauchte das frühere Karussell. */
/* Wenig Polsterung: Titel und Fußzeile stehen mit in der angehefteten Bühne,
   und die zentriert ihren Inhalt in 100vh — die Luft kommt also von dort. Wären
   sie außerhalb, käme zur Polsterung noch die halbe freie Bühnenhöhe dazu, und
   genau das war der zu große Abstand. */
.wk-sec {
  position: relative;
  z-index: 10;
  background: #000;
  color: var(--cream-light);
  padding: 0 clamp(1.5rem, 6vw, 6rem);
}

/* Randlos bis 1700 px, darüber zentriert stehenbleibend. Ein enger Kasten
   (vorher 1240) las sich als Fremdkörper auf einer Seite, die sonst über die
   volle Breite arbeitet — auf üblichen Fenstern greift die Grenze deshalb gar
   nicht, sie fängt nur sehr breite Monitore ab. */
.wk-col {
  width: 100%;
  max-width: 1700px;
  margin-inline: auto;
}

/* --- Kopf: großer Titel, eine Zeile darunter --- */

/* Der Titel steht weiter links als die Liste — der Versatz ist gewollt und
   stammt aus dem Entwurf. Liste, Schirm und Fußzeile fluchten untereinander. */
.wk-head { margin-bottom: clamp(2.4rem, 7vh, 4.5rem); }

.wk-title {
  font-family: var(--font-main);
  font-weight: 300;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.wk-sub {
  margin-top: 0.7rem;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  color: var(--cream);
  opacity: 0.78;
}

/* ============================================================
   DER SCHIRM
   ============================================================ */

/* Kaum Rundung und nur eine Andeutung von Kante: auf Schwarz soll der Rahmen
   nicht als Karte lesen, sondern als Ausschnitt. */
.wk-screen {
  position: relative;
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  background: #050505;
  border: 1px solid rgba(196, 169, 106, 0.13);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 1);
  cursor: var(--cur-pointer);
}

/* Nur ein Punkt, kein Projektname: der Name steht einmal im Instrument
   darunter, ein zweites Mal wäre Beschriftung um der Beschriftung willen. */
.wk-bar {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  background: rgba(245, 240, 232, 0.035);
  border-bottom: 1px solid rgba(196, 169, 106, 0.1);
}

.wk-bar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(149, 127, 79, 0.55);
  transition: background-color 0.4s var(--ease-smooth),
              box-shadow 0.4s var(--ease-smooth);
}

/* Läuft der Clip, glüht der Punkt. Das ist das ganze Signal und braucht
   kein Wort dazu. */
.wk-screen.is-playing .wk-bar__dot {
  background: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(196, 169, 106, 0.16);
}

.wk-view {
  position: relative;
  aspect-ratio: 16 / 10;   /* entspricht dem Aufnahmeformat 1600 × 1000 */
  background: #050505;
}

/* Ohne src zeigt das Element sein poster-Bild und ist damit die erste Anzeige,
   auch ohne JavaScript und bei reduzierter Bewegung. */
.wk-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #050505;
}

/* ============================================================
   DIE LAUFSTRECKE — angeheftete Bühne, drei Abschnitte
   ------------------------------------------------------------
   Die Höhe der Strecke ist die Steuerung: je Konzept 200vh, plus 100vh für die
   Bühne selbst. Der Fortschritt darin bestimmt, welches Konzept läuft und wie
   weit seine Seite gescrollt ist. Damit hat der Besucher das Tempo in der Hand.
   ============================================================ */

/* 150vh je Konzept. Der Clip läuft in seinem eigenen Takt, die Strecke muss
   also nicht mehr die Abspielzeit tragen — sie sorgt nur dafür, dass der
   Wechsel eine bewusste Bewegung ist und nicht ein Zucken am Rad. */
.wk-run {
  height: calc(3 * 150vh + 100vh);
}

/* Die Polsterung oben ist der Platz der festen Navigation: zentriert wird im
   Raum darunter. Ohne sie rückt der Titel auf flachen Fenstern unter das Logo,
   weil dort weniger Höhe zu verteilen ist. 11rem, weil das Logo auf der
   Startseite 160 px hoch ist — mit 7rem stieß der Titel dagegen, sobald der
   Schirm die Bühne fast ausfüllte. */
.wk-stick {
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 11rem;
  display: flex;
  align-items: center;
}

.wk-stick > .wk-col { width: 100%; }

/* Ein flaches Raster für beide Anordnungen: am Rechner die Liste in Spalte 1
   und alle drei Schirme übereinander in Spalte 2; auf schmalen Schirmen fällt
   es in eine Spalte und die Reihenfolge im Markup (Eintrag, Schirm, Eintrag …)
   ergibt von sich aus die gestapelte Fassung. */
/* der Einzug gegenüber dem Titel */
.wk-grid { margin-left: var(--wk-indent); }

/* Die erste Spalte ist genau so breit wie der Schirm — nicht breiter. Nur so
   fluchtet der Link darunter mit dessen rechter Kante; säße der Schirm in einer
   breiteren Spalte, läge der Link an der Spaltenkante und damit daneben.

   Die Breite hat zwei Grenzen, und es gilt die kleinere:

   1. Was in der Höhe übrig bleibt. Über und unter dem Schirm stehen Kopf,
      Fußzeile und die Polsterung für die Navigation — zusammen rund 23rem.
      Der Rest mal 1,5 ist die Breite, die er bei 16:10 haben darf. Eine feste
      Bindung an vh (vorher 56vh) machte ihn auf flachen Fenstern unnötig klein,
      obwohl seitlich Platz war.
   2. Gut die Hälfte der Rasterbreite, damit die Beschriftung ihren Raum
      behält.

   Er wächst damit mit der Fensterbreite, hört aber auf, sobald die Bühne sonst
   nicht mehr auf einen Schirm passt. */
.wk-grid {
  display: grid;
  grid-template-columns: var(--wk-col1) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto) auto;
  /* Weiter Abstand: die Beschriftung beginnt direkt an der Spaltenkante, hier
     ist also nichts anderes, das Luft schafft. Rund ein Neuntel der Fenster-
     breite, wie im Entwurf. */
  column-gap: var(--wk-gap);
  align-items: start;
}

/* Schirm links, Liste rechts. Die Reihenfolge im Markup bleibt Eintrag-Schirm,
   damit der Stapel auf dem Handy von selbst richtig herauskommt — getauscht
   wird nur die Spalte. */
.wk-grid > .wk-step { grid-column: 2; }

.wk-grid > .wk-screen {
  grid-column: 1;
  grid-row: 1 / 4;      /* über alle drei Zeilen, damit er mittig zur Liste steht */
  align-self: center;
  width: 100%;          /* die Spalte gibt die Breite vor, siehe oben */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-smooth),
              visibility 0.5s var(--ease-smooth);
}

.wk-grid > .wk-screen.is-on { opacity: 1; visibility: visible; }

/* --- die Liste --- */

/* Der aktive Eintrag trägt den Inhalt, die anderen sind nur noch Merkposten —
   darum weit auseinander in Helligkeit und Größe, nicht nur ein bisschen. */
/* Die Zeilenabstände hängen an der Fensterhöhe: auf flachen Fenstern ist die
   Liste sonst höher als der Schirm und bestimmt allein die Höhe der Bühne —
   dann hilft es auch nichts, den Schirm kleiner zu machen. */
.wk-step {
  padding: clamp(0.35rem, 1.3vh, 0.9rem) 0;
  color: var(--cream-light);
  opacity: 0.22;
  transition: opacity 0.5s var(--ease-smooth);
}

.wk-step.is-on { opacity: 1; }

.wk-step__no {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-label);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

/* Ein Punkt je Eintrag, wie der in der Leiste des Schirms. Beim aktiven glüht
   er auf — dieselbe Geste an zwei Stellen, damit klar ist, was gerade läuft. */
.wk-step__no::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  transition: opacity 0.45s var(--ease-smooth),
              background-color 0.45s var(--ease-smooth),
              box-shadow 0.45s var(--ease-smooth);
}

.wk-step.is-on .wk-step__no { color: var(--gold-light); }

.wk-step.is-on .wk-step__no::before {
  opacity: 1;
  background: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(196, 169, 106, 0.18);
}

.wk-step__name {
  display: block;
  font-family: var(--font-main);
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: 0.06em;
  transition: font-size 0.5s var(--ease-smooth),
              letter-spacing 0.5s var(--ease-smooth);
}

/* Der aktive Name wächst mit — das ist die deutlichste Hervorhebung, die ohne
   ein zusätzliches Element auskommt. */
.wk-step.is-on .wk-step__name {
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  letter-spacing: 0.04em;
}

/* Nur der aktive Eintrag zeigt Stichpunkte und den Satz. Aufgeklappt wird über
   grid-template-rows von 0fr auf 1fr — damit läuft die Höhe weich mit, statt
   dass die Einträge darunter springen. */
.wk-step__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.55s var(--ease-smooth),
              opacity 0.4s var(--ease-smooth);
}

.wk-step__more > div { overflow: hidden; }

.wk-step.is-on .wk-step__more { grid-template-rows: 1fr; opacity: 1; }

/* Nur noch der Satz — die Stichwortzeile (Branche · Frames · DE/EN) ist raus.
   Die Angaben stehen weiter auf /konzepte in der Fakten-Tabelle. */
.wk-step__more p {
  margin-top: 0.9rem;
  max-width: 24em;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--cream);
  opacity: 0.75;
}

/* --- Abbinder: Einordnung und Weiterlink ---
   Beide sitzen in der vierten Rasterzeile und hängen damit an ihrer eigenen
   Spalte: der Link unter dem Schirm und bündig mit dessen rechter Kante, die
   Einordnung unter der Liste und bündig mit deren linker. Eine durchgehende
   Zeile über beide Spalten würde diese Bindung verlieren. */

.wk-foot__link,
.wk-foot__micro {
  grid-row: 4;
  margin-top: clamp(1.1rem, 3vh, 1.8rem);
  font-family: var(--font-label);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.wk-foot__link { grid-column: 1; justify-self: end; }
.wk-foot__micro { grid-column: 2; justify-self: start; }

/* Einordnung als eigene Arbeit plus der Hinweis, dass es eine Aufzeichnung
   ist: Meta-Information, kein Inhalt, also leise. */
.wk-foot__micro { color: var(--cream); opacity: 0.3; }

.wk-foot__link {
  position: relative;
  color: var(--gold-light);
  padding-bottom: 0.35em;
  white-space: nowrap;
}

.wk-foot__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.3s var(--ease-smooth);
}

.wk-foot__link:hover::after { opacity: 1; }

/* --- Einblenden beim Erreichen --- */

.wk-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
}

.wk-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.wk-case__body.wk-reveal { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  .wk-reveal { opacity: 1; transform: none; transition: none; }
  .wk-step, .wk-step__more, .wk-grid > .wk-screen { transition: none; }
}

/* ============================================================
   EINZELSEITEN — /konzepte
   ============================================================ */

.work-page { background: #000; }

/* Auf dieser Seite zieht großer heller Text unter der Navigation durch —
   ohne Untergrund werden beide unleserlich. Ein weicher Verlauf statt einer
   Leiste, damit die Navigation transparent bleibt wie auf der Startseite. */
body:has(.work-page) #main-nav {
  background-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.82) 45%,
    rgba(0, 0, 0, 0) 100%);
  padding-bottom: 1.4rem;
}

/* Das Logo ist per Vorgabe nur auf der Startseite (nach dem Intro) und auf
   den Rechtsseiten sichtbar — auf dieser Seite gibt es kein Intro. */
body:has(.work-page) #nav-logo {
  visibility: visible !important;
  height: 100px;
}

@media (max-width: 768px) {
  body:has(.work-page) #nav-logo { height: 88px; }
}

/* Linksbündig, kein Übertitel, kein zentrierter Stapel — dieselbe Haltung wie
   der Abschnitt auf der Startseite. */
.wk-hero {
  max-width: min(1060px, 100vh);
  margin: 0 auto;
  padding: clamp(9rem, 22vh, 14rem) clamp(1.5rem, 6vw, 6rem) clamp(2.5rem, 6vh, 4rem);
}

.wk-hero h1 {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--cream-light);
  max-width: 20em;
}

/* Hier darf ein Absatz stehen: das ist die Seite, die man aufruft, um mehr zu
   erfahren. Auf der Startseite gibt es genau eine Zeile. */
.wk-hero p {
  max-width: 42em;
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.8;
  color: var(--cream);
  opacity: 0.72;
}

/* Die Einordnung als eigene Arbeit — hier ausgeschrieben, weil diese Seite der
   Ort dafür ist. Wer die Namen googelt, soll vorher wissen, was er sieht. */
.wk-disclaimer {
  max-width: min(1060px, 100vh);
  margin: 0 auto clamp(4rem, 10vh, 7rem);
  padding: 0 clamp(1.5rem, 6vw, 6rem);
}

.wk-disclaimer p {
  max-width: 42em;
  padding-left: 1.2rem;
  border-left: 1px solid rgba(196, 169, 106, 0.35);
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--cream);
  opacity: 0.62;
}

/* --- Ein Konzept ---
   Der Rahmen bekommt hier die volle Spaltenbreite. Auf der Startseite steht er
   im Karussell und ist dadurch schmaler; auf der Seite, die man aufruft, um
   genauer hinzusehen, darf er nicht kleiner sein als dort. */

.wk-case {
  /* nie höher als der Schirm: 16:10 heißt Höhe = Breite ÷ 1,6 */
  max-width: min(1060px, 100vh);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 6rem) clamp(5rem, 13vh, 8rem);
}

.wk-case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.2rem;
  margin-bottom: clamp(1.2rem, 3vh, 1.8rem);
}

.wk-no {
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.wk-name {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cream-light);
}

.wk-sector {
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.wk-note {
  margin-top: 0.8rem;
  font-family: var(--font-label);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.3;
}

.wk-case__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
}

.wk-line {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.8;
  color: var(--cream);
  opacity: 0.8;
}

/* Zahlen statt Behauptungen */
.wk-facts {
  border-top: 1px solid rgba(196, 169, 106, 0.2);
}

.wk-facts div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(196, 169, 106, 0.12);
}

.wk-facts dt {
  font-family: var(--font-label);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.28em;
}

.wk-facts dd {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cream);
  opacity: 0.82;
}

/* --- Abbinder --- */

.wk-outro {
  max-width: min(1060px, 100vh);
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.5rem, 6vw, 6rem) clamp(6rem, 16vh, 10rem);
}

.wk-outro h2 {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--cream-light);
  max-width: 22em;
  margin-bottom: 1.2rem;
}

.wk-outro p {
  max-width: 38em;
  margin-bottom: 2rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.8;
  color: var(--cream);
  opacity: 0.72;
}

.wk-outro a {
  display: inline-block;
  position: relative;
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  padding-bottom: 0.4em;
}

.wk-outro a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.3s var(--ease-smooth);
}

.wk-outro a:hover::after { opacity: 1; }

/* ============================================================
   FUSSZEILE
   ------------------------------------------------------------
   Wortgleich mit der Fassung im <style>-Block von index.html — die
   Unterseiten sollen dieselbe Fußzeile tragen wie die Startseite, und die
   Fassung in sections.css ist eine ältere, hellere. Auf der Startseite
   gewinnt weiterhin der inline-Block, dort ändert sich also nichts.
   ============================================================ */

body:has(.work-page) #main-footer {
  position: relative;
  z-index: 10;
  background: #141414;
  border-top: 1px solid rgba(149, 127, 79, 0.15);
  padding: 1.3rem clamp(1.5rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

body:has(.work-page) #main-footer .label {
  color: var(--gold-light);
  opacity: 1;
  font-size: 0.78rem;
}

body:has(.work-page) .footer-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

body:has(.work-page) .footer-logo img {
  height: 38px;
  width: auto;
  display: block;
  opacity: 0.9;
}

body:has(.work-page) .footer-copy { white-space: nowrap; }

body:has(.work-page) .footer-nav { display: flex; gap: 2rem; }

body:has(.work-page) .footer-nav a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

body:has(.work-page) .footer-nav a:hover { opacity: 1; }

@media (max-width: 600px) {
  body:has(.work-page) #main-footer { justify-content: center; }
  body:has(.work-page) .footer-logo {
    position: static;
    transform: none;
    order: -1;
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   SCHMALE SCHIRME
   ============================================================ */

@media (max-width: 900px) {
  /* Text und Zahlen untereinander, nebeneinander wird beides zu schmal */
  .wk-case__body { grid-template-columns: 1fr; gap: 1.6rem; }
  .wk-facts div { grid-template-columns: 1fr; gap: 0.2rem; }

  /* Kein Anheften und kein Scrubben: Wischen mit Schwung ist zu ungenau, und
     eine angeheftete Bühne kapert auf dem Handy das ganze Bild. Die Strecke
     wird zum normalen Stapel, die Reihenfolge im Markup ergibt Eintrag über
     Schirm, und jede Vorschau läuft beim Erreichen einmal von selbst. */
  .wk-run { height: auto; }

  .wk-stick {
    position: static;
    height: auto;
    padding-top: 0;      /* der Platz für die Navigation wird nicht mehr gebraucht */
    display: block;
  }

  .wk-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 0;
  }

  .wk-grid > .wk-step,
  .wk-grid > .wk-screen {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    max-width: none;
  }

  /* Einspaltig gibt es nichts, wogegen der Titel versetzt sein könnte */
  .wk-grid { margin-left: 0; }

  /* Der Abbinder wird wieder eine eigene Zeile unter dem Stapel */
  .wk-foot__link,
  .wk-foot__micro {
    grid-row: auto;
    grid-column: auto;
    justify-self: start;
  }
  .wk-foot__link { margin-top: 0.6rem; }
  .wk-foot__micro { margin-top: clamp(2rem, 6vh, 3rem); }

  /* Gestapelt ist jedes Konzept für sich zu sehen, also sind alle wach — und
     tragen den Namen in der Größe, die am Rechner dem aktiven vorbehalten ist. */
  .wk-grid > .wk-step { opacity: 1; padding-top: clamp(2.5rem, 8vh, 4rem); }
  .wk-step__name { font-size: clamp(1.35rem, 5.5vw, 1.95rem); letter-spacing: 0.04em; }
  .wk-grid > .wk-screen { opacity: 1; visibility: visible; margin-top: 1.2rem; }
  .wk-step__more { grid-template-rows: 1fr; opacity: 1; }

  /* Ohne Anheftung gibt es keine Bühnenhöhe, die für Luft sorgt — und der
     Titel muss selbst am festen Logo vorbeikommen, das hier 88 px hoch ist. */
  .wk-sec { padding-top: clamp(6.5rem, 15vh, 9rem); padding-bottom: clamp(3rem, 9vh, 5rem); }
  .wk-foot { margin-top: clamp(2rem, 6vh, 3rem); }

  .wk-foot { flex-direction: column; align-items: flex-start; gap: 1rem; }
}