/* ═══════════════════════════════════════════════════════════════════════════
   Element Defaults v2 — Essig Elektro
   Animated focus rings, link underlines, balanced headings.
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background-color: var(--color-surface-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings — text-wrap: balance for beautiful line breaks ─────── */

h1, .h1,
h2, .h2,
h3, .h3 {
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

h2, .h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

h3, .h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

h4, .h4 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

h5, .h5 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

h6, .h6 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

p {
  margin-bottom: var(--space-md);
}
p:last-child {
  margin-bottom: 0;
}

/* ── Links — animated gradient underline ───────────────────────────── */

a {
  color: var(--color-orange-600);
  text-decoration: none;
  background-image: linear-gradient(var(--color-orange-400), var(--color-orange-400));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--motion-duration-base) var(--motion-ease-out),
              color var(--motion-duration-fast) var(--motion-ease-out);
}

a:hover {
  background-size: 100% 1.5px;
  color: var(--color-orange-500);
}

a:focus-visible {
  outline: 2px solid var(--color-orange-500);
  outline-offset: 2px;
  border-radius: 0;
}

/* In dark sections, links use teal accent */
.c-site-footer a,
.c-footer-cta a {
  background-image: linear-gradient(var(--color-teal-300), var(--color-teal-300));
  color: var(--color-teal-300);
}
.c-site-footer a:hover,
.c-footer-cta a:hover {
  color: var(--color-teal-200);
}

/* ── Focus Ring — animated ─────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-orange-500);
  outline-offset: 2px;
  transition: outline-offset var(--motion-duration-fast) var(--motion-ease-out);
}

:focus-visible:active {
  outline-offset: 4px;
}

/* ── Selection ─────────────────────────────────────────────────────── */

::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
}

/* ── Strong text ───────────────────────────────────────────────────── */

strong, b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ── Sprungmarken ───────────────────────────────────────────────────── */

/* Der Header liegt sticky ueber dem Inhalt. Ohne diesen Abstand landet ein
   Sprungziel (z. B. /leistungen/#leistung-02 von den Startseiten-Karten)
   direkt unter der Kopfzeile. Gemessen am 26.09.2026: die Ueberschrift lag
   nur 11px unter der Oberkante des Headers — sichtbar, aber ohne Luft. */
:target {
  scroll-margin-top: 5rem;
}