/* =========================================================================
   Bisterfeld & Weiss Magazin ,  Büro für Namensforschung
   Präfix bw- · Struktur guide-sommaire · drei Dichten, Kammern, Kote.
   Zwei lokale Schriftfamilien: Fraunces (Titel) und Open Sans (Text).
   Drei satte Signaturflächen, fünf abgerundete Bausteine, drei Schatten.
   ========================================================================= */

@font-face {
  font-family: 'Fraunces';
  src: url('/fraunces-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/open-sans-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/open-sans-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --papier:          #f6eddf;
  --papier-hell:     #fdfaf2;
  --papier-dunkel:   #ecddc2;

  /* Zwei satte Signature-Flächen */
  --kammer-ton:      #f2c98d;
  --kammer-negativ:  #2a201a;

  --tabak:           #a3561c;
  --tabak-tief:      #74390e;
  --tabak-hell:      #e6b478;
  --lampe:           #ffe2a8;

  --tinte:           #2a221b;
  --tinte-weich:     #5a4c3d;
  --filet:           #d8c7a8;
  --filet-fein:      #eadfc7;

  --titel-police:    'Fraunces', Georgia, 'Palatino Linotype', 'Times New Roman', serif;
  --text-police:     'Open Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --messung:         68ch;
  --rahmen-breit:    min(76rem, 100% - 2.5rem);
  --interligne:      1.62;
  --takt:            1.35rem;

  --radius-klein:    12px;
  --radius:          16px;
  --radius-gross:    20px;
  --radius-pille:    999px;

  --schatten-karte:  0 14px 32px -20px rgba(163, 86, 28, .55);
  --schatten-hell:   0 22px 48px -24px rgba(163, 86, 28, .65);
  --schatten-tief:   0 26px 56px -22px rgba(42, 32, 26, .55);
  --schatten-weich:  0 6px 18px -10px rgba(90, 76, 61, .32);

  /* Der Akzent Tabak färbt NIE einen ganzen Absatz: nur Ränder, Nummern,
     Plaketten, Schaltflächen, Fokus. */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 480px at 12% -8%, #fbeed6 0%, transparent 62%),
    var(--papier);
  color: var(--tinte);
  font: 400 clamp(1rem, .97rem + .22vw, 1.08rem)/var(--interligne) var(--text-police);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--tabak-tief); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tabak); }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--tabak);
  outline-offset: 3px;
  border-radius: 8px;
}
:target { scroll-margin-top: 6rem; }
::selection { background: var(--lampe); color: var(--tinte); }

/* ---------- Rahmen und Kopf ---------- */
.bw-rahmen { width: var(--rahmen-breit); margin-inline: auto; min-width: 0; }
.bw-sprung { position: absolute; left: -9999px; }
.bw-sprung:focus {
  left: 1rem; top: 1rem; z-index: 50;
  background: var(--kammer-negativ); color: var(--papier-hell);
  padding: .6rem 1rem; border-radius: var(--radius-klein);
}

.bw-kopf { background: var(--papier-hell); border-bottom: 1px dotted var(--filet); }
.bw-kopf__streifen {
  height: 7px;
  background:
    repeating-linear-gradient(90deg, var(--tabak) 0 26px, transparent 26px 34px),
    var(--kammer-ton);
}
.bw-kopf__innen {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  padding: 1rem 0 1.15rem;
}
.bw-marke {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: .75rem; row-gap: .15rem;
  text-decoration: none; color: var(--tinte);
}
.bw-marke__zeichen { grid-row: 1 / span 2; color: var(--tabak); }
.bw-marke__wort {
  font: 700 clamp(1.15rem, 1rem + .7vw, 1.55rem)/1.05 var(--titel-police);
  letter-spacing: -.015em;
}
.bw-marke__und { color: var(--tabak); font-style: normal; }
.bw-marke__zusatz {
  font-size: .76rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--tinte-weich);
}
.bw-wege ul { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
.bw-wege__link {
  display: inline-block; padding: .38rem .75rem;
  border-radius: var(--radius-pille);
  text-decoration: none; color: var(--tinte);
  font-size: .9rem; font-weight: 700;
}
.bw-wege__link:hover { background: var(--kammer-ton); color: var(--tinte); }
.bw-wege__link[aria-current="page"] { background: var(--kammer-negativ); color: var(--papier-hell); }

/* ---------- Auftakt ---------- */
.bw-auftakt {
  display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(2rem, 4vw, 3rem);
  align-items: center;
}
.bw-auftakt__text { min-width: 0; }
.bw-auftakt__h1 {
  font: 700 clamp(2.1rem, 1.55rem + 2.7vw, 3.6rem)/1.05 var(--titel-police);
  letter-spacing: -.02em;
  margin: .4rem 0 1rem;
  text-wrap: balance;
  text-shadow:
    0 2px 0 rgba(253, 250, 242, .95),
    0 16px 32px rgba(163, 86, 28, .22),
    0 4px 6px rgba(42, 32, 26, .08);
}
.bw-auftakt__intro { max-width: var(--messung); margin: 0 0 1.4rem; color: var(--tinte-weich); }
.bw-auftakt--schmal { grid-template-columns: minmax(0, 1fr); }

.bw-note {
  display: inline-block;
  font: 700 .72rem/1 var(--text-police);
  letter-spacing: .13em; text-transform: uppercase;
  background: var(--tabak); color: var(--papier-hell);
  padding: .34rem .7rem;
  border-radius: var(--radius-pille);
  box-shadow:
    0 4px 10px -4px rgba(116, 57, 14, .7),
    inset 0 -1px 0 rgba(0, 0, 0, .15);
}
.bw-note--gross { font-size: .74rem; padding: .4rem .9rem; }

.bw-bilanz { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.bw-bilanz__posten {
  flex: 1 1 8rem; min-width: 0;
  background: var(--papier-hell);
  border: 1px solid var(--filet-fein);
  border-radius: var(--radius-klein);
  padding: .75rem .95rem;
  box-shadow: var(--schatten-weich);
}
.bw-bilanz__zahl { display: block; font: 700 1.35rem/1 var(--titel-police); color: var(--tabak-tief); }
.bw-bilanz__wort {
  display: block; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--tinte-weich);
  margin-top: .35rem;
}

.bw-auftakt__bild {
  position: relative; margin: 0; min-width: 0;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten-hell);
  background: var(--kammer-ton);
}
.bw-auftakt__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bw-plakette {
  position: absolute; bottom: .85rem; right: .85rem; left: .85rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between;
  align-items: baseline;
  background: rgba(42, 32, 26, .78);
  color: var(--papier-hell);
  padding: .55rem .9rem;
  border-radius: var(--radius-klein);
  backdrop-filter: blur(5px);
  font-size: .82rem;
  box-shadow: var(--schatten-tief);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.bw-plakette span { min-width: 0; }
.bw-plakette time { color: var(--lampe); white-space: nowrap; }
.bw-plakette--gross { font-size: .88rem; padding: .7rem 1rem; }
.bw-plakette--statisch {
  position: static; margin: 0;
  background: var(--kammer-negativ); color: var(--papier-hell);
  border-radius: 0 0 var(--radius-klein) var(--radius-klein);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* ---------- Kammer ---------- */
.bw-kammer { padding: clamp(2rem, 4vw, 3.25rem) 0; }
.bw-kammer--neu { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.bw-kammer--ton {
  background: var(--kammer-ton);
  border-radius: var(--radius-gross);
  padding-inline: clamp(1rem, 2.4vw, 2rem);
  box-shadow: var(--schatten-hell);
  margin-block: clamp(1.8rem, 3.5vw, 2.8rem);
}
.bw-kammer--zart {
  background: var(--papier-dunkel);
  border-radius: var(--radius-gross);
  padding-inline: clamp(1rem, 2.4vw, 2rem);
  box-shadow: var(--schatten-weich);
  margin-block: clamp(1.5rem, 3vw, 2.4rem);
}
.bw-kammer__kopf {
  border-top: 2px dotted var(--tabak);
  padding-top: 1.1rem;
  margin-bottom: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline;
}
.bw-kammer--ton .bw-kammer__kopf,
.bw-kammer--zart .bw-kammer__kopf { border-top-color: var(--tabak-tief); }
.bw-kammer__kopf h2 {
  font: 700 clamp(1.35rem, 1.15rem + .9vw, 1.85rem)/1.15 var(--titel-police);
  letter-spacing: -.015em;
  margin: 0;
  text-shadow: 0 1px 0 rgba(253, 250, 242, .7);
}
.bw-kammer__kopf h2 a { color: inherit; text-decoration: none; }
.bw-kammer__kopf h2 a:hover { color: var(--tabak-tief); }
.bw-kammer__satz { flex: 1 1 16rem; min-width: 0; margin: 0; color: var(--tinte-weich); font-size: .95rem; }
.bw-kammer--ton .bw-kammer__satz { color: #4a2c10; }
.bw-kammer__decke { font-size: .82rem; color: var(--tinte-weich); letter-spacing: .08em; }
.bw-kammer__weiter { margin: 1.4rem 0 0; }

.bw-pfeil {
  display: inline-block; padding: .55rem 1.05rem;
  background: var(--tabak); color: var(--papier-hell);
  border-radius: var(--radius-klein);
  text-decoration: none; font-weight: 700; font-size: .9rem;
  box-shadow: 0 10px 22px -10px rgba(116, 57, 14, .85);
}
.bw-pfeil:hover { background: var(--tabak-tief); color: var(--papier-hell); }

/* Drei Dichten */
.bw-buehne {
  display: grid; gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-items: start;
}
.bw-register {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

/* ---------- Karte ---------- */
.bw-karte {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--papier-hell);
  border: 1px solid var(--filet-fein);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-karte);
  min-width: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bw-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hell); }
.bw-karte__bild { margin: 0; position: relative; background: var(--kammer-ton); }
.bw-karte__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bw-karte__text { padding: 1rem 1.1rem 1.2rem; min-width: 0; }
.bw-karte__zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .6rem; }
.bw-fach {
  font-size: .74rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--tabak-tief);
  text-decoration: none; font-weight: 700;
}
a.bw-fach:hover { color: var(--tabak); }
.bw-karte__titel {
  margin: 0 0 .5rem;
  font: 700 clamp(1.1rem, 1rem + .45vw, 1.32rem)/1.2 var(--titel-police);
  letter-spacing: -.012em;
}
.bw-karte__titel a { color: var(--tinte); text-decoration: none; }
.bw-karte__titel a:hover { color: var(--tabak-tief); }
.bw-karte__kurz { margin: 0 0 .65rem; color: var(--tinte-weich); font-size: .93rem; }
.bw-karte__zeit { margin: 0; font-size: .82rem; color: var(--tinte-weich); }

.bw-karte--gross { grid-template-columns: minmax(0, 1fr); }
.bw-karte--gross .bw-karte__bild img { aspect-ratio: 16 / 9; }
.bw-karte--gross .bw-karte__text { padding: 1.1rem 1.25rem 1.35rem; }
.bw-karte--gross .bw-karte__titel { font-size: clamp(1.3rem, 1.05rem + 1.15vw, 1.9rem); }
.bw-karte--gross .bw-karte__kurz { font-size: .98rem; }

.bw-karte--klein {
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: stretch;
  box-shadow: var(--schatten-weich);
}
.bw-karte--klein .bw-karte__bild { height: 100%; }
.bw-karte--klein .bw-karte__bild img { aspect-ratio: 1 / 1; height: 100%; }
.bw-karte--klein .bw-karte__bild .bw-plakette {
  bottom: .4rem; right: .4rem; left: .4rem;
  padding: .3rem .5rem; font-size: .68rem;
}
.bw-karte--klein .bw-karte__bild .bw-plakette span { display: none; }
.bw-karte--klein .bw-karte__text { padding: .8rem .9rem .85rem; }
.bw-karte--klein .bw-karte__kurz { display: none; }
.bw-karte--klein .bw-karte__titel { font-size: 1rem; }
.bw-karte--klein .bw-karte__zeile { margin-bottom: .35rem; }

/* ---------- Randnotiz, Netz, Reiter ---------- */
.bw-randnotiz {
  background: var(--kammer-negativ);
  color: var(--papier-hell);
  border-left: 5px solid var(--tabak);
  border-radius: var(--radius-gross);
  padding: 1.4rem 1.6rem;
  margin: clamp(2rem, 4vw, 3rem) auto;
  box-shadow: var(--schatten-tief);
}
.bw-randnotiz h2 { margin: 0 0 .5rem; font: 700 1.15rem/1.25 var(--titel-police); color: var(--papier-hell); }
.bw-randnotiz p { margin: 0; color: rgba(253, 250, 242, .86); }

.bw-netz {
  background: var(--kammer-negativ);
  color: var(--papier-hell);
  border-radius: var(--radius-gross);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin: clamp(2rem, 5vw, 4rem) auto;
  box-shadow: var(--schatten-tief);
}
.bw-netz a { color: var(--tabak-hell); }
.bw-netz a:hover { color: var(--lampe); }
.bw-netz .bw-kammer__kopf { border-top-color: var(--tabak-hell); }
.bw-netz .bw-kammer__satz { color: rgba(253, 250, 242, .82); }
.bw-netz__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.bw-netz__posten {
  background: rgba(253, 250, 242, .08);
  border: 1px solid rgba(230, 180, 120, .38);
  border-radius: var(--radius-klein);
  padding: .9rem 1.05rem;
  min-width: 0;
}
.bw-netz__posten p { margin: 0; font-size: .93rem; }

.bw-reiter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.bw-reiter__stueck {
  display: inline-block; padding: .45rem .95rem;
  background: var(--papier-hell);
  border: 1px solid var(--filet);
  border-radius: var(--radius-pille);
  text-decoration: none; color: var(--tinte);
  font-size: .88rem; font-weight: 700;
  box-shadow: var(--schatten-weich);
}
.bw-reiter__stueck:hover { background: var(--kammer-ton); }
.bw-reiter__stueck--aktiv { background: var(--tabak); color: var(--papier-hell); border-color: var(--tabak); }

/* ---------- Artikel ---------- */
.bw-spur { padding: 1rem 0 .25rem; }
.bw-spur ol {
  display: flex; flex-wrap: wrap; gap: .35rem .75rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .84rem; color: var(--tinte-weich);
}
.bw-spur li + li::before { content: "/"; margin-right: .5rem; color: var(--filet); }
.bw-spur a { color: var(--tinte-weich); }

.bw-blatt { display: block; }
.bw-blatt__kopf { padding: clamp(1.5rem, 3vw, 2.5rem) 0 1rem; }
.bw-blatt__titel {
  font: 700 clamp(1.85rem, 1.4rem + 2vw, 3.05rem)/1.06 var(--titel-police);
  letter-spacing: -.022em;
  margin: .5rem 0 .9rem;
  text-wrap: balance;
  text-shadow:
    0 2px 0 rgba(253, 250, 242, .9),
    0 14px 30px rgba(163, 86, 28, .2);
}
.bw-blatt__chapeau { max-width: var(--messung); margin: 0 0 .6rem; font-size: 1.1rem; color: var(--tinte-weich); }
.bw-blatt__zeit { margin: 0; font-size: .84rem; color: var(--tinte-weich); }
.bw-blatt__bild {
  margin: 1.25rem 0 1.75rem; min-width: 0;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten-hell);
  background: var(--kammer-ton);
  position: relative;
}
.bw-blatt__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.bw-aufbau {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 15.5rem);
  align-items: start;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.bw-prosa { max-width: var(--messung); min-width: 0; }
.bw-prosa > p:first-of-type::first-letter {
  float: left;
  font: 700 3.5rem/.85 var(--titel-police);
  color: var(--tabak-tief);
  padding: .3rem .6rem 0 0;
}
.bw-prosa h2 {
  font: 700 clamp(1.3rem, 1.1rem + .9vw, 1.68rem)/1.2 var(--titel-police);
  letter-spacing: -.015em;
  margin: 2.2rem 0 .7rem;
  text-shadow: 0 1px 0 rgba(253, 250, 242, .85);
}
.bw-prosa h3 { font: 700 1.12rem/1.25 var(--titel-police); margin: 1.6rem 0 .5rem; }
.bw-prosa p { margin: 0 0 1.1rem; }
.bw-prosa a { font-weight: 700; }
.bw-prosa ul, .bw-prosa ol { padding-left: 1.3rem; }
.bw-prosa li { margin-bottom: .4rem; }

.bw-tableau {
  overflow-x: auto;
  max-width: 100%;
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-weich);
  margin: 1.2rem 0;
  background: var(--papier-hell);
}
.bw-tableau table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 30rem; }
.bw-tableau th, .bw-tableau td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--filet); }
.bw-tableau th { background: var(--kammer-ton); }

.bw-randleiste {
  position: sticky; top: 1.25rem;
  background: var(--papier-hell);
  border: 1px solid var(--filet-fein);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--schatten-weich);
  min-width: 0;
}
.bw-randleiste__kopf {
  margin: 0 0 .55rem;
  font-size: .76rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--tabak-tief);
}
.bw-randleiste__liste, .bw-randleiste__quellen { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .89rem; }
.bw-randleiste__liste li { margin-bottom: .4rem; }
.bw-randleiste__liste a { color: var(--tinte); }
.bw-randleiste__quellen a { color: var(--tabak-tief); }

/* ---------- Boden ---------- */
.bw-boden {
  background: var(--kammer-negativ);
  color: var(--papier-hell);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 8px solid var(--kammer-ton);
}
.bw-boden a { color: var(--tabak-hell); }
.bw-boden a:hover { color: var(--lampe); }
.bw-boden__spalten {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  padding: clamp(2rem, 3vw, 2.75rem) 0 1.5rem;
}
.bw-boden__spalte { min-width: 0; }
.bw-boden__spalte h2 {
  margin: 0 0 .6rem;
  font: 700 1rem/1.25 var(--titel-police);
  color: var(--papier-hell);
  border-top: 2px dotted var(--tabak-hell);
  padding-top: .6rem;
}
.bw-boden__spalte ul { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.bw-boden__spalte li { margin-bottom: .35rem; }
.bw-boden__spalte p { color: rgba(253, 250, 242, .82); }
.bw-boden__hinweis { font-size: .83rem; color: rgba(253, 250, 242, .72); }
.bw-boden__zeile {
  border-top: 1px solid rgba(230, 180, 120, .32);
  padding: .85rem 0 1.2rem;
  font-size: .82rem;
  color: rgba(253, 250, 242, .78);
}

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .bw-auftakt { grid-template-columns: minmax(0, 1fr); }
  .bw-aufbau { grid-template-columns: minmax(0, 1fr); }
  .bw-randleiste { position: static; }
  .bw-karte--gross .bw-karte__bild img { aspect-ratio: 16 / 9; }
}
@media (max-width: 34rem) {
  :root { --rahmen-breit: min(76rem, 100% - 1.5rem); }
  .bw-karte--klein { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .bw-karte--klein .bw-karte__titel { font-size: .95rem; }
  .bw-kopf__innen { flex-direction: column; align-items: flex-start; }
  .bw-karte__kurz { display: none; }
  .bw-prosa > p:first-of-type::first-letter { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .bw-kopf, .bw-wege, .bw-kopf__streifen, .bw-karte__bild, .bw-karte__zeit,
  .bw-plakette, .bw-randleiste { display: none; }
  .bw-auftakt, .bw-aufbau, .bw-buehne, .bw-register { grid-template-columns: minmax(0, 1fr); }
  body { background: #fff; color: #000; }
}