/* ============================================================
   Debug-Outline-Modus — macht den Element-/Box-Baum sichtbar.
   Inert bis body.debug-outline gesetzt ist (debug-outline.js:
   Strg+Alt+O toggelt, ?debug in der URL aktiviert).
   outline (nicht border) -> kein Layout-Shift.
   ============================================================ */

body.debug-outline * {
  outline: 1px solid rgba(255, 0, 0, 0.12);
}

/* Struktur-Container farbcodiert */
body.debug-outline main    { outline: 2px solid #e74c3c; }   /* rot */
body.debug-outline section { outline: 2px solid #3498db; }   /* blau */
body.debug-outline article { outline: 2px solid #2ecc71; }   /* gruen */
body.debug-outline header,
body.debug-outline footer  { outline: 2px solid #f39c12; }   /* orange */
body.debug-outline nav     { outline: 2px solid #9b59b6; }   /* lila */
body.debug-outline aside   { outline: 2px solid #1abc9c; }   /* tuerkis */
body.debug-outline figure  { outline: 2px solid #e91e63; }   /* pink */

/* Inline-/Text-Container dezenter */
body.debug-outline div     { outline: 1px solid rgba(52, 152, 219, 0.35); }
body.debug-outline ul,
body.debug-outline ol,
body.debug-outline li      { outline: 1px solid rgba(155, 89, 182, 0.35); }
body.debug-outline hgroup,
body.debug-outline h1,
body.debug-outline h2,
body.debug-outline h3,
body.debug-outline h4,
body.debug-outline p       { outline: 1px solid rgba(243, 156, 18, 0.35); }

/* Kleiner Hinweis, dass der Debug-Modus aktiv ist */
body.debug-outline::after {
  content: "DEBUG OUTLINE (Ctrl/Cmd+Alt+O · ?debug)";
  position: fixed;
  z-index: 99999;
  bottom: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  font: 600 0.7rem/1 monospace;
  color: #fff;
  background: #e74c3c;
  border-radius: 0.25rem;
  pointer-events: none;
}