/* Einfache Seiten: Startseite, Installation, iPhone-Check */
* { box-sizing: border-box; }

html { background: #121d3a; }

body {
  margin: 0;
  min-height: 100vh;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: linear-gradient(#121d3a, #2f4170);
  color: #4a1712;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.4;
}

.card {
  max-width: 460px;
  margin: 0 auto 16px;
  padding: 22px 20px;
  border-radius: 18px;
  background: #fff8e8;
  outline: 2px dashed rgba(94, 23, 18, .3);
  outline-offset: -7px;
  box-shadow: 0 6px 14px rgba(5, 8, 20, .45);
}

h1 { margin: 6px 0 10px; font-size: 26px; line-height: 1.15; }
h2 { margin: 0 0 6px; font-size: 19px; }
p { margin: 8px 0; }

.app-icon { display: block; border-radius: 19px; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }

.steps { margin: 12px 0; padding-left: 24px; }
.steps li { margin-bottom: 10px; }

.note { color: #7a4a3c; font-size: 15px; }
.quiet { color: #7a4a3c; font-size: 15px; }

button, .button {
  display: inline-block;
  min-height: 46px;
  margin: 8px 8px 0 0;
  padding: 11px 18px;
  border: 0;
  border-radius: 23px;
  background: #c0242a;
  color: #fff8e8;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

button.secondary { background: #2f7d3c; }
button:disabled { background: #b9a79a; }

video { display: block; width: 100%; margin-top: 10px; border-radius: 10px; background: #000; }

/* iPhone-Check */
.check { display: flex; gap: 12px; align-items: flex-start; }
.check .state {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: #d9cdb8;
  color: #fff8e8;
  font-weight: 800;
  line-height: 34px;
  text-align: center;
}
.check .state::before { content: "?"; }
.check[data-state="ok"] .state { background: #2f7d3c; }
.check[data-state="ok"] .state::before { content: "✓"; }
.check[data-state="fail"] .state { background: #c0242a; }
.check[data-state="fail"] .state::before { content: "!"; }
.check .body { flex: 1; min-width: 0; }
.detail { margin: 2px 0 0; color: #7a4a3c; font-size: 15px; }