/* ==========================================================================
   web/app.css
   - Bootstrap (CDN) macht das Grundlayout.
   - Diese Datei ergänzt nur:
     * bessere Fokus-Sichtbarkeit (A11y)
     * Reduced Motion Support (A11y)
     * ein paar Layout-/Codeblock-Tweaks
   ========================================================================== */

:root {
  /* Maximale Breite des Inhaltscontainers */
  --app-max-width: 980px;
}

/* ---------- Grundlayout: Container etwas "app-like" ---------- */
.app-shell {
  max-width: var(--app-max-width);
}

/* ---------- Accessibility: sichtbarer Tastatur-Fokus ---------- */
/* Bootstrap hat Focus-Styles, wir machen sie sehr klar sichtbar */
:focus-visible {
  outline: 3px solid #0d6efd; /* Bootstrap primary */
  outline-offset: 2px;
}

/* Screenreader-only Utility (für versteckte Labels/Infos) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reduced Motion respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Toasts: Position unten rechts ---------- */
.toast-container {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080; /* über Content, unter Modals */
}

/* ---------- JSON/Code-Ausgabe ---------- */
pre.jsonbox {
  background: #f8f9fa; /* Bootstrap light */
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: 12px;
  overflow: auto;
  margin: 0;
}

/* Kleine Hilfstext-Optik */
.hint {
  font-size: 0.95rem;
  opacity: 0.85;
}