/* =====================================================================
   ALBRECHT KLINK · TEXTSEITEN

   Gestaltung der drei Lesestücke, die neben der Hauptseite stehen:
   holz.html, wilhelm-klink.html und josef-klink-alt-horb.html, dazu die
   englischen Fassungen mit der Endung -en.

   Diese Seiten benutzen dieselbe Kopfleiste, dieselbe Fußzeile, dieselben
   Farben und dieselben Schriften wie die Hauptseite. Hier steht nur, was
   allein für eine lange Textseite gebraucht wird: die Lesespalte, die
   Zwischenüberschriften, die Bilder im Text und das Inhaltsverzeichnis.

   Der ganze Text steht fest in der HTML-Datei. Er wird nicht nachgeladen.
   Damit sehen Suchmaschinen ihn sofort und vollständig, auch ohne
   JavaScript.
   ===================================================================== */

/* ---------------- Die Lesespalte ----------------
   Eine Zeile fasst höchstens 68 Zeichen. Darüber wandert das Auge beim
   Zeilenwechsel zu weit und verliert die Zeile. */
.lesen{ max-width:68ch; }
.lesen p{ max-width:none; }

/* Etwas mehr Zeilenabstand als auf der Hauptseite. Dort stehen kurze
   Werkangaben, hier stehen Seiten am Stück. */
.lesen{ line-height:1.75; }

.lesen > *:first-child{ margin-top:0; }

/* ---------------- Zwischenüberschriften ----------------
   Dieselbe Form wie die Abteilungen der Werkschau: der kurze goldene
   Strich darüber, Versalien, weit gesperrt. */
.lesen h2{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:var(--schrift-abt); line-height:1.35;
  margin:clamp(2.8rem,7vh,4.4rem) 0 1.1rem;
  scroll-margin-top:calc(var(--kopfhoehe) + 1.4rem);
}
.lesen h2::before{
  content:""; display:block; width:2.2rem; height:2px;
  background:var(--blattgold); margin-bottom:.9rem;
}
.lesen h3{
  font-size:var(--schrift-text); font-weight:600; letter-spacing:.01em;
  margin:2.2rem 0 .5rem;
  scroll-margin-top:calc(var(--kopfhoehe) + 1.4rem);
}

/* ---------------- Bilder im Text ----------------
   Sie stehen in der Lesespalte und laufen nicht über die volle Breite.
   Ein Bild soll den Lesefluss stützen und ihn nicht zerschneiden. */
.lesen figure{ margin:clamp(2rem,5vh,3.2rem) 0; }
.lesen figure img{ width:100%; height:auto; }
.lesen figcaption{
  font-size:var(--schrift-winzig); line-height:1.5;
  color:var(--tinte-leise); padding-top:.55rem; max-width:56ch;
}

/* Zwei Bilder nebeneinander, wenn beide klein sind. */
.bildpaar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1rem clamp(1rem,3vw,2rem); align-items:start; }
.bildpaar figure{ margin:0; }
/* Zwei Aufnahmen nebeneinander sind fast nie gleich hoch. Ohne diese
   Zeile zieht das Raster die niedrigere auf die Höhe der anderen und es
   entsteht ein grauer Streifen über dem Bild. */
.bildpaar figure img{ align-self:start; }

/* Eine breite Aufnahme darf über die Lesespalte hinausragen, aber nur
   auf großen Schirmen und nie über den Satzspiegel der Seite. */
@media (min-width:1100px){
  .lesen figure.weit{ width:min(112%, calc(var(--breite) - 2rem)); }
}

/* ---------------- Zitat ----------------
   Für den längeren Textbaustein von Fridolin Knöpfle. Er steht abgesetzt,
   damit erkennbar bleibt, wo fremde Worte anfangen und wo sie aufhören. */
.lesen blockquote{
  margin:clamp(2rem,5vh,3rem) 0; padding:0 0 0 1.4rem;
  border-left:2px solid var(--blattgold);
  max-width:64ch;
}
.lesen blockquote p{ font-size:var(--schrift-klein); line-height:1.72; }
.lesen blockquote cite{
  display:block; margin-top:.9rem; font-style:normal;
  font-size:var(--schrift-winzig); letter-spacing:.04em; color:var(--tinte-leise);
}

/* ---------------- Inhaltsverzeichnis ----------------
   Nur auf der langen Stadtführung. Sie hat dreißig Kapitel, ohne
   Verzeichnis findet dort niemand etwas wieder. */
.verzeichnis{
  margin:clamp(2rem,5vh,3rem) 0; padding:1.4rem 0 0; border-top:1px solid var(--stein);
}
.verzeichnis h2{ margin-top:0 !important; }
.verzeichnis ol{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:clamp(1.5rem,4vw,3.5rem);
  font-size:var(--schrift-klein);
}
@media (max-width:640px){ .verzeichnis ol{ columns:1; } }
.verzeichnis li{ break-inside:avoid; padding:.22rem 0; }
.verzeichnis a{ text-decoration:none; color:var(--tinte-70); border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease; }
.verzeichnis a:hover{ color:var(--tinte); border-bottom-color:var(--stein); }

/* ---------------- Quellenliste ---------------- */
.quellen{ list-style:none; margin:1.2rem 0 0; padding:0; font-size:var(--schrift-klein); }
.quellen li{ padding:0 0 1rem; max-width:64ch; }
.quellen a{ text-decoration:none; border-bottom:1px solid rgba(194,155,72,.6); word-break:break-word; }
.quellen a:hover{ border-color:var(--rinde); }
.quellen span{ display:block; color:var(--tinte-leise); }

/* ---------------- Der Weg zurück ----------------
   Oben unter der Kopfleiste, klein, damit klar ist, wo man steht. */
.zurueck{
  font-size:var(--schrift-winzig); letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinte-leise); padding-top:clamp(1.2rem,3vh,2rem); margin:0;
}
.zurueck a{ text-decoration:none; border-bottom:1px solid transparent; }
.zurueck a:hover{ color:var(--tinte); border-bottom-color:var(--stein); }
.zurueck svg{ width:13px; height:13px; vertical-align:-2px; margin-right:.35rem; }

/* ---------------- Die Kopfzeile der Textseiten ----------------
   Wie auf der Hauptseite, nur darf die Überschrift hier mehrzeilig sein
   und der Vorspann etwas breiter stehen. */
.textkopf .titel{ max-width:30ch; }
.textkopf .lead{ max-width:60ch; margin-top:1.1rem; }
.textkopf .angabe{
  font-size:var(--schrift-winzig); letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinte-leise); margin:.9rem 0 0;
}

/* ---------------- Herunterladen ---------------- */
.holen{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--schrift-klein); text-decoration:none;
  border-bottom:1px solid rgba(194,155,72,.6); padding-bottom:.15rem;
  transition:border-color .25s ease;
}
.holen:hover{ border-color:var(--rinde); }
.holen svg{ width:16px; height:16px; flex:0 0 auto; }
.holenfeld{ margin:clamp(2rem,5vh,3rem) 0; padding:1.3rem 0; border-top:1px solid var(--stein); border-bottom:1px solid var(--stein); }
.holenfeld p{ margin:0 0 .7rem; font-size:var(--schrift-klein); color:var(--tinte-70); max-width:60ch; }

/* ---------------- Weiterführende Wege am Fuß des Textes ---------------- */
.weiterwege{ margin-top:clamp(3rem,8vh,5rem); padding-top:1.6rem; border-top:1px solid var(--stein); }
.weiterwege h2{ margin-top:0 !important; }
.weiterwege ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:1rem clamp(1.5rem,4vw,3rem); }
.weiterwege li{ margin:0; }
.weiterwege a{ text-decoration:none; font-size:var(--schrift-klein); border-bottom:1px solid transparent; }
.weiterwege a:hover{ border-bottom-color:var(--stein); }
.weiterwege span{ display:block; font-size:var(--schrift-winzig); color:var(--tinte-leise); line-height:1.5; margin-top:.2rem; }

/* ---------------- Die Seitenzahlen der gedruckten Schrift ----------------
   Nur in der Stadtführung. Sie stehen am Rand und stören den Lesefluss
   nicht, bleiben aber auffindbar, wenn jemand mit dem gedruckten Heft
   in der Hand vergleicht. */
.seitenzahl{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--stein); display:block; margin:1.6rem 0 .3rem;
}

@media print{
  .kopf, .zurueck, .weiterwege, .verzeichnis{ display:none !important; }
  .lesen{ max-width:none; }
}