/*
 * projektansicht.css – Voransicht, Träger, Platz; Projektansicht als
 * Überlagerung und als Einzelseite (docs/ENTWURF.md 4.3 und 4.3a)
 *
 * Vertrag mit modul/projektansicht.js und modul/schleife.js:
 *   .vorschau > .traeger[data-flug-id]   Zelle in einer Projektzeile, hält den Platz frei
 *   .platz[data-flug-id]                 Ziel in der Galerie, Maß aus --ar
 *   .schleife__posten                    bekommt die Verschiebung der Endlosschleife
 *   .ist-schleife                        setzt das Modul an Galerie und Bahnen, solange die Schleife läuft
 *   .projektansicht__galerie--zwei       zwei Bildspalten (.projektansicht__spalte), jede eine eigene Bahn
 */

/* ------------------------------------------------------------------------
   Voransicht, Träger, Platz
   ------------------------------------------------------------------------ */

.vorschau {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--flaeche);
}

.platz {
  position: relative;
  aspect-ratio: var(--ar);
}

.traeger {
  overflow: hidden;
  border-radius: var(--radius);
}

.vorschau > .traeger,
.platz > .traeger {
  position: absolute;
  inset: 0;
}

/* Solange ein Bild lädt (vor allem die extern eingebundenen), steht eine Fläche da. */
.platz > .traeger {
  background: var(--flaeche);
}

/* Im Flug hängt der Träger in der Bühne; Lage und Größe setzt das Modul. */
.projektansicht__buehne > .traeger {
  z-index: 2;
  margin: 0;
  will-change: left, top, width, height, transform;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------------
   Überlagerung: Fläche, die aufhellt bzw. abdunkelt, darüber die Bühne
   ------------------------------------------------------------------------ */

.projektansicht {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: clip;
}

.projektansicht:focus {
  outline: none;
}

/* Die Fläche dimmt, sie deckt nicht: 8 % der Seite dahinter bleiben sichtbar
   (wie die abgedunkelten Bilder im Vorbild). */
.projektansicht__grund {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--grund-fokus) 92%, transparent);
  opacity: 0;
}

/* Wortmarke und Themenschalter stehen fest und lägen sonst als Schatten unter
   dem Projekttitel, der an derselben Stelle sitzt: modul/projektansicht.js
   blendet beide beim Öffnen aus und beim Schließen wieder ein. */

.projektansicht__buehne {
  position: absolute;
  inset: 0;
}

/* Die Ebene reicht nicht in die Rinne der Scrollleiste (scrollbar-gutter):
   Steht die Fläche, trägt auch die Leinwand ihre Farbe. */
html.projekt-offen {
  background: var(--grund-fokus);
}

/* Hinter der gedimmten Fläche bleiben nur Bilder und Logos als Schemen stehen.
   Text und Haarlinien der Seite verschwinden, damit nichts unter dem
   Projekttext durchscheint (das Vorbild blendet den Text ebenfalls aus). Die
   Kopfzeile gehört dazu: Steht sie beim Öffnen noch im Fenster (Archiv,
   Startseite oben), schiene sonst „Leistungen …“ hinter dem Projekttext durch.
   Wortmarke und Themenschalter tragen ihre Farbe (#fff) selbst und blenden per
   Skript aus; sie bleiben von dieser Regel unberührt. Auch die leere Zelle der
   Voransicht, aus der ein Träger geflogen ist, zeigt keine Fläche mehr: Sie
   läge als grauer Schemen genau hinter dem Text. */
html.projekt-offen main,
html.projekt-offen .kopfzeile,
html.projekt-offen .fusszeile {
  /* color gesondert: main erbt die schon berechnete Farbe von body */
  color: transparent;
  --text: transparent;
  --text-2: transparent;
  --linie: transparent;
  --flaeche: transparent;
  --karte-text: transparent;
  --karte-text-2: transparent;
  --karte-linie: transparent;
}

/* Beim schnellen Wechsel liegen kurz zwei Inhalte übereinander. */
.projektansicht__buehne > .projektansicht__inhalt {
  position: absolute;
  inset: 0;
}

/* ------------------------------------------------------------------------
   Einzelseite
   ------------------------------------------------------------------------ */

body.seite-projekt {
  background: var(--grund-fokus);
}

/* ------------------------------------------------------------------------
   Inhalt: schmal und mittel alles untereinander
   ------------------------------------------------------------------------ */

.projektansicht__inhalt {
  align-items: start;
  row-gap: 48px;
  /* Platz für die feste Schließen-Pille */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

.projektansicht__info {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
  padding-top: 12px;
}

.projektansicht__kopf {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spalt);
}

.projektansicht__titel {
  font-weight: 600;
}

/* Der Knopf ist höher als die Titelzeile. Seine Oberkante liegt auf dem
   Seitenrand wie die Galerie daneben; nach unten ragt er über die Zeile hinaus,
   ohne den Text darunter zu verschieben. */
.projektansicht__knopf {
  gap: .5em;
  margin-bottom: -16px;
}

.knopf__pfeil {
  flex: none;
  width: .5625em;
  height: .5625em;
  overflow: visible;
}

.projektansicht__kurz {
  grid-column: 1 / -1;
  margin-top: 48px;
  font-size: var(--t-l);
  line-height: var(--zh-l);
  letter-spacing: var(--lw-l);
}

.projektansicht__text {
  grid-column: 1 / -1;
  margin-top: 24px;
}

.projektansicht__text > * + * {
  margin-top: .75em;
}

.projektansicht__text a {
  text-decoration-line: underline;
}

.projektansicht__daten {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 4px;
  margin-top: 48px;
}

.projektansicht__datum {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

.projektansicht__datum dt {
  grid-column: 1 / span 4;
  color: var(--text-2);
}

.projektansicht__datum dd {
  grid-column: 5 / -1;
}

/* Schließen: schmal und mittel eine feste Pille unten mittig */
.projektansicht__schliessen {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 14px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--grund);
  line-height: 1;
  white-space: nowrap;
  translate: -50% 0;
}

a.projektansicht__schliessen:hover {
  text-decoration-line: none;
}

.projektansicht__galerie {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Zwei Bildspalten (4.3a): nebeneinander, jede Hälfte ein eigenes Mauerwerk
   aus Bildern in ihrem natürlichen Verhältnis. Schmal und mittel je 6 von 12
   Spalten, breit die Spalten 7–9 und 10–12. */
.projektansicht__galerie--zwei {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spalt);
}

.projektansicht__spalte {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 700px) {
  .projektansicht__kurz,
  .projektansicht__text,
  .projektansicht__daten {
    grid-column: 1 / span 8;
  }

  .projektansicht__datum dt {
    grid-column: 1 / span 2;
  }

  .projektansicht__datum dd {
    grid-column: 3 / -1;
  }
}

/* ------------------------------------------------------------------------
   Breit: Info links (Spalten 1–6), Galerie rechts (Spalten 7–12)
   ------------------------------------------------------------------------ */

@media (min-width: 1100px) {
  .projektansicht__inhalt {
    row-gap: 0;
    padding-bottom: 0;
  }

  /* Die Info bleibt stehen und füllt das Fenster: Titel oben, wo die Wortmarke
     saß, „Schließen“ unten links. Die freie Reihe dazwischen nimmt den Rest. */
  .projektansicht__info {
    position: sticky;
    top: 0;
    grid-column: 1 / span 6;
    grid-template-rows: auto auto auto auto minmax(24px, 1fr) auto;
    align-content: stretch;
    height: 100svh;
    padding-bottom: 12px;
    /* Niedriges Fenster, langer Text: Die Info scrollt für sich, „Schließen“ bleibt erreichbar. */
    overflow: hidden auto;
    overscroll-behavior: contain;
    /* Scrollbar bleibt der Bereich, eine Scrollleiste zeigt er nie: Sie blitzte
       beim Öffnen kurz auf, solange die Textzeilen hinter ihren Masken hochfahren. */
    scrollbar-width: none;
    /* Der Kasten ragt in Rand und Spaltenabstand, damit er keinen Fokusring
       abschneidet; die Spaltenlinien bleiben, wo sie sind. */
    margin-inline: calc(-1 * var(--rand)) calc(var(--spalt) / -2);
    padding-inline: var(--rand) calc(var(--spalt) / 2);
  }

  .projektansicht__kopf {
    grid-row: 1;
  }

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

  .projektansicht__text {
    grid-row: 3;
    grid-column: 1 / span 4;
  }

  .projektansicht__daten {
    grid-row: 4;
    grid-column: 1 / span 4;
  }

  .projektansicht__datum dt {
    grid-column: 1;
  }

  .projektansicht__datum dd {
    grid-column: 2 / -1;
  }

  /* Textknopf statt Pille */
  .projektansicht__schliessen {
    position: relative;
    bottom: auto;
    left: auto;
    grid-row: 6;
    grid-column: 1 / span 2;
    justify-self: start;
    display: inline-block;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    line-height: inherit;
    translate: none;
  }

  .projektansicht__schliessen::after {
    content: "";
    position: absolute;
    inset: -12px;
  }

  .projektansicht__galerie {
    grid-column: 7 / span 6;
    padding-block: 12px;
  }

  /* Den oberen Rand trägt jede Spalte selbst: Ihre Posten zählen dann wie in
     der einen Galerie von der Fensterkante an und verschwinden ganz, bevor
     sie ans andere Ende springen. */
  .projektansicht__galerie--zwei {
    padding-top: 0;
  }

  .projektansicht__spalte {
    padding-top: 12px;
  }

  /* Endlosschleife: nichts scrollt, die Posten wandern. Seitlich offen, damit
     die Posten beim Öffnen und Schließen über den Rand fahren können. */
  .projektansicht__galerie.ist-schleife {
    height: 100svh;
    padding-bottom: 0;
    overflow: visible clip;
    touch-action: none;
  }

  .ist-schleife > .schleife__posten {
    flex: none;
    will-change: transform;
  }
}

@media (hover: hover) and (min-width: 1100px) {
  .projektansicht__schliessen:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
  }
}

/* „Auftraggeber“ ist breiter als eine Spalte, solange das Fenster schmal ist. */
@media (min-width: 1100px) and (max-width: 1359.98px) {
  .projektansicht__daten {
    grid-column: 1 / span 5;
  }

  .projektansicht__datum dt {
    grid-column: 1 / span 2;
  }

  .projektansicht__datum dd {
    grid-column: 3 / -1;
  }
}

/* In der Projektansicht ist zu keinem Zeitpunkt eine Scrollleiste zu sehen
   (Entscheidung von Malte): weder in der Info-Spalte noch in Galerie oder Bühne. */
.projektansicht,
.projektansicht * {
  scrollbar-width: none;
}

.projektansicht ::-webkit-scrollbar,
.projektansicht__info::-webkit-scrollbar {
  display: none;
}