/* fixup landingpage — one stylesheet, no external dependencies.
   Palette is amber-on-ink: enough contrast for large-text and
   low-vision use, and it survives a monochrome print. */

:root {
  --ink: #1c1917;
  --ink-soft: #3f4438;
  --paper: #fbf9f4;
  --paper-alt: #f2eee4;
  --line: #d9d3c4;
  --accent: #a86400;
  --accent-strong: #7f4c00;
  --accent-tint: #fbeccd;
  --radius: 14px;
  --wrap: 68rem;
  --space: clamp(2.5rem, 6vw, 5rem);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f4f1e8;
    --ink-soft: #bdb8a9;
    --paper: #1c1917;
    --paper-alt: #1b1e17;
    --line: #33372c;
    --accent: #f4b942;
    --accent-strong: #ffd27a;
    --accent-tint: #2a2415;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
/* The lower bound used to be 2.1rem, which pushed "Datenschutzerklärung" past the edge of a
   320px screen by 50px. 1.75rem plus hyphenation keeps every German compound word inside. */
h1 { font-size: clamp(1.75rem, 1.1rem + 4.2vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1rem; max-width: 62ch; }
a { color: var(--accent-strong); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.brand img { border-radius: 50%; }

/* The wordmark is two-tone, exactly as the app renders it: "fix" in the body ink,
   "up" in the accent. The dark scheme takes the lighter accent-400, because the
   app's accent-600 would sit at about 3.4:1 on the dark ground. */
.brand-fix { color: var(--ink); }
.brand-up { color: #ea580c; }

@media (prefers-color-scheme: dark) {
  .brand-up { color: #fb923c; }
}

.site-nav { margin-inline-start: auto; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

@media (max-width: 44rem) {
  /* The navigation used to be hidden outright below 44rem, which left a phone with no
     navigation at all. It now wraps to its own row under the brand, so every section
     stays reachable and no menu has to be opened. The header stops sticking: two rows
     of it would sit on top of the viewport for the whole page. */
  .site-header { position: static; }
  .header-inner { flex-wrap: wrap; padding-block: 0.6rem; row-gap: 0.35rem; min-height: 0; }
  .site-nav { display: block; order: 3; width: 100%; margin-inline-start: 0; }
  .site-nav ul { gap: 0.1rem 0.95rem; font-size: 0.95rem; }
  .site-nav a { padding: 0.6rem 0; }
  .header-inner > .btn { margin-inline-start: auto; min-height: 2.75rem; display: inline-flex; align-items: center; }
}

/* Five nav items plus the header button need the room between 44rem and 52rem,
   where the full spacing would wrap the last item onto a second header row. */
@media (min-width: 44.0625rem) and (max-width: 52rem) {
  .site-nav ul { gap: 0.25rem 0.85rem; font-size: 0.95rem; }
}

@media (min-width: 44.0625rem) and (max-width: 47rem) {
  .site-nav ul { gap: 0.2rem 0.6rem; font-size: 0.9rem; }
  .site-header .btn-sm { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #1c1917; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { border-color: var(--accent); }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.95rem; }

/* ---------- touch targets ---------- */

/* Footer and contact links were 20–26px tall, under the 24px WCAG 2.5.8 minimum and well
   under a comfortable thumb. Links inside prose stay as they are: those are exempt, and
   padding them would break the line rhythm of the paragraphs they sit in. */
.brand,
.site-footer nav a,
.contact dd a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------- hero ---------- */

.hero {
  padding: clamp(3.5rem, 9vw, 7rem) 0 var(--space);
  background: linear-gradient(180deg, var(--accent-tint), transparent 70%);
}
.hero-inner > p, .hero-inner > ul { max-width: 58ch; }

.eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 1rem;
}

.lead { font-size: 1.15em; color: var(--ink-soft); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 2rem;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.facts li::before { content: "✓"; color: var(--accent-strong); margin-right: 0.5em; font-weight: 700; }

/* ---------- sections ---------- */

.section { padding: var(--space) 0; }
.section-alt { background: var(--paper-alt); }
.section-lead { font-size: 1.1em; color: var(--ink-soft); }

.subhead { margin-top: 2.5rem; }

/* ---------- steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: #1c1917;
  font-weight: 700;
}
.steps p { margin: 0; color: var(--ink-soft); }

/* ---------- trades ---------- */

.trades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.trades li {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.cards li {
  padding: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cards p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

@media (min-width: 60rem) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
}

.note {
  margin-top: 1.75rem;
  padding-left: 1rem;
  border-left: 4px solid var(--accent);
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* ---------- faq ---------- */

.faq {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0 0;
  max-width: 62ch;
}
.faq dt {
  font-weight: 700;
  font-size: 1.05rem;
}
.faq dd {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
}

/* ---------- cta ---------- */

.cta {
  background: var(--ink);
  color: var(--paper);
}
.cta h2 { color: var(--paper); }
.cta .section-lead { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.cta .btn-primary { background: var(--accent); color: #1c1917; }
.cta .btn-primary:hover { background: var(--accent-strong); }
.cta .btn-secondary { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.cta .btn-secondary:hover { border-color: var(--accent); }
.cta a { color: var(--accent-strong); }

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem 2rem;
  margin: 2rem 0 0;
}
.contact div { margin: 0; }
.contact dt { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.contact dd { margin: 0.25rem 0 0; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.75rem 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.site-footer p { margin: 0; }
.site-footer ul {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- legal pages ---------- */

.legal { padding: var(--space) 0; }
.legal h2 { margin-top: 2.5rem; }
.legal h2:first-of-type { margin-top: 0; }