/* Anton Avo: Gestaltung nach dem Vorbild von paulfanger.com
   Zwei Schriften (Instrument Sans für den Namen, Tinos kursiv für alles Kleine),
   Schwarz und Weiß, dazu ein helles Grau nur als Hintergrund, solange Bilder und Videos laden. */

/* ---------- Schriften (selbst gehostet, freie Lizenz OFL) ---------- */

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Tinos";
  src: url("/assets/fonts/tinos-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tinos";
  src: url("/assets/fonts/tinos-italic-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Grundwerte ---------- */

:root {
  --ink: #000;
  --paper: #fff;
  --muted: #6f6f6f;        /* Grau für Nebensächliches, nur auf Unterseiten */
  --placeholder: #ededed;  /* Hintergrund, solange ein Bild oder Video lädt */
  --faint: #c4b8a2;        /* helles Beige, nur für den Impressum-Link: kaum sichtbar, aber erkennbar */

  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Tinos", "Times New Roman", Times, serif;

  --gutter: 12px;
  --left: 55%;
  --small: 0.875rem;       /* 14px auf dem Handy, 13px auf großen Bildschirmen */
  --gap: 1.5em;
  --tile-gap: 4px;         /* Abstand zwischen Bildern und Videos */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--small);
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

img,
video {
  display: block;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.muted {
  color: var(--muted);
}

/* ---------- Kopfbereich: Name und Infoblock ---------- */

.site-header {
  container-type: inline-size;
  padding: 0 var(--gutter);
}

.name {
  display: block;
  padding-top: 3px;
  color: var(--ink);
}

.name:hover {
  text-decoration: none;
}

.name__text {
  /* Breite des Namens in em; das Skript misst die sichtbare Breite der Buchstaben nach,
     damit der Name links am Rand beginnt und rechts genau an der Bildspalte endet */
  --name-em: 5.38;
  display: inline-block;
  margin-left: calc(var(--name-lead, 0) * -1em);
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-size: calc((100vw - 2 * var(--gutter)) / var(--name-em));
  font-size: calc(100cqi / var(--name-em));
  line-height: 0.8;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.info {
  padding: 0.9em 0 0;
  line-height: 1.15;
}

.info > * + * {
  margin-top: var(--gap);
}

/* Etwas Luft zwischen Links, die direkt untereinander stehen (leichter zu treffen) */
.info li + li {
  margin-top: 0.12em;
}

.cta {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.cta:hover {
  text-decoration-thickness: 2px;
}

/* ---------- Arbeiten: Kategorien, Collagen und Projekttitel ---------- */

/* Kategorie-Überschrift: klein, in Großbuchstaben, in der Schrift des Namens */
.category__title {
  padding: 2.75rem var(--gutter) 0.75rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.category:first-child .category__title {
  padding-top: 2rem;
}

/* Collage: Raster aus sechs Spalten. Auf dem Handy stehen Bilder in ganzer oder halber Breite. */
.work__tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--tile-gap);
}

.tile--full,
.tile--big,
.tile--big-right {
  grid-column: 1 / -1;
}

.tile--half,
.tile--side,
.tile--side-left {
  grid-column: span 3;
}

.work__media {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
}

.ratio-4x5 {
  aspect-ratio: 4 / 5;
}

.ratio-16x9 {
  aspect-ratio: 16 / 9;
}

.ratio-3x2 {
  aspect-ratio: 3 / 2;
}

.ratio-1x1 {
  aspect-ratio: 1 / 1;
}

.ratio-8x5 {
  aspect-ratio: 8 / 5;
}

/* Fotos füllen ihre Kachel, ohne verzerrt zu werden */
.work__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Porträts mit Namen: gleich große Bilder, unter jedem Bild klein der Name */
.work__tiles--named {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  row-gap: 0.9rem;
}

.tile {
  margin: 0;
}

/* Ein Querformat im Porträt-Raster belegt zwei Plätze, damit jede Reihe voll ist */
.work__tiles--named .tile--wide {
  grid-column: span 2;
}

.tile__caption {
  padding: 0.35em var(--gutter) 0;
}

/* Collage mit eigener Bildunterschrift unter jedem Video (Titel mit Link, darunter die Rolle) */
.work__tiles--captioned {
  row-gap: 0.9rem;
}

.tile__title,
.tile__role {
  display: block;
}

.tile__caption a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.work__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Graue Fläche über dem Video, bis sein erstes Bild da ist; danach blendet sie aus.
   Das Video selbst wird nicht ausgeblendet: Safari zeigt ein Video, das gerade eingeblendet wird,
   sonst manchmal noch eine Weile als Standbild, obwohl es schon läuft. */
.js .work__media--video:not([data-state="missing"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--placeholder);
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.js .work__media--video.is-ready::after {
  opacity: 0;
}

.work__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.35em;
  padding: 1.5rem;
  text-align: center;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.work__placeholder strong {
  font-weight: 600;
}

.work__placeholder span {
  margin-top: 0.5em;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Mit Skript erscheint die Platzhalter-Schrift nur, wenn eine Videodatei wirklich fehlt,
   nicht kurz beim Laden */
.has-video .work__placeholder,
.js .work__media:not([data-state="missing"]) .work__placeholder {
  visibility: hidden;
}

.work__toggle {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.work__toggle:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -2px;
}

.work__toggle:focus-visible::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid var(--ink);
}

/* Videos mit YouTube-Link: die ganze Fläche ist ein Link, darunter „Auf YouTube ansehen · Pause“ */
.work__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.work__actions {
  margin-top: 0.2em;
}

.work__actions a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}


/* Bildunterschriften stehen still: keine Bewegung beim Scrollen oder unter der Maus */
.work__caption {
  padding: 0.45rem var(--gutter) 2.2rem;
}

/* Arbeiten mit Unterschrift unter den Videos: gleicher Abstand zur nächsten Arbeit */
.work--below {
  padding-bottom: 2.2rem;
}

/* ---------- Ende der Seite: Kunden, Anfrage, Fußbereich ---------- */

.closing {
  padding: 2.5rem var(--gutter) 0;
}

.closing > * + * {
  margin-top: var(--gap);
}

.closing__title {
  margin-bottom: 1.1em;
}

/* Kunden und Künstler stehen nebeneinander */
.credits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 1.5em 3rem;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.1em;
  padding: 2.5rem var(--gutter) calc(var(--gutter) * 0.9);
}

/* Impressum-Link: ganz klein und hellbeige, nur noch dezent zu erkennen */
.site-footer a {
  color: var(--faint);
  font-size: 0.6875rem;
}

.site-footer a:hover {
  color: var(--muted);
}

.closing .site-footer {
  padding-right: 0;
  padding-left: 0;
}

/* Größere Tippflächen auf Touch-Geräten, ohne die Abstände zu verändern */
@media (pointer: coarse) {
  .info a,
  .site-footer a,
  .legal a,
  .work__actions a,
  .tile__caption a {
    display: inline-block;
    padding: 0.45em 0;
    margin: -0.45em 0;
  }

  .info li + li {
    margin-top: 0.4em;
  }
}

/* ---------- Unterseiten: Impressum, Datenschutz, Fehlerseite ---------- */

.legal {
  max-width: 38rem;
  padding: 2.5rem var(--gutter) 0;
  line-height: 1.4;
}

.notice {
  max-width: 34rem;
  margin-bottom: 2.25rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.notice strong {
  font-weight: 600;
}

.legal h1 {
  margin-bottom: 1.1em;
  font-size: 1.75rem;
  line-height: 1.05;
}

.legal h2,
.legal h3 {
  margin: 2em 0 0.4em;
  font-size: 1.15em;
  line-height: 1.2;
}

/* Zweiter Teil der Seite (Datenschutz) mit einer großen Überschrift wie oben */
.legal .legal__part {
  margin: 3.5em 0 1.1em;
  font-size: 1.75rem;
  line-height: 1.05;
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: 0.75em;
}

.legal a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  overflow-wrap: anywhere;
}

/* ---------- Große Bildschirme: zwei Spalten ---------- */

@media (min-width: 900px) {
  :root {
    --gutter: 8px;
    --small: 0.8125rem;
    --tile-gap: 8px;
  }

  .name__text {
    font-size: calc((55vw - var(--gutter)) / var(--name-em));
    font-size: calc(100cqi / var(--name-em));
  }

  /* Der Name reicht genau bis an die Bildspalte */
  .site-header {
    padding-right: 0;
  }

  /* Startseite: Name und Infoblock bleiben oben stehen, bis zum Ende der Seite.
     Videos und Fotos beginnen ganz oben am rechten Rand. */
  .stage {
    display: grid;
    grid-template-columns: var(--left) 1fr;
  }

  .page--home .site-header {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    position: sticky;
    top: 0;
    z-index: 3;
    pointer-events: none;
  }

  .page--home .site-header a {
    pointer-events: auto;
  }

  .page--home .name,
  .page--home .info {
    background: var(--paper);
  }

  .page--home .info {
    width: fit-content;
    padding-right: 1.5em;
    padding-bottom: 0.9em;
    pointer-events: auto;
  }

  .works {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Kategorie-Überschrift steht über der rechten Spalte */
  .category__title {
    margin-left: var(--left);
    padding: 6rem 0 0.75rem;
  }

  .category:first-child .category__title {
    padding-top: 0.5rem;
  }

  .work {
    display: grid;
    grid-template-columns: var(--left) 1fr;
  }

  .work + .work {
    margin-top: var(--tile-gap);
  }

  .work--below {
    padding-bottom: 1.6rem;
  }

  .work__tiles {
    grid-column: 2;
    grid-row: 1;
  }

  .tile--big {
    grid-column: 1 / span 4;
    grid-row: span 2;
  }

  .tile--side {
    grid-column: 5 / span 2;
  }

  .tile--big-right {
    grid-column: 3 / span 4;
    grid-row: span 2;
  }

  .tile--side-left {
    grid-column: 1 / span 2;
  }

  /* Große Kacheln sind so hoch wie die zwei kleinen daneben */
  .work__tiles .tile--big,
  .work__tiles .tile--big-right {
    aspect-ratio: auto;
  }

  .work__tiles--named {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .work__tiles--named,
  .work__tiles--captioned {
    row-gap: 1.1rem;
  }

  /* Das breite Bild ist so hoch wie die Bilder neben ihm */
  .work__tiles--named .tile--wide {
    display: flex;
    flex-direction: column;
  }

  .work__tiles--named .tile--wide .work__media {
    aspect-ratio: auto;
    flex: 1 1 auto;
  }

  .tile__caption {
    padding: 0.35em 0 0;
  }

  .work__caption {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    padding: 0 10px 0 2rem;
    text-align: right;
  }

  /* Ende der Seite: Kunden, Anfrage und Fußbereich stehen unten in der linken Spalte */
  .closing {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 70vh;
    padding: 4rem 10px 0;
  }

  .closing .site-footer {
    padding-top: 1.5rem;
  }

  /* Unterseiten: Kopf bleibt oben stehen, Text in der linken Spalte */
  .page--sub .site-header {
    width: var(--left);
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--paper);
    padding-bottom: 0.9em;
  }

  .page--sub .site-footer {
    width: var(--left);
    padding-left: 10px;
  }

  .legal {
    width: var(--left);
    max-width: none;
    padding: 3.5rem 4rem 0 10px;
    font-size: 0.875rem;
  }

  .legal > * {
    max-width: 34rem;
  }
}

/* Niedrige Fenster: Kopf scrollt mit, damit er nichts verdeckt */
@media (min-width: 900px) and (max-height: 700px) {
  .page--home .site-header,
  .page--sub .site-header {
    position: static;
  }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .work__media--video::after {
    transition: none;
  }
}

/* Nur zur Fehlersuche (Adresse mit ?debug): Protokoll der Videos unten auf der Seite */
.debug-log {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  max-height: 50vh;
  overflow: auto;
  margin: 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #000;
  font: 11px/1.4 monospace;
  white-space: pre-wrap;
}