/* OnMeBaby – Website
   Nur HTML + CSS, keine Skripte, keine externen Ressourcen.
   Farben: App-Paletten „Leinen“ und „Espresso“ (src/theme/theme.ts), kein Blau.
   --glow steht wie in der App nur für Lichtblicke.
   Kontrast hell: Text #3B2E20 auf #F8F1E4 11.7:1 · Sekundär #6B5A47 5.9:1 · Linkfarbe #7D4E1C 6.3:1
   (Marken-Akzent #9A6428 hat nur 4.4:1 und wird deshalb nur für Flächen benutzt, nicht für Text.)
   Kontrast dunkel: Text #EFE3CE auf #1B1510 14.3:1 · Sekundär #BFB09A 8.5:1 · Akzent #C89056 6.5:1 */

:root {
  color-scheme: light dark;
  --surface: #F8F1E4;
  --surface-raised: #FFFBF3;
  --content: #3B2E20;
  --content-secondary: #6B5A47;
  --accent-text: #7D4E1C;
  --button: #7D4E1C;
  --on-button: #FFFFFF;
  --window: #9A6428;
  --glow: #A8701C;
  --rule: #E9DCC0;
  --radius: 16px;
  --measure: 40rem;
  --wide: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1B1510;
    --surface-raised: #32271A;
    --content: #EFE3CE;
    --content-secondary: #BFB09A;
    --accent-text: #C89056;
    --button: #C89056;
    --on-button: #1B1510;
    --window: #C89056;
    --glow: #E3B566;
    --rule: #3F3224;
  }
}

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

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--content);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; /* 17 px, iOS-Standard */
  line-height: 1.55;
}

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

a { color: var(--accent-text); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-raised);
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* Kopfzeile */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--content);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}
.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 32%, var(--surface) 0 44%, transparent 45%),
    var(--window);
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--content-secondary);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--content); }

/* Startseite: Hero */
main { overflow-x: clip; }

.hero { padding: 48px 0 56px; }
.hero .wrap {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 860px) {
  .hero { padding: 72px 0; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; }
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--content-secondary);
  font-size: 0.9375rem;
  font-weight: 600;
}
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; }
.hero h1 {
  max-width: 13ch;
  margin: 0 0 20px;
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 750;
}
.lead {
  max-width: 32rem;
  margin: 0 0 28px;
  color: var(--content-secondary);
  font-size: 1.1875rem;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--button);
  color: var(--on-button);
  font-weight: 600;
  text-decoration: none;
}
.button:hover { filter: brightness(1.08); }
.note { margin: 12px 0 0; color: var(--content-secondary); font-size: 0.9375rem; }

/* iPhone nur aus CSS. Aufbau von außen nach innen: Titanrand (.device), schwarzer
   Displayrand (Rand am Bild), Bildschirm, Glasspiegelung (::after).
   Tiefe entsteht durch echte 3D-Ebenen hinter dem Gerät (.back und .back::before).
   Die Statusleiste steckt im Screenshot selbst. */
.stage {
  perspective: 1600px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.device {
  --tilt-y: -19deg;
  --tilt-z: 2deg;
  --titanium: linear-gradient(118deg, #DAD5CE 0%, #7A756F 14%, #B4AFA8 34%, #6C6762 55%, #A8A39C 72%, #E2DDD6 88%, #827D77 100%);
  position: relative;
  padding: 2.5px;
  border-radius: 55px;
  background: var(--titanium);
  transform: rotateY(var(--tilt-y)) rotateX(8deg) rotateZ(var(--tilt-z));
  transform-style: preserve-3d;
}
.flip .device { --tilt-y: 19deg; --tilt-z: -2deg; }
.device img {
  box-sizing: border-box;
  width: 100%;
  border: 8px solid #060606;
  border-radius: 52.5px;
  background: #060606;
  /* Liegt immer vor den Gehäuse-Ebenen, auch wenn ein Browser 3D flach zeichnet. */
  position: relative;
  z-index: 1;
}
/* Gehäusetiefe und Schatten */
.device .back,
.device .back::before {
  position: absolute;
  inset: 0;
  border-radius: 55px;
  background: var(--titanium);
}
.device .back {
  transform: translateZ(-10px);
  box-shadow:
    0 3px 6px rgba(59, 46, 32, 0.28),
    0 22px 34px -12px rgba(59, 46, 32, 0.38),
    0 60px 90px -30px rgba(59, 46, 32, 0.5);
}
.device .back::before {
  content: "";
  transform: translateZ(5px);
}
/* Tasten: links Aktion und Lautstärke, rechts Seitentaste */
.device .keys {
  position: absolute;
  top: 23.5%;
  left: -2px;
  width: 2.5px;
  height: 45px;
  border-radius: 2px 0 0 2px;
  background: #8C877F;
  box-shadow: 0 54px 0 #8C877F, 0 -46px 0 -0.5px #8C877F;
  transform: translateZ(-5px);
}
.device .keys::before {
  content: "";
  position: absolute;
  top: 8px;
  left: calc(100% + 297.5px);
  width: 2.5px;
  height: 72px;
  border-radius: 0 2px 2px 0;
  background: #8C877F;
}
/* Kamera-Insel mit angedeuteter Linse */
.device::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 3.05%;
  left: 50%;
  width: 30%;
  aspect-ratio: 126 / 37;
  border-radius: 999px;
  background: radial-gradient(circle at 80% 50%, #1D2433 0 7%, #0B0C10 8% 15%, #000 17%);
  transform: translateX(-50%);
}
/* Glas: dezente Spiegelung über dem Bildschirm */
.device::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 10.5px;
  border-radius: 44.5px;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 26%, transparent 27%);
  pointer-events: none;
}

/* Bewegung im Apple-Stil, nur CSS: stark geneigt, und die Drehung verteilt sich auf
   eine lange Scroll-Strecke. Je länger die Strecke, desto kleiner jeder Schritt und
   desto flüssiger wirkt es. Ohne Unterstützung bleibt das iPhone leicht gekippt stehen. */
@keyframes stage-in {
  from { opacity: 0; transform: translateY(32px) scale(0.98); }
}
/* Jedes iPhone hat seine eigene Bewegung: */
/* Dreht sich aus der Seite nach vorn */
@keyframes move-turn {
  from {
    transform: translateY(40px) scale(0.95)
      rotateY(calc(var(--tilt-y) * 1.15)) rotateX(11deg) rotateZ(calc(var(--tilt-z) * 1.1));
  }
  to { transform: none; }
}
/* Liegt fast flach und richtet sich nach oben auf */
@keyframes move-rise {
  from { transform: translateY(100px) scale(0.94) rotateX(36deg) rotateZ(-3deg); }
  to { transform: none; }
}
/* Gleitet von der Seite herein und dreht sich dabei ein */
@keyframes move-slide {
  from { transform: translateX(100px) rotateY(-21deg) rotateZ(6deg); }
  to { transform: rotateZ(-1.5deg); }
}
/* Wächst aus der Tiefe nach vorn */
@keyframes move-grow {
  from { transform: translateZ(-280px) translateY(28px) rotateX(7deg); }
  to { transform: none; }
}
/* Schwingt von der anderen Seite herein und bleibt leicht geneigt stehen */
@keyframes move-swing {
  from { transform: translateY(28px) rotateY(28deg) rotateZ(-4deg); }
  to { transform: rotateY(-9deg) rotateX(3deg) rotateZ(0.75deg); }
}
/* Ruhig zum Schluss: nur ein sanftes Anheben, die Neigung bleibt */
@keyframes move-rest {
  from { transform: translateY(60px) rotateY(13deg) rotateX(8deg) rotateZ(-1.5deg); }
  to { transform: rotateY(10deg) rotateX(3deg) rotateZ(-0.75deg); }
}
@keyframes device-hero {
  to { transform: scale(1.02); }
}
@media (prefers-reduced-motion: no-preference) {
  .device { will-change: transform; }
  /* Blende am äußeren Element: Deckkraft am Gerät würde seine 3D-Ebenen flach drücken. */
  .hero .stage { animation: stage-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s backwards; }
  @supports (animation-timeline: view()) {
    .hero .device {
      animation: device-hero cubic-bezier(0.3, 0, 0.3, 1) both;
      animation-timeline: scroll(root);
      animation-range: 0 620px;
    }
    /* Früh: Die Bewegung beginnt, sobald das iPhone ins Bild kommt, und endet in der Bildmitte. */
    .story .device {
      animation: move-turn cubic-bezier(0.3, 0, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .move-rise .device { animation-name: move-rise; }
    .move-slide .device { animation-name: move-slide; }
    .move-grow .device { animation-name: move-grow; }
    .move-swing .device { animation-name: move-swing; animation-range: entry 0% cover 58%; }
    .move-rest .device { animation-name: move-rest; animation-range: entry 10% cover 60%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .device { transform: none; }
}

/* Abschnitte */
.section { padding: 56px 0; border-top: 1px solid var(--rule); }
.section h2 { margin: 0 0 10px; font-size: clamp(1.625rem, 4vw, 2.125rem); }
.section .intro { max-width: var(--measure); margin: 0; color: var(--content-secondary); }

/* Signatur: das Müdigkeitsfenster. Je breiter das Band, desto unsicherer die Schätzung. */
.windows {
  max-width: 46rem;
  margin: 32px 0 0;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.windows h3 { margin: 0 0 4px; font-size: 1rem; letter-spacing: 0; }
.windows ul { margin: 0; padding: 0; list-style: none; }
.windows li { padding: 14px 0 0; }
.track {
  position: relative;
  display: block;
  height: 20px;
  margin-top: 8px;
  border-bottom: 1px solid var(--content-secondary);
}
.track span {
  position: absolute;
  bottom: -7px;
  height: 14px;
  border-radius: 7px;
  background: var(--window);
}
.track .sure { left: 52%; width: 12%; }
.track .solid { left: 46%; width: 24%; }
.track .early { left: 38%; width: 40%; }
.hours {
  display: flex;
  justify-content: space-between;
  margin: 16px 0 0;
  color: var(--content-secondary);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.windows figcaption {
  margin: 14px 0 0;
  color: var(--content-secondary);
  font-size: 0.9375rem;
}

/* Geschichte: Text neben dem Bildschirm, abwechselnd */
.story {
  display: grid;
  gap: 32px;
  align-items: center;
}
.story + .story { margin-top: 64px; }
@media (min-width: 860px) {
  .story { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; }
  .story.flip { grid-template-columns: 300px minmax(0, 1fr); }
  .story.flip .stage { order: -1; }
}
.story h2 { margin: 0 0 10px; font-size: clamp(1.625rem, 4vw, 2.125rem); }
.question {
  margin: 0 0 8px;
  color: var(--content-secondary);
  font-size: 0.9375rem;
  font-weight: 600;
}
.story p { max-width: 34rem; color: var(--content-secondary); }
.story p:last-child { margin-bottom: 0; }

.lights {
  max-width: 34rem;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}
.lights li {
  position: relative;
  padding: 0 0 12px 28px;
}
.lights li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--glow);
}

.features {
  display: grid;
  gap: 28px 40px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) { .features { grid-template-columns: repeat(2, 1fr); } }
.features h3 { margin: 0 0 6px; font-size: 1.125rem; }
.features p { margin: 0; color: var(--content-secondary); }

.promise {
  max-width: var(--measure);
  margin: 24px 0 16px;
  padding: 0;
  list-style: none;
}
.promise li { padding: 12px 0; border-bottom: 1px solid var(--rule); }

.plans {
  display: grid;
  gap: 32px;
  margin-top: 32px;
}
@media (min-width: 720px) { .plans { grid-template-columns: repeat(2, 1fr); gap: 56px; } }
.plans h3 { margin: 0 0 8px; font-size: 1.125rem; }
.plans ul { margin: 0; padding-left: 1.2em; color: var(--content-secondary); }
.plans li { margin-bottom: 4px; }
.fine { max-width: var(--measure); margin: 28px 0 0; color: var(--content-secondary); font-size: 0.9375rem; }

.safety {
  max-width: var(--measure);
  margin: 0;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.safety h2, .safety h3 { margin: 0 0 8px; font-size: 1.125rem; letter-spacing: 0; }
.safety p { margin: 0 0 10px; }
.safety p:last-child { margin-bottom: 0; }

/* Rechtstexte und Support */
.page { padding: 48px 0 64px; }
.page .wrap > * { max-width: var(--measure); }
.page h1 { margin: 0 0 8px; font-size: clamp(2rem, 6vw, 2.75rem); }
.page h2 { margin: 40px 0 8px; font-size: 1.375rem; }
.page h3 { margin: 24px 0 6px; font-size: 1.125rem; }
.page .meta { margin: 0 0 32px; color: var(--content-secondary); }
.page address { font-style: normal; }
.page .safety { margin-top: 32px; }
.todo {
  padding: 1px 6px;
  border-radius: 4px;
  background: #FFE08A;
  color: #3B2E20;
  font-weight: 600;
}

.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  min-height: 52px;
  padding: 14px 0;
  font-weight: 600;
  cursor: pointer;
}
.faq details p { margin: 0 0 16px; color: var(--content-secondary); }

.contact {
  margin: 0 0 32px;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.contact p { margin: 0 0 12px; }
.contact p:last-child { margin-bottom: 0; }

/* Fußzeile */
.site-footer {
  padding: 32px 0 40px;
  border-top: 1px solid var(--rule);
  color: var(--content-secondary);
  font-size: 0.9375rem;
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--content-secondary);
}
.site-footer p { margin: 0; }

@media (prefers-contrast: more) {
  :root { --rule: currentColor; --content-secondary: var(--content); }
}

/* Lange deutsche Wörter dürfen auf schmalen Displays nicht überlaufen */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

/* HIG dark-mode.md: helle Inhaltsbilder abdunkeln, damit sie nachts nicht leuchten */
@media (prefers-color-scheme: dark) {
  .device img:not(.is-dark) { filter: brightness(0.86); }
  .device .back { box-shadow: 0 0 0 1px #5A4C3D, 0 40px 70px -24px rgba(0, 0, 0, 0.85); }
}