/* ─────────────────────────────────────────────────────────────
   Bedienblock für die Projektseiten.

   Auszeichnung und Regeln sind unverändert von der Startseite
   übernommen, damit es überall dasselbe Element ist: die
   Sprachmarke DE, daneben der gelbe Block mit Darstellung und
   Suche. Die Lupe ist gezeichnet, kein Schriftzeichen.

   Der Block sitzt absolut in der Kopfzeile: die sieben Kopfzeilen
   sind Raster mit je drei festen Spalten, ein viertes Kind bräche
   jede einzelne um.
   ───────────────────────────────────────────────────────────── */

/* Ohne reservierte Bildlaufleiste sitzt der Block auf Seiten ohne
   Bildlauf 15 px weiter rechts als auf den übrigen. */
html {
  scrollbar-gutter: stable;
}

.doc-head,
.head,
.lab-bar,
.pack-header,
.project-header,
.case-header,
.topbar,
.site-header {
  position: relative;
  padding-right: 168px;
}

.doc-head .site-utilities,
.head .site-utilities,
.lab-bar .site-utilities,
.pack-header .site-utilities,
.project-header .site-utilities,
.case-header .site-utilities,
.topbar .site-utilities,
.site-header .site-utilities {
  position: fixed;
  flex-direction: row;
  z-index: 60;
  display: flex;
  align-items: center;
}

/* Abstand und Zwischenraum stehen nur noch an `html body .site-utilities`,
   einmal fuer breite Fenster und einmal fuer schmale. Solange sie auch hier
   standen, wog diese Liste schwerer (zwei Klassen gegen eine) und die
   Mobilansicht bekam nie ihre eigenen 14 und 13 Pixel: gemessen sass der
   Block auch bei 390px auf 18 und 26. */

/* Schrift, Gewicht und Farbe werden ausdrücklich gesetzt. Ohne das erbt
   der Block die Typografie der jeweiligen Seite: DE erschien mal fett,
   mal mager, die Zeichen mal schwarz, mal grau. */
.site-utilities .language-status {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
}

.site-utilities .utility-block {
  display: grid;
  grid-template-columns: repeat(2, 41px);
  height: 41px;
  color: #101010;
  background: #ffe414;
}

.site-utilities .utility-button {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  color: #101010;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.site-utilities .utility-button:hover,
.site-utilities .utility-button:focus-visible {
  background: rgba(0, 0, 0, .08);
}

.site-utilities .utility-button:focus-visible {
  outline: 2px solid #101010;
  outline-offset: -2px;
}

.site-utilities .utility-button span {
  display: block;
  position: relative;
  width: 17px;
  height: 17px;
}

/* Die Lupe: Kreis plus Griff, wie auf der Startseite gezeichnet. */
.site-utilities .search-toggle {
  border-left: 1px solid rgba(0, 0, 0, .08);
}

.site-utilities .search-toggle span {
  width: 14px;
  height: 14px;
  border: 3px solid #111;
  border-radius: 50%;
}

.site-utilities .search-toggle span::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -4px;
  width: 9px;
  height: 3px;
  background: #111;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* ─────────────────────────────────────────────────────────────
   Mond und Sonne werden gezeichnet, nicht gesetzt.

   Als Schriftzeichen sassen sie nie mittig: sie stehen hoch ueber der
   Grundlinie und haben kaum Unterlaenge, also wird der Zeilenkasten
   zentriert und nicht das Zeichen. Gemessen 3.67px zu tief beim Mond
   und 3.00px bei der Sonne - zwei verschiedene Werte, weil es zwei
   verschiedene Zeichen sind. Dazu kommt, dass Inter beide gar nicht
   fuehrt: welche Schrift einspringt, entscheidet das Betriebssystem,
   und mit ihr aendern sich die Masse.

   Gezeichnet ist es Geometrie statt Typografie: die Mitte der Form ist
   die Mitte der Zelle, auf jedem System. Die Lupe steht seit jeher so
   da und sitzt genau. Das Zeichen im Markup bleibt stehen, wird aber
   nicht mehr gesetzt; es ist ohnehin `aria-hidden`.
   ───────────────────────────────────────────────────────────── */
.site-utilities .theme-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  font-size: 0;
  /* Der Biss sitzt oben rechts, die Sichel oeffnet sich dorthin. Sie ist
     rund 5.5px stark, damit sie neben dem 3px starken Strich der Lupe
     nicht duenn wirkt. Abgetastet: sichtbare Form 14.75 mal 14.75, ihre
     Mitte liegt 0.56px links und 0.56px unter der Mitte des Kaestchens,
     weil eine Sichel nicht symmetrisch ist. Genau das wird ausgeglichen:
     mittig steht die Form, nicht ihr Kasten. */
  -webkit-mask: radial-gradient(circle 11px at 15px 1px, transparent 0 99%, #000 100%);
          mask: radial-gradient(circle 11px at 15px 1px, transparent 0 99%, #000 100%);
  transform: translate(0.56px, -0.56px);
}

/* Im dunklen Thema zeigt der Knopf die Sonne: Scheibe und acht Strahlen,
   die zweite Vierergruppe um 45 Grad gedreht. */
[data-theme="dark"] .site-utilities .theme-icon {
  width: 9px;
  height: 9px;
  -webkit-mask: none;
          mask: none;
  /* Die Sonne ist symmetrisch und braucht den Ausgleich der Sichel nicht. */
  transform: none;
}

[data-theme="dark"] .site-utilities .theme-icon::before,
[data-theme="dark"] .site-utilities .theme-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  background:
    linear-gradient(currentColor 0 0) 50% 0 / 2.4px 3.6px no-repeat,
    linear-gradient(currentColor 0 0) 50% 100% / 2.4px 3.6px no-repeat,
    linear-gradient(currentColor 0 0) 0 50% / 3.6px 2.4px no-repeat,
    linear-gradient(currentColor 0 0) 100% 50% / 3.6px 2.4px no-repeat;
}

[data-theme="dark"] .site-utilities .theme-icon::after {
  transform: rotate(45deg);
}

@media (max-width: 620px) {
  .doc-head,
  .head,
  .lab-bar,
  .pack-header,
  .project-header,
  .case-header,
  .topbar {
    padding-right: 104px;
  }

  .site-utilities {
    top: 14px;
    right: 13px;
    gap: 8px;
  }

  .site-utilities .language-status {
    display: none;
  }

  .site-utilities .utility-block {
    grid-template-columns: repeat(2, 34px);
    height: 34px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Zwei Seiten setzen eigene Regeln, die den Block treffen:
   Pigment blendet auf schmalen Geräten alle span der Kopfzeile aus,
   und die Startseite verschiebt ihre Bedienleiste. Beides wird hier
   mit höherer Gewichtung zurückgenommen, damit der Block überall
   gleich sitzt.
   ───────────────────────────────────────────────────────────── */
html body .site-utilities,
html body .site-utilities .utility-block,
html body .site-utilities .utility-button {
  display: flex;
}

html body .site-utilities .utility-block {
  display: grid;
  grid-template-columns: repeat(2, 41px);
  height: 41px;
}

html body .site-utilities .utility-button {
  display: grid;
}

html body .site-utilities {
  position: fixed;
  top: 18px;
  right: 26px;
  margin: 0;
  flex-direction: row;
  align-items: center;
  gap: 13px;
}

@media (max-width: 620px) {
  html body .site-utilities {
    top: 14px;
    right: 13px;
    gap: 8px;
  }

  html body .site-utilities .utility-block {
    grid-template-columns: repeat(2, 34px);
    height: 34px;
  }
}

/* Auch die Zeichen im gelben Feld bekommen ihre Werte ausdrücklich:
   sie sassen sonst je nach Seite anders und in anderer Farbe. */
html body .site-utilities .utility-button {
  color: #101010;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

/* Die allgemeine Regel `.site-utilities .utility-button span` ist einen
   Schritt spezifischer als `.site-utilities .theme-icon` und presste die
   Form in 17 mal 17. Die Masse stehen deshalb hier noch einmal.

   Dazu kommt die Startseite: `home.css` fuehrt aus der Zeit des
   Schriftzeichens noch eigene Regeln fuer dieselbe Spanne.

       .theme-toggle span                      { background: none }
       .theme-toggle span::before, ::after     { content: none }
       :root[data-theme="dark"] .theme-toggle span { background: none; border: 0 }

   Die letzte wiegt schwerer als `[data-theme="dark"] .site-utilities
   .theme-icon`, deshalb fehlte auf der Startseite die Scheibe der Sonne,
   und sie muss mit `html[data-theme="dark"] body ...` geschlagen werden:
   `[data-theme="dark"] html ...` trifft nie, denn das Attribut steht auf
   `html` selbst und nicht auf einem Vorfahren davon,
   und `content: none` haette ihr auch die Strahlen genommen. Genau dort
   war das Zeichen "mal da, mal nicht". Die ganze Zeichnung steht deshalb
   hier noch einmal, mit `html body` davor. */
html body .site-utilities .theme-icon {
  position: relative;
  display: block;
  color: #101010;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  font-size: 0;
  -webkit-mask: radial-gradient(circle 11px at 15px 1px, transparent 0 99%, #000 100%);
          mask: radial-gradient(circle 11px at 15px 1px, transparent 0 99%, #000 100%);
  transform: translate(0.56px, -0.56px);
}

html body .site-utilities .theme-icon::before,
html body .site-utilities .theme-icon::after { content: none; }

html[data-theme="dark"] body .site-utilities .theme-icon {
  width: 9px;
  height: 9px;
  background: currentColor;
  -webkit-mask: none;
          mask: none;
  transform: none;
}

html[data-theme="dark"] body .site-utilities .theme-icon::before,
html[data-theme="dark"] body .site-utilities .theme-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  background:
    linear-gradient(currentColor 0 0) 50% 0 / 2.4px 3.6px no-repeat,
    linear-gradient(currentColor 0 0) 50% 100% / 2.4px 3.6px no-repeat,
    linear-gradient(currentColor 0 0) 0 50% / 3.6px 2.4px no-repeat,
    linear-gradient(currentColor 0 0) 100% 50% / 3.6px 2.4px no-repeat;
}

html[data-theme="dark"] body .site-utilities .theme-icon::after {
  transform: rotate(45deg);
}

html body .site-utilities .search-toggle span {
  border-color: #111;
  background: transparent;
}

html body .site-utilities .search-toggle span::after {
  background: #111;
}

/* DE steht neben dem gelben Feld auf dem Grund der Kopfzeile und braucht
   deshalb je Darstellung einen festen Wert. Mit inherit nahm es die
   Textfarbe der jeweiligen Seite an: sechs verschiedene Grüntöne. */
html body .site-utilities .language-status {
  color: #171b19;
}

html[data-theme="dark"] body .site-utilities .language-status {
  color: #e9efe9;
}


/* Die Kantenglättung wird ausdrücklich gesetzt. Ohne sie zeichnet die
   eine Seite die Schrift mit "auto" kräftiger als die andere mit
   "antialiased" - dasselbe DE wirkt dann mal fett, mal mager. */
html body .site-utilities,
html body .site-utilities .language-status,
html body .site-utilities .utility-button,
html body .site-utilities .theme-icon {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* DE steht auf verschiedenen Kopfzeilen: teils durchsichtig, teils auf
   einer halbdurchlässigen hellen Fläche. Ein eigener, blickdichter Grund
   macht es überall gleich lesbar und gleich hell. */
html body .site-utilities .language-status {
  padding: 4px 2px;
  border-radius: 2px;
}

/* Einzelne Kopfzeilen richten ihre Spannen selbst aus, etwa
   `.lab-bar span { justify-self: end }` auf Plastikzeit oder
   `.pack-header > span` auf RE:PACKAGED. Diese Regeln greifen auch auf
   die Zeichen im gelben Feld durch und drücken sie an den rechten Rand:
   die Lupe stand dann halb ausserhalb. Der Block richtet sich selbst. */
html body .site-utilities,
html body .site-utilities span,
html body .site-utilities .utility-button,
html body .site-utilities .utility-button span,
html body .site-utilities .language-status {
  justify-self: center;
  align-self: center;
}

html body .site-utilities .utility-button {
  justify-items: center;
  align-items: center;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  height: 100%;
}

/* ─────────────────────────────────────────────────────────────
   Der Block weicht beim Lesen aus: nach unten hinaus, nach oben
   zurueck. Das Attribut setzt `assets/theme.js`. Die Verschiebung
   geht ueber die eigene Hoehe hinaus, damit auch der Abstand zur
   Fensterkante mitwandert und nichts stehen bleibt.
   ───────────────────────────────────────────────────────────── */
html body .site-utilities {
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform;
}

html body .site-utilities[data-weg="true"] {
  transform: translateY(-220%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html body .site-utilities { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   Eine Kopfzeile fuer alle Projektseiten.

   Sie waren zwischen 60 und 80 Pixel hoch, teils klebend, teils
   nicht. Der Bedienblock steht dagegen ueberall gleich, also sass er
   je nach Seite mittig, zu hoch oder unter der Kante. Genau das war
   als "ueberall ein anderer Abstand oben" zu sehen.

   Mass und Verhalten sind jetzt die von Pigment: 80 Pixel hoch, beim
   Rollen faehrt sie mit. Stehen bleibt nur der Bedienblock, und der
   weicht beim Lesen ohnehin aus. Was die Seiten in ihre Kopfzeile
   schreiben, bleibt ihre Sache.

   Der Abstand des Blocks wird aus den beiden Hoehen gerechnet, statt
   ihn zu setzen: so sitzt er in jeder Breite genau in der Mitte.
   ───────────────────────────────────────────────────────────── */
:root {
  --kopfhoehe: 80px;
  --blockhoehe: 41px;
}

@media (max-width: 620px) { :root { --blockhoehe: 34px; } }
@media (max-width: 560px) { :root { --kopfhoehe: 68px; } }

html body .doc-head,
html body .head,
html body .lab-bar,
html body .pack-header,
html body .project-header,
html body .case-header,
html body .topbar,
html body .site-header {
  position: relative;
  top: auto;
  height: auto;
  min-height: var(--kopfhoehe);
  align-items: center;
}

html body .site-utilities {
  top: calc((var(--kopfhoehe) - var(--blockhoehe)) / 2);
}

/* ─────────────────────────────────────────────────────────────
   Kein Weichzeichner auf der Kopfzeile.

   `backdrop-filter` macht ein Element zum Bezugsrahmen fuer alles,
   was darin `position: fixed` traegt - genau wie `transform`. Der
   Bedienblock steht im Markup in der Kopfzeile, war dort also nicht
   mehr am Fenster befestigt, sondern an einer Zeile, die beim Lesen
   nach oben verschwindet. Er kam zurueck, nur eben weit ausserhalb
   des Bildes.

   Das betraf Dokumentation, Intervention, Plastikzeit und
   RE:PACKAGED - und keine der uebrigen Seiten. Genau die vier.

   Der Weichzeichner stammt aus der Zeit, als diese Kopfzeilen
   klebten und halbdurchsichtig ueber dem Inhalt lagen. Sie fahren
   jetzt mit, also hat er keine Aufgabe mehr.
   ───────────────────────────────────────────────────────────── */
html body .doc-head,
html body .head,
html body .lab-bar,
html body .pack-header,
html body .project-header,
html body .case-header,
html body .topbar,
html body .site-header {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
/* Shared navigation affordance. Project typography and composition stay local. */
:where(.project-header, .case-header, .lab-bar, .pack-header, .topbar, .head, .doc-head) > a:first-of-type,
.head > a.doc {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: max(13px, 1em);
}

.site-header > .identity {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  min-height: 44px;
  font-size: max(13px, 1em);
}

.topbar .quicklinks .quicklinks-primary > a,
.topbar .quicklinks .quick-film {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: max(13px, 1em);
}

.site-utilities .utility-block > .utility-button {
  min-width: 44px;
  min-height: 44px;
}

html body .site-utilities .utility-block {
  grid-template-columns: repeat(2, 44px);
  width: 88px;
  height: 44px;
}

/* Unified project marker: the visual identity remains local to each page,
   while orientation follows one calm editorial rule. */
html body [data-project-label]::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  max-width: min(42vw, 32rem);
  color: currentColor;
  content: attr(data-project-label);
  transform: translate(-50%, -50%);
  text-align: center;
  font: 700 .68rem/1.2 Inter, Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}

/* The former project-specific middle labels caused the visible rhythm to
   jump from page to page. Keep Umwelt's own titleblock as an editorial
   subhead, and replace the other middle markers with the shared marker. */
html body [data-project-label]:not(.topbar) > p,
html body [data-project-label]:not(.topbar) > .coordinate-mark,
html body [data-project-label]:not(.topbar) > span:not(.site-utilities) {
  visibility: hidden;
}

@media (max-width: 620px) {
  html body [data-project-label]::before {
    max-width: 43vw;
    font-size: .58rem;
    letter-spacing: .1em;
    content: attr(data-project-mobile);
  }
}