@font-face{font-family:'Spectral SC';font-style:normal;font-weight:400;font-display:swap;src:url('schriften/spectral-sc-v15-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:200;font-display:swap;src:url('schriften/spectral-v15-latin-200.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('schriften/spectral-v15-latin-600.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('schriften/spectral-v15-latin-italic.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('schriften/spectral-v15-latin-regular.woff2') format('woff2')}

:root{
  --papier:#f1f0ec; --papier-tief:#e5e3dd; --papier-rand:#d0cdc4;
  --tinte:#171a21; --tinte-leise:#5a5d55; --maroquin:#6e2432;
  --mass:34rem;
}
@media (prefers-color-scheme:dark){
  :root{ --papier:#15171a; --papier-tief:#1d2024; --papier-rand:#2e3238;
         --tinte:#e4e2db; --tinte-leise:#9a9c94; --maroquin:#d08b94; }
}
*{box-sizing:border-box}
/* Muss vor den Layoutregeln stehen und sie uebertreffen: sonst setzt
   display:grid auf .eintrag das Verstecken durch den Filter ausser Kraft. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:Spectral,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:17px; line-height:1.62; font-weight:400;
  text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration-color:var(--papier-rand); text-underline-offset:.18em}
a:hover{text-decoration-color:var(--maroquin); color:var(--maroquin)}
:focus-visible{outline:2px solid var(--maroquin); outline-offset:3px}
.huelle{max-width:62rem; margin:0 auto; padding:0 1.5rem}

/* Kopf: bleibt beim Blaettern oben stehen */
.kopf{position:sticky; top:0; z-index:30; background:var(--papier);
  border-bottom:1px solid var(--papier-rand)}
.kopf .huelle{display:flex; flex-wrap:wrap; gap:.5rem 1.8rem;
  align-items:baseline; padding-top:1.3rem; padding-bottom:1.3rem}
.marke{font-size:clamp(1.45rem,2.6vw,1.95rem); font-weight:600; line-height:1.1;
  letter-spacing:-.005em; text-decoration:none}
.marke span{font-weight:200; color:var(--tinte-leise)}
.kopf nav{margin-left:auto; display:flex; gap:1.3rem; font-size:.95rem}
.kopf nav a{text-decoration:none; color:var(--tinte-leise)}
.kopf nav a:hover,.kopf nav a[aria-current]{color:var(--maroquin)}

/* Aufschlag */
.aufschlag{padding:3.4rem 0 2rem; border-bottom:1px solid var(--papier-rand)}
.aufschlag h1{
  font-weight:200; font-size:clamp(2.1rem,6vw,3.5rem); line-height:1.08;
  margin:0 0 .7rem; letter-spacing:-.015em; max-width:18ch;
}
/* Einzelne lange Woerter wie „Datenschutzerklaerung" sollen nicht an ihrem
   weichen Trennzeichen brechen, solange sie in eine Zeile passen. */
.aufschlag.breit h1{max-width:none}
.aufschlag.breit .vorspann{max-width:44rem}
.aufschlag h1 em{font-style:normal}
.vorspann{max-width:var(--mass); color:var(--tinte-leise); margin:0 0 1.1rem}
.zahlen{font-size:.92rem; color:var(--tinte-leise)}
.zahlen b{font-weight:600; color:var(--tinte)}

/* Filterleiste */
/* Die Filterleiste haengt sich unter den Kopf. Dessen Hoehe wechselt mit der
   Fensterbreite, deshalb wird sie gemessen und als --kopfhoehe gesetzt. */
.filter{position:sticky; top:var(--kopfhoehe,0px); z-index:20; background:var(--papier);
  border-bottom:1px solid var(--papier-rand)}
.filter .huelle{display:flex; flex-wrap:wrap; gap:.6rem; padding:.7rem 1.5rem}
.filter input,.filter select{
  font:inherit; font-size:.92rem; color:inherit; background:var(--papier-tief);
  border:1px solid var(--papier-rand); border-radius:0; padding:.4rem .6rem;
}
.filter input{flex:1 1 18rem; min-width:10rem; max-width:26rem}
.filter select{max-width:13rem}
.treffer{margin-left:auto; padding-left:.7rem; align-self:center; font-size:.86rem; color:var(--tinte-leise)}

/* Liste */
.liste{list-style:none; margin:0; padding:1.2rem 0 4rem}
.eintrag{display:grid; grid-template-columns:5.5rem 1fr; gap:0 1.4rem;
  padding:1.15rem 0; border-bottom:1px solid var(--papier-rand)}
.eintrag .nr{
  font-weight:200; font-size:1.3rem; line-height:1.25; color:var(--tinte-leise);
  font-variant-numeric:lining-nums tabular-nums; white-space:nowrap;
}
.eintrag a.titel{display:block; font-size:1.18rem; line-height:1.32;
  font-weight:600; text-decoration:none; margin:.05rem 0 .18rem; max-width:42ch}
.eintrag a.titel .unter{font-weight:400; font-size:.94rem; color:var(--tinte-leise);
  display:block; margin-top:.1rem}
.eintrag a.titel:hover,.eintrag a.titel:hover .unter{color:var(--maroquin)}
.eintrag:hover .nr{color:var(--maroquin)}
.eintrag .autor{color:var(--tinte-leise); font-size:.95rem}
.eintrag .impressum{color:var(--tinte-leise); font-size:.95rem; max-width:var(--mass)}
.eintrag .anmerkung{font-size:.88rem; color:var(--tinte-leise); font-style:italic; margin-top:.2rem}
.leer{padding:3rem 0; color:var(--tinte-leise)}

/* Werkseite */
.werk{padding:2.6rem 0 1.4rem}
.werk .nr{font-weight:200; font-size:2.6rem; line-height:1; color:var(--tinte-leise);
  font-variant-numeric:lining-nums tabular-nums}
.werk h1{font-weight:400; font-size:clamp(1.6rem,4vw,2.3rem); line-height:1.18;
  margin:.5rem 0 .3rem; max-width:26ch}
.werk h1 .unter{display:block; font-size:.56em; font-weight:400; color:var(--tinte-leise);
  line-height:1.35; margin-top:.35rem; max-width:40ch}
.werk .autor{font-size:1.05rem; color:var(--tinte-leise); margin:0}
.ausgabe{display:grid; grid-template-columns:5.5rem 1fr; gap:0 1.4rem;
  padding:1.8rem 0; border-top:1px solid var(--papier-rand);
  scroll-margin-top:calc(var(--kopfhoehe,0px) + 1rem)}
html{scroll-padding-top:calc(var(--kopfhoehe,0px) + 1rem)}
.ausgabe .marke-v{font-weight:200; font-size:1.45rem; color:var(--maroquin); line-height:1.2}
.ausgabe h2,.werkblock h2{font-size:1rem; font-weight:400; margin:0 0 .5rem;
  max-width:46ch; line-height:1.45}
.ausgabe h2 b,.werkblock h2 b{font-weight:600}
.werkblock{display:grid; grid-template-columns:5.5rem 1fr; gap:0 1.4rem; padding:0 0 1.6rem}
.werkblock > div:first-child{font-size:.82rem; color:var(--tinte-leise); padding-top:.2rem}
dl.daten{margin:0 0 .9rem; display:grid; grid-template-columns:9.5rem 1fr; gap:.18rem 1rem}
dl.daten dt{color:var(--tinte-leise); font-size:.9rem}
dl.daten dd{margin:0; max-width:46ch}
.illu{max-width:46ch; margin:0 0 .6rem}
.hinweis{font-size:.9rem; color:var(--tinte-leise); max-width:46ch}
.nachweise{margin:.7rem 0 0; font-size:.9rem; display:flex; flex-wrap:wrap; gap:.3rem 1.1rem}
.fahne{display:inline-block; font-size:.8rem; color:var(--maroquin);
  border:1px solid currentColor; padding:.05rem .45rem; margin-bottom:.5rem}
.zitat{margin:2.5rem 0 4rem; padding-top:1.1rem; border-top:1px solid var(--papier-rand);
  font-size:.9rem; color:var(--tinte-leise)}
.zitat code{font:inherit; color:var(--tinte)}
.blaettern{display:flex; justify-content:space-between; gap:1rem; margin:0 0 3rem; font-size:.95rem}
.blaettern a{text-decoration:none; color:var(--tinte-leise); max-width:18rem}
.blaettern a:hover{color:var(--maroquin)}

/* Bilder */
/* Bildreihe: alle Abbildungen gleich hoch, die Breite ergibt sich aus dem Bild.
   So erscheinen Einband und Doppelseite im selben Massstab. */
.tafel{--tafelhoehe:200px;
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.1rem;
  margin:1.2rem 0 0; padding:0; list-style:none}
.tafel li{margin:0; max-width:100%}
.tafel figure{margin:0}
.tafel button{display:block; padding:0; border:0; background:none;
  cursor:zoom-in; line-height:0}
.tafel img{display:block; height:var(--tafelhoehe); width:auto; max-width:100%;
  object-fit:contain; box-shadow:0 0 0 1px var(--papier-rand)}
.tafel button:hover img,.tafel button:focus-visible img{box-shadow:0 0 0 1px var(--maroquin)}
.tafel figcaption{font-size:.82rem; color:var(--tinte-leise);
  margin-top:.4rem; max-width:22rem; line-height:1.4}
.ohnebild{color:var(--tinte-leise); font-size:.9rem; font-style:italic}
dialog.lupe{border:0; padding:0; background:transparent; width:100vw; height:100vh;
  max-width:100vw; max-height:100vh; display:grid; place-content:center}
dialog.lupe:not([open]){display:none}
dialog.lupe::backdrop{background:rgba(10,10,12,.95)}
dialog.lupe img{max-width:88vw; max-height:80vh; display:block; margin:0 auto}
dialog.lupe p{color:#f1f0ec; text-align:center; font-size:.9rem; margin:.7rem auto 0;
  max-width:60ch; padding:0 1rem}
dialog.lupe .zaehler{color:#9b9a94; font-size:.82rem; margin-top:.35rem;
  font-variant-numeric:lining-nums tabular-nums}
dialog.lupe button{background:none; border:0; color:#f1f0ec; font:inherit; cursor:pointer}
dialog.lupe .zu{position:fixed; top:.6rem; right:1rem; font-size:2rem; line-height:1;
  padding:.4rem .7rem}
/* Die Pfeile stehen mittig unter dem Bild, damit sie beim Blaettern
   nicht mit der Bildbreite wandern. */
dialog.lupe .steuerung{display:flex; align-items:center; justify-content:center;
  gap:.6rem; margin-top:.5rem}
dialog.lupe .steuerung .zaehler{margin:0; min-width:7ch}
dialog.lupe .blatt{font-size:1.9rem; line-height:1; padding:.25rem 1rem; color:#cfcec8}
dialog.lupe .blatt:hover,dialog.lupe .blatt:focus-visible{color:#fff}
@media (max-width:620px){
  dialog.lupe img{max-width:94vw; max-height:68vh}
  dialog.lupe .blatt{padding:.4rem 1.4rem}
}

/* Register */
.register{columns:2 17rem; column-gap:2.4rem; padding:1.5rem 0 4rem}
.register section{break-inside:avoid-column; margin:0 0 1.8rem}
.register h2{font-size:1rem; font-weight:600; margin:0 0 .4rem;
  padding-bottom:.25rem; border-bottom:1px solid var(--papier-rand)}
.register ul{list-style:none; margin:0; padding:0; font-size:.95rem}
.register li{padding:.1rem 0}
.register .anzahl{color:var(--tinte-leise); font-size:.85rem}
.register .anzahl a{white-space:nowrap}
.gruppe{padding:2.2rem 0 2.6rem; border-bottom:1px solid var(--papier-rand)}
.gruppe:last-child{border-bottom:0; padding-bottom:3.5rem}
.gruppe .werkzeile{color:var(--tinte-leise); font-size:.95rem; margin:0}
.gruppe h2{font-weight:200; font-size:1.6rem; margin:0 0 .2rem}

/* Rechtstexte */
.rechtstext{max-width:38rem; padding:1.6rem 0 4rem}
.rechtstext h2{font-weight:600; font-size:1.15rem; margin:2.6rem 0 .6rem;
  padding-bottom:.3rem; border-bottom:1px solid var(--papier-rand)}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-weight:600; font-size:1rem; margin:1.6rem 0 .4rem}
.rechtstext h4{font-weight:400; font-style:italic; font-size:1rem; margin:1.1rem 0 .3rem}
.rechtstext a{word-break:break-word}
.rechtstext p{margin:0 0 .9rem}
.rechtstext ul{margin:0 0 .9rem; padding-left:1.1rem}
.rechtstext li{margin:.1rem 0}

/* Zurueck zum Seitenanfang */
.anfang{position:fixed; right:1.1rem; bottom:1.1rem; z-index:25;
  display:inline-flex; align-items:center; gap:.35rem;
  font:inherit; font-size:.85rem; line-height:1; color:var(--tinte-leise);
  background:var(--papier-tief); border:1px solid var(--papier-rand);
  padding:.55rem .85rem; cursor:pointer;
  opacity:0; visibility:hidden; transition:opacity .18s}
.anfang[data-sichtbar]{opacity:1; visibility:visible}
.anfang:hover,.anfang:focus-visible{color:var(--maroquin); border-color:var(--maroquin)}
@supports (padding:max(0px)){
  .anfang{right:max(1.1rem,env(safe-area-inset-right));
          bottom:max(1.1rem,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.anfang{transition:none}}

/* Fuss */
.fuss{border-top:1px solid var(--papier-rand); padding:1.6rem 0 2.6rem;
  font-size:.88rem; color:var(--tinte-leise)}
.fuss p{margin:.3rem 0; max-width:var(--mass)}

@media (max-width:620px){
  .eintrag,.ausgabe,.werkblock{grid-template-columns:1fr; gap:.2rem}
  .eintrag .nr{font-size:.86rem; letter-spacing:.04em; color:var(--maroquin); font-weight:400}
  .ausgabe .marke-v{font-size:1rem; color:var(--maroquin)}
  .ausgabe .marke-v::after{content:")"}
  dl.daten{grid-template-columns:1fr; gap:0}
  dl.daten dt{margin-top:.45rem; font-size:.82rem}
  .kopf .huelle{padding-top:1.1rem; padding-bottom:1.1rem; gap:.35rem 1.1rem}
  .kopf nav{gap:1.1rem; font-size:.9rem}
  /* Auf dem Telefon bleibt nur der Kopf stehen; Kopf und Filterleiste zusammen
     wuerden ein Drittel des Bildschirms belegen. */
  .filter{position:static}
  .filter .huelle{gap:.45rem}
  .filter input{flex:1 1 100%; max-width:none}
  .filter select{flex:1 1 7rem; max-width:none; min-width:0}
  .treffer{flex-basis:100%; margin:0; text-align:right}
  .register{columns:1}
  .aufschlag{padding:2.2rem 0 1.5rem}
  .tafel{--tafelhoehe:140px; gap:.8rem}
}
@media print{
  .filter,.kopf nav,.blaettern,.anfang{display:none}
  body{background:#fff; color:#000; font-size:10.5pt}
}
.autor{font-family:'Spectral SC',Spectral,Georgia,serif; letter-spacing:.035em}