/* WP Digital Ranger – eine Seite, ein Mensch, zwei Apps. Ruhiges Papier, Waldgrün, Höhenlinien wie auf einer Wanderkarte. */
@font-face { font-family: "Archivo"; src: url("/fonts/Archivo_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/Archivo_600SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/fonts/Archivo_800ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --paper: #F4F5F0;
  --card: #FFFFFF;
  --ink: #17201B;
  --soft: #46524B;
  --muted: #76827B;
  --line: #D9DED7;
  --ranger: #2E5E3E;
  --ranger-soft: #E2EDE4;
  --contour: rgba(46, 94, 62, 0.13);
  --demopin: #FFD23F;
  --restock: #E4572E;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121814; --card: #1A221D; --ink: #E7ECE8; --soft: #B3BEB7; --muted: #869189; --line: #2B352F;
    --ranger: #8CC79D; --ranger-soft: #1F3326; --contour: rgba(140, 199, 157, 0.10); color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 "Archivo", system-ui, sans-serif; }
a { color: var(--ranger); }
a:focus-visible { outline: 2px solid var(--ranger); outline-offset: 3px; border-radius: 4px; }

.page { max-width: 960px; margin: 0 auto; padding-inline: 20px; }

header.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; }
.mark { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.3px; text-decoration: none; color: var(--ink); }
.mark svg { flex: none; }
nav { display: flex; gap: 18px; font-size: 15px; }
nav a { color: var(--soft); text-decoration: none; }
nav a:hover { color: var(--ink); text-decoration: underline; }

.hero { position: relative; padding-block: 56px 72px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40px -200px; z-index: -1;
  background:
    repeating-radial-gradient(ellipse at 78% 42%, transparent 0 26px, var(--contour) 26px 27.5px),
    repeating-radial-gradient(ellipse at 18% 120%, transparent 0 34px, var(--contour) 34px 35.5px);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.hero h1 { font-weight: 800; font-size: clamp(40px, 8vw, 76px); line-height: 1.02; letter-spacing: -2px; margin: 0 0 20px; max-width: 13ch; text-wrap: balance; }
.hero p { font-size: 20px; color: var(--soft); margin: 0; max-width: 46ch; }

h2 { font-size: 15px; font-weight: 600; color: var(--muted); margin: 0 0 14px; }

.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding-bottom: 56px; }
.app { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; gap: 12px; align-content: start; }
.app .badge { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
.app h3 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.app p { margin: 0; color: var(--soft); }
.app .meta { font-size: 14px; color: var(--muted); }
.app a.go { font-weight: 600; justify-self: start; }

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-block: 8px 64px; border-top: 1px solid var(--line); padding-top: 40px; }
.about p { margin: 0 0 12px; color: var(--soft); max-width: 60ch; }
.contact { font-size: 22px; font-weight: 600; word-break: break-word; }

footer { border-top: 1px solid var(--line); padding-block: 24px 40px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); }

.legal { max-width: 68ch; padding-block: 24px 64px; }
.legal h1 { font-size: clamp(32px, 6vw, 44px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 0 0 24px; }
.legal h2 { font-size: 19px; color: var(--ink); font-weight: 800; margin: 32px 0 8px; }
.legal p, .legal li { color: var(--soft); }
.legal address { font-style: normal; }

@media (max-width: 640px) {
  .about { grid-template-columns: 1fr; gap: 16px; }
  nav { gap: 12px; font-size: 14px; }
  .hero { padding-block: 32px 48px; }
}