/* ============================================================
   JESUS PUNKT — Base · fonts, reset, typography, layout primitives
   ============================================================ */

/* ---- Fonts (self-hosted, woff2) ---- */
@font-face {
  font-family: "Raveo";
  src: url("../fonts/raveo-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raveo";
  src: url("../fonts/raveo-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sinkin Sans";
  src: url("../fonts/sinkinsans-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sinkin Sans";
  src: url("../fonts/sinkinsans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url("../fonts/arimo-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Cyrillic supplement for the Ukrainian pages (Raveo/Sinkin are Latin-only subsets) */
@font-face {
  font-family: "Arimo";
  src: url("../fonts/arimo-var-cyrillic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* [hidden] must always win — an author display rule (e.g. display:grid on a
   component) would otherwise override the attribute's UA display:none */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem); /* fixed header clearance */
}
/* state-scoped exception to the no-overflow-on-html rule:
   locks the page only while the fullscreen menu is open */
html.menu-open { overflow: hidden; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--creme); }

/* ---- Focus ---- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible { outline-color: var(--creme); }

/* ---- Container (never pad the section itself) ---- */
.container {
  /* 74.25rem = 71.25rem content (1140, as in the fig) + 2 × 1.5rem safety padding */
  max-width: 74.25rem;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* ---- Section rhythm ---- */
.section { padding-block: var(--section-pad); }
@media (max-width: 37.5rem) {
  /* endpoint: +50% over the previous phone value (was --section-pad / 2) */
  .section { padding-block: calc(var(--section-pad) * 0.75); }
  /* the page's last section carries the 2.85rem taken off the footer's top
     padding — total section↔footer rhythm unchanged, more of it on light bg */
  main > section:last-of-type { padding-bottom: calc(var(--section-pad) * 0.75 + 2.85rem); }
}

/* ---- Appearance reveals (JS adds .reveal, then .is-in on enter; classes
        are stripped after the transition so component hovers stay intact) ---- */
.reveal { opacity: 0; transform: translateY(0.75rem); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease) var(--rv-d, 0s),
              transform 600ms var(--ease) var(--rv-d, 0s);
}

/* ---- Headings ---- */
.h1 {
  font: 700 var(--fs-h1) / var(--lh-display) var(--font-display);
  letter-spacing: 0;
  color: var(--ink);
}
.h2 {
  font: 700 var(--fs-h2) / var(--lh-heading) var(--font-display);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.h2--xl { font-size: var(--fs-h2-xl); }
/* the "Punkt" — gold dot after a heading */
/* gold dot glued to the last word: an inline-block would be an atomic inline —
   browsers may break the line before it, wrapping the dot alone. A plain inline
   box whose content is a no-break space cannot be separated from the text; the
   dot itself is painted as a background circle inside that box. */
.h2--dot::after {
  content: "\00A0";
  font-size: 0.42em; /* dot geometry scales with the heading */
  padding-right: 1em;
  margin-left: -0.05em;
  vertical-align: middle; /* dot centres on the text, not the baseline */
  background: radial-gradient(circle closest-side, var(--accent) 97%, transparent) right center / 1em 1em no-repeat;
}
.h3 {
  font: 700 var(--fs-h3) / 1.2 var(--font-display);
  color: var(--ink);
}
/* long German compounds ("Spendenbescheinigung") exceed narrow screens as one
   unbreakable word — let phones hyphenate headings instead of overflowing */
@media (max-width: 37.5rem) {
  h1, h2, h3 {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* ---- Section header pattern (spacing lives on covers, not text nodes) ---- */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}
.section-head__desc {
  max-width: 43.75rem; /* 700 */
  color: var(--ink-2);
}

/* ---- Buttons (md default: 14/22 r6 · lg: 16/32 r8) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font: 700 var(--fs-btn) / 1 var(--font-ui);
  padding: 0.875rem 1.375rem;
  border-radius: var(--radius-sm);
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.btn:hover { transform: translateY(-0.125rem); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 1rem 2rem; border-radius: var(--radius); }
.btn--primary { background: var(--ink); color: var(--creme); }
.btn--primary:hover { background: var(--accent); color: var(--ink); }
.btn--outline {
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--creme); }

/* ---- Text link (arrow links) ---- */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font: 700 0.875rem / 1 var(--font-display);
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.textlink__arrow { display: inline-block; transition: transform var(--t-med) var(--ease); }
.textlink:hover { color: var(--gold-text); }
.textlink:hover .textlink__arrow { transform: translateX(0.375rem); }

/* ---- Utilities ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}