/* ==========================================================================
   Die Creartoren · die-creartoren.de
   Ein einziges Stylesheet. Keine externen Einbindungen, keine CDN-Abhängigkeit.
   Aufbau: 1 Grundwerte · 2 Schriften · 3 Zurücksetzen · 4 Grundtypografie
           5 Gerüst · 6 Kopf · 7 Informationsspalte · 8 Tafeln und Bilder
           9 Projektseiten · 10 Notizen · 11 Archivansichten · 12 Rechtsseiten
           13 Hinweis · 14 Fuß · 15 Fehlerseite · 16 Bewegung und Druck
   ========================================================================== */

/* 1 · Grundwerte ----------------------------------------------------------- */

:root {
  --paper: #ffffff;
  --ink: #181818;
  --muted: #595959;
  --rule: #d5d5d1;
  --rule-stark: #b4b4ae;
  --focus: #2046c7;
  --flaeche: #f4f4f2;

  --gap-image: 0.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --image-radius: 0;

  --rand: 8px;
  --spalte-info: minmax(300px, 1fr);
  --spalte-leinwand: minmax(0, 2fr);

  --schrift: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

  --mass-text: 34rem;
  --mass-text-weit: 41rem;
}

/* 2 · Schriften ------------------------------------------------------------ */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-semibold.woff2') format('woff2');
}

/* 3 · Zurücksetzen --------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Kein scroll-behavior: smooth. Die Seite ist lang, und ein weiches
     Nachziehen macht jeden Sprung markant langsamer als das Ziel. Ausserdem
     bringt es jede programmgesteuerte Bildlaufbewegung dazu, sich selbst
     nachzujagen. Der Sprungmarken-Verweis soll sofort dort sein, wo er
     hinfuehrt. */
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

/* <picture> trägt selbst nichts bei. Ohne diese Zeile entsteht zwischen dem
   Element und dem Bild eine Lücke in Zeilenhöhe. */
picture {
  display: contents;
}

img,
video {
  height: auto;
  border-radius: var(--image-radius);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* 4 · Grundtypografie ------------------------------------------------------ */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.kein-scroll {
  overflow: hidden;
}

h1,
h2,
h3 {
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.375rem;
}

h3 {
  font-size: 1.0625rem;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule-stark);
}

a:hover {
  text-decoration-color: currentColor;
}

a.link-extern {
  text-decoration-color: var(--rule-stark);
}

a.link-extern::after {
  content: ' ↗';
  font-size: 0.85em;
  color: var(--muted);
}

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

::selection {
  background: var(--ink);
  color: var(--paper);
}

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

.springe {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 40;
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ink);
  text-decoration: none;
  transition: top 0.12s ease-out;
}

.springe:focus {
  top: var(--space-4);
}

/* 5 · Gerüst --------------------------------------------------------------- */

.seite {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.rahmen {
  padding-inline: 10px;
  width: 100%;
}

main {
  flex: 1 1 auto;
}

/* Zwei Spalten ab 1100 px, darunter einspaltig mit Schublade. */
.raster {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.leinwand {
  min-width: 0;
  padding-block: var(--space-4) var(--space-8);
}

.infospalte {
  min-width: 0;
}

/* 6 · Kopf ----------------------------------------------------------------- */

.kopf {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
}

.kopf__raster {
  display: grid;
  grid-template-columns: 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

.kopf__links {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.marke-zeile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
}

.marke {
  flex: none;
  color: var(--ink);
  margin-top: 0.15em;
}

.marke-zeile .wortmarke {
  font-size: 1.1875rem;
  line-height: 1.1;
  letter-spacing: 0.005em;
}

.kopf__rechts {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.ansicht-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
  min-height: 44px;
  padding-block: var(--space-2);
}

.ansicht-toggle:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.ansicht-toggle__zeichen {
  font-size: 0.9em;
  line-height: 1;
  transform: translateY(-0.05em);
}

.knopf-schublade {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  justify-content: flex-end;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--ink);
}

.knopf-schublade__strich {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
}

.knopf-schublade__strich::before,
.knopf-schublade__strich::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 0.16s ease-out, opacity 0.16s ease-out;
}

.knopf-schublade__strich::before {
  top: -4px;
}

.knopf-schublade__strich::after {
  top: 4px;
}

.knopf-schublade[aria-expanded='true'] .knopf-schublade__strich {
  background: transparent;
}

.knopf-schublade[aria-expanded='true'] .knopf-schublade__strich::before {
  transform: translateY(4px) rotate(45deg);
}

.knopf-schublade[aria-expanded='true'] .knopf-schublade__strich::after {
  transform: translateY(-4px) rotate(-45deg);
}

.kopf__marke-info {
  display: none;
  font-style: italic;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* 7 · Informationsspalte --------------------------------------------------- */

.info-block {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.info-block:last-child {
  border-bottom: 0;
}

.info-titel {
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.nav-liste li + li {
  margin-top: var(--space-1);
}

.nav-liste a {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.65rem;
  font-size: 1rem;
  text-decoration: none;
  color: var(--ink);
}

.nav-liste a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.nav-liste a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.ansichten {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--muted);
}

.ansichten a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-4);
}

.ansichten a[aria-current='page'] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.erzaehlung {
  font-size: 1rem;
  line-height: 1.45;
  max-width: var(--mass-text);
}

.erzaehlung p + p {
  margin-top: var(--space-3);
}

.erzaehlung--leise {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Metadatenpaare */
.daten {
  display: grid;
  gap: var(--space-3);
  font-size: 0.9375rem;
}

.daten__zeile {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.daten__zeile:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.daten__marke {
  color: var(--muted);
}

.daten__wert {
  min-width: 0;
  overflow-wrap: break-word;
}

.daten--kompakt {
  font-size: 0.875rem;
}

.daten--kompakt .daten__zeile {
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Verwandte Notizen */
.verwandte li + li {
  margin-top: var(--space-3);
}

.verwandte a {
  display: block;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  padding-block: var(--space-2);
  min-height: 44px;
}

.verwandte a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.verwandte .verwandte__kurz {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: var(--space-1);
}

/* Eigenständige Verweise, die allein in einer Zeile stehen, bekommen eine
   volle Berührungsfläche. Der negative Außenabstand hält den Zeilenstand
   dabei unverändert. Verweise mitten im Satz sind nach WCAG 2.2 (2.5.8)
   ausgenommen und bleiben schlicht. */
.erzaehlung--leise a,
.daten__wert a,
.kennwerte h2 a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.7rem;
  margin-block: -0.7rem;
}

/* 8 · Tafeln und Bilder ---------------------------------------------------- */

.bildpaar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-image);
}

.bildpaar > * {
  min-width: 0;
}

.platte {
  margin: 0;
}

.platte img {
  width: 100%;
  background: var(--flaeche);
}

.platte__text {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--muted);
  padding-top: var(--space-2);
  max-width: 32rem;
}

.platte__credit {
  color: var(--muted);
}

.platte--weit {
  grid-column: 1 / -1;
}

.bildreihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-image);
  margin-top: var(--gap-image);
}

.bildreihe > * {
  min-width: 0;
}

.blockabstand {
  margin-top: var(--space-8);
}

.blockabstand-klein {
  margin-top: var(--space-6);
}

.trennlinie {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-6) 0;
}

/* Schleifen ---------------------------------------------------------------- */

/*
  Ein Standbild trägt die Fläche, die Bewegung legt sich darüber. Solange das
  kurze Band nicht geladen ist, bleibt das Bild stehen; ohne JavaScript oder
  bei gewünschter Ruhe passiert gar nichts. Das Seitenverhältnis ist über
  --verhaeltnis festgelegt, damit nichts springt.
*/
.schleife {
  position: relative;
  overflow: hidden;
  background: var(--flaeche);
  aspect-ratio: var(--verhaeltnis, 3 / 4);
}

.schleife__standbild,
.schleife__standbild img {
  display: block;
  width: 100%;
  height: 100%;
}

.schleife__standbild img {
  object-fit: cover;
}

.schleife__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Der Übergang vom Standbild zur Bewegung dauert bewusst lange. Ein harter
     Schnitt würde die Fläche hüpfen lassen. */
  transition: opacity 0.85s ease-out;
  pointer-events: none;
}

.schleife__video.ist-laeuft {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .schleife__video {
    display: none;
  }
}

/* Startseite --------------------------------------------------------------- */

/*
  Die Startseite ist lang. Module unterhalb des ersten Bildschirms werden erst
  gerechnet, wenn sie in die Nähe des Sichtfelds kommen. Die geschätzte Höhe
  hält die Bildlaufleiste dabei stabil.
*/
.werkmodul {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.werkmodul--band {
  contain-intrinsic-size: auto 640px;
}

.schlussband {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
  border-top: 1px solid var(--rule);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
}

.schlussband__text {
  max-width: var(--mass-text-weit);
  font-size: 1.0625rem;
  line-height: 1.5;
  margin-top: var(--space-4);
}

.schlussband__text p + p {
  margin-top: var(--space-3);
}

/* 9 · Projektseiten -------------------------------------------------------- */

.pfad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

/* Die Brotkrumen sind eigenständige Verweise, keine Textverweise in einem
   Satz. Sie bekommen deshalb eine volle Berührungsfläche. */
.pfad a,
.pfad > span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pfad a {
  color: var(--muted);
  text-decoration-color: var(--rule-stark);
}

.kopfzeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-4) var(--space-6);
}

.kopfzeile h1 {
  font-size: 1.75rem;
  max-width: 22ch;
}

.einstieg {
  font-size: 1.0625rem;
  line-height: 1.45;
  max-width: var(--mass-text-weit);
  text-wrap: pretty;
}

.fliess {
  font-size: 1rem;
  line-height: 1.5;
  max-width: var(--mass-text-weit);
}

.fliess > p + p {
  margin-top: var(--space-4);
}

.fliess h2 {
  font-size: 1.25rem;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.fliess h3 {
  font-weight: 600;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.fliess blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--rule-stark);
  color: var(--muted);
  font-style: italic;
}

.fliess ul,
.fliess ol {
  margin-top: var(--space-3);
}

.fliess li {
  padding-left: 1.1rem;
  position: relative;
  margin-top: var(--space-2);
}

.fliess ul > li::before {
  content: '·';
  position: absolute;
  left: 0.2rem;
  color: var(--muted);
}

.fliess ol {
  counter-reset: eintrag;
}

.fliess ol > li {
  counter-increment: eintrag;
}

.fliess ol > li::before {
  content: counter(eintrag) '.';
  position: absolute;
  left: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.kennwerte {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.kennwerte h2 {
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.kennwerte p {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.weiter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4);
  margin-top: var(--space-8);
}

.weiter a {
  display: block;
  text-decoration: none;
  min-height: 44px;
}

.weiter a:hover .weiter__titel {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.weiter__marke {
  display: block;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.weiter__titel {
  font-size: 1.0625rem;
}

.weiter--rechts {
  text-align: left;
}

/* Film: dieselbe Schleife wie auf der Auswahl, nur in eigener Hülle. Der
   Aufbau im Inneren kommt vollständig aus .schleife. */
.film {
  margin: 0;
}

.film__text {
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--muted);
  padding-top: var(--space-2);
  max-width: 32rem;
}

/* 10 · Notizen ------------------------------------------------------------- */

.notizliste {
  border-top: 1px solid var(--rule);
}

.notizliste__eintrag {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  min-height: 44px;
}

.notizliste__bild {
  width: 100%;
  max-width: 12rem;
}

.notizliste__bild img {
  width: 100%;
}

.notizliste__text {
  min-width: 0;
}

.notizliste__datum {
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.notizliste__titel {
  font-size: 1.25rem;
  line-height: 1.25;
  margin-top: var(--space-1);
  max-width: 30ch;
}

.notizliste__eintrag:hover .notizliste__titel {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.notizliste__teaser {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted);
  margin-top: var(--space-2);
  max-width: var(--mass-text);
}

.notizkopf {
  padding-block: var(--space-4) var(--space-6);
}

.notizkopf__datum {
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.notizkopf h1 {
  font-size: 1.625rem;
  margin-top: var(--space-2);
  max-width: 28ch;
}

.byline {
  font-size: 0.9375rem;
  color: var(--muted);
  margin-top: var(--space-3);
}

.quelle {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: var(--mass-text-weit);
}

.quelle__marke {
  font-style: italic;
  display: block;
  margin-bottom: var(--space-2);
}

/* 11 · Archivansichten ----------------------------------------------------- */

.abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.abschnitt-kopf h1 {
  font-size: 1.75rem;
}

.abschnitt-kopf__hinweis {
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 38ch;
}

.tafelraster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-image);
  padding-block: var(--space-4) var(--space-8);
}

.tafel {
  display: block;
  text-decoration: none;
  min-width: 0;
}

.tafel__bild {
  position: relative;
  overflow: hidden;
  background: var(--flaeche);
  aspect-ratio: 3 / 4;
}

.tafel__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.18s ease-out;
}

.tafel:hover .tafel__bild img {
  opacity: 0.9;
}

.tafel__text {
  padding-top: var(--space-2);
}

.tafel__titel {
  font-size: 1rem;
  line-height: 1.25;
}

.tafel:hover .tafel__titel {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.tafel__mittel {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Liste */
.tafelliste {
  border-top: 1px solid var(--rule);
  padding-bottom: var(--space-8);
}

.tafelliste__zeile {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  min-height: 44px;
}

.tafelliste__vorschau {
  width: 64px;
  aspect-ratio: 3 / 4;
  background: var(--flaeche);
  overflow: hidden;
}

.tafelliste__vorschau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tafelliste__text {
  min-width: 0;
}

.tafelliste__titel {
  font-size: 1.125rem;
  line-height: 1.25;
}

.tafelliste__zeile:hover .tafelliste__titel {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.tafelliste__angaben {
  font-size: 0.9375rem;
  color: var(--muted);
  margin-top: var(--space-1);
}

.tafelliste__kurz {
  font-size: 0.9375rem;
  line-height: 1.45;
  margin-top: var(--space-2);
  max-width: var(--mass-text);
}

/* 12 · Rechtsseiten -------------------------------------------------------- */

.rechts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-12);
}

.rechts__text {
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 65ch;
}

.rechts__text > * + * {
  margin-top: var(--space-4);
}

.rechts__text h2 {
  font-size: 1.25rem;
  margin-top: var(--space-8);
}

.rechts__text h3 {
  font-weight: 600;
  font-size: 1.0625rem;
  margin-top: var(--space-6);
}

.rechts__text ul {
  padding-left: 0;
}

.rechts__text li {
  padding-left: 1.1rem;
  position: relative;
  margin-top: var(--space-2);
}

.rechts__text ul > li::before {
  content: '·';
  position: absolute;
  left: 0.2rem;
  color: var(--muted);
}

.adressblock {
  font-style: normal;
  font-size: 1.0625rem;
  line-height: 1.55;
  border-left: 1px solid var(--rule-stark);
  padding-left: var(--space-4);
  max-width: 32rem;
}

.adressblock strong {
  font-weight: 400;
  display: block;
}

/* 13 · Hinweis ------------------------------------------------------------- */

.hinweis {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-8);
  padding-block: var(--space-4) var(--space-6);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
}

.hinweis[hidden] {
  display: none;
}

.hinweis__text {
  max-width: var(--mass-text-weit);
}

.hinweis__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.hinweis__aktionen a,
.hinweis__aktionen button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 0.9375rem;
}

.hinweis__aktionen button {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule-stark);
}

.hinweis__aktionen button:hover {
  text-decoration-color: currentColor;
}

/* 14 · Fuß ----------------------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--rule);
  margin-top: auto;
}

.fuss__raster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4) var(--space-6);
  font-size: 0.9375rem;
  color: var(--muted);
}

.fuss__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.fuss a {
  color: var(--muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.fuss a:hover {
  color: var(--ink);
}

/* 16 · Bewegung und Druck -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ab 600 px ---------------------------------------------------------------- */

@media (min-width: 600px) {
  .rahmen {
    padding-inline: 12px;
  }

  .bildpaar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tafelraster {
    grid-template-columns: repeat(3, 1fr);
  }

  .kennwerte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weiter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weiter--rechts {
    text-align: right;
  }

  .notizliste__eintrag {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--space-4);
  }

  .tafelliste__zeile {
    grid-template-columns: 88px minmax(0, 1fr) 12rem;
    align-items: baseline;
  }

  .tafelliste__vorschau {
    width: 88px;
  }
}

/* Ab 900 px ---------------------------------------------------------------- */

@media (min-width: 900px) {
  h1 {
    font-size: 1.75rem;
  }

  .kopfzeile h1,
  .abschnitt-kopf h1 {
    font-size: 2rem;
  }

  .notizkopf h1 {
    font-size: 1.875rem;
  }

  .tafelraster {
    grid-template-columns: repeat(4, 1fr);
  }

  .kennwerte {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Ab 1100 px: die zweispaltige Aufteilung ---------------------------------- */

@media (min-width: 1100px) {
  .rahmen {
    padding-inline: 8px;
  }

  .kopf__raster,
  .raster,
  .fuss__raster {
    display: grid;
    grid-template-columns: var(--spalte-leinwand) var(--spalte-info);
    gap: 0;
  }

  .kopf__raster {
    padding-block: 0;
  }

  .kopf__links,
  .kopf__rechts {
    padding-block: var(--space-3);
    padding-inline: var(--space-2);
  }

  .kopf__rechts {
    border-left: 1px solid var(--rule);
    align-items: baseline;
    justify-content: flex-start;
  }

  .kopf__marke-info {
    display: block;
  }

  .kopf__ansicht {
    display: block;
  }

  .knopf-schublade {
    display: none;
  }

  .leinwand {
    padding-inline: var(--space-2);
    padding-block: var(--space-4) var(--space-12);
    border-right: 1px solid var(--rule);
  }

  .infospalte {
    padding-inline: var(--space-4);
    padding-block: var(--space-4) var(--space-12);
    position: sticky;
    top: 3.5rem;
    align-self: start;
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .fuss__raster {
    align-items: baseline;
  }

  .fuss__raster > * {
    padding-inline: var(--space-2);
  }

  .fuss__raster > *:last-child {
    border-left: 1px solid var(--rule);
    padding-left: var(--space-4);
  }

  .fuss__liste {
    justify-content: flex-start;
  }

  .rechts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-8);
  }

  .kopfzeile {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-6) var(--space-8);
  }

  .bildreihe + .bildreihe {
    margin-top: var(--gap-image);
  }
}

/* Ab 1600 px: ruhigere Ränder ---------------------------------------------- */

@media (min-width: 1600px) {
  .rahmen {
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: 12px;
  }

  .infospalte {
    padding-inline: var(--space-6);
  }
}

/* Mobile Schublade --------------------------------------------------------- */

@media (max-width: 1099px) {
  .infospalte {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--paper);
    padding: var(--space-4) 10px var(--space-12);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    visibility: hidden;
    /* Beim Schließen erst nach der Bewegung ausblenden, damit die Schublade
       nicht vorzeitig verschwindet. Beim Öffnen greift die Regel unten und
       schaltet die Sichtbarkeit sofort, sonst ließe sich der Schließen-Knopf
       im ersten Bildtakt nicht fokussieren. */
    transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
  }

  .infospalte.ist-offen,
  .infospalte:target {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.2s ease-out, visibility 0s;
  }

  .infospalte__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--space-4);
  }

  .infospalte__titel {
    font-style: italic;
    color: var(--muted);
    font-size: 0.9375rem;
  }

  .schublade-schliessen {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    font-size: 0.9375rem;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--rule-stark);
  }
}

@media (min-width: 1100px) {
  .infospalte__kopf {
    display: none;
  }
}

/* Druck -------------------------------------------------------------------- */

@media print {
  .kopf,
  .hinweis,
  .fuss,
  .infospalte,
  .weiter {
    display: none;
  }

  .leinwand {
    border: 0;
    padding: 0;
  }

  body {
    font-size: 11pt;
  }

  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #444;
  }
}

/* Breite Einzelbilder und -bänder über die volle Leinwand ------------------ */

.platte--weit,
.schleife--weit {
  width: 100%;
}

.schleife--weit {
  aspect-ratio: var(--verhaeltnis, 3 / 2);
}

/* Ein Band in einer Figurenhülle verhält sich wie eine stehende Tafel. */
.platte .schleife,
.film .schleife {
  width: 100%;
}