/* =========================================================================
   utilities.css — kleine, bewusst gesetzte Hilfsklassen
   Projekt: ergibtsinn.com
   Hinweis: keine umfassende Utility-Framework-Logik (kein Tailwind-Ersatz).
            Nur gezielte Helfer fuer Abstaende, Sichtbarkeit und Typografie.
   ========================================================================= */

/* Abstaende ueber bereits vorhandene Tokens */
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-7 { margin-top: var(--space-7) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-7 { margin-bottom: var(--space-7) !important; }

/* Textausrichtung */
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Textfarbvarianten */
.text-muted  { color: var(--color-ink-mute); }
.text-soft   { color: var(--color-ink-soft); }
.text-sage   { color: var(--color-sage-deep); }

/* Visual-only / Screenreader-only — Accessibility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Anker-Offset, damit Sprungmarken nicht unter dem Sticky-Header verschwinden. */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Bildsperren fuer Drag & Speichern optisch entschaerfen (nicht durchsetzbar).
   Hilft aber gegen versehentliches Drag-Ghost-Bild beim Scrollen. */
img { user-select: none; -webkit-user-drag: none; }

/* Layout-Helpers */
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.stack--sm { gap: var(--space-3); }
.stack--lg { gap: var(--space-7); }

.row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* Signal-Badge (kleine farbliche Plakette fuer Hinweise) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-sage-veil);
  color: var(--color-sage-deep);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.badge--mute {
  background: var(--color-paper-deep);
  color: var(--color-ink-mute);
}

/* Trennline mit Zentrumspunkt */
.rule-dot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-stone);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  margin-block: var(--space-6);
}
.rule-dot::before,
.rule-dot::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

/* Prose-Block fuer Rechtsseiten (Impressum, Datenschutz) */
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-7); }
.prose p, .prose li { color: var(--color-ink-soft); }
.prose ul { padding-left: 0; }

/* Kleine kontext-sensitive Desktop-Helfer */
.hide-on-mobile { display: none; }
@media (min-width: 48rem) { .hide-on-mobile { display: initial; } }

.hide-on-desktop { display: initial; }
@media (min-width: 48rem) { .hide-on-desktop { display: none; } }

/* "No-Js Fallback" — sichtbar wenn JS nicht laeuft */
.js-only { display: none; }
.js .js-only { display: initial; }
.no-js .no-js-hint { display: block; }