/* ATHIKAN.DE – statisches Stylesheet
   Keine externen Ressourcen, keine Webfonts, keine Cookies. */

:root {
  color-scheme: light dark;

  /* Die Textfarben sind gegen die Papierstruktur gemessen, nicht gegen --paper.
     Die Textur ist mit einer mittleren Leuchtdichte von 0,62 deutlich dunkler
     als die Ersatzfarbe (0,84); nach ihr zu rechnen wäre zu optimistisch.
     Alle Werte erreichen 4,5:1 auf 99,9 % der Fläche. Siehe README. */
  --paper:       #f4ecda;
  --card:        rgba(255, 255, 255, .62);
  --ink:         #2f220c;
  --ink-soft:    #4c3e24;
  --brown:       #553c06;
  --link:        #10406a;
  --link-hover:  #0a2f52;
  --line:        rgba(85, 60, 6, .24);
  --shadow:      0 1px 3px rgba(47, 34, 12, .18), 0 6px 18px rgba(47, 34, 12, .10);

  --header-bg:   rgba(248, 243, 232, .92);
  --footer-bg:   rgba(248, 243, 232, .82);
  --tile-bg:     rgba(255, 255, 255, .5);
  --btn-hover:   #fff;
  --blend:       normal;

  --paper-texture: image-set(
    url("../img/back-1200.avif") type("image/avif"),
    url("../img/back-1200.webp") type("image/webp")
  );

  --wrap:        1280px;
  --radius:      3px;
  --font:        system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:  Georgia, "Times New Roman", "Liberation Serif", serif;
}

/* Dunkelmodus folgt ausschließlich der Systemeinstellung. Bewusst ohne
   Umschalter, denn der bräuchte einen Speicher im Browser – und die
   Datenschutzerklärung sagt zu Recht, dass hier nichts gespeichert wird.
   Die Papierstruktur bleibt erhalten und wird über background-blend-mode
   mit dem dunklen Grundton multipliziert. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #171208;
    --card:       rgba(255, 246, 225, .07);
    --ink:        #ece3cd;
    --ink-soft:   #b9ab8d;
    --brown:      #e0bd6d;
    --link:       #8fc3f2;
    --link-hover: #bcdcff;
    --line:       rgba(224, 189, 109, .26);
    --shadow:     0 1px 3px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .45);

    --header-bg:  rgba(23, 18, 8, .92);
    --footer-bg:  rgba(23, 18, 8, .86);
    --tile-bg:    rgba(255, 246, 225, .05);
    --btn-hover:  rgba(255, 246, 225, .15);
    --blend:      multiply;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-repeat: repeat;
  background-size: 1200px auto;
  background-attachment: fixed;
  background-blend-mode: var(--blend);
}

/* ---------- Grundelemente ---------- */

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus-visible { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--brown);
  outline-offset: 2px;
  border-radius: 2px;
}

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

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.25; color: var(--brown); }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.35rem, 1.05rem + 1.4vw, 1.95rem); margin: 2em 0 .6em; }
h3 { font-size: clamp(1.1rem, .98rem + .6vw, 1.3rem); margin: 1.8em 0 .4em; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .35em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brown); color: var(--paper); padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: var(--paper); }

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2rem, 70ch); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%); border: 0;
}

/* ---------- Kopfbereich ---------- */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  padding: .6rem 0;
}

.site-logo { display: inline-flex; flex: 0 0 auto; }
.site-logo img { width: 190px; height: auto; }

.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem;
  list-style: none; margin: 0; padding: 0;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: inline-block; padding: .35rem .15rem;
  color: var(--brown); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--link-hover); border-bottom-color: currentColor; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--brown); }
.site-nav .is-external::after {
  content: "↗"; font-size: .8em; margin-left: .2em; vertical-align: .1em;
}

@media (max-width: 560px) {
  .site-header__inner { justify-content: center; }
  .site-nav { margin-left: 0; width: 100%; }
  .site-nav ul { justify-content: center; }
  .site-logo img { width: 160px; }
}

/* ---------- Hero ---------- */

/* Das Titelbild liegt als 1200x800 vor. Es wird nicht hochskaliert und nicht
   beschnitten, sonst schneidet der Schriftzug an.

   Es bleibt beim Scrollen stehen, während Inhalt und Fußzeile sich darüber
   schieben (.scroll-over). Das braucht kein JavaScript: position: sticky reicht,
   weil der umgebende Block der Seitenkörper ist und damit über das ganze
   Dokument reicht. */
.hero {
  margin: 1.25rem auto 0;
  width: min(100% - 2rem, 1200px);
  position: sticky;
  top: 0;
  z-index: 0;
}

.scroll-over {
  position: relative;
  z-index: 1;
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-repeat: repeat;
  background-size: 1200px auto;
  background-attachment: fixed;
  background-blend-mode: var(--blend);
}
/* Ohne Rahmen, Rundung und Schatten: der Pergamentgrund des Bildes geht so in
   die Papierstruktur der Seite über, Logo und Engel stehen frei. */
/* Beim Stehenbleiben darf nichts unter den Fensterrand rutschen, deshalb ist die
   Höhe auf das Sichtfeld begrenzt; object-fit hält das Seitenverhältnis. */
.hero img {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 4.5rem);
  max-height: calc(100svh - 4.5rem);
  object-fit: contain;
}

/* Wer Bewegung reduziert haben will, bekommt das Titelbild ruhig im Fluss. */
@media (prefers-reduced-motion: reduce) {
  .hero { position: static; }
  .hero img { max-height: none; }
}

@media (prefers-color-scheme: dark) {
  /* Das Titelbild hat einen hellen Pergamentgrund und würde sonst als
     Leuchtfläche aus der dunklen Seite herausstechen. */
  .hero img { filter: brightness(.74) saturate(.92); }
}

/* ---------- Inhalt ---------- */

.content { padding: 2.5rem 0 3rem; }

.lead-quote {
  margin: 0 auto 2rem; padding: 1.4rem 1.6rem;
  background: var(--card); border-left: 4px solid var(--brown);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-width: 62ch;
}
.lead-quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
  line-height: 1.45; margin: 0 0 .5em;
}
.lead-quote cite { font-style: normal; font-size: .9rem; color: var(--ink-soft); }

.claim {
  text-align: center; max-width: 34ch; margin: 2.2rem auto 1rem;
}

.note {
  max-width: 62ch; margin: 0 auto 2.5rem;
  font-size: .95rem; color: var(--ink-soft); text-align: center;
}

.prose { max-width: 70ch; margin-inline: auto; }
.prose h2:first-child { margin-top: 0; }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin: 0 0 1.5rem; box-shadow: var(--shadow);
}

.article-list {
  list-style: none; margin: 0 0 2rem; padding: 0;
  border-top: 1px solid var(--line);
}
.article-list li { margin: 0; border-bottom: 1px solid var(--line); }

.article-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .2rem 1.25rem;
  padding: .9rem .7rem;
  text-decoration: none;
  border-radius: var(--radius);
}
.article-list a:hover, .article-list a:focus-visible { background: var(--card); }

.article-list .title {
  font-family: var(--font-serif);
  font-size: 1.08rem; line-height: 1.35;
  color: var(--link);
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
.article-list a:hover .title, .article-list a:focus-visible .title {
  color: var(--link-hover); text-decoration-color: currentColor;
}
.article-list time {
  font-size: .82rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 560px) {
  .article-list a { grid-template-columns: minmax(0, 1fr); }
  .article-list time { order: -1; }
}

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

.gallery {
  column-count: 2;
  column-gap: 10px;
  margin: 0 0 2.5rem;
  padding: 0;
}
@media (min-width: 560px)  { .gallery { column-count: 3; } }
@media (min-width: 820px)  { .gallery { column-count: 4; } }
@media (min-width: 1100px) { .gallery { column-count: 5; } }

.gallery > li {
  break-inside: avoid;
  margin: 0 0 10px;
  list-style: none;
}

.tile {
  display: block; position: relative;
  background: var(--tile-bg);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tile img { width: 100%; height: auto; }
.tile:hover, .tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(47, 34, 12, .2), 0 10px 26px rgba(47, 34, 12, .18);
}
.tile:focus-visible { outline-offset: 3px; }

/* ---------- Banner ---------- */

.banners {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
  list-style: none; margin: 2.5rem 0; padding: 0;
}
.banners li { margin: 0; }
/* Der weiße Grund bleibt auch im Dunkelmodus: die Banner-Grafiken sind auf
   hellen Untergrund gezeichnet und wären sonst unleserlich. */
.banners a {
  display: block; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); background: #fff;
}
.banners img { width: 240px; height: 54px; }
.banners a:hover, .banners a:focus-visible { filter: brightness(1.06); }

.feature {
  display: block; max-width: 640px; margin: 2.5rem auto;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}

.feature-caption {
  text-align: center; font-size: .95rem; color: var(--ink-soft); margin: 0 0 .5rem;
}

/* ---------- Teilen ---------- */

.share {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .75rem; margin: 2.5rem 0 0;
}
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .5rem 1rem; cursor: pointer;
  color: var(--brown); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.btn:hover, .btn:focus-visible { background: var(--btn-hover); color: var(--link-hover); }
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; }

.share-status { font-size: .9rem; color: var(--ink-soft); min-height: 1.4em; }

/* ---------- Fußbereich ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--footer-bg);
  padding: 1.75rem 0 2.5rem;
  font-size: .92rem;
}
/* Spaltenweise statt in einer Reihe: die Absätze brachten ihren Grundabstand
   mit und standen dadurch nicht auf einer Linie mit der Linkliste. */
.site-footer__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: .6rem; text-align: center;
}
.site-footer p { margin: 0; }
.site-footer ul {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem .8rem; list-style: none; margin: 0; padding: 0;
}
.site-footer li { margin: 0; display: flex; align-items: center; }
.site-footer li + li::before {
  content: "·"; margin-right: .8rem; color: var(--ink-soft); opacity: .6;
}
/* Auf schmalen Schirmen bricht die Liste um; der Trennpunkt stünde dann am
   Zeilenanfang. Dort trägt der Abstand allein. */
@media (max-width: 560px) {
  .site-footer li + li::before { display: none; }
  .site-footer ul { gap: .3rem 1rem; }
}
.site-footer a { text-decoration-thickness: 1px; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed; inset: 0;
  border: 0; padding: 0; margin: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  background: transparent; color: #f4efe4; overflow: hidden;
}
.lightbox::backdrop { background: rgba(16, 12, 4, .93); }

.lightbox__shell {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}

.lightbox__stage {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch; justify-content: center;
  padding: .5rem 3.4rem;
  touch-action: pan-y;
}

/* Die Bildfläche füllt die Bühne; object-fit sorgt für die Einpassung.
   Prozentuale max-height wäre in dieser Flex-Kette unzuverlässig. */
.lightbox__figure {
  margin: 0; flex: 1 1 auto;
  min-width: 0; min-height: 0; display: block;
}
.lightbox__figure picture { display: block; width: 100%; height: 100%; }
.lightbox__img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
}

.lightbox__preload {
  position: absolute; left: 0; bottom: 0;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}

.lightbox__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  background: rgba(16, 12, 4, .72);
}
.lightbox__bar--top { justify-content: flex-end; }
.lightbox__bar--bottom { flex-direction: column; gap: .3rem; text-align: center; }

.lightbox__caption {
  font-size: .95rem; line-height: 1.4; margin: 0;
  max-width: 80ch;
}
.lightbox__counter { font-size: .82rem; opacity: .75; font-variant-numeric: tabular-nums; margin: 0; }

.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-size: .9rem; font-weight: 600;
  min-width: 44px; min-height: 44px; padding: .4rem .7rem;
  color: inherit; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius);
  cursor: pointer;
}
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255, 255, 255, .22); color: #fff; }
.lb-btn:focus-visible { outline: 3px solid #f0d89a; outline-offset: 2px; }
.lb-btn svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.lb-btn[disabled] { opacity: .35; cursor: default; }

.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 72px; padding: 0;
}
.lightbox__nav--prev { left: .4rem; }
.lightbox__nav--next { right: .4rem; }

.lightbox__status { font-size: .85rem; min-height: 1.3em; opacity: .85; margin: 0; }

@media (max-width: 600px) {
  .lightbox__stage { padding: .35rem 2.9rem; }
  .lightbox__nav { width: 40px; height: 56px; }
  .lightbox__caption { font-size: .88rem; }
  .lb-btn { font-size: .85rem; }
}

/* Ohne JavaScript bleibt die Galerie ein Satz gewöhnlicher Bildlinks. */
.no-js .lightbox { display: none; }