/* Kapitel 22 – stabile Medien-Skalierung ohne :has()
   Voraussetzungen:
   - Datei liegt unter public/styles/kapitel-22-media.css
   - Link oben in index.md: <link rel="stylesheet" href="/styles/kapitel-22-media.css">
   - Optionaler Wrapper <div id="kapitel-22-root"> ... </div> erhöht Spezifität.
*/

/* 0. OPTIONALER WRAPPER: Wenn du ihn setzt, gelten diese Regeln gezielt */
#kapitel-22-root img,
#kapitel-22-root svg {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain;
}

/* 1. Generische (falls kein Wrapper genutzt wird) */
article img,
article svg,
.prose img,
.prose svg,
.markdown-body img,
.markdown-body svg {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain;
}

/* 2. Projektpfade verstärken (damit nichts zurückfällt) */
img[src^="/images/"],
img[src*="/band-iii/kapitel-22/"],
img[src*="kapitel-22/media/"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain;
}

/* 3. Spezifische SVGs (Spielkarte + Turnierleitung) */
img[src$="schuetzenliga-seite-dark.svg"],
img[src$="schuetzenliga-turnierleitung-dark.svg"],
img[src$="schuetzenliga-junior-edition-dark.svg"]{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain;
}

/* 4 Standard-Wrappers von Themes */
figure,
picture,
.markdown-figure,
.markdown-body figure,
.prose figure {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 5. Inhalte im figure nicht zusätzlich eingerückt */
figure > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 6. Mobile: nichts extra außer Sicherheit bei Margins */
@media (max-width: 640px) {
  figure,
  picture,
  .markdown-body img,
  .prose img {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 7. (Optional) Druck aktivieren indem du auskommentierst
@media print {
  img, svg {
    width: 100% !important;
    max-width: 100% !important;
    page-break-inside: avoid;
  }
}
*/