/* Begegnungen: zuerst lesen, darunter die vollständige Sammlung. Der Filmstreifen
   der Homepage verwendet andere Klassen und bleibt von diesen Regeln unberührt. */
*{box-sizing:border-box}
:root{color-scheme:dark}
html{scrollbar-gutter:stable}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:#0d0f12;color:#dedad2;font:350 20px/1.65 'Newsreader',Georgia,serif;-webkit-font-smoothing:antialiased}
#collection{width:min(1180px,100%);margin-inline:auto;padding:clamp(28px,3vw,44px) 36px 64px}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid #d4a24e;outline-offset:5px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Auswahl beginnt mit den Lesebeiträgen; die übrigen Ansichten öffnen ihr
   Mosaik direkt unter der gemeinsamen Navigation. */
.bereich-reiter{display:flex;align-items:center;gap:24px;padding-inline:max(16px,4vw)}
.bereich-reiter ul{flex:1;min-width:0;padding:0}
.sammlung-navigation{display:flex;flex:none;align-items:center;gap:20px;font:400 13px/1.5 'Space Grotesk',Arial,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;color:#9b9f9e}
.sammlung-navigation a{padding:12px 0;border:0;margin:0;color:inherit;text-decoration:none}
.sammlung-navigation a[aria-current]{color:#e0ddd4;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.sammlung-navigation a:hover{color:#d4a24e}
.entwurfs-ansichten{margin-bottom:24px}
.lesebuch{max-width:660px;margin-inline:auto}
.weiterlesen{font:400 13px/1.5 'Space Grotesk',Arial,sans-serif;text-decoration:underline;text-decoration-color:#5a5345;text-underline-offset:5px}
.weiterlesen:hover{color:#d4a24e}

.lesestueck{padding:36px 0;border-top:1px solid #2b2c2c}
.lesestueck:first-child{padding-top:0;border-top:0}
.lesestueck-kopf{margin-bottom:20px}
.lesestueck-name{margin:0;font:500 14px/1.5 'Space Grotesk',Arial,sans-serif;letter-spacing:.055em;text-transform:uppercase;color:#c6b28a}
.lesestueck-zusatz{font-weight:400;letter-spacing:0;text-transform:none}
.lesestueck h2{margin:0 0 8px;font:400 clamp(28px,3vw,32px)/1.15 'Newsreader',Georgia,serif;text-wrap:balance;overflow-wrap:break-word}
.lesestueck-prosa{display:flow-root;font:400 20px/1.5 'Newsreader',Georgia,serif;color:#e7e1d7;overflow-wrap:break-word;hyphens:auto}
.lesestueck-prosa p{margin:0 0 .8em}
/* Die Autorenzeile gehört zum Kopf. Der Vorspann eröffnet den Beitrag
   in derselben Leseschrift, etwas größer als die folgenden Absätze. */
.lesestueck-prosa .lead{margin:0 0 20px;font-size:22px;line-height:1.4;hyphens:none}
.lesestueck-prosa :is(h2,h3,h4){font-size:25px;line-height:1.25;margin:1.2em 0 .4em}
.lesestueck-prosa blockquote{margin:.8em 0;padding-left:1em;border-left:1px solid #79694b;font-style:italic}
.lesestueck-prosa :is(ul,ol){padding-left:1.2em}
.lesestueck-prosa :is(table,pre){display:block;max-width:100%;overflow:auto}
.lesestueck-prosa :is(img,video){max-width:100%;height:auto}
.weiterlesen{display:inline-block;color:#c6b28a;padding-block:4px}
.lesestueck-prosa figure{display:block;clear:both;float:none;width:100%;max-width:100%;margin:20px 0}
.lesestueck-prosa figure img{display:block;width:100%;max-width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;margin:0}
.lesestueck-prosa .foto-hochformat{width:min(100%,320px)}
@media(min-width:901px){
  .lesestueck-prosa figure.foto-hochformat{float:right;width:calc(100% / 3);max-width:33.333333%;margin:0 0 16px 24px}
}
.lesestueck-prosa figcaption{display:block;margin:0;padding-top:8px;font:400 13px/1.45 'Space Grotesk',Arial,sans-serif;color:#b3b6af;hyphens:none}
.lesestueck-prosa .credit{display:block;margin-top:3px;color:#a3a89f}

/* Die Mosaik-Tiles zeigen bei Hover und Tastaturfokus das Intro. Einflugbewegung
   und Filmränder entfallen; der gemeinsame Baustein steuert die Drehung. */
#sammlung{margin-top:32px;padding-top:42px;border-top:1px solid #353735;scroll-margin-top:120px}
.ansicht-mosaik #sammlung{margin:0;padding:0;border:0}
.sammlung-kopf{margin-bottom:28px}
.sammlung-kopf h2{margin:0;font:350 30px/1.2 'Newsreader',Georgia,serif}
.filters button{appearance:none;background:none;border:0;padding:10px 0;font:400 12px/1.5 'Space Grotesk',Arial,sans-serif;color:#9b9f9e}
.filters button[aria-pressed=true]{color:#e0ddd4;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.filters button:hover{color:#d4a24e}
.filters{display:flex;flex-wrap:wrap;gap:0 24px;margin:-12px 0 24px}
.filters[hidden]{display:none}
.mosaik{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 18px}
.mosaik-eintrag{min-width:0}
.mosaik .jl-tile{text-decoration:none;--tile-paper:#222524;--tile-ink:#dedad2}
.mosaik .jl-tile-face{border-radius:1px}
.mosaik .jl-tile-copy{justify-content:center}
.kachel-beschriftung{padding:11px 0 0;line-height:1.35}
.kachel-titel{display:block;font-size:19px;margin-bottom:4px}
.kachel-name{display:block;color:#9b9f9a;font:400 12px/1.5 'Space Grotesk',Arial,sans-serif}
/* Einladung zum Mitmachen nach dem letzten Beitrag: ein leerer, gestrichelter
   Platz im Altrosa des Bereichs Mitmachen, wie das letzte Bild im Filmstreifen. */
.mosaik .einladung .jl-tile{--tile-paper:#111316}
.mosaik .einladung .jl-tile-face{border:1px dashed rgba(168,138,132,.6)}
.mosaik .einladung .jl-tile:is(:hover,:focus-visible) .jl-tile-face{border:1px solid #a88a84}
.mosaik .einladung .jl-tile-title{font-family:'Instrument Serif',Georgia,serif;font-style:italic;letter-spacing:0}
.mosaik .einladung .kachel-name{color:#a88a84}
.mosaik-einladung{margin-top:36px}
.gruppe{margin-top:36px}
.gruppe:first-child{margin-top:0}
.gruppe-kopf{display:flex;align-items:baseline;gap:16px;margin-bottom:20px}
.gruppe-kopf h3{font:400 22px/1.3 'Newsreader',Georgia,serif;margin:0}
.gruppe-kopf span{font:400 12px/1.5 'Space Grotesk',Arial,sans-serif;color:#939991}
.image-unavailable{display:grid;place-items:center;width:100%;height:100%;padding:20px;background:#252a29;color:#b4b8b1;font:12px/1.6 'Space Grotesk',Arial,sans-serif;text-align:center}
#collection-status:empty{display:none}
.collection-loader{position:relative;min-height:60px;text-align:center;padding:28px 0;font:13px/1.5 'Space Grotesk',Arial,sans-serif;color:#a4aaa3}
#load-sentinel{position:absolute;inset:0 0 auto;height:1px;pointer-events:none}
#load-progress{margin:0 0 14px}
#load-retry{background:transparent;color:inherit;border:1px solid #64676b;border-radius:2px;padding:10px 24px}
#load-retry[hidden]{display:none}
.direktleser{max-width:680px;margin:0 auto 64px}
.leseverzeichnis{padding-left:1em}
.leseverzeichnis li{margin-bottom:.6em}

@media(max-width:900px){
  .bereich-reiter{flex-wrap:wrap;gap:0}
  .bereich-reiter ul{flex-basis:100%}
  .sammlung-navigation{gap:24px}
  #collection{padding-inline:28px}
  .mosaik{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .bereich-reiter ul{gap:0 12px}
  .sammlung-navigation{gap:16px;font-size:12px}
  #collection{padding:30px 20px 40px}
  .lesestueck-prosa{font-size:19px}
  .lesestueck-prosa .lead{font-size:21px}
  .mosaik{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .kachel-titel{font-size:17px}
  #sammlung{margin-top:12px;padding-top:32px}
}

/* Vorschau für Autorinnen und Autoren (templates/encounters-preview.gohtml,
   docs/encounters-preview.md): Kachel mit Vorder- und Rückseite wie im Mosaik,
   darunter der Beitrag im selben Leseraum wie im Leser-Dialog, aber im
   Seitenfluss statt als Dialog. */
.vorschau{max-width:1040px}
.vorschau-kopf{margin-bottom:40px}
.vorschau-marke{margin:0 0 8px;font:500 13px/1.5 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d4a24e}
.vorschau-hinweis{max-width:640px;margin:0;font:400 18px/1.5 'Newsreader',Georgia,serif;color:#bfc2bb}
.vorschau-sprachen{display:flex;gap:24px;margin-top:18px;font:400 13px/1.5 'Space Grotesk',Arial,sans-serif}
.vorschau-sprachen a{padding:6px 0;color:#9b9f9e;text-decoration:none}
.vorschau-sprachen a[aria-current]{color:#e0ddd4;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.vorschau-sprachen a:hover{color:#d4a24e}
.vorschau-kachel h2{margin:0 0 16px;font:400 13px/1.5 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9b9f9e}
.mosaik.vorschau-kacheln{grid-template-columns:repeat(2,minmax(0,250px));margin-bottom:56px}
.vorschau-kacheln figure{margin:0}
.vorschau-kacheln figcaption{margin-top:6px;font:400 12px/1.5 'Space Grotesk',Arial,sans-serif;color:#8a919b}
.vorschau-leser{
  --r-bg:#15171a;--r-bar:#101214;--r-ink:#dedad2;--r-soft:#bfc2c7;--r-dim:#8a919b;--r-line:#2b3037;--r-mark:#d4a24e;--r-cold:#7d92a6;--r-plate:#0e1012;--r-scroll:#3d434c;
  --r-text:680px;--gutter:clamp(20px,5vw,72px);
  color:var(--r-ink);background:var(--r-bg);border:1px solid var(--r-line);border-radius:2px;
  font:350 21px/1.72 'Newsreader',Georgia,serif;text-align:left;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media(max-width:600px){.mosaik.vorschau-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}.vorschau-leser{margin-inline:-20px;border-inline:0}}