:root {
  --pfeil-groesse: 1.6em;
  --pfeil-deckung: .6;
  --text-breite: 21.1em;
  --titel-groesse: 1.22;
  --text-groesse: .791;
  --teil-groesse: 1.65em;
  --teil-zahl-groesse: .8em;
  --teil-text-groesse: .7em;
  --teil-abstand: 1.5em;
  --teil-linie: 1.5px;
  --teile-groesse: .8em;
  --o-katalog: 1;
  --o-kopfzeile: 1;
  --o-teile: 1;
  --o-teil: 1;
  --o-teil-zahl: .55;
  --o-teil-text: 1;
  --o-werk-titel: 1;
  --o-angaben: 1;
  --o-feld: .55;
  --o-wert: 1;
  --o-leer: .42;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #f4f2ed;
  background: var(--ak-grund, #f4f2ed);
  color: #000;
  font-family: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.5;
}
@media (min-width: 600px)  { body { font-size: 16px; } }
@media (min-width: 1000px) { body { font-size: 17.5px; } }
@media (min-width: 1500px) { body { font-size: 18.5px; } }

main { display: block; }
#katalog {
  max-width: 51em;
  margin: 0 auto;
  padding: 3em 16px 5em;
}
@media (min-width: 1000px) { #katalog { padding-left: 0; padding-right: 0; } }

.kopf h1 { font-size: 2.9em; font-weight: 400; line-height: 1.2; margin: 0 0 .25em; }
.kopf p  { margin: 0 0 2.5em; }

.liste { list-style: none; margin: 0; padding: 0; }

.teile { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.4em; margin: 0 0 2em; font-size: var(--teile-groesse); }
.kopf p .start { margin: 0; font-size: inherit; letter-spacing: inherit; }
.teile a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.teile a:hover { border-bottom-color: transparent; }
.abschnitt { margin: var(--teil-abstand) 0 1.6em; padding-bottom: .5em; border-bottom: var(--teil-linie) solid #000; }
.abschnitt:first-child { margin-top: 0; }
.abschnitt h2 { font-size: var(--teil-groesse); font-weight: 400; margin: 0; letter-spacing: .01em; }
.abschnitt p { margin: .2em 0 0; font-size: var(--teil-zahl-groesse); color: hsl(30, 6%, 45%); }
.abschnitt .teil-text { margin: .6em 0 .2em; font-size: var(--teil-text-groesse); color: #000; max-width: 38em; }

.werk {
  position: relative;
  min-height: 6.28em;
  margin: 0 0 1.55em;
  padding-bottom: 1.55em;
  border-bottom: 1px solid rgba(120, 108, 98, .20);
  border-bottom: 1px solid var(--ak-linie-fein, rgba(120, 108, 98, .20));
}

.bild {
  position: absolute;
  top: 0;
  left: 0;
  width: 8.75em;
  height: 6.28em;
  display: block;
}
.bild-link {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
}
.bild-link.ist-aktiv { display: block; }
.bild img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: 0;
}
.bild-link:focus { outline: 2px solid #000; outline-offset: 3px; }
.bild-link:focus:not(:focus-visible) { outline: none; }
.zeiger .bild-link:focus { outline: none; }

.bild-pfeil, .bild-zaehler { display: none; }
.bild.mehrere {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  touch-action: pan-y;
  touch-action: pan-y pinch-zoom;
}
.mehrere .bild-link.ist-aktiv {
  position: relative;
  -webkit-box-ordinal-group: 2;
  -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%;
  min-width: 0;
}
.mehrere .bild-pfeil {
  display: block;
  position: relative;
  -webkit-box-flex: 0; -ms-flex: none; flex: none;
  width: .8em;
  width: calc(var(--pfeil-groesse) * .5);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  color: #000;
  opacity: .6;
  opacity: var(--pfeil-deckung);
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-transition: opacity .15s;
  transition: opacity .15s;
}
.bild-zurueck { -webkit-box-ordinal-group: 1; -ms-flex-order: -1; order: -1; }
.bild-weiter  { -webkit-box-ordinal-group: 3; -ms-flex-order: 1; order: 1; }
.mehrere .bild-pfeil:before { content: ""; position: absolute; top: 0; bottom: 0; width: 1em; }
.bild-zurueck:before { right: 100%; }
.bild-weiter:before  { left: 100%; }
.mehrere .bild-pfeil svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6em;
  height: 1.6em;
  margin: -.8em 0 0 -.8em;
  width: var(--pfeil-groesse);
  height: var(--pfeil-groesse);
  margin: calc(var(--pfeil-groesse) * -.5) 0 0 calc(var(--pfeil-groesse) * -.5);
}
.bild-pfeil path { vector-effect: non-scaling-stroke; }
.mehrere .bild-pfeil:hover { opacity: 1; }
.bild-pfeil:focus { outline: 2px solid #000; outline-offset: 0; }
.bild-pfeil:focus:not(:focus-visible) { outline: none; }
.zeiger .bild-pfeil:focus { outline: none; }
.mehrere .bild-zaehler {
  display: block;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1.1em;
  line-height: 0;
  text-align: center;
  color: #000;
  opacity: .6;
  opacity: var(--pfeil-deckung);
  pointer-events: none;
}
.bild-punkt {
  display: inline-block;
  -webkit-box-flex: 0; -ms-flex: none; flex: none;
  width: .36em;
  height: .36em;
  margin: 0 .2em;
  border: 1px solid;
  border-radius: 50%;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.bild-punkt.ist-aktiv { background: #000; }
.vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.text { margin-left: 13.4em; }
@supports (margin-left: max(1px, 2px)) {
  .text { margin-left: max(13.4em, calc(100% - var(--text-breite))); }
}
@media (max-width: 599px) {
  .bild { width: 8em; }
  .text { margin-left: 9.25em; }
  @supports (margin-left: max(1px, 2px)) {
    .text { margin-left: max(9.25em, calc(100% - var(--text-breite))); }
  }
}
.text p {
  margin: 0;
  font-size: .791em;
  font-size: calc(1em * var(--text-groesse));
  height: 1.985em;
  height: calc(1.57em / var(--text-groesse));
  line-height: 1.985em;
  line-height: calc(1.57em / var(--text-groesse));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text p { text-align: right; }
.text .z1 {
  font-size: 1.22em;
  font-size: calc(1em * var(--titel-groesse));
  height: 1.287em;
  height: calc(1.57em / var(--titel-groesse));
  line-height: 1.287em;
  line-height: calc(1.57em / var(--titel-groesse));
}
.text .z1 { font-weight: 400; font-style: italic; letter-spacing: .05em; font-variant-caps: all-small-caps; }
.text .z2, .text .z3, .text .z4 { font-weight: 300; letter-spacing: .01em; color: hsl(0, 0%, 4%); }
.text .feld { font-size: .82em; letter-spacing: .08em; text-transform: uppercase; color: hsl(30, 6%, 45%); }
.text .leer { color: hsl(30, 5%, 58%); white-space: pre; }
.text .z1.leer { color: hsl(30, 5%, 50%); }
.text .besch { font-weight: 300; letter-spacing: .01em; white-space: normal; height: auto; line-height: 1.5; overflow: visible; hyphens: auto; -webkit-hyphens: auto; }
.text .besch .feld { display: block; line-height: 1.985em; }

.fuss { margin: 3em 0 0; font-size: .8em; }
.fuss + .fuss { margin-top: 1em; }
.fuss a { color: #000; text-decoration: none; letter-spacing: .035em; }
.fuss a:hover { text-decoration: underline; }


@media (prefers-reduced-motion: reduce) {
  .mehrere .bild-pfeil { -webkit-transition: none; transition: none; }
}

.kopf .start {
  position: relative;
  display: inline-block;
  margin: 0 0 1em;
  font-size: .8em;
  color: #000;
  text-decoration: none;
  letter-spacing: .035em;
}
.kopf .start:after { content: ""; position: absolute; left: 0; right: 0; top: -.5em; bottom: -.5em; }
.kopf .start:hover { text-decoration: underline; }
.kopf .start:focus { outline: 2px solid #000; outline-offset: 3px; }
.kopf .start:focus:not(:focus-visible) { outline: none; }
.zeiger .kopf .start:focus { outline: none; }

.abschnitt .teil-text { font-size: max(12px, var(--teil-text-groesse)); }
@media (max-width: 599px) {
  .kopf h1 { font-size: 2.5em; }
}
.text .z1, .text .z3 { white-space: normal; height: auto; overflow: visible; }
.text .z3 { line-height: 1.35; padding: calc((1.985em - 1.35em) / 2) 0; }
.text .z1 { line-height: 1.15; padding: calc((1.287em - 1.15em) / 2) 0; }

.kopf h1 { color: #000; color: rgb(0 0 0 / var(--o-katalog)); }
.kopf p { color: #000; color: rgb(0 0 0 / var(--o-kopfzeile)); }
.kopf p .start { color: inherit; }
#katalog .teile a { color: #000; color: rgb(0 0 0 / var(--o-teile)); }
.abschnitt h2 { color: #000; color: rgb(0 0 0 / var(--o-teil)); }
.abschnitt p { color: #777; color: rgb(0 0 0 / var(--o-teil-zahl)); }
.abschnitt .teil-text { color: #000; color: rgb(0 0 0 / var(--o-teil-text)); }
.text .z1 { color: #000; color: rgb(10 10 10 / var(--o-werk-titel)); }
.text .z3 { color: #0a0a0a; color: rgb(10 10 10 / var(--o-angaben)); }
.text .z2, .text .besch { color: #0a0a0a; color: rgb(10 10 10 / var(--o-wert)); }
.text .feld { color: #777; color: rgb(0 0 0 / var(--o-feld)); }
.text .leer, .text .z1.leer { color: #949494; color: rgb(0 0 0 / var(--o-leer)); }