/* ─────────────────────────────────────────────────────────────────────────────
   Maestral landing page.

   Public, indexable marketing page. Deliberately dependency-free: hand-written
   CSS, no framework, no build step, no external request (font is self-hosted,
   the grain texture is an inline SVG data URI). The design tokens mirror the
   app's semantic system (app/src/app/globals.css) so the two read as one brand;
   they are COPIED, not imported, because this is a separate deployment.
   ──────────────────────────────────────────────────────────────────────────── */

/* Display face: the same self-hosted Bricolage Grotesque subset the app uses. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-subset.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'140'%20height%3D'140'%3E%3Cfilter%20id%3D'g'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.82'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D'linear'%20slope%3D'0.42'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url%28%23g%29'%2F%3E%3C%2Fsvg%3E");
  --grain-soft: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'140'%20height%3D'140'%3E%3Cfilter%20id%3D'g'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.82'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D'linear'%20slope%3D'0.22'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url%28%23g%29'%2F%3E%3C%2Fsvg%3E");

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --radius-control: 0.75rem;
  --radius-card: 1.125rem;
  --radius-panel: 1.5rem;

  --measure: 44rem;
  --page: 72rem;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Light: warm off-white paper (the app's default). */
:root {
  color-scheme: light;

  --background: oklch(0.976 0.008 150);
  --foreground: oklch(0.27 0.03 165);
  --surface: oklch(0.99 0.006 150);
  --surface-raised: oklch(0.996 0.004 150);
  --border: oklch(0.9 0.016 160);
  --muted: oklch(0.5 0.028 168);

  --accent: oklch(0.53 0.128 162);
  --accent-ink: oklch(0.99 0.01 150);
  --success-text: oklch(0.5 0.13 158);

  --shadow-sm: 0 1px 2px oklch(0.3 0.03 165 / 0.08),
    0 1px 1px oklch(0.3 0.03 165 / 0.05);
  --shadow-md: inset 0 1px 0 oklch(1 0 0 / 0.9),
    0 6px 20px -6px oklch(0.3 0.04 165 / 0.14),
    0 2px 6px -2px oklch(0.3 0.04 165 / 0.08);
  --shadow-lg: inset 0 1px 0 oklch(1 0 0 / 0.95),
    0 26px 50px -18px oklch(0.3 0.05 165 / 0.2),
    0 10px 20px -10px oklch(0.3 0.05 165 / 0.12);
  --shadow-accent: inset 0 1px 0 oklch(1 0 0 / 0.22),
    0 8px 20px -6px oklch(0.585 0.13 164 / 0.4),
    0 2px 6px -2px oklch(0.585 0.13 164 / 0.28);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --background: oklch(0.165 0.02 172);
    --foreground: oklch(0.945 0.012 160);
    --surface: oklch(0.23 0.024 171);
    --surface-raised: oklch(0.285 0.026 170);
    --border: oklch(0.37 0.028 168);
    --muted: oklch(0.72 0.03 165);

    --accent: oklch(0.72 0.15 164);
    --accent-ink: oklch(0.2 0.03 165);
    --success-text: oklch(0.84 0.17 160);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.5), 0 1px 1px oklch(0 0 0 / 0.35);
    --shadow-md: inset 0 1px 0 oklch(1 0 0 / 0.06),
      0 8px 24px -8px oklch(0 0 0 / 0.6), 0 2px 6px -3px oklch(0 0 0 / 0.5);
    --shadow-lg: inset 0 1px 0 oklch(1 0 0 / 0.08),
      0 28px 56px -18px oklch(0 0 0 / 0.7), 0 10px 22px -10px oklch(0 0 0 / 0.55);
    --shadow-accent: 0 10px 24px -8px oklch(0.72 0.15 164 / 0.35),
      0 2px 8px -3px oklch(0.72 0.15 164 / 0.28);
  }
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Layout primitives ────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.read {
  max-width: var(--measure);
}
section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  font-weight: 640;
  margin-top: 0.5rem;
}
h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
p {
  text-wrap: pretty;
}
.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--muted);
  margin-top: 0.875rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 130ms var(--ease-standard),
    box-shadow 130ms var(--ease-standard),
    background-color 130ms var(--ease-standard);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}
.btn-ghost {
  background: var(--surface-raised);
  color: var(--foreground);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-on-dark {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.28);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn-on-dark:hover {
  background: rgb(255 255 255 / 0.18);
}
.btn-light {
  background: #fff;
  color: #0d2f24;
  box-shadow: 0 10px 28px -10px rgb(0 0 0 / 0.45);
}

/* ── Site header ──────────────────────────────────────────────────────────── */
.site-header {
  position: relative;
  z-index: 2;
  padding-block: 1.25rem;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
}
.brand svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* ── Hero: the dark "sea" band ────────────────────────────────────────────── */
/* The dark band is painted by a pseudo-element that stops --overhang + the hero's
   own bottom padding SHORT of the hero's bottom edge. That is what lets the
   screenshot's lower edge sit on the light page ground while the rest of it stays
   in the band. Doing it with a negative margin on the screenshot does not work:
   on a content-sized parent a negative bottom margin just shrinks the parent, so
   the child never actually overhangs. */
.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  --hero-pad: clamp(2.5rem, 5vw, 4rem);
  --overhang: clamp(3rem, 7vw, 6rem);
  padding-bottom: var(--hero-pad);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--hero-pad) + var(--overhang)) 0;
  z-index: -1;
  background-color: #123f30;
  background-image: var(--grain-soft),
    radial-gradient(70% 55% at 18% 0%, rgb(102 241 194 / 0.13), transparent 70%),
    linear-gradient(150deg, #0a5d42 0%, #113a2d 58%, #0b2620 100%);
}
.hero-body {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.hero h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 34ch;
}
.hero .lead {
  color: rgb(255 255 255 / 0.86);
  max-width: 56ch;
}
.hero .eyebrow {
  color: rgb(207 245 227 / 0.92);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.hero-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.84);
}

/* Hero screenshot: floats out of the dark band into the page below it. */
.hero-shot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--radius-panel);
  border: 1px solid rgb(255 255 255 / 0.16);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6),
    0 12px 30px -12px rgb(0 0 0 / 0.4);
  overflow: hidden;
  background: #f4f8f6;
}
.hero-shot img {
  width: 100%;
  height: auto;
}
/* Phone width: the <picture> above swaps in the portrait phone screenshot, so the
   frame becomes a phone body instead of a wide browser panel. */
@media (max-width: 47.999rem) {
  .hero-shot {
    max-width: 16rem;
    margin-inline: auto;
    padding: 0.4rem;
    border-radius: 1.9rem;
    background: linear-gradient(160deg, #1c2b25, #0b1511);
  }
  .hero-shot img {
    border-radius: 1.55rem;
  }
}

/* ── Stat band ────────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.stat {
  background: var(--surface-raised);
  padding: 1.125rem 1.25rem;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
/* Exactly two columns from tablet up: the four mode cards read as a 2x2 block,
   which auto-fit would break into 3 + 1 orphan at desktop widths. */
@media (min-width: 48rem) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
}
.card .kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.card h3 {
  margin-top: 0.375rem;
}
.card p {
  margin-top: 0.625rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Screenshot figure inside the page body. */
figure {
  margin: 2.5rem 0 0;
}
.shot {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--surface);
}
.shot img {
  width: 100%;
  height: auto;
}
figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ── Topic list ───────────────────────────────────────────────────────────── */
.topics {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  display: grid;
  gap: 0.5rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.topics li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-size: 0.9375rem;
}
.topics b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ── Offline split (phone + copy) ─────────────────────────────────────────── */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .split {
    grid-template-columns: 19rem 1fr;
  }
}
.phone {
  justify-self: center;
  width: min(19rem, 100%);
  padding: 0.5rem;
  background: linear-gradient(160deg, #1c2b25, #0b1511);
  border-radius: 2.25rem;
  box-shadow: var(--shadow-lg), 0 0 0 1px oklch(0.37 0.028 168 / 0.5);
}
.phone img {
  width: 100%;
  height: auto;
  border-radius: 1.85rem;
}
.checks {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  display: grid;
  gap: 0.75rem;
}
.checks li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9375rem;
}
.checks svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  color: var(--success-text);
}

/* ── Access panel ─────────────────────────────────────────────────────────── */
.access {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.access .btn {
  margin-top: 1.5rem;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq {
  margin-top: 2rem;
  display: grid;
  gap: 0.75rem;
}
details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 1rem 1.125rem;
}
summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "+";
  color: var(--accent);
  font-weight: 700;
}
details[open] summary::after {
  content: "\2212";
}
details p {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 2.5rem 3.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: start;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
}
.site-footer a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.site-footer a:hover {
  color: var(--foreground);
}
.disclaimer {
  max-width: 46ch;
}

/* ── Legal pages (Impressum, Datenschutz, Haftungsausschluss) ─────────────────
   Same shell, but on the light paper background instead of the dark hero band,
   so the header brand needs the foreground colour. */
.site-header--light {
  border-bottom: 1px solid var(--border);
}
.site-header--light .brand {
  color: var(--foreground);
}
.legal {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
}
.legal h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 650;
}
.legal .stand {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.legal h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2.25rem;
  color: var(--foreground);
}
.legal p,
.legal li {
  margin-top: 0.75rem;
  color: var(--muted);
  line-height: 1.7;
}
.legal a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.legal a:hover {
  color: var(--foreground);
}
.legal .back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}
.legal .back:hover {
  color: var(--foreground);
}