/* ==========================================================================
   Base: reset, element defaults, accessibility helpers, shared utilities.
   Extracted 1:1 from the approved draft startseite-entwurf-2.html (ADR-0003).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
/* Anchor offset is handled via scroll-margin-top on main [id]
   (components.css) – NOT via scroll-padding-top, so pages with a sticky
   anchor bar can extend the offset in their page CSS without double-counting. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* Visible focus everywhere (SV-02-015) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Skip link */
.skip {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 100;
  background: var(--color-bg);
  color: var(--color-ink);
  padding: var(--space-1) var(--space-2);
}
.skip:focus-visible { top: var(--space-2); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Layout primitives */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: var(--fs-small);
  color: var(--color-muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}
.dark .eyebrow { color: var(--dark-muted); }

/* Buttons & links ------------------------------------------------------- */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: #ffffff;
  font: 600 var(--fs-body)/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--ease-control);
}
.btn-pill:hover { background: var(--color-muted); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--ease-control);
}
.icon-btn svg { width: 22px; height: 22px; }

/* Ghost link: 44px touch target on every breakpoint (ADR-0003 topic H2) */
.ghost-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--dark-fg);
  text-decoration: none;
  font: 600 1.0625rem/1.3 var(--font-body);
  padding: 0;
  border-bottom: 3px solid var(--dark-fg);
  transition: color var(--ease-control), border-color var(--ease-control);
}
.ghost-link:hover { color: var(--dark-muted); border-color: var(--dark-muted); }
.ghost-link svg { width: 16px; height: 16px; margin-left: 6px; transition: transform var(--ease-control); }
.ghost-link:hover svg { transform: translateX(3px); }

/* Ink variant for light/photo backgrounds. Two spellings exist in the
   drafts (.ghost-dark in umgebung, .ghost-link.on-light in unterkunft) –
   both are served here; templates pick one when built (Paket 3). */
.ghost-dark, .ghost-link.on-light { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.ghost-dark:hover, .ghost-link.on-light:hover { color: var(--color-ink); border-bottom-color: var(--color-muted); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-thickness var(--ease-control);
}
.text-link:hover { text-decoration-thickness: 3px; }
.text-link svg { width: 16px; height: 16px; margin-left: 6px; transition: transform var(--ease-control); }
.text-link:hover svg { transform: translateX(3px); }

/* Scroll reveal (opt-in via .reveal; disabled without JS and on
   prefers-reduced-motion) */
.js .reveal { opacity: 0; transition: opacity var(--ease-reveal); }
.js .reveal.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transition: none; }
}