/* Aus dem Fotohintergrund abgeleitete Textur. Lokaler Gestaltungsversuch. */
:root {
  --muted: #a5a29c;
}

body {
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 20, 23, .5), rgba(16, 20, 23, .5)),
    url("studio-texture-20260921.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.hero,
footer.foot.dark {
  background: transparent;
}

footer.foot.dark,
footer.foot.dark .foot-meta,
footer.foot.dark a {
  color: rgba(255, 255, 255, .6);
}

.hero-portrait--new picture {
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
}

.hero-portrait--new::after,
.interlude.fade-edges::before,
.interlude.fade-edges::after {
  display: none;
}

.interlude.fade-edges {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

@media (max-width: 880px) {
  .hero-portrait--new picture {
    -webkit-mask-image: linear-gradient(to bottom, #000 28%, transparent 44%);
    mask-image: linear-gradient(to bottom, #000 28%, transparent 44%);
  }
}

/* ---------------------------------------------------------------------------------------------
   Druck. Diese Datei haengt an allen 18 Inhaltsseiten und ist darum die einzige Stelle, an der
   die Druckausgabe fuer die ganze Website geregelt werden kann.

   Der Anlass ist gemessen: Browser drucken Hintergruende ab Werk NICHT mit. Ohne diese Regeln
   stand der helle Text der Seite auf weissem Papier, Kontrast 1.13 beim Titel und 2.55 beim
   Fliesstext. Das Blatt kam praktisch leer aus dem Drucker.

   Die Farbwerte der Seite laufen ueber Variablen. Sie hier umzudefinieren dreht die ganze
   Seite auf einen Schlag. Was fest verdrahtet ist, steht darunter einzeln.
   --------------------------------------------------------------------------------------------- */
@media print {
  /* Ohne eigenen Rand stiess der Text an die Blattkante, gemessen an der Startseite. */
  @page { margin: 16mm 15mm; }

  :root {
    --ink: #111111;
    --ink-soft: #333333;
    --muted: #444444;
    --line: #bbbbbb;
    --line-link: #888888;
    --bg: #ffffff;
    --bg-tone: #ffffff;
    --bg-dark: #ffffff;
  }

  body::before { display: none; }

  html, body { background: #fff !important; color: #111 !important; }

  /* Die Einblendung beim Scrollen setzt Abschnitte auf opacity 0, bis sie ins Sichtfeld kommen.
     Was beim Drucken nie im Sichtfeld war, bliebe unsichtbar: das Blatt zeigte dann die
     Ueberschriften und darunter nichts. Gemessen an der Startseite. */
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; animation: none !important; }

  /* Was auf Papier nichts zu suchen hat: die feste Kopfzeile, der Sprunglink, das
     bildschirmfuellende Portraet, die Galerie und ihre Bedienknoepfe. */
  .nav,
  .skip-link,
  .hero,
  #out-of-office,
  .interlude,
  .carousel-controls { display: none !important; }

  /* Die fest verdrahteten hellen Farben einzeln. */
  h1, h2, h3, .eyebrow, .pt, .brand,
  .hero-content h1,
  .hero-content .kicker a { color: #111 !important; }
  .lead, .src, .kicker, .authors, .source, .role,
  .about-text, .list-item, .foot-meta { color: #222 !important; }
  footer.foot,
  footer.foot.dark,
  footer.foot.dark .foot-meta,
  footer.foot.dark a,
  footer.foot a { color: #333 !important; background: #fff !important; }

  a { color: #111 !important; text-decoration: underline; }

  /* Ein Verweis ist auf Papier nur etwas wert, wenn die Adresse dabeisteht. Interne Sprungmarken
     und Mailadressen bleiben aussen vor, die traegt der Text ohnehin. */
  main a[href^="http"]::after,
  .about-text a[href^="http"]::after,
  .list a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }

  /* Knoepfe drucken als Rahmen, nicht als Flaeche. */
  .btn, .btn-pdf, .btn.quiet { border: 1px solid #888 !important; background: none !important;
                               color: #111 !important; }

  /* Abschnitte nicht mitten auf der Seite zerreissen. */
  section, .list-item, .paper { page-break-inside: avoid; }
  /* Der seitliche Abstand steht am Inhalt und nicht nur in @page: nicht jeder Drucktreiber
     wertet den Blattrand aus, gemessen an der Startseite. */
  section.block { padding: 0 10mm 14pt !important; }
  main.paper { padding: 0 10mm !important; }
  .oo-head { padding: 0 10mm !important; }
}