/* ---------------------------------------------------------------------------
   Migrant Guide — urenmobile.de
   Single stylesheet. No build step, no dependencies.

   Colour tokens are lifted verbatim from the iOS app's DesignSystem package
   (MigrantGuide/DesignSystem/Sources/Resources/Colors.xcassets). Keep them in
   sync by hand: if a colorset changes there, change it here. The light values
   are the "Any" appearance, the dark values the "Dark" appearance.

   Spacing and radius scales mirror DesignSystem/Sources/Layout/.
   --------------------------------------------------------------------------- */

:root {
  /* Brand */
  --primary: #0E7C7B;
  --primary-pressed: #0B6665;
  --primary-muted: #EAF6F5;
  --accent: #E8833A;
  --accent-solid: #92440F;

  /* Surfaces */
  --bg: #FAFAF9;
  --bg-elevated: #FFFFFF;
  --bg-grouped: #F3F2EF;

  /* Text */
  --label: #14130F;
  --label-secondary: #57534B;
  --label-tertiary: #7A756B;
  --label-on-primary: #FFFFFF;

  --separator: #E7E5E0;
  --success: #2E9E5B;

  /* Spacing scale — DesignSystem/Layout/Spacing.swift */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-4xl: 48px;
  --sp-5xl: 72px;

  /* Radius scale — DesignSystem/Layout/Radius.swift */
  --r-sm: 6px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-card: 18px;
  --r-xl: 20px;
  --r-pill: 999px;

  --measure: 68ch;      /* comfortable reading width for legal prose */
  --container: 1080px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Arabic", sans-serif;

  --shadow-card: 0 1px 2px rgb(20 19 15 / 0.04), 0 8px 24px rgb(20 19 15 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #33A29D;
    --primary-pressed: #6FC0BC;
    --primary-muted: #0E2A2A;
    --accent: #EF9E58;
    --accent-solid: #F5BE8E;

    --bg: #14130F;
    --bg-elevated: #201E1A;
    --bg-grouped: #14130F;

    --label: #FAFAF9;
    --label-secondary: #B8B3AA;
    --label-tertiary: #8A857B;
    --label-on-primary: #062C2C;

    --separator: #35322C;
    --success: #4CBE79;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
  }
}

/* --- reset ---------------------------------------------------------------- */

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

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky and 64px tall; without this an in-page anchor lands
     with its heading tucked underneath it. */
  scroll-padding-block-start: calc(64px + var(--sp-xl));
}

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

/* German compounds ("Datenschutzerklärung", "Nutzungsbedingungen") are single
   words wider than a 320px viewport at heading sizes. Hyphenation splits them
   properly — the pages carry lang="de"/lang="en" so the browser uses the right
   dictionary — and break-word is the last-resort backstop. */
h1, h2, h3, .prose p, .prose li, .prose dd {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Long, unbreakable strings that must not push the layout wide. */
.email-link { overflow-wrap: anywhere; }
.todo { white-space: normal; overflow-wrap: anywhere; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-pressed); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Right-to-left support — Arabic and Farsi are app locales; if an RTL page is
   ever added, `<html dir="rtl">` is enough, the layout is logical-property based. */
[dir="rtl"] { text-align: right; }

/* --- layout -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-xl);
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-lg);
  inset-block-start: -100px;
  z-index: 10;
  padding: var(--sp-sm) var(--sp-lg);
  background: var(--primary);
  color: var(--label-on-primary);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: inset-block-start 0.15s ease;
}
.skip-link:focus { inset-block-start: var(--sp-lg); color: var(--label-on-primary); }

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

.site-header {
  border-block-end: 1px solid var(--separator);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  font-weight: 650;
  font-size: 1.0625rem;
  color: var(--label);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--label); }
.brand img { width: 32px; height: 32px; border-radius: var(--r-sm); }

/* language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}
.lang-switch a,
.lang-switch span {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--label-secondary);
  line-height: 1.2;
}
.lang-switch a:hover { color: var(--label); background: var(--bg-elevated); }
.lang-switch [aria-current="true"] {
  background: var(--primary);
  color: var(--label-on-primary);
}

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

.hero {
  padding-block: var(--sp-4xl) var(--sp-4xl);
}

@media (min-width: 800px) {
  .hero { padding-block: var(--sp-5xl) var(--sp-4xl); }
}

/* Single column on purpose: there is nothing to put in a second one yet, and an
   empty half-width column reads as a broken layout rather than as whitespace.
   When app screenshots exist, add a `.hero-media` child and restore the split:
     @media (min-width: 900px) {
       .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
     }
   The h1 measure below is what keeps the headline from spanning the full width. */
.hero-grid {
  display: grid;
  gap: var(--sp-3xl);
  grid-template-columns: 1fr;
  max-width: 46rem;
}

.app-icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  margin-block-end: var(--sp-xl);
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  max-width: 22ch;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 var(--sp-lg);
}

.lede {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--label-secondary);
  max-width: 46ch;
  margin: 0 0 var(--sp-2xl);
}

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

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-lg);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 13px var(--sp-2xl);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary);
  color: var(--label-on-primary);
}
.btn-primary:hover { background: var(--primary-pressed); color: var(--label-on-primary); }

.btn-secondary {
  background: transparent;
  color: var(--label);
  border-color: var(--separator);
}
.btn-secondary:hover { background: var(--bg-grouped); color: var(--label); }

/* Coming-soon state: rendered as a non-link so there is no dead href.
   Swap to <a class="btn btn-primary"> once the App Store URL exists. */
.btn[aria-disabled="true"],
span.btn-primary {
  background: var(--bg-grouped);
  color: var(--label-tertiary);
  border-color: var(--separator);
  cursor: default;
}

/* Apple's "Download on the App Store" badge must be used unmodified.
   Put the official SVG/PNG at assets/img/app-store-badge-{de,en}.svg. */
.app-store-badge { display: inline-block; }
.app-store-badge img { height: 52px; width: auto; }

.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding-block: 13px;
}
.btn-quiet:hover { text-decoration: underline; }
.btn-quiet .arrow { transition: transform 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .btn-quiet:hover .arrow { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-quiet:hover .arrow { transform: none; }
}

.badge-note {
  font-size: 0.875rem;
  color: var(--label-tertiary);
  margin: var(--sp-md) 0 0;
}

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

.section { padding-block: var(--sp-4xl); }
.section-alt { background: var(--bg-grouped); }

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 var(--sp-2xl);
}

.features {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px)  { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(4, 1fr); } }

.feature {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  padding: var(--sp-2xl);
}

.feature h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  margin: 0 0 var(--sp-sm);
  letter-spacing: -0.01em;
}

.feature p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--label-secondary);
  line-height: 1.55;
}

.feature-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--primary-muted);
  color: var(--primary);
  margin-block-end: var(--sp-lg);
  font-size: 1.25rem;
}

.lang-list {
  margin: var(--sp-2xl) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}
.lang-list li {
  padding: 5px var(--sp-md);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  color: var(--label-secondary);
  background: var(--bg-elevated);
}

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

.prose {
  max-width: var(--measure);
  padding-block: var(--sp-4xl) var(--sp-5xl);
}

.prose h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }

.prose h2 {
  font-size: 1.375rem;
  margin-block: var(--sp-4xl) var(--sp-md);
  padding-block-start: var(--sp-2xl);
  border-block-start: 1px solid var(--separator);
}
.prose h2:first-of-type { border-block-start: 0; padding-block-start: 0; }

.prose h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  margin-block: var(--sp-2xl) var(--sp-sm);
}

.prose p, .prose li { color: var(--label-secondary); }
.prose li + li { margin-block-start: var(--sp-sm); }
.prose strong { color: var(--label); font-weight: 620; }

.prose dl { margin: var(--sp-lg) 0; }
.prose dt { font-weight: 620; color: var(--label); margin-block-start: var(--sp-lg); }
.prose dd { margin: var(--sp-xs) 0 0; color: var(--label-secondary); }

.updated {
  font-size: 0.875rem;
  color: var(--label-tertiary);
  margin-block-end: var(--sp-2xl);
}

.callout {
  border-inline-start: 3px solid var(--accent);
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  padding: var(--sp-lg) var(--sp-xl);
  margin-block: var(--sp-2xl);
}
.callout p { margin: 0; }
.callout p + p { margin-block-start: var(--sp-md); }

/* An unfinished placeholder in a published legal page is a liability.
   This makes any leftover TODO loud, in the browser and in a screenshot. */
.todo {
  display: inline-block;
  background: #FFE7C2;
  color: #6B3A00;
  border: 1px dashed #C97A1E;
  border-radius: var(--r-sm);
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  font-weight: 600;
}

.contact-card {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  padding: var(--sp-2xl);
  margin-block: var(--sp-2xl);
}
.contact-card p:first-child { margin-block-start: 0; }
.contact-card p:last-child { margin-block-end: 0; }

.email-link {
  font-size: 1.125rem;
  font-weight: 620;
  word-break: break-all;
}

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

.site-footer {
  border-block-start: 1px solid var(--separator);
  padding-block: var(--sp-3xl);
  background: var(--bg);
  font-size: 0.9375rem;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg) var(--sp-2xl);
  align-items: center;
  justify-content: space-between;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg) var(--sp-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav a { color: var(--label-secondary); text-decoration: none; }
.footer-nav a:hover { color: var(--primary); text-decoration: underline; }

.copyright { color: var(--label-tertiary); margin: 0; }

/* --- print --------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .skip-link, .lang-switch { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose { max-width: none; padding: 0; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ===========================================================================
   Motion
   ---------------------------------------------------------------------------
   Three layers, each degrading cleanly:

   1. Cross-document page transitions — pure CSS via @view-transition. Supported
      browsers cross-fade and slide between pages; the rest just navigate. No JS.
   2. Scroll-reveal — assets/js/reveal.js, via IntersectionObserver. Content is
      visible by default; the class that hides it is only added once we know it
      can be revealed again, so JS off or blocked still shows everything.
   3. Small entrance animations on the hero, which do not depend on scrolling.

   Everything is switched off under prefers-reduced-motion.
   =========================================================================== */

/* --- 1. page transitions ------------------------------------------------- */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 0.22s ease both; }
::view-transition-new(root) { animation: vt-in  0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* The sticky header should stay put instead of cross-fading with the page. */
.site-header { view-transition-name: site-header; }
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }

/* --- 2. scroll reveal ---------------------------------------------------- */

/* Implemented with IntersectionObserver (assets/js/reveal.js), NOT with CSS
   `animation-timeline: view()`.
   The native version was tried and rejected: a view() progress range cannot
   complete for an element that the page can never scroll further — the last
   block before the footer, and any element already on screen at load, stay
   part-way through their animation and sit at a fractional opacity forever.
   Verified failing on the landing page's last section and on the privacy
   page's first <h2>. An observer has no such edge case: it fires on
   intersection and the element is done.

   The default state is VISIBLE. Only reveal.js — after it has confirmed it can
   reveal them again — adds .js-reveal to hide them. So JS off, JS blocked, an
   old browser, or a failed request all leave the content readable. Never invert
   this. */

.reveal { opacity: 1; }

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: auto;
}

/* Elements already on screen at first paint are revealed with no transition, so
   the first screen never flashes empty. */
.js-reveal .reveal.is-immediate { transition: none; }

/* Stagger the feature cards so the row assembles rather than popping in. */
.js-reveal .features .reveal.is-visible:not(.is-immediate) { transition-delay: 0s; }
.js-reveal .features .reveal:nth-child(2).is-visible:not(.is-immediate) { transition-delay: 0.07s; }
.js-reveal .features .reveal:nth-child(3).is-visible:not(.is-immediate) { transition-delay: 0.14s; }
.js-reveal .features .reveal:nth-child(4).is-visible:not(.is-immediate) { transition-delay: 0.21s; }

/* --- 3. hero entrance ---------------------------------------------------- */

.enter { animation: enter-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.enter-1 { animation-delay: 0.05s; }
.enter-2 { animation-delay: 0.14s; }
.enter-3 { animation-delay: 0.23s; }
.enter-4 { animation-delay: 0.32s; }

@keyframes enter-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* App icon gets a touch of scale — it is the one decorative element on the page. */
.app-icon.enter { animation-name: enter-pop; }
@keyframes enter-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Hover lift on cards. Pointer-precision guarded so it never fires on touch. */
@media (hover: hover) and (pointer: fine) {
  .feature {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
  }
  .feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--separator));
  }
}

/* Subtle underline grow on footer links. */
.footer-nav a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.25s ease, color 0.2s ease;
}
.footer-nav a:hover { background-size: 100% 1px; text-decoration: none; }

/* --- reduced motion: turn all of it off --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  .reveal,
  .js-reveal .reveal,
  .js-reveal .reveal.is-visible,
  .enter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .feature:hover { transform: none; }
  .footer-nav a:hover { background-size: 0% 1px; text-decoration: underline; }
}