/* == Kombination: Aufbau + Marker aus richtung_b, Schrift/Farben/Aktenfoto aus Aktenlage ==
     Papier   #FBFBF9   Grund
     Tinte    #16171B   Text, dunkle Flaechen (Kontakt, Footer)
     Stempelrot #B42318 rationiert: Vermerk, Stempel, Fokus, rechtskraeftig-Status
     Archivgrau #47546B Nebentext, Kicker
     Linie    #D9DCE3   Hairlines
     Gruen    #1F6B4A   Status gewonnen/abgeschlossen
     Ocker    #8F6400   Status haengig/teils
     Marker   #F3E263   Textmarker, bewusst schmutzig gezogen
  ============================================================================== */

  .page, .page * { margin: 0; padding: 0; box-sizing: border-box; }

  .page {
    --papier: #FBFBF9;
    --tinte: #16171B;
    --stempelrot: #B42318;
    --archivgrau: #47546B;
    --linie: #D9DCE3;
    --gruen: #1F6B4A;
    --ocker: #8F6400;
    --marker: #F6F12A;
    --sans: 'Archivo', "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: 'IBM Plex Mono', "SF Mono", Menlo, Consolas, monospace;

    min-height: 100vh;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  .page ::selection { background: var(--marker); color: var(--tinte); }

  .wrap { max-width: 1040px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
  .lese { max-width: 66ch; }

  .label {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1.6;
  }

  /* -- Textmarker: von Hand gezogen, bewusst unsauber -------------------------- */

  .page mark {
    color: var(--tinte);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%2044'%20preserveAspectRatio='none'%3E%3Cfilter%20id='r'%20x='-15%'%20y='-40%'%20width='130%'%20height='180%'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05%200.3'%20numOctaves='2'%20seed='11'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='8'/%3E%3C/filter%3E%3Cg%20filter='url(%23r)'%3E%3Cpath%20d='M7%209Q70%205%20213%208L214%2035Q120%2040%206%2037Z'%20fill='%23F6F12A'%20fill-opacity='0.6'/%3E%3Cpath%20d='M5%2013Q90%208%20215%2011L213%2031Q100%2036%207%2034Z'%20fill='%23F6F12A'%20fill-opacity='0.55'/%3E%3Cpath%20d='M6%2010L40%209%2037%2037%205%2036Z'%20fill='%23DCD50E'%20fill-opacity='0.45'/%3E%3Cpath%20d='M198%2010L215%2011%20213%2033%20196%2032Z'%20fill='%23E8E20F'%20fill-opacity='0.4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 0;
    padding: 0.08em 0.42em 0.16em 0.32em;
    margin-inline: -0.16em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* -- Links -------------------------------------------------------------------- */

  .page a {
    color: var(--tinte);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 0.15s ease;
  }
  .page a:hover { color: var(--stempelrot); }
  .page a:focus-visible {
    outline: 2px solid var(--stempelrot);
    outline-offset: 3px;
    border-radius: 0;
  }

  /* -- Kopf ---------------------------------------------------------------------- */

  .kopf { border-bottom: 1px solid var(--linie); }

  .kopf-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-block: 1.4rem;
  }

  .page .wortmarke, .page .wortmarke:hover { text-decoration: none; color: var(--tinte); }
  .wortmarke-name {
    display: block;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
  }
  .nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.4rem; }
  .nav a {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    text-decoration: none;
    padding-block: 0.25rem;
  }
  .nav a:hover { color: var(--stempelrot); text-decoration: underline; text-underline-offset: 0.35em; }
  .sprache {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--archivgrau);
    padding-left: 1.25rem;
    border-left: 1px solid var(--linie);
  }
  .sprache .aktiv { color: var(--tinte); text-decoration: underline; text-underline-offset: 0.35em; }

  /* -- Hero mit Aktenfoto ---------------------------------------------------------- */

  .hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem); }

  .hero-raster {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }

  .hero-eyebrow { color: var(--archivgrau); margin-bottom: 1.75rem; }

  .hero h1 {
    font-weight: 600;
    font-size: clamp(1.8rem, 3.9vw, 2.9rem);
    line-height: 1.22;
    letter-spacing: -0.018em;
    max-width: 26ch;
    text-wrap: balance;
  }

  .hero-lead {
    margin-top: 2.25rem;
    font-size: clamp(1.15rem, 2vw, 1.3rem);
    line-height: 1.55;
    max-width: 56ch;
    color: var(--tinte);
  }

  .hero-links { display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem; margin-top: 2.5rem; }
  .hero-links a {
    font-family: var(--mono);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    text-underline-offset: 0.4em;
  }

  .aktenfoto {
    justify-self: end;
    background: #FFFFFF;
    border: 1px solid var(--linie);
    padding: 0.7rem 0.7rem 2.6rem;
    box-shadow: 0 12px 28px rgba(22, 23, 27, 0.10);
    transform: rotate(1.8deg);
    max-width: 300px;
    position: relative;
  }
  .aktenfoto img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(1) contrast(1.04);
  }
  .aktenfoto figcaption {
    position: absolute;
    left: 0.9rem;
    bottom: 0.8rem;
    font-family: var(--mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--archivgrau);
  }

  /* -- Mitteilung (amtlicher Vermerk) ------------------------------------------------ */

  .vermerk-band { padding-bottom: clamp(3rem, 7vw, 5rem); }

  .vermerk {
    border: 1px solid var(--linie);
    border-left: 3px solid var(--stempelrot);
    background: #FFFFFF;
    padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 1.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 2rem;
    align-items: start;
  }

  .vermerk .label { color: var(--stempelrot); margin-bottom: 0.7rem; }

  .vermerk h2 {
    font-weight: 600;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-width: 34ch;
    text-wrap: balance;
  }

  .vermerk p { margin-top: 0.75rem; color: var(--archivgrau); max-width: 60ch; }

  .vermerk-link {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    text-underline-offset: 0.4em;
  }

  .stempel {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--stempelrot);
    border: 2px solid currentColor;
    border-radius: 3px;
    padding: 0.45em 0.8em;
    transform: rotate(-3deg);
    white-space: nowrap;
    align-self: center;
  }

  /* -- Sektionen ------------------------------------------------------------------------ */

  .sektion { border-top: 1px solid var(--linie); padding-block: clamp(3.5rem, 8vw, 6rem); }
  .sektion-kopf { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
  .sektion-kicker { color: var(--archivgrau); margin-bottom: 1.1rem; }

  .sektion h2 {
    font-weight: 700;
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 24ch;
    text-wrap: balance;
  }

  .sektion-einleitung { margin-top: 1.6rem; font-size: 1.14rem; line-height: 1.6; max-width: 62ch; }

  /* -- Kontext ----------------------------------------------------------------------------- */

  .kernsatz {
    font-weight: 600;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    max-width: 30ch;
    text-wrap: balance;
  }

  .kontext-text { margin-top: 2.5rem; display: grid; gap: 1.4rem; }
  .kontext-text p { max-width: 66ch; }
  .kontext-text h3 {
    margin-top: 2.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--linie);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tinte);
  }

  /* -- Faelle -------------------------------------------------------------------------------- */

  .faelle-liste { list-style: none; border-top: 1px solid var(--linie); }

  .fall { border-bottom: 1px solid var(--linie); padding-block: 2.25rem; }

  .fall-kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 2rem;
  }

  .fall h3 { font-weight: 600; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -0.015em; line-height: 1.15; }
  .fall h3 a { text-decoration: none; }
  .fall h3 a:hover { color: var(--stempelrot); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }

  .fall-nr {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--archivgrau);
    letter-spacing: 0.09em;
  }

  .fall-tags {
    margin-top: 0.7rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--archivgrau);
  }

  .fall-stand {
    margin-top: 0.9rem;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--archivgrau);
    max-width: 78ch;
    font-variant-numeric: tabular-nums;
  }
  .fall-stand strong { font-weight: 500; color: var(--tinte); }

  .fall-status + .fall-status { margin-left: 1.1rem; transform: rotate(1.4deg); }
  .fall-status {
    display: inline-block;
    margin-top: 1.1rem;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    padding: 0.45em 0.75em;
    border: 2px solid currentColor;
    border-radius: 3px;
    transform: rotate(-2deg);
  }
  .status-rot { color: var(--stempelrot); }
  .status-gruen { color: var(--gruen); }
  .status-ocker { color: var(--ocker); }

  .fall-text { margin-top: 1.1rem; max-width: 68ch; }

  .fall-akten {
    margin-top: 1.15rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    color: var(--archivgrau);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
  }
  .fall-akten a {
    color: var(--archivgrau);
    text-decoration-thickness: 1px;
    text-decoration-color: var(--linie);
    text-underline-offset: 0.3em;
  }
  .fall-akten a:hover { color: var(--stempelrot); text-decoration-color: currentColor; }

  /* -- Chronologie / Dossier ------------------------------------------------------------------- */

  .pullquote { max-width: none; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
  .pullquote p {
    max-width: 26ch;
    font-weight: 500;
    font-size: clamp(1.7rem, 3.8vw, 2.7rem);
    line-height: 1.22;
    letter-spacing: -0.015em;
  }
  .pullquote footer { margin-top: 1.4rem; }
  .pullquote cite {
    font-style: normal;
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--archivgrau);
    font-variant-numeric: tabular-nums;
  }

  .chronologie { list-style: none; }

  .chrono-eintrag {
    display: grid;
    grid-template-columns: minmax(4rem, 5.5rem) 1fr;
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  .chrono-jahr {
    font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-top: 0.1rem;
  }

  .chrono-text {
    border-left: 2px solid var(--linie);
    padding-left: clamp(1.25rem, 3vw, 2rem);
    padding-bottom: 2.6rem;
    max-width: 60ch;
  }
  .chrono-eintrag:last-child .chrono-text { padding-bottom: 0.5rem; }

  .chrono-titel { font-weight: 600; font-size: 1.12rem; line-height: 1.35; }
  .chrono-titel a { text-decoration: none; }
  .chrono-titel a:hover { color: var(--stempelrot); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .chrono-text p { margin-top: 0.45rem; font-size: 1rem; line-height: 1.6; color: var(--archivgrau); }
  .chrono-doku {
    margin-top: 0.5rem;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
  .chrono-doku a {
    color: var(--archivgrau);
    text-decoration-thickness: 1px;
    text-decoration-color: var(--linie);
    text-underline-offset: 0.3em;
  }
  .chrono-doku a:hover { color: var(--stempelrot); text-decoration-color: currentColor; }

  /* -- Buch ---------------------------------------------------------------------------------------- */

  .buch-raster {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
  }

  .buch-cover {
    background: #FFFFFF;
    border: 1px solid var(--linie);
    padding: 0.55rem;
    box-shadow: 0 10px 22px rgba(22, 23, 27, 0.10);
    transform: rotate(-1.4deg);
    width: min(190px, 40vw);
  }
  .buch-cover img { display: block; width: 100%; height: auto; }

  .buch-meta {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--archivgrau);
    margin-bottom: 0.9rem;
  }
  .buch-titel { font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.1; }
  .buch-untertitel { margin-top: 0.5rem; font-size: 1.1rem; color: var(--archivgrau); }
  .buch-text { margin-top: 1.4rem; max-width: 58ch; }
  .buch-cta {
    display: inline-block;
    margin-top: 1.5rem;
    font-family: var(--mono);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    text-underline-offset: 0.4em;
  }

  /* -- Rezeption -------------------------------------------------------------------------------------- */

  .stimmen { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }
  .stimme p {
    font-weight: 500;
    font-size: clamp(1.4rem, 3.2vw, 2.2rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    max-width: 28ch;
  }
  .stimme footer { margin-top: 0.8rem; }
  .stimme cite {
    font-style: normal;
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--archivgrau);
  }
  .stimme:nth-child(2) { margin-left: clamp(0rem, 8vw, 6rem); }
  .stimme:nth-child(3) { margin-left: clamp(0rem, 4vw, 3rem); }

  .medienliste {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    border-top: 1px solid var(--linie);
    padding-top: 2rem;
    columns: 2;
    column-gap: 3rem;
  }
  .medienliste li {
    list-style: none;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 2.1;
    break-inside: avoid;
  }
  .medienliste .medien-label { color: var(--archivgrau); margin-bottom: 0.6rem; }
  .medienliste a { color: var(--archivgrau); text-underline-offset: 0.3em; }
  .medienliste a:hover { color: var(--stempelrot); }

  /* -- Fakten -------------------------------------------------------------------------------------------- */

  .faq { border-top: 1px solid var(--linie); }
  .faq-item { border-bottom: 1px solid var(--linie); }
  .faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding-block: 1.15rem;
    font-weight: 600;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: "+";
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--archivgrau);
    flex-shrink: 0;
  }
  .faq-item[open] summary::after { content: "−"; }
  .faq-item summary:hover { color: var(--stempelrot); }
  .faq-item summary:focus-visible { outline: 2px solid var(--stempelrot); outline-offset: 3px; }
  .faq-antwort { padding-bottom: 1.4rem; max-width: 68ch; display: grid; gap: 0.9rem; }

  /* -- Glossar-Hinweis -------------------------------------------------------------------------------------- */

  .glossar-hinweis { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
  .glossar-hinweis .label { color: var(--archivgrau); margin-bottom: 0.8rem; }
  .glossar-hinweis p { max-width: 66ch; }

  /* -- Kontakt: dunkle Flaeche -------------------------------------------------------------------------------- */

  .kontakt { background: var(--tinte); color: var(--papier); border-top: none; }
  .kontakt .sektion-kicker { color: rgba(251, 251, 249, 0.6); }
  .kontakt h2 { color: var(--papier); }
  .kontakt-intro { margin-top: 1.4rem; color: rgba(251, 251, 249, 0.8); max-width: 50ch; }

  .kontakt-spalten {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem clamp(2rem, 4vw, 3.5rem);
    margin-block: clamp(2.5rem, 5vw, 3.5rem) clamp(2.75rem, 6vw, 4rem);
  }
  @media (min-width: 800px) { .kontakt-spalten { grid-template-columns: repeat(3, 1fr); } }

  .kontakt-spalte h3 {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--papier);
    border-bottom: 1px solid rgba(251, 251, 249, 0.25);
    padding-bottom: 0.7rem;
    margin-bottom: 0.9rem;
  }
  .kontakt-spalte p { font-size: 0.98rem; color: rgba(251, 251, 249, 0.82); max-width: 38ch; }

  .kontakt-mail { font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.5rem); letter-spacing: -0.015em; overflow-wrap: anywhere; }
  .kontakt-mail a {
    color: var(--papier);
    text-decoration: none;
    background-image: linear-gradient(100deg,
      rgba(246, 241, 26, 0) 1%,
      rgba(246, 241, 26, 0.6) 5%,
      rgba(246, 241, 26, 0.5) 55%,
      rgba(246, 241, 26, 0.6) 95%,
      rgba(246, 241, 26, 0) 99%);
    background-repeat: no-repeat;
    background-size: 100% 0.32em;
    background-position: 0 94%;
    padding-bottom: 0.12em;
    transition: background-size 0.15s ease;
  }
  .kontakt-mail a:hover { background-size: 100% 0.5em; color: var(--papier); }
  .kontakt-mail a:focus-visible { outline: 2px solid var(--marker); outline-offset: 4px; }

  /* -- Footer ----------------------------------------------------------------------------------------------------- */

  .fuss { background: var(--tinte); color: rgba(251, 251, 249, 0.72); }
  .fuss-inhalt {
    border-top: 1px solid rgba(251, 251, 249, 0.18);
    padding-block: 2.1rem 2.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.9rem 2rem;
  }
  .fuss .label { color: rgba(251, 251, 249, 0.72); }
  .fuss a { color: rgba(251, 251, 249, 0.9); text-underline-offset: 0.3em; }
  .fuss a:hover { color: var(--marker); }
  .fuss a:focus-visible { outline-color: var(--marker); }

  /* -- Responsiv ------------------------------------------------------------------------------------------------------ */

  @media (max-width: 860px) {
    .hero-raster { grid-template-columns: 1fr; }
    .aktenfoto { justify-self: start; margin-top: 1rem; transform: rotate(1.2deg); }
    .vermerk { grid-template-columns: 1fr; }
    .stempel { justify-self: start; align-self: start; }
  }

  @media (max-width: 640px) {
    .kopf-zeile { flex-direction: column; align-items: flex-start; }
    .sprache { padding-left: 0; border-left: none; }
    .medienliste { columns: 1; }
    .chrono-eintrag { grid-template-columns: minmax(3.2rem, 4rem) 1fr; }
    .fuss-inhalt { flex-direction: column; }
  }

  /* -- Bewegung reduzieren ---------------------------------------------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .page *, .page *::before, .page *::after {
      transition: none !important;
      animation: none !important;
      scroll-behavior: auto !important;
    }
  }

  /* -- Persoenliche Mitteilung (Volltext) ------------------------------------ */

  .statement .sektion-kopf { margin-bottom: 2rem; }
  .statement-text { display: grid; gap: 1.3rem; max-width: 66ch; }
  .statement-signatur { margin-top: 1.8rem; font-weight: 600; }
  .statement-aktionen {
    margin-top: 1.6rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
  }
  .statement-aktionen a { text-underline-offset: 0.35em; }

  /* -- Skip-Link ---------------------------------------------------------------- */

  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tinte);
    color: var(--papier);
    padding: 0.6rem 1rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    z-index: 10;
  }
  .skip-link:focus-visible { left: 0; }

  /* == Falldossier- und Unterseiten-Komponenten ================================ */

  .breadcrumb {
    margin-bottom: 2rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--archivgrau);
  }
  .breadcrumb a { color: var(--archivgrau); text-underline-offset: 0.3em; }
  .breadcrumb a:hover { color: var(--stempelrot); }

  .hero-fall { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4rem); }
  .hero-fall h1 {
    font-weight: 600;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-width: 22ch;
    text-wrap: balance;
  }
  .hero-fall .fall-tags { margin-top: 1.1rem; }
  .hero-fall .fall-stand { max-width: 68ch; }
  .hero-fall .hero-lead { margin-top: 1.8rem; font-size: clamp(1.08rem, 1.8vw, 1.2rem); }

  .doku-liste { list-style: none; border-top: 1px solid var(--linie); }
  .doku-liste li {
    border-bottom: 1px solid var(--linie);
    padding-block: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 1.4rem;
  }
  .doku-datum {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--archivgrau);
    min-width: 7.5ch;
    font-variant-numeric: tabular-nums;
  }
  .doku-liste a { font-size: 0.95rem; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: var(--linie); }
  .doku-liste a:hover { text-decoration-color: currentColor; }
  .doku-notiz { font-size: 0.85rem; color: var(--archivgrau); flex-basis: 100%; margin-left: calc(7.5ch + 1.4rem); }

  .doku-gruppe { margin-top: 2.5rem; }
  .doku-gruppe > h3, .inhalt-block > h3 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 1.1rem;
  }
  .inhalt-block { margin-top: 2.2rem; }
  .inhalt-block p { max-width: 66ch; }
  .inhalt-block p + p { margin-top: 1.3rem; }

  .video-einbettung { margin-top: 2rem; max-width: 860px; }
  .video-einbettung video, .video-einbettung iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--linie);
    background: var(--tinte);
  }
  .video-caption {
    margin-top: 0.6rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--archivgrau);
  }

  .zitat-block {
    border-left: 3px solid var(--stempelrot);
    background: #FFFFFF;
    border-top: 1px solid var(--linie);
    border-right: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
    margin-block: 2rem;
    max-width: 760px;
  }
  .zitat-block p { font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4; }
  .zitat-block cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--archivgrau);
  }