/* ============================================================
   theme.css — das Aussehen des Themes.
   Die Grundtokens (Farben, Schriften, Abstände) kommen aus
   css/design-system.css; hier steht, was das Theme daraus macht.

   Geladen wird in dieser Reihenfolge, Späteres gewinnt:
     1. design-system.css   Grundtokens, wird nie bearbeitet
     2. theme.css           dieses Blatt
     3. site.css            Marke der jeweiligen Website

   Eine Website ändert Farben und Schriften deshalb nicht hier, sondern in
   ihrer eigenen site.css: mit derselben Auswahl wie unten, aber nur mit den
   Werten, die abweichen sollen. Sonst fällt sie bei jedem Theme-Update aus
   dem Tritt, weil eine eigene Datei die gleichnamige des Themes vollständig
   ersetzt und nicht ergänzt.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* Schrift */
  --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Platzhalter-Streifen, solange kein Bild vorhanden ist */
  --ph-a: var(--color-neutral-300);
  --ph-b: var(--color-neutral-200);

  /* Vollansicht: ein durchgehender dunkler Ton, in beiden Designs gleich.
     Ränder neben dem Bild sollen nicht auffallen. */
  --lightbox-bg: #191817;

  /* Akzentfarbe (gedecktes Schiefergrau statt Signalrot) */
  --color-accent: #6f7d86;
  --color-accent-600: #5b6870;
  --color-accent-700: #47525a;
  --color-accent-100: #eceef0;
  --color-accent-800: #39434a;
}

/* Dunkles Design — automatisch nach Systemeinstellung … */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1b1a19;
    --color-surface: #262524;
    --color-text: #f4f2f0;
    --color-divider: color-mix(in srgb, #f4f2f0 32%, transparent);
    --color-accent: #9aa7b0;
    --color-accent-600: #b0bcc4;
    --color-accent-700: #c6d0d6;
    --ph-a: var(--color-neutral-800);
    --ph-b: var(--color-neutral-900);
  }
}
/* … oder in hugo.toml über params.colorMode festgelegt. Diese Regel gilt auch
   dann, wenn der Besucher seinen Rechner anders eingestellt hat; color-scheme
   zieht Bildlaufleisten und Formularelemente mit, die sonst dem System folgen. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #1b1a19;
  --color-surface: #262524;
  --color-text: #f4f2f0;
  --color-divider: color-mix(in srgb, #f4f2f0 32%, transparent);
  --color-accent: #9aa7b0;
  --color-accent-600: #b0bcc4;
  --color-accent-700: #c6d0d6;
  --ph-a: var(--color-neutral-800);
  --ph-b: var(--color-neutral-900);
}
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-accent: #6f7d86;
  --color-accent-600: #5b6870;
  --color-accent-700: #47525a;
  --ph-a: var(--color-neutral-300);
  --ph-b: var(--color-neutral-200);
}

/* ---------- Grundgerüst ---------- */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.025em; }
p, li { letter-spacing: -0.005em; }
h6 { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.12em; }
.btn { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.01em; }

main { flex: 1; }

/* ---------- Kopf- und Fußzeile ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  padding: var(--space-3) clamp(16px, 4vw, 48px);
  /* Marke, Menüpunkte und Umschalter passen auf schmalen Bildschirmen nicht in
     eine Zeile. Ohne Umbruch schob die Kopfzeile die Seite in die Breite — und
     damit auch die fest positionierte Vollansicht, die dann breiter wurde als
     der Bildschirm. */
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.brand {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Auf schmalen Bildschirmen passen Marke und Menüpunkte nicht mehr in eine
   Zeile. Statt sie an einer beliebigen Stelle umbrechen zu lassen, bekommt die
   Marke eine eigene, mittige Zeile; die Menüpunkte stehen mittig darunter. Ab
   etwa 560 px ist genug Platz für eine Zeile, darunter sieht die aufgeteilte
   Anordnung ruhiger aus. */
@media (max-width: 560px) {
  .site-header { justify-content: center; gap: var(--space-3); }
  .nav-brand { flex-basis: 100%; margin-right: 0; text-align: center; }
}

/* Sprachumschalter, rechts neben den Menüpunkten. Das .nav-brand schiebt mit
   seinem margin-right: auto alles Übrige nach rechts, der Umschalter sitzt
   dadurch am Rand, ohne eigene Regel. Die aktuelle Sprache ist Text und kein
   Verweis — deshalb dieselbe Behandlung wie die Menüpunkte, aber ohne
   Ziel. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lang-switch a,
.lang-switch span { color: inherit; text-decoration: none; }
.lang-switch [aria-current="true"] { color: var(--color-accent); }
.lang-switch > * + *::before {
  content: "·";
  margin-right: var(--space-2);
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) clamp(16px, 4vw, 48px);
  border-top: 2px solid var(--color-divider);
  font-size: 12px;
}
.footer-links { display: flex; gap: var(--space-6); }
.footer-links a { text-decoration: none; }

/* ---------- Abschnitte ---------- */

.section { padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 72px); }
/* Bild und Text bleiben beieinander: ohne Obergrenze zieht das Raster auf
   breiten Bildschirmen auseinander — das Bild klebt links, der Text läuft
   rechts über 150 Zeichen pro Zeile. Gedeckelt und mittig bleibt beides
   zusammen und die Zeilen lesbar. */
.section-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(32px, 6vw, 88px) clamp(24px, 5vw, 72px);
  max-width: 1200px;
  margin-inline: auto;
}

.hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding: clamp(32px, 6vw, 88px) clamp(24px, 5vw, 72px) clamp(24px, 4vw, 56px);
  border-bottom: 2px solid var(--color-divider);
}
.hero h1 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
.hero p { max-width: 44ch; font-size: 16px; }
.hero .btn { margin-top: var(--space-4); }
.hero figure { margin: 0; }
.hero .photo { max-height: clamp(280px, 42vw, 520px); }

/* Kurze Bildschirme: das Handy im Querformat (etwa 844 × 390) hat zu wenig
   Höhe für den zweispaltigen Hero. Das Foto hing unten am Text (align-items)
   und ragte über den unteren Rand hinaus, während über ihm, neben dem Kicker,
   leere Fläche lag. Hier beginnt es oben — auf einer Höhe mit der
   Kicker-Zeile — und wird auf die verfügbare Höhe gedeckelt.
   Das Foto bleibt unbeschnitten: bei gedeckelter Höhe ergibt sich die Breite
   aus --photo-ratio. Erst ab 781 px: darunter stapelt der Hero einspaltig, das
   Foto liegt also ohnehin unter dem Text und würde beim Verkleinern nur
   kleiner, ohne sichtbar zu werden. */
@media (min-width: 781px) and (max-height: 500px) {
  .hero { align-items: start; }
  .hero .photo {
    /* Abgezogen wird der Platz über dem Foto: Kopfzeile, Innenabstand des
       Heros oben und etwas Luft nach unten. Die Kopfzeile ist 48 px hoch ohne
       den Design-Umschalter und 62 px mit ihm (dessen Knopf ist höher als die
       Schriftzeile) — gerechnet wird mit dem größeren Wert, sonst rutscht das
       Foto mit eingeschaltetem Umschalter wieder ein paar Pixel heraus. */
    max-height: calc(100svh - 62px - clamp(32px, 6vw, 88px) - var(--space-3));
    /* Deckelung erzeugt ein schmaleres Foto als die Spalte: an deren rechten
       Rand schieben, damit der Außenabstand erhalten bleibt. */
    margin-left: auto;
  }
}

.kicker {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.section-head {
  display: flex;
  /* Knopf und Überschrift auf einer Höhe halten; der Knopf ist höher als die
     Zeile mit der Überschrift. */
  align-items: center;
  justify-content: space-between;
  /* Die Knopfaufschrift ist lang: auf schmalen Bildschirmen rutscht der Knopf
     in eine eigene Zeile, statt im Kasten umzubrechen. */
  flex-wrap: wrap;
  gap: var(--space-4);
  row-gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.section-head h6 { margin: 0; }

/* ---------- Bildraster ---------- */

/* Spalten statt starrem Raster: jedes Foto behält sein Seitenverhältnis,
   die Bilder rücken von oben nach unten in der Spalte zusammen. */
.grid {
  --grid-gap: clamp(24px, 3vw, 48px);
  column-count: var(--grid-columns, 4);
  column-gap: var(--grid-gap);
}

@media (max-width: 1100px) { .grid { column-count: 3; } }
@media (max-width: 780px)  {
  .grid { column-count: 2; }
  .hero, .section-split { grid-template-columns: 1fr; }
}
@media (max-width: 520px)  { .grid { column-count: 1; } }

.grid figure {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--grid-gap);
  break-inside: avoid;
  cursor: pointer;
}

/* Bildfläche: zeigt das Foto, sonst das Streifenmuster.
   --photo-ratio setzt photo-box.html aus den echten Bildmaßen;
   der Wert hier gilt für Platzhalter und fehlende Dateien. */
.photo {
  position: relative;
  aspect-ratio: var(--photo-ratio, 3 / 2);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--ph-a) 0 3px, var(--ph-b) 3px 18px);
}
/* Kein grayscale-Filter: Fotos werden so gezeigt, wie sie exportiert wurden.
   Ob ein Bild in Farbe oder in Schwarzweiß ist, entscheidet die Datei — das
   CSS färbt nichts um. */
.photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.photo img[hidden] { display: none; }

.photo-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

/* ---------- Galerie-Filter ---------- */

/* Je Filterachse eine Zeile (Kategorien, Schlagwörter); beide filtern
   zusammen. Unten die Trennlinie wie bisher. */
.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Die Beschriftung der Zeile steht über ihr, nicht als erster Knopf neben den
   Schaltflächen: bei zwei Zeilen soll auf einen Blick klar sein, wonach welche
   filtert. .kicker bringt dafür einen Abstand nach unten mit, den hier die
   Zeile selbst setzt. */
.filter-row .kicker {
  flex-basis: 100%;
  margin-bottom: 0;
}

/* ---------- Über mich ---------- */

/* Bild neben dem Text in .section-split — "Über mich" und "Kontakt". */
.portrait,
.contact-photo {
  aspect-ratio: var(--photo-ratio, 4 / 5);
  max-height: clamp(320px, 38vw, 520px);
}

/* ---------- Kontakt ---------- */

/* Kontaktseite: gleicher Aufbau wie "Über mich", kein Formular. */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: 16px;
}
.contact-list .kicker { margin-bottom: var(--space-1); }

/* ---------- Vollansicht (Lightbox) ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(16px, 3vw, 48px);
  background: color-mix(in srgb, var(--lightbox-bg) 96%, transparent);
}
.lightbox[hidden] { display: none; }

/* Ohne eigenen Hintergrund: die Flächen neben dem Bild zeigen einfach den
   Hintergrund der Vollansicht, statt eines Streifenmusters.
   Die beiden Bildpuffer liegen übereinander, damit sich das alte und das neue
   Foto beim Blättern überblenden lassen. */
.lightbox-image {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: none;
  overflow: hidden;
  /* Waagerechte Wischgesten gehören dem Blättern, senkrechte dem Scrollen.
     Ohne das bricht der Browser die Geste als Scrollen ab. */
  touch-action: pan-y;
}
.lightbox-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  transition: opacity 0.34s ease, transform 0.34s ease;
  will-change: opacity, transform;
}
.lightbox-image img[hidden] { display: none; }

.lightbox-info {
  align-self: center;
  min-width: 0;
  min-height: 0;
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: 100%;
  overflow: auto;
}
/* Der Schließen-Knopf hängt rechts oben fest; Kicker und Titel fließen um ihn
   herum. Vorher belegte er eine eigene Spalte über die ganze Höhe, wodurch
   lange Titel auf halbe Breite zusammengedrückt wurden.
   flow-root, damit der Kasten den gefloateten Knopf umschließt. */
.lightbox-head { display: flow-root; }
.lightbox-head .btn {
  float: right;
  margin-left: var(--space-4);
  padding: var(--space-1) var(--space-3);
}
.lightbox-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.lightbox-story { margin: 0; font-size: 14px; line-height: 1.6; }

.meta { display: flex; flex-direction: column; gap: var(--space-3); font-size: 13px; margin: 0; }
.meta dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.meta dd { margin: 0; }
/* Schlagwörter: die Chips des Designsystems (.tag), nur in einer Reihe, die
   umbricht, wenn ein Foto viele Tags hat. */
.lightbox-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hint { font-size: 11px; margin: 0; }

/* Die Steuerleiste (Schließen / Details) gibt es nur dort, wo die Infospalte
   einklappt — auf schmalen und auf niedrigen Bildschirmen. */
.lightbox-controls { display: none; }

/* ---------- Vollansicht mit eingeklappter Infospalte ----------

   Gilt für schmale Bildschirme (Handy hochkant), für niedrige (Handy querland)
   und für Geräte ohne Maus (Tablet): überall dort, wo Bild und Infospalte
   nebeneinander nicht sinnvoll Platz haben — oder wo mit dem Finger gearbeitet
   wird, die Infospalte also nicht gelesen, sondern nur als Verdeckung des
   Fotos wahrgenommen wird. Das Bild bekommt die ganze Fläche, die Infospalte
   liegt als Blatt darüber und ist standardmäßig eingeklappt — das Foto soll
   ungestört zu sehen sein. Die Vollansicht selbst scrollt nie, nur das Blatt.

   Ein Tablet hätte für zwei Spalten genug Platz; es bekommt trotzdem diese
   Ansicht, weil dort gewischt und getippt wird. Die Prüfung gilt der primären
   Eingabe: mit angeschlossener Maus oder Trackpad (DeX, iPad mit Tastatur)
   meldet das Gerät hover/pointer wie ein Rechner und zeigt wieder zwei Spalten.

   Vorher lagen Bild und Infospalte untereinander in einer scrollenden Fläche,
   wodurch auf einem 412×923-Pixel-Handy der gesamte Inhalt über den Bildschirm
   hinauslief und die Ansicht in beide Richtungen scrollte. Und querland
   (z. B. 844×390) griff dieser Zweig gar nicht: eine 340 Pixel breite
   Infospalte blieb dauerhaft stehen und ließ dem Bild nur ~430 Pixel.

   Woher das Blatt kommt, steht in den beiden Blöcken darunter: nicht die
   Eingabe entscheidet darüber, sondern die Ausrichtung — bei einem Tablet also
   die lange Kante, hochkant von unten und querland von rechts.

   Diese Bedingung ist in site.js gespiegelt; dort entscheidet sie, ob ein Tipp
   aufs Bild das Blatt zeigt statt die Ansicht zu schließen. Beide Stellen
   gehören zusammen geändert. */
@media (max-width: 780px), (max-height: 500px), (hover: none) and (pointer: coarse) {
  .lightbox {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;   /* Fallback für Browser ohne dvh */
    height: 100dvh;  /* volle Höhe ohne die Adressleiste mitzuzählen */
    /* Deckend statt durchscheinend: die Galerie im Hintergrund würde sonst
       in den Rändern neben dem Bild durchschimmern. */
    background: var(--lightbox-bg);
  }
  .lightbox-image { grid-area: 1 / 1; }

  /* Das Blatt liegt über dem Bild (z-index über den Bildpuffern, die 1/2
     belegen). Richtung und Größe setzen die beiden Blöcke darunter. */
  .lightbox-info {
    grid-area: 1 / 1;
    z-index: 4;
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-lg);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .lightbox.is-details .lightbox-info {
    visibility: visible;
    transition: transform 0.3s ease;
  }

  /* Der Schließen-Knopf sitzt jetzt in der Steuerleiste, nicht mehr im Blatt. */
  .lightbox-head .btn { display: none; }
  /* Tastatur-Hinweise helfen auf dem Touchscreen nicht. */
  .hint { display: none; }

  .lightbox-controls {
    grid-area: 1 / 1;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-3) var(--space-3);
    pointer-events: none;   /* nur die Knöpfe sollen Klicks annehmen */
  }
  .lightbox-controls > * { pointer-events: auto; }

  /* Auf dem dunklen Hintergrund brauchen die Knöpfe eigene Farben — die
     Standardfarben des Designsystems richten sich nach dem Seitendesign. */
  .lightbox-controls .btn {
    background: color-mix(in srgb, var(--lightbox-bg) 65%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 0;
    color: #f4f2f0;
  }
  .lightbox-controls .btn:hover {
    background: color-mix(in srgb, var(--lightbox-bg) 85%, transparent);
  }

  .lb-icon { width: 18px; height: 18px; }

  /* Der Details-Knopf ist ein reiner Symbolknopf. Den Zustand zeigt deshalb
     die Fläche statt eines Winkels: eingeklappt durchscheinend dunkel wie der
     Schließen-Knopf, ausgeklappt hell gefüllt. Monochrom, weil ein Farbton
     neben den Fotos zu laut wäre. */
  .lightbox.is-details .lightbox-controls .js-lb-details {
    background: #f4f2f0;
    color: var(--lightbox-bg);
  }
}

/* Blatt von unten: hochkant, und generell dort, wo zu wenig Breite für einen
   Streifen bliebe — unter 600 Pixel nimmt ein Streifen von rechts mehr vom
   Bild weg, als er nützt. Höchstens 78 % der Höhe, damit vom Foto noch etwas
   zu sehen bleibt. Tablet hochkant zählt hierher: die lange Kante ist die
   Höhe, ein Streifen von rechts ließe nur einen schmalen Rest des Bildes. */
@media (max-width: 780px) and (min-height: 501px), (max-width: 599px),
       (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .lightbox-info {
    align-self: end;
    max-height: 78dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-4) var(--space-4)
             calc(var(--space-6) + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .lightbox.is-details .lightbox-info { transform: none; }
}

/* Breites Blatt: auf einem Tablet hochkant wäre die Infospalte 800 Pixel breit
   und die Erzählung liefe über gut 100 Zeichen pro Zeile. Gedeckelt wird der
   ganze Blattinhalt, nicht nur der Text — sonst zögen die Trennlinien weiter
   als das, was zwischen ihnen steht. In rem, nicht in ch: ch hängt an der
   Schriftgröße des jeweiligen Elements, und damit endeten Erzählung (14 px),
   Trennlinien und Meta-Liste (13 px) auf drei verschiedenen Breiten. 34rem
   entsprechen rund 68 Zeichen der Erzählung. Nur hier gedeckelt: auf dem Handy
   ist das Blatt schmal genug, ein Deckel würde dort die Zeilen nur kürzer
   machen als nötig. */
@media (min-width: 600px) and (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .lightbox-info > * { max-width: 34rem; }
}

/* Streifen von rechts: querland, sobald genug Breite da ist. Hier fehlt die
   Höhe, nicht die Breite — ein Blatt von unten würde das Foto fast vollständig
   verdecken (bei 844×390 blieben davon 83 Pixel). Der Streifen lässt den linken
   Teil des Bildes stehen. Die Steuerleiste rückt dabei nach links: rechts oben
   säße sie sonst auf dem Streifen und verdeckte dessen Text. Tablet querland
   bekommt ihn ebenfalls: die lange Kante ist die Breite, und in einer
   420 Pixel breiten Spalte bleiben die Zeilen lesbar, während ein Blatt von
   unten bei 1280 Pixel Breite die Erzählung über die ganze Bildschirmbreite
   laufen ließe. */
@media (min-width: 600px) and (max-height: 500px),
       (min-width: 600px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .lightbox-info {
    justify-self: end;
    align-self: stretch;
    width: min(420px, 62vw);
    max-height: 100%;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    padding: var(--space-4);
    transform: translateX(100%);
  }
  .lightbox.is-details .lightbox-info { transform: none; }

  .lightbox-controls { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-image img,
  .lightbox-info,
  .lightbox.is-details .lightbox-info { transition: none; }
}

/* ---------- Ergänzungen für die Hugo-Version ---------- */

[hidden] { display: none !important; }

.brand { text-decoration: none; color: inherit; }

/* "Anfrage senden" ist hier ein Link mit Button-Optik */
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

.section-head a { font-size: 14px; }

/* Journal */
.post-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; }
.post-list li { padding: var(--space-4) 0; border-bottom: 2px solid var(--color-divider); }
.post-list li:first-child { border-top: 2px solid var(--color-divider); }
.post-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4); text-decoration: none; }
.post-date { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); min-width: 9em; }
.post-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.post-list p { margin: var(--space-2) 0 0; font-size: 14px; }

/* Fließtextseiten (Journal-Beitrag, einfache Seiten) */
.prose { max-width: 68ch; }
.prose p { font-size: 16px; line-height: 1.7; }
.prose h1 { font-size: clamp(32px, 4vw, 52px); margin: 0 0 var(--space-6); }
/* Abschnitte im Fließtext brauchen Luft nach oben, sonst kleben die
   Überschriften am vorigen Absatz — auf langen Seiten wie dem Impressum
   ist das sonst kaum zu überblicken. */
.prose h2, .prose h3 { margin-top: var(--space-8); }