/* ────────────────────────────────────────────────────────────────
   base · reset + globale Defaults + Layout-Primitive
   Ersetzt das HTML5-UP-main.css-Fundament. Alles auf Tokens.
   ──────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700,800,900&display=swap");

/* ─── Reset (Andy-Bell-Stil, kondensiert) ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─── Body ────────────────────────────────────────────────────── */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--red-600); color: #fff; }

/* ─── Typografie ──────────────────────────────────────────────── */
h1, h2, h3, h4 {
  color: var(--ink-1000);
  line-height: var(--lh-h);
  letter-spacing: -0.02em;
  font-weight: 800;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 700; }

/* serif-italic Akzent — <em> in Headings */
h1 em, h2 em, h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--red-600);
}

p { margin: 0; }
strong, b { font-weight: 700; color: inherit; }

a { color: var(--red-600); transition: color .2s; }
a:hover { color: var(--red-700); }

/* ─── Layout-Primitive ────────────────────────────────────────── */
.inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.inner-tight {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section-Rhythmus */
.main {
  padding-block: var(--s-9);
  background: var(--paper);
}
.main.alt { background: var(--ink-050); }

/* ─── Section-Header (kicker + title + lead) ──────────────────── */
.section-kicker,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-600);
}
.section-kicker::before,
.kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
}
.section-kicker.on-dark,
.kicker.on-dark { color: var(--red-500); }

/* ─── Buttons ─────────────────────────────────────────────────── */
.button,
input[type="submit"],
input[type="button"],
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--ink-900);
  background: transparent;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  border-color: var(--ink-900);
  color: var(--ink-1000);
  transform: translateY(-1px);
}
.button.primary,
input[type="submit"].primary {
  background: var(--red-600);
  border-color: var(--red-600);
  color: #fff;
}
.button.primary:hover,
input[type="submit"].primary:hover {
  background: var(--red-700);
  border-color: var(--red-700);
  color: #fff;
}
.button.large { padding: 16px 32px; font-size: 16px; }
.button.wide { min-width: 16rem; }

/* button list */
ul.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
ul.actions.centered { justify-content: center; }

/* ─── Images ──────────────────────────────────────────────────── */
.image { display: block; border: 0; }
.image img { width: 100%; }

/* ─── FontAwesome-Wrapper (.icon) ─────────────────────────────── */
.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative;
}
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon > .label { display: none; }
.icon.solid::before { font-weight: 900; }
.icon.brands::before { font-family: "Font Awesome 5 Brands"; }
.icon.lg { display: block; margin: 0 0 var(--s-5); }

/* ─── Forms ───────────────────────────────────────────────────── */
label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-900);
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--ink-900);
  background: var(--paper-pure);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-3);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red-600);
  box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-300); }
textarea { min-height: 11rem; resize: vertical; }

/* ─── Utilities ───────────────────────────────────────────────── */
.tnum { font-variant-numeric: tabular-nums; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }

/* ─── Reveal on scroll ────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ─── Focus / a11y ────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--red-600);
  outline-offset: 2px;
  border-radius: var(--r-2);
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s-4);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--ink-1000);
  color: var(--paper);
  border-radius: var(--r-3);
}
.skip-link:focus { inset-block-start: var(--s-4); }