/* ============================================================
   base.css — Reset, Typografie, RTL-Grundlagen
   Nutzt logische CSS-Eigenschaften (inline-start/-end), damit
   dieselben Regeln für LTR (de/en) und RTL (ar) gelten.
   ============================================================ */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Arabische Ansicht: Schriftart + geringfügig größere Zeilenhöhe */
body[dir="rtl"] { font-family: var(--font-arabic); font-size: 17px; line-height: 1.85; }

img { display: block; width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-deep); }

button, input { font: inherit; color: inherit; }

ul, ol { list-style: none; }

h1, h2, h3, h4 { line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
body[dir="rtl"] h1,
body[dir="rtl"] h2,
body[dir="rtl"] h3,
body[dir="rtl"] h4 { letter-spacing: 0; line-height: 1.5; }

/* Fokus sichtbar (Barrierefreiheit) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip-Link */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: -48px;
  z-index: 100;
  background: var(--accent);
  color: #ffffff;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top var(--transition);
}
.skip-link:focus { top: 0; color: #ffffff; }

::selection { background: var(--accent-tint); color: var(--ink); }