/* Probeseite Schreinerei im Schubart-Look. Werte aus design-system.md, Mechanismen aus bar.md.
   Ohne die Klasse "bewegt" (keine Bewegung gewünscht oder kein Skript) steht alles in Endlage
   oder Startgrösse; seite.js setzt nur Variablen, Lage und Grösse rechnet diese Datei. */

@font-face {
  font-family: "Cormorant";
  src: url("fonts/cormorant.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --grund: #FEFDFB;
  --tinte: #453327;
  --erde: #624E41;
  --leise: #9A8D84;
  --nacht: #1E1610;
  --gedaempft: #BBB2AF;

  --schrift-gross: "Cormorant", "Times New Roman", serif;
  --schrift-text: "Newsreader", Georgia, serif;

  --rand: 40px;
  --inhalt: 1152px;
  --kopf-hoehe: 72px;
  --kopf-schrift: 16px;
  --satz-schrift: 46px;
  --satz-zeile: 1.25;
  --link-schrift: 16px;
  --liste-schrift: 100px;
  --liste-luft: 24px;
  --titel-schrift: 20px;
  --text-schrift: 16px;
  --text-zeile: 22px;
  --klein-schrift: 14px;
  --klein-zeile: 22px;
  --knopf-schrift: 13px;
  --knopf-hoehe: 44px;
  --laufweite: 0.06em;
  --laufweite-knopf: 0.08em;

  /* Teilhöhen bei 1440, wie bei Schubart. Der Satz steht oben im Teil: seine ersten Buchstaben
     256 px unter der Oberkante (390: 128 px), wie bei Schubart gemessen. */
  --satz-hoehe: 1100px;
  --satz-oben: 256px;
  --liste-hoehe: 1100px;
  --ende-hoehe: 700px;
  --teil-luft: 160px;
  --liste-rand: 96px;

  /* Teil 5: zwei Spalten je 528 px, das quere Bild 240 px tiefer. */
  --spalten-luft: 96px;
  --versatz: 240px;
  --bildzeile-luft: 24px;

  /* Hero: quadratisches Bild, Endbreite und Startbreite als Anteil davon, damit das Wachsen nur
     transform braucht. --hero-tempo ist die Geschwindigkeit, mit der das Bild nach dem Lösen
     wegrollt (1 = mit der Seite). */
  --hero-ende: 75vw;
  --hero-anteil: 0.4444;
  --hero-mitte: 44%;
  --hero-tempo: 1;
  --pfeil-lage: 88%;

  /* Werkstattbild: Startrahmen 16:9 mit 72 % der Breite, wächst auf das ganze Fenster, solange die
     Oberkante des Teils von --werk-von auf --werk-bis Fensterhöhen steigt. */
  --werk-breite: 72vw;
  --werk-hoehe: 40.5vw;
  --werk-lage: 50% 50%;
  --werk-von: 0.72;
  --werk-bis: -0.61;

  --dauer-flaeche: 200ms;
}

@media (max-width: 767px) {
  :root {
    --rand: 20px;
    --kopf-hoehe: 68px;
    --kopf-schrift: 14px;
    --satz-schrift: 24px;
    --satz-zeile: 1.3;
    --link-schrift: 14px;
    --liste-schrift: 24px;
    --liste-luft: 14px;
    --satz-hoehe: 100vh;
    --satz-oben: 128px;
    /* Pro Fensterhöhe eine Sache: Die Liste teilt das Fenster nicht mit dem ersten Projekt. */
    --liste-hoehe: 100vh;
    --ende-hoehe: 0px;
    --teil-luft: 96px;
    --spalten-luft: 64px;
    --versatz: 0px;

    --hero-ende: 130vw;
    --hero-anteil: 0.6154;
    --hero-mitte: 43%;
    --hero-tempo: 0.75;

    --werk-breite: 100%;
    --werk-hoehe: 66%;
    /* Der Schreiner steht rechts im Bild; im schmalen Ausschnitt bleibt er drin. */
    --werk-lage: 100% 50%;
    --werk-von: 0.66;
    --werk-bis: -0.58;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--grund); }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--text-schrift);
  line-height: var(--text-zeile);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
}

[id] { scroll-margin-top: var(--kopf-hoehe); }

.nur-leser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Kopfzeile: fest und deckend, auch über dem Vollbild. */
.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--kopf-hoehe);
  padding: 0 var(--rand);
  background: var(--grund);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "zeile name knopf";
  align-items: center;
  column-gap: 24px;
}

.name {
  grid-area: name;
  margin: 0;
  font-family: var(--schrift-gross);
  font-weight: 600;
  font-size: var(--kopf-schrift);
  line-height: 1.2;
  letter-spacing: var(--laufweite);
  text-transform: uppercase;
  white-space: nowrap;
}

.zeile {
  grid-area: zeile;
  margin: 0;
  font-size: var(--kopf-schrift);
  line-height: 1.2;
}

.knopf {
  grid-area: knopf;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: var(--knopf-hoehe);
  padding: 0 24px;
  background: var(--tinte);
  color: var(--grund);
  font-size: var(--knopf-schrift);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--laufweite-knopf);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dauer-flaeche) ease-out;
}
.knopf:hover { background: var(--erde); }

@media (max-width: 767px) {
  .kopf {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name knopf" "zeile knopf";
    align-content: center;
    row-gap: 2px;
    column-gap: 12px;
  }
}

/* Teil 1, Hero. Ohne Bewegung ein Fenster hoch, das Bild in Startgrösse. */
.hero { position: relative; height: 100vh; }
.bewegt .hero { height: 200vh; }

.hero-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-x: clip;
}

.hero-bild {
  position: absolute;
  left: 50%;
  top: var(--hero-mitte);
  width: var(--hero-ende);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, calc(-50% + var(--hy, 0) * 1px))
    scale(calc(var(--hero-anteil) + (1 - var(--hero-anteil)) * var(--hp, 0)));
  transform-origin: 50% 50%;
}

.pfeil {
  position: absolute;
  left: 50%;
  top: var(--pfeil-lage);
  width: 12px;
  height: 20px;
  transform: translate(-50%, -50%);
  color: var(--tinte);
  opacity: calc(1 - var(--hp, 0) * 4);
}

/* Teil 2, der Satz. Ohne Skript voll gefärbt; seite.js setzt --f pro Buchstabe und, solange er
   unterwegs ist, --u für die Unschärfe. */
.satz-teil {
  min-height: var(--satz-hoehe);
  max-width: calc(var(--inhalt) + 2 * var(--rand));
  margin: 0 auto;
  padding: var(--satz-oben) var(--rand) var(--teil-luft);
  display: flex;
  flex-direction: column;
  text-align: center;
}

.satz {
  margin: 0;
  font-family: var(--schrift-gross);
  font-weight: 500;
  font-size: var(--satz-schrift);
  line-height: var(--satz-zeile);
  text-transform: uppercase;
  text-wrap: pretty;
}
.satz .wort { white-space: nowrap; }
.satz .z {
  color: color-mix(in srgb, var(--tinte) calc(var(--f, 1) * 100%), var(--leise));
}
.satz .z.unterwegs { filter: blur(calc(var(--u) * 0.2em)); }

.links {
  margin: 48px 0 0;
  display: flex;
  justify-content: center;
  gap: 32px;
}
.links a {
  color: var(--tinte);
  font-size: var(--link-schrift);
  letter-spacing: var(--laufweite);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dauer-flaeche) ease-out;
}
.links a:hover { color: var(--erde); }

/* Teil 3, Werkstattbild. Ohne Bewegung ein Fenster hoch und voll. */
.werkstatt { position: relative; height: 100vh; }
.bewegt .werkstatt { height: 200vh; }

.werkstatt-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.werkstatt-rahmen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--werk-breite) + (100% - var(--werk-breite)) * var(--wg, 1));
  height: calc(var(--werk-hoehe) + (100% - var(--werk-hoehe)) * var(--wg, 1));
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.werkstatt-rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--werk-lage);
}

/* Teil 4, Liste. Ohne Bewegung alle Einträge voll. */
.liste-teil {
  min-height: var(--liste-hoehe);
  padding: var(--liste-rand) var(--rand);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.liste {
  width: 100%;
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}
.liste li {
  padding: var(--liste-luft) 0;
  font-family: var(--schrift-gross);
  font-weight: 400;
  font-size: var(--liste-schrift);
  line-height: 1;
  text-transform: uppercase;
  color: var(--tinte);
  transition: color var(--dauer-flaeche) ease-out;
}
.liste li + li { border-top: 1px solid var(--erde); }
.bewegt .liste li { color: var(--leise); }
.bewegt .liste li.voll { color: var(--tinte); }

/* Teil 5, zwei Projekte, ungleich hoch und versetzt. */
.projekte {
  max-width: calc(var(--inhalt) + 2 * var(--rand));
  margin: 0 auto;
  padding: var(--teil-luft) var(--rand);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spalten-luft);
  align-items: start;
}

.projekt { margin: 0; }
.projekt-quer { margin-top: var(--versatz); }

.projekt-rahmen { overflow: hidden; }
.projekt-quer .projekt-rahmen { aspect-ratio: 528 / 450; }
.projekt-hoch .projekt-rahmen { aspect-ratio: 2 / 3; }
.projekt-rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--z, 1));
}

.projekt figcaption { margin-top: var(--bildzeile-luft); }

.projekt-titel {
  margin: 0 0 6px;
  font-family: var(--schrift-gross);
  font-weight: 500;
  font-size: var(--titel-schrift);
  line-height: 1.2;
  text-transform: uppercase;
}
.projekt-text {
  margin: 0;
  font-size: var(--klein-schrift);
  line-height: var(--klein-zeile);
}

@media (max-width: 767px) {
  .projekte {
    grid-template-columns: 1fr;
    row-gap: var(--spalten-luft);
  }
}

/* Teil 6, dunkles Ende. */
.ende {
  min-height: var(--ende-hoehe);
  padding: var(--teil-luft) var(--rand) 40px;
  background: var(--nacht);
  color: var(--gedaempft);
  font-size: var(--klein-schrift);
  line-height: var(--klein-zeile);
  display: flex;
  flex-direction: column;
}
.ende :focus-visible { outline-color: var(--grund); }

.ende-innen {
  width: 100%;
  max-width: var(--inhalt);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ende-titel {
  margin: 0 0 96px;
  font-family: var(--schrift-gross);
  font-weight: 500;
  font-size: var(--satz-schrift);
  line-height: var(--satz-zeile);
  text-transform: uppercase;
}

.ende-spalten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--spalten-luft);
  row-gap: 48px;
}

.ende-spalte h3 {
  margin: 0 0 12px;
  font-family: var(--schrift-gross);
  font-weight: 500;
  font-size: var(--titel-schrift);
  line-height: 1.2;
  text-transform: uppercase;
}
.ende-spalte p { margin: 0 0 24px; }

.knopf-umriss {
  display: inline-flex;
  align-items: center;
  min-height: var(--knopf-hoehe);
  padding: 0 32px;
  border: 1px solid var(--gedaempft);
  color: var(--gedaempft);
  font-size: var(--knopf-schrift);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--laufweite-knopf);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dauer-flaeche) ease-out, color var(--dauer-flaeche) ease-out;
}
.knopf-umriss:hover { background: var(--gedaempft); color: var(--nacht); }

.ende-fuss {
  margin: auto 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--gedaempft);
}

@media (max-width: 767px) {
  .ende-titel { margin-bottom: 64px; }
  .ende-spalten { grid-template-columns: 1fr; }
  .ende-fuss { margin-top: 64px; }
}