/* ==========================================================================
   Francisco Palomo – Basis & Komponenten
   Benötigt tokens.css. Aufbau: 1 Reset · 2 Basis · 3 Layout · 4 Header/Footer
   · 5 Typo-Komponenten · 6 Foto-Bausteine · 7 Karten & Listen · 8 Filter
   · 9 Buttons & Links · 10 Lightbox · 11 Hilfsklassen
   ========================================================================== */

/* ---------- 1 Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }   /* Seitenverhältnis bleibt trotz width/height-Attributen erhalten */
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figcaption, li { overflow-wrap: break-word; hyphens: auto; }

/* ---------- 2 Basis ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-6);
}
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
main { flex: 1; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); line-height: var(--leading-snug); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

::selection { background: var(--color-accent); color: var(--color-bg); }

/* ---------- 3 Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--width-page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--width-wide) + 2 * var(--gutter)); }
.container--text { max-width: calc(var(--width-text) + 2 * var(--gutter)); }

.section { padding-block: var(--section-gap) 0; }
.section:last-child { padding-bottom: var(--section-gap); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}
.section-head h2 { font-size: var(--text-lg); }

/* ---------- 4 Header & Footer ---------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.skip-link:focus { top: var(--space-4); }

.site-header {
  position: relative;
  z-index: 10;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-height);
}
.wordmark {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--color-accent); }

.site-nav { display: flex; align-items: center; gap: var(--space-2); }
.site-nav__list {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.site-nav__list a {
  text-decoration: none;
  color: var(--color-text-muted);
  padding-block: var(--space-2);
  transition: color var(--duration-fast) var(--ease);
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] { color: var(--color-text); }
.site-nav__list a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;          /* 44px Touch-Ziel */
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius);
  transition: color var(--duration-fast) var(--ease);
}
.icon-button:hover { color: var(--color-text); }
.icon-button svg { width: 1.25rem; height: 1.25rem; }

/* Theme-Toggle: zeigt Mond im hellen, Sonne im dunklen Modus */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.menu-toggle { display: none; }

@media (max-width: 47.99rem) {
  .menu-toggle { display: inline-grid; }
  .site-nav__list {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-5);
    background: var(--color-bg);
    border-bottom: var(--border-width) solid var(--color-border);
    font-size: var(--text-base);
  }
  .site-nav__list.is-open { display: flex; }
  .site-nav__list a { display: block; padding-block: var(--space-3); }
}

.site-footer {
  margin-top: var(--section-gap);
  padding-block: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--color-text); }

/* ---------- 5 Typografie-Komponenten ---------- */
/* Meta: Kategorie, Anzahl, Datum – immer Sans, klein, versal */
.meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.meta > * + *::before { content: "·"; margin-inline: 0.6em; }
.meta { display: flex; flex-wrap: wrap; }

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.page-head { padding-block: var(--space-8) var(--space-7); }
.page-head .meta { margin-bottom: var(--space-4); }
.page-head h1 + .lead { margin-top: var(--space-5); max-width: var(--width-text); }
.page-head--center { text-align: center; }
.page-head--center .meta { justify-content: center; }
.page-head--center .lead { margin-inline: auto; }

.display { font-size: var(--text-3xl); line-height: 1.05; }

/* Fließtext in Berichten */
.prose > * + * { margin-top: 1.1em; }
.prose > h2 { margin-top: 2em; }
.prose > h3 { margin-top: 1.6em; }
.prose > h2 + *, .prose > h3 + * { margin-top: 0.6em; }
.prose a { text-decoration-color: var(--color-border); }
.prose a:hover { text-decoration-color: var(--color-accent); color: var(--color-accent); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.35em; }
.prose > figure { margin-block: var(--space-7); }
.prose > p:first-child::first-line { font-variant-caps: all-small-caps; letter-spacing: 0.03em; }

blockquote {
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-snug);
}
blockquote footer, blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-text-muted);
}

/* Infobox – Randnotizen wie Technik, Ort, Ausrüstung */
.note {
  padding: var(--space-5);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.note__title { margin-bottom: var(--space-2) !important; }
.note dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-5); }
.note dt { color: var(--color-text-muted); }

hr {
  border: 0;
  height: var(--border-width);
  background: var(--color-border);
  margin-block: var(--space-7);
}

/* ---------- 6 Foto-Bausteine ---------- */
/* Grundregeln: kein Radius, kein Schatten, kein Filter, kein Text auf Fotos. */
.photo { position: relative; }
.photo img {
  width: 100%;
  height: auto;
  background: var(--color-photo-placeholder);
}
.photo figcaption,
.photo-caption {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: var(--width-text);
}

/* Lightbox-Link: dezenter Hover */
.photo-link { display: block; cursor: zoom-in; }
.photo-link img { transition: opacity var(--duration) var(--ease); }
.photo-link:hover img { opacity: 0.92; }

/* A) Bildschirmfüllend – für Opener und Schlüsselbilder.
      So groß wie möglich, aber nie höher als 92 % des Viewports und nie beschnitten. */
.photo--full { width: 100%; }
.photo--full img { width: min(100%, calc(92vh * var(--ratio, 1.5))); margin-inline: auto; }
.photo--full figcaption { margin-inline: auto; padding-inline: var(--gutter); text-align: center; }

/* B) Breit – innerhalb der Seite, breiter als der Text */
.photo--wide { max-width: var(--width-wide); margin-inline: auto; }

/* C) Hochformat allein – nie breiter als 70 % Bildschirmhöhe */
.photo--portrait { max-width: min(100%, calc(70vh * 0.662)); margin-inline: auto; }

/* D) Paar – zwei Bilder gleicher Ausrichtung nebeneinander */
.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--photo-gap);
  align-items: start;
  max-width: var(--width-wide);
  margin-inline: auto;
}
@media (max-width: 36rem) { .photo-pair { grid-template-columns: 1fr; } }

/* E) Raster – nur für Bilder gleicher Ausrichtung.
      Feste Spalten, damit keine einzelnen Bilder in der letzten Reihe hängen:
      Querformat 3 Spalten (Anzahl: 3, 6, 9), Hochformat 4 Spalten (Anzahl: 4, 8). */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--photo-gap);
}
.photo-grid--portrait { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 47.99rem) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid > :last-child:nth-child(odd):not(figcaption) { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .photo-grid:not(.photo-grid--portrait) { grid-template-columns: 1fr; }
}

/* F) Masonry – gemischte Formate, Originalproportionen bleiben erhalten */
.photo-masonry { columns: 3 16rem; column-gap: var(--photo-gap); }
.photo-masonry > * { break-inside: avoid; margin-bottom: var(--photo-gap); }

/* Artikel-Raster für Berichte: Kinder laufen standardmäßig in Textbreite,
   Foto-Bausteine brechen in „wide" oder „full" aus. */
.article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--width-wide) - var(--width-text)) / 2))
    [text-start] min(var(--width-text), 100% - 2 * var(--gutter))
    [text-end] minmax(0, calc((var(--width-wide) - var(--width-text)) / 2))
    [wide-end] minmax(var(--gutter), 1fr) [full-end];
}
.article > * { grid-column: text; }
.article > .photo--wide,
.article > .photo-pair,
.article > .photo-grid,
.article > .photo-masonry { grid-column: wide; }
.article > .photo--full { grid-column: full; }
/* Gemeinsame Bildunterschrift für Paar/Raster: <figcaption> als letztes Kind */
.photo-pair > figcaption,
.photo-grid > figcaption { grid-column: 1 / -1; margin-top: calc(var(--space-3) - var(--photo-gap)); }

/* Vertikaler Rhythmus zwischen Foto-Blöcken einer Serie */
.sequence > * + * { margin-top: var(--photo-gap); }
.sequence > .sequence-break { margin-top: var(--space-8); }

/* ---------- 7 Karten & Listen ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-7) var(--space-5);
}
.card { display: block; text-decoration: none; }
.card__media {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--color-photo-placeholder);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease), opacity var(--duration) var(--ease);
}
.card:hover .card__media img { transform: scale(1.02); }
.card__body { padding-top: var(--space-4); }
.card__title {
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
.card:hover .card__title { color: var(--color-accent); }
.card[hidden] { display: none; }

/* Bericht-Liste – textgeführt, mit kleinem Vorschaubild */
.entry-list { list-style: none; padding: 0; }
.entry { border-top: var(--border-width) solid var(--color-border); }
.entry:last-child { border-bottom: var(--border-width) solid var(--color-border); }
.entry__link {
  display: grid;
  grid-template-columns: 1fr 9rem;
  gap: var(--space-5);
  padding-block: var(--space-6);
  text-decoration: none;
}
.entry__title { font-size: var(--text-xl); margin-block: var(--space-2) var(--space-3); }
.entry__excerpt { color: var(--color-text-muted); max-width: var(--width-text); }
.entry__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-photo-placeholder); }
.entry__media img { width: 100%; height: 100%; object-fit: cover; }
.entry__link:hover .entry__title { color: var(--color-accent); }
@media (min-width: 48rem) { .entry__link { grid-template-columns: 1fr 16rem; gap: var(--space-7); } }
@media (max-width: 30rem) {
  .entry__link { grid-template-columns: 1fr; }
  .entry__media { order: -1; }
}

/* Blättern zwischen Serien/Berichten */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}
.pager a { text-decoration: none; }
.pager a:hover .pager__title { color: var(--color-accent); }
.pager__next { text-align: right; }
.pager__next .meta { justify-content: flex-end; }
.pager__title { display: block; margin-top: var(--space-2); font-size: var(--text-lg); line-height: var(--leading-snug); }

/* Zweispaltig: Bild + Text (Über-Seite) */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 56rem) { .split { grid-template-columns: 5fr 6fr; gap: var(--space-9); } }

/* ---------- 8 Filter ---------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-7);
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.filter button {
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.45em;
  transition: color var(--duration-fast) var(--ease), text-decoration-color var(--duration-fast) var(--ease);
}
.filter button:hover { color: var(--color-text); }
.filter button[aria-pressed="true"] {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
}
.filter__count { margin-left: 0.35em; font-variant-numeric: tabular-nums; opacity: 0.7; }

/* ---------- 9 Buttons & Links ---------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.button:hover { background: transparent; color: var(--color-text); }
.button--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.button--ghost:hover { border-color: var(--color-text); }

/* Textlink mit Pfeil, z. B. „Alle Serien →" */
.link-arrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.section-head .link-arrow { white-space: nowrap; }
.link-arrow::after { content: " →"; transition: margin var(--duration-fast) var(--ease); }
.link-arrow:hover { color: var(--color-accent); }

/* ---------- 10 Lightbox ---------- */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--color-lightbox-bg);
  color: var(--color-lightbox-text);
  font-family: var(--font-sans);
}
.lightbox::backdrop { background: var(--color-lightbox-bg); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-lightbox-muted);
  font-variant-numeric: tabular-nums;
}
.lightbox__counter { padding-left: var(--space-3); }
.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding-inline: clamp(0.5rem, 5vw, 4.5rem);
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  transition: opacity var(--duration) var(--ease);
}
.lightbox__img.is-loading { opacity: 0; }
.lightbox .icon-button { color: var(--color-lightbox-muted); }
.lightbox .icon-button:hover { color: var(--color-lightbox-text); }
.lightbox__prev, .lightbox__next {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.lightbox__prev { left: var(--space-2); }
.lightbox__next { right: var(--space-2); }
.lightbox__caption {
  min-height: 3.5rem;
  padding: var(--space-3) var(--gutter) var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-lightbox-muted);
}
@media (hover: none) { .lightbox__prev, .lightbox__next { display: none; } }

/* ---------- 11 Hilfsklassen ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0 !important; }
.text-muted { color: var(--color-text-muted); }
.sans { font-family: var(--font-sans); }
.text-sm { font-size: var(--text-sm); }
.stack > * + * { margin-top: var(--space-5); }

/* Seite hinter offener Lightbox nicht scrollen */
html:has(.lightbox[open]) { overflow: hidden; }

/* Screenshots (keine Fotos): feine Randlinie, damit helle Oberflächen
   sich vom Seitenhintergrund abheben. Nur für Bildschirmfotos verwenden. */
.screenshot img { outline: var(--border-width) solid var(--color-border); outline-offset: 0; }