/* Lost Places Wuppertal, Theme werkarchiv. Werte aus 74 - Brands und Styles/Lost Places Wuppertal
   (Farbpalette.md, Typografie.md, Brand-System Abschnitt 13). Keine eigenen Farben; Schatten und Befestigungslöcher
   sind Schwarz mit Deckkraft wie im Theme werkarchiv des Skills design-system und als --schatten benannt.
   Design: docs/design/Seiten/DESIGN-20260929-lost-places-wuppertal.md, Kritik .impeccable/critique/ vom 2026-09-29. */

@font-face { font-family: "Big Shoulders"; src: url("schriften/BigShoulders-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("schriften/BigShoulders-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Literata"; src: url("schriften/Literata-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Literata"; src: url("schriften/Literata-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Literata"; src: url("schriften/Literata-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("schriften/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("schriften/JetBrainsMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Alte DIN 1451"; src: url("schriften/AlteDIN1451Mittelschrift-Regular.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --russ: #131415;
  --russ2: #1B1D1F;
  --schiefer: #25282B;
  --linie: #383C40;
  --bleiche: #E7E4DE;
  --stahl-hell: #B3B8BC;
  --stahl: #8A9095;
  --rot: #A31B2E;
  --rot-tief: #7E1424;
  --licht: #DC5C6D;
  --papier: #F0EDE7;
  --schatten: rgb(0 0 0 / 0.85);
  --loch: rgb(0 0 0 / 0.6);

  --titel: "Big Shoulders", "Barlow Condensed", "Arial Narrow", sans-serif;
  --lesen: "Literata", Georgia, serif;
  --daten: "JetBrains Mono", ui-monospace, monospace;
  --schild: "Alte DIN 1451", "Big Shoulders", sans-serif;

  --rand: clamp(1.25rem, 4vw, 3rem);
  --breit: 76rem;
  --mass: 68ch;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Sheddach-Sägezahn: ein Zahn 48 x 18 px, steigt auf 18 Prozent seiner Breite senkrecht an und fällt flach ab. */
  --zahn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18' viewBox='0 0 48 18'%3E%3Cpolyline points='0,17 8.64,1 48,17' fill='none' stroke='%23A31B2E' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--russ); color: var(--bleiche); scrollbar-color: var(--linie) var(--russ); scrollbar-width: thin; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.125rem/1.7 var(--lesen); font-variant-numeric: lining-nums; }
::selection { background: var(--rot); color: var(--papier); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--licht); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--papier); text-decoration-color: var(--rot); }
:focus-visible { outline: 2px solid var(--licht); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--titel); color: var(--bleiche); text-wrap: balance; margin: 0; }

.sprung { position: absolute; left: -9999px; top: 0; background: var(--licht); color: var(--russ); padding: 0.6rem 1rem; z-index: 20; font-weight: 600; }
.sprung:focus { left: 1rem; top: 1rem; }
.sprung:hover { color: var(--russ); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf: Schiefer als Kopfleiste. Klickflächen 44 px hoch. Auf dem Schiefer steht Krapplicht erst ab 24 px
   (Farbpalette), deshalb markieren Hover und aktueller Abschnitt mit Unterstrich in Türkischrot statt mit Farbe. */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 0.35rem var(--rand); background: var(--schiefer); border-bottom: 1px solid var(--linie); }
.kopf__marke { display: flex; align-items: center; min-height: 44px; }
.kopf__wortmarke { width: clamp(9.5rem, 22vw, 12.5rem); }
.kopf__signet { display: none; width: 2.5rem; height: 2.5rem; }
.seite-start .kopf__wortmarke { display: none; }
.seite-start .kopf__signet { display: block; }
.kopf__nav { display: flex; align-items: center; gap: clamp(0.5rem, 2.5vw, 1.5rem); font: 600 0.75rem/1.4 var(--daten); letter-spacing: 0.16em; text-transform: uppercase; }
.kopf__nav a { color: var(--bleiche); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.2rem; }
.kopf__nav a:hover, .kopf__nav a[aria-current] { color: var(--papier); text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.kopf__sprache { display: inline-flex; border: 1px solid var(--linie); }
.kopf__sprache > * { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 42px; padding: 0 0.5rem; }
.kopf__nav .kopf__sprache a { text-decoration: none; }
.kopf__sprache [aria-current] { background: var(--linie); color: var(--papier); }
.kopf__sprache .aus { color: var(--stahl); }

/* Emaille-Schild nach Theme werkarchiv: Blech, doppelter Rand, zwei Löcher, 6 px Rundung als einzige weiche Kante.
   Der enge Innenabstand ist Markenmaß (werkarchiv.py: 0,42 em mal 0,62 em). Alte DIN nie unter 11 px. */
.schild { --grund: var(--rot); --schrift: var(--papier); --gr: 0.8125rem;
  display: inline-flex; align-items: center; gap: calc(var(--gr) * 0.7); padding: calc(var(--gr) * 0.42) calc(var(--gr) * 0.62);
  background: var(--grund); color: var(--schrift); border-radius: 6px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--schrift) 85%, transparent), inset 0 0 0 4px var(--grund),
              inset 0 0 0 5px color-mix(in srgb, var(--schrift) 40%, transparent), 0 2px 0 var(--rot-tief);
  font: 700 var(--gr)/1 var(--schild); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.schild--schiefer { --grund: var(--schiefer); --schrift: var(--bleiche); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bleiche) 55%, transparent), inset 0 0 0 4px var(--schiefer), inset 0 0 0 5px color-mix(in srgb, var(--bleiche) 25%, transparent), 0 2px 0 var(--schatten); }
.schild--klein { --gr: 0.6875rem; }
.schild__loch { width: 0.3em; height: 0.3em; min-width: 4px; min-height: 4px; border-radius: 50%; background: var(--loch); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--schrift) 35%, transparent); flex: none; }
.schild-link { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.schild-link .schild { transition: transform 300ms var(--ease); }
.schild-link:hover .schild, .schild-link:focus-visible .schild { transform: translateY(-2px); }

/* Sheddach-Sägezahn in Türkischrot: Linie, nie Text. Festes Muster statt gestauchter Grafik. */
.saegezahn { height: 18px; background: var(--zahn) repeat-x left bottom / 48px 18px; }
.saegezahn--breit { width: calc(100% - 2 * var(--rand)); max-width: calc(var(--breit) - 2 * var(--rand)); margin: 0 auto; }
.saegezahn--spalte { margin: 0 0 2.25rem; }

/* Auftakt: Wortmarke und Claim, daneben die Schildertafel. */
.auftakt { max-width: var(--breit); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) var(--rand) clamp(2rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .auftakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.auftakt__titel img { width: min(100%, 34rem); }
.auftakt__claim { font: 800 clamp(2.4rem, 5.6vw, 4.2rem)/0.98 var(--titel); text-transform: uppercase; letter-spacing: -0.005em; margin: 1.75rem 0 0; color: var(--bleiche); }
.auftakt__claim-andere { font: italic 400 1.3125rem/1.5 var(--lesen); color: var(--stahl-hell); margin: 0.5rem 0 0; }
.auftakt__einleitung { max-width: 34rem; margin: 1.5rem 0 0; color: var(--bleiche); }
.auftakt__schilder { display: flex; flex-wrap: wrap; gap: 0 0.9rem; margin: 1.25rem 0 0; }
.auftakt__foto { margin: 0; }
.auftakt__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--linie); }
.auftakt__foto figcaption { font: italic 400 0.875rem/1.5 var(--lesen); color: var(--stahl-hell); margin-top: 0.6rem; }

/* Die Schildertafel: ein Brett am Werkstor. Jede Marke hängt schief, mit ihrem Ort auf einem Anhängezettel darunter.
   Am Handy eine Spalte, damit die Gattung nie unter 11 px fallen muss (Alte DIN, Typografie.md). */
.tafel { position: relative; background: var(--russ2); border: 1px solid var(--linie);
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); }
.tafel::before, .tafel::after { content: ""; position: absolute; top: 0.75rem; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--linie); box-shadow: inset 0 1px 0 rgb(231 228 222 / 0.12), 0 1px 0 var(--schatten); }
.tafel::before { left: 0.75rem; } .tafel::after { right: 0.75rem; }
.tafel__marken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
@media (min-width: 30rem) { .tafel__marken { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 1.6rem 1.1rem; } }
.tafel--unten { max-width: calc(var(--breit) - 2 * var(--rand)); margin: 2rem auto 0; }
.tafel__eintrag { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; text-decoration: none; color: var(--bleiche); }

.marke { --neigung: 0deg; position: relative; display: inline-grid; grid-template-columns: auto auto auto; grid-template-areas: "l n r" "l g r"; align-items: center; column-gap: 0.7rem; row-gap: 0.3rem;
  padding: 0.7rem 0.8rem; background: var(--rot); color: var(--papier); border-radius: 6px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--papier) 85%, transparent), inset 0 0 0 5px var(--rot),
              inset 0 0 0 6px color-mix(in srgb, var(--papier) 40%, transparent), 0 2px 0 var(--rot-tief), 0 10px 18px -12px var(--schatten);
  transform: rotate(var(--neigung)); transform-origin: 50% 0; transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.marke > .marke__loch:first-child { grid-area: l; } .marke > .marke__loch:last-child { grid-area: r; }
.marke__loch { width: 7px; height: 7px; border-radius: 50%; background: var(--loch); box-shadow: inset 0 1px 0 rgb(240 237 231 / 0.35); }
.marke__nummer { grid-area: n; font: 700 1.375rem/1 var(--schild); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.marke__gattung { grid-area: g; font: 700 0.6875rem/1 var(--schild); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; white-space: nowrap; }
.tafel__marken li:nth-child(4n+1) .marke { --neigung: -1.2deg; }
.tafel__marken li:nth-child(4n+2) .marke { --neigung: 0.6deg; }
.tafel__marken li:nth-child(4n+3) .marke { --neigung: -0.4deg; }
.tafel__marken li:nth-child(4n+4) .marke { --neigung: 1.4deg; }
.tafel__eintrag:hover .marke, .tafel__eintrag:focus-visible .marke { --neigung: 0deg; transform: rotate(0deg) translateY(-2px);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--papier) 85%, transparent), inset 0 0 0 5px var(--rot),
              inset 0 0 0 6px color-mix(in srgb, var(--papier) 40%, transparent), 0 2px 0 var(--rot-tief), 0 16px 24px -14px var(--schatten); }

/* Anhängezettel: der Ort in Big Shoulders (nie unter 20 px), an einem Faden unter dem Blech. */
.zettel { position: relative; display: inline-block; max-width: 100%; padding: 0.3rem 0.6rem 0.35rem; background: var(--schiefer); border: 1px solid var(--linie);
  font: 600 1.25rem/1.15 var(--titel); color: var(--bleiche); text-wrap: balance; }
.zettel::first-letter { text-transform: uppercase; }
.zettel { margin: 0.8rem 0 0 1.4rem; max-width: calc(100% - 1.4rem); }
.zettel::before { content: ""; position: absolute; left: 0.9rem; top: calc(-0.8rem - 1px); width: 1px; height: 0.8rem; background: var(--stahl); }
.tafel__eintrag:hover .zettel, .tafel__eintrag:focus-visible .zettel { color: var(--papier); border-color: var(--stahl); }

.marke--gross .marke__nummer { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.marke--gross .marke__gattung { font-size: 0.75rem; }
.marke--gross { padding: 0.9rem 1.1rem; }
.marke--leer { background: var(--schiefer); --neigung: -2deg; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bleiche) 55%, transparent), inset 0 0 0 5px var(--schiefer), 0 2px 0 var(--schatten); color: var(--bleiche); }

/* Abschnitte */
.abschnittskopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 2rem; }
.abschnittskopf h2 { font-weight: 800; font-size: clamp(2rem, 4vw, 2.375rem); line-height: 1.05; text-transform: uppercase; }
.abschnittskopf p { margin: 0; color: var(--stahl); font-size: 1rem; max-width: 40rem; }

/* Das Inventarbuch: Zeilen, keine Kacheln. Links die Nummer, rechts der Eintrag. */
.inventar { max-width: var(--breit); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--rand); }
.inventar__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.posten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 48rem) { .posten { grid-template-columns: 9.5rem minmax(0, 1fr); } .posten--bild { grid-template-columns: 9.5rem 16rem minmax(0, 1fr); } }
.posten__nummer { margin: 0.35rem 0 0; display: flex; gap: 0.75rem; font: 600 0.75rem/1.4 var(--daten); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stahl-hell); font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .posten__nummer { flex-direction: column; gap: 0.2rem; } }
.posten__jahr { color: var(--stahl); }
.posten__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--linie); }
.posten__titel { font-weight: 600; font-size: 1.75rem; line-height: 1.15; }
.posten__titel::first-letter { text-transform: uppercase; }
.posten__titel a { color: var(--bleiche); text-decoration: none; }
.posten__titel a:hover { color: var(--licht); }
.posten__anriss { margin: 0.6rem 0 0; max-width: var(--mass); color: var(--bleiche); }
.posten__daten { margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font: 400 0.75rem/1.4 var(--daten); color: var(--stahl); }
.posten:hover .posten__titel a { text-decoration: underline; text-decoration-color: var(--rot); }

/* Über */
.ueber { max-width: var(--breit); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--rand) clamp(3.5rem, 8vw, 6rem); display: grid; gap: 1.5rem 3rem; }
@media (min-width: 60rem) { .ueber { grid-template-columns: 18rem minmax(0, 1fr); } }
.ueber h2 { font-weight: 800; font-size: clamp(2rem, 4vw, 2.375rem); line-height: 1.05; text-transform: uppercase; }
.ueber__text { max-width: var(--mass); }
.ueber__text p { margin: 0 0 1.1rem; }
.ueber__text p:last-child { color: var(--stahl-hell); font-style: italic; }

/* Eintrag als Karteikarte: Hauptspalte links, Karte rechts mitlaufend. Am Handy steht die Karte über dem Text. */
.eintrag { max-width: var(--breit); margin: 0 auto; padding: clamp(1.25rem, 4vw, 3rem) var(--rand) clamp(3rem, 7vw, 5rem); }
.eintrag__zurueck { margin: 0 0 1rem; font: 600 0.75rem/1.4 var(--daten); letter-spacing: 0.16em; text-transform: uppercase; }
.eintrag__zurueck a { display: inline-flex; align-items: center; min-height: 44px; }
.eintrag__raster { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "karte" "haupt"; gap: 1.75rem; }
@media (min-width: 64rem) {
  .eintrag__raster { grid-template-columns: minmax(0, 46rem) minmax(15rem, 18rem); grid-template-areas: "kopf karte" "haupt karte"; column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 2rem; align-items: start; justify-content: space-between; }
  .karte { position: sticky; top: 1.5rem; }
}
.eintrag__kopf { grid-area: kopf; }
.eintrag__titel { font-weight: 800; font-size: clamp(2.3rem, 6vw, 3.2rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.005em; }
.eintrag__sprachhinweis { margin: 1rem 0 0; max-width: var(--mass); font: italic 400 1rem/1.5 var(--lesen); color: var(--stahl-hell); }

.karte { grid-area: karte; background: var(--russ2); border: 1px solid var(--linie); padding: 1.25rem 1.25rem 1.1rem; }
.karte__marke { margin: 0 0 1.25rem; }
.karte__marke .marke { --neigung: -0.8deg; }
.karte__daten { margin: 0; display: grid; gap: 0.7rem; }
.karte__daten div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; border-top: 1px solid var(--linie); padding-top: 0.6rem; }
.karte__daten dt { font: 600 0.75rem/1.4 var(--daten); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stahl); }
.karte__daten dd { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--bleiche); }
.karte__erstquelle { margin: 1.1rem 0 0; font-size: 1rem; }
.karte__erstquelle a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }

.eintrag__hauptspalte { grid-area: haupt; min-width: 0; }
.eintrag__titelbild { margin: 0 0 2.5rem; }
.eintrag__titelbild img { width: 100%; border: 1px solid var(--linie); }

.eintrag__text { max-width: var(--mass); }
.eintrag__text > * + * { margin-top: 1.1em; }
.eintrag__text p { margin: 0; }
.eintrag__text p + p { margin-top: 1.1em; }
.eintrag__text h2, .eintrag__text h3, .eintrag__text h4 { font-weight: 600; font-size: 1.75rem; line-height: 1.15; margin-top: 2.4rem; }
.eintrag__text h3 { font-size: 1.5rem; }
/* Altbeiträge auf HZA setzen den ersten Absatz als Überschrift. Als erstes Element im Text ist er Vorspann
   (Typografie.md, Stufe lg: Literata Kursiv 21 px), keine Zwischenüberschrift. */
.eintrag__text > h2:first-child, .eintrag__text > h3:first-child, .eintrag__text > h4:first-child {
  font: italic 400 1.3125rem/1.5 var(--lesen); color: var(--bleiche); margin-top: 0; text-wrap: pretty; }
.eintrag__text > :first-child + * { margin-top: 1.4em; }
.eintrag__text h2 + *, .eintrag__text h3 + * { margin-top: 0.8rem; }
.eintrag__text ul, .eintrag__text ol { padding-left: 1.3rem; }
.eintrag__text li + li { margin-top: 0.5em; }
.eintrag__text li::marker { color: var(--rot); }
.eintrag__text blockquote { margin-inline: 0; padding-left: 1.2rem; border-left: 1px solid var(--rot); font-style: italic; color: var(--stahl-hell); }
.eintrag__text figure { margin: 2rem 0; }
.eintrag__text img { border: 1px solid var(--linie); }
.eintrag__text figcaption { font: italic 400 0.875rem/1.5 var(--lesen); color: var(--stahl-hell); margin-top: 0.5rem; }
.eintrag__text table { border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.eintrag__text th, .eintrag__text td { border-bottom: 1px solid var(--linie); padding: 0.4rem 0.8rem 0.4rem 0; text-align: left; }
.eintrag__text hr { border: 0; border-top: 1px solid var(--linie); }
.eintrag__text strong { font-weight: 600; color: var(--papier); }
/* Links, die das Archiv verlassen, tragen einen gezeichneten Pfeil nach rechts oben. */
.eintrag__text a[href^="http"]::after { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.2em; vertical-align: 0.05em;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1 9' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1 9' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain; }

.eintrag__ende { margin: 2.75rem 0 0; }

.blaettern { max-width: var(--mass); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--linie); padding-top: 1.25rem; }
.blaettern a { display: grid; gap: 0.3rem; text-decoration: none; color: var(--bleiche); min-height: 44px; }
.blaettern span { font: 600 0.75rem/1.4 var(--daten); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stahl); }
.blaettern strong { display: block; font: 600 1.3125rem/1.2 var(--titel); }
.blaettern strong::first-letter { text-transform: uppercase; }
.blaettern em { font: 400 0.75rem/1.4 var(--daten); font-style: normal; color: var(--stahl); }
.blaettern a:hover strong { color: var(--licht); }
.blaettern__spaeter { text-align: right; justify-items: end; }

.erstquelle { max-width: var(--mass); margin: 2.5rem 0 0; padding: 1.25rem 1.4rem; background: var(--russ2); border: 1px solid var(--linie); }
.erstquelle h2 { font-weight: 600; font-size: 1.3125rem; line-height: 1.2; }
.erstquelle p { margin: 0.6rem 0 0; font-size: 1rem; }
.erstquelle__link { font-weight: 600; }

/* Recht und Fehler */
.recht { max-width: 52rem; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) var(--rand) clamp(3rem, 7vw, 5rem); }
.recht__schild { margin: 0 0 1.25rem; }
.recht h1 { font-weight: 800; font-size: clamp(2.3rem, 6vw, 3.2rem); line-height: 1; text-transform: uppercase; margin-bottom: 2rem; }
.recht__text { max-width: var(--mass); }
.recht__text h2 { font-weight: 600; font-size: 1.5rem; line-height: 1.15; margin: 2.2rem 0 0.7rem; }
.recht__text h3 { font-weight: 600; font-size: 1.25rem; margin: 1.6rem 0 0.5rem; }
.recht__text p, .recht__text ul { margin: 0 0 1em; }

.fehler { max-width: var(--breit); margin: 0 auto; padding: clamp(3rem, 9vw, 7rem) var(--rand); display: grid; gap: 2.5rem; }
.fehler__marke { margin: 0; }
.fehler__sprachen { display: grid; gap: 2rem 3rem; align-items: start; }
@media (min-width: 48rem) { .fehler__sprachen { grid-template-columns: 1fr 1fr; } }
.fehler h1, .fehler__titel-en { font: 800 clamp(1.9rem, 4vw, 2.375rem)/1.05 var(--titel); text-transform: uppercase; margin: 0 0 0.8rem; color: var(--bleiche); }
.fehler p { margin: 0 0 0.6rem; }

/* Fuß */
.fuss { background: var(--russ2); border-top: 1px solid var(--linie); padding: 2.5rem var(--rand) 1.5rem; }
.fuss__zeile { max-width: var(--breit); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem 1.75rem; align-items: start; }
@media (min-width: 48rem) { .fuss__zeile { grid-template-columns: auto minmax(0, 1fr) auto; } }
.fuss__signet { width: 3.5rem; height: 3.5rem; }
.fuss__text p { margin: 0 0 0.35rem; font-size: 0.875rem; color: var(--stahl-hell); }
.fuss__text .fuss__claim { font: 800 1.3125rem/1.1 var(--titel); text-transform: uppercase; color: var(--bleiche); }
.fuss__text .fuss__region { font: 600 0.75rem/1.4 var(--daten); letter-spacing: 0.16em; text-transform: uppercase; }
.fuss__recht { display: flex; gap: 1.25rem; font: 600 0.75rem/1.4 var(--daten); letter-spacing: 0.16em; text-transform: uppercase; grid-column: 1 / -1; }
.fuss__recht a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 48rem) { .fuss__recht { grid-column: auto; } }
.fuss__stand { max-width: var(--breit); margin: 1.75rem auto 0; font: 400 0.75rem/1.4 var(--daten); color: var(--stahl); }

@media (prefers-reduced-motion: reduce) {
  .marke, .schild-link .schild { transition: none; }
}