/* ============================================================
   BASE — Reset, Typografie, Grundlayout, Barrierefreiheit.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  transition: background .3s, color .3s;
}

h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; line-height: 1.1; margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

/* Sichtbare Fokus-Indikatoren (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
[data-theme="dark"] :focus-visible { outline-color: #E879C4; }

/* Skip-Link */
.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -160%);
  z-index: 200; background: var(--color-primary); color: var(--color-on-primary);
  padding: 12px 22px; border-radius: var(--radius-pill); font-weight: 700;
  text-decoration: none; transition: transform .2s;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Layout-Helfer */
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--space-3); width: 100%; }
.section { padding-block: clamp(56px, 8vw, 96px); }
.section--surface { background: var(--color-surface); }
.section--secondary { background: var(--color-secondary); color: var(--color-on-secondary); }

/* Eyebrow / Section-Kopf */
.eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-primary);
}

/* Gestreifter Bild-Platzhalter (bis echte Bilder kommen) */
.ph {
  width: 100%; height: 100%; border-radius: var(--radius-lg);
  background-color: var(--color-surface-2);
  background-image: repeating-linear-gradient(45deg, rgba(142,36,115,.16) 0 12px, transparent 12px 24px);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.ph::after {
  content: attr(data-label);
  font-family: ui-monospace, monospace; font-size: 12px; color: var(--color-secondary);
  background: var(--color-bg); padding: 6px 12px; border-radius: var(--radius-sm);
}

@keyframes egw-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fade-up { animation: egw-fade-up .7s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}