/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 */
/* Hallmark · genre: playful · macrostructure: workbench · theme: custom (Hayatlas Himmel) · enrichment: protagonists + real screenshots · nav: N1 · footer: Ft5 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Helles Blau oben, das nach unten in Weiß ausläuft */
  background: linear-gradient(180deg, var(--color-sky) 0, var(--color-sky-2) 700px, var(--color-paper) 1500px) no-repeat, var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); }
code, kbd { font-family: var(--font-mono); font-size: 0.88em; }
code { background: var(--color-accent-soft); color: var(--color-accent); padding: 0.08em 0.38em; border-radius: 6px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); letter-spacing: -0.03em; font-weight: 650; }
p { margin: 0; }

.wrap { width: min(var(--page), 100% - 2rem); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--color-surface); padding: var(--space-xs) var(--space-md); }

.eyebrow { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-3); margin-bottom: var(--space-sm); }
.lead { font-size: var(--text-lg); color: var(--color-ink-2); line-height: 1.55; max-width: 50ch; margin-top: var(--space-lg); text-wrap: pretty; }
.body-copy { color: var(--color-ink-2); max-width: var(--measure); margin-top: var(--space-md); text-wrap: pretty; }
.small { font-size: var(--text-sm); color: var(--color-ink-3); margin-top: var(--space-md); }
.accent { color: var(--color-accent-2); }

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  white-space: nowrap;
  font: 600 var(--text-md)/1 var(--font-body);
  color: var(--color-on-accent); background: var(--color-accent);
  border: 1px solid var(--color-accent); border-radius: var(--radius-pill);
  padding: 1.05rem 1.75rem; text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn:hover { background: var(--color-accent-2); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled, .btn[aria-busy="true"] { opacity: .6; cursor: progress; transform: none; }
.btn--ghost { background: transparent; color: var(--color-accent); border-color: var(--color-rule); box-shadow: none; }
.btn--ghost:hover { background: var(--color-accent-soft); }
.btn--small { padding: 0.62rem 1.05rem; font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 20; background: transparent; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; }
.nav.is-scrolled { background: color-mix(in oklch, var(--color-paper) 78%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom-color: var(--color-rule); }
.nav__row { display: flex; align-items: center; gap: var(--space-xl); height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-ink); font: 700 1.35rem/1 var(--font-display); letter-spacing: -0.035em; white-space: nowrap; }
.nav__links { display: flex; gap: var(--space-lg); margin-left: auto; }
.nav__links a { color: var(--color-ink-2); text-decoration: none; font-weight: 500; font-size: var(--text-sm); white-space: nowrap; }
.nav__links a:hover { color: var(--color-accent); }

/* Personen */
.person { pointer-events: none; user-select: none; filter: drop-shadow(0 14px 18px var(--color-shadow-soft)); }

/* Screenshots: echte Aufnahmen, nur Haarlinie */
.shot { margin: 0; }
.shot img { border-radius: 40px; border: 1px solid var(--color-rule); box-shadow: var(--shadow-lift); background: var(--color-surface); }
.shot--crop img { border-radius: var(--radius-md); }

/* Hinweise mit Pfeil */
.note { position: absolute; display: flex; align-items: center; gap: 6px; max-width: 15rem; font: 600 var(--text-sm)/1.3 var(--font-body); color: var(--color-ink); background: var(--color-warm-soft); padding: 0.5rem 0.8rem; border-radius: var(--radius-md); }
.arrow { position: absolute; width: 64px; height: 32px; fill: none; stroke: var(--color-warm); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* 1 · Hero */
.hero { padding: var(--space-xl) 0 var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-3xl); align-items: center; }
.facts { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; gap: 6px; font-size: var(--text-sm); color: var(--color-ink-2); }
.facts li { display: flex; gap: 10px; align-items: baseline; }
.facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok); flex: none; transform: translateY(-1px); }
.hero__stage { position: relative; display: flex; justify-content: flex-end; padding-right: 2%; min-height: 580px; }
.hero__stage .shot--phone { width: min(300px, 60%); position: relative; z-index: 1; }
.person--hero { position: absolute; left: -14%; bottom: -10px; height: 82%; width: auto; z-index: 2; }
.note--hero { top: 4%; left: -10%; z-index: 3; }
.note--hero .arrow { right: -58px; top: 18px; }

/* 2 · Atlas */
.band { background: var(--color-paper-2); padding: var(--space-3xl) 0; }
.sec-head { max-width: 760px; }
.atlas-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-2xl); align-items: end; margin-top: var(--space-3xl); }
.person--atlas { height: 400px; width: auto; justify-self: end; }
.atlas {
  background: color-mix(in oklch, var(--color-surface) 82%, var(--color-accent-soft));
  border: 1px solid var(--color-rule); border-radius: 28px; box-shadow: var(--shadow-lift);
  max-width: 780px; overflow: hidden;
}
.atlas__input { display: flex; align-items: center; gap: 14px; padding: 1.3rem 1.4rem; font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem); min-height: 4.6rem; }
.atlas__input > svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--color-ink-3); stroke-width: 2; stroke-linecap: round; }
.atlas__query { min-width: 0; overflow-wrap: anywhere; }
.caret { width: 2px; height: 1.3em; background: var(--color-accent); margin-left: -10px; animation: blink 1s steps(1) infinite; flex: none; }
.atlas__mic { margin-left: auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--color-paper-2); flex: none; }
.atlas__mic svg { width: 20px; height: 20px; fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-linecap: round; }
.atlas__plan { margin: 0 1.1rem 1.1rem; padding: 1rem 1.15rem; border-radius: 18px; background: var(--color-accent-soft); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.atlas__plan.is-hidden { opacity: 0; transform: translateY(6px); }
.atlas__head { font-weight: 600; font-size: var(--text-lg); }
.atlas__detail { color: var(--color-ink-2); font-size: var(--text-sm); margin-top: 2px; }
.atlas__confirm { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-sm); background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; font-size: var(--text-sm); padding: 0.5rem 0.95rem; border-radius: var(--radius-pill); white-space: nowrap; }
.atlas__confirm .key { font-family: var(--font-mono); }
.atlas__foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0.8rem 1.4rem; font-size: var(--text-xs); color: var(--color-ink-3); background: var(--color-tint-faint); }
.atlas__foot b { font-family: var(--font-mono); font-weight: 500; color: var(--color-ink-2); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: 6px; padding: 0 6px; margin-right: 4px; }
.atlas__ear { margin-left: auto; }
.says { list-style: none; padding: 0; margin: var(--space-2xl) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.says li { display: grid; gap: 6px; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-md); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.says li:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.says button { all: unset; cursor: pointer; font-weight: 600; color: var(--color-accent); overflow-wrap: anywhere; }
.says button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }
.says button.is-on { color: var(--color-ink); }
.says li:has(.is-on) { border-color: var(--color-accent); box-shadow: var(--shadow-card); }
.says span { font-size: var(--text-sm); color: var(--color-ink-2); }
.atlas-cta { margin-top: var(--space-xl); }

/* 3 · Kontrast */
.contrast { padding: var(--space-3xl) 0; }
.contrast__grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-2xl); align-items: end; margin-top: var(--space-3xl); }
.person--sit { width: 100%; height: auto; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.compare__col { padding: var(--space-xl); border-radius: var(--radius-md); border: 1px solid var(--color-rule); }
.compare__col h3 { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.compare__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.compare__col li { padding-left: 1.6rem; position: relative; }
.compare__col--before { background: var(--color-paper-2); color: var(--color-ink-2); border-color: transparent; }
.compare__col--before li::before { content: "–"; position: absolute; left: 0.3rem; color: var(--color-ink-3); }
.compare__col--after { background: var(--color-surface); box-shadow: var(--shadow-card); border-color: var(--color-accent-soft); }
.compare__col--after li::before { content: "✓"; position: absolute; left: 0.2rem; color: var(--color-ok); font-weight: 700; }

/* 4 · Rundgang */
.tour { padding: 0 0 var(--space-3xl); }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; padding: var(--space-3xl) 0 0; }
.step--flip > :first-child { order: 2; }
.step__no { font: 500 var(--text-sm)/1 var(--font-mono); color: var(--color-accent); margin-bottom: var(--space-sm); }
.step__copy p:not(.step__no):not(.small) { color: var(--color-ink-2); margin-top: var(--space-md); max-width: 52ch; }
.ticks { list-style: none; padding: 0; margin: var(--space-lg) 0 0; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: baseline; font-weight: 500; }
.ticks li::before { content: "✓"; color: var(--color-ok); font-weight: 700; flex: none; }
.shot--crop { max-width: 460px; justify-self: center; }
.shot--solo { width: min(340px, 80%); justify-self: center; }
.shot-pair { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 660px; }
.shot-pair .shot--phone { width: min(330px, 60%); position: relative; z-index: 1; margin-right: 22%; }
.person--clock { position: absolute; right: -6%; bottom: -8px; height: 70%; width: auto; z-index: 2; }
.shot-pair { padding-bottom: 4.5rem; }
.note--remind { bottom: 0; left: 4%; z-index: 3; }
.note--remind .arrow { right: -50px; top: -26px; transform: rotate(-28deg); }

.snippet { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: 24px; padding: var(--space-2xl); box-shadow: var(--shadow-card); }
.snippet__label { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-3); text-transform: uppercase; letter-spacing: .06em; }
.snippet__typed { font-size: var(--text-xl); margin: 6px 0 var(--space-lg); }
.snippet__out { margin-top: 6px; line-height: 1.75; }
.snippet__out mark { background: var(--color-accent-soft); color: var(--color-accent); border-radius: 5px; padding: 0.05em 0.3em; font-weight: 500; }
.snippet__guard { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px dashed var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }

.keys { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: 24px; padding: var(--space-xl); box-shadow: var(--shadow-card); }
@media (hover: none) { .keys__try { display: none; } }
.keys__try { font-size: var(--text-sm); color: var(--color-ink-2); margin-bottom: var(--space-md); }
.keys__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.keys__list li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-md); padding: 0.7rem 0.9rem; border-radius: 10px; transition: background .15s, opacity .25s, transform .25s; }
.keys__list li span { color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keys__list li.is-sel { background: var(--color-accent-soft); }
.keys__list li.is-gone { opacity: 0; transform: translateX(16px); }
.keys__caps { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.keys__caps span { white-space: nowrap; }
kbd { display: inline-block; min-width: 1.7em; text-align: center; padding: 0.12em 0.45em; margin-right: 3px; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-bottom-width: 2px; border-radius: 6px; color: var(--color-ink); }

.step--privacy { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.person--umbrella { height: 420px; width: auto; justify-self: center; }

/* 5 · Steuer */
.band--accent { background: linear-gradient(160deg, var(--color-band-top), var(--color-band-bottom)); color: var(--color-on-accent); }
.band--accent .lead, .band--accent .helm__body p { color: var(--color-on-accent-2); }
.helm__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); }
.helm__points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-2xl) 0 0; }
.helm__points div { padding: var(--space-xl); border-radius: var(--radius-md); background: var(--color-on-accent-fill); border: 1px solid var(--color-on-accent-line); }
.helm__points dt { font-weight: 600; }
.helm__points dd { margin: 4px 0 0; color: var(--color-on-accent-3); font-size: var(--text-sm); }

/* 6 · Geräte */
.devices { padding: var(--space-3xl) 0; }
.devices__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
.devices__copy > p:not(.lead) { color: var(--color-ink-2); margin-top: var(--space-md); max-width: 52ch; }
.devices__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.devices__shots .shot:last-child { transform: translateY(var(--space-2xl)); }

/* 7 · FAQ */
.faq__wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); align-items: start; }
.faq__list { display: grid; gap: var(--space-md); }
.faq details { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: 0 var(--space-xl); }
.faq summary { cursor: pointer; list-style: none; font-weight: 600; padding: var(--space-lg) 0; display: flex; justify-content: space-between; gap: var(--space-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); font-size: 1.3rem; line-height: 1; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--space-md); color: var(--color-ink-2); }

/* 8 · Schluss */
.final { padding: var(--space-3xl) 0 0; overflow: hidden; }
.final__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-xl); align-items: end; }
.final__copy { padding-bottom: var(--space-3xl); }
.final__icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: var(--shadow-lift); margin-bottom: var(--space-lg); }
.person--wave { height: 520px; width: auto; justify-self: center; }
.wait { margin-top: var(--space-xl); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); max-width: 560px; align-items: end; }
.wait__field { display: grid; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.wait input[type="email"] { font: 400 var(--text-md)/1.2 var(--font-body); color: var(--color-ink); padding: 0.9rem 1.1rem; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); min-width: 0; width: 100%; }
.wait input[type="email"]:hover { border-color: var(--color-ink-3); }
.wait input[type="email"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.wait input[aria-invalid="true"] { border-color: var(--color-err); }
.wait__fine { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-ink-3); }
.hp { position: absolute; left: -9999px; }
.banner { grid-column: 1 / -1; padding: 0.8rem 1rem; border-radius: var(--radius-md); font-weight: 500; font-size: var(--text-sm); }
.banner.is-ok { background: var(--color-ok-soft); color: var(--color-ok); }
.banner.is-err { background: var(--color-err-soft); color: var(--color-err); }
.final__alt { margin-top: var(--space-lg); color: var(--color-ink-2); }

/* Fuß */
.foot { border-top: 1px solid var(--color-rule); padding: var(--space-3xl) 0 var(--space-xl); background: linear-gradient(180deg, var(--color-paper), var(--color-sky-2)); }
.foot__statement { font: 700 var(--text-2xl)/1.05 var(--font-display); letter-spacing: -0.04em; color: var(--color-accent); max-width: 18ch; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-3); }
.foot__row nav { display: flex; gap: var(--space-lg); }
.foot__row a { color: var(--color-ink-2); white-space: nowrap; }

/* Leiste unten nach dem dritten Schritt */
.sticky-cta { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 0); z-index: 30; display: flex; align-items: center; gap: var(--space-md); padding: 0.5rem 0.5rem 0.5rem 1.2rem; background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); box-shadow: var(--shadow-lift); font-weight: 500; font-size: var(--text-sm); white-space: nowrap; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.sticky-cta.is-away { opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }

/* Einblenden */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* Tablet */
@media (max-width: 960px) {
  .hero__grid, .devices__grid, .faq__wrap, .final__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { min-height: 0; justify-content: center; padding: 0; margin-top: var(--space-lg); }
  .hero__stage .shot--phone { width: min(280px, 58%); margin-left: 30%; }
  .person--hero { height: 78%; left: 0; }
  .step, .step--privacy { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .step--flip > :first-child { order: 0; }
  .step__copy { order: -1; }
  .helm__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contrast__grid { grid-template-columns: minmax(0, 1fr); }
  .person--sit { width: 220px; justify-self: center; order: 2; }
  .final__copy { padding-bottom: 0; }
  .person--wave { height: 380px; }
  .devices__shots { max-width: 560px; justify-self: center; }
  .person--clock { right: 0; }
}

/* Telefon */
@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav__row { justify-content: space-between; }
  .hero { padding-top: var(--space-md); }
  .hero__stage .shot--phone { width: 60%; margin-left: 36%; }
  .person--hero { height: 70%; left: -4%; }
  .note { position: static; margin-top: var(--space-md); max-width: none; }
  .note .arrow { display: none; }
  .hero__stage, .shot-pair { flex-direction: column; align-items: center; }
  .hero__stage .note { order: 2; align-self: stretch; }
  .shot-pair { min-height: 0; padding-bottom: 0; }
  .shot-pair .shot--phone { width: 64%; margin-right: 30%; }
  .person--clock { height: 64%; right: -2%; bottom: 3.5rem; }
  .atlas-grid { grid-template-columns: minmax(0, 1fr); }
  .person--atlas { height: 220px; justify-self: start; margin-bottom: calc(-1 * var(--space-xl)); position: relative; z-index: 1; }
  .atlas__ear { margin-left: 0; }
  .says, .compare, .helm__body, .helm__points { grid-template-columns: minmax(0, 1fr); }
  .keys__list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .person--umbrella { height: 300px; }
  .wait { grid-template-columns: minmax(0, 1fr); }
  .wait .btn { width: 100%; }
  .devices__shots .shot:last-child { transform: none; }
  .sticky-cta span { display: none; }
  .sticky-cta { padding: 0.4rem; }
}