/* Public landing page (public/landing.html, served at /start): the site's
 * front door for visitors without a session. A page of its own outside the
 * shell — sections stacked on the page background, no cards. DESIGN.md →
 * Landingpage. Every value from the tokens; the two display sizes and the
 * section gap are landing-only tokens (typography.css, spacing.css). */

@layer components {
.landing {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Content column: one width for every section. */
.landing-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: max(var(--space-2xl), env(safe-area-inset-left)) max(var(--space-2xl), env(safe-area-inset-right));
}
.landing-wrap--narrow { max-width: 52rem; }

/* === Header: brand · section links · sign in + interest === */
.landing-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
}
.landing-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 4.5rem;
}
.landing-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.landing-brand > .site-wordmark { font-size: var(--font-size-xl); }
.landing-nav {
  display: flex;
  gap: var(--space-xl);
  font-size: var(--font-size-md);
  font-weight: var(--fw-medium);
}
.landing-nav > a {
  color: var(--color-muted);
  text-decoration: none;
}
.landing-nav > a:hover { color: var(--color-text); }
.landing-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

/* Link styled as a button: the page's actions go to other pages or a mail. */
.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 var(--space-xl);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background var(--transition-base);
}
.landing-btn:hover { background: var(--color-hover); }
.landing-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.landing-btn--primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.landing-btn--primary:hover { background: var(--color-primary-hover); }
.landing-btn--compact { min-height: 42px; padding: 0 var(--space-lg); }

/* === Shared section anatomy === */
.landing-section { padding-block: var(--space-section); }
.landing-section--tint { background: var(--color-neutral-bg); }
.landing-section--end { padding-top: 0; }
.landing-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 44rem;
  margin-bottom: var(--space-2xl);
}
.landing-section-head--center {
  align-items: center;
  max-width: none;
  text-align: center;
}
.landing-eyebrow {
  color: var(--color-accent-text);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.landing-eyebrow--pill {
  align-self: flex-start;
  padding: var(--space-6) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-accent-bg);
}
.landing-display {
  margin: 0;
  font-size: var(--font-size-display);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
}
.landing-headline {
  margin: 0;
  font-size: var(--font-size-headline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
}
.landing-lead {
  margin: 0;
  max-width: 36rem;
  color: var(--color-muted);
  font-size: var(--font-size-lg);
  line-height: var(--lh-relaxed);
}
.landing-muted { margin: 0; color: var(--color-muted); }

/* Two columns (text + picture), stacked on narrow screens. */
.landing-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: calc(var(--space-2xl) * 1.5);
  align-items: center;
}
.landing-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.landing-grid {
  display: grid;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landing-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.landing-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* === Hero === */
.landing-hero { padding-block: calc(var(--space-section) * 0.75) var(--space-section); }
.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.landing-soon {
  margin: 0;
  color: var(--color-subtle);
  font-size: var(--font-size-sm);
}
.landing-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-20);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-subtle);
  font-size: var(--font-size-base);
}
.landing-facts > li,
.landing-checks > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.landing-facts .icon,
.landing-checks .icon { flex: none; color: var(--color-primary); }

/* The house as a blueprint drawing (DESIGN.md → Illustrationen). */
.landing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-md);
  min-height: 26rem;
  margin: 0;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-illustration-paper);
  background-image:
    linear-gradient(var(--color-plan-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-plan-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.landing-house { width: 100%; height: auto; }
.landing-house-roof { fill: var(--color-zone-empty); stroke: var(--color-house-wall); stroke-width: 3; stroke-linejoin: round; }
.landing-house-body { fill: var(--color-illustration-paper); stroke: var(--color-house-wall); stroke-width: 3; }
.landing-house-zone { fill: var(--color-zone-documented); }
.landing-house-zone--attention { fill: var(--color-zone-attention); }
.landing-house-line { fill: none; stroke: var(--color-house-wall); stroke-width: 2; }
.landing-house-dim { fill: none; stroke: var(--color-subtle); stroke-width: 1.2; }
.landing-house-label { fill: var(--color-zone-text); font-size: 13px; font-weight: var(--fw-semibold); }
.landing-house-dimtext { fill: var(--color-subtle); font-size: 11px; text-anchor: middle; }

/* Two sample notifications floating over the drawing. */
.landing-toast {
  position: absolute;
  display: flex;
  gap: var(--space-md);
  width: 16rem;
  padding: var(--space-14) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  box-shadow: var(--shadow-md);
}
.landing-toast--alert { top: var(--space-xl); right: var(--space-xl); }
.landing-toast--read { top: 8rem; left: var(--space-lg); }
.landing-toast-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-md);
}
.landing-toast--alert .landing-toast-icon { background: var(--color-warn-bg); color: var(--color-warn-text); }
.landing-toast--read .landing-toast-icon { background: var(--color-ok-bg); color: var(--color-ok-text); }
.landing-toast-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--font-size-sm);
  line-height: var(--lh-base);
}
.landing-toast-text > strong { font-size: var(--font-size-base); }
.landing-toast-text > span { color: var(--color-muted); }

/* === Tiles: steps and features === */
.landing-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.landing-tile > h3 { margin: 0; font-size: var(--font-size-xl); }
.landing-tile > p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-md);
  line-height: var(--lh-relaxed);
}
.landing-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.landing-tile-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-bg);
  color: var(--color-accent-text);
}
.landing-step-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--fw-bold);
}

/* === Trust band === */
.landing-band {
  padding-block: calc(var(--space-section) * 0.75);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.landing-band-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.landing-band-item > strong { font-size: var(--font-size-lg); }
.landing-band-item > span {
  color: color-mix(in srgb, var(--color-on-primary) 82%, transparent);
  font-size: var(--font-size-md);
  line-height: var(--lh-base);
}

/* === Pricing === */
.landing-toggle {
  display: inline-flex;
  margin-top: var(--space-sm);
  padding: var(--space-xs);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}
.landing-toggle > button {
  min-height: 40px;
  padding: 0 var(--space-18);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font-weight: var(--fw-semibold);
}
.landing-toggle > button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.landing-prices { max-width: 60rem; margin-inline: auto; }
.landing-price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-2xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.landing-price--featured { border: 2px solid var(--color-primary); }
.landing-price > h3 { margin: 0; font-size: var(--font-size-xl); }
.landing-price > .landing-btn { margin-top: auto; }
.landing-price-badge {
  position: absolute;
  top: calc(var(--space-14) * -1);
  left: var(--space-2xl);
  padding: var(--space-5) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-mini);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.landing-price-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  margin: 0;
  color: var(--color-muted);
}
.landing-price-amount > strong {
  color: var(--color-text);
  font-size: var(--font-size-display);
  letter-spacing: var(--tracking-tighter);
}
.landing-price-note {
  margin: 0;
  color: var(--color-accent-text);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
}
.landing-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-md);
}
.landing-fineprint {
  margin: var(--space-2xl) 0 0;
  color: var(--color-subtle);
  font-size: var(--font-size-base);
  text-align: center;
}

/* === Architects === */
.landing-arch {
  box-sizing: border-box;
  padding: calc(var(--space-2xl) * 1.75);
  border-radius: var(--radius-xl);
  background: var(--color-accent-bg);
}
.landing-arch-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-arch-steps > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-18) var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.landing-arch-steps strong { display: block; font-size: var(--font-size-reading); }
.landing-arch-steps span:not(.landing-step-num) { color: var(--color-muted); font-size: var(--font-size-base); }

/* === FAQ: question buttons that open their answer === */
.landing-faq-group + .landing-faq-group { margin-top: var(--space-2xl); }
/* The group heading reads like the section eyebrow (.landing-eyebrow). */
.landing-faq-group-title {
  margin: 0 0 var(--space-md);
  color: var(--color-accent-text);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.landing-faq { border-top: 1px solid var(--color-border-input); }
.landing-faq-item { border-bottom: 1px solid var(--color-border-input); }
.landing-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  min-height: 4rem;
  padding: var(--space-lg) var(--space-xs);
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  text-align: left;
}
.landing-faq-q .icon { flex: none; color: var(--color-primary); transition: transform var(--transition-base); }
.landing-faq-q[aria-expanded="true"] .icon { transform: rotate(180deg); }
.landing-faq-a {
  margin: 0;
  padding: 0 var(--space-xs) var(--space-20);
  color: var(--color-muted);
  font-size: var(--font-size-reading);
  line-height: var(--lh-relaxed);
}

/* === Closing call to action + footer === */
.landing-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-18);
  padding: calc(var(--space-2xl) * 1.75) var(--space-2xl);
  border-radius: var(--radius-xl);
  background-color: var(--color-zone-documented);
  text-align: center;
}
.landing-footer {
  padding-block: var(--space-2xl) calc(var(--space-2xl) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  color: var(--color-subtle);
  font-size: var(--font-size-base);
}
.landing-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-2xl);
}
.landing-footer-row > a { color: var(--color-muted); }
/* Impressum · Datenschutz · AGB at the foot of every public page. */
.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
}
.landing-footer-links > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-muted);
}

/* === Legal pages (/impressum, /datenschutz, /agb — legal.html) === */
.landing-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}
.landing-legal-nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-muted);
  text-decoration: none;
}
.landing-legal-nav > a[aria-current="page"] {
  border-color: transparent;
  background: var(--color-accent-bg);
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}
.landing-legal-note {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-neutral-bg);
  color: var(--color-muted);
}
.landing-legal-section { padding-block: var(--space-lg); border-top: 1px solid var(--color-border); }
.landing-legal-section h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-xl);
  line-height: var(--lh-tight);
}
.landing-legal-block p,
.landing-legal-block ul {
  margin: 0 0 var(--space-md);
  color: var(--color-muted);
  font-size: var(--font-size-reading);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
}
.landing-legal-block ul { padding-left: var(--space-xl); }
.landing-legal-block li + li { margin-top: var(--space-sm); }
.landing-legal-address {
  display: flex;
  flex-direction: column;
  color: var(--color-muted);
  font-size: var(--font-size-reading);
  font-style: normal;
  line-height: var(--lh-relaxed);
}

/* === Narrower screens === */
@media (max-width: 900px) {
  .landing-nav { display: none; }
  .landing-split,
  .landing-grid--2,
  .landing-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .landing-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .landing-wrap { padding-inline: max(var(--space-lg), env(safe-area-inset-left)) max(var(--space-lg), env(safe-area-inset-right)); }
  .landing-header-cta { display: none; }
  .landing-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .landing-plan { min-height: 0; padding: var(--space-lg); }
  .landing-toast { position: static; width: auto; }
  .landing-price,
  .landing-arch { padding: var(--space-xl) var(--space-lg); }
  .landing-final { padding: var(--space-2xl) var(--space-lg); }
}
}