/*
 * Silbergelatine — brennweite28.de
 *
 * Entwurf A vom 01.09.2026, freigegeben mit der gewichteten Übersicht aus B.
 *
 * Die Haltung in einem Satz: Papier statt Bildschirmweiß, keine Farbe außer
 * einem Selenbraun für Verweise, viel Rand. Alles, was leuchtet, soll das Bild
 * sein — nicht die Oberfläche darum herum.
 *
 * Bodoni ist die Didone der Penn-Ära und trägt nur in großen Graden; sie steht
 * deshalb ausschließlich in Titeln. Jost, der frei lizenzierte Verwandte der
 * Futura, macht den Rest.
 */

/* ─── Schriften ────────────────────────────────────────────────────────────
   Zwei eigene Familien, gebaut nach demselben Verfahren wie Picturefish Sans:
   eine frei lizenzierte Quelle, ein eigener Punkt im Designraum, quadratische
   Punkte als Hauszeichen, eigene Namens- und Lizenzeinträge.

     Brennweite Didone   aus Bodoni Moda (Owen Earl, OFL 1.1)
     Brennweite Grotesk  aus Outfit (Rodrigo Fuenzalida, OFL 1.1)

   Beide liegen im Theme, nicht bei Google: Ein Font-Abruf von einem fremden
   Server überträgt die IP-Adresse des Lesers an einen Dritten.
   Herkunft und Bauskript: dev.grwthlab.de/brennweite28-fonts. */
@font-face {
  font-family: "Brennweite Didone";
  src: url("../fonts/BrennweiteDidone-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brennweite Didone";
  src: url("../fonts/BrennweiteDidone-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brennweite Grotesk";
  src: url("../fonts/BrennweiteGrotesk-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brennweite Grotesk";
  src: url("../fonts/BrennweiteGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brennweite Grotesk";
  src: url("../fonts/BrennweiteGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --papier: #F7F5F1;
  --tinte:  #16181A;
  --silber: #8B8880;
  --linie:  #DCD8D0;
  --selen:  #6B5B4E;

  /* Ghost erlaubt seit 6.x eine Schriftwahl im Admin. Sie darf gewinnen, wenn
     jemand sie setzt — sonst bleibt es bei Bodoni und Jost. */
  --serif: var(--gh-font-heading, "Brennweite Didone", "Didot", "Bodoni MT", Georgia, serif);
  --grotesk: var(--gh-font-body, "Brennweite Grotesk", "Futura", "Avenir Next", -apple-system, sans-serif);

  --rand: clamp(20px, 5vw, 56px);
  --satz: 500px;   /* Textspalte — bewusst schmaler als jedes Bild */
  --bild: 1000px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 16px/1.7 var(--grotesk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
.text a { color: var(--selen); text-decoration: underline; text-underline-offset: 3px; }
.text a:hover { text-decoration-thickness: 2px; }

/* ─── Kopf und Fuß ─── */
.leiste {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 22px var(--rand);
  border-bottom: 1px solid var(--linie);
}
/* Die Wortmarke steht gemischt, nicht in Versalien.
   Eine Didone ist im Versalsatz haarfein — bei 17 Pixeln bleicht sie aus, und
   die Marke wirkt schwächer als alles andere auf der Seite. Gemischt gesetzt
   trägt sie ihre Kontraste. */
.marke {
  font: 500 22px/1 var(--serif);
  letter-spacing: -.008em;
}
.menue {
  display: flex; gap: 22px; margin-left: auto;
  font: 400 12px/1 var(--grotesk);
  letter-spacing: .13em; text-transform: uppercase; color: var(--silber);
}
.menue a:hover, .menue a.an { color: var(--tinte); }

.fussleiste {
  margin-top: 90px; padding: 30px var(--rand) 46px;
  border-top: 1px solid var(--linie);
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  font: 400 11.5px/1.5 var(--grotesk);
  letter-spacing: .1em; text-transform: uppercase; color: var(--silber);
}
.fuss-menue { display: flex; gap: 18px; margin-left: auto; }
.fussleiste a:hover { color: var(--tinte); }

.inhalt { padding: 0 0 10px; }

/* ─── Übersicht ────────────────────────────────────────────────────────────
   Gewichtet: eine Geschichte groß, zwei daneben, der Rest in Dreierreihen.
   Unter 900 px wird daraus eine einzige Spalte — auf dem Telefon ist jede
   Aufnahme groß. */
.aufmacher {
  display: grid; grid-template-columns: 1.9fr 1fr; gap: 34px;
  padding: 46px var(--rand) 0;
}
.daneben { display: flex; flex-direction: column; gap: 34px; }

.reihe {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px;
  padding: 46px var(--rand) 0;
}

.kachel .bildfeld { display: block; overflow: hidden; }
.kachel img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  box-shadow: 0 1px 2px rgba(22, 24, 26, .08),
              0 12px 28px -10px rgba(22, 24, 26, .18);
  transition: opacity .35s ease, box-shadow .35s ease;
}
.kachel .bildfeld:hover img {
  box-shadow: 0 2px 3px rgba(22, 24, 26, .10),
              0 18px 38px -10px rgba(22, 24, 26, .26);
}
.kachel.gross img { aspect-ratio: 3 / 2; }
.kachel .bildfeld:hover img { opacity: .86; }
.kachel .ohne-bild {
  display: block; aspect-ratio: 4 / 5; background: var(--linie);
}

.kachel .nummer {
  font: 400 10px/1 var(--grotesk);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--silber); margin: 13px 0 5px;
}
.kachel .name {
  font: 500 19px/1.28 var(--serif); margin: 0; letter-spacing: -.005em;
}
.kachel.gross .name { font-size: 27px; }
.kachel .name a:hover { color: var(--selen); }
.kachel .ort {
  font: 400 12.5px/1.45 var(--grotesk); color: var(--silber);
  letter-spacing: .04em; margin: 5px 0 0;
}

/* ─── Eine Geschichte ─── */
.geschichte { padding: 46px var(--rand) 0; }
/* Der Schatten braucht Platz, sonst schneidet ihn die Fläche ab. */
.buehne-luft { padding-bottom: 6px; }

.aufnahme { margin: 0 auto; max-width: var(--bild); }

/*
 * Der Schatten.
 *
 * Zwei Lagen, wie ein Abzug, der auf dem Papier liegt: eine harte, ganz kurze
 * Kante und ein weiter, weicher Schein darunter. Der Ton ist nicht schwarz,
 * sondern die Tinte mit wenig Deckkraft — auf Papierweiß wirkt ein neutrales
 * Grau schmutzig.
 */
.aufnahme img {
  width: 100%;
  box-shadow: 0 1px 2px rgba(22, 24, 26, .10),
              0 18px 40px -12px rgba(22, 24, 26, .22);
}

/* ─── Die Legende ──────────────────────────────────────────────────────────
   Eingeklappt steht dort eine graue Zeile, mehr nicht. Das Bild soll wirken,
   bevor jemand über Blende und ISO liest. */
.aufnahme figcaption {
  max-width: var(--bild); margin: 15px auto 0;
  font: 400 11.5px/1.5 var(--grotesk); color: var(--silber);
}
.legende summary {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none;
  letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px;
  padding: 3px 0;
}
.legende summary::-webkit-details-marker { display: none; }
.legende summary::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .18s ease;
}
.legende[open] summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.legende summary:hover { color: var(--tinte); }

.legende-inhalt {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--linie);
  max-width: 300px; letter-spacing: .01em;
}
/* Was der Bildeditor als Legende einsetzt: Rechteangabe, Gerät, Werte.
   Ohne diese Bausteine bleibt es schlichter Text — auch das trägt. */
.legende-inhalt .rechte { color: var(--selen); margin: 0 0 9px; }
.legende-inhalt .womit { margin: 0; color: var(--silber); }
.legende-inhalt .geraet { color: var(--tinte); font-weight: 500; margin: 0 0 9px; }
.legende-inhalt table { border-collapse: collapse; width: 100%; max-width: 220px; }
.legende-inhalt td { padding: 1px 0; border: 0; }
.legende-inhalt td + td { text-align: right; color: var(--tinte); font-weight: 500; }

.satzspiegel { max-width: var(--satz); margin: 42px auto 0; }

.titel {
  font: 400 clamp(28px, 4vw, 38px)/1.16 var(--serif);
  margin: 0 0 16px; letter-spacing: -.012em;
}
.vorspann {
  font: 400 16px/1.62 var(--grotesk); color: var(--silber); margin: 0 0 24px;
}
.text p { margin: 0 0 16px; }
.text h2 {
  font: 400 23px/1.3 var(--serif); margin: 34px 0 12px; letter-spacing: -.008em;
}
.text h3 {
  font: 500 13px/1.4 var(--grotesk); letter-spacing: .12em;
  text-transform: uppercase; color: var(--silber); margin: 30px 0 10px;
}
.text blockquote {
  margin: 26px 0; padding-left: 20px; border-left: 1px solid var(--linie);
  font: 400 19px/1.5 var(--serif); color: var(--tinte);
}
.text ul, .text ol { margin: 0 0 16px; padding-left: 22px; }
.text li { margin-bottom: 6px; }
.text hr { border: 0; border-top: 1px solid var(--linie); margin: 34px 0; }

.signatur {
  margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--linie);
  font: 400 11.5px/1.5 var(--grotesk);
  letter-spacing: .1em; text-transform: uppercase; color: var(--silber);
}
.signatur a:hover { color: var(--tinte); }

/* ─── Bilder im Fließtext ──────────────────────────────────────────────────
   Ghosts Karten dürfen aus der Textspalte ausbrechen: Ein Foto in Satzbreite
   wäre in einer Fotogeschichte eine Briefmarke. */
.text .kg-card { margin: 32px 0; }
.text .kg-card img {
  box-shadow: 0 1px 2px rgba(22, 24, 26, .10),
              0 18px 40px -12px rgba(22, 24, 26, .22);
}
.text .kg-width-wide  { width: min(88vw, var(--bild)); margin-left: 50%; transform: translateX(-50%); }
.text .kg-width-full  { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.text figcaption {
  text-align: center; margin-top: 11px;
  font: 400 11.5px/1.5 var(--grotesk); letter-spacing: .06em; color: var(--silber);
}
.text .kg-gallery-container { display: block; }
.text .kg-gallery-row { display: flex; gap: 12px; margin-bottom: 12px; }
.text .kg-gallery-image { flex: 1 1 0; }

/* ─── Archive, Fehler, Anschluss ─── */
.archiv-kopf { padding: 56px var(--rand) 0; max-width: var(--satz); margin: 0 auto; }
.archiv-titel { font: 400 clamp(26px, 3.4vw, 34px)/1.2 var(--serif); margin: 0 0 12px; }
.archiv-text { font: 400 15px/1.6 var(--grotesk); color: var(--silber); margin: 0; }
.archiv-kopf .nummer {
  font: 400 10px/1 var(--grotesk); letter-spacing: .2em; text-transform: uppercase;
  color: var(--silber); margin: 0 0 9px;
}

.fehler { padding: 90px var(--rand); max-width: var(--satz); margin: 0 auto; text-align: center; }
.fehler .nummer {
  font: 400 12px/1 var(--grotesk); letter-spacing: .24em; color: var(--silber); margin: 0 0 12px;
}

.weiter { margin-top: 74px; }
.weiter-marke {
  font: 400 10.5px/1 var(--grotesk); letter-spacing: .2em; text-transform: uppercase;
  color: var(--silber); margin: 0; padding: 0 var(--rand);
  border-top: 1px solid var(--linie); padding-top: 30px;
}
.weiter .reihe { padding-top: 26px; }

/* ─── Blättern ─── */
.pagination {
  display: flex; align-items: center; gap: 20px; justify-content: center;
  padding: 56px var(--rand) 0;
  font: 400 11.5px/1 var(--grotesk); letter-spacing: .12em; text-transform: uppercase;
  color: var(--silber);
}
.pagination a:hover { color: var(--tinte); }

/* ─── Schmale Bildschirme ─── */
@media (max-width: 900px) {
  .aufmacher { grid-template-columns: 1fr; gap: 40px; }
  .reihe { grid-template-columns: repeat(2, 1fr); }
  .kachel.gross .name { font-size: 23px; }
}
@media (max-width: 600px) {
  .reihe { grid-template-columns: 1fr; }
  .kachel img, .kachel.gross img { aspect-ratio: 3 / 2; }
  .leiste { gap: 14px; }
  .menue { margin-left: 0; width: 100%; gap: 16px; }
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}