/* Landing page, the story parts (public/landing.html — DESIGN.md →
 * Landingpage): the logo lockup, photos with my-nestory's notes floating over
 * them, «Kommt dir das bekannt vor?», the before/after example, the setup
 * service, the founder and the pointer to the architects' page. The frame,
 * type, buttons, tiles, prices and FAQ live in landing.css. */

@layer components {
/* Logo as the first thing in the hero, the punchline right beneath it. */
.landing-lockup {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.landing-lockup > .site-logo--wide { width: min(100%, 17rem); }
/* «Because every property has a story» — light and tracked like the wordmark. */
.landing-punchline {
  margin: 0;
  color: var(--color-brand-ink);
  font-size: var(--font-size-2xl);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: var(--lh-tight);
}

/* One line of trust in the hero: who built it. */
.landing-credential {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0;
  color: var(--color-accent-text);
  font-size: var(--font-size-md);
  font-weight: var(--fw-medium);
}
.landing-credential > .icon { flex: none; }

/* The value anchor above the prices. */
.landing-anchor {
  max-width: 36rem;
  margin: 0;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
  font-weight: var(--fw-semibold);
}

/* Photo on the right (default) or on the left of a split. */
.landing-split--photo-left > .landing-photo { order: -1; }
.landing-photo {
  position: relative;
  margin: 0;
}
.landing-photo > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.landing-photo--hero > img { aspect-ratio: 4 / 5; object-position: 55% 45%; }

/* my-nestory's notes over the hero photo — they appear one after another. */
.landing-bubble {
  position: absolute;
  display: flex;
  gap: var(--space-md);
  width: 17rem;
  padding: var(--space-14) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  animation: landingBubbleIn 0.6s var(--ease-out) forwards;
}
.landing-bubble--warranty { top: calc(var(--space-2xl) * -1); left: calc(var(--space-2xl) * -1); animation-delay: 0.4s; }
.landing-bubble--read { top: 20%; right: calc(var(--space-xl) * -1); animation-delay: 1.3s; }
.landing-bubble--ready { bottom: calc(var(--space-2xl) * -1); left: var(--space-xl); animation-delay: 2.2s; }
/* The speech-bubble tail, towards the photo. */
.landing-bubble::after {
  position: absolute;
  bottom: calc(var(--space-sm) * -1);
  left: var(--space-2xl);
  width: 1rem;
  height: 1rem;
  background: inherit;
  transform: rotate(45deg);
  content: '';
}
.landing-bubble-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-md);
}
.landing-bubble-icon--warn { background: var(--color-warn-bg); color: var(--color-warn-text); }
.landing-bubble-icon--ok { background: var(--color-ok-bg); color: var(--color-ok-text); }
.landing-bubble-icon--accent { background: var(--color-accent-bg); color: var(--color-accent-text); }
.landing-bubble-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--font-size-sm);
  line-height: var(--lh-base);
}
.landing-bubble-text > strong { font-size: var(--font-size-base); }
.landing-bubble-text > span { color: var(--color-muted); }
@keyframes landingBubbleIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* «Kommt dir das bekannt vor?»: seven everyday moments as tiles, the
   eighth tile is the relief (primary colour). */
.landing-questions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
}
.landing-questions > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}
.landing-questions strong { font-size: var(--font-size-reading); line-height: var(--lh-tight); }
.landing-questions span:not(.landing-question-icon) { color: var(--color-muted); font-size: var(--font-size-base); line-height: var(--lh-base); }
.landing-question-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
}
.landing-questions > .landing-relief {
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.landing-questions > .landing-relief > strong { font-size: var(--font-size-lg); }
.landing-questions > .landing-relief > span {
  color: color-mix(in srgb, var(--color-on-primary) 85%, transparent);
}

/* Before / after: a sheet of paper → the entry my-nestory makes of it. */
.landing-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  gap: var(--space-xl);
  align-items: center;
  max-width: 52rem;
  margin-inline: auto;
}
.landing-demo-paper,
.landing-demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.landing-demo-paper {
  background: var(--color-illustration-paper);
  transform: rotate(-2deg);
}
.landing-demo-line {
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-border);
}
.landing-demo-line--short { width: 60%; }
.landing-demo-card { background: var(--color-card-bg); }
.landing-demo-tag {
  position: absolute;
  top: calc(var(--space-md) * -1);
  left: var(--space-xl);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-neutral-bg);
  color: var(--color-muted);
  font-size: var(--font-size-mini);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.landing-demo-tag--after { background: var(--color-primary); color: var(--color-on-primary); }
.landing-demo-arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.landing-demo-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-md);
}
.landing-demo-row > dt { color: var(--color-muted); }
.landing-demo-row > dd { margin: 0; font-weight: var(--fw-semibold); text-align: right; }
.landing-demo-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  color: var(--color-ok-text);
  font-weight: var(--fw-semibold);
}

/* «Einrichten lassen»: the one-off price in the text column. */
.landing-service-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  margin: 0;
  color: var(--color-muted);
}
.landing-service-price > strong {
  color: var(--color-text);
  font-size: var(--font-size-3xl);
  letter-spacing: var(--tracking-tighter);
}
.landing-checks strong { color: var(--color-text); }

/* Trust band heading (the band itself: landing.css). */
.landing-band-title {
  max-width: 40rem;
  margin: 0 0 var(--space-2xl);
  font-size: var(--font-size-2xl);
  line-height: var(--lh-tight);
}

/* Who is behind it: a quote, not a card. */
.landing-founder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  margin: 0;
}
.landing-founder > blockquote {
  margin: 0;
  padding-left: var(--space-xl);
  border-left: 3px solid var(--color-primary);
}
.landing-founder > blockquote > p {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--lh-relaxed);
}
.landing-founder > figcaption { color: var(--color-muted); font-weight: var(--fw-semibold); }

/* A short pointer to another page (architects ↔ owners). */
.landing-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  background: var(--color-accent-bg);
}
.landing-teaser > .landing-stack { flex: 1 1 26rem; gap: var(--space-sm); }
.landing-teaser-title { margin: 0; font-size: var(--font-size-xl); line-height: var(--lh-tight); }

/* The closing box carries the logo once more. */
.landing-final > .site-logo--wide { width: min(100%, 13rem); }

/* === Narrower screens === */
@media (max-width: 900px) {
  .landing-split--photo-left > .landing-photo { order: 0; }
  .landing-photo--hero > img { aspect-ratio: 4 / 3; }
  .landing-bubble--warranty { left: var(--space-lg); }
  .landing-bubble--read { right: var(--space-lg); }
  .landing-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* On the phone the notes follow the photo instead of covering it. */
  .landing-photo--hero { display: flex; flex-direction: column; gap: var(--space-md); }
  .landing-bubble { position: static; width: auto; }
  .landing-bubble::after { display: none; }
  .landing-questions,
  .landing-demo { grid-template-columns: minmax(0, 1fr); }
  .landing-demo-arrow { transform: rotate(90deg); }
  .landing-demo-paper { transform: none; }
  .landing-teaser { padding: var(--space-xl) var(--space-lg); }
}
}